Designing the user interface A Summary EDIT 6325 Mr. 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 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:
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) 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
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 scheme Color 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 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.
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 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.
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.
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