Clean designLess is more

Vu Phuong Hoang2015/08

Rule #1 in design: KISS

KISS stands for “Keep It Simple, Stupid”

Reduce choices for MUCH easier decisions

Minimalism is trending now

Tips for simpler design

1. Use modal windows

2. Use hover controls

3. Use controls on demand

4. Expand form when necessary

5. Use placeholders

6. Use icons instead of text

7. Use context-based controls

1. Use modal windows

What is that ?

A small windows in the same page

1. Use modal windows

Pros:

Shorter path for user

Lighter for system

Context-based

Cons:

Only for simple task

Without modal windows

With modal windows

With modal windows

2. Use hover controlsWhat is that ?

Display action buttons while hovering mouse

Mouse is out Mouse is hovering

2. Use hover controls

Pros:

UI looks clean and simple

Cons:

Sadly, it’s not for mobile

Part of UI is hidden

Some users aren’t familiar with this

With hover controls

With hover controls

With hover controls

Without hover controls

Without hover controls

3. Use controls on demand

What is that ?

Hide advanced choices,and only show them when needed.

3. Use controls on demand

Pros:

UI looks clean and simple

Basic for noobs, advanced for pro

Cons:

Advanced controls are hidden

With controls on demand

With controls on demand

With controls on demand

With controls on demand

With controls on demand

Without controls on demand

Without controls on demand

4. Expand form when necessary

What is that ?

Prepare to duplicate form components if needed

4. Expand form when necessary

Pros:

UI looks clean and simple

“Unlimited space” to expand

Cons:

Designer must be aware of long list

With expanding form

With expanding form

Without expanding form

5. Use placeholders

What is that ?Put a sample to guide user

5. Use placeholders

Pros:

UI looks clean and simple

Helpful with users

Cons:

Can’t replace label completely

With placeholders

With placeholders

Very useful for blank page

With placeholders

Be careful when replacing labels

Without placeholders

Without placeholders

6. Use icons instead of texts

What is that ?

Replace texts by simple icons

6. Use icons instead of texts

Pros:

UI looks clean and simple

Much faster to scan

Cons:

Can be misunderstood

Using icons

Using icons

Using icons

Using icons

Using texts

Using bad icons

Using bad icons

7. Use context-based controls

What is that ?

Display controls based on current situation

7. Use context-based controls

Pros:

UI looks clean and simple

Less elements

More efficient

Cons:

Can lack some controls

Context-based controls

When select text

When select image

Context-based controls

When select image file

When select audio file

Context-based controls

Context-based controls

Context-based controls

Context-based controls

Take a look atadvertisements

Context-less controls

Context-less controls

Any questions?

Let’s improve UX

Let’s improve UX

Up coming:Complex parts