Buttons suck! /UXcamp Europe 2013/

Petr Kosnar
Petr KosnarUX/UI designer & researcher
Buttons suck!
...and the other UI elements are not much better
Petr Kosnar
IamPetr.com
@faxecz
Buttons are classics!
- Part of the device that user can interact through
Image ref 1/
...but what is their meaning on
modern devices with large touchscreens?
Image ref 2/
...where user can interact through the whole screen?
Image ref 2/
UI elements typically imitate controllers known
from the physical world: buttons, knobs, sliders...
Image ref 3/
WHY?
Image ref 3/
Why are UIs designed this way?
Known from the physical world
Clear mental model
That‘s how humans interact with technologies
Everybody does it
There are tools for that
Purpose of physical buttons:
- To determine interactive part of the device
- To move mechanics behind the scenes
...later to close particular circuit of electronic device
Image ref 4/
Known from the physical world
Requirements of physical buttons:
- Safety (not too sharp, ...)
- Easy to operate them (big enough)
- Providing feedback (movement, „click“, ...)
Image ref 4/
Digital buttons:
- Whole screen is (can be) interactive
- Does not move anything
- Does not need to be safe
(can have any shape, ...)
- Does not provide feedback
(the system simulates feedback artificially)
Digital buttons do not reflect features
of physical buttons, nor reasons why they were
designed that way!
Why are UIs designed this way?
Known from the physical world
Clear mental model
That‘s how humans interact with technologies
Everybody does it
There are tools for that
Mental model:
- A switch between states of the machine
- Triggers predefined action
- To be pressed
(or pulled)
That is very limiting for current devices!
Image ref 5/
Image ref 6/
NEW Mental model:
- Manipulating the content directly
- User‘s action reflects the desired response
(drag & drop, enlarge, rotate, throw away, ...)
Image ref 6/
Users understand how to interact with new devices!
(and if not, they learn it fast)
Why are UIs designed this way?
Known from the physical world
Clear Old mental model
That‘s how humans interact with technologies
Everybody does it
There are tools for that
Human-Machine
Interaction
Image ref 7/
Old, dumb machine:
- Waiting for commands
- Responds in a standard, pre-defined way
- User needs to know how to trigger certain action
- Does only what user asks for
Image ref 8/
New, intelligent machine:
- Interactions closer to Human-Human interactions
- Recognizes and understands user
(mood, opinions, background, typical needs, ...)
- Predicts, empathizes, personalizes, ...
Image ref 9/
New, intelligent machine
requires a lot of AI!
...based on learning from big data,
& patterns recognition
Image ref 9/
The way how humans interact
with technologies is changing!
Why are UIs designed this way?
Known from the physical world
Clear Old mental model
That‘s how humans used to interact with technologies
Everybody does it
There are tools for that
http://www.youtube.com/watch?v=cVCGfGZbhGo
Image ref 10/
Others still use buttons too?
Examples of „new“ interactions:
- iPad app Paper, Android OS, ...many!
(direct manipulation of content, intuitive gestures,
user‘s actions linked to desired response, ...)
http://www.youtube.com/watch?v=cVCGfGZbhGo
Image ref 10/
...and these apps are popular and used by masses!
(although the apps happily violate rigid
usability guidelines)
Why are UIs designed this way?
Known from the physical world
Clear Old mental model
That‘s how humans used to interact with technologies
Everybody does it
There are tools for that
Why are UIs designed this way?
Known from the physical world
Clear Old mental model
That‘s how humans used to interact with technologies
Everybody does it
There are tools for that
...so the evolution of UIs must stop?!
Why are UIs designed this way?
Known from the physical world
Clear Old mental model
That‘s how humans used to interact with technologies
Everybody does it
There are tools for that So what?
Website of...
Yesterday
Is old and dumb.
- Consists of static pages that can be browsed
...like a big library in which you must search books
- Is passive - waiting for user‘s action
(if user knows what to ask for, and how)
Website of...
Yesterday
Tomorrow
Website of...
Is new and intelligent!
- Active dialogue with user – conversation!
- Recognizes particular user
(returning? frequent visitor? what is he like?)
- Reflects user‘s needs, character, mood, opinions, ...
- Offers only content useful for him (her)
...in a natural, human-like way.
Tomorrow
What shall we do then?
• Don‘t limit yourself for ancient UI elements
• Use the possibilities of new technologies
• Search for meaningful interactions
• Experiment
• Forget about how you did it yesterday
• Design for tomorrow
• Begin with interactions, not UI elements
• Customize your interfaces & interactions
What shall we do then?
Image ref 11/
Tailor interactions and UI elements for your app!
...contribute to the evolution of UIs...
Image ref 12/
And be brave and creative with your digital design!
Thanks!
Petr Kosnar
IamPetr.com
@faxecz
Image credits:
1/ Flickr: flattop341 (http://www.flickr.com/photos/46861107@N00/253770935/)
2/ Flickr: blakespot (http://www.flickr.com/photos/35448539@N00/4773693893/)
3/ Shegystudio (http://ui-cloud.com/white-blue-webui-elements-pac/)
4/ Flickr: włodi (http://www.flickr.com/photos/19716902@N00/3085157011/)
5/ Flickr: Humphrey King (http://www.flickr.com/photos/53646146@N02/8199045417/)
6/ Luke Wroblewski (http://static.lukew.com/TouchGestureTemplate.pdf)
7/ Flickr: alexkerhead (http://www.flickr.com/photos/26354629@N02/2749019656/)
8/ Flickr: dierk schaefer (http://www.flickr.com/photos/26480501@N06/2961565820/)
9/ Flickr: Saad Faruque (http://www.flickr.com/photos/12278984@N02/7254347346/)
10/ Youtube: Gizmo (http://www.youtube.com/watch?v=hw3zfAkp9SI)
11/ Flickr: Hello Turkey Toe (http://www.flickr.com/photos/7298413@N06/4932748746/)
12/ Flickr: marksweb (http://www.flickr.com/photos/92166740@N00/3749673425/)
1 of 36

Recommended

Ux revised /UX camp CZ/ by
Ux revised /UX camp CZ/Ux revised /UX camp CZ/
Ux revised /UX camp CZ/Petr Kosnar
5.1K views66 slides
Designing User Experience, Not User Interface /Conversion Meetup 2013/ by
Designing User Experience, Not User Interface /Conversion Meetup 2013/Designing User Experience, Not User Interface /Conversion Meetup 2013/
Designing User Experience, Not User Interface /Conversion Meetup 2013/Petr Kosnar
5.1K views52 slides
The Future of Designing Human-Technology Interactions /Open lecture CIID/ by
The Future of Designing Human-Technology Interactions /Open lecture CIID/The Future of Designing Human-Technology Interactions /Open lecture CIID/
The Future of Designing Human-Technology Interactions /Open lecture CIID/Petr Kosnar
4K views19 slides
artificial intelligence by
artificial intelligenceartificial intelligence
artificial intelligenceBikas Sadashiv
773 views26 slides
E3 chap-05 by
E3 chap-05E3 chap-05
E3 chap-05Lukmanulhakim Almamalik
506 views92 slides
Mobile Research by
Mobile ResearchMobile Research
Mobile ResearchSriharsha Putrevu
501 views13 slides

More Related Content

What's hot

Building Usable AR Interfaces by
Building Usable AR InterfacesBuilding Usable AR Interfaces
Building Usable AR InterfacesMark Billinghurst
1.3K views42 slides
Wearable computing and embodied interaction by
Wearable computing and embodied interactionWearable computing and embodied interaction
Wearable computing and embodied interactionUTFPR
732 views47 slides
Hci intro + task by
Hci intro + taskHci intro + task
Hci intro + taskAndrea Valente
392 views13 slides
Designing Kansei Experience For Interaction by
Designing Kansei Experience For InteractionDesigning Kansei Experience For Interaction
Designing Kansei Experience For InteractionTungjentsai 蔡敦仁
1.2K views47 slides
Final virtual seminar_mobile_frontier by
Final virtual seminar_mobile_frontierFinal virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontierRachel Hinman
2.5K views153 slides
Introduction to Interaction Design by
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction DesignUTFPR
489 views43 slides

What's hot(20)

Wearable computing and embodied interaction by UTFPR
Wearable computing and embodied interactionWearable computing and embodied interaction
Wearable computing and embodied interaction
UTFPR732 views
Final virtual seminar_mobile_frontier by Rachel Hinman
Final virtual seminar_mobile_frontierFinal virtual seminar_mobile_frontier
Final virtual seminar_mobile_frontier
Rachel Hinman2.5K views
Introduction to Interaction Design by UTFPR
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
UTFPR489 views
Iproduct presentation by 11009373
Iproduct presentationIproduct presentation
Iproduct presentation
11009373201 views
LivingTom/Interface by Alvaro Soto
LivingTom/Interface LivingTom/Interface
LivingTom/Interface
Alvaro Soto181 views
Interaction design methods by Timo Arnall
Interaction design methodsInteraction design methods
Interaction design methods
Timo Arnall7.2K views
Mobile Prototyping Essentials Workshop - Part One by Rachel Hinman
Mobile Prototyping Essentials Workshop - Part OneMobile Prototyping Essentials Workshop - Part One
Mobile Prototyping Essentials Workshop - Part One
Rachel Hinman51.8K views
UX, ethnography and possibilities: for Libraries, Museums and Archives by Ned Potter
UX, ethnography and possibilities: for Libraries, Museums and ArchivesUX, ethnography and possibilities: for Libraries, Museums and Archives
UX, ethnography and possibilities: for Libraries, Museums and Archives
Ned Potter1M views
Digital Art and Philosophy #3 by Melanie Swan
Digital Art and Philosophy #3Digital Art and Philosophy #3
Digital Art and Philosophy #3
Melanie Swan2.2K views
Mobile Prototyping Essentials - Part II by Rachel Hinman
Mobile Prototyping Essentials - Part IIMobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Rachel Hinman3.5K views
Evaluation by hcicourse
EvaluationEvaluation
Evaluation
hcicourse676 views
Mobile Prototyping Essentials Workshop: Part 2 by Rachel Hinman
Mobile Prototyping Essentials Workshop: Part 2Mobile Prototyping Essentials Workshop: Part 2
Mobile Prototyping Essentials Workshop: Part 2
Rachel Hinman3.8K views
Interaction design for TV by supriyaajmera
Interaction design for TVInteraction design for TV
Interaction design for TV
supriyaajmera1.6K views

Viewers also liked

Úloha UX designu ve vývoji produktů /UX Monday Ostrava/ by
Úloha UX designu ve vývoji produktů /UX Monday Ostrava/Úloha UX designu ve vývoji produktů /UX Monday Ostrava/
Úloha UX designu ve vývoji produktů /UX Monday Ostrava/Petr Kosnar
3.8K views29 slides
Memory /UXCamp Europe 2011/ by
Memory /UXCamp Europe 2011/Memory /UXCamp Europe 2011/
Memory /UXCamp Europe 2011/Petr Kosnar
4K views28 slides
Rozhodněte o rozhodnutí druhých /WebExpo 2011/ by
Rozhodněte o rozhodnutí druhých /WebExpo 2011/Rozhodněte o rozhodnutí druhých /WebExpo 2011/
Rozhodněte o rozhodnutí druhých /WebExpo 2011/Petr Kosnar
4.2K views18 slides
The Future of Communication Technology /UXcamp Europe 2012/ by
The Future of Communication Technology /UXcamp Europe 2012/The Future of Communication Technology /UXcamp Europe 2012/
The Future of Communication Technology /UXcamp Europe 2012/Petr Kosnar
8.8K views22 slides
Design without critique is like a flower without water (#uxce13 version) by
Design without critique is like a flower without water (#uxce13 version)Design without critique is like a flower without water (#uxce13 version)
Design without critique is like a flower without water (#uxce13 version)Petr Stedry
4.1K views83 slides
4 steps from sadness til zen by
4 steps from sadness til zen4 steps from sadness til zen
4 steps from sadness til zenEirik Hafver Rønjum
2.6K views70 slides

Viewers also liked(20)

Úloha UX designu ve vývoji produktů /UX Monday Ostrava/ by Petr Kosnar
Úloha UX designu ve vývoji produktů /UX Monday Ostrava/Úloha UX designu ve vývoji produktů /UX Monday Ostrava/
Úloha UX designu ve vývoji produktů /UX Monday Ostrava/
Petr Kosnar3.8K views
Memory /UXCamp Europe 2011/ by Petr Kosnar
Memory /UXCamp Europe 2011/Memory /UXCamp Europe 2011/
Memory /UXCamp Europe 2011/
Petr Kosnar4K views
Rozhodněte o rozhodnutí druhých /WebExpo 2011/ by Petr Kosnar
Rozhodněte o rozhodnutí druhých /WebExpo 2011/Rozhodněte o rozhodnutí druhých /WebExpo 2011/
Rozhodněte o rozhodnutí druhých /WebExpo 2011/
Petr Kosnar4.2K views
The Future of Communication Technology /UXcamp Europe 2012/ by Petr Kosnar
The Future of Communication Technology /UXcamp Europe 2012/The Future of Communication Technology /UXcamp Europe 2012/
The Future of Communication Technology /UXcamp Europe 2012/
Petr Kosnar8.8K views
Design without critique is like a flower without water (#uxce13 version) by Petr Stedry
Design without critique is like a flower without water (#uxce13 version)Design without critique is like a flower without water (#uxce13 version)
Design without critique is like a flower without water (#uxce13 version)
Petr Stedry4.1K views
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013 by Mark Melnykowycz
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013
Quantified User - Wearable Sensors - Content Scaling - UXCamp Europe 2013
Mark Melnykowycz2.6K views
The UX of Bitcoin by Tamim Swaid
The UX of BitcoinThe UX of Bitcoin
The UX of Bitcoin
Tamim Swaid3.9K views
Improving site search with search analytics by Audun Rundberg
Improving site search with search analyticsImproving site search with search analytics
Improving site search with search analytics
Audun Rundberg2.3K views
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013 by Lutz Schmitt
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013
Kitsch - Bad Taste And Loving It - UXcamp Europe Berlin 2013
Lutz Schmitt3.4K views
UX Camp Berlin 2013 - Hands-on UX by Reto Laemmler
UX Camp Berlin 2013 - Hands-on UXUX Camp Berlin 2013 - Hands-on UX
UX Camp Berlin 2013 - Hands-on UX
Reto Laemmler2.1K views
Basics in User Experience Design, Information Architecture & Usability by Sebastian Waters
Basics in User Experience Design, Information Architecture & UsabilityBasics in User Experience Design, Information Architecture & Usability
Basics in User Experience Design, Information Architecture & Usability
Sebastian Waters10.9K views
Design studio workshop by Petr Stedry
Design studio workshopDesign studio workshop
Design studio workshop
Petr Stedry5.3K views
User Experience vs Customer Experience - same,same but different by Niels Anhalt
User Experience vs Customer Experience - same,same but differentUser Experience vs Customer Experience - same,same but different
User Experience vs Customer Experience - same,same but different
Niels Anhalt18.6K views
Brand Services – A user centric marketing tool by Christian Vatter
Brand Services – A user centric marketing toolBrand Services – A user centric marketing tool
Brand Services – A user centric marketing tool
Christian Vatter8K views
Rapid UX Test by lmdelvi
Rapid UX TestRapid UX Test
Rapid UX Test
lmdelvi2.8K views
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl by Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen MardahlUX Camp CPH 2013 Ignite! presentation, Karen Mardahl
UX Camp CPH 2013 Ignite! presentation, Karen Mardahl
Karen Mardahl5.2K views
Content First, Designing in the Browser - UX camp CPH by Mette Schou Andersen
Content First, Designing in the Browser -  UX camp CPHContent First, Designing in the Browser -  UX camp CPH
Content First, Designing in the Browser - UX camp CPH

Similar to Buttons suck! /UXcamp Europe 2013/

Human Computer Interaction by
Human Computer InteractionHuman Computer Interaction
Human Computer InteractionSandy Harwell
2 views80 slides
Bill Moggridge-Designing interactions-the mouse and the desktop by
Bill Moggridge-Designing interactions-the mouse and the desktopBill Moggridge-Designing interactions-the mouse and the desktop
Bill Moggridge-Designing interactions-the mouse and the desktopdilemakiner
605 views18 slides
Bill Moggridge-Designing interactions-the mouse and the desktop by
Bill Moggridge-Designing interactions-the mouse and the desktopBill Moggridge-Designing interactions-the mouse and the desktop
Bill Moggridge-Designing interactions-the mouse and the desktopdilemakiner
1.4K views18 slides
ARTIFICIAL INTELLIGENCE-New.pptx by
ARTIFICIAL INTELLIGENCE-New.pptxARTIFICIAL INTELLIGENCE-New.pptx
ARTIFICIAL INTELLIGENCE-New.pptxParveshSachdev
16 views26 slides
E3 chap-05 by
E3 chap-05E3 chap-05
E3 chap-05Welly Dian Astika
157 views92 slides
Interactive design basics by
Interactive design basicsInteractive design basics
Interactive design basicsPhD Research Scholar
232 views92 slides

Similar to Buttons suck! /UXcamp Europe 2013/(20)

Bill Moggridge-Designing interactions-the mouse and the desktop by dilemakiner
Bill Moggridge-Designing interactions-the mouse and the desktopBill Moggridge-Designing interactions-the mouse and the desktop
Bill Moggridge-Designing interactions-the mouse and the desktop
dilemakiner605 views
Bill Moggridge-Designing interactions-the mouse and the desktop by dilemakiner
Bill Moggridge-Designing interactions-the mouse and the desktopBill Moggridge-Designing interactions-the mouse and the desktop
Bill Moggridge-Designing interactions-the mouse and the desktop
dilemakiner1.4K views
ARTIFICIAL INTELLIGENCE-New.pptx by ParveshSachdev
ARTIFICIAL INTELLIGENCE-New.pptxARTIFICIAL INTELLIGENCE-New.pptx
ARTIFICIAL INTELLIGENCE-New.pptx
ParveshSachdev16 views
Computers And The World Of Computing by Lisa Brown
Computers And The World Of ComputingComputers And The World Of Computing
Computers And The World Of Computing
Lisa Brown3 views
Foundations understanding users and interactions by Preeti Mishra
Foundations  understanding users and interactionsFoundations  understanding users and interactions
Foundations understanding users and interactions
Preeti Mishra757 views
E3 Chap 05 Interaction Design Basics by Gameo
E3 Chap 05 Interaction Design BasicsE3 Chap 05 Interaction Design Basics
E3 Chap 05 Interaction Design Basics
Gameo384 views
HCI 3e - Ch 5: Interaction design basics by Alan Dix
HCI 3e - Ch 5:  Interaction design basicsHCI 3e - Ch 5:  Interaction design basics
HCI 3e - Ch 5: Interaction design basics
Alan Dix54.7K views
Artificial intelligence by Danish Javed
Artificial intelligenceArtificial intelligence
Artificial intelligence
Danish Javed263 views
Designing for mobile. A UX perspective for developers by Oscar Gonzalez Garza
Designing for mobile. A UX perspective for developersDesigning for mobile. A UX perspective for developers
Designing for mobile. A UX perspective for developers
aman presentation 2.pptx by SanuBose
aman presentation 2.pptxaman presentation 2.pptx
aman presentation 2.pptx
SanuBose40 views
Artificial Intelligence Vs. Ai by Dani Cox
Artificial Intelligence Vs. AiArtificial Intelligence Vs. Ai
Artificial Intelligence Vs. Ai
Dani Cox4 views

Recently uploaded

EL FODA.pdf by
EL FODA.pdfEL FODA.pdf
EL FODA.pdfestefanimilenca
8 views1 slide
New Icon Presentation.pdf by
New Icon Presentation.pdfNew Icon Presentation.pdf
New Icon Presentation.pdfsydneyjrichardson
27 views5 slides
Essay 29.docx by
Essay 29.docxEssay 29.docx
Essay 29.docxOrlySiquihua
8 views1 slide
FIESTAS DE QUITO.pdf by
FIESTAS DE QUITO.pdfFIESTAS DE QUITO.pdf
FIESTAS DE QUITO.pdfeluniversocom
26 views8 slides
Samsung Galaxy Watch 5 Presentation by
Samsung Galaxy Watch 5 PresentationSamsung Galaxy Watch 5 Presentation
Samsung Galaxy Watch 5 Presentationaryasheel1
13 views1 slide
BeatsFest Brand Guidelines Final.pdf by
BeatsFest Brand Guidelines Final.pdfBeatsFest Brand Guidelines Final.pdf
BeatsFest Brand Guidelines Final.pdfEddiePena9
7 views12 slides

Recently uploaded(20)

Samsung Galaxy Watch 5 Presentation by aryasheel1
Samsung Galaxy Watch 5 PresentationSamsung Galaxy Watch 5 Presentation
Samsung Galaxy Watch 5 Presentation
aryasheel113 views
BeatsFest Brand Guidelines Final.pdf by EddiePena9
BeatsFest Brand Guidelines Final.pdfBeatsFest Brand Guidelines Final.pdf
BeatsFest Brand Guidelines Final.pdf
EddiePena97 views
boggiano_project 2.pptx by samboggiano
boggiano_project 2.pptxboggiano_project 2.pptx
boggiano_project 2.pptx
samboggiano20 views
Legal PPT Presentation.pptx by 125071063
Legal PPT Presentation.pptxLegal PPT Presentation.pptx
Legal PPT Presentation.pptx
1250710635 views
Using Experiential Design to Understand the Future of AI & Immersive Storytel... by Kent Bye
Using Experiential Design to Understand the Future of AI & Immersive Storytel...Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Kent Bye18 views
Canned Cocktail Flat Labels by nyhapedraza
Canned Cocktail Flat LabelsCanned Cocktail Flat Labels
Canned Cocktail Flat Labels
nyhapedraza16 views
The Report is Dead, Long Live the Report ! Communicating Usability Research F... by Centralis
The Report is Dead, Long Live the Report ! Communicating Usability Research F...The Report is Dead, Long Live the Report ! Communicating Usability Research F...
The Report is Dead, Long Live the Report ! Communicating Usability Research F...
Centralis8 views
Free World aids day Template from Best presentation design agency by slideceotemplates
Free World aids day Template from Best presentation design agencyFree World aids day Template from Best presentation design agency
Free World aids day Template from Best presentation design agency
Business X Design - People, Planet & Product by Cyber-Duck
Business X Design - People, Planet & ProductBusiness X Design - People, Planet & Product
Business X Design - People, Planet & Product
Cyber-Duck25 views
DR Portfolio.pptx by robertsd2
DR Portfolio.pptxDR Portfolio.pptx
DR Portfolio.pptx
robertsd218 views
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media19 views

Buttons suck! /UXcamp Europe 2013/

  • 1. Buttons suck! ...and the other UI elements are not much better Petr Kosnar IamPetr.com @faxecz
  • 2. Buttons are classics! - Part of the device that user can interact through Image ref 1/
  • 3. ...but what is their meaning on modern devices with large touchscreens? Image ref 2/
  • 4. ...where user can interact through the whole screen? Image ref 2/
  • 5. UI elements typically imitate controllers known from the physical world: buttons, knobs, sliders... Image ref 3/
  • 7. Why are UIs designed this way? Known from the physical world Clear mental model That‘s how humans interact with technologies Everybody does it There are tools for that
  • 8. Purpose of physical buttons: - To determine interactive part of the device - To move mechanics behind the scenes ...later to close particular circuit of electronic device Image ref 4/ Known from the physical world
  • 9. Requirements of physical buttons: - Safety (not too sharp, ...) - Easy to operate them (big enough) - Providing feedback (movement, „click“, ...) Image ref 4/
  • 10. Digital buttons: - Whole screen is (can be) interactive - Does not move anything - Does not need to be safe (can have any shape, ...) - Does not provide feedback (the system simulates feedback artificially)
  • 11. Digital buttons do not reflect features of physical buttons, nor reasons why they were designed that way!
  • 12. Why are UIs designed this way? Known from the physical world Clear mental model That‘s how humans interact with technologies Everybody does it There are tools for that
  • 13. Mental model: - A switch between states of the machine - Triggers predefined action - To be pressed (or pulled) That is very limiting for current devices! Image ref 5/
  • 14. Image ref 6/ NEW Mental model: - Manipulating the content directly - User‘s action reflects the desired response (drag & drop, enlarge, rotate, throw away, ...)
  • 15. Image ref 6/ Users understand how to interact with new devices! (and if not, they learn it fast)
  • 16. Why are UIs designed this way? Known from the physical world Clear Old mental model That‘s how humans interact with technologies Everybody does it There are tools for that
  • 18. Image ref 7/ Old, dumb machine: - Waiting for commands - Responds in a standard, pre-defined way - User needs to know how to trigger certain action - Does only what user asks for
  • 19. Image ref 8/ New, intelligent machine: - Interactions closer to Human-Human interactions - Recognizes and understands user (mood, opinions, background, typical needs, ...) - Predicts, empathizes, personalizes, ...
  • 20. Image ref 9/ New, intelligent machine requires a lot of AI! ...based on learning from big data, & patterns recognition
  • 21. Image ref 9/ The way how humans interact with technologies is changing!
  • 22. Why are UIs designed this way? Known from the physical world Clear Old mental model That‘s how humans used to interact with technologies Everybody does it There are tools for that
  • 23. http://www.youtube.com/watch?v=cVCGfGZbhGo Image ref 10/ Others still use buttons too? Examples of „new“ interactions: - iPad app Paper, Android OS, ...many! (direct manipulation of content, intuitive gestures, user‘s actions linked to desired response, ...)
  • 24. http://www.youtube.com/watch?v=cVCGfGZbhGo Image ref 10/ ...and these apps are popular and used by masses! (although the apps happily violate rigid usability guidelines)
  • 25. Why are UIs designed this way? Known from the physical world Clear Old mental model That‘s how humans used to interact with technologies Everybody does it There are tools for that
  • 26. Why are UIs designed this way? Known from the physical world Clear Old mental model That‘s how humans used to interact with technologies Everybody does it There are tools for that ...so the evolution of UIs must stop?!
  • 27. Why are UIs designed this way? Known from the physical world Clear Old mental model That‘s how humans used to interact with technologies Everybody does it There are tools for that So what?
  • 28. Website of... Yesterday Is old and dumb. - Consists of static pages that can be browsed ...like a big library in which you must search books - Is passive - waiting for user‘s action (if user knows what to ask for, and how)
  • 30. Website of... Is new and intelligent! - Active dialogue with user – conversation! - Recognizes particular user (returning? frequent visitor? what is he like?) - Reflects user‘s needs, character, mood, opinions, ... - Offers only content useful for him (her) ...in a natural, human-like way. Tomorrow
  • 31. What shall we do then?
  • 32. • Don‘t limit yourself for ancient UI elements • Use the possibilities of new technologies • Search for meaningful interactions • Experiment • Forget about how you did it yesterday • Design for tomorrow • Begin with interactions, not UI elements • Customize your interfaces & interactions What shall we do then?
  • 33. Image ref 11/ Tailor interactions and UI elements for your app! ...contribute to the evolution of UIs...
  • 34. Image ref 12/ And be brave and creative with your digital design!
  • 36. Image credits: 1/ Flickr: flattop341 (http://www.flickr.com/photos/46861107@N00/253770935/) 2/ Flickr: blakespot (http://www.flickr.com/photos/35448539@N00/4773693893/) 3/ Shegystudio (http://ui-cloud.com/white-blue-webui-elements-pac/) 4/ Flickr: włodi (http://www.flickr.com/photos/19716902@N00/3085157011/) 5/ Flickr: Humphrey King (http://www.flickr.com/photos/53646146@N02/8199045417/) 6/ Luke Wroblewski (http://static.lukew.com/TouchGestureTemplate.pdf) 7/ Flickr: alexkerhead (http://www.flickr.com/photos/26354629@N02/2749019656/) 8/ Flickr: dierk schaefer (http://www.flickr.com/photos/26480501@N06/2961565820/) 9/ Flickr: Saad Faruque (http://www.flickr.com/photos/12278984@N02/7254347346/) 10/ Youtube: Gizmo (http://www.youtube.com/watch?v=hw3zfAkp9SI) 11/ Flickr: Hello Turkey Toe (http://www.flickr.com/photos/7298413@N06/4932748746/) 12/ Flickr: marksweb (http://www.flickr.com/photos/92166740@N00/3749673425/)