Your SlideShare is downloading. ×
Jamal Qaiyyim Ch3
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Jamal Qaiyyim Ch3


Published on

1 Comment
  • Jamal,

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

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Designing the user interface
    A Summary EDIT 6325
    Mr. Jamal Qaiyyim
    19 September 2009
  • 2. Introduction
    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:
    • Remember the user interface should be user-centered
    • 3. The planning document serves as the foundation for the design
    • 4. The planning document also serves as a means to keep the designer/design team focused.
  • Outline
    Design consideration when planning an user-interface:
  • metaphor
    A metaphor is a figurative representative that allows the user to paint a mental model that links the user to the website.
    Metaphor this website is for apartment hunting all over the United States.
  • 18. Metaphor (con’t)
    To be effective metaphors must be:
  • Consistency
    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.
  • 22. Consistency (con’t)
    The red line lets the user know where they are.
    Webpage navigation
    The center of the home page stays the consistent as you drill down into the website
  • 23. Consistency (con’t)
    The red line lets the user know where they are.
    The “SEE ALL VEHICLES” is consistent with the home page
  • 24. template
    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.
  • 25. content
    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
  • 26. Balanced layout
    Balance refers to the optical weight of the webpage. There different types of balance:
    • Symmetrical – is achieved by arranging elements as horizontal or vertical mirrored images on both sides of a center line
    • 27. Asymmetrical – is achieved by arranging nonidentical elements on both sides of a center line
    • 28. No balance – has elements arranged on the website without regard to the weight on both sides of the center line.
  • Balanced layout (con’t)
    A balanced webpage
  • 29. movement
    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.
  • 30. Color scheme
    Color schemes convey information to the user. Choosing the wrong color can convey the wrong message to the user.
    * Black is associated with evil, fear, and death
  • 31. Independent of functional
    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.
  • 32. Unified piece
    There are two types of unity a web designer should be concerned with:
    • Intra-page unity – has to do with how the various page elements relate
    • 33. Inter-page unity – is the interactivity design that users encounter as they navigate from webpage to webpage.
  • Unified piece (con’t)
    Intra-page unity. Here on the Seattle’s Best home page you can see the unity of the text, graphics, and links.
  • 34. Unified piece (con’t)
    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.
  • 35. Interactive interface
    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.
    This video shows the interactivity on the Nissan website.
  • 36. Link effectively
    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.
  • 37. Sense of context
    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.
    The Nissan website provides context to the user that lets them know they are within a car website.
  • 38. feedback
    The website’s ability to establish a relationship the user to the company by providing an opportunity for feedback. Some samples:
  • Equal access
    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.
  • 41. Equal access (con’t)
    This website contains alternate text and is 508 compliant.
  • 42. summary
    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.
    *Reference: Coorugh, Calleen, and Shuman, Jim; Multimedia For The Web Revealed ‘”Creating Digital Excitement”, 2006