MET:The Effective Web Design Paradigm

This page originally authored by Crystal Waldowski (2007).
This page has been revised by Amy Frank (2008).
This page has been revised by Zhi Su (2009).
This page has been revised by Ifeoma Okoye (2009) .
This page has been revised by Andrew Olson (2010)

Based on the User-centered Conceptual Model of Design, the following entry will address the considerations and principles a designer should reflect upon and apply when designing a user-centered web site. To achieve utmost usability and communication of relevant information, careful planning is the only solution for designing a successful and meaningful web site.

File:Title Graphic.jpg

The Philosophy and Background of User-Centered Design

User-centered design is a philosophy (viewpoint) that identifies the individual user as the fundamental variable that powers any particular design [1]. As a design model (application), user-centered design utilizes methodologies that provide pertinent information about the individuals, who will engage in a created product or system [2] . This design model places a direct focus on the individual users throughout the planning, design and development of a product or a system. Thus, the essential aim of the user-centered design process is to develop a product or system that will be usable and beneficial for the prospective users [3] .

The term ‘user-centered design’ originated in Donald Norman’s research laboratory at the University of California San Diego (UCSD) in the 1980s and gained recognition after the Publication, co-authored with S. Draper, entitled: User-Centered System Design: New Perspectives on Human-Computer Interaction (Norman & Draper, 1986) [4] . In another publication, The Psychology Of Everyday Things (POET), he recognizes the needs and the interests of the user and focuses on the usability of the design. He suggests design should:

Make it easy to determine what actions are possible at any moment.
Make things visible - such as concepts, actions, and results.
Make it easy to evaluate the current state of the system.
Follow natural links and navigation and the required actions. (Norman, 1988, p.188)

Norman’s recommendations place the user at the center of the design. The role of the designer is to ensure that the user is able to make use of the product as intended and with a minimum effort to determine how to use it [5] . Norman (1988) suggested that the following principles of design are essential in creating a user-centered product:

Use both knowledge in the world and knowledge in the head. By building conceptual models, write manuals that are easily understood and that are written before the design is implemented.
Simplify and ensure not to overload the short-term memory, or the long-term memory of the user.
The user should be able to figure out the use of an object by seeing the right buttons or devices for action.
Provide clear navigation and understandable graphics.
Take advantage of the power of constraints, both natural and artificial, in order to make the user believe what you want them to do is the only one thing to do.
Plan for any possible error that could arise.
When all else fails, standardize. “Create an international standard if something cannot be designed without arbitrary mappings” (Norman, 1988, p.189-201).

The need to involve actual users was a natural evolution in the field of user-centered design. Their involvement in the design process lead to more effective, efficient and safer products and contributed to the acceptance and success of products [6] .

Another explanation as to what user-centred web design is all about comes from Aimee Truchard and Rassa Katz-Haas. In their article "Ten Guidelines for User-Centered Web Design" they state: "Most users don’t really read Web pages. Instead, they scan text for specific pieces of information in a process called information retrieval. With user-centered design (UCD), you can improve the usefulness (relevance) and usability (ease of use) of Web sites by considering information retrieval and other factors." They then go on to ask the following questions:

Who are the users of this 'thing'?
What are the users’ tasks and goals?
What are the users’ experience levels with this thing, and things like it?
What functions do the users need from this thing?
What information might the users need, and in what form do they need it?
How do users think this 'thing' should work?
How can the design of this ‘thing’ facilitate users' cognitive processes?

File:User Centered Design.jpg

Imperative considerations in creating a user-centered web site

When undertaking the task to create a user-centered website, it is important that one extensively explores how the users of the website will most likely engage with it. Thus, the following suggestions should assist in this undertaking:

1. Users should be an integral part of the design process

Know your audience get to know who the user is. Engage users from the commencement of the design process through [7]:

Exploring users' learning styles and viewpoints
Observing users by analyzing their engagement in the design activities
Obtaining continual feedback from users by various methods including interviews, discussions, card sorting, paper prototypes, walk-throughs,etc.
File:User Centered Design Testing.jpg
User-Centered Design Testing

2. Question users' needs and abilities

Allow the answers to the following questions, to direct the development and the design decisions[8]:

How much experience do the users have with the available technology?
What existing web environments are the users utilizing?
What hardware, software and browsers do the users use?
What language(s) do the users speak?
Are there any cultural biases that need to be considered?
Will the users receive additional training to navigate the web site?
What relevant knowledge and abilities do the users already posses?
What objectives do the users wish to achieve through the web site?

3. Analyze users' tasks and goals

Observe and interact with users to find answers to the following questions[9]:

What are the activities the users need to undertake?
How do they presently engage in these activities?
Why do the users presently engage in activities in a certain manner?
How do users find and correct errors?
What are the users’ ultimate goals?

