| Lesson 9
| Human-Computer Interaction guidelines
| Identify HCI guidelines for information architecture.
Human-Computer Interaction Guidelines
Human-computer interaction (HCI) guidelines are essential for web design, as they help to ensure that the website or application is usable, accessible, and enjoyable for users. Here are some of the essential HCI guidelines for web design:
- Usability: The website or application should be easy to use, with a clear and intuitive navigation system, well-organized content, and responsive design.
- Accessibility: The website or application should be accessible to all users, including those with disabilities, with features such as alternative text for images, keyboard accessibility, and clear and high-contrast design.
- Consistency: The website or application should be consistent in terms of layout, navigation, and functionality, helping users to build mental models of how the site works and making it easier for them to use.
- Feedback: The website or application should provide clear and immediate feedback to users, such as visual or audio cues, to confirm that their actions have been successful or to indicate an error.
- Learnability: The website or application should be designed so that users can learn how to use it quickly and easily, with clear and concise instructions and guidance.
- Flexibility: The website or application should be flexible and adaptable to the needs and preferences of users, with options for customization and personalization.
- Error Prevention and Recovery: The website or application should be designed to prevent errors, with clear validation of user input, and provide clear and effective recovery options when errors do occur.
- Aesthetics: The website or application should be aesthetically pleasing, with a visually appealing design and appropriate use of typography, color, and images.
These are some of the essential HCI guidelines for web design, and they should be taken into consideration when designing and developing a website or application to ensure that it is usable, accessible, and enjoyable for users. By following these guidelines, designers and developers can create websites and applications that provide a positive user experience and meet the needs of the target audience.
HCI Online Resources
For online resources about HCI standards and guidelines, go to the following URL:
Note: There are hundreds of online resources addressing HCI guidelines. To access these resources, simply type HCI into any search engine and select the resources that appear to be most relevant to your specific needs.
You have been learning that it is not only signs and metaphors that must be designed with the users in mind, but also information architecture.
Humans and computers have vastly different "operating systems," and information architects must take this into account in order to make the site content accessible to the human users.
Standards in action?
The focus of the HCI work and research is on developing "user-centered designs." You may want to open another browser window to look at a number of Internet portals, such as
- bing.com, or
and think about whether they demonstrate good information architecture and conform to the following HCI standards:
- Present only information relevant to the user's job. Do not present information on the screen relevant to the software or its workings.
- Use system capabilities because they enhance user task accomplishment, not just because they can be used (such as, color, highlighting techniques, graphics).
- Design the system to do what the user would naturally or naively guess it should do.
- Make terminology (for labeling, commands, messages, prompts, and so on) consistent with the user's frame of reference (that is, it should mean what the user thinks it means and not reflect computer or programming usage).
The HCI guidelines are based on many years of HCI design experience by leaders in the field of interface design. Graphic designers on the Web development team are most likely to be familiar with HCI and GUI (graphical user interface) guidelines and models.
However, because the screen design is the most visible aspect of a Web project, it is helpful for all project team members to have a basic understanding of what constitutes good design.
Dos and Don'ts
In addition to the HCI guidelines described above, the following are some information architecture guidelines you should follow:
- Do use signs, words, icons, and symbols that users know or can easily grasp.
- Do design unambiguous signs.
- Do take the time to understand the different categories of users and their needs, expectations, and experiences.
- Do use experts to help you understand connections and alternate paths that are likely to be followed by users.
- Do provide users with alternatives: alternative navigation options; alternative paths through information; and more than one kind of sign to direct them.
- Do remember that design requires a process of exchange with the client; it is not an artistic expression on behalf of the designer.
- Do test the validity of your information architecture on real users, observing where they have problems understanding site architecture or navigation features.
Choices you should avoid:
- Avoid treating Web site text as if it were a paper document or a linear article, with a flow of information that makes the user turn many pages of static information.
- Avoid using familiar information structures simply because they are familiar. For example, an online organizational chart should be able to be much more engaging than a traditional paper-based organizational chart.
- Avoid presenting information from the client organization's point of view. Determine who will actually be using the site, and design information architecture from their perspective.
- Avoid making all information hierarchical simply because it's easier for the developers.
- Avoid assuming you know how your users will navigate through the site.
According to HCI principles, how much time and effort should you assume the average user will commit to figuring out the system of signs, metaphors, and information architecture that you have created?
Very little. Signs and metaphors should be easily understood by people from all backgrounds.
Think of the design from the user's point of view. Choices and paths should be intuitive and obvious.
Design the system to do what the user would naturally or naively guess it should do. And last but not least, do not assume you know how your users will respond to your design: test it on a sample group. The next lesson will teach you more about success factors and risks, as they apply to information architecture planning.
Design for Touch Screens
You may be saying to yourself that you go to web pages all the time on your iPad and you do not like it when they create a specific mobile version that you have to use instead of the full site.
After all the iPad and Android tablets can view standard web pages without a problem and there is no need to create a mobile version for them.
While the iPad and Android tablets handle full-sized websites with ease, there is one interface aspect that is different:
Touch screens may not seem all that different from clicking with a mouse, but there are a lot of things that you just cannot do with a touch screen, or you cannot do easily.
And with the growth in the touch screen tablet market growing, if your website does not keep up, it will be left behind.
Basic Touch Screen Design Rules
When you are designing for a touch screen you have to think about how it is being used. There are things like gestures, taps, and multi-touch that you should consider.
- Tapping is not accurate, unless the customer has the fingers of a toddler, even with the very accurate software controls, it can be hard to tap and be precise.
- Gestures are different from taps: In order to scroll a long page on a touch screen, the user swipes one finger up the browser window.
This may not seem significant until you realize that browsing with a mouse, you move the mouse down.
- Two (and more) finger taps: A user can use multiple finger taps on the device at the same time to control it.
- High glare devices: The screens of most touch screen tablets are made out of a sturdy glass. This means that they can be very hard to read, with a lot of glare, in bright light situations.
Plus, with all the touching, they get finger prints and smudges on the screen that can affect how your pages look.
- On screen keyboard: While some users have a wireless keyboard they connect to their tablets, most tablet users use the on-screen keyboard for data entry. And these can result in some typos.
Human Computer Interaction