five principles of interaction
DESCRIPTION
TRANSCRIPT
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