Turning That UX Frown Upside Down

Turning that UX frown upside-down

Saturday, October 2, 2010

#uxfrown @hellofisher


Hello. I’m a UX designer


A Drupal designer?


a simple

answer


a simple

answer


So what is UX design?


The creation, integration and harmonization of all user-facing aspects within an organization or project, with the goal of impacting perceptions and behavior.


The creation, integration and harmonization of all user-facing aspects within an organization or project, with the goal of impacting perceptions and behavior.

Make itmake sense

and work wellfor the site

users


Why bother?


Any project should have goals but most people seem to lose sight of who the audience is.


Even a little bit of time spent getting to know

your users will improve the overall

experience











Ok. You’ve doing user research and testing. How long do you really stick with it?


If you have a group of 10 and the first

3 people tell you the same thing is

broken it’s broken.


If you have a group of 10 and the first

3 people tell you the same thing is

broken it’s broken.

Fix it now.


Don’t make me talk to the hand!


Don’t make me talk to the hand!


If your site isn’t cute.com, don’t get cute

use conventions


Make it obvious


People get lost at any turn. Too many choices, bad directions and noise create a bad situation.


People get lost at any turn. Too many choices, bad directions and noise create a bad situation.


What might be

obvious to you isn’t obvious to someone

who is new to the website.



Web Conventions


As a rule conventions only become conventions if they work. Use them. They are your friends!


All conventions start

life as somebody’s bright idea.

(Steve Krug - Don’t Make Me Think)










Oops






Problem Solving


SampleProoocess


SampleProoocess


SampleProoocess


Define


1. Identify the type of site1. Branding, marketing, content source,

task-based...2. Determine the team make-up required3. Discover and understand the client and

industry culture4. Define the project objectives5. Understand the current state (Heuristic

Analysis)6. Gather ideas from stakeholders7. CONTENT STRATEGY!!!


Research


1. User Research (internal and external)1. Define user groups2. Choose research techniques (what will

the project's budget allow)2. Personas

1. Really this could be just a short, visual reminder or representation for the people working on the project of the user groups. I like to have something in front of me that helps me keep my focus user-centric.


Visioning


1. Envision features1. This will allow us to flesh things out

and see what it will take to build before to prioritizing

2. Prioritize requirements


Wireframe and Design


1. Task flows2. Wireframes and annotations (function)

1. Basic/draft wireframes2. Filled out wireframes

3. Prototyping - functionality testing with users.

4. UI Graphic Design 1. Design testing

5. UI Design revisions1. Design testing

6. Style guide documentation








1. CPMHomepage - alt

LOGO

WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS

ABOUTBOARDFINANCIALSCAREERSSUPPORTSPONSORSMEMBERS

FEATURE

ITEM

LATEST PRESS

HOMEPAGE SPECIFIC ITEM TITLEUnder his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National Public Radio in Washington, D.C. in 1998. In addition he has created numerous award-winning local programs, among them Metropolis, in 1994, Odyssey and Eight Forty-Eight, both in 1998.

Torey has an M.A. and B.A. in English Literature from Arizona State University and has done postgraduate work at the University of Toronto in Middle English literature at U of T’s Medieval Centre.

Under his leadership, Chicago Public Radio has developed its most significant national initiatives and programs including The Third Coast International Audio Festival in 2000, Sound Opinions, in 2005, Wait, Wait. . . Don’t Tell Me!, a co-production with National Public Radio in Washington, D.C. in 1998.


Defogging the Economic Crisis03.22.10

Chicago Public Radio Presents... Global Activism Expo 201003.01.10


INFOGRAPHIC

f Join us on Facebook

Follow us on Twitter

See us on Flickr

WE ARE SOCIAL:▪ FAQ

▪ Site Map

▪ Privacy Policy

SITE INFO:OUR WEBSITES:▪ WBEZ 91.5

▪ :VOCALO

▪ THIS AMERICAN LIFE

▪ SOUND OPINIONS

More Press...

LOGO

© 2010 Chicago Public Media

Anchoring message that could be a final call to action for the site. A final call to action for the site.

5.0

5.2

7.1 7.2 7.3

INFOGRAPHIC

INFOGRAPHIC

OTHER LISTDefogging the Economic Crisis03.22.10



More Lists...

NON-CONTENT

SERVICES

Teaser text on the non-content related services that CPM offers. Studios spaces, mobile application, training, and community room.

5.3

6.0

Components

1.0

1.1

1.2

1.3

1.4

2.0

3.0

4.0

5.0

5.1

5.2

5.3

6.0

6.1

7.0

7.1

7.2

7.3

Utility nav bar to separate nav elements that take you offsite to another CPM website.

Logo used as link to home and below utility nav bar to give the CPM site a clear separation from the other site nav.

Global links to common actions.

Site search. Separated from utility nav to indicate that it will only search the current site.

Primary nav bar (see next wireframe for functionality).

Info graphics linked to related stories. This is done manually.

Homepage specific item. Created just for the homepage and overwritten with new content as needed.

Feature item area. This could be another info graphic or a call to action to donate.

Latest press area shows the last three press items in reverse cron order.

RSS feed link for press items.

Link to view a listing of all press items.

Additional list. This list would have identical functionality to the Latest Press list.

Graphic Representing non-content related services. This graphic links to an overview page for the services. This will also be found in the overall IA.

Teaser text for the non-content related services. The text itself can deep link into the individual items.

Listing of social network pages.

Listing of related websites.

General site info.

The user will end here when they are done scanning the page and is a good place to re-enforce your message and identity.

1.0

1.31.1

1.4

1.2

3.0

4.02.0

5.1

7.0

CONTACT US

6.1



LOGO



FEATURE

ITEM

LATEST PRESS








INFOGRAPHIC



See us on Flickr


▪ Site Map

▪ Privacy Policy


▪ :VOCALO


▪ SOUND OPINIONS

More Press...

LOGO



5.0

5.2

7.1 7.2 7.3

INFOGRAPHIC

INFOGRAPHIC




More Lists...

NON-CONTENT

SERVICES


5.3

6.0

Components

1.0

1.1

1.2

1.3

1.4

2.0

3.0

4.0

5.0

5.1

5.2

5.3

6.0

6.1

7.0

7.1

7.2

7.3

















General site info.


1.0

1.31.1

1.4

1.2

3.0

4.02.0

5.1

7.0

CONTACT US

6.1



LOGO



FEATURE

ITEM

LATEST PRESS








INFOGRAPHIC



See us on Flickr


▪ Site Map

▪ Privacy Policy


▪ :VOCALO


▪ SOUND OPINIONS

More Press...

LOGO



5.0

5.2

7.1 7.2 7.3

INFOGRAPHIC

INFOGRAPHIC




More Lists...

NON-CONTENT

SERVICES


5.3

6.0

Components

1.0

1.1

1.2

1.3

1.4

2.0

3.0

4.0

5.0

5.1

5.2

5.3

6.0

6.1

7.0

7.1

7.2

7.3

















General site info.


1.0

1.31.1

1.4

1.2

3.0

4.02.0

5.1

7.0

CONTACT US

6.1


All the other stuff


1. Build...2. User testing3. QA (internal and with client)4. It never ends!


delicious.com/hellosteve/

ux


Find me at hellofisher.com
