the principles of interface

Designing Interface

Core Principles And Considerations

Sentence diagramming

Interface diagramming

Product (noun)

Buy (verb) Costs (adverb)

Look (verb) Costs (adjective)

The Language of Interface

Graphical (understanding)• Layout• Objects• Type• Color• Line• Hierarchy• Relationships

Interactive (doing)• Affordances • HUD• Feedback• Modes• Input• Navigation

DOINGInteractive Interface Design

Affordances

Buttons Look Pushable

Buttons with meaning

Links Look Clickable

Links Have Hierarchy

On Subtlety

When you don’t want to interrupt an action, be subtle (think of footnotes). If they are reading, don’t bother them.

When you need to prompt an action, subtlety will send you to the poor house.Tell your users what to do. Clarity is relaxing, not annoying.

HUD

Heads Up Display: Information user needs nearby to be effective

A integrated approach

An email HUD

All HUD, no content

A social HUD

Feedback

Inputs

Form Principles

• Consider Context• Set expectations• Use appropriate inputs• Give sift and clear feedback• Ask for less• AB test

Forms

http://www.lukew.com/ff/entry.asp?1502

21

Navigation

IA made visible

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

22

Most IA is invisible

• A lot of work no one sees

• Synonym rings, etc

• If it was seen, is would be too much

• We show only a subset

23

The magic number?

• 13 tabs– no one saw them. Six tabs, everyone saw them

24

But not everything is simple

masthead

Global links

Folders

Mail tools

ad

Other properties

upsell

Web searchRelated Services

tip

inbox

ads

ad

Related Services

upsell

Mail tools

Log out

inbox Write mailAnd there isn’t even content!

25

Navigation orders complex pages

26

Understanding Navigation

Message and Access

Where Am I?

Wha

t's N

earb

y?

What's RelatedTo What's Here?

Global Navigation

Loca

l Nav

igat

ion

Content Lives Here,With ContextualNavigation Inline

Or Separate.

27

Global navigation

• Where you are– Brand/masthead

• Where you can go (site offering)– Top level categories

• Safety nets– Where’s my (shopping cart/account/help???)

28

Global Navigation ‘03 vs ‘12

29

Global navigation

30

Global navigation ‘03 vs ‘12

31

Local Navigation

• I’ve started down the path• Now what?

– What are the categories of items?– What are the siblings of what I see?– What are the subcategories?

32

Local Navigation ‘03 vs ‘12

33

Local Navigation 2003

Secondary navigation is now

temporal

35

Local Navigation

36

Contextual navigation

• Inline links• Related items• Document management

37

Inline links

38

Related items

39

Pagination

Useful to reduce page download speed and cognitive overload.

Annoying for printing.

Impossible to predict what you’ll get

Users would rather scroll than click

40

Ad negotiation

41

Print/email/clip

42

Sort

43

Secondary Navigation

• Site Maps• Indexes• Table of Contents

44

Have you ever seen this page?

45

How about this one?

46

How about this one?

47

You can make it helpful“After testing several different sitemap designs on users, I decided to try putting one on every page of my small Columbian web site. I then decided to track how often it was used for navigation. It turns out the sitemap is used for over 65% of all navigation done on the site.” -- Usability Report by Peter Van Dijck of poorbuthappy.com (Guide to Columbia)http://www.webword.com/reports/sitemap.html

48

Conventions

It is certainly probable, then, that placing these objects in expected locations would give an e-commerce site a competitive edge over those that do not…

-- Examining User Expectations for the Location of Common E-Commerce

Web Objects

Usability News

4.1 2002

49

ConventionsIf 90% or more of the big sites do things in a single way, then this is the de-facto standard and you have to comply. Only deviate from a design standard if your alternative design has at least 100% higher measured usability.

If 60-90% of the big sites do things in a single way, then this is a strong convention and you should comply unless your alternative design has at least 50% higher measured usability.

If less than 60% of the big sites do things in a single way, then there are no dominant conventions yet and you are free to design in an alternative way.

-- Jakob Nielsen, November 14, 1999 Alertbox column

"Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson

50

Conventions

• Some things are becoming de rigor

• Deviate when you’ve got something better

• Not because you are bored

"Identifying De-Facto Standards for E-Commerce Web Sites“ © 2003 Heidi P. Adkisson

51

Now combine

• Follow expectations based on conventions• Design a hierarchy based on task

importance• Err on the side of simplicity

Homework

• Analyze two competitors, one complementor– Layout– Inputs/functionality– Groupings– Hierarchy– Trust/reassurance

Product (noun)

Buy (verb) Costs (adverb)

Look (verb)

Costs (adjective)

UNDERSTANDINGGraphic Design

Designing to Understand

Use• Hierarchy• Layout• Images• Type• Color• Line• Relationships• Progression

For• Importance• Sequence• Location• Reassurance• Motivation• Involvement• Seduction

WHAT IS THE SINGLE MOST IMPORTANT THING?

HIERARCHY GIVES CLARITY

Law of Focal PointThe idea that a point of interest, something emphasised or different will catch and hold the viewers attention (Chang, 2002).

LOOK

LOOK

LOOK

LOOK

LOOK

WHAT ORDER SHOULD I LOOK?

LAYOUTOrder and Composition

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/

TYPE

I am a serifed font

I am sans-serif

I am Times New Roman

Hey, I’m arial

I am Comic Sans

I am the devil

I am Impact

LOL

Display fonts aren’t readable

Use them only for titles.

(Hi, I’m Georgia, and I’m always welcome!)

COLOR

Cheaters Tricks

• One color, with variations. One accent. Period• Use a generator site

http://www.colourlovers.com/• Use nature

http://boxesandarrows.com/natural-selections-colors-found-in-nature-and-interface-design/

nature

IF PHOTO-HEAVY, USE LITTLE COLOR

LINE

Warm, hand drawn lines= Artisanal

Lines gently reinforce the grid = scientific

Simple lined Navigation = Artwork

Grid edged with lines=Modrian=Modern

RELATIONSHIPS

Which pair of pants are now 39.99?

Which car is 49.99?

If you are putting boxes around things to make it clear, you probably should start over

DIFFERENCE & CONTRASTSee http://contrastrebellion.com/

PROGRESSIONTake advantage of the medium

This is a very tall page

This one too

This is a long page

Flipboard moves in a variety of directions

Even if you use the “wrong” gesture, Flipboard reacts correctly.

GRAPHIC DESIGN HACKSFake it til you make it

Minimalist Design

• Only use one font. Preferably helvetica. • Only use three, all very very different. Perhaps a

fourth for footer text.• Only use one color, with variations, and one “accent”

color.• Turn on the grid (if you are using photoshop, etc)• Never align center.• Don’t use stock photography, unless you have

awesome taste. It has no soul.• Have a hierarchy

Cheats

• Patterns• Kits like this• Libraries• Odesk• Conference proceedings

You can’t buy taste

Homework

• Analyze two competitors, one complementor• Do wire frames for three key screens• Optional: begin interfaces