Presentation at WordCamp Louisville, 2011

1. and UX
Anne Miles
www.redtoadmedia.com
@redtoadmedia
+Anne Miles

2. What creates good UX?
-Peter Morville
http://semanticstudios.com/publications/semantics/000029.php

3. A Good UX

4. Bad UX

5. UX on the web is not …
UI - user interface design
or
Usability - ease and clarity of use
for a set of controls
or
Visual Design -making an impact

6. Visual Design: Color

7. Visual Design: Typography

8. Visual Design: Hierarchy

9. Visual Design: Balance

10. Visual Design: Rhythm

11. Visual Design: Emphasis

12. Usability/UI Design
• Consistency • Error Handling/Prevention
• Metaphors • Forgiveness
• Simplicity • Error recovery
• Workload Reduction
• Visibility • Supportive automation
• Feedback • Free cognitive resources
• Structure for high-level tasks
• Sequencing.
• Help

13. Visual Design + Bad UI = Bad UX

14. Visual Design + Bad Usability = Bad UX

15. Good Usability + Bad Visual Design= Bad UX

16. Simple UI + Poor Usability=Bad UX

17. Usability vs UX

18. UX requires Context

19. Good UX Requires Clear Goals

20. Where is the “Friends” Button?

21. UX = Gestalt
Usability + Interface + Aesthetics that are appropriate to their context

22. User Experience
Good UX means users are happy, and makes
businesses more successful.
Clarity
Utility
UX
Clear Context
Goals
Quality Thoughtfulness Charm
Content

23. UX is the
establishment
of a
philosophy of
how to treat
people
-Whitney Hess

24. How to Improve UX with your WP Site
(one philosophy)
1.Know your users and anticipate their needs.
2.Be responsive
3.Provide feedback at points of interaction
4.Create opportunities for delight
5.Promote clarity
6.Simplify
7.Be appropriate & responsible

25. Know your Users

26. Know your
Users
(Clever Twitter integration)

27. Be Responsive
Ask questions
Listen
Don’t barrage with huge survey or pop-ups, ask nicely.
Add in sidebar or at bottom of posts
Up to 3 questions.
Use Twitter/FB to engage
Do A/B tests

28. User Testing

29. Be Responsive
Custom Search Response Phrase,
custom comments phrases

30. Promote Clarity (Hierarchy meeting Need)

31. Provide Feedback at points of
Interaction

32. Provide Feedback at points of
Interaction

33. Create Opportunities for Delight (appropriate & responsible!)

34. Create Opportunities for Delight (appropriate & responsible!)
*not a WordPress site, Hubspot.com

35. Simplify

36. Be appropriate and responsible:
Choose an appropriate THEME PATTERN
to match information scent/user needs
Blog Magazine Portfolio

37. Blog
Chronologically
Driven
No landing pages
without hacking it
Do your users care
about the latest
posts?

38. Magazine
Landing/
Category Pages
More Images
Sidebar widgets
Invite repeat visits
by conveying
affordances

39. Portfolio
List driven
Highly visual
Good for
e-commerce or
those not
content-driven
(showcases)

40. Resources
Plug-ins:
Search Suggest
http://yoast.com/wordpress/search-suggest/
Search Excerpt
http://scott.yang.id.au/code/search-excerpt/#toc-abstract
Breadcrumbs
http://mtekk.us/code/breadcrumb-navxt/
Hacks:
Change “Leave a Reply”
http://wordpress.org/support/topic/how-to-change-wording-of-leave-a-reply
Custom 404
http://www.1stwebdesigner.com/wordpress/how-to-create-a-custom-error-404-
page-for-wordpress/

41. Resources
Typography:
Font Squirrel @font-face kits
http://www.fontsquirrel.com/
Google web fonts
http://www.google.com/webfonts
Color:
http://kuler.adobe.com/
Themes:
http://themeforest.net/
Use original photography
UX Resources: whenever possible.
Whitney Hess
http://whitneyhess.com/blog/
UX Booth
http://www.uxbooth.com/

42. Anne Miles
owner and Toad-in-Chief at
Red Toad Media
Former board member of
Louisville Women in Technology
Former President of Women in Networking 2 (WIN2).
Just published a contribution for Smashing Magazine,
one of the top web design blogs in the world.

43. Let’s build a better web.
Thank you.
You may download this presentation at
http://www.redtoadmedia.com/goodies.php