Jamal Qaiyyim Ch3

DESIGNING THE USER INTERFACE

A Summary EDIT 6325Mr. Jamal Qaiyyim

19 September 2009

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

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.

OUTLINE

Metaphor Consistency Template Content Balanced layout Movement Color scheme

Independence of function Unified piece Interactive interface Link effectively Sense of context Feedback Equal access

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

http://www.apartment.com this website is for apartment hunting all over the United States.

METAPHOR (CON’T)

To be effective metaphors must be:

Concrete

Obvious

Appropriate

Reinforce the message

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.

CONSISTENCY (CON’T)

Webpage navigation

The center of the home page stays the consistent as you drill down into the website

The red line lets the user know where they are.

CONSISTENCY (CON’T)

The red line lets the user know where they are.

The “SEE ALL VEHICLES” is consistent with the home page

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.

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

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 Asymmetrical – is achieved by arranging nonidentical elements on both sides of a center line 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

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.

COLOR SCHEMEColor schemes convey information to the user. Choosing the wrong color can convey the wrong message to the user.

Red

Black

Yellow

* Black is associated with evil, fear, and death

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.

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

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.

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.

INTERACTIVE INTERFACEWebsite 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.

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.

SENSE OF CONTEXTThe 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.

FEEDBACK

The website’s ability to establish a relationship the user to the company by providing an opportunity for feedback. Some samples:

Contact us

Comments

Feedback

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.

EQUAL ACCESS (CON’T)

This website contains alternate text and is 508 compliant.

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