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.

Make itmake sense

and work wellfor the site

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!

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.

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)

Problem Solving

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

WBEZ 91.5 :VOCALO THIS AMERICAN LIFE SOUND OPINIONS

ABOUTBOARDFINANCIALSCAREERSSUPPORTSPONSORSMEMBERS

FEATURE

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...

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

7.1 7.2 7.3

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.

Components

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.31.1

4.02.0

CONTACT US

FEATURE

LATEST PRESS

INFOGRAPHIC

See us on Flickr

▪ Site Map

▪ Privacy Policy

▪ :VOCALO

▪ SOUND OPINIONS

More Press...

7.1 7.2 7.3

INFOGRAPHIC

More Lists...

NON-CONTENT

SERVICES

Components

General site info.

1.31.1

4.02.0

CONTACT US

FEATURE

LATEST PRESS

INFOGRAPHIC

See us on Flickr

▪ Site Map

▪ Privacy Policy

▪ :VOCALO

▪ SOUND OPINIONS

More Press...

7.1 7.2 7.3

INFOGRAPHIC

More Lists...

NON-CONTENT

SERVICES

Components

General site info.

1.31.1

4.02.0

CONTACT US

All the other stuff

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

delicious.com/hellosteve/

Find me at hellofisher.com

turning that ux frown upside down

user research internal

user groups2

user testing3

design testing5

design testing6

bad directions

bad situation

ui graphic design

Design

frown an lalr(k) parser generator - department of computer

upside river

pecha kucha why estimates make me frown

the octonauts & the frown fish

upside female

upside down thinking

upside no 7

michael 2.0 - expressions - cast iron flamingo · 2017. 3....

the upside of disruption - valuewalk · the upside of...

upside no. 3

nclb 2/04 purple...bodycues smile frown redface big,openeyes...

upside of anger

upside no. 8

turn that frown upside down: crafting a successful design...

upside down scales

upside down greatness

who may frown and who should smile? dominance, affiliation

andy was treated for frown lines and crow’s feet. results...

upside-down freedom

money upside down