An introduction to user experience designRian van der Merwetwitter: @RianVDMweb: elezea.com
What is user experience design?http://xkcd.com/773
“User experience” encompasses all aspects of the end-user's interaction with the company, its services, and itsproducts.                 The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.                          Next comes simplicity and elegance that produce products that are a joy to own, a joy to use.                                                  True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.http://www.nngroup.com/about/userexperience.html
Or, to put it another way:“What a great thing for a father to do with his son. Patrick was so proud to be #1 in line. They made a big deal about it when they let him into the store first. That’s a memory that he’ll have the rest of his life. What a great dad to make that happen.”
“Design is a set of decisions about a product. It's not an interface or an aesthetic, it's not a brand or a color. Design is the actual decisions.- Rebekah Cox
“First rule of design feedback: what you’re looking at is not art. It’s not even close. It’s a business tool in the making and should be looked at objectively like any other business tool you work with. The right question is not, “Do I like it?” but “Does this meet our goals?” If it’s blue, don’t ask yourself whether you like blue. Ask yourself if blue is going to help you sell sprockets. Better yet: ask your design team. You just wrote your first feedback question.- Mike Monteiro
Why is user experience design important?Improved requirementsFaster time-to-marketIncreased value per userExtended application life
The $300 Million Button"I'm not here to enter into a relationship. I just want to buy something."Nr of purchasers:1st Month Revenue:1st Year Revenue:45%$15,000,000$300,000,000
Ok, so I’ll just thinkmore like a user
“A common mistake that people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.- Douglas Adams
800 comments later…
The elements of user experience:User researchContent strategyVisualdesignInteractiondesignUser research
User experience research
Market researchvs. seeks to understand the needs of the market in generalUser experience researchfocuses on users’ interaction with the product
Ethnography
Participatory DesignParticipatory design involves engaging end-users directly in the design process
Concept TestingStoryboards allow us to gauge reaction to a new concept before any designs are created
Lab-based Usability Testing
RITE testing on eBay Shopping CartIterative paper prototype testing:Uncover conceptual and interaction issues before the design Top Buyer, researcher, and “human computer”
Eye TrackingEye tracking allows us to identify what participants look at (and don’t look at), and in what order.Sample scanning patternSample Heat map summarizing overall viewing pattern
An example of UCD:Redesigning kalahari.comcheckout
The elements of user experience:User researchContent strategyVisualdesignInteractiondesignUser research
Content Strategy
What happens when words andimages are separated?
You cannot designwithout content
Content strategy plans for the creation, delivery, and governance of content.Better content. Content people care about. Content that supports your business objectives and meets your users' goals.It's a long-term fix for content problems of all sizes.- Kristina Halvorson (@halvorson)
Content StrategyisDesign
Some examples ofbad content
Some examples ofgood content
What is kalahari.com’scontent strategy?
A better way
The elements of user experience:User researchContent strategyVisualdesignInteractiondesignUser research
Interaction Design
Interaction design defines the structure and behaviors of interactive products and services, and user interactions with those products and services.Interaction design is grounded in an understanding of real users (goals, tasks, experiences, needs, and wants) and balances these needs with business goals and technological capabilities.-IxDA
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system status
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real world
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedom
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standards
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError prevention
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recall
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of use
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of useAesthetic and minimalist design
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of useAesthetic and minimalist designHelp users recognize and recover from errors
10 heuristics for user interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of useAesthetic and minimalist designHelp users recognize and recover from errorsHelp and documentation
kalahari.com checkout:Initial wireframes
The elements of user experience:User researchContent strategyVisualdesignInteractiondesignUser research
Visual Design
The art and profession of selecting and arranging visual elements — such as typography, images, symbols, and colours — to convey a message to an audience. - Encyclopedia Brittannica
The principles of designBalanceProximityAlignmentConsistencyContrastWhite space
Balance
“A symmetrical object taps into the same neural machinery made to help the mind detect other people or predators. The more symmetrical and balanced something like a human face is, the more perceived beauty that is interpreted by the mind. No human face is perfectly symmetrical, however when the two sides are nearly equal, they are seen at a metacognitive level as more beautiful. Some scientists have argued this is because asymmetrical organisms are suffering from disease and the mind has evolved to recognize that.http://designinformer.com/designing-mind/
Proximity
Consistency
Alignment
White space
Contrast
The role of visual design
The role of visual design
Ok, back to kalahari.com
The finaldesign
So, in summary
User experience is not rocket science.It’s not easy, but it’s not rocket science.And it requires a mind shift.
User experience is not rocket science.It’s not easy, but it’s not rocket science.And it requires a mind shift.Process.Rules.Science.And a healthy measure of art.But it is essential.
An introduction to user experience designRian van der Merwetwitter: @RianVDMweb: elezea.com

