web ui best practices.ppt

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