golden rules and common ux problems of web views · golden rules and common ux problems of web...
TRANSCRIPT
![Page 1: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/1.jpg)
Dino Esposito
Golden Rules and Common UX Problems of Web Views
![Page 2: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/2.jpg)
Golden Rules and Common UX
Problems of Web Views
Dino Esposito
![Page 3: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/3.jpg)
7 golden rules of Web UX
1. Typing vs. Picking
2. Truly mobile detection
3. Stepped forms
4. Dropdown content
5. Modals
6. Dates
7. Optimizing images
![Page 4: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/4.jpg)
1. Type or Pick
PROBLEM Typing is faster than scrolling a long list.
(To say nothing of the markup.)
TIP
Use text input fields with (smart) auto-completion
![Page 5: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/5.jpg)
1. Pick or Type
TIP
Use plain old HTML drop-down list and let the (mobile) browser do the rest.
THE OTHER WAY
AROUND
PROBLEM On mobile devices picking from a list is a
more natural action than typing.
![Page 6: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/6.jpg)
2. Truly Mobile Detection
PROBLEM How do you distinguish truly mobile devices
from resized browser windows?
TIP
Use WURFL.JS and combine that with custom show/hide CSS
![Page 7: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/7.jpg)
3. Stepped forms
PROBLEM A process requires users to enter large input
data. How do you make it easy?
TIP
Place input screens in a tab strip or use jQuery plugins for a wizard.
![Page 8: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/8.jpg)
4. Drop-down content
PROBLEM People expect to find information at fingertips. Architecture of information is critical and navigation even more.
TIP
Keep the screen clean, tidy and rich of information with drop-down panels.
![Page 9: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/9.jpg)
5. Modals
PROBLEM Certain one-step operations are too much in the
same context and too little to have their own context. Modals are a way out, though with some issues.
TIP
Modals should be avoided on mobile devices and ideally on small screens. On small screens though you might want to expand the modal to the full screen.
![Page 10: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/10.jpg)
6. Dates
PROBLEM Ideally you want to give users just ONE way of entering
dates regardless of the device and browser. HTML5 doesn’t help that much.
http://www.simple-talk.com/dotnet/asp-net/accepting-dates-in-web-pages/
TIP
Use data pickers for a unique experience and drop them entirely on mobile
devices because users are used to specific “native” behaviors.
![Page 11: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/11.jpg)
7. Optimizing images
PROBLEM One image is not realistic because it means one
LARGE image. BTW, images are NOT responsive.
TIP
Use images responsively through ImageEngine, but consider tradeoffs.
![Page 12: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/12.jpg)
DON’Ts and LIMITs
o Don’t use large input forms
o Don’t let forms go without FULL validation
o Don’t blindly rely on RWD
o Don’t use HTML as the language of your UI
o Limit use standard dropdown lists
o Limit use standard checkboxes/radio buttons
![Page 13: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/13.jpg)
Bootstrap’s MIAs
Dropdown lists
Nice checkboxes
Time/Date picker
Typeahead
Toastr
Circle progress bar
Stepped forms
![Page 14: Golden Rules and Common UX Problems of Web Views · Golden Rules and Common UX Problems of Web Views Dino Esposito . 7 golden rules of Web UX 1. Typing vs. Picking 2. Truly mobile](https://reader031.vdocuments.us/reader031/viewer/2022011910/5f8037467b7b3629d23ea292/html5/thumbnails/14.jpg)
@despos
Pluralsight courses
MSDN Magazine articles
Microsoft Press books