Interface Fundamentals
Upcoming SlideShare
Loading in...5
×
 

Interface Fundamentals

on

  • 6,510 views

From Stanford BUS 40: User Experience Design for the NonDesigner ...

From Stanford BUS 40: User Experience Design for the NonDesigner

How do we get from task flows to interface screens? How do we make sure they are clear and effective?

Covering key design ideas when designing the user interface.

Statistics

Views

Total Views
6,510
Views on SlideShare
6,468
Embed Views
42

Actions

Likes
70
Downloads
148
Comments
0

6 Embeds 42

http://computerstories.net 23
https://twitter.com 9
http://www.google.com 6
http://www.pinterest.com 2
https://www.linkedin.com 1
http://slideshare.neatcn.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 2 songs (jazz) <br />
  • You can change the same kind of software with different values <br />
  • You can change the same kind of software with different values <br />

Interface Fundamentals Interface Fundamentals Presentation Transcript

  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike @cwodtke INTERFACE DESIGN FUNDAMENTALS
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike “Like putting an Armani suit on Attila the Hun, interface design only tells how to dress up an existing behavior.” – Alan Cooper
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike A framework is the way elements will be organized on a page for use and understanding View slide
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike From last week’s homework 5min View slide
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 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
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Each task could have a page
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike First Yahoo 1994 1995: first graphic logo Remind you of something?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Including the schedule creator tool…
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Wizards: Many boxes, many pages
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike When to Use Wizards • Multi step process • Must be completed in order • The audience is not technically savvy • Bandwidth is low
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What if we put the tasks with the thing they were modifying?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike It’s a toolbar Tools here Item affected here
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Toolbars Tools here Item affected here And here And here Photoshop: toolbars on steroids
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike The web uses toolbars more sparingly
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike ToolbarsTools here Item affected here A simpler design is better for infrequent use.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike What other ways can we organize elements? Control Panels? Carousels? Thumbnail<-> Full Size?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 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)
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH PAIR OF PANTS ARE NOW 39.99?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHICH CAR IS 49.99?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Why is the response so far from the invitation?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 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.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike • 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
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike IF YOU ARE PUTTING BOXES AROUND THINGS TO MAKE IT CLEAR, YOU PROBABLY SHOULD START OVER
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 Minutes
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike BUTTONS HAVE MEANING
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike LINKS HAVE MEANING
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Subtlety will send you to the poor house. Tell your users what to do. Clarity is relaxing, not annoying.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 10 Minutes
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike On the product page (apples!) For the company to succeed 2 minutes
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 5 minutes
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike PAINTING
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 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/
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM TIMES NEW ROMAN Hey, I’m Arial
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM COMIC SANS I am the devil
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike I AM IMPACT LOL
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Georgia is always welcome
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 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.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 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.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike to be greAt is to be misunderstood.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 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.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike To be great is to be misunderstood.
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike NATURE
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK ABOUT WHEN YOU THINK OF A PAINTING PROGRAM?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 92 Poetics: Control, power, precision
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 93 Values: Lightweight, easy, sketchy,
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF WRITING?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 96 Power, control, precision,
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 97 mWriter uty, peace, zen
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike 98
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike WHAT DO YOU THINK OF WHEN YOU THINK OF SOCIAL?
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike
  • @cwodtke | cwodtke.com | eleganthack.com | boxesandarrows.com | Creative Commons Share Alike Q&A "In an architecture of content, the information becomes the interface." -- Edward Tufte