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

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

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

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

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?

Poetics: Control, power, precision

Values: Lightweight, easy, sketchy, imprecise

WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?

Power, control, precision,

OmmWriter

Beauty, peace, zen

WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?

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

Interface Fundamentals

Design

Transcript of Interface Fundamentals

User Interface 4 Fundamentals - Jackson CollegeUser Interface 4. These course materials reflect the features and functionality present in UI 4.3. In this course, the instructor will

FUNDAMENTALS OF INTERFACE PHENOMENA IN ADVANCED BULK ... · Fundamentals of interface phenomena in advanced bulk nanoscale materials 45 Corresponding author: Alexander P. Zhilyaev,

Competition and the 99¢ Problem User Interface Fundamentals Threading/Timers Memory Management AuthenticationCryptography Devices GeolocationSensorsNFC.

Soil water fundamentals. Contact angle the angle at which a liquid-vapor interface meets a solid surface.

UIE Fundamentals - University of Illinois Springfield – UIS€¦ · web. In the UIE Fundamentals Series, User Interface Engineering brings such core con-cepts to the surface. The

Fundamentals in Adsorption at the Solid-Gas Interface. Concepts ...

5 Fundamentals of Interface Designs

WCDMA Air Interface Fundamentals

User Interfaces - Kalamazoo College · A graphical user interface (GUI) is a type of user interface that allows users to interact with electronic devices using images rather ... 10-Design-Fundamentals-1.

NX CAM Manufacturing Fundamentals · NX CAM Manufacturing Fundamentals General Information Description Day Description Monday Introduction and overview of the interface Looking at

Unified Payment Interface—An Advancement in Payment Systems · 3. Fundamentals of Unified Payment Interface (UPI) NPCI developed Unified Payment Interface (UPI) as a common interface

Chapter 7 Improving the User Interface Fundamentals of Java.

AN 835: PAM4 Signaling Fundamentals · 2019-09-23 · In many electrical interface standards such as the Attachment Unit Interface (AUI), the data rate can be derived from the roman

3ds max fundamentals interface primitives splines modifiers operation.

EE 4900: Fundamentals of Sensor Design 1...2 ECE 5900/6900 Fundamentals of Sensor Design Dr. Suketu Naik Interface Electronics (Part 2) Linearizing Bridge Circuits (Sensor Tech Hand

The GSM Air Interface Fundamentals and Protocols - Operating

Fiber Remote Multi-IPE Interface Fundamentals Avaya ...

Matlab Training Sessions 6,7: Plotting. Course Outline Weeks: 1.Introduction to Matlab and its Interface (Jan 13 2009) 2.Fundamentals (Operators) 3.Fundamentals.

Introduction Fundamentals of GUIs - FH Pforzheimeitidaten.fh-pforzheim.de/daten/mitarbeiter/blank... · Graphical User Interface: Evaluation Blankenbach / Pforzheim Univ. / / IT

Fundamentals of Computer Systems - cs.columbia.edusedwards/classes/2012/3827-fall/mips-uarch.pdf · ALU Interface and Implementation ... Fundamentals of Computer Systems - A Single