and UX

Anne Miles

www.redtoadmedia.com

@redtoadmedia

+Anne Miles

What creates good UX?

-Peter Morville http://semanticstudios.com/publications/semantics/000029.php

A Good UX

Bad UX

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

Visual Design: Color

Visual Design: Typography

Visual Design: Hierarchy

Visual Design: Balance

Visual Design: Rhythm

Visual Design: Emphasis

Usability/UI Design

• Consistency • Metaphors • Simplicity • Visibility • Feedback • Structure • Sequencing. • Help

• Error Handling/Prevention • Forgiveness • Error recovery • Workload Reduction • Supportive automation • Free cognitive resources for high-level tasks

Visual Design + Bad UI = Bad UX

Visual Design + Bad Usability = Bad UX

Good Usability + Bad Visual Design= Bad UX

Simple UI + Poor Usability=Bad UX

Usability vs UX

UX requires Context

Good UX Requires Clear Goals

Where is the “Friends” Button?

UX = Gestalt

Usability + Interface + Aesthetics that are appropriate to their context

User Experience Good UX means users are happy, and makes

businesses more successful.

UX Utility

Clear Goals

Clarity

Context

Charm Thoughtfulness Quality Content

UX is the establishment

of a philosophy of

how to treat people

-Whitney Hess

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

Know your Users

(Clever Twitter integration)

Know your Users

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

User Testing

Be Responsive

Custom Search Response Phrase, custom comments phrases

Promote Clarity (Hierarchy meeting Need)

Provide Feedback at points of Interaction

Provide Feedback at points of Interaction

Create Opportunities for Delight (appropriate & responsible!)

Create Opportunities for Delight (appropriate & responsible!)

*not a WordPress site, Hubspot.com

Simplify

Be appropriate and responsible: Choose an appropriate THEME PATTERN to match information scent/user needs

Blog Magazine Portfolio

Blog

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

Magazine

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

Portfolio

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

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/

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/ UX Resources: Whitney Hess http://whitneyhess.com/blog/ UX Booth http://www.uxbooth.com/

Use original photography whenever possible.

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.

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