Download 50 UX Best Practices PDF

Title50 UX Best Practices
File Size20.2 MB
Total Pages62
Document Text Contents
Page 1

© 2012 Above the Fold

GETTING STARTED

USER RESEARCH

UI DESIGN

CONTENT STRATEGY

FRONT-END DEVELOPMENT

Page 2

Introduction

GETTING STARTED

Think big picture

Connect the goals

Get everyone involved

Hold fewer (more relevant)
meetings

Hear every voice

Look beyond feature requests

Design collaboratively

Over-communicate

Share knowledge early

Build relationships

USER RESEARCH

Build personas

Get face time with your users

Use paper prototypes

Test usability...online

Listen to actions

Vet your ideas

Choose your test wisely

Follow the flow

UI DESIGN

Prioritize top tasks

Obey real-world rules

Sketch your ideas

Research UI patterns

Follow the MAYA principle

Document your UI patterns

Use tabs effectively

Reduce clutter: show actions on
hover

Provide lazy registration

Take advantage of web
typography

Design your color palette

Provide instant feedback

CONTENT STRATEGY

Tell a story

Remember the microcopy

Learn the jargon

Plan a content audit

Rewrite, reuse, republish

Supplement with synonyms

Vary your medium

Split test your content

Account for edge cases

Anticipate errors

FRONT-END DEVELOPMENT

Highlight real-time changes

Load lazily

Build with progressive
enhancement

Strategize for the small screen

Research your UI approach

Use sprites to improve
performance

Take advantage of HTML5

Organize your CSS

Consolidate your files

Separate CSS classes from IDs

Learn more

About ATF

Appendix

i

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43


44

45

46

47

48

49

50

ii

iii

iv

Page 31

UI DESIGN 25

Use tabs effectively
Tabs are a sorely misunderstood UI element. They are frequently employed as a
navigation device, even in such popular places as Amazon.com or in the
System Properties of your PC. Rarely are tabs used to do what they do best:
alternating between views.

The debate rages on over whether or not tabs-as-navigation is actually
“misuse,” but it can easily become overused. By following Jakob Nielsen’s
13 Guidelines for Tabs, you can ensure your tabs stay in their rightful place.

You can use UI pattern galleries to explore alternatives to tabbed
navigation (such as scrolling, sidebar navigation, or dropdown menus).

Tip

http://twitter.com/home?status=50%20UX%20Best%20Practices%20by%20Above%20the%20Fold%20:%20http%3A//www.userexperiencedesigns.com
http://www.facebook.com/sharer.php?u=http://www.userexperiencedesigns.com&t=50%20UX%20Best%20Practices%20by%20Above%20the%20Fold
http://abovethefolddesign.com/#about
http://www.useit.com/alertbox/tabs.html

Page 32

UI DESIGN

Reduce clutter: show
actions on hover

26

Tip Hover doesn’t work for mobile devices. Instead, consider cutting
down functionality to allow only the basics, or filter the functionality
into a few different pages.

Basecamp shows Edit, Delete, and Move action icons when hovering over each item in a to-do list.

When each row in a data set or table contains a set of actions (such as “edit”
and “delete”) the table can become cluttered.

Clean up the interface by only showing those actions when the user hovers
over the row with her cursor.

http://twitter.com/home?status=50%20UX%20Best%20Practices%20by%20Above%20the%20Fold%20:%20http%3A//www.userexperiencedesigns.com
http://www.facebook.com/sharer.php?u=http://www.userexperiencedesigns.com&t=50%20UX%20Best%20Practices%20by%20Above%20the%20Fold
http://abovethefolddesign.com/#about
http://basecamp.com/

Page 61

Appendix
Web resources in this eBook

Business objectives vs. user experience:
http://uxdesign.smashingmagazine.com/2011/02/04/business-objectives-vs-
user-experience/

Gamestorming website: http://www.gogamestorm.com/

Lean UX:
http://uxdesign.smashingmagazine.com/2011/03/07/lean-ux-getting-out-of-the-
deliverables-business/

UserTesting.com: http://www.usertesting.com

Loop11: http://www.loop11.com

LaunchRock: http://launchrock.com/

Custom Variables setup guide:
https://developers.google.com/analytics/devguides/collection/gajs/
gaTrackingCustomVariables

Seductive Interaction Design:
http://www.amazon.com/Seductive-Interaction-Design-Effective-Experiences/
dp/0321725522/

Balsamiq: http://builds.balsamiq.com/b/mockups-web-demo/

Mockingbird: https://gomockingbird.com/

OmniGraffle: http://www.omnigroup.com/products/omnigraffle/

UI-Patterns.com: http://www.ui-patterns.com

PatternTap: http://www.patterntap.com

Yahoo! UI Design Pattern Library: http://developer.yahoo.com/ypatterns/

Deliver the Future, Gradually:
http://www.uxbooth.com/blog/deliver-the-future-gradually/

Bootstrap: http://twitter.github.com/bootstrap/components.html

13 Guidelines for Tabs: http://www.useit.com/alertbox/tabs.html

Basecamp: http://basecamp.com/

2


5

9


14

16

18


20


21

22

23

24

25

26

Page 62

Web resources in this eBook, continued

27

28

29



30

35

36

38

39

41

43



44

45


46

49

Grooveshark: http://grooveshark.com/

TypeKit: https://typekit.com/fonts

Adobe Kuler for Designers: http://kuler.adobe.com/

Color Scheme Designer: http://colorschemedesigner.com/

21 Stimulating Color Palette Tools:
http://www.sitepoint.com/21-stimulating-color-palette-tools-for-designers/

Tumblr’s sign up form box: https://www.tumblr.com/

Barbra Gago’s slideshare, “15 Ways to Distribute Content”:
http://www.slideshare.net/LeftBrainDGA/15-ways-to-distribute-content

Better Living Through Taxonomies:
http://www.digital-web.com/articles/better_living_through_taxonomies/

Google Website Optimizer: https://www.google.com/websiteoptimizer

Luke Wroblewski’s series of interviews:
http://www.lukew.com/ff/entry.asp?554

Todoist: http://www.todoist.com

Aaron Gustafson’s article on progressive enhancement:
http://www.alistapart.com/articles/understandingprogressiveenhancement/

Filament Group’s book on progressive enhancement:
http://filamentgroup.com/dwpe/

Ethan Marcotte’s article on responsive web design:
http://www.alistapart.com/articles/responsive-web-design/

Pros and cons of each UI approach:
http://candanny.wordpress.com/2011/08/14/declarative-vs-programmatic-in-
javascript-mobile-app-frameworks/

CSS Sprite Generator: http://spritegen.website-performance.org/

CSS sprites explained on CSS Tricks: http://css-tricks.com/css-sprites/

Minify: http://code.google.com/p/minify/

Similer Documents