An introduction to user experience design

  • 1.
    An introduction touser experience designRian van der Merwetwitter: @RianVDMweb: elezea.com
  • 2.
    What is userexperience design?http://xkcd.com/773
  • 3.
    “User experience” encompassesall aspects of the end-user's interaction with the company, its services, and itsproducts. The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother. Next comes simplicity and elegance that produce products that are a joy to own, a joy to use. True user experience goes far beyond giving customers what they say they want, or providing checklist features. In order to achieve high-quality user experience in a company's offerings there must be a seamless merging of the services of multiple disciplines, including engineering, marketing, graphical and industrial design, and interface design.http://www.nngroup.com/about/userexperience.html
  • 4.
    Or, to putit another way:“What a great thing for a father to do with his son. Patrick was so proud to be #1 in line. They made a big deal about it when they let him into the store first. That’s a memory that he’ll have the rest of his life. What a great dad to make that happen.”
  • 6.
    “Design is aset of decisions about a product. It's not an interface or an aesthetic, it's not a brand or a color. Design is the actual decisions.- Rebekah Cox
  • 7.
    “First rule ofdesign feedback: what you’re looking at is not art. It’s not even close. It’s a business tool in the making and should be looked at objectively like any other business tool you work with. The right question is not, “Do I like it?” but “Does this meet our goals?” If it’s blue, don’t ask yourself whether you like blue. Ask yourself if blue is going to help you sell sprockets. Better yet: ask your design team. You just wrote your first feedback question.- Mike Monteiro
  • 8.
    Why is userexperience design important?Improved requirementsFaster time-to-marketIncreased value per userExtended application life
  • 9.
    The $300 MillionButton"I'm not here to enter into a relationship. I just want to buy something."Nr of purchasers:1st Month Revenue:1st Year Revenue:45%$15,000,000$300,000,000
  • 10.
    Ok, so I’lljust thinkmore like a user
  • 11.
    “A common mistakethat people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.- Douglas Adams
  • 14.
  • 15.
    The elements ofuser experience:User researchContent strategyVisualdesignInteractiondesignUser research
  • 16.
  • 17.
    Market researchvs. seeksto understand the needs of the market in generalUser experience researchfocuses on users’ interaction with the product
  • 18.
  • 19.
    Participatory DesignParticipatory designinvolves engaging end-users directly in the design process
  • 20.
    Concept TestingStoryboards allowus to gauge reaction to a new concept before any designs are created
  • 21.
  • 22.
    RITE testing oneBay Shopping CartIterative paper prototype testing:Uncover conceptual and interaction issues before the design Top Buyer, researcher, and “human computer”
  • 23.
    Eye TrackingEye trackingallows us to identify what participants look at (and don’t look at), and in what order.Sample scanning patternSample Heat map summarizing overall viewing pattern
  • 24.
    An example ofUCD:Redesigning kalahari.comcheckout
  • 26.
    The elements ofuser experience:User researchContent strategyVisualdesignInteractiondesignUser research
  • 27.
  • 28.
    What happens whenwords andimages are separated?
  • 34.
  • 35.
    Content strategy plansfor the creation, delivery, and governance of content.Better content. Content people care about. Content that supports your business objectives and meets your users' goals.It's a long-term fix for content problems of all sizes.- Kristina Halvorson (@halvorson)
  • 36.
  • 37.
  • 42.
  • 50.
  • 53.
  • 56.
    The elements ofuser experience:User researchContent strategyVisualdesignInteractiondesignUser research
  • 57.
  • 58.
    Interaction design definesthe structure and behaviors of interactive products and services, and user interactions with those products and services.Interaction design is grounded in an understanding of real users (goals, tasks, experiences, needs, and wants) and balances these needs with business goals and technological capabilities.-IxDA
  • 59.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system status
  • 62.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real world
  • 64.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedom
  • 66.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standards
  • 71.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError prevention
  • 73.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recall
  • 75.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of use
  • 77.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of useAesthetic and minimalist design
  • 80.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of useAesthetic and minimalist designHelp users recognize and recover from errors
  • 89.
    10 heuristics foruser interface designhttp://www.useit.com/papers/heuristic/heuristic_list.htmlVisibility of system statusMatch between system and the real worldUser control and freedomConsistency and standardsError preventionRecognition rather than recallFlexibility and efficiency of useAesthetic and minimalist designHelp users recognize and recover from errorsHelp and documentation
  • 91.
  • 94.
    The elements ofuser experience:User researchContent strategyVisualdesignInteractiondesignUser research
  • 95.
  • 96.
    The art andprofession of selecting and arranging visual elements — such as typography, images, symbols, and colours — to convey a message to an audience. - Encyclopedia Brittannica
  • 97.
    The principles ofdesignBalanceProximityAlignmentConsistencyContrastWhite space
  • 98.
  • 99.
    “A symmetrical objecttaps into the same neural machinery made to help the mind detect other people or predators. The more symmetrical and balanced something like a human face is, the more perceived beauty that is interpreted by the mind. No human face is perfectly symmetrical, however when the two sides are nearly equal, they are seen at a metacognitive level as more beautiful. Some scientists have argued this is because asymmetrical organisms are suffering from disease and the mind has evolved to recognize that.http://designinformer.com/designing-mind/
  • 103.
  • 108.
  • 111.
  • 117.
  • 125.
  • 130.
    The role ofvisual design
  • 131.
    The role ofvisual design
  • 134.
    Ok, back tokalahari.com
  • 138.
  • 141.
  • 143.
    User experience isnot rocket science.It’s not easy, but it’s not rocket science.And it requires a mind shift.
  • 144.
    User experience isnot rocket science.It’s not easy, but it’s not rocket science.And it requires a mind shift.Process.Rules.Science.And a healthy measure of art.But it is essential.
  • 145.
    An introduction touser experience designRian van der Merwetwitter: @RianVDMweb: elezea.com

