Intro to Wireframing, HCD & Design Thinking

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?

Presenter

Presentation Notes

By the time you get to wireframing, you should have a clear purpose for the experience you are trying to build. along with the P1 tasks needed to achieve those goals. During the sketching/ideating process, it’s important to sweep through your mind for all the features, challenges, ideas and questions you may have. During these early discussions, the team may wander off course a bit; the important thing is to get everything out there. This will naturally lead into some hard conversations scoping the goals of the experience & the problem. This is, by far, one of the hardest steps because there is a certain amount of order that you are trying to bring to chaos. Decision fatigue is a real thing, and it can be hard to gauge the opportunity cost of a decision. In my perspective, it ultimately comes down to your company’s culture and attitude toward creating; failure can be the risk of trying.

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

Presenter

Presentation Notes

Rather than think of wireframes as static layouts, think of them as scenes in a storyboard. You’re trying to convey a particular message during each scene in the “film”, or experience. It comes down to displaying the right message at the right time. ‘Right’ will change depending on the problem you’re trying to solve. Design is a very fluid approach to solving problems.

“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

Presenter

Presentation Notes

Every visual element and interaction on screen should be built with a purpose. Think deeply about the problem you’re trying to solve. Design with intention,

A box is the visual building block

of wireframes.

Box

Presenter

Presentation Notes

A fundamental shape used while wireframing is the box. It contains a uniform type of content, like a picture or a search result

Logo

Inbox(es)& Folders

Search

Navigation

COMPOSE

Content

Web clip/advertisement

Presenter

Presentation Notes

Here’s a more elaborate example outlining a popular email client. The nitty gritty details describing the contents of each visual element is not present, rather the diagram focuses on the layout and hierarchy of elements presented on screen.

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

Presenter

Presentation Notes

More detailed wireframing elements provide a deeper outline of the hierarchical structure of the contents. The richer the wireframe you can design, the better you can anticipate nuances with the design; generally speaking, nuances come about while resizing content for different screen sizes, working across different mobile platforms and using a variety of fonts.

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 .

Presenter

Presentation Notes

Google’s search is iconic, but it’s part of a much bigger journey - I need to understand…/help me answer…/what is…These are a series of user tasks centered around problem solving. Their solution makes problem solving faster, simpler & more intuitive; I’ll bet this was probably the goal of Sergey Brin & Larry Paige when they started Google.

conceptual models are powerful

Workflows are dynamic non-linear user activity between wireframes

Presenter

Presentation Notes

A wireframe represents a scene, but it is also part of a much bigger journey - Workflows. A workflow is a set of steps to reach a goal; generally speaking, each workflow maps to a user tasks (identified during the mental sweep). A wireframe will most likely work across multiple workflows, so you may have multiple audiences to cater to; be sure to prioritize the content. Regardless of the architecture of your experience, strong conceptual models are one of the most powerful ways to create true understanding of the design.

“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.”

Presenter

Presentation Notes

Among the 6 principles used in the cognitive process of discovery, a clear conceptual model is arguably the most important for creating true understanding of your design. A good conceptual model allows us to predict the effects of our actions. Think of a car, how easy it is to drive a car. A steering wheel feels like a natural extension of the wheels of a car; turning the wheel feels natural, though the inner the wheels are moving at a different rate than the outer set. The details of the architecture are abstracted away from the end-user. To create a strong conceptual model work toward building a common understanding of the app’s navigation model, P1 workflows, language & terminology used, along with core functionality.

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.

Presenter

Presentation Notes

Remember: wireframe with a purpose. What is the purpose or goal of medium? Let’s try to keep their intention in mind while wireframing the site.

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

Presenter

Presentation Notes

Let’s take a look at some of the principles of layout that medium employs in their design.

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

Presenter

Presentation Notes

Let’s take a look at some of the principles of layout that medium employs in their design.

Intro to Wireframing, HCD & Design Thinking

Design

Transcript of Intro to Wireframing, HCD & Design Thinking