An Introduction to
User Experience Design
& User Testing




AJ Kandy • Marks & Pixels   marksandpixels.com
On today’s agenda....
On today’s agenda....


What is User Experience Design?
On today’s agenda....


What is User Experience Design?
Why should we care?
On today’s agenda....


What is User Experience Design?
Why should we care?
Where can we apply UX processes?
On today’s agenda....


What is User Experience Design?
Why should we care?
Where can we apply UX processes?
How can we me...
On today’s agenda....


What is User Experience Design?
Why should we care?
Where can we apply UX processes?
How can we me...
On today’s agenda....


What is User Experience Design?
Why should we care?
Where can we apply UX processes?
How can we me...
What is user experience design?
What is user experience design?

    Usually, some or all of the following
What is user experience design?

    Usually, some or all of the following
            Information design
What is user experience design?

    Usually, some or all of the following
            Information design
         Informa...
What is user experience design?

    Usually, some or all of the following
            Information design
         Informa...
What is user experience design?

    Usually, some or all of the following
            Information design
         Informa...
What is user experience design?

    Usually, some or all of the following
            Information design
         Informa...
What is user experience design?

    Usually, some or all of the following
            Information design
         Informa...
What is user experience design?




                      The User Experience Honeycomb, Peter Morville, 2004
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
Web as Task-Oriented
Software Interface

Graphic Treatment of
interface elements
(the “look” in “look-and-feel”)



Design...
Web as Task-Oriented                                                         Web as Information-
Software Interface       ...
All creative endeavours follow...




                    adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
On the web, this translates to:
The development cycle
  1      2           3             4           5        6

Needs   Specs   Information    Interactio...
The development cycle
  1      2           3             4           5        6

Needs   Specs   Information    Interactio...
adapted from “Understanding Comics,” Scott McCloud, 1994
adapted from “Understanding Comics,” Scott McCloud, 1994
You can’t start from the surface
You can’t start from the surface




There’s something
 cool on the Web!
   We’ve gotta
    have that!
You can’t start from the surface




There’s something
 cool on the Web!
   We’ve gotta      Start your photocopier   Past...
You can’t start from the surface




There’s something
 cool on the Web!
                                                 ...
The development cycle
  1      2           3             4           5        6

Needs   Specs   Information    Interactio...
What, and who, is your product for?
What, and who, is your product for?

 Business
 or user
 needs
What, and who, is your product for?

 Business   Research, abstract, big-picture goals
 or user
 needs
What, and who, is your product for?

 Business   Research, abstract, big-picture goals
 or user
 needs
               “A t...
What, and who, is your product for?

 Business   Research, abstract, big-picture goals
 or user
 needs
               “A t...
What, and who, is your product for?

 Business   Research, abstract, big-picture goals
 or user
 needs
               “A t...
What, and who, is your product for?

 Business   Research, abstract, big-picture goals
 or user
 needs
               “A t...
What, and who, is your product for?

 Business   Research, abstract, big-picture goals
 or user
 needs
               “A t...
What, and who, is your product for?

 Business
 or user
 needs
How do you address those needs?

Business
or user
needs
How do you address those needs?

Business   Specs
or user
needs
How do you address those needs?

Business   Specs   Decisions about form
or user
needs
How do you address those needs?

Business   Specs   Decisions about form
or user
needs
                      ...An MP3 pla...
How do you address those needs?

Business   Specs   Decisions about form
or user
needs
                      ...An MP3 pla...
How do you address those needs?

Business   Specs   Decisions about form
or user
needs
                      ...An MP3 pla...
How do you address those needs?

Business   Specs   Decisions about form
or user
needs
                      ...An MP3 pla...
How do you address those needs?

Business   Specs   Decisions about form
or user
needs
                      ...An MP3 pla...
How do you address those needs?

Business   Specs
or user
needs
Function and content organization

 Business   Specs
 or user
 needs
Function and content organization

 Business   Specs   Information
                    Architecture
                      ...
Card-Sorting Exercises
How people will actually use your site / software

 Business   Specs   Information
 or user            Architecture
 needs
How people will actually use your site / software

Information
Architecture
How people will actually use your site / software

Information
Architecture
How people will actually use your site / software

