Buttons suck! /UXcamp Europe 2013
-
Upload
petr-kosnar -
Category
Design
-
view
2.802 -
download
0
description
Transcript of Buttons suck! /UXcamp Europe 2013
![Page 1: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/1.jpg)
Buttons suck!...and the other UI elements are not much better
Petr KosnarIamPetr.com
@faxecz
![Page 2: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/2.jpg)
Buttons are classics!- Part of the device that user can interact through
Image ref 1/
![Page 3: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/3.jpg)
...but what is their meaning on modern devices with large touchscreens?
Image ref 2/
![Page 4: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/4.jpg)
...where user can interact through the whole screen?
Image ref 2/
![Page 5: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/5.jpg)
UI elements typically imitate controllers known from the physical world: buttons, knobs, sliders...
Image ref 3/
![Page 6: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/6.jpg)
WHY?
Image ref 3/
![Page 7: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/7.jpg)
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
![Page 8: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/8.jpg)
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
![Page 9: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/9.jpg)
Requirements of physical buttons:- Safety (not too sharp, ...)- Easy to operate them (big enough)- Providing feedback (movement, „click“, ...)
Image ref 4/
![Page 10: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/10.jpg)
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)
![Page 11: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/11.jpg)
Digital buttons do not reflect featuresof physical buttons, nor reasons why they weredesigned that way!
![Page 12: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/12.jpg)
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
![Page 13: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/13.jpg)
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/
![Page 14: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/14.jpg)
Image ref 6/
NEW Mental model:- Manipulating the content directly- User‘s action reflects the desired response
(drag & drop, enlarge, rotate, throw away, ...)
![Page 15: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/15.jpg)
Image ref 6/
Users understand how to interact with new devices! (and if not, they learn it fast)
![Page 16: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/16.jpg)
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
![Page 17: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/17.jpg)
Human-Machine Interaction
![Page 18: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/18.jpg)
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
![Page 19: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/19.jpg)
Image ref 8/
New, intelligent machine:
- Interactions closer to Human-Human interactions- Recognizes and understands user
(mood, opinions, background, typical needs, ...)- Predicts, empathizes, personalizes, ...
![Page 20: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/20.jpg)
Image ref 9/
New, intelligent machinerequires a lot of AI!
...based on learning from big data, & patterns recognition
![Page 21: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/21.jpg)
Image ref 9/
The way how humans interact with technologies is changing!
![Page 22: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/22.jpg)
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
![Page 23: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/23.jpg)
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, ...)
![Page 24: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/24.jpg)
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)
![Page 25: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/25.jpg)
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
![Page 26: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/26.jpg)
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?!
![Page 27: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/27.jpg)
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?
![Page 28: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/28.jpg)
Website of...
YesterdayIs 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)
![Page 29: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/29.jpg)
Website of...
Yesterday
Tomorrow
![Page 30: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/30.jpg)
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
![Page 31: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/31.jpg)
What shall we do then?
![Page 32: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/32.jpg)
• 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?
![Page 33: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/33.jpg)
Image ref 11/
Tailor interactions and UI elements for your app!
...contribute to the evolution of UIs...
![Page 34: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/34.jpg)
Image ref 12/
And be brave and creative with your digital design!
![Page 35: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/35.jpg)
Thanks!Petr KosnarIamPetr.com
@faxecz
![Page 36: Buttons suck! /UXcamp Europe 2013](https://reader033.fdocuments.us/reader033/viewer/2022061217/54b537324a79594f358b4616/html5/thumbnails/36.jpg)
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/)