This is a lecture I gave to my User Experience class at General Assembly on Interaction Design. It covers a brief history, and the various approaches that are being used.
I borrowed from other sources to a degree, which I have cited extensively.
In which we look at the mysteries of moving from boxes and arrows to a real actual interface. It starts with sketching, goes through basic models of interaction on a screen, and finishes with wireframes.
Characteristics of a well designed user interfaceThomas Byttebier
"Designing a good user interface is like tightrope walking: it's all about finding the right balance."
Translated slides for a presentation I first gave at Luca School of Arts, Gent, March 2015.
[Slightly updated November and December 2015]
Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.
This is a lecture I gave to my User Experience class at General Assembly on Interaction Design. It covers a brief history, and the various approaches that are being used.
I borrowed from other sources to a degree, which I have cited extensively.
In which we look at the mysteries of moving from boxes and arrows to a real actual interface. It starts with sketching, goes through basic models of interaction on a screen, and finishes with wireframes.
Characteristics of a well designed user interfaceThomas Byttebier
"Designing a good user interface is like tightrope walking: it's all about finding the right balance."
Translated slides for a presentation I first gave at Luca School of Arts, Gent, March 2015.
[Slightly updated November and December 2015]
Designing better user interfaces sets out to teach interface design by talking through concrete examples: what works, what doesn’t work. A good interface consists of a thousand details done right. This presentation is all about those details.
Designing Structure Part II: Information ArchtectureChristina Wodtke
Part two on Designing Structure for my General Assembly class on User Experience is about Information Architecture. We cover why classification is important, types of classification and trends in IA.
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Raj Lal
Do you know about WIMP? The Natural or Organic Interface? Zooming Interface? And what the heck is the Intelligent UI? Where are all these interfaces coming from. What about the Gesture, Haptics, Pen based and touch and even multi touch interfaces?
In this session learn from the Author of Digital Design Essentials: 100 ways to Design better Desktop, Web and Mobile Interfaces, the intriguing story of the Digital Interface. How the digital Interface started from Command line to WIMP Interface to GUI and now became the most debated topic in the design industry, Skeumorphic Design or Modern UI. See how, with the revolution of devices digital interface took turn to Natural, Touch and Organic User Interfaces. See how User Interface has evolved in last twenty years. See how the current trends in touch screens, text to speech and AI are molding the mere fabric of the User Interface and how the user adoption still is the key to a successful User Interface Design.
http://theinnovationenterprise.com/summits/digital-design-sanfran-2013/event_activities/5129
AUTHENTIC IN ALL CAPS Case Study & Interview with Christy Dena TMC Resource Kit
AUTHENTIC IN ALL CAPS is an award-nominated web audio adventure for the iPad (with a Chrome App version coming soon!). You travel across the web with characters who face ridiculous obstacles to being themselves. It is inspired by audio drama, audio tours, and alternate reality games...and it's about identity, mortality, and pizza toppings...
This case study and interview gives you a behind the scenes look at the creation of this innovative narrative experience.
Lean Startup. Fluid, optimised, responding dynamically to changes in the product based on customer data to drive value and build their proposition. No bureaucracy, no waste just beauty.
Agile. A system, bloated, ridged and wasteful. Challenging a business to change its perspective on product development and deliver amazing products. While it sounds like Cinderella and the ugly sister both have lessons to learn from one another. They are ultimately searching for an answer to the question ‘How can we learn more quickly what works, and discard what doesn’t to the achieve the ultimate outcome
Presentation agenda:
Agile, Lean and Startup principles and practices
Examples of how it can apply to all projects
Efficiency and effectiveness
Understanding
Building
Systemico Framework
Learning
Value creation
Value mapping
Value stream analysis
Innovation
Designing Structure Part II: Information ArchtectureChristina Wodtke
Part two on Designing Structure for my General Assembly class on User Experience is about Information Architecture. We cover why classification is important, types of classification and trends in IA.
Evolution of User Interface - Digital Web & Design Innovation Summit SFO 20 S...Raj Lal
Do you know about WIMP? The Natural or Organic Interface? Zooming Interface? And what the heck is the Intelligent UI? Where are all these interfaces coming from. What about the Gesture, Haptics, Pen based and touch and even multi touch interfaces?
In this session learn from the Author of Digital Design Essentials: 100 ways to Design better Desktop, Web and Mobile Interfaces, the intriguing story of the Digital Interface. How the digital Interface started from Command line to WIMP Interface to GUI and now became the most debated topic in the design industry, Skeumorphic Design or Modern UI. See how, with the revolution of devices digital interface took turn to Natural, Touch and Organic User Interfaces. See how User Interface has evolved in last twenty years. See how the current trends in touch screens, text to speech and AI are molding the mere fabric of the User Interface and how the user adoption still is the key to a successful User Interface Design.
http://theinnovationenterprise.com/summits/digital-design-sanfran-2013/event_activities/5129
AUTHENTIC IN ALL CAPS Case Study & Interview with Christy Dena TMC Resource Kit
AUTHENTIC IN ALL CAPS is an award-nominated web audio adventure for the iPad (with a Chrome App version coming soon!). You travel across the web with characters who face ridiculous obstacles to being themselves. It is inspired by audio drama, audio tours, and alternate reality games...and it's about identity, mortality, and pizza toppings...
This case study and interview gives you a behind the scenes look at the creation of this innovative narrative experience.
Lean Startup. Fluid, optimised, responding dynamically to changes in the product based on customer data to drive value and build their proposition. No bureaucracy, no waste just beauty.
Agile. A system, bloated, ridged and wasteful. Challenging a business to change its perspective on product development and deliver amazing products. While it sounds like Cinderella and the ugly sister both have lessons to learn from one another. They are ultimately searching for an answer to the question ‘How can we learn more quickly what works, and discard what doesn’t to the achieve the ultimate outcome
Presentation agenda:
Agile, Lean and Startup principles and practices
Examples of how it can apply to all projects
Efficiency and effectiveness
Understanding
Building
Systemico Framework
Learning
Value creation
Value mapping
Value stream analysis
Innovation
The cornerstone of UX, user interface design presents unique, user-centric challenges, exposing exciting opportunities to produce cohesive and engaging interactive experiences. Covering mobile-specific UI principles, practical implementation and rule breaking, Fred Spencer will share with you how the Titanium platform can make it easy to meaningfully improve user experience and exceed user expectations.
Located in the greater Boston area, Fred Spencer is an Appcelerator senior application architect and digital media instructor at the Rhode Island School of Design, Continuing Education.
Slides for a session at LAST Conference, 27 July 2012. Melbourne, Australia.
Practical ways that you can incorporate UX techniques into your development and design to increase shared understanding, and gain ideas from all members of a team.
We looked at a Melbourne cinema’s website and used techniques to improve its usefulness for its users.
We looked at a Melbourne cinema’s website and trying to improve its usefulness for its users.
Without users & their problems, we have no reason to write software. However, sometimes, it is frustrating dealing with the source of our problems. Thankfully, there are tools to help us become better at communicating with our end users, in hopes of achieving the end goal with as little strife as possible. Empathy, patience, and clear communication go a long way in development, as this talk will show. “Even More Tools for the Developer’s UX Toolbelt” will give developers even more tools to make their lives a little easier when dealing with end users.
UX 101: A quick & dirty introduction to user experience strategy & designMorgan McKeagney
A quick & dirty intro to UX strategy & design. Some context, some fundamentals, some current & emerging trends, and some useful resources for the absolute beginner.
First delivered @ the NDRC Launchpad startup accelerator in Dublin, Ireland, 16/10/2014. (www.ndrc.ie)
June, 2010 Utah Product Management Association presentation, "Creating products that people love" by Steve Ballard, Director of User Experience for attask.com.
Linking UX Ideas for an Aha Moment from Non-EmpathizersBalanced Team
Chris Nodder, Chris Nodder Consulting
I will describe a specific set of tools I've been using in a particular order that really helps all the members of a project (makers, monetizers and managers) understand user needs and build for those needs. None of the methods I use are new, but by focusing on the idea of empathizers and systemizers I ensure that there is sufficient continuity between the activities we perform that non-empathizers can still understand that they are not the user, and agree on a sensible user-centric way forward. This stops arguments and focuses everyone on the team towards customer based solutions.
There is always a paper trail back to observed user data. There is always enough information pinned to the wall that people can point and say "see, this is why we're doing what we are doing". There is always enough verification built in to the process that we know whether we're on track before we invest in code. I'll describe the concept of systemizers and empathizers, share the set of tools I use and show the flow of information between each tool.
Interaction Design for fast-paced StartupsGreg Hochmuth
Talk given at Web 2.0 Expo Berlin: Twice the Speed and Half the Cost - Basics of Interaction Design for Fast-Paced Startups, by Gregor Hochmuth (www.dotgrex.com)
User Experience Design, or UX Design, is often a mystifying term thrown around in sales pitches, conferences, client engagements, and the like, but what does it really entail?
Any successful application is always built, at its core, around problem solving. Take a look through the presentation to see how we approach UX Design here at Quick Left. We’ll help navigate through all the buzz words, and get down to real world examples of successful user experience design.
This is part one of a two part series. Part two coming soon.
5. Personas
• Communication tool
• Combat elastic user
• Encapsulating user research
6
!"#$%&'(!)*+#,-#.!/0(!
6. Alan Cooper
• Profile:
• Chairman of Cooper
• Author of About Face, The Inmates are
Running the Asylum
• Creator of Personas
• “Father of Visual Basic”
• In 1994, Bill Gates awarded Alan Cooper
with one of only seven Windows Pioneer
Awards for my part in making Windows a
success through the creation of Visual
Basic.
7
!"#$%&'(!)*+#,-#.!/0(!
8. Persona Case Study: Parking Angel
• Parking Angel
http://www.cooper.com/insights/concept_projects/parking_angel.html
• Problem: You're driving in an area you don't know, you're
running late, and you have no idea where to park. Sound
familiar? We think this is a frustration technology could help
solve, so we decided to design a solution.
9
!"#$%&'(!)*+#,-#.!/0(!
9. Persona Case Study: Cooper
“Christine”
Christine's Frustrations:
• Hunting for parking spaces
• Paying for an expensive garage only to find an empty
metered spot around the corner
• Getting tickets when she can't remember which streets in
her neighborhood get cleaned on which nights
• Having to remember when her meter expires
• Not being able to find a spot that feels safe when she's
alone at night
• Stockpiling quarters in her cup holder
Christine's Goals:
• Save time and money
• Avoid "stupid" tickets
• Minimize stress
10
!"#$%&'(!)*+#,-#.!/0(!
10. Persona Case Study: Parking Angel
Solution
• Showing her open Scenario:
spaces close to her •
destination
• Only showing spaces
within her time, cost, or
distance parameters
• Sending her an email,
SMS, or voice
message when it's time
to move the car
• Letting her pay
electronically, so she
can use her cup holder
for more important
things (like her
morning coffee)
11
!"#$%&'(!)*+#,-#.!/0(!
11. Persona Case Study: Ford Verve
“Antonella”
http://www.nytimes.com/2009/07/19/automobiles/19design.html
Antonella is an attractive 28-year old woman who lives in Rome. Her
life is focused on friends and fun, clubbing and parties.
12
!"#$%&'(!)*+#,-#.!/0(!
13. Persona Case Study: Ford
• Ford Verve
• [Antonella is] a character invented by Ford designers to
help them imagine cars better tailored to their intended
customers, she embodies a philosophy that guides the
company’s design studios these days: to design the car,
first design the driver.
• Antonella is the personification of a profile created from
demographic research about the Fiesta’s target customer.
• Ford is using characters like Antonella to bring a human
element to the dry statistical research drawn from polls and
interviews.
• “Invented characters get everyone on the same page.
Personalizing gives context to the information we have.
Sometimes the target demographics are difficult to relate to
by, say, a 35-year-old male designer.”
14
!"#$%&'(!)*+#,-#.!/0(!
14. Persona Case Study: Microsoft Research
Windows Personas
http://research.microsoft.com/en-us/um/people/jgrudin/publications/personas/Pruitt-Grudin.pdf
“The act of creating Personas has
helped us make our assumptions
about the target audience more
explicit. Once created, the Personas
have helped make assumptions and
decision-making criteria equally
explicit. Why are we building this
feature? Why are we building it like
this?
Without Personas, development teams
routinely make decisions about
features and implementation without
recognizing or communicating their
underlying assumptions about who will
use the product and how it will be
used.”
15
!"#$%&'(!)*+#,-#.!/0(!
15. Persona Case Study: Coldplay
“Dave”
http://www.pointclearsolutions.com/blog/?p=159
Chris Martin:
“While writing, Martin says, ‘I always think of some regular 16-year-old called
Dave who’s on his bus trip to school: Is he going to want to listen to this? Last
time we got so worried about who thinks this and who thinks that, and this time
I’ve been really focused. On Dave. My 16-year-old imaginary friend. But not in
a weird way.’”
16
!"#$%&'(!)*+#,-#.!/0(!
17. Goals-directed method
• Essence of the goals-directed method
• Goals drive a person’s actions
• Tasks are things a person does in order to accomplish his
goals
• Tasks are important, but goals get you to big breakthroughs
• Good Design helps users
• Accomplish goals
• Feel competent
• Minimize work (usually)
18
!"#$%&'(!)*+#,-#.!/0(!
18. Goals-directed process
• Define data objects and
attributes
• Identify usage patters • Define functional elements of
• Analyze workflows product/service
• Assess work environment • Use scenarios to sketch and
and technical factors iterate important elements • Provide design consultation
• Create personas and goals • Develop visual design style • Respond to issues
the users the solution implement
the domain the analysis form & behavior
• Interviews • Identify risk and opportunities • Iterate through increasingly
• Competitor and • Construct context scenarios detailed scenarios
literature review • List functional and data • Collaborate with engineers for
needs feasibility
• Make trade-off decisions • Develop detailed visual design
• Conduct usability tests
19
!"#$%&'(!)*+#,-#.!/0(!
19. Interviews
• Multiple sources
• Stakeholders
• Subject matter/domain experts
• Customers
• Users and potential users
• Users
• Use role as a filter
• Select 4 per role (specialized), 8-12 (unspecialized)
• Divide role by geography, seniority, industry
20
!"#$%&'(!)*+#,-#.!/0(!
20. Interviews
• Interview method
• Overview questions (typical day etc.)
• “Case-focused” questions (stories etc.)
• “Grand tour” (walk through artifacts)
• Look around & understand work environment
• Ask about Tools
• Other general questions
• What wastes your time?
• What makes a good work day? bad work day?
• What kind of training do you have?
• What are most important things?
• What information helps you make decisions?
• Who do you get information from? 21
!"#$%&'(!)*+#,-#.!/0(!
21. Personas overview
• Personas help
• Determine what the product should do and how it should
behave
• Communicate with stakeholders and colleagues
• Get people committed to design
• Measure the design’s effectiveness
• Personas captures
• Goals • Environment
• Attitudes • Skill level
• Work or activity flow • Frustrations
22
!"#$%&'(!)*+#,-#.!/0(!
22. Personas overview
• Personas vs. market segments
Market Segments Personas
• Groups of customers who will • Groupings of users with similar
respond to similar messaging goals and usage patterns
• Tell you how to sell the product • Tell you how to satisfy
• Focus on buying customers
• Focus usage
23
!"#$%&'(!)*+#,-#.!/0(!
23. Creating personas
1 Identify variables
2 Map interviewees to variables
3 Identify major patterns
4 List characteristics & goals
5 Check the whole persona set
6 Develop narrative
7 Designate types
24
!"#$%&'(!)*+#,-#.!/0(!
24. Creating personas
1. Identify variables 1 Identify variables
• Quantity 2 Map interviewees to variables
• Frequency 3 Identify major patterns
• Demographics 4 List characteristics & goals
• Time / Level of effort 5 Check the whole persona set
• Attitude 6 Develop narrative
• Goals
7 Designate types
• Mental model
• Skill (technology / domain)
• Process
• Concerns
• Context
25
!"#$%&'(!)*+#,-#.!/0(!
25. Creating personas
2. Map interviewees to variables 1 Identify variables
• 2 Map interviewees to variables
3 Identify major patterns
4 List characteristics & goals
5 Check the whole persona set
6 Develop narrative
7 Designate types
26
!"#$%&'(!)*+#,-#.!/0(!
26. Creating personas
3. Identify major patterns 1 Identify variables
• Determine how the variables go together 2 Map interviewees to variables
to form major behavior patterns.
3 Identify major patterns
• What seems to the most important
distinctions among your interviewees? 4 List characteristics & goals
• Use short (2-3 word) descriptions for each 5 Check the whole persona set
major pattern.
6 Develop narrative
7 Designate types
27
!"#$%&'(!)*+#,-#.!/0(!
27. Creating personas
4. List characteristics & goals 1 Identify variables
• Goals 2 Map interviewees to variables
• What are they trying to accomplish? 3 Identify major patterns
4 List characteristics & goals
• Goals types 5 Check the whole persona set
• Life goals (get married by 30) 6 Develop narrative
• Experience goals (Have fun)
7 Designate types
• End goals (finish work by 5:00PM)
• Goal example
• “Stay busy, don’t get bored”
• “Manage money wisely”
28
!"#$%&'(!)*+#,-#.!/0(!
28. Creating personas
5. Check whole persona set 1 Identify variables
• Any redundant personas? 2 Map interviewees to variables
• Do you need customer, served or political 3 Identify major patterns
personas?
4 List characteristics & goals
5 Check the whole persona set
6 Develop narrative
7 Designate types
29
!"#$%&'(!)*+#,-#.!/0(!
29. Creating personas
6. Develop narrative 1 Identify variables
• Tell a story, make them real people. 2 Map interviewees to variables
• Add one or two personal details (college, 3 Identify major patterns
hobbies etc.)
4 List characteristics & goals
5 Check the whole persona set
6 Develop narrative
7 Designate types
30
!"#$%&'(!)*+#,-#.!/0(!
30. Creating personas
7. Designate type 1 Identify variables
• Persona types 2 Map interviewees to variables
• Primary 3 Identify major patterns
• Secondary 4 List characteristics & goals
• Supplemental 5 Check the whole persona set
• Negative 6 Develop narrative
7 Designate types
• If there are multiple personas with radically
different needs, there will be multiple primary
personas.
• Secondary persona is mostly satisfied with the
primary persona’s interface but has specific
additional needs. You do not always need
secondary personas.
31
!"#$%&'(!)*+#,-#.!/0(!
31. Creating personas
Primary user persona
!"#!$!%&!$!#'
!"#$$#%&'()!*+,!-.///
"#!()*+,-
32
!"#$%&'(!)*+#,-#.!/0(!
32. Creating contextual scenarios
• Contextual scenarios 1 Brainstorm
• How will personas use the product/service? 2 Revisit mental model
• Be goal-driven 3 Create context scenario
• Pretend it’s magic 4 List requirements
• Other concerns:
• What is the setting in which the product/service is used?
• How long will be used for? Are there interruptions?
• How much complexity is permissible?
• What major things does the persona need to accomplish?
• What should be the end result?
33
!"#$%&'(!)*+#,-#.!/0(!
34. Framework definition
• Framework 1
1 Define posture
and input methods
• Determine what data and functional 2
2
elements best address the data and Define data and
functional elements
3
functional needs
3 Group and sketch elements
• Data elements (price, color etc.) 4
using key path scenarios
• Functional element (product info box and 5
4 Check design with
interaction) validation scenarios
6
7
• Key path scenarios
• Define one or more scenarios that describe th
persona’s most important or frequent
workflows, using the interaction framework.
35
!"#$%&'(!)*+#,-#.!/0(!