1 / 18

A Few Design Ideas

A Few Design Ideas. F1, Ctrl+Alt+Del , Alt Tab. “Is the side navigation menu a dead feature?”. New Words. Hangry Larping Scratchiti Histrionics Geotagging Floordrobe. Invent a new word and put it on your card. Geniass – smart but, don’t get over-confident.

evers
Download Presentation

A Few Design Ideas

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. A Few Design Ideas

  2. F1, Ctrl+Alt+Del, Alt Tab “Is the side navigation menu a dead feature?”

  3. New Words • Hangry • Larping • Scratchiti • Histrionics • Geotagging • Floordrobe Invent a new word and put it on your card. Geniass – smart but, don’t get over-confident. Assfixianado – Specialist in your own mind. Lamely – Laemmle theater is snobby but I still like to see a movie there. Dumbolina, Stupidica – not nice names for daughters. Nagules – person who nags like Hercules. itis – an affliction postfix

  4. The Big 4 • Contrast, Repetition, Alignment & Proximity • C – Contrast – make different things look different • Make things that are not the same, clearly different. • This doesn’t mean black and white. • Pulls the user to what you want them to do because a visual clue is there. • The dominant feature should be apparent. • R – Repetition • Reuse same or similar elements throughout the design. • Gives a sense of place to the user. • Adds unity and cohesiveness to the design.

  5. The Big 4 Contd. • A – Alignment • Nothing should look randomly placed. • Everything is connected via invisible lines. • Centered is usually ugly and tiring on the eyes. • No Alignment = Visual Ambiguity. • P - Proximity • Put like things together (chunking) so it is easier to digest. • Space between things that make it easier to understand.

  6. Proximity Example Ruth Guthrie (909) 869-4958 Cal Poly Pomona W. Temple Pomona, CA Ruth Guthrie (909) 869-4958 Cal Poly Pomona W. Temple Pomona, CA Cal Poly Pomona Ruth Guthrie W. TemplePomona, CA(909) 869-4958 Cal Poly Pomona Ruth Guthrie W. TemplePomona, CA(909) 869-4958

  7. Chunking • Psychology • George Miller, 1956 “The Magical Number Seven” • 7+ 2

  8. Chunking Example

  9. Examples of CRAP • Disney Concert Hall • http://solarsystem.nasa.gov/kids/ • Drive the Mars Rover • Udacity • Lance Armstrong • Augmented Reality Business Cards

  10. Donald Norman • Father of HCI • “When a simple thing needs pictures, labels or instructions, the design has failed.” -- The Design of Everyday Things (p. 9)

  11. Affordances • Affordances: “design aspect of an object which suggest how the object should be used; a visual clue to its function “ • http://www.interaction-design.org/ • What is it for? What can I do with it? • What does it do? • What current state is it in? • How do I operate it?

  12. Web Affordances • Web • What is this site for? • What can I do here? • What should I do here? (What the designer tells you) • Web Affordances • Animation • Color • Shapes • Text • Button • Menu • Sound • Logo

  13. What are you doing here? • Where does your eye go? What are you drawn to? What does the designer want you to do on the page? • Auto Club (aaa.com) • Turkish Air (turkishair.com) • LAUSD • Google Maps • Fatify / Barbie

  14. Schneiderman “Eight Golden Rules of UID” • Strive for consistency • Enable frequent users to use shortcuts • Offer informative feedback • Design dialog to yield closure • Offer simple error handling • Permit easy reversal of action • Support internal locus of control • Reduce short term memory load

  15. Rule of Thirds

  16. Anthropomorphic Design • http://www.youtube.com/watch?v=cO1xxafO59Y

  17. Context / Culture • Clean • Al Jazeera • China World Journal • KoreaDaily • France • Los Angeles • Madegascar Tribune

  18. HTML5 & CSS Makes Design so Easy and Expected that none of it Matters

More Related