Universiti Teknologi Malaysia

Thursday, November 28, 2013

Week 10 : Presentation of 50% Web Development

Our presentation 0f 5-% Web development been evaluate by Dr.Fendy.
1 phrase by Dr. that we have and MUST take note is :
"MAKE SIMPLE DESIGN, BUT CLOSE ENOUGH TO END-USER"


SELF REVIEW

Our group's comments by Dr.Fendy as per below :

- has identity / consistency
- Information Design - discovery learning not strong enough
- Study more on Principles of Discovery Learning
- Visual Design OK
- Interaction Design OK- 'Explore'
- Focus on Topology - OK
 
Yiippiieee.. Thanks for my beloved group member Afi, June and LInda. Muaacckkksss

Team working and team spirit is very important when working on developing a website. In developing our project, my group member works very well and we support each others. Each individual is working hard to finish this project. The cooperation and collaboration from my team mates make me fell very motivated in doing this project. I am really appreciated the three of my group members Linda, Afi and June.

Thursday, November 21, 2013

Week 9 : Mid term break & Group Discussion for Web Development

Hoorraayy....
Hoorraayy....
Its a holiholiday... Lalalala

Dont too horraayy.. Because after this mid term, will be our presentation of 50% web development.. Sad.. Scary.. We dont hv so much time!

So lets start it early since Dr.Fandy ha canceled the class a week after the mid term break!
 
SELF REVIEW
Team working and team spirit is very important when working on developing a website. In developing our project, my group member works very well and we support each others. Each individual is working hard to finish this project. The cooperation and collaboration from my team mates make me fell very motivated in doing this project. I am really appreciated the three of my group members Linda, Afi and June.

Monday, November 18, 2013

Week 8 : Visual Design

Visual Design is about planning how our web site will look. We design the interface of our website.

There are several things need to be considered when visualizing our Web Site which are :
  • What colors will look good together on our site?
  • What fonts or styles you will use for the written part of your web pages?
  • What graphics and multimedia effects are needed?
  • How will all of these elements be combined or arrange into an attractive layout?
Elements of User Interface
  • A background that reflects the theme.
  • Colours or Images
  • Foreground elements that reflect the theme.
  • Content and Links (title, headings, sub headings,body text, illustrations, captions)
  • Other elements that support the theme.
  • Text, images, buttons, navigation bars, animation,video, etc.
  • Typography
  • Keep it simple
General Issues in visual design :
  • Limit number of fonts per page and per site
  • Use the same fonts consistently throughout the site

Make good font choices :
• Sans serif vs. serif ?
• Commonly installed fonts
• Mood
• Readability

General application user interface guidelines: 
  1. Always use cute icons, buttons, and graphics. Everyone loves big red hearts, pink bunnies, and yellow smily faces.
  2. Don't be afraid to experiment with colors!
  3. Your application should play fun sounds while operating to keep the users entertained.
  4. Never, ever, under any circumstance use the OS-native graphical controls or widgets. Users get bored of the same old buttons, text boxes, and stuff.
  5. When possible, disable window management and use unusual, oddly placed graphics for the windowing functions such as the window close option.
  6. When writing your own controls or widgets, make absolutely sure they look and feel nothing like the OS-native widgets or anything else the user might expect. Otherwise you might accidentally make the user think that your application is actually designed for their OS.
  7. Use your own creative ideas on how a "save as" dialog should look and work. Built in ones are always too limiting.
  8. It is important that the user should never be able to tell the difference between a checked and unchecked check box or option box.
  9. Always use obscure or poorly drawn graphics for your tool bar buttons, and never put text on them.
  10. Avoid including a preferences or options dialog. Instead, let the user use the standard OS provided text editor or an editor of their choosing to edit text configuration files.
  11. Users need time to think about what they are doing and get coffee. Your application should always take at least 5 minutes to load even on the fastest available computer.
  12. Make sure an accidental double-click on a single-click item does something really nasty or unexpected.
  13. Tool tips are the perfect way to display critical information.
  14. To get the most screen space, force your application to always run maximized.
  15. Always make the default positions of floating properties windows cover something important.
  16. Use the most exotic fonts you can find.
  17. Your application's user interface should be flexible and customizable to the point where if the user accidentally sneezes on the mouse or keyboard they will have to spend the next half an hour setting things back.
  18. Let a 5-year old draw your graphics, including your corporate logo.
  19. File browsing dialogs are not needed, users can easily remember and type in long file paths.
  20. Design your application so it requires the user to set their tiny monitor to 10512 X 7430.
  21. Always crash at a critical step and then display a fake apology to the user.
  22. It is a mistake to make use of application hooks in the native desktop environment such as new file templates, file associations, or program menu icons.
  23. The exception to the above is placing icons in the system tray. Place as many icons as you can in the system tray and make sure that the user can not remove them.
  24. If your program implements keyboard shortcuts be original and make them completely different from any other applications.
  25. Rent extra UI space in your application out for advertising. Advertising benefits the users and your wallet.
  26. Never underestimate the power of nudity.
  27. Don't forget to embed a hidden video game as an "easter egg".


 

 