4. Repeatedly test for usability

Usability testing is an interative process. It is important to conduct usability testing throughout the development of a design, to establish whether the web site is compatible with the users’ needs. Thus, a designer should explore different designs and approaches and incorporate the obtained feedback before making final direction, development, and design decisions.

File:Design & Evaluate for Usability.jpg

Guiding Principles for user-centered Web Design

The following principles should be taken into account when designing a user-centered web site:

A. Visibility

Visibility assists users to predict the effects of their actions: e.g. important components like navigational aids should be easily discernible [10].

Navigational Aids enhance Visibility

B. Memory Load

Screen components should be meaningful and consistent throughout the site, minimizing memory load to enable users to recognize instantly the functions of these components [11].

File:Memory Load.jpg

Memory Load Guidelines

C. Feedback

Instantaneous feedback should be available when a user performs any action on the website[12].

Every action should receive feedback

D. Accessibility

Users should be able to locate information promptly and effortlessly. This could be most effectively achieved by implementing the following tasks[13]: File:Navigational Tool.jpg

Inclusion of navigational elements, such as search functions, site maps, etc.
Organization of information into simplistic, meaningful hierarchies
Provision of highlighted hints that enables the scanning of information

Accessibility [14]makes sure the user interface is designed to be effective, efficient, and satisfying for more people—especially people with disabilities, in more situations—including with assistive technologies.

E. Point of Reference & Navigation

The orientation of a web site is supported by the following components [15]:

Explanatory links
Site Maps
Logical entrance and departure routes
Navigational tools

Note: Frames should be used only advisably

F. Errors

Provide users with mechanisms, which would allow them to recover from errors quickly, when they occur[16].

File:Errors.jpg

User Errors

E.g, present meaningful messages telling the user what happened and how to recover.

G. Satisfaction

The engagement of the web site should be enjoyable, since it should enhance the users [17]:

Awareness of usability
Enthusiasm for learning how to best utilize the web site
Confidence about the credibility of the stated information

User Satisfaction

H. Legibility

Prevent the inclusion of obstacles that might hinder communication of a web site's display, by being mindful of the following [18]:

Use sans serif fonts in the 9-12 point range and refrain from the use of decorative fonts and italics
Avoid using uppercase text only
Do not extend sentences beyond 50 characters
Embed dark text into a light background

File:Legibility.jpg

Legibility Example

I. Language

Language Guidelines

To enhance clarity, employ [19]:

Succinct sentences
Easy-to-understand language
Active voice

Avoid the use of ambiguous forms of:

Humour, metaphors, icons, idioms & puns

J. Visual Design

To augment overall successful communication in a web site, be cognisant of the following fundamental visual objectives (Heinich et al, 1996):

Site pages should be simple and organized, but yet interesting
Graphics should not decorate, but illustrate and inform
Elements should aid navigation
Size of graphics should enable quick downloading
Important elements should be posed prominently.
Avoid misapplication of colour, since it could negatively engage users
Combine similar elements whenever possible

File:Visual Design.jpg

Example of Effective Visual Design

K. Consistency

Decide how you want to present the overall site and use consistent icons to carry out similar tasks. Consistency applies across board- to

page layout
colour scheme
navigation
icons and language.

Eg of colour consistency: If you have 5 major sections on the site, this could be colour coded, each section will be identified by it's colour. This will help the user recognise each section of the site each time a particular colour shows without having to think too much. Colour code visited links and links that have not been visited. Eg of consistency in navigation: The Navigation bar should be in the same location in every page. Action buttons that do the same things should be in the same position throught out the site That is encouraging reliance on recogniton over recall

L. Bread Crumbs

"Bread crumbing" a site allows the user to decide where to go next from wherever they are. It tells the user where they are and where they came from while presenting options of where they could go. This affords ease-of -use in navigation.

The Development process

Discovery

Indetify and understand the user and their needs and goals and match it with the site goals

Exploration

Create mock-ups and choose the most likely one to deliver the goals, and work more to refine it.

Refine

Furter develop the chosen design and fine tune all page elements working towards achieve identified goals.

Production

Develope a fully interactive prototype that will simulate the way the finished site will work.

Test, test, test

Deploy prototype to a test platform and have an actual user test it to ensure that the required user responses and goals are in focus.

Implementation

Develop and flesh out content and graphics and codes for the website.

Launch

Deploy the website to the actual platform- online.

Maintenance

Monitor, support and gather site metrics to inform the redesign ahead as web sites are indeed dynamic.

Problems with User-centered Design

