Interaction design basics


Any web design has some kind of interaction with the user. Some require only a passive interaction such as reading maybe but some require real complex interaction from the user to accomplish its task. The new era of high quality web applications are the pioneers in best interaction design and it is not a surprise that the better the interactions are, the better the adoption of that app is.

Bill Verplank, who brought the graphical user interfaces to the world of product design in 1980s, explains the process for interaction design with three basic questions.

  1. How do you do? what are the affordances – he uses handle (user controls) and buttons (user clicks and let the machine control) metaphors to explain the two types of affordances
  2. How do you feel? how do you get feedback? he uses cool and hot media as two metaphors for the feedback mediums
  3. How do you know? either designer can provide a map or show the path to accomplish the task

In this video, he explains in very plain words each question and what is it that the interaction designer trying to achieve.

Furthermore, he also explains four-step process of Interaction Design in the book Designing Interactions:

  1. Motivation – either comes from an apparent problem or ideals, so you are motivated to fix and find a solution for a problem with your design
  2. Meaning – by telling a story, explaining it with metaphors you can make sense for people about what it is and understand the context of who is using it, what are they trying to accomplish and all the scenarios they can do with the design
  3. Modes, models and tasks – where you clearly need to understand how the users think, how they will use it so the designer can define the tasks accordingly – this is the conceptual cognitive science of understanding what the person doing the task needs to know
  4. Mappings – displays and control – where you design the interaction and the user interface.

Interaction design involves many research disciplines including psychology, philosophy, neuroscience and sociology to understand the human behavior and its relationship with your application better. It is not a surprise to know that there are many pioneers in web development and design who have backgrounds in one of these disciplines such as Stu Card (who was involved with designing the first mouse), Bill Atkinson (who was the lead Mr. User Interface at Apple) and many more.

At Tel3′s website, the first thing users were always interested in is the per minute price to call a certain destination. The main interaction was a simple drop down menu with full of destinations and price per minute. The problem was that by just comparing the price you were missing many other savings opportunities that are specifically designed for power users. Furthermore, you as a Company stay stuck in a price war . So I always had this idea in mind to design a different interaction for my users to present the benefits in a better way and avoid the price war at the same time.

I want to follow the same methodology above to explain the interaction design process while creating the new interaction for our users.

1- Idea/Motivation

We wanted to present the benefits and savings opportunities with a better interaction design than a simple drop down menu

2- Metaphor and scenario

The idea was to bring the ‘savings’ concept rather than just ‘lowest rates’ message. Power users are the bread and butter of this business and by giving them a tool to estimate their savings based on their usage would help us present our service better. The metaphor was the ‘Savings Simulator’ to tell a clear story

3- Model and task

Model is simple; tell us how much you use the service and where you call, the app will tell you how much you can save over a year by comparing with other similar services. Furthermore, also show the user (as a secondary call to action) that there are other ways of saving opportunities by asking certain questions like if they own a cell phone or if they have friends to refer. The task for the user is to play with the simulator and see all the different levels of savings opportunities by each interaction

4- Display and control

We didn’t want to make it a complex interaction, and make the flow very apparent not to confuse the user. Colors and spacing was the easiest solution to separate the input section from the output (results). Simple two step interaction (destination as a drop down and minutes as sliders) would reveal the savings opportunity on the right with the rates information (so still the rate sensitive users will get their information here)

Savings Simulator

Savings Simulator is still in progress; here you can see the final product for now, but currently I am thinking of adding couple more items (like adding more competition rates to make it even more interesting and effective). The result was stunning; the engagement on this page is much better than our regular rates page and the overall performance (in terms of conversions) has improved by 20% in the next two months after the introduction of Savings Simulator – comparison done by people who visited the rates page before the launch vs who visited the combination (rates and/or simulator) after the launch.

Comments on this entry are closed.