Interface Fundamentals

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike

@cwodtke

INTERFACE DESIGN FUNDAMENTALS


“Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper


A framework is the way elements will be organized on a page for use and understanding


From last week’s homework 5min


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

http://www.amazon.com/gp/product/0321600800?ie=UTF8&camp=213733&creative=393185&creativeASIN=0321600800&linkCode=shr&tag=eleganthack



Each task could have a page

@cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share AlikeFirst Yahoo 1994

1995: first graphic logo

Remind you of something?


Including the schedule creator tool…


Wizards: Many boxes,many pages


When to Use Wizards• Multi step process

• Must be completed in order

• The audience is not technically savvy

• Bandwidth is low



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.







What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?



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)


WHICH PAIR OF PANTS ARE NOW

39.99?


WHICH CAR IS 49.99?


Why is the response so far from the invitation?



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


IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT CLEAR, YOU PROBABLY SHOULD START OVER


5 Minutes


5 Minutes


10 Minutes





BUTTONS HAVE MEANING



LINKS HAVE MEANING



Subtlety will send you to the poor house.Tell your users what to do.

Clarity is relaxing, not annoying.







10 Minutes







On the product page (apples!)For the company to succeed

2 minutes


5 minutes



PAINTING


PAINTING




Comics are read in the west left to

right, like a page. However, good

artists add visual elements to help

you flow.

http://samkieth.blogspot.com/






I AM TIMES NEW ROMAN

Hey, I’m Arial


I AM COMIC SANSI am the devil


I AM IMPACTLOL



Georgia is always welcome


A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.


To be great is to be misunderstood.


A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh. To be great is to be misunderstood.




A foolish consistency is the hobgoblin of little minds, adored by little statesmen and philosophers and divines. With consistency a great soul has simply nothing to do. He may as well concern himself with his shadow on the wall. Speak what you think now in hard words, and to-morrow speak what to-morrow thinks in hard words again, though it contradict every thing you said to-day. — 'Ah, so you shall be sure to be misunderstood.' — Is it so bad, then, to be misunderstood? Pythagoras was misunderstood, and Socrates, and Jesus, and Luther, and Copernicus, and Galileo, and Newton, and every pure and wise spirit that ever took flesh.









NATURE










WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?


92

Poetics: Control, power, precision


93

Values: Lightweight, easy, sketchy, imprecise



WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?


96

Power, control, precision,


97

OmmWriter

Beauty, peace, zen


98


WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?








Q&A"In an architecture of content, the information becomes the interface." -- Edward Tufte

Design

Interface Fundamentals