SELF REVIEW


Visual design is about our website interface. How the templates and layout of the website look like. In this phase, we are going to planning on how our website is will look. This including the combination color that we used for our website, the font style for written part of pages, graphic and multimedia effects are needed, and how will all the elements be combined or arrange into an attractive layout. All those thing are very important for the visual design. Other than that, to make sure our website is very good in interface, there are some guidelines that we need to follow in order to produce a good website.
 

 

Saturday, November 2, 2013

Week 7 : Information Design

Writing for the web is a challenge. There are usually word length restrictions, the fact that usescan rather than read every word, and sometimes style guides to adhere to.
There are enough writing tips online to keep you reading for longer than you probably desire.
Here are several tips that have been the most useful for write the content of website:
 
1. Know your audience
This sounds obvious but is often taken for granted. The only way we can write relevant copy that is targeted at the right audience in the right tone of voice, is to understand who that audience is. Depending on where our audience are located, we may have to include local expressions or if writing for a wide audience be specific with things such as dollars. If it is US dollars then say so. If it is Cardiff in Wales then say so as there is also a Cardiff in New Zealand and other countries.
 
2. Decide why we are writing?
Linked to the previous tip, as well as knowing who we are writing for our need to know why we are writing for them. Is it to get them to register, persuade them to buy something, deliver information to them or get them to subscribe to something?
Our answer to this question should determine what we write.

 
3. Headlines
A well thought of and clear headline can generate four times the interest of a poor one. Headlines shouldn't be longer than 7 words and should be written in the present tense.
 
4. Upper case
Avoid the use of ALL UPPER CASE in your copy as it takes 57% longer to read. Also avoid starting every word with a capital letter in our headings.
 
5. Choose the right words
Certain words can hold the reader's attention whilst others can turn them off. Words that people like include thoughtful, imagination, progress, and ambition. Less popular words include dispute, failure, weak, and extravagant.
Use contractions. That is, use 'you're' instead of 'you are' and 'doesn't' instead of 'does not'. Whilst some are of the opinion that the contractions are bad English, they do make the copy less formal and more conversational which is often the tone of voice and style that is required on the web.]

 
6. Acronyms
Avoid using these if possible. It would be careless to assume that everybody who visits your site will understand the meaning of any acronyms you use. However, this is linked to knowing your audience. The same rule here applies to jargon, avoid as best you can, cutting out any unnecessary complexities.

7. Punctuation
Minimise punctuation as best you can. Punctuation marks can be difficult to discern
on screens, especially semi-colons, so try using commas or shorter sentences
instead.

8.Effective Hyperlinks
Your hyperlinked words tend to stand out against standard copy so should be relevant and motivate the user into carrying out an action. I don’t like ‘click here’ but if this is used, it is more effective to use it along with some contextual information, so ‘click here to apply for a loan’. This way the user knows exactly where they will be led.