Information
Architecture
               Interaction
               Desi...
How people will actually use your site / software

Information
Architecture
               Interaction
               Desi...
Wireframe Sketches
Wireframes - Paper Prototypes
High-fidelity wireframes
and clickable prototypes
Wireflows
EightShapes Unify Modular Template System
Approaching the surface, Captain

Information    Interaction
Architecture   Design
Approaching the surface, Captain

Information    Interaction   Visual
Architecture   Design        Design
Approaching the surface, Captain

Information
Architecture
               Interaction
               Design
              ...
Approaching the surface, Captain

Information
Architecture
               Interaction
               Design
              ...
Approaching the surface, Captain

Information
Architecture
               Interaction
               Design
              ...
Typographical grids & hierarchy
Typographical grids & hierarchy
Typographical grids & hierarchy

Header and nav   {
Typographical grids & hierarchy

Header and nav   {


        image    {
Typographical grids & hierarchy

Header and nav    {


        image     {



      first item   {
Typographical grids & hierarchy

Header and nav    {


        image     {

 looks like date and time



      first item  ...
Typographical grids & hierarchy

Header and nav    {


        image     {

 looks like date and time   looks like content...
Typographical grids & hierarchy

Header and nav    {


        image     {

 looks like date and time   looks like content...
Typographical grids & hierarchy

Header and nav    {


        image     {

 looks like date and time   looks like content...
Typographical grids & hierarchy

Header and nav    {
                                                 Site layout conforms...
Visual design of user affordances




unclear relationships   obvious relationships
     (Mac System 6)          (Mac Syst...
Making functionality more obvious

        Action 1   Action 2

        inactive       Active


          Cancel   Submit
...
Attractive things work better.
         Don Norman, Nielsen Norman Group
Which do you feel would work better?
How it looks is how well it works.

                Affective design
                •Aesthetic pleasure
                •...
Building actual working products

Information    Interaction   Visual
Architecture   Design        Design
Building actual working products

Visual
Design
Building actual working products

Visual
Design
Building actual working products

Visual   Coding,
Design   Testing
         & QA
Building actual working products

Visual
Design
         Coding,
         Testing
                   This deserves its own...
Building actual working products

Visual
Design
         Coding,
         Testing
                   A note on user testin...
Building actual working products

Visual
Design
         Coding,
         Testing
                   A note on user testin...
Building actual working products

Visual
Design
         Coding,
         Testing
                   A note on user testin...
Building actual working products

Visual
Design
         Coding,
         Testing
                   A note on user testin...
Building actual working products

Visual
Design
         Coding,
         Testing
                   A note on user testin...
Building actual working products

Visual
Design
         Coding,
         Testing
                   A note on user testin...
Building actual working products

Visual
Design
         Coding,
         Testing
                   A note on user testin...
Budget usability testing with Silverback.app
Tracking clicks with Google Analytics
A/B Testing with Google Website Optimizer
Multi-variate testing with Google Website Optimizer
Play our Options Game,
                        Make Friends & Win Cash!
                                    Become an Opti...
Multi-variate testing with Google Website Optimizer
Multi-variate testing with Google Website Optimizer
The development cycle
  1      2           3             4           5        6

Needs   Specs   Information    Interactio...
One more thing...
  1      2           3             4           5        6

Needs   Specs   Information    Interaction   ...
One more thing...
  1      2           3             4           5        6          7

Needs   Specs   Information    Int...
The circle of life(cycle), Simba
  1      2           3             4           5        6          7

Needs   Specs   Inf...
The circle of life(cycle), Simba
  1      2           3             4           5        6          7

Needs   Specs   Inf...
In reality, feedback is constant
  1      2           3             4           5        6          7

Needs   Specs   Inf...
Critical Path
The Nine Pillars
 of Successful Web Teams
                                                                                ...
The Nine Pillars
 of Successful Web Teams
                                                                                ...
UX
Design
UX
  Design




  Product
Management
UX
  Design




  Product
Management




Engineering
UX
  Design      What’s usable, useful & desirable



  Product
Management




Engineering
UX
  Design      What’s usable, useful & desirable



  Product
Management    What’s needed & therefore valuable




Engin...
UX
  Design      What’s usable, useful & desirable



  Product
Management    What’s needed & therefore valuable




Engin...
UX
                Design



          Product
        Management Engineering




A constant cycle of design and testing
UX
                Design



          Product
        Management Engineering




A constant cycle of design and testing
 ...
So what does all this get us?
So what does all this get us?




Clearer direction from the start - saves time
So what does all this get us?




Clearer direction from the start - saves time
Design process driven by knowledge
So what does all this get us?




Clearer direction from the start - saves time
Design process driven by knowledge
Documen...
So what does all this get us?




Clearer direction from the start - saves time
Design process driven by knowledge
Documen...
So what does all this get us?




Clearer direction from the start - saves time
Design process driven by knowledge
Documen...
Questions? Comments?

ajkandy@marksandpixels.com




AJ Kandy • Marks & Pixels   marksandpixels.com
An Introduction to UX Design & Testing
An Introduction to UX Design & Testing
Upcoming SlideShare
Loading in...5
×

An Introduction to UX Design & Testing

43,062

Published on

An introduction to the user experience design process and "guerilla" user testing, intended to help explain UX to other stakeholders in an organizational context.

Published in: Technology
15 Comments
352 Likes
Statistics
Notes
No Downloads
Views
Total Views
43,062
On Slideshare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
222
Comments
15
Likes
352
Embeds 0
No embeds

No notes for slide

Transcript of "An Introduction to UX Design & Testing"

  1. 1. An Introduction to User Experience Design & User Testing AJ Kandy • Marks & Pixels marksandpixels.com
  2. 2. On today’s agenda....
  3. 3. On today’s agenda.... What is User Experience Design?
  4. 4. On today’s agenda.... What is User Experience Design? Why should we care?
  5. 5. On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes?
  6. 6. On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness?
  7. 7. On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness? Who needs to be involved?
  8. 8. On today’s agenda.... What is User Experience Design? Why should we care? Where can we apply UX processes? How can we measure its effectiveness? Who needs to be involved?
  9. 9. What is user experience design?
  10. 10. What is user experience design? Usually, some or all of the following
  11. 11. What is user experience design? Usually, some or all of the following Information design
  12. 12. What is user experience design? Usually, some or all of the following Information design Information architecture
  13. 13. What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design
  14. 14. What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design
  15. 15. What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition
  16. 16. What is user experience design? Usually, some or all of the following Information design Information architecture Interaction design Visual Design Human Factors / Cognition Usability / Accessibility
  17. 17. What is user experience design? The User Experience Honeycomb, Peter Morville, 2004
  18. 18. adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  19. 19. adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  20. 20. adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  21. 21. adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  22. 22. adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  23. 23. Web as Task-Oriented Software Interface Graphic Treatment of interface elements (the “look” in “look-and-feel”) Design of UI elements to facilitate user interaction with functionality Information presentation to facilitate understanding Feature set: detailed description of functionality to meet user needs Externally derived goals identified through user research, ethnography, psychographics, etc. Business, creative or other internally derived goals for the site adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  24. 24. Web as Task-Oriented Web as Information- Software Interface Oriented Content Destination Graphic Treatment of Visual treatment of text, graphic interface elements page elements and navigational (the “look” in “look-and-feel”) components Design of UI elements to facilitate Design of UI elements to facilitate user interaction with functionality user’s movement through the IA Information presentation to Information presentation to facilitate understanding facilitate understanding Feature set: detailed description Content elements required in of functionality to meet user needs the site to meet user needs Externally derived goals identified Externally derived goals identified through user research, ethnography, through user research, ethnography, psychographics, etc. psychographics, etc. Business, creative or other Business, creative or other internally derived goals for the site internally derived goals for the site adapted from “The Elements of User Experience,” Jesse James Garrett, 2000
  25. 25. All creative endeavours follow... adapted from “Understanding Comics,” Scott McCloud, 1994
  26. 26. adapted from “Understanding Comics,” Scott McCloud, 1994
  27. 27. adapted from “Understanding Comics,” Scott McCloud, 1994
  28. 28. adapted from “Understanding Comics,” Scott McCloud, 1994
  29. 29. adapted from “Understanding Comics,” Scott McCloud, 1994
  30. 30. adapted from “Understanding Comics,” Scott McCloud, 1994
  31. 31. adapted from “Understanding Comics,” Scott McCloud, 1994
  32. 32. On the web, this translates to:
  33. 33. The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA
  34. 34. The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA Market & user esearch User r Experience Team ent opm s de vel eam A t & Q
  35. 35. adapted from “Understanding Comics,” Scott McCloud, 1994
  36. 36. adapted from “Understanding Comics,” Scott McCloud, 1994
  37. 37. You can’t start from the surface
  38. 38. You can’t start from the surface There’s something cool on the Web! We’ve gotta have that!
  39. 39. You can’t start from the surface There’s something cool on the Web! We’ve gotta Start your photocopier Paste and then have that!
  40. 40. You can’t start from the surface There’s something cool on the Web! curs Start your photocopier Paste and then C oc We’ve gotta MAGI have that! here
  41. 41. The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA Market & user esearch User r Experience Team ent opm s de vel eam A t & Q
  42. 42. What, and who, is your product for?
  43. 43. What, and who, is your product for? Business or user needs
  44. 44. What, and who, is your product for? Business Research, abstract, big-picture goals or user needs
  45. 45. What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.”
  46. 46. What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors”
  47. 47. What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks”
  48. 48. What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game”
  49. 49. What, and who, is your product for? Business Research, abstract, big-picture goals or user needs “A thousand songs in your pocket.” “Provide voting info to US seniors” “Teach students how to trade stocks” External: “Play a fun online game” No decisions are being made about form or design yet
  50. 50. What, and who, is your product for? Business or user needs
  51. 51. How do you address those needs? Business or user needs
  52. 52. How do you address those needs? Business Specs or user needs
  53. 53. How do you address those needs? Business Specs Decisions about form or user needs
  54. 54. How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software
  55. 55. How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool
  56. 56. How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles
  57. 57. How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest
  58. 58. How do you address those needs? Business Specs Decisions about form or user needs ...An MP3 player & software ...A find-your-voting-office tool ...Tutorials and articles ...A stock market contest Still no design decisions here
  59. 59. How do you address those needs? Business Specs or user needs
  60. 60. Function and content organization Business Specs or user needs
  61. 61. Function and content organization Business Specs Information Architecture Structure & taxonomy or user needs SURVIVOR U - SITEMAP 1.2 Login / Registration on Survivor U is for this section only (for now), no integration with the main ASP.NET single-sign-on login Wall Street Survivor nav scheme (links to appropriate WSS pages) - Dashboard, Trade, Research, News, Survivor U, Community, Video, Store, Support Survivor U landing page Aggregate feed with all new posted official content Financial Feature Columnists Expert Newsletter Learn Survivor U Survivor U FAQs Glossary Register News articles Picks Home Trading Video Video Home Home / Forgot home Channels Tutorials Login Home Home Individual Individual Beginner, Newsroom, FAQ Topic Alphabet news news news Intermediate news INO TV and news news news news Columns news Experts news news Groups news Lettergroup articles articles articles and Advanced articles ClipSyndicate articles articles articles pages (skip articles articles articles sections channel pages articles articles letters with no content) news news Feature news individual news Individual Blogs news Individual news Individual news news Individual news Individual news Individual Individual news news news news news news Newsletters news news news news news articles articles articles articles column articles Expert articles articles Lessons articles video posts articles Tutorials articles Q + As Glossary articles articles articles articles articles articles articles articles articles articles articles articles articles Articles with Tran- Terms scripts comments feed comments feed comments feed comments feed comments feed comments feed per post per post per post per post per post per post Ideally, on-page What’s news news Ajax popups with This? info articles articles explanatory notes items for things like RSS feeds, etc.
  62. 62. Card-Sorting Exercises
  63. 63. How people will actually use your site / software Business Specs Information or user Architecture needs
  64. 64. How people will actually use your site / software Information Architecture
  65. 65. How people will actually use your site / software Information Architecture
  66. 66. How people will actually use your site / software Information Architecture Interaction Design Thinking about user flows High-level process flow
  67. 67. How people will actually use your site / software Information Architecture Interaction Design Thinking about user flows Detailed process flowchart
  68. 68. Wireframe Sketches
  69. 69. Wireframes - Paper Prototypes
  70. 70. High-fidelity wireframes and clickable prototypes
  71. 71. Wireflows
  72. 72. EightShapes Unify Modular Template System
  73. 73. Approaching the surface, Captain Information Interaction Architecture Design
  74. 74. Approaching the surface, Captain Information Interaction Visual Architecture Design Design
  75. 75. Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel
  76. 76. Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel This isn’t just about decoration, slickness, or branding
  77. 77. Approaching the surface, Captain Information Architecture Interaction Design Visual Design Look & Feel This isn’t just about decoration, slickness, or branding How it looks is how it works.
  78. 78. Typographical grids & hierarchy
  79. 79. Typographical grids & hierarchy
  80. 80. Typographical grids & hierarchy Header and nav {
  81. 81. Typographical grids & hierarchy Header and nav { image {
  82. 82. Typographical grids & hierarchy Header and nav { image { first item {
  83. 83. Typographical grids & hierarchy Header and nav { image { looks like date and time first item {
  84. 84. Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries first item {
  85. 85. Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries looks like archive or search? first item {
  86. 86. Typographical grids & hierarchy Header and nav { image { looks like date and time looks like content summaries looks like archive or search? first item { looks like more info?
  87. 87. Typographical grids & hierarchy Header and nav { Site layout conforms to our expectations based on our experiences image { looks like date and time looks like content summaries looks like archive or search? first item { looks like more info?
  88. 88. Visual design of user affordances unclear relationships obvious relationships (Mac System 6) (Mac System 7)
  89. 89. Making functionality more obvious Action 1 Action 2 inactive Active Cancel Submit ® Cancel ‘ Submit ® Cancel ‘ Submit
  90. 90. Attractive things work better. Don Norman, Nielsen Norman Group
  91. 91. Which do you feel would work better?
  92. 92. How it looks is how well it works. Affective design •Aesthetic pleasure •Practical needs •Emotional benefits
  93. 93. Building actual working products Information Interaction Visual Architecture Design Design
  94. 94. Building actual working products Visual Design
  95. 95. Building actual working products Visual Design
  96. 96. Building actual working products Visual Coding, Design Testing & QA
  97. 97. Building actual working products Visual Design Coding, Testing This deserves its own slideshow & QA
  98. 98. Building actual working products Visual Design Coding, Testing A note on user testing & QA
  99. 99. Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions.
  100. 100. Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions. If done well, helps nail low-hanging fruit to improve usability
  101. 101. Building actual working products Visual Design Coding, Testing A note on user testing & QA Double-checks your assumptions. If done well, helps nail low-hanging fruit to improve usability Can be done for “10 cents a day”
  102. 102. Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing
  103. 103. Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing 3-4 users. once a month, is all it takes
  104. 104. Building actual working products Visual Design Coding, Testing A note on user testing & QA “Guerrilla” usability testing 3-4 users. once a month, is all it takes Test on paper prototypes, use simple apps like Silverback
  105. 105. Budget usability testing with Silverback.app
  106. 106. Tracking clicks with Google Analytics
  107. 107. A/B Testing with Google Website Optimizer
  108. 108. Multi-variate testing with Google Website Optimizer
  109. 109. Play our Options Game, Make Friends & Win Cash! Become an Options Master Absolutely FREE! You’ve got nothing to lose. Sign up today! Win Big! Options Are Fun! Learn Options Today Fourscore and seven years ago....
  110. 110. Multi-variate testing with Google Website Optimizer
  111. 111. Multi-variate testing with Google Website Optimizer
  112. 112. The development cycle 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA
  113. 113. One more thing... 1 2 3 4 5 6 Needs Specs Information Interaction Visual Coding, Architecture Design Design Testing & QA
  114. 114. One more thing... 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  115. 115. The circle of life(cycle), Simba 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  116. 116. The circle of life(cycle), Simba 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  117. 117. In reality, feedback is constant 1 2 3 4 5 6 7 Needs Specs Information Interaction Visual Coding, Rinse Architecture Design Design Testing & Repeat & QA
  118. 118. Critical Path
  119. 119. The Nine Pillars of Successful Web Teams project management Where do you sit Jesse James Garrett <jjg@jjg.net> 9 July 2003 on this map? The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. concrete Neglecting this area often results in missed deadlines and cost overruns. d i design Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete design is essential to creating the final product. tactical Content Production: Knowing what content you need isn't enough. You also technology content need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content implementation production production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. abstract bstra Abstract Design: Information architecture and interaction design translate d design strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are strategic increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much technology content content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer strategy strategy fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. site Site Strategy: Defining your own goals for the site can be surprisingly strategy trateg tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. user research adaptive path http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
  120. 120. The Nine Pillars of Successful Web Teams project management Where do you sit Jesse James Garrett <jjg@jjg.net> 9 July 2003 on this map? The most successful Web teams build their team structures and their processes on these nine essential competencies: Project Management: The hub that binds all the tactical competencies together as well as the engine that drives the project forward to completion, project management requires a highly specialized set of skills all its own. concrete Neglecting this area often results in missed deadlines and cost overruns. d i design Probably in Concrete Design: Before the abstract design can become a fully realized user experience, you must determine the specific details of interfaces, navigation, information design, and visual design. This realm of concrete more than one design is essential to creating the final product. tactical Content Production: Knowing what content you need isn't enough. You also technology content need to know how you'll produce it. Gathering raw information, writing and editing, and defining editorial workflows and approvals are all part of content implementation production neat, tidy area production. Technology Implementation: Building technical systems involves a lot of hard work and specialized knowledge: languages and protocols, coding and debugging, testing and refactoring. The more complex your site, the more important a competency in technology implementation becomes. abstract bstra Abstract Design: Information architecture and interaction design translate d design strategic objectives into a conceptual framework for the final user experience. These emerging disciplines addressing abstract design are strategic increasingly recognized for their value in the Web development process. Content Strategy: Content is often the reason users come to your site. But what content can you offer to meet your users' expectations? How much technology content content is appropriate, and what form should it take? What style or tone should it have? Before you can produce that content, you need to answer strategy strategy fundamental content strategy questions such as these. Technology Strategy: Web sites are technologically complex, and getting more intricate all the time. Identifying the technology strategy for the site – platforms, standards, technologies, and how they can all interoperate – is essential to avoiding costly mistakes. site Site Strategy: Defining your own goals for the site can be surprisingly strategy trateg tricky. Arriving at a common understanding of the site's purpose for your organization, how you'll prioritize the site's various goals, and the means by which you'll measure the site's success are all matters of site strategy. User Research: User-centered design means understanding what your users need, how they think, and how they behave – and incorporating that understanding into every aspect of your process. User research provides the raw observations that fuel this insight into the people your site must serve. user research adaptive path http://www.jjg.net/ia/pillars/ http://www.adaptivepath.com/ adapted from “The Nine Pillars of Successful Web Teams,” Jesse James Garrett, 2003
  121. 121. UX Design
  122. 122. UX Design Product Management
  123. 123. UX Design Product Management Engineering
  124. 124. UX Design What’s usable, useful & desirable Product Management Engineering
  125. 125. UX Design What’s usable, useful & desirable Product Management What’s needed & therefore valuable Engineering
  126. 126. UX Design What’s usable, useful & desirable Product Management What’s needed & therefore valuable Engineering What’s possible, and what’s not
  127. 127. UX Design Product Management Engineering A constant cycle of design and testing
  128. 128. UX Design Product Management Engineering A constant cycle of design and testing adapted from ‘Sharing Ownership of UX,” Pabini Gabriel-Petit, 2007
  129. 129. So what does all this get us?
  130. 130. So what does all this get us? Clearer direction from the start - saves time
  131. 131. So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge
  132. 132. So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions
  133. 133. So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams
  134. 134. So what does all this get us? Clearer direction from the start - saves time Design process driven by knowledge Documentation of planning & design decisions Improved functioning between teams Better products, and happier users
  135. 135. Questions? Comments? ajkandy@marksandpixels.com AJ Kandy • Marks & Pixels marksandpixels.com
  1. A particular slide catching your eye?

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

×