Design, Development, & Production
Website Design Human factors website design methods describe how to clearly organize information within and between web pages to make websites more usable and less frustrating.
|
What is Website Design?
Human factors website design methods describe how to clearly organize information within and between web pages to make websites more usable and less frustrating. The methods are essentially a combination of guidelines, requirements, user analyses, prototyping, and evaluation techniques packaged and tailored specifically to designing websites. The stages of website design are similar to that of any other product or system, but website development occurs at a much more rapid rate and is deployed through a much more complex network, or series of networks, to a much broader audience than most products and systems. These additional factors warrant specially designed methodologies for websites.
Why Design for a Website?
The goal of web design methods is to effectively manage the design and development process of a website leading to a usable and less frustrating website. Designers and developers can use appropriate methods to assist in design decisions and ensure rapid development of quality product. Nearly one-third to one-half of the time spent in front of the computer is wasted due to frustrating experiences, and users frequently report having problems finding what they want on the web. Common user struggles include not being able to find the site that they want, and once on a Web site, they can’t find the specific content that interests them (Lazar et al., 2003).
When to use Web Design?
Usability knowledge is supposed to be used continuously throughout the development life cycle (Mariage & Vanderdonckt, 2005). Website-related methods have roles in each phase of the design cycle, but the impact becomes visible in the design phase. Most significantly, errors can be reduced both by designing to prevent errors and designing to enhance the ability to catch errors through the complex error monitoring system.
How to Design for the Web?
Design of a website should follow the same design cycle as any other product. Analyses should inform design decisions which lead to prototypes which get evaluated. However, the process of managing steps in the design cycle is different. In addition to normal product requirements, websites must follow a series of web standards, accessibility requirements, and usability standards to be respectively viewable, perceivable, and attractive. A variety of publicly available tools and guidelines exist to help in the process. The challenge is selecting the correct ones and using them in the correct way.
Guidelines and Standards
To effectively design a website, designers need to create a contextualized usability guide which represents a set of guidelines linked to significant usability knowledge, like an interface object on which the guideline can be applied, or an evaluation method that is able to assess the guideline (Mariag & Vanderdonckt, 2005).
The first step to web design is to identify guidelines necessary for deployment on the internet, such as the W3 standard. The second step is to identify guidelines and accessibility standards from user profiles and scenarios. The third step is to identify general usability guidelines. The process of progressively introducing guidelines in a standard remains mostly manual, so the designer must be vigilant to collect information from recent research and standards. The following are some sample navigational guidelines from (Lazar et al., 2003).
Some tools like the Firefox Accessibility Extension and JuicyStudio color contrast checker help verify guidelines are followed.
Prototyping
Because web development occurs at a rapid rate and involves web developers, web designers, and a client working together, it is important to have a prototyping process that allows rapid design and iterative increase in fidelity. Because web design depends on other software tools, it is important to select a software tool which will support development through the entire development life of the product. Consider the difference between Balsamiq and FlairBuilder – both of which are low-cost prototyping tools. Balsamiq does not allow interaction, so it’s utility is reduced in later iterations of the design cycle. FlairBuilder, on the other hand, allows progressive fidelity. The designer can start with a black and white sketch, later add color and details, and later add interactivity with widgets and between pages.
Evaluation
Websites are most commonly evaluated by performance metrics like time and number of errors to complete tasks on the website. These are gathered from experiments in the lab or by tracking statistics on a live deployment, such as a beta test. Clear predictions about the types of errors should occur as a function of the stage of processing. Other popular methods of evaluation include surveys for subjective measures such as satisfaction, usability, and aesthetics.
Guidelines and Standards
To effectively design a website, designers need to create a contextualized usability guide which represents a set of guidelines linked to significant usability knowledge, like an interface object on which the guideline can be applied, or an evaluation method that is able to assess the guideline (Mariag & Vanderdonckt, 2005).
The first step to web design is to identify guidelines necessary for deployment on the internet, such as the W3 standard. The second step is to identify guidelines and accessibility standards from user profiles and scenarios. The third step is to identify general usability guidelines. The process of progressively introducing guidelines in a standard remains mostly manual, so the designer must be vigilant to collect information from recent research and standards. The following are some sample navigational guidelines from (Lazar et al., 2003).
- Navigation on websites can be improved by providing multiple navigation techniques or paths to the same content. For instance, navigation can be provided by links organized both by topic and target audience.
- Good web navigation must be provided by the website itself, because the navigation cues provided by the Web browser are limited.
- Navigation should typically be text-based.
- User interfaces should be consistent and predictable.
- Downloads should be fast.
- Navigational tree structures should be broad and shallow.
Some tools like the Firefox Accessibility Extension and JuicyStudio color contrast checker help verify guidelines are followed.
Prototyping
Because web development occurs at a rapid rate and involves web developers, web designers, and a client working together, it is important to have a prototyping process that allows rapid design and iterative increase in fidelity. Because web design depends on other software tools, it is important to select a software tool which will support development through the entire development life of the product. Consider the difference between Balsamiq and FlairBuilder – both of which are low-cost prototyping tools. Balsamiq does not allow interaction, so it’s utility is reduced in later iterations of the design cycle. FlairBuilder, on the other hand, allows progressive fidelity. The designer can start with a black and white sketch, later add color and details, and later add interactivity with widgets and between pages.
Evaluation
Websites are most commonly evaluated by performance metrics like time and number of errors to complete tasks on the website. These are gathered from experiments in the lab or by tracking statistics on a live deployment, such as a beta test. Clear predictions about the types of errors should occur as a function of the stage of processing. Other popular methods of evaluation include surveys for subjective measures such as satisfaction, usability, and aesthetics.
References & Resources:
Mariage, C., & Vanderdonckt, J. (2005). Creating contextualised usability guides for web sites design and evaluation. In R. J. K. Jacob, Q. Limbourg, & J. Vanderdonckt (Eds.), Computer-Aided Design of User Interfaces IV (Vol. 0, pp. 147–158). Springer Netherlands. doi:10.1007/1-4020-3304-4_12
Matera, M., Rizzo, F., & Carughi, G. T. (2006). Web Usability: Principles and Evaluation Methods. In E. Mendes & N. Mosley (Eds.), Web Engineering (pp. 143–180). Springer Berlin Heidelberg. doi:10.1007/3-540-28218-1_5
Lazar, J., Bessiere, K., Ceaparu, I., Robinson, J., & Shneiderman, B. (2003). Help! I’m lost: User frustration in web navigation. It&Society, 1(3), 18–26. Retrieved from http://hcil.cs.umd.edu/trs/2003-29/2003-29.html
Matera, M., Rizzo, F., & Carughi, G. T. (2006). Web Usability: Principles and Evaluation Methods. In E. Mendes & N. Mosley (Eds.), Web Engineering (pp. 143–180). Springer Berlin Heidelberg. doi:10.1007/3-540-28218-1_5
Lazar, J., Bessiere, K., Ceaparu, I., Robinson, J., & Shneiderman, B. (2003). Help! I’m lost: User frustration in web navigation. It&Society, 1(3), 18–26. Retrieved from http://hcil.cs.umd.edu/trs/2003-29/2003-29.html