According to Dearden (2008), a focus on user-centered design may prove harmful in the context of development and developing nations. In place, Dearden favours a community-centered design approach to offset the limitation of user-centered design. The rationale behind his proposed shift, stems from challenges characterized by developing communities. These challenges often assume that users are literate in the language and function of the systems, are educated and proficient in the use of technological interfaces, and have access to a reliable internet connection and power supply. These assumptions are often made unknowingly by systems or software designers with a North American background.

According to Wilson and Yeo, Songan, & Hamid (Wilson, 2007, and Yeo, Songan, & Hamid, 2007, as cited in Dearden, 2008), there are often important elements of culture such as language, education, history, and working arrangements predisposed by designers and users. These elements are rarely valid when designing systems for use in the developing world. Morever, Toyama (Toyama, 2007, as cited in Dearden, 2008) further highlights the danger of a variety of assumptions that technology designers (and development practitioners) might make about community and individual attitudes toward new technology.

As Marsden (Marsden, 2007, as cited in Dearden, 2008) denotes, designing for development requires systems that are usable by people with limited literacy, who have little prior experience with computers, and who may not be familiar with core concepts applied in computing such as hierarchical classification. Moreover, Marsden further stresses the fact that systems may not be as quoted the "approved official language" of user's country.

Consequently, when designing for development, some might suggest that a user-centered approach may be harmful and perhaps not the most effective means of design within that given context.

Myths of usability[20] and creating user- centered design

It is expensive

Free web creation sites like wordpress.com have made this myth a thing of the past. [21]

It kills creativity

With the emergence of open-sourced wikis and social networking sites that allow for a creation of your own space there is plenty of opportunity to be creative. However, many companies have learnt the hard way that their consumers do not necessarily want the wheel to be reinvented in radical ways or terms. "Lesson: Do not try to be smart and use new terms when we have good words available that users already know." [22]

Market research takes care of understanding user needs

Market research often does not get the actual pulse of how consumers and users actually feel. In addition, by the time data is collected on a topic of this sort, it is usually outdated or ineffective. "Seeing something demo'd and actually having to use it are two very different things. Likewise, what customers say and what customers do rarely line up; listening to customers uses the wrong method to collect the wrong data." [23]

Summary

To attain the most appropriate results possible, one should frequently examine design decisions against the goals one desires to achieve, to ensure enough flexibility to allow for changes. Since there are, however, so many possible decisions and considerations that a designer has to be cognizant of when compiling all information and ideas, the above is therefore only intended as a brief outline to provide some of the major factors that are imperative for a designer to take into consideration, when he/she is undertaking the task of designing a user-centered web site. The subject of web design in a rapidly evolving and ever-changing field. The history of such a paradigm has only evolved over the past 40 years and yet has already undergone massive change. This change has been so dramatic that many of the components that make up effective web design are often categorized in different areas. Nonetheless, no matter what the term that is used for these changes there always seems to be three underlying areas that these terms focus on. The first of these is purpose. The purpose of the web site will determine a lot in regards to the usability and accessibility. This is a very important factor in regards to the idea of Web 2.0. When web site designers plan to cater to Web 2.0 they often take into consideration the purpose of the web site in order to determine if it should be geared toward a particular audience. This brings us to the second area, which is the audience. It is important to consider this aspect in regards to gender, race, nationality, age, location or education. This is particularly important for a designer in regards to the visibility and language. The final area is context. The context in which the web site will be used is perhaps the most important aspect of its design. In the era of Web 2.0 context is the omnipresent question that drives the creation of the web site and how it is created. In particular, social and cultural issues are addressed and social networking sites have tried to design their web sites around these topics. Overall, paradigm shift that has occurred in regards to web design has been to expand the context and capabilities of web sites through design. Social network sites now enable users to address, family, friends, work, entertainment, communication, education, commerce and myriad of other facets of people's lives in one place. This new form of design has made those who take advantage of it very prosperous and powerful.

File:Design - An Ongoing Process.jpg

Design: An Ongoing Process

Historical Timeline of the Effective Web Design Paradigm

1970's - Cooperative design created as a Scandinavian tradition of design.

1974 - Henry Braverman suggests "...technology tends to undermine the skills that people use in their work." [24] The creation of Human-Centred Systems is upon us in terms of technology.

1986 - Donald A. Norman writes book "The Design of Everyday Things" outlining the psychology behind design. In this book he introduces the idea of user-centred design.

1990 - Participatory Design (PD) is the North American model for cooperative design focuses on the participation of users. [25]

1997 - Two of the first social networking sites classmates.com and sixdegrees.com begin. The web design of these sites focuses on the user participating in order to be successful. These initial sites paved the way for now popular LinkedIn.com, Facebook.com and MySpace.com.

2000s - Contextual Design "customer-centred design" [26]