Editor's Notes

  • #5 http://www.uie.com/brainsparks/2007/07/01/a-one-word-explanation-for-why-experience-design-is-important-iphone/
  • #9 http://bloggingabout.net/blogs/andries/archive/2009/02/10/why-is-user-experience-design-important.aspx
  • #10 http://www.uie.com/articles/three_hund_million_button/45% of users had multiple accounts160,000/day clicked on “forgot password” – 75% of those never came backRegister  Continue
  • #39 An example of bad content – technical jargon that doesn’t mean much to the user. “Turnkey aggregated standardized branded end-to-end store.”
  • #44 Simple content that matches the design. Focused on what they do, in language the user can understand.
  • #45 Another site often shown as an example of good content. It’s financial software, but the language is not jargony at all, and explains what they do in simple language from the user’s perspective.
  • #52 So many things wrong with this… Fake excitement, as if this is one of the best things you can find on the Internet Bad punctuation (Why all the exclamation points? Why hyphens on “ticket number” and “notice number”?) Rhetorical questions (question-talkers!): Already registered? New user? Red text that draws the eye (danger, danger!), but so long that very few visitors will read it Jargon (what’s AARTO, and why would users care?) Logout/login/Log In (innit caps)
  • #55 Core strategy defines how your content will help you meet business objectives.Substance identifies what content is required to successfully execute implement your core strategy, including characteristics such as messaging architecture, intended audience(s), and voice and tone.Structure focuses on how content is prioritized, organized, and accessed. Although structure can include information architecture (IA), it focuses more deeply on the content itself, including mapping messages to content, content bridging, and creating detailed page tables.Workflow explains how people manage and maintain content on a daily basis, including the roles, tasks, and tools required throughout the content lifecycle.Governance describes the policies, standards, and guidelines that apply to content and its lifecycle, as well as how an organization will sustain and evolve its content strategy.
  • #133 Voting paper from 10 April 1938. The text reads “Do you agree with the reunification of Austria with the German Empire that was enacted on 13 March 1938, and do you vote for the party of our leader Adolf Hitler?” The large circle is labeled “Yes” and the small circle is labeled “No”.
  • #134 Low contrast typography – difficult to readAll caps – difficult to readLabels in form fields – recognition rather than recall (no idea what the field is once you’ve typed in it)Content – “sign in” in a signup pageVisual hierarchy of “Sign in” buttonConsistency – very different from home page