intro to wireframing, hcd & design thinking
TRANSCRIPT
INTRODUCTION TO BUILDING
WIREFRAMESPriya Dandawate, Product Designer
Product Designer
Vera Beauty
3D MapsBing
Wireless gamingpeer-to-peer, Windows RT
Tap to connectNFC across Windows, Phone & Device setup
AGENDAAGENDA
1 Wireframes · how to think about and work with them
2 Design a Wireframe · how to build wireframes (Photoshop & PowerPoint)
3 Design Thinking & Testing · how to use wireframes effectively
PART I
Wireframes
“Human-centered design (HCD), is an approach that puts human needs, capabilities, and behavior first, then designs to accommodate those needs, capabilities, and ways of behaving.
Good design starts with an understanding of psychology and technology.”
Don Norman
everyone interprets the world differently
HCD
The Design of Everyday Things
Berkeley · User Interface Design & Developmenthttp://courses.ischool.berkeley.edu/i213/s07/lectures.html
Personas Describe a person in terms of their goals in life, capabilities, inclination & background.
Why? Makes hypothetical arguments less hypotheticalQ1: “What if this user wants to print this out?”A1: “The user won’t want to print often.”A2: “Emilee won’t want to print often.”
ex. social sally · tommy timberlake · normal norman
Wireframes
Learning iOS Design
“In the grand hierarchy of pictures of imaginary software, wireframes exist somewhere between sketches and mockups.
Their purpose is to nail down the details that sketches leave out: what exactly exists on each screen and how it all fits together –the geography of an app.”
wireframe with a purpose
The Mental Sweepgoals, non-goals & scoping
Learning iOS Design
Identify tasks that need to be particularly fast or easyIdentify tasks that should be supported, though ancillary to the main purposeTypes of data and how to manipulate it: view, add, edit, & deleteGrouping and hierarchy
WHAT is the goal of the website/app/experience?WHO is the audience?WHAT is the website definitely NOT for? WHO is NOT part of the audience?WHEN, WHAT, and with WHOM to share?
wireframes are like a storyboard
e a c h f r a m e r e p r e s e n t s a s c e n e , f i n d t h e r i g h t m e s s a g e t o c o n v e y
“What then is this thing called Design?
It is planning: the planning of everything as objectively as possible…
It is planning done without preconceived notions of style, attempting only to give each thing its logical structure and proper material, and in consequence it’s logical form.”
Bruno Munari
Design as Art
A box is the visual building block
of wireframes.
Box
Logo
Inbox(es)& Folders
Search
Navigation
COMPOSE
Content
Web clip/advertisement
Let’s break it down.
Deconstruct the wireframe of Googleboxes only
Logo
Input search
Navigation
ActionsSearch or Quick search
Inspire
http://www.powermockup.com/
Quick Search Button (normal)
Button Button (hovered)
Button Button (pressed)
Search
Navigation P1 P2 P3 Login
Search
search is part of a
much bigger journey
Help me understand
…
What is a…
How do I…
SearchS o l v i n g p r o b l e m s
i s f a s t e r , s i m p l e r , & m o r e i n t u i t i v e .
conceptual models are powerful
Workflows are dynamic non-linear user activity between wireframes
“Conceptual models are valuable in providing understanding,
in predicting how things will behave, and in figuring out what to do
when things do not go as planned.
A good conceptual model allowsus to predict the effects of our actions.”
work towards building a common understanding of thenavigation · workflow · terminology · functionality
The Design of Everyday Things · 7 myths about paper prototyping
“It is the conceptual model that provides true understanding.”
PART II
Designa wireframe
Ready to try?
Deconstruct the wireframe of Medium.comCEO Evan Williams
Co-founder of Twitter & Blogger
What is the goal of medium?Medium connects people, stories
and ideas that matter to you
Your stories and ideas.Effortlessly beautiful.
unity is the goal
Visual weight size & contrast
Similarity & DistinctionProximity & DistanceAlignment the guide test
Visual Rhythm scale
Margins & PaddingsBalanceUnderstatementTypography
Learning iOS Design
Principles of Layout
PART III
Design Thinking & Testing
Make observations on the intended target population, generate ideas, produce prototypes and test them. Repeat until satisfied.
The Design of Everyday Things
The Iterative Cycle of Human-Centered Design
Learning iOS Design
Interpreting customer feedback
QA