Designing the user interface<br />A Summary                                       EDIT 6325<br />Mr. Jamal Qaiyyim<br />19...
Introduction<br />The design of a web-based user interface (website) can be very tricky.  The  beginner may want to add al...
 The planning document serves as the foundation for the design
 The planning document also serves as a means to keep the designer/design team focused.</li></li></ul><li>Outline<br />Des...
 Consistency
 Template
 Content
 Balanced layout
 Movement
 Color scheme
Independence of function
 Unified piece
 Interactive interface
 Link effectively
 Sense of context
 Feedback
 Equal access</li></li></ul><li>metaphor<br />A metaphor is a figurative representative that allows the user to paint a me...
Metaphor (con’t)<br />To be effective metaphors must be:<br /><ul><li> Concrete
 Obvious
 Appropriate
 Reinforce the message</li></li></ul><li>Consistency<br />When a website is the same from one page to another it is consis...
Consistency (con’t)<br />The red line lets the user know where they are.<br />Webpage navigation <br />The center of the h...
Consistency (con’t)<br />The red line lets the user know where they are.<br />The “SEE ALL VEHICLES” is consistent with th...
template<br />The template is a layout for the website.  It is the frame on which you build the content of the website.  T...
content<br />The information that populates the website is the content.  The content is what draws people to the website. ...
Upcoming SlideShare
Loading in...5
×

Jamal Qaiyyim Ch3

626
-1

Published on

1 Comment
0 Likes
Statistics
Notes
  • Jamal,

    Your presentation was quite informative. The references to the items in the outline provided insght to the topic.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
626
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Jamal Qaiyyim Ch3

  1. 1. Designing the user interface<br />A Summary EDIT 6325<br />Mr. Jamal Qaiyyim<br />19 September 2009<br />
  2. 2. Introduction<br />The design of a web-based user interface (website) can be very tricky. The beginner may want to add all the bells and whistles in order to impress the user. While it is admirable, it is not necessary. Here some things to consider when designing a website, or user interface:<br /><ul><li>Remember the user interface should be user-centered
  3. 3. The planning document serves as the foundation for the design
  4. 4. The planning document also serves as a means to keep the designer/design team focused.</li></li></ul><li>Outline<br />Design consideration when planning an user-interface: <br /><ul><li>Metaphor
  5. 5. Consistency
  6. 6. Template
  7. 7. Content
  8. 8. Balanced layout
  9. 9. Movement
  10. 10. Color scheme
  11. 11. Independence of function
  12. 12. Unified piece
  13. 13. Interactive interface
  14. 14. Link effectively
  15. 15. Sense of context
  16. 16. Feedback
  17. 17. Equal access</li></li></ul><li>metaphor<br />A metaphor is a figurative representative that allows the user to paint a mental model that links the user to the website. <br />Metaphor<br />http://www.apartment.com this website is for apartment hunting all over the United States. <br />
  18. 18. Metaphor (con’t)<br />To be effective metaphors must be:<br /><ul><li> Concrete
  19. 19. Obvious
  20. 20. Appropriate
  21. 21. Reinforce the message</li></li></ul><li>Consistency<br />When a website is the same from one page to another it is consistent if the look and navigation remains the similar. The user get the feel of the website from one web page to the next.<br />
  22. 22. Consistency (con’t)<br />The red line lets the user know where they are.<br />Webpage navigation <br />The center of the home page stays the consistent as you drill down into the website <br />
  23. 23. Consistency (con’t)<br />The red line lets the user know where they are.<br />The “SEE ALL VEHICLES” is consistent with the home page<br />
  24. 24. template<br />The template is a layout for the website. It is the frame on which you build the content of the website. The template provides consistency, shortens development time, and prevents object shift. There is nothing more annoying about a website when the content shifts as you go from webpage to webpage.<br />
  25. 25. content<br />The information that populates the website is the content. The content is what draws people to the website. A major consideration when designing a website is the content, how many levels users must navigate. Content can consist of graphics, text, hyperlinks, and multimedia<br />
  26. 26. Balanced layout<br />Balance refers to the optical weight of the webpage. There different types of balance:<br /><ul><li> Symmetrical – is achieved by arranging elements as horizontal or vertical mirrored images on both sides of a center line
  27. 27. Asymmetrical – is achieved by arranging nonidentical elements on both sides of a center line
  28. 28. No balance – has elements arranged on the website without regard to the weight on both sides of the center line.</li></li></ul><li>Balanced layout (con’t)<br />A balanced webpage<br />
  29. 29. movement<br />How the eye moves across the webpage is called movement. The eye is drawn to the certain elements of the webpage. The eyes are the key to the soul and emotions. As the eye moves across the webpage there is an emotional connection established with the user. Designers try and control where the user’s eyes go by utilizing graphics, lines, colors gradients and animations.<br />
  30. 30. Color scheme<br />Color schemes convey information to the user. Choosing the wrong color can convey the wrong message to the user.<br />Red<br />Black<br />Yellow<br />* Black is associated with evil, fear, and death<br />
  31. 31. Independent of functional<br />Websites need to be consistent from webpage to webpage. There are certain icons, information, and graphics that needs to be on every page associated with the website. This will remind the user that they are still in the your website. By not being able to stand on its own and not being functional, the website owner stands a chance of losing potential business.<br />
  32. 32. Unified piece<br />There are two types of unity a web designer should be concerned with:<br /><ul><li> Intra-page unity – has to do with how the various page elements relate
  33. 33. Inter-page unity – is the interactivity design that users encounter as they navigate from webpage to webpage. </li></li></ul><li>Unified piece (con’t)<br />Intra-page unity. Here on the Seattle’s Best home page you can see the unity of the text, graphics, and links. <br />
  34. 34. Unified piece (con’t)<br />Inter-page unity. By drilling down in the site, clicking the ‘Coffee” link, you can see the unity and how every item is related to the website. <br />
  35. 35. Interactive interface<br />Website users do not sit and wait for the website to automatically do things. Users want control and interactivity. By giving the user control, they feel as though they are a part of the adventure. <br />This video shows the interactivity on the Nissan website.<br />
  36. 36. Link effectively<br />The links have to be effective. They need to get the user where they want to be. The website should not contain too many links. There are options to use mouse rollover. Mouse rollover “mouseover” is the interaction between the mouse and a hotspot on the website. The link should keep the user within your website. <br />
  37. 37. Sense of context<br />The web designer needs to design the website so that the user has a sense of the website no matter where they go within the website. The links, navigation, graphics and text should aid in providing the context. <br />The Nissan website provides context to the user that lets them know they are within a car website. <br />
  38. 38. feedback<br />The website’s ability to establish a relationship the user to the company by providing an opportunity for feedback. Some samples:<br /><ul><li> Contact us
  39. 39. Comments
  40. 40. Feedback</li></li></ul><li>Equal access<br />With millions of people having access to the internet, there are just as many people with disabilities who access web-based information. The web designer and the website owner needs to take people with disabilities in consideration during the planning phase of the website. One such of providing access is the use of alternate text. <br />
  41. 41. Equal access (con’t)<br />This website contains alternate text and is 508 compliant.<br />
  42. 42. summary<br />There are a lot of factors to consider when planning and designing a website. At first it may seem overwhelming, however after you have done it a few times it becomes a little easier. Take your time and look for your own examples of the different factors discussed here. <br />*Reference: Coorugh, Calleen, and Shuman, Jim; Multimedia For The Web Revealed ‘”Creating Digital Excitement”, 2006<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×