Sustainable UX
Nick Finck
April 21, 2010




                 UX Web Summit
?
Who the f#@k
is this dude?
Nick Finck
                   Blue Flavor

                   ‣ Principal & Director of User Experience

                 ...
?
 Understanding
user experience
Morville’s Honeycomb
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
UX happens here?



  Discover               Plan             Design              Build             Evaluate




Understan...
Photo by G Brummett - http://www.flickr.com/photos/grantbrummett/4464678620/
Photo by G Brummett - http://www.flickr.com/photos/grantbrummett/4469405610/
“User Experience is a focus,
 	a thread that runs through
 	all of our disciplines, and
 	which no discipline owns

 or co...
UX really happens here



  Discover                Plan             Design              Build             Evaluate




Un...
?
 How did we
end up here?
“We are the makers of our
 own state and…individuals
 who realize the fact need
 not, ought not, to wait for
 collective a...
A good user
experience is
sustainable
“Sustainability is the capacity to endure.”
                           - the all-knowing Wikipedia
?
How do we make
  good user
 experiences
  sustainable?
A look into my
  process
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Stakeholder Interviews




Photo by Keith Morris - http://www.flickr.com/photos/standupbass/2103533585/
Kickoff Meeting




Photo by Kristin Farwell - http://www.flickr.com/photos/bulldogsolutions/2220048417/
Content Inventory
Content Audit
Focus Groups




Photo by Matt Ruecker - http://dreamfactoryblog.wordpress.com/2010/01/19/the-importance-of-focus-groups/
Card Sorts




Photo by Leandro Agrò - http://www.flickr.com/photos/leeander/46397740/
Contextual Inquiries




Photo by Benjamin Voss - http://benjaminvoss.wordpress.com/2008/03/20/contextual-inquiries-and-di...
Personas
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Content Strategy
Collaborative Thinking


Photo by Arne van Oosterom - http://www.flickr.com/photos/wenovski/3634783083/
Page Description Diagrams
                                                                                                ...
Sitemaps
                                                                                                                 ...
Process Flows
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Sketches
Zone Diagrams
Global Navigation
                                         Navigation Schema                                              ...
Wireframes
Storyboards

Manage Account                 Manage Account                                Manage Account                  ...
Prototype
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Build Review




Photo by Dmitriy Kopylenko - http://www.flickr.com/photos/dima767/3660655314/
QA Testing




Photo by Tristan Nitot - http://www.flickr.com/photos/nitot/3038089411/
Discover               Plan             Design              Build             Evaluate




Understand and      Identify po...
Usability Testing


Photo by Alexander Baxevanis - http://www.flickr.com/photos/futureshape/86228211/
User Interviews




Photo by ekhereford - http://www.flickr.com/photos/37128818@N02/3522353433/
Eye-Tracking Analysis




Image by Daniel Martin - http://www.doublejumpmedia.com/blog/2009/05/eye-tracking-and-usability-...
Historical Traffic Analysis
Real-Time Traffic Analysis
?
What is ahead for
       UX?
Augmented Reality with Location Based Services
Augmented Reality with Visual Recognition
Star Wars
Nintendo Wii
Microsoft’s Project Natal
Microsoft Surface
Oblong's g-speak
Spatial Operating Environment
Sixth Sense
Wearable Gestural Interface
Minority Report
UX isn’t a means to
an end, it is only the
    beginning
Thank you!
?
Questions?
Sustainable UX
Nick Finck
@nickf
nick@blueflavor.com
http://blueflavor.com
Sustainable UX
Sustainable UX
Sustainable UX
Sustainable UX
Upcoming SlideShare
Loading in...5
×

Sustainable UX

7,793

Published on

Principal and Director of User Experience of Blue Flavor, Nick Finck presents a session on what makes a good user experience, what is the process for creating a good user experience, and where user experience as a discipline is headed.

Published in: Education, Technology
1 Comment
38 Likes
Statistics
Notes
No Downloads
Views
Total Views
7,793
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
314
Comments
1
Likes
38
Embeds 0
No embeds

No notes for slide

