web ui best practices.ppt
TRANSCRIPT
www.axon.vnfb.com/AxonActiveVietNam
Golden Team
Web UI Design Best Practices
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
www.axon.vnfb.com/AxonActiveVietNam
Introduction
www.axon.vnfb.com/AxonActiveVietNam
UI and UX
UX: Design the Experience- How ... feel ...- Emotional
UI: Design the Product- What … look ...- Technical
www.axon.vnfb.com/AxonActiveVietNam
There is a saying ...
www.axon.vnfb.com/AxonActiveVietNam
Put everything together
www.axon.vnfb.com/AxonActiveVietNam
Patterns of Layout● Two of the common layouts are:
○ F-pattern layout○ Z-pattern layout
● What? How? Why?
www.axon.vnfb.com/AxonActiveVietNam
F-Pattern Layout21
3 4
5 6
7 8
9
www.axon.vnfb.com/AxonActiveVietNam
1 2
3 4
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.
www.axon.vnfb.com/AxonActiveVietNam
Z-Pattern Layout1 2
3 4
www.axon.vnfb.com/AxonActiveVietNam
1 2
3 4
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
www.axon.vnfb.com/AxonActiveVietNam
Getting Input
www.axon.vnfb.com/AxonActiveVietNam
Inputs
www.axon.vnfb.com/AxonActiveVietNam
Inputs
I need hints, hints,
hints!
I want to fix my mistake
now!
I hate complication!
www.axon.vnfb.com/AxonActiveVietNam
Users want to know exactlywhat data to enter.
www.axon.vnfb.com/AxonActiveVietNam
Users want immediate feedback about entered data.
www.axon.vnfb.com/AxonActiveVietNam
Users want to enter data without worrying about the formats.
www.axon.vnfb.com/AxonActiveVietNam
Inputs
Hints !!!
Immediate feedback !!!
Smart formats !!!
www.axon.vnfb.com/AxonActiveVietNam
Navigation
www.axon.vnfb.com/AxonActiveVietNam
Find alternative website
www.axon.vnfb.com/AxonActiveVietNam
Recommendations & Related Content
www.axon.vnfb.com/AxonActiveVietNam
Recommendations & Related Content
www.axon.vnfb.com/AxonActiveVietNam
www.axon.vnfb.com/AxonActiveVietNam
Infinite Scroll
www.axon.vnfb.com/AxonActiveVietNam
Infinite Scroll
www.axon.vnfb.com/AxonActiveVietNam
www.axon.vnfb.com/AxonActiveVietNam
www.axon.vnfb.com/AxonActiveVietNam
“Sticky” Fixed Navigation
www.axon.vnfb.com/AxonActiveVietNam
Data and Content Management
www.axon.vnfb.com/AxonActiveVietNam
Data and Content Management
● Content & Data Interaction● Autosave ● Quick Search Box● Hidden Information ● Media● Empty States
www.axon.vnfb.com/AxonActiveVietNam
Content & Data Interaction
Hover Click Drag & Drop
www.axon.vnfb.com/AxonActiveVietNam
Content & Data Interaction
www.axon.vnfb.com/AxonActiveVietNam
Autosave
The user wants to protect their data and continue working without having to remember to do so.
www.axon.vnfb.com/AxonActiveVietNam
Quick Search Box
User remember what he looking for, but he want to reduce manipulations.
www.axon.vnfb.com/AxonActiveVietNam
Hidden Information
The user wants quick access secondary information that’s not usually necessary to show.
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
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.
www.axon.vnfb.com/AxonActiveVietNam
Light, Color and Contrast
www.axon.vnfb.com/AxonActiveVietNam
Light
Create depth
www.axon.vnfb.com/AxonActiveVietNam
Light
Lighter shades appear closer to us and darker shades further away. Why?
www.axon.vnfb.com/AxonActiveVietNam
Color
Warmer colors expand when placed next to colder colors.
www.axon.vnfb.com/AxonActiveVietNam
Contrast
Higher contrast items stand out — they catch your eye.
www.axon.vnfb.com/AxonActiveVietNam
www.axon.vnfb.com/AxonActiveVietNam
How to Choose and Apply
www.axon.vnfb.com/AxonActiveVietNam
4 steps
Define proble
m
Find example
s
Choose a good exampl
e
Apply the
solution
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
www.axon.vnfb.com/AxonActiveVietNam
S2: Find examples
www.axon.vnfb.com/AxonActiveVietNam
S3: Choose a good example
www.axon.vnfb.com/AxonActiveVietNam
S4: Apply the solution
● Average of rating
● Clickable
items
www.axon.vnfb.com/AxonActiveVietNam
4 steps
Define proble
m
Find example
s
Choose a good exampl
e
Apply the
solution
www.axon.vnfb.com/AxonActiveVietNam
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
www.axon.vnfb.com/AxonActiveVietNam