turning that ux frown upside down
DESCRIPTION
It doesn’t really matter how great you think your website is if your intended user thinks it’s a loser. There are some very easy methods to getting your website headed down the right track and creating a positive user experience (UX) for your target audience. In this presentation I discuss the steps that lead up to a the launch or re-launch of your website from a down-to-earth UX perspective. Each site is different, so while there are fundamentals there is also a strong need for critical thinking and creative solutions.TRANSCRIPT
Turning that UX frown upside-down
Saturday, October 2, 2010
#uxfrown @hellofisher
Saturday, October 2, 2010
Hello. I’m a UX designer
Saturday, October 2, 2010
A Drupal designer?
Saturday, October 2, 2010
a simple
answer
Saturday, October 2, 2010
a simple
answer
Saturday, October 2, 2010
So what is UX design?
Saturday, October 2, 2010
The creation, integration and harmonization of all user-facing aspects within an organization or project, with the goal of impacting perceptions and behavior.
Saturday, October 2, 2010
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
Saturday, October 2, 2010
Why bother?
Saturday, October 2, 2010
Any project should have goals but most people seem to lose sight of who the audience is.
Saturday, October 2, 2010
Even a little bit of time spent getting to know
your users will improve the overall
experience
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Ok. You’ve doing user research and testing. How long do you really stick with it?
Saturday, October 2, 2010
If you have a group of 10 and the first
3 people tell you the same thing is
broken it’s broken.
Saturday, October 2, 2010
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.
Saturday, October 2, 2010
Don’t make me talk to the hand!
Saturday, October 2, 2010
Don’t make me talk to the hand!
Saturday, October 2, 2010
If your site isn’t cute.com, don’t get cute
use conventions
Saturday, October 2, 2010
Make it obvious
Saturday, October 2, 2010
People get lost at any turn. Too many choices, bad directions and noise create a bad situation.
Saturday, October 2, 2010
People get lost at any turn. Too many choices, bad directions and noise create a bad situation.
Saturday, October 2, 2010
What might be
obvious to you isn’t obvious to someone
who is new to the website.
Saturday, October 2, 2010
Saturday, October 2, 2010
Web Conventions
Saturday, October 2, 2010
As a rule conventions only become conventions if they work. Use them. They are your friends!
Saturday, October 2, 2010
All conventions start
life as somebody’s bright idea.
(Steve Krug - Don’t Make Me Think)
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Oops
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Problem Solving
Saturday, October 2, 2010
SampleProoocess
Saturday, October 2, 2010
SampleProoocess
Saturday, October 2, 2010
SampleProoocess
Saturday, October 2, 2010
Define
Saturday, October 2, 2010
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!!!
Saturday, October 2, 2010
Research
Saturday, October 2, 2010
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.
Saturday, October 2, 2010
Visioning
Saturday, October 2, 2010
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
Saturday, October 2, 2010
Wireframe and Design
Saturday, October 2, 2010
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
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
Saturday, October 2, 2010
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.
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.
Defogging the Economic Crisis03.22.10
Chicago Public Radio Presents... Global Activism Expo 201003.01.10
Defogging the Economic Crisis03.22.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
Chicago Public Radio Presents... Global Activism Expo 201003.01.10
Defogging 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
Saturday, October 2, 2010
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.
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.
Defogging the Economic Crisis03.22.10
Chicago Public Radio Presents... Global Activism Expo 201003.01.10
Defogging the Economic Crisis03.22.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
Chicago Public Radio Presents... Global Activism Expo 201003.01.10
Defogging 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
Saturday, October 2, 2010
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.
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.
Defogging the Economic Crisis03.22.10
Chicago Public Radio Presents... Global Activism Expo 201003.01.10
Defogging the Economic Crisis03.22.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
Chicago Public Radio Presents... Global Activism Expo 201003.01.10
Defogging 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
Saturday, October 2, 2010
All the other stuff
Saturday, October 2, 2010
1. Build...2. User testing3. QA (internal and with client)4. It never ends!
Saturday, October 2, 2010
delicious.com/hellosteve/
ux
Saturday, October 2, 2010
Find me at hellofisher.com
Saturday, October 2, 2010