Human Computer Interface Optimization


Human-Computer Interface Optimization

 

According to the ACM’s Special Interest Group on Computer Human Interaction, Human-Computer Interaction is defined as a discipline centered on “the design, evaluation and implementation of interactive computing systems for human use and with the study of the major phenomena surrounding them.”

 

Over the last several decades computers have found their way into almost every industry and affect individuals on a daily basis. We interact with computing systems on a daily basis, from something as simple as choosing the right type of gasoline at the pump to calling a friend on a touch screen iPhone.

 

User Analysis

 

Whether the computing system is simple or complex, the end goal of an interaction designer is to optimize the interaction between computers and humans.  Knowledge of computer systems is helpful, but an interaction designer must also understand the behavior of people and the psychology underlying their decisions and thought processes.

 

When optimizing human-computer interface, the designer must pay attention to the user for which he/she is designing for.  The study of the user may include: age group, previous interactions with computers, the environment in which the user will use the device, and the natural relation that the user already has with technology.

 

 

 

The following video talks about the philosophy behind the principles of interaction design:

 

 

 

This wiki will be focused on five principles of interaction design: perceivability, predictability, feedback, learnability, and consistency.

 

 

How do the five principles of interaction design form a system?

 

According to Interactive Design Expert David Hogue, PhD, the five principles of interaction design form an interconnected system which is shown below, using a website as an example (Hogue, 2012).

 

 

 

If a user can perceive an interface element and predict the outcome of interacting with it, the user is much more likely to make a meaningful interaction.  If that interaction provides some sort of feedback, the user will begin to understand and learn the function of the element.  If the same element is consistently used on other pages of the website example (pictured above), then the user will be able to transfer that knowledge to make further meaningful interactions.

 

The Five Principles of Interaction Design:

 

Perceivability:

 

We want to be able to perceive interactive elements. While somewhat circular in definition, 'interactive elements' can be thought of as any object which can be interacted with.   In terms of computer systems, an element could be a clickable menu button on your computer screen or a direct touch drag-and-drop feature with an iPad.

 

It is important to note that interaction with digital content requires that the user is aware that there is something to interact with.  An element with high perceivability is distinguished from the rest of the page; its symbol or icon makes sense to us.  We rely on our senses for perceptions, and we comprehend our perceptions by making connections to things that we already know.  Thus, one way to increase perceivability is to make interface elements look and/or sound like real objects.  Donald Norman, who is a pioneer in human-computer interaction refers to this as “perceived affordances.”  He describes it in detail on his website which can be found at http://www.jnd.org/dn.mss/affordances_and.html.

 

One way to increase perceivability of an interactive button on a computer screen is to make it look and behave like real buttons.  There are many ways to accomplish this: shape it like a button that can be depressed, give it some 3D characteristics with proper shadows and beveling, etc.  In the image shown below, the majority of people would perceive this to be an interactive button because it resembles a computer keyboard key.

 

                                                                             (C) Forensicpics

 

Other ways to increase perceivability is to ensure proper contrast between the background and the element.

 

 

Predictability:

 

In order to optimize human-computer interaction, and minimize mistakes and random guessing, the user must be able to predict the outcome of his actions before performing the actions.

 

One way to optimize predictability is by using unambiguous icons or clearly defined text labels.  Using the camera button example from above: one would predict that pressing the button would take a picture.  This effect can also be achieved via the use of clear text labels.  Compare the two labels below:

 

 

The one on the right has labels that are meaningful and uses active verbs. The user will be able to easily predict the outcome.

 

 

Feedback:

 

If you click on a computer screen and nothing happens, how do you know if your interaction was successful or resulted in any sort of measurable change?  In order to optimize human-computer interaction, products should provide feedback after interactions.  This feedback can be as simple as as a visual confirmation (e.g.: a button depresses when clicked) or an aural confirmation (e.g.: complimentary, synchronized sound).  Depending on the importance of the interaction, feedback can be explicit or subtle and give information on place, progress, or meaning.

 

One example of feedback used by many web designers is a “bread crumb trail” or "bread crumb navigation".  It gives the user feedback in regards to location context within a website.  The phrase "bread crumb trail" is taken from the fairytale Hansel and Gretel written by the Brothers Grimm.  In the story, Hansel and Gretel left a trail of bread crumbs as a means of finding their way back home.

 

Below are several examples of website bread crumb trails, taken from an article posted by Smashing Magazine at http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/ ):

 

 

 

 

Just as a bread crumb trail gives the user subtle feedback in regards to his/her location within a website, progress indicators, or completion messages, can also give useful feedback.  It is important to note that feedback should never interrupt the user's workflow unless absolutely necessary such as in avoiding a critical error.

 

 

Learnability:

 

Making your interface easy to learn is an important component of interface design.  To enhance learnability, less is often times more. Albert Einstein once said, “Everything should be made as simple as possible, but no simpler.”

 

Many designers call this concept of simplicity "functional minimalism" (11 principles of instructional design).  Functional minimalism can be achieved by avoiding unnecessary features and functions, breaking complex tasks into manageable sub-tasks, etc.  One has to look no further than the iPhone to see this principle in current use. 

 

Consistency:

 

Consistency and learnability go hand in hand.  If a particular website design element has one function on one page and another function on a different page, the user is likely to be confused and unlikely to learn as quickly.  Furthermore, consistency in the placement of website design elements on a page is important (e.g.: navigation buttons are in the same location on each page).  However, some companies take advantage of being inconsistent with general practices: Arco gas stations places their least expensive gas in the middle of the pump as shown below.  Users, not paying attention, might inadvertently choose a more expensive gas to fuel his/her vehicle.

 

 

 

Visit Interaction_Design.org to learn more about human computer interface optimization.

 

 

 

List of References: 

 

Affordance. (n.d.). In Wikipedia. Retrieved from http://en.wikipedia.org/wiki/Affordance#Affordances_as_perceived_action_possibilities

 

Forensicpics. (2011). A beveled button: easy in Corel Draw. Retrieved from http://www.flickr.com/photos/forensicpics/6328665682/

 

Gube, J. (2009, March 17). Breadcrumbs In Web Design: Examples And Best Practices.  Smashing Magazine. Retrieved from http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

 

Guiding Principles of Interaction Design derived from Heidegger - Video 2 - YouTube. (n.d.). Retrieved from http://www.youtube.com/watch?v=lh1M8mRvpa8

 

Hogue, D. (2012). Interaction Design Fundamentals. Lynda.com Video Tutorials. Retrieved from http://www.lynda.com/Dreamweaver-CS5-training/Interaction-Design-Fundamentals/82822-2.html

 

Interaction Design. (n.d.). Retrieved from http://www.interaction-design.org/encyclopedia/interaction_design.html

 

Norman, D. (n.d.). Affordances and Design.  Retrieved from http://www.jnd.org/dn.mss/affordances_and.html

 

Universal Usability: Pushing technology research to address the needs of every citizen. (n.d.). Retrieved from
http://hcil.cs.umd.edu/trs/2001-17/2001-17.html