Five principles of interaction

Five essential principles of Interaction Design

Source: Five Essential Principles of Interaction Design by Interactive Design Experience Expert, David Hogue, Adobe TV

Interaction Design

Not for the behaviour of the application

For the behaviour of people

Consistency: People are sensitive to change

In an experience, people pay attention to difference

We want to establish a system that allows people to feel comfortable

It needs to be familiar

You can’t change button locations when the user goes from page to page

If people are paying attention to where things are located rather than what they want to do, you have a problem

Consistency

Components with similar functionalities should have similar design

Components with different functionalities should have different design

Tabs / arrow / zoom / more information

Visibility

You need to show people that something is interactive

Interactivity cannot be hidden

‘mystery-meat navigation’

You are designing an experience not a treasure hunt

Visibility

‘false bottom’ when there is additional content which is hidden from the user

‘content hinting’ specific cues that tell the reader that there is more

Something needs to peak above the fold

False bottom exampleIf the monitor is not showing information above the red line, perhaps you need to change your layout

Texture in digital design

Invite people to click and touch

People are very click-happy

This is why buttons often look 3d, even a simple gradient in a submit button

Notice the grip zone in certain scroll basr & in the corners to invite people to grip and move

Grip zone

Texture invites people to click and move

Text styles: change colour / font weight, traditional blue and underlined to show links for instance

Exception to visibility: games and easter eggs

Learnability

Interaction should be easy to learn

Easy to remember

From one visit / use to the next

We often have to use something several times to learn it. It takes practice.

Psychology

Operant conditioning: Positive outcome increases the probability that the

behaviour will be successful

Observational learning: Modelling and imitation –watch – imitatate: video

tutorials.

Hurry up the learning curve

We should not be surprised when people use something for the first time, and it takes them a while to get used to it.

We just want to make sure this doesn’t take long

Perceived affordance

Sliders – exist in real life

Buttons – exist in real life

Tabs – exist in real life (in old organisers)

Real button has an affordance

Digital button has a perceived affordance

Predictability

People should know what will happen before it happens

Previews are good while loading for instance

Use Labels / instructions icons and images to set expectations: What to do What will happen Where the visitor will go How will the interface respond?

Feedback

Provide info about where you are, what’s happening, what will happen in the future, has something finished?

Feedback should not interrupt, it should complement.

People should know how to Undo a decision and correct a mistake

Example: a download load bar: how long it will take / you can cancel it.

Feedback

Every action should have a reaction

Let people know that they have been heard / seen / felt

If you fail to acknowledge interaction, you will get unnecessary repetitions

Indicate process and completion

Definite indicators: When the system knows exactly how long it will take for something to complete, such as: percentage / loading bars..

Indefinite indicator: When the system isn’t sure how long it will take for something to complete: Yes I am still working on this – ‘thank you please wait a moment’

Cycle summary

Summary

Professional design is important to establish credibility and trust.

Don’t be different just for the sake of being difference. Be different when it means being better.

Learn from Design patterns.

Select working & tested design patterns

Prototype. The design you have in your head vs execution. Test, play with your design.

Summary

You are not designing for yourself

Take negative feedback and turn it into newer opportunities

Show your prototype to fresh eyes

Navigation

Interaction Design & Navigation

Where the site map / flowchart meets design

Navigation needs to provide a sense of place. People need to know where they are.

Users should be able to answer: Where are you? How might you have arrived here? What can you do here? Where can you go from here?

Navigation

Navigation is all about finding what you want

Filter a lot of info into nests / pages

You should also be able to move backwards or forward & keep the interface relatively simple (especially when working with mobile devices)

‘Scent of information’

A theory that people rely on cues in the information environment to find answers

The path is rarely direct, hence ‘surfing the web’ however we can predict what attracts people’s attention

Think about your path when surfing the web, (look through your history)

A user’s path through a site

Navigation should be able to scale

There’s always something to add / change

You cannot afford to completely revise your sitemap/flowchart whenever you need to update

Sometimes your platform will restrict your navigational choices

Icons and labels are important signals

Representational: icons that resemble the objects or actions they are meant to represent

Abstract: icons that do not resemble objects or actions and which must be learned (difficult to understand when out of context)

When using abstract icons outside of context, sometimes you need text labels

Representational

Abstract