Designing Interfaces (and Wireframes)

55
Designing Interfaces (and wireframes) General Assembly 11/14/12
  • date post

    17-Oct-2014
  • Category

    Design

  • view

    6.478
  • download

    3

description

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.

Transcript of Designing Interfaces (and Wireframes)

Page 1: Designing Interfaces (and Wireframes)

Designing Interfaces(and wireframes)

General Assembly11/14/12

Page 2: Designing Interfaces (and Wireframes)

SKETCHING

Page 3: Designing Interfaces (and Wireframes)

Understanding ComicsScott McCloud

Page 4: Designing Interfaces (and Wireframes)
Page 5: Designing Interfaces (and Wireframes)
Page 6: Designing Interfaces (and Wireframes)

WE DRAW TO COMMUNICATE First to ourselves, then to others

Page 7: Designing Interfaces (and Wireframes)
Page 8: Designing Interfaces (and Wireframes)
Page 9: Designing Interfaces (and Wireframes)

DRAW LINES

Page 10: Designing Interfaces (and Wireframes)

DRAW SHAPES

Page 11: Designing Interfaces (and Wireframes)

USED BY: EVERYBODYFrom the Notebooks of Michel Bras

Page 12: Designing Interfaces (and Wireframes)

TOOLS FOR EXPRSSIONHow sketch for attention and understanding

Page 13: Designing Interfaces (and Wireframes)

Line thickness

Page 14: Designing Interfaces (and Wireframes)

Size

Page 15: Designing Interfaces (and Wireframes)

Shading

Page 16: Designing Interfaces (and Wireframes)

Selective detail

Page 17: Designing Interfaces (and Wireframes)

Isolation

Page 18: Designing Interfaces (and Wireframes)

Depth

Page 19: Designing Interfaces (and Wireframes)

Notation

Page 20: Designing Interfaces (and Wireframes)

Make a sketch of this page

Use:• Line weight• Size• Shading• Selective

detail• Isolation• Notation

Page 21: Designing Interfaces (and Wireframes)

TRANSFORM YOUR FLOWSMaking pages out of boxes and arrows

Page 22: Designing Interfaces (and Wireframes)

A task analysis

From Information Architecture: Blueprints for the Web, this is a task analysis for a website for Sundance film festival, featuring a schedule planner

Page 23: Designing Interfaces (and Wireframes)

Each task could have a page

Page 24: Designing Interfaces (and Wireframes)

First Yahoo 1994

1995: first graphic logo

Remind you of something?

Page 25: Designing Interfaces (and Wireframes)

Including the schedule creator tool…

Page 26: Designing Interfaces (and Wireframes)

Wizards: Many boxes,many pages

Page 27: Designing Interfaces (and Wireframes)

Use Wizards:• When users want to accomplish a

goal that has many steps. Wizards are good at making sure you don’t miss a step.

• When the steps must be completed in order. Wizards are linear, so it’s impossible to complete them any other way.

• When the task is seldom performed. Wizards can seem slow and plodding, so they are best used in tasks you do only once in a while, like setting up a printer.

• The audience is not technically savvy and is likely to be confused by a page with a lot of choices on it. A Web site can have novice users, and a wizard makes complex tasks seem easy.

• Bandwidth is low and downloading a single big page could take forever, or the tasks require several server calls, which would also slow the page’s load.

• The task has several steps in it, performed only once a visit, such as checkout.

Page 28: Designing Interfaces (and Wireframes)

DESIGN A WIZARDTask:

Page 29: Designing Interfaces (and Wireframes)

You can group tasks together

Page 30: Designing Interfaces (and Wireframes)

Control Panel

Page 31: Designing Interfaces (and Wireframes)

You see them on software in preferences, set occasionally, by experts

Page 32: Designing Interfaces (and Wireframes)

On the web, they are often account settings

Page 33: Designing Interfaces (and Wireframes)

DESIGN A CONTROL PANEL

Page 34: Designing Interfaces (and Wireframes)

TOOLBARSBring the settings and the thing modified together

Page 35: Designing Interfaces (and Wireframes)

What if we put the tasks with the thing they were modifying?

Page 36: Designing Interfaces (and Wireframes)

It’s a toolbarTools here Item affected

here

Page 37: Designing Interfaces (and Wireframes)

ToolbarsTools here Item affected

hereAnd here

And here

Photoshop: toolbars on steroids

Page 38: Designing Interfaces (and Wireframes)

The web uses toolbars more sparingly

Page 39: Designing Interfaces (and Wireframes)

ToolbarsTools here

Item affected here

A simpler design is better for

infrequent use.

Page 40: Designing Interfaces (and Wireframes)

GROUP LIKE ITEMSLocation, palette

Page 41: Designing Interfaces (and Wireframes)

An Interface is like a table setting, the tools you need are next to the food you eat. Content is the meal.

Page 42: Designing Interfaces (and Wireframes)

Two videos sites.The “meal” is the video, and the tools to consume (or play with) it are arrayed around the main meal.

(P.S. There are toolbars too)

Page 43: Designing Interfaces (and Wireframes)

Why is the response so far from the invitation?

Page 44: Designing Interfaces (and Wireframes)

ZONE YOUR PAGE

Page 45: Designing Interfaces (and Wireframes)

When designing the page, group items by similarity and similarity of task (navigation items together, editing items together)

Give them visual importance based on user number, usage frequency and importance to business.

Page 46: Designing Interfaces (and Wireframes)

• Create “zones” for functionality groups.

• You can group them by putting white space around them, or use lines

• Remember to keep tools close to the thing your working on

Page 47: Designing Interfaces (and Wireframes)

Zone this page

Page 48: Designing Interfaces (and Wireframes)

ZONE YOUR HOMEPAGE

Page 49: Designing Interfaces (and Wireframes)

HOW TO MAKE A WIREFRAME IN 30 SECONDS

Page 50: Designing Interfaces (and Wireframes)

Draw a rectangle

Page 51: Designing Interfaces (and Wireframes)

Add global elements

Page 52: Designing Interfaces (and Wireframes)

• Next, add the key zones

• Start with a list of elements, perhaps written on post its. Group them, then find them homes on your page.

• The fill in the actual elements

Page 53: Designing Interfaces (and Wireframes)

FINALLY, ANNOTATE

Page 54: Designing Interfaces (and Wireframes)

Consider• Where does the content come from? If you have a list of related articles,

specify how they’re related. Are they the most viewed? Most viewed from that section?

• What is the nature of the content? Does it vary greatly in length, size, language,and type?

• Is the element required or optional? What happens if the element doesn’t appear on that page? Does the layout change?

• Is the element conditional? Does it vary based on other factors? For example, do administrators see additional links? What happens if an article doesn’t have an associated image? What if it does?

• What’s the default or expected state? Ideally, what’s supposed to happen on the page.

• What are the alternate or error states? How does the design change when things don’t go right?

Page 55: Designing Interfaces (and Wireframes)

Homework

• Pick a website to sketch out• Pick a Website to Zone• Try a page form your project