Web UI Best Practices.ppt
-
Upload
hoang-nguyen-manh -
Category
Documents
-
view
70 -
download
0
Transcript of Web UI Best Practices.ppt
![Page 1: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/1.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Golden Team
Web UI Design Best Practices
![Page 2: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/2.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Agenda
● Introduction● Best practices
○ Layout○ Getting input○ Navigation○ Data & Content Management○ Light, Color and Contrast
● How to Choose and Apply● Q&A
![Page 3: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/3.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Introduction
![Page 4: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/4.jpg)
www.axon.vnfb.com/AxonActiveVietNam
UI and UX
UX: Design the Experience- How ... feel ...- Emotional
UI: Design the Product- What … look ...- Technical
![Page 5: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/5.jpg)
www.axon.vnfb.com/AxonActiveVietNam
There is a saying ...
![Page 6: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/6.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Put everything together
![Page 7: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/7.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Patterns of Layout● Two of the common layouts are:
○ F-pattern layout○ Z-pattern layout
● What? How? Why?
![Page 8: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/8.jpg)
www.axon.vnfb.com/AxonActiveVietNam
F-Pattern Layout21
3 4
5 6
7 8
9
![Page 9: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/9.jpg)
www.axon.vnfb.com/AxonActiveVietNam
1 2
3 4
![Page 10: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/10.jpg)
www.axon.vnfb.com/AxonActiveVietNam
F-Pattern Layout● Why Is This Pattern Effective?
○ It follows users' natural sight.
○ Conversely, It promotes the user’s sight to follow naturally.
![Page 11: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/11.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Z-Pattern Layout1 2
3 4
![Page 12: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/12.jpg)
www.axon.vnfb.com/AxonActiveVietNam
1 2
3 4
![Page 13: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/13.jpg)
www.axon.vnfb.com/AxonActiveVietNam
● Why Is This Pattern Effective?
○ It follows users' natural sight.
○ It adheres the 4 of principles of an effective design:
1. Branding2. Visual Hierarchy3. Structure4. A Call to Action
Z-Pattern Layout
![Page 14: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/14.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Getting Input
![Page 15: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/15.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Inputs
![Page 16: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/16.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Inputs
I need hints, hints,
hints!
I want to fix my mistake
now!
I hate complication!
![Page 17: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/17.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Users want to know exactlywhat data to enter.
![Page 18: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/18.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Users want immediate feedback about entered data.
![Page 19: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/19.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Users want to enter data without worrying about the formats.
![Page 20: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/20.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Inputs
Hints !!!
Immediate feedback !!!
Smart formats !!!
![Page 21: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/21.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Navigation
![Page 22: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/22.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Find alternative website
![Page 23: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/23.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Recommendations & Related Content
![Page 24: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/24.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Recommendations & Related Content
![Page 25: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/25.jpg)
www.axon.vnfb.com/AxonActiveVietNam
![Page 26: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/26.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Infinite Scroll
![Page 27: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/27.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Infinite Scroll
![Page 28: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/28.jpg)
www.axon.vnfb.com/AxonActiveVietNam
![Page 29: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/29.jpg)
www.axon.vnfb.com/AxonActiveVietNam
![Page 30: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/30.jpg)
www.axon.vnfb.com/AxonActiveVietNam
“Sticky” Fixed Navigation
![Page 31: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/31.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Data and Content Management
![Page 32: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/32.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Data and Content Management
● Content & Data Interaction● Autosave ● Quick Search Box● Hidden Information ● Media● Empty States
![Page 33: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/33.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Content & Data Interaction
Hover Click Drag & Drop
![Page 34: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/34.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Content & Data Interaction
![Page 35: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/35.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Autosave
The user wants to protect their data and continue working without having to remember to do so.
![Page 36: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/36.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Quick Search Box
User remember what he looking for, but he want to reduce manipulations.
![Page 37: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/37.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Hidden Information
The user wants quick access secondary information that’s not usually necessary to show.
![Page 38: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/38.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Media
Flickr Photo Viewer
Lightbox pops up, background grays out
Thumb image slider
Full screen mode
Back and forward navigation button
![Page 39: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/39.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Empty States
The user needs to know why a section of the application is empty and what to do next.
![Page 40: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/40.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Light, Color and Contrast
![Page 41: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/41.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Light
Create depth
![Page 42: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/42.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Light
Lighter shades appear closer to us and darker shades further away. Why?
![Page 43: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/43.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Color
Warmer colors expand when placed next to colder colors.
![Page 44: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/44.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Contrast
Higher contrast items stand out — they catch your eye.
![Page 45: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/45.jpg)
www.axon.vnfb.com/AxonActiveVietNam
![Page 46: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/46.jpg)
www.axon.vnfb.com/AxonActiveVietNam
How to Choose and Apply
![Page 47: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/47.jpg)
www.axon.vnfb.com/AxonActiveVietNam
4 steps
Define proble
m
Find example
s
Choose a good exampl
e
Apply the
solution
![Page 48: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/48.jpg)
www.axon.vnfb.com/AxonActiveVietNam
S1: Define problem #User Story 6969
As a user,
I want to rate a video and overview about all rating of this video
Then I can contribute to the site, and help build a great community
![Page 49: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/49.jpg)
www.axon.vnfb.com/AxonActiveVietNam
S2: Find examples
![Page 50: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/50.jpg)
www.axon.vnfb.com/AxonActiveVietNam
S3: Choose a good example
![Page 51: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/51.jpg)
www.axon.vnfb.com/AxonActiveVietNam
S4: Apply the solution
● Average of rating
● Clickable
items
![Page 52: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/52.jpg)
www.axon.vnfb.com/AxonActiveVietNam
4 steps
Define proble
m
Find example
s
Choose a good exampl
e
Apply the
solution
![Page 53: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/53.jpg)
www.axon.vnfb.com/AxonActiveVietNam
![Page 54: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/54.jpg)
www.axon.vnfb.com/AxonActiveVietNam
Reference
● http://www.uxpin.com/web-ui-design-best-practices.html● http://www.uxpin.com/web-design-patterns.html ● http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-desi
gners-guide-to-the-tech-industry
● http://thecdm.ca/news/ux-vs-ui ● http://www.vanseodesign.com/web-design/3-design-layouts/ ● http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.h
tml
![Page 55: Web UI Best Practices.ppt](https://reader036.fdocuments.us/reader036/viewer/2022062313/55cd3691bb61ebcc498b465d/html5/thumbnails/55.jpg)
www.axon.vnfb.com/AxonActiveVietNam