Sustainable UX

  1. 1. Sustainable UX Nick Finck April 21, 2010 UX Web Summit
  2. 2. ? Who the f#@k is this dude?
  3. 3. Nick Finck Blue Flavor ‣ Principal & Director of User Experience ‣ Over 15 years of experience working in the web field ‣ Has worked with Adobe, Boeing, CBS, Cisco, CitiGroup, Comcast, FDIC, HP, IBM, and Microsoft ‣ Co-organized and curated more than 10 national and international web conferences & events ‣ BlueFlavor.com ‣ Judged the Webby’s and several other web awards ‣ NickFinck.com ‣ Former publisher of Digital Web Magazine ‣ Expertise in information architecture, interaction design, and user research
  4. 4. ? Understanding user experience
  5. 5. Morville’s Honeycomb
  6. 6. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  7. 7. UX happens here? Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  8. 8. Photo by G Brummett - http://www.flickr.com/photos/grantbrummett/4464678620/
  9. 9. Photo by G Brummett - http://www.flickr.com/photos/grantbrummett/4469405610/
  10. 10. “User Experience is a focus, a thread that runs through all of our disciplines, and which no discipline owns or controls.” - The UXsters Explain UX
  11. 11. UX really happens here Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  12. 12. ? How did we end up here?
  13. 13. “We are the makers of our own state and…individuals who realize the fact need not, ought not, to wait for collective action.” - Mahatma Gandhi
  14. 14. A good user experience is sustainable
  15. 15. “Sustainability is the capacity to endure.” - the all-knowing Wikipedia
  16. 16. ? How do we make good user experiences sustainable?
  17. 17. A look into my process
  18. 18. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  19. 19. Stakeholder Interviews Photo by Keith Morris - http://www.flickr.com/photos/standupbass/2103533585/
  20. 20. Kickoff Meeting Photo by Kristin Farwell - http://www.flickr.com/photos/bulldogsolutions/2220048417/
  21. 21. Content Inventory
  22. 22. Content Audit
  23. 23. Focus Groups Photo by Matt Ruecker - http://dreamfactoryblog.wordpress.com/2010/01/19/the-importance-of-focus-groups/
  24. 24. Card Sorts Photo by Leandro Agrò - http://www.flickr.com/photos/leeander/46397740/
  25. 25. Contextual Inquiries Photo by Benjamin Voss - http://benjaminvoss.wordpress.com/2008/03/20/contextual-inquiries-and-diaries/
  26. 26. Personas
  27. 27. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  28. 28. Content Strategy
  29. 29. Collaborative Thinking Photo by Arne van Oosterom - http://www.flickr.com/photos/wenovski/3634783083/
  30. 30. Page Description Diagrams Sample Company Name Home Page Page Description Diagrams 1 2 3 Main call to action Search About company Notes Gets users thinking about the brand A useful site search should always be An outline of what your company is all The homepage has been shifted to and specific actions they can make. available on the page to allow users an about. emphasize content that’s currently alternative method for finding your buried elsewhere in your site. The pro- Sign-up content. Privacy, Terms of Use, Etc. posed navigation structure reinforces A call to action that encourages peo- Most of the information that is cur- this goal. ple to sign up for recently added con- Link list rently listed in the footer should re- tent on the site. A list of semi-recently added link con- main there. The contact and address The home page should provide a tent. This list should contain 5-7 links information can easily be moved to clean path to the various sections of Featured article or essay with date and comment meta infor- the contact page, though. We also the site. Shows the first paragraph of an article mation for each. recommend adding in some naviga- with associated image, as well as the tional links, where possible. day it was published and the number of comments made. Latest entries A short listing of the latest articles or essays that have been posted. There should be between 5-7 shown on the home page. The featured article should not be displayed in this list. Highest Priority Lowest Priority Monday, September 24, 2007
  31. 31. Sitemaps About SXSW Contact Market at SXSW Tools History SXSW SMS SXSW.com Gydget Sponsors Sustainability Facebook News & Register Getting Around Trade Shows Merchandise Interactive Film Music Information Opera Mini Glossary Brochures and Hotels for Utterz Austin Map Music Exhibition Forms (PDFs) SXSWeek 2008 Music Music Player Conference Mailing Lists Travel Discounts iF! Exhibition Center News & Flatstock Poster Schedule Talks Shows Parties & Play Getting Around Press Information Show Subscribe International Carver Center The Daily Chord Talks Speakers Artists Austin Map Press Releases SXSWorld Online Reg Day Stage Cafe Magazine Directory Keynote Conference FAQ Shows SXSW Live Press Kit Auditorium Center My SXSWorld Mentor Sessions Shores Stage Stories Video Parties & Play Quickies Sessions FAQ Any additional Demo Listening venues Podcasts Sessions Press Credentials CLE Photo Policy Interactive News & ScreenBurn Schedule Talks Parties & Play Web Awards Getting Around Press Information Gaming Fest Interactive Hub Talks Speakers Winners Austin Map Press Releases Opening Remarks Conference FAQ Parties & Play Finalists Press Kit Center Keynotes Video Ceremony FAQ Book Readings Film Core Podcasts Dewey Award Press Credentials Conversations News & Schedule Talks FIlms Parties & Play Global Doc Days Getting Around Press Information Speaking Opportunities Photo Policy The News Reel Talks Speakers Film Trailers Austin Map Press Releases Panel Picker Speaking Conference FAQ Films Past Winners Press Kit Opportunities Center Key Video Parties & Play FAQ Panel Picker Primary navigation Podcasts Press Credentials a Secondary navigation a Link to separate section Photo Policy a Separate sub-site a Future navigation
  32. 32. Process Flows
  33. 33. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  34. 34. Sketches
  35. 35. Zone Diagrams
  36. 36. Global Navigation Navigation Schema GiantCampus.com Information Architecture Navigation Schema 888-904-2267 | Live Help | Contact | Sign In / Sign Up Search Primary Navigation Home Courses Programs Locations Our Difference Community About Home Courses Programs Locations Our Difference Community About Secondary Navigation Game Design Game Design Game Design 3D Modeling 3D Modeling 3D Modeling Digital Photography & Graphics Digital Photography & Graphics Digital Photography & Graphics Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design Video Production Video Production Video Production Programming & Robotics Programming & Robotics Programming & Robotics General Computing General Computing General Computing Our Approach Our Approach Our Approach Breadcrumb Navigation Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver Footer Navigation Feedback | Legal | Careers | Press Room 888-904-2267 | Live Help | Contact
  37. 37. Wireframes
  38. 38. Storyboards Manage Account Manage Account Manage Account Manage Account Manage Account Manage Account ! Rename account ! Rename account ! Rename account ! Rename account ! Rename account ! Rename account Home Checking Rename ! Stop check ! Stop check ! Stop check ! Stop check ! Stop check Use this form to place a stop check on a ! Order checks ! Order checks ! Order checks ! Order checks ! Stop check check that has been issued. Amount of the check will be credited back to your account Order new checks for this account? ! Order check card ! Order check card ! Order check card ! Order checks (more info) Order Checks Note: If your card was lost or stolen please ! Manage Statements ! Manage Statements ! Order check card Account #: ...4324 call 800-637-0852 to ensure deactivation. ! Order check card (more info) Paper Statements ! Download ! Manage Statements From Check #: To Check #: ! Manage Statements Reason: Damaged check card Go Paperless Select file format... ! Download Reason: Lost check ! Download Rush Delivery? Note: these changes will impact your Download Now Note you will be chaged a $45.00 fee for a savings account(s) as well. (more info) Note you will be chaged a $8.00 fee for each stop check order. (more info) rush delivery of a check card. (more info) ! Download Stop Check Charge to account: Home checking (5423) Order ! Order checks ! Order check card ! Manage Statements ! Manage Statements ! Download ! Download
  39. 39. Prototype
  40. 40. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  41. 41. Build Review Photo by Dmitriy Kopylenko - http://www.flickr.com/photos/dima767/3660655314/
  42. 42. QA Testing Photo by Tristan Nitot - http://www.flickr.com/photos/nitot/3038089411/
  43. 43. Discover Plan Design Build Evaluate Understand and Identify possible Create designs Develop functional Review, test, and identify the core solutions and that resolve the code based on the analyze effectiveness problems first plan execution core problems designs of the design
  44. 44. Usability Testing Photo by Alexander Baxevanis - http://www.flickr.com/photos/futureshape/86228211/
  45. 45. User Interviews Photo by ekhereford - http://www.flickr.com/photos/37128818@N02/3522353433/
  46. 46. Eye-Tracking Analysis Image by Daniel Martin - http://www.doublejumpmedia.com/blog/2009/05/eye-tracking-and-usability-testing-with-city-univers
  47. 47. Historical Traffic Analysis
  48. 48. Real-Time Traffic Analysis
  49. 49. ? What is ahead for UX?
  50. 50. Augmented Reality with Location Based Services
  51. 51. Augmented Reality with Visual Recognition
  52. 52. Star Wars
  53. 53. Nintendo Wii
  54. 54. Microsoft’s Project Natal
  55. 55. Microsoft Surface
  56. 56. Oblong's g-speak Spatial Operating Environment
  57. 57. Sixth Sense Wearable Gestural Interface
  58. 58. Minority Report
  59. 59. UX isn’t a means to an end, it is only the beginning
  60. 60. Thank you!
  61. 61. ? Questions?
  62. 62. Sustainable UX Nick Finck @nickf nick@blueflavor.com http://blueflavor.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×