introducing new interaction elements
DESCRIPTION
TRANSCRIPT
![Page 1: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/1.jpg)
DIS/PLAY
04-01-2011
![Page 2: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/2.jpg)
DIS/PLAY
04-01-2011
Classic conflict: Usability <-> experience
sense <-> sensibility
Playing it safe isn’t very sexy
An interaction that is percieved as entertaining and
engaging is more likely to make users do things, we
want them to do.
http://www.youtube.com/watch?v=cbEKAwCoCKw&feature=player_embedded#
![Page 3: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/3.jpg)
DIS/PLAY
04-01-2011
• The mind: This sounds like the right thing to do. I should start saving for my retirement
• The heart: abstract, boring – I’ll have a look at it some other day
![Page 4: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/4.jpg)
DIS/PLAY
04-01-2011
http://www.andelskassen.dk/
Privat/Pension%20og%20for
sikring/Pensionsberegner.as
px
![Page 5: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/5.jpg)
DIS/PLAY
04-01-2011
![Page 6: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/6.jpg)
DIS/PLAY
04-01-2011
![Page 7: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/7.jpg)
DIS/PLAY
04-01-2011
Engaging interaction forms adds life and relevans to
otherwise boring content
Increases the probability that a user will perform a task
and understand the content
Associates emotional values with the brand
Isn’t that really more user friendly?
![Page 8: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/8.jpg)
DIS/PLAY
04-01-2011
Metaphors from the physical world
Metaphors/interaction conventions from other
media/technologies Cellphones
Radio/TV
Movies
Computer games
It is okay to mix metaphors and conventions. Users are
generally smart enough to understand
Most important of all: It must make sense to the user
It must be relevant to the task at hand
It must draw on a shared reference
![Page 9: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/9.jpg)
DIS/PLAY
04-01-2011
Computer games – early 80ies
Music software – late 80ies
Volume control – late 80ies
![Page 10: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/10.jpg)
DIS/PLAY
04-01-2011
• A classic measuring instrument is used as a metaphor • Strict interpretation of the metaphor. Physical features are copied relatively close
![Page 11: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/11.jpg)
DIS/PLAY
04-01-2011
![Page 12: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/12.jpg)
DIS/PLAY
04-01-2011
Nordea
Andelskassen.dk
Nykredit
![Page 13: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/13.jpg)
DIS/PLAY
04-01-2011
The slider has been defined as a standard input method
in HTML 5.0: <range>
Supported by multiple browsers: Safari
Chrome
Opera
Firefox
First new standard input method in HTML since 1997
![Page 14: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/14.jpg)
DIS/PLAY
04-01-2011
![Page 15: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/15.jpg)
DIS/PLAY
04-01-2011
![Page 17: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/17.jpg)
DIS/PLAY
04-01-2011
www.businessmaan.dk
![Page 18: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/18.jpg)
DIS/PLAY
04-01-2011
Even more abstract univers
Here all navigation elements are replaced by icons at the
bottom of the screen or clickable furniture in the main
area.
Content becomes secondary
No use of shared references. Any idea what an office
chair means
= ?
![Page 19: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/19.jpg)
DIS/PLAY
04-01-2011
The dolls have to explain the meaning of the different interactive element in bubbles and reaggae song......
![Page 20: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/20.jpg)
DIS/PLAY
04-01-2011
...or click in the right spots if we do not figure it our for ourselves.
![Page 21: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/21.jpg)
DIS/PLAY
04-01-2011
Visitorville – website statistics visualised as 3D city map/Simcity/
www.visitorville.com
![Page 22: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/22.jpg)
DIS/PLAY
04-01-2011
Owes a lot to virtual worlds and video games
Funny and charming – but does not give a real overview
Which is why they also supply classic tables and graphs
![Page 23: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/23.jpg)
DIS/PLAY
04-01-2011
Taking the alternative universe to an extreme – forcing
EVERY single interaction into the concept
Letting the interface become the end instead of the
means
Creating something new and groundbreaking not
because it is better, but because no one has done it
before – there might be a reason why....
![Page 24: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/24.jpg)
DIS/PLAY
04-01-2011
![Page 25: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/25.jpg)
DIS/PLAY
04-01-2011
http://www.youtube.com/watch?v=WCW561oVVxQ&feature=player_embedded#
![Page 26: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/26.jpg)
DIS/PLAY
04-01-2011
![Page 27: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/27.jpg)
DIS/PLAY
04-01-2011
![Page 28: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/28.jpg)
DIS/PLAY
04-01-2011
Use a well known metaphor
Use a metaphor because it makes sense for the
purpose, not just because it is fun, exciting og new
The user should always be able to anticipate what will
happen when he interacts with an element
Try to mimick behavior of a metaphor from the physical
world as closely as possible
Do not force all interaction into a single metaphor just to
get a coherent universe – like a house or a car
dashboard
Don’t be afraid to mix new and classic interaction forms
Use your common sense – ”will this work?”
![Page 29: Introducing new interaction elements](https://reader034.vdocuments.mx/reader034/viewer/2022052618/54959c21b47959384d8b4d5f/html5/thumbnails/29.jpg)
DIS/PLAY
04-01-2011
Jacob Rasmussen
Phone: +45 20 62 98 42