Successfully reported this slideshow.
Your SlideShare is downloading. ×

Buttons suck! /UXcamp Europe 2013/

Ad

Buttons suck!
...and the other UI elements are not much better
Petr Kosnar
IamPetr.com
@faxecz

Ad

Buttons are classics!
- Part of the device that user can interact through
Image ref 1/

Ad

...but what is their meaning on
modern devices with large touchscreens?
Image ref 2/

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Ux revised /UX camp CZ/
Ux revised /UX camp CZ/
Loading in …3
×

Check these out next

1 of 36 Ad
1 of 36 Ad

Buttons suck! /UXcamp Europe 2013/

Download to read offline

Why buttons suck, and other truths about ancient UIs & interactions that do not utilize possibilities of current techologies.

(UXcamp Europe 2013, Berlin)

Why buttons suck, and other truths about ancient UIs & interactions that do not utilize possibilities of current techologies.

(UXcamp Europe 2013, Berlin)

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

Advertisement
Advertisement

Buttons suck! /UXcamp Europe 2013/

  1. 1. Buttons suck! ...and the other UI elements are not much better Petr Kosnar IamPetr.com @faxecz
  2. 2. Buttons are classics! - Part of the device that user can interact through Image ref 1/
  3. 3. ...but what is their meaning on modern devices with large touchscreens? Image ref 2/
  4. 4. ...where user can interact through the whole screen? Image ref 2/
  5. 5. UI elements typically imitate controllers known from the physical world: buttons, knobs, sliders... Image ref 3/
  6. 6. WHY? Image ref 3/
  7. 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. 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. 9. Requirements of physical buttons: - Safety (not too sharp, ...) - Easy to operate them (big enough) - Providing feedback (movement, „click“, ...) Image ref 4/
  10. 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. 11. Digital buttons do not reflect features of physical buttons, nor reasons why they were designed that way!
  12. 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. 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. 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. 15. Image ref 6/ Users understand how to interact with new devices! (and if not, they learn it fast)
  16. 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
  17. 17. Human-Machine Interaction
  18. 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. 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. 20. Image ref 9/ New, intelligent machine requires a lot of AI! ...based on learning from big data, & patterns recognition
  21. 21. Image ref 9/ The way how humans interact with technologies is changing!
  22. 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. 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. 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. 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. 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. 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. 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)
  29. 29. Website of... Yesterday Tomorrow
  30. 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. 31. What shall we do then?
  32. 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. 33. Image ref 11/ Tailor interactions and UI elements for your app! ...contribute to the evolution of UIs...
  34. 34. Image ref 12/ And be brave and creative with your digital design!
  35. 35. Thanks! Petr Kosnar IamPetr.com @faxecz
  36. 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/)

×