Contenu connexe Similaire à DevNet UX Creative Design 101 workshop (20) Plus de Cisco DevNet (20) DevNet UX Creative Design 101 workshop2. 2© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Creative Workshop
Talk
UX Design Process
Hands-on Design
Interviewing
Creating Personas
Writing Scenarios
Sketching
3. 3© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Try the exercises
Use the Cisco design coaches
Relax and have fun
Share your mind
Ask questions
4. 4© 2013-2014 Cisco and/or its affiliates. All rights reserved.
What is it?
Who’s doing it?
When do you do it?
5. 5© 2013-2014 Cisco and/or its affiliates. All rights reserved.
UX Design != Wireframes
It’s the creative process that comes before wireframes.
8. 8© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Human-centered Design Process
User Research
interviews
observation
design probes
thinking
feeling
doing
knowing
User Modeling
personas
mental models
user journeys
hypotheses
Requirements
Definition
scenarios
narratives
storyboards
Synthesis
scenarios
narratives
storyboards
9. 9© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Data
&
Empathy
User Research
10. 10© 2013-2014 Cisco and/or its affiliates. All rights reserved.
User Modeling: Personas
Background
Global healthcare company
Network engineer with 10 years
experience
Many satellite sites and external
partners
Needs and Motivations
N e t w o r k h e a l t h — k e e p t r a f f i c i s
f l o w i n g
E n s u r e t h r e a t s a r e r e s o l v e d
G i v e p e o p l e a c c e s s o n l y t o
i n f o r m a t i o n t h e y n e e d
K e e p d e v i c e s o f t w a r e a n d
f i r m w a r e u p - t o - d a t e
“It’s fine for the security group
to manage IPS, but I’ll never
give up control of the
firewalls—they’re the keys to
the kingdom.”
Ned Patton
What would
Ned do?
11. 11© 2013-2014 Cisco and/or its affiliates. All rights reserved.
A scenario is a story told from the user’s point of
view.
It narrates what happens during an ideal user
experience to achieve a specific goal.
There is no mention of the technology or interface,
i.e., we don’t say how it’s done.
Requirements generation: Scenario
12. 12© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Scenario example
Francesca is at the Learning Lab in the DevNet Zone when a colleague calls
her over to introduce Jan, a Jabber engineer. They talk collaboration
technologies and decide to exchange contact information.
Francesca pulls out her phone and sees the names and photos of people in
her network who are close by. “That’s you, right?” she asks Jan, pointing at a
photo labeled Jan James. Jan nods, so Francesca selects Jan’s photo. From
a choice of communication channels she selects LinkedIn. “You should head
for your talk now,” she says. “You’ll get an SMS with a link. Follow it and
you’ll get my contact info.”
As Jan heads off, Francesca adds a note to remind her they talked about
collaboration technologies.
Later that day she gets an alert that Jan’s contact info has been added to her
app.
13. 13© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Requirements
Francesca is at the Learning Lab in the DevNet Zone when a colleague
calls her over to introduce Jan, a Jabber engineer. They talk collaboration
technologies and decide to exchange contact information.
Francesca pulls out her phone and sees the names and photos of people in
her network who are close by. “That’s you, right?” she asks Jan, pointing at
a photo labeled Jan James. Jan nods, so Francesca selects Jan’s photo.
From a choice of communication channels she selects LinkedIn and
submits her choice. “You should head for your talk now,” she says. “You’ll
get an SMS with a link. Follow it and you’ll get my contact info.”
As Jan heads off, Francesca adds a note to remind her they talked about
collaboration technologies.
Later that day she gets an alert that Jan’s contact info has been added to
her app.
context
goal
data
input
display & input
input
input
action
sensor data
15. 15© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Synthesis: Sketching
Fail often fail fast.
18. 18© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Application: Order ahead of time
Design an application that enables a group
to order food from a restaurant and specify
when they will be arriving (pickup or
delivery).
19. 19© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Form groups
Get into groups of 3-4.
Grab a Cisco designer to work with you
Introduce yourselves
We’ll all go through the process synchronously
20. 20© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Practice interviewing (10 min)
Take turns interviewing at least 2 people
• Decide the goal of your interview—what do
you want to learn
• Start interview by asking the person about
themselves
• Lead them through describing an experience
of organizing a group lunch
• Listen
21. 21© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about interviewing?
22. 22© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Background
First item
Second item
Third item
Goals and Motivations
First item
Second item
Third item
Write 2 personas (15 min)
☺
︎
“Quote from your persona”
name
23. 23© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about writing personas?
24. 24© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Write scenarios (15 min)
Describe the ideal experience
What the user does, sees, etc.
Force yourself to not think about the
system
25. 25© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Insights about writing scenarios?
26. 26© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Sketch design ideas (30 min)
Walk through a scenario
Sketch the flow through screens
Figure out what should go on the screen
What would <persona> want?
Sketch 3 variants
31. 31© 2013-2014 Cisco and/or its affiliates. All rights reserved.
Graphic Styles and Lines
Callout Leader Line
Multi-color Bar to Divide Content
Solid Gradient Image FillTransparent
Notes de l'éditeur Who’s in the Audience
Developers, Designers, Managers, Other
Who is your user and what are you building for them? (enterprise? Consumer?)
Who works with Designers?
When do you start working on user experience design?
In my experience, most people think of user experience design as wireframes
Or even what happens after wireframes….make it look nice
Wireframes are the design document, like blueprints or cad drawings
This workshop is about what happens before the wireframes
Extrapolation
You are not the user.
This is particularly important in our field where it’s easy to think everyone is tech savvy.
Watching my mom talk to a automated system, and at the very end she said “thank you.”
Learning about the user, what’s important, and how they accomplish a task Optimize towards a particular user
A quote generalizes the essence of the person We generate requirements by telling a story.
Inductive reasoning
If the story holds, then the design is logical.
Sherlock Holmes
Point of view
User’s point of view vs omniscient
Intent
Describes experience vs system (information flow and state change)
Plausibility
Most likely situation vs enumerating all cases Start working out ideas on paper.
After several rounds of sketching and feedback you get to the wireframes.
Why do we need a process?
Wireframes are the design document, like blueprints or cad drawing
Wireframes are the design document, like blueprints or cad drawings
This workshop is about what happens before the wireframes