Web UI Best Practices.ppt

www.axon.vnfb.com/AxonActiveVietNam

Golden Team

Web UI Design Best Practices

le an khang

the suggestions based on the user’s preferences or previous activity, Related Content is more about showing related items based on the way they are categorized and tagged


Agenda

● Introduction● Best practices

○ Layout○ Getting input○ Navigation○ Data & Content Management○ Light, Color and Contrast

● How to Choose and Apply● Q&A


Introduction


UI and UX

UX: Design the Experience- How ... feel ...- Emotional

UI: Design the Product- What … look ...- Technical


There is a saying ...


Put everything together


Patterns of Layout● Two of the common layouts are:

○ F-pattern layout○ Z-pattern layout

● What? How? Why?


F-Pattern Layout21

3 4

5 6

7 8

9


1 2

3 4


F-Pattern Layout● Why Is This Pattern Effective?

○ It follows users' natural sight.

○ Conversely, It promotes the user’s sight to follow naturally.


Z-Pattern Layout1 2

3 4


1 2

3 4


● 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


Getting Input


Inputs


Inputs

I need hints, hints,

hints!

I want to fix my mistake

now!

I hate complication!


Users want to know exactlywhat data to enter.


Users want immediate feedback about entered data.


Users want to enter data without worrying about the formats.


Inputs

Hints !!!

Immediate feedback !!!

Smart formats !!!


Navigation


Find alternative website


Recommendations & Related Content


Recommendations & Related Content



Infinite Scroll


Infinite Scroll




“Sticky” Fixed Navigation


Data and Content Management


Data and Content Management

● Content & Data Interaction● Autosave ● Quick Search Box● Hidden Information ● Media● Empty States


Content & Data Interaction

Hover Click Drag & Drop


Content & Data Interaction


Autosave

The user wants to protect their data and continue working without having to remember to do so.


Quick Search Box

User remember what he looking for, but he want to reduce manipulations.


Hidden Information

The user wants quick access secondary information that’s not usually necessary to show.


Media

Flickr Photo Viewer

Lightbox pops up, background grays out

Thumb image slider

Full screen mode

Back and forward navigation button


Empty States

The user needs to know why a section of the application is empty and what to do next.


Light, Color and Contrast


Light

Create depth


Light

Lighter shades appear closer to us and darker shades further away. Why?


Color

Warmer colors expand when placed next to colder colors.


Contrast

Higher contrast items stand out — they catch your eye.



How to Choose and Apply


4 steps

Define proble

m

Find example

s

Choose a good exampl

e

Apply the

solution


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


S2: Find examples


S3: Choose a good example


S4: Apply the solution

● Average of rating

● Clickable

items


4 steps

Define proble

m

Find example

s

Choose a good exampl

e

Apply the

solution



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

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-designers-guide-to-the-tech-industry

http://www.fastcodesign.com/3032719/ui-ux-who-does-what-a-designers-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.html

http://www.uxpin.com/visual-web-ui-design-colors-space-contrast.html


Documents

Web UI Best Practices.ppt