10 best practices of a good user interface design #ui

12
10 best practices of a good USER INTERFACE design #UI part 1 Created by Ewa Jaroslawska (@ ejaroslawska) www.jaroslawska.com #UI

Upload: ewa-jaroslawska

Post on 11-Nov-2014

390 views

Category:

Design


2 download

DESCRIPTION

A Good User Interface is a fundamental driver for high conversion rates and overall website performance. Each Digital Manager and Product Manager must acquire User Interface knowledge and best practices.

TRANSCRIPT

Page 1: 10 Best Practices of a Good User Interface design #UI

10 best practices of a good USER INTERFACE design

#UI

part 1

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

Page 2: 10 Best Practices of a Good User Interface design #UI

A one column layout will give you more control over flow of the website and help to

guide your readers from top to bottom with proper call to

action at the end.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

ONE COLUMN LAYOUT

Page 3: 10 Best Practices of a Good User Interface design #UI

Explain who is your targeted group versus targeting everyone (and none). You can even show

“qualification” or best fit criteria.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

LASER TARGETING

Page 4: 10 Best Practices of a Good User Interface design #UI

Differentiate styles between clickable actions (links, buttons),

selected elements (chosen items) and plain text and use it consistently across an interface.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

CLICKABLE BUTTONS DIFFERENTIATION

Page 5: 10 Best Practices of a Good User Interface design #UI

Repeat your call to action on longer pages or across numerous

pages where applicable and fitting the context.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

REPEAT CALL TO ACTION

Page 6: 10 Best Practices of a Good User Interface design #UI

A social proof, especially testimonials and data that other people or companies

are using the service/products, increases

conversion rates.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

SOCIAL PROOF

Page 7: 10 Best Practices of a Good User Interface design #UI

When showing multiple offers, then an emphasized product

suggestion might be a good idea as some people need a little

nudge. Don’t offer to much to avoid “paradox of choice”.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

RECOMMEND BEST PRODUCT

Page 8: 10 Best Practices of a Good User Interface design #UI

When designing registering process think which elements are crucial – rest remove. The

more fields to fill in, less people will sign up, especially on

mobiles.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

SIMPLE FORM FIELDS

Page 9: 10 Best Practices of a Good User Interface design #UI

Be direct about your call to action. Don’t end your message with question marks or words

like perhaps, maybe, interested?and want to?

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

BE DIRECT

Page 10: 10 Best Practices of a Good User Interface design #UI

Make your users feel more in control by enabling the ability to undo actions and not asking for

double confirmation where possible.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

UNDO'S VS. DOUBLE CONFIRMATION

Page 11: 10 Best Practices of a Good User Interface design #UI

Instead of asking for money right away, give consumers a gift first. Additionally, it is a

great method to make people try your product without a

barrier.

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #UI

GIFT BEFORE PURCHASE

Page 12: 10 Best Practices of a Good User Interface design #UI

Final Checklist:

Created by Ewa Jaroslawska (@ejaroslawska) www.jaroslawska.com #leadership

1. ONE COLUMN LAYOUT

2. LASER TARGETING

3. CLICKABLE BUTTONS DIFFERENTIATION

4. REPEAT CALL TO ACTION

5. SOCIAL PROOF

6. RECOMMEND BEST PRODUCT

7. SIMPLE FORM FIELDS

8. UNDO'S VS. DOUBLE CONFIRMATION

9. BE DIRECT

10. GIFT BEFORE PURCHASE