INTERACTION DESIGN FUNDAMENTALS

After watching the Interaction Design Fundamentals video by David Hogue  I understood that design interaction is not about the actual interface but about the behavior of people. Yes, design interaction records, manipulates and shares information, but most importantly it creates experiences between people and devices. Hogue states that interactions must be perceived, that outcomes are predicted, that people are able to understand how actions led to outcomes and they receive feedback which allows them to learn how the interface works. Later on, people apply what they have learnt and transfer that knowledge to similar interfaces, which is why it is important when designing interfaces to know what it is already out there and apply some of that knowledge and interactions into the design because it makes it much easier for people to feel comfortable navigating through it.

David Hogue mentions the following 5 Essential principles for an effective interaction design.

1. CONSISTENCY: This refers to keeping the design constant, or how I prefer to call it, keep the same style. People learn how to complete tasks and navigate through the interactions so it should be kept similar through the entire design to avoid confusion. Although sometimes is good to disrupt and create something different, it is important to know that every change should have a purpose and convey meaning.

A good example of a website and App that is always kept constant is Pinterest. It is such an easy app to navigate through, you can see the design and the interaction is constant all along, same grid, with same options with the same clicks and the same responses. It is simple and it works

Screen Shot 2015-11-26 at 11.55.50 PM

Another example Yummly, a cooking app, that although the majority of the interface is straight forward and it is kept constant once you dig into it, it is possible to get lost in the details. For example, the display of the recipes and the interaction to navigate around them is kept constant as it possible to see in the following images, but once you go into the actual instructions (Cooking Directions) it varies all the time from recipe to recipe, which is very annoying for the users. In the images below it is possible to see 4 different ways to navigate through the directions section if the recipe. Sometimes I even stop looking at the recipe because I can’t even be bothered to figure out how to get the real instructions, I want it to be simple and sometimes its not. This makes me think about something I read about web design a couple of years ago from Steve Krug, which is that the most important thing of web design is to not make the user think.

image6 image7image8 image9 image11 image10

2. PERCEIVABILITY: Interactions should be visible, they shouldn’t be hidden because if people don’t know they can interact with something they won’t do it. All interactions should be straight forwards.

A bad example of this is de D3 website, which is quite ironical. A website that teaches about Interactive information visualization, but its own interaction is rubbish. If you navigate through it you will realize you don’t know where to click, or if there is anything even clickable. Once you discover you can click on it, you’ll realize everything is different in each of the pages so you have to learn everything all over again.

Screen Shot 2015-11-26 at 10.23.00 PM Screen Shot 2015-11-26 at 10.23.35 PM Screen Shot 2015-11-26 at 10.23.24 PM Screen Shot 2015-11-26 at 10.23.13 PM

A shockingly bad example about it…or maybe it is just me, but for some reason I haven’t been able to adapt to the new music app from apple. I bought a month of the programme, but I couldn’t figure out how to play the song I wanted, I couldn’t forward it and I just had to play them randomly.

The BBC news App is very straightforward, it is a great example of perceivability. It is divided by sections and the labels are clear at the top. It uses number to categorize information and it uses icons to state when it is possible to what a video.

bbc-news

3. LEARNABILITY: It is important to make sure that the interaction is easy to learn and easy to remember. People carry their own experiences and knowledge to its useful to stick to design patters that allow the users to feel more comfortable with what they already know.

It was the first time I came across this Audi website and I found it so easy to learn how to navigate through it. It is very simple and straight forward. The design is clean and clear and once you know you can click on any tap and then drag down to find more information is pretty clear how to navigate through all of it and remember it.

Screen Shot 2015-11-26 at 10.18.52 PM Screen Shot 2015-11-26 at 10.18.23 PM

4. PREDICTABILITY: User interface design should set accurate expectations about what happens before the user interacts. People should know what they can do and where they can interact. It is crucial to demonstrate the navigation and have instructions that explain the functionality.

An example about this could be the Adobe Capture App. The first time the user downloads it there are some messages that keep popping up every time a new interaction is presented as shown in the images below. This explains what people can do with it and the outcome from their action so that people learn to navigate and thus predict the possible interactions throughout all the App.

image3 image4 image1

5. FEEDBACK: This is all about providing acknowledgement of interactions and information about outcomes to the user. It is important to complement the experience when people need it.

Finally, An example about this is the confirmation and error messages we constantly get in most of the apps like the own shown in the image below.

image2

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s