2004 - The term "Web 2.0" begins to become mainstream after being coined at the O'Reilly Media Web 2.0 conference in reference to the new way the Internet is used and how web sites are created.

The Emergence of Web 2.0

The catch-phrase "Web 2.0" began to be used in reference to a new way to use the Internet and also in regards to web sites that are designed with this new paradigm in mind. Tools used in Web 2.0 have their value, "...derived from them by users (which) is a function of how (well) these users perform them". (Lankshear & Knobel, 2008) Examples of Web 2.0 tools included Google, Wikipedia, Youtube and Facebook and also the idea of user content management (UCM) sites. The benefit of such sites is that there is very few clerks or workers that need to be relied upon to make these things work, making them faster, cheaper and more efficient.

Secondly, there is a participation and collaboration aspect of Web 2.0. The sites that have done well in Web 2.0 are those with a massive following. A good example of this can be shown with the success of Wikipedia, which was built from the bottom up vs. Britannica which was written from the top down. This is the idea of "distributed intelligence and expertise" (Lankshear & Knobel, 2008).

Moreover, Web 2.0 takes advantage of rating systems. The rating systems act as a filter and search device to make finding the appropriate and best website in the various search engines and other sites easier. In this way Web 2.0 relies on the idea of of cumulative votes = reliability.

Finally, the idea of "mash-ups" where various tools (eg. google maps) can be used inside other websites is an interesting function that has progressed, particularly in the last 2-3 years.

Examples of Well-Designed User-Centred Websites

Myspace.com - includes widgets, video, picture sharing and massive community
YouTube.com - includes mass libraries of video, complete with annotation and comments, allows for rating of videos and creation of channels and favourites
Flickr.com - One of the first Web 2.0 hits. Allows for a sense of community and tagging on a photo sharing site. Since being bought by Yahoo it has improved its application programming interfaces (APIs)
Facebook.com - Unlike Myspace, Facebook does not allow for manipulation of your personal page. However, with such a great interface it already has many Web 2.0 aspects in play including, video, file, picture sharing. A chat function, wall space (forum), private messaging and many other widgets make it one of the most popular social networking sites in the world.
Wordpress.com - Self hosting blog site that allows for web site creation and design. Bonus for this site is that it is add free and contains open sourced software and won't get outdated.
Mls.ca - This site is used for a bit of a different context for others on this list, however it was chosen for its user-centred components, including mash-ups like Google Maps and Google Street View.

Videos on User-Centred Web Design

Stop Motion Artifact

User-Centred Web Design by Shu Hui Chai (65A January 2017)

References

Abras, C., Maloney-Krichmar, D., Preece, J. (2004). User-centered design. W. Encyclopedia of Human-Computer Interaction. Thousand Oaks: Sage Publications. Retrieved January 25, 2008 from http://www.ifsm.umbc.edu/~preece/Papers/User-centered_design_encyclopedia_chapter.pdf

Dearden, A. (2008, Spring2008). User-Centered Design Considered Harmful (with apologies to Edsger Dijkstra, Niklaus Wirth, and Don Norman). Information Technologies & International Development, 4(3), 7-12. Retrieved January 25, 2009, from Business Source Complete database.

Heinich, R., Molenda, M., Russel, J.D., & Smaldino, S.E. (1996). Instructional media and technologies for learning. Englewood Cliffs, NJ: Prentice Hall.

Katz-Hass, R. & Trutchard, A. (1998). Ten Guidelines for User-Centred Web Design. Usability Interface, Vol 5, No. 1.

Norman, D. (1988). The Pychology of Everyday Things. New York: Doubleday.

Lankshear, C., & Knobel, M. (2008). The “twoness” of learn 2.0: Challenges and prospects of a would-be new learning paradigm. Closing keynote presented at the Learning 2.0: From Preschool to Beyond, Montclair State University, Montclair, NJ.

Usability - the Basics: Web Developer’s Virtual Library: http://wdvl.internet.com/Authoring/Design/Basics/

User-centered Design: http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

Usability, User-Centered Design, & Learnability: http://www.agelesslearner.com/intros/usability.html

User-centered Design: http://en.wikipedia.org/wiki/User-centered_design

Comprehensive Outline: http://www.usability.gov/pdfs/guidelines.html

Douglas K. Van Duyne, James A. Landay, Jason I. Hong (2004. The Design of Sites: Patterns, Principles and processes for Crafting a Customer-Centered Web Experience

Accessibility in User centred design: http://www.uiaccess.com/accessucd/background.html Matt Mickiewicz interviews Jakob Nielsen, author of the brand new book "Prioritizing Web Usability,": http://www.sitepoint.com/article/interview-jakob-nielsen/ Misconceptions about Usability:http://www.useit.com/alertbox/20030908.html