9.The right length
Keep your sentences short. If they are too long then reader’s interest will dip and your message will become muddled. One rule of thumb is that sentences should be between 15 and 20 words long. Please don’t count all my sentences in this article, just in case I broke the rule.
Paragraphs should be no more than 5 lines of type long, or in depth. Also, a good measure to abide by is that there should be no more than three sentences per paragraph.Make your copy digestible by using sub sections, headings and lists where appropriate. If you do use lists try not to have more than 6 items in each one.

10. Proof read
Another obvious point but not always one that is carried out. Proof reading and editing should be a matter of course when it comes to writing. If a user is deep in your text and spots an error it will immediately break the connection between them and your site.

11. Descriptive Titles
The title of your article should tell the reader what it’s about. Some people like to use humor, while others prefer to play it straight. It doesn’t matter, as long as readers know what to expect. Readers want to know what’s in it for them. A good title will tell them.
That’s one of the reasons that article titles with numbers in them tend to do well. If your article is called: ‘Seven Ways To Land Your Perfect Partner’, then readers know what they will get.

12. Direct Address
One of the things I love about writing web content is that you can address readers directly. It’s like having a conversation with someone who is in the same room. When writing web content, your writing voice is often like your speaking voice, and it’s a great idea to let your personality shine through.

13. Clear Language
With web content, you are writing for an international audience, and not everyone speaks the same first language as you do. That’s why it’s best to stay away from obscure expressions and jargon and use clear and simple language. You can also add examples to make it even easier for reader to understand.
 
14. Break It Up
If you want your web content to be user friendly, you have to make it digestible. That means breaking it into small chunks, usually with one main idea in a paragraph. It’s also a good idea to make the article scannable by adding a subheading for each main idea.That means that readers will be able to glance at the subheadings and pick out the main ideas.

Website Content Tips: 6 Ways to Grab Readers’ Attention :

1. Chunk content
Separate information into digestible "chunks" to facilitate scanning and reading.
According to Crawford Killian, author of Writing for the Web, 100 words in one solid block of text is a symptom of paragraphosis, in which the eye becomes unable to focus or track through a mass of type. Chunking content creates natural breaks and helps readers absorb information in manageable pieces. A chunk can have two or three short paragraphs, each with a subhead, all surrounded by lots of white space. Avoid transitional phrases so your content chunks can stand on their own. Information on the web in consumed in modular rather than linear style.

2. Use instructive headings
Heat maps and eye tracking studies repeatedly show that headings grab our eye.
To leverage their impact, use descriptive phrases that inform the reader what the content is about. Place information carrying words at the beginning of headings to quickly convey meaning and use language your readers understand.

3. Format for scannability
  • Bold information-rich keywords to help symbolize what a paragraph is about. Be careful not to go overboard. Too many bolded words are distracting and hard to read.
  • Use bulleted and numbered lists when appropriate. Bullet lists rank right next to headings as the most-scanned areas of a page. Bullets are a great place to convey key benefits.
  • Consider tables for voluminous information. Tables or matrices can quickly convey and compare information that is easily lost in text.
4. Use anchor points
Effective anchor points help draw attention. Use product hero shots, photos, graphics, and captions to guide the eye and reinforce your message.
 
5. Be clear and concise
Write in the active voice, use strong verbs and simple sentence construction, and get to the point. Flowery or "marketing-oriented" prose does more than slow readers down – it annoys them.

6. Employ good design
Good design helps convey your message and instills confidence and trust.
Proper use of visual segmentation and hierarchy will do wonders for reader comfort and, ideally, help guide readers to take the next step – interact with you.




SELF REVIEW
There are several things we need to think about in the process of information design. This is very important in the information design part. Firstly we need to think what is message we want to share with the user, second who is our target audience, third, what is our purpose of the of website, whether it for share idea or knowledge or what. Other thing is background of intended audience, whether they already have some ideas about our topic in our website or they are very new. The last is structure of message be organized in most effectively.

When developing educational website, we must considered on learning theories, learning and teaching strategy and learning style for our website. This is important to make sure the user can gain the knowledge with the appropriate strategy that has been used.