designing interfaces (and wireframes)

Designing Interfaces(and wireframes)

General Assembly11/14/12

SKETCHING

Understanding ComicsScott McCloud

WE DRAW TO COMMUNICATE First to ourselves, then to others

DRAW LINES

DRAW SHAPES

USED BY: EVERYBODYFrom the Notebooks of Michel Bras

TOOLS FOR EXPRSSIONHow sketch for attention and understanding

Line thickness

Size

Shading

Selective detail

Isolation

Depth

Notation

Make a sketch of this page

Use:• Line weight• Size• Shading• Selective

detail• Isolation• Notation

TRANSFORM YOUR FLOWSMaking pages out of boxes and arrows

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

Each task could have a page

First Yahoo 1994

1995: first graphic logo

Remind you of something?

Including the schedule creator tool…

Wizards: Many boxes,many pages

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.

DESIGN A WIZARDTask:

You can group tasks together

Control Panel

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

On the web, they are often account settings

DESIGN A CONTROL PANEL

TOOLBARSBring the settings and the thing modified together

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

It’s a toolbarTools here Item affected

here

ToolbarsTools here Item affected

hereAnd here

And here

Photoshop: toolbars on steroids

The web uses toolbars more sparingly

ToolbarsTools here

Item affected here

A simpler design is better for

infrequent use.

GROUP LIKE ITEMSLocation, palette

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

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)

Why is the response so far from the invitation?

ZONE YOUR PAGE

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.

• 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

Zone this page

ZONE YOUR HOMEPAGE

HOW TO MAKE A WIREFRAME IN 30 SECONDS

Draw a rectangle

Add global elements

• 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

FINALLY, ANNOTATE

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?

Homework

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