28. Legibility Header Sub Header Sub Sub Header Header Sub Header Sub Sub Header Lorem ipsum dolor sit amet consectetuer adipiscingnonummy nibh euismod tincidunt laoreet dolore magna aliquam erat volutpat. Utwisienim ad minim veniam, quisnostrudexercitationullamcorpersuscipitlobortisnislutaliquip ex ea commodoconsequat. Duisautemveleumiriure dolor in hendrerit in vulputatesolutanobiseleifend option conguenihilimperdiet doming id quod mazimplacerat facer possimassum. Typi non habentclaritateminsitam; estususlegentis in iis qui lectoreslegere me lius quod ii leguntsaepius. Claritasestetiamprocessusdynamicus, qui sequitur mutationemconsuetudiumlectorum. Mirumestnotare quam litteragothica, quam nuncputamusparumclaram, anteposueritlitterarum
29. Color Tips Analogous Colors (side by side) Complementary Colors (across) Triadic Colors (equilateral triangle) Quadratic Colors (corners of a box)
51. Recognition Over Recall Name Five US Supreme Court Justices… Clarence Thomas John Roberts Sonia Sotomayer Stephen Colbert John Stewart Sandra Day O’Connor David Souter Oprah Winfrey
52. Highlighting “Nobody asked your opinion,” said Alice. “Nobody asked YOUR opinion,” said Alice “Nobody asked your opinion,” said Alice “Nobody asked your opinion,” said Alice “Nobody asked opinion,” said Alice “Nobody asked your opinion,” said Alice Bold, Italics, Underlining Typeface Color Inversing Blinking Outline
53. Von Restorf Effect Grocery List Milk Butter Cheese Sugar Penguin Polar Bear Oranges Coffee Lettuce Flour Lemon
54. Ben Shneiderman Eight Golden Rules 1. Strive for consistency. 2. Enable frequent users to use shortcuts. 3. Offer informative feedback. Design dialog to yield closure. 5. Offer simple error handling. 6. Permit easy reversal of actions. 7. Support internal locus of control. 8. Reduce short-term memory load.
55. Jakob Nielsen Ten Usability Heuristics Visibility of system status Match between system and real world User control and freedom (undo/redo) Consistency and standards Error Prevention Recognition rather than recall Flexibility and efficiency of use (shortcuts for experts) Aesthetic and minimalist design Help users recognize, diagnose, and recover from errors Help and documentation
People understand and interact with systems and environments based on mental representations developed from experience.
This is the Story Setting
The personas and mental models help determine this.
This will help determine your aesthetics later
Map to flows for the user to accomplish each of their goals.Consider what information is needed to accomplish their goals.Ensure each flow meets the requirements set out earlier
A strategy for managing information complexity in which only necessary or requested information is displayed at any given time.Break complex steps into smaller sections limiting the amount of information the user needs to consume during any given step.
Mock up how each step of the flow will be laid out.
After an experience, all that matters is what is remembered. This is what people will tell others about their experience.As it turns out, people are good at remembering the beginning and end of events, but not the middle.As long as the arduous, difficult, and unpleasant aspects in the experience are sandwiched between two pleasant memories, the user will see the overall experience as pleasant.
The greater the effort to accomplish a task, the less likely the task will be accomplished successfully.
The time it takes to make a decision increases as the number of alternatives increases
As the flexibility of a system increases, its usability decreases.Make the choice for the user and keep it simple.
Beauty in design results from purity of function. Start by making it functional, then strip it down to it’s most simplistic form.
Given a choice between functionally equivalent designs, the simplest design should be selected.
Aesthetic designs are perceived as easier to use than less-aesthetic designs
Never go more then 3 levels deep in a hierarchyIf text is justified keep it to 10-12 words per line (assuming 9-12 pt font)Don’t use italics on textAny changes in font size should be at least 2pt size differenceUse grayscale shades to further separate headers from blending into eachotherNever use more than 2 Font faces together
Color is used in design to attract attention, group elements, indicate meaning, enhance aestheticsSaturation is the amount of Gray in a hueBrightness is the amount of white in a hueChoose 5 colors for your color schemeAvoid using colors for aesthetics if they conflict with colors being used to indicate meaningUse the Mood of the story to determine the colors to be used. Visit Colourlovers.com and find pre-made pallets for your color scheme.
Using patterns that people are already familiar with makes designs more usable.Repetition makes it easier for the user as it reduces the learning curve.
Create consistent styles for elements like headers, text, links, buttons
Choose a color that has a purpose, either to highlight, show chunking, show separation, balance, etc…
Gradients indicate a light source giving it attributes such as depth, which are seen in real life.Be consistent to the light source as changes in gradients are interpreted by the brain as they are in real life.
Shadows enhance the impression that a light source exists and that the object has attributes seen in the real worldTop-Down Lighting Bias: A tendency to interpret shaded or dark areas of an object as shadows resulting from a light source above the object.
Borders define boundaries and will accent and object.
Rounding a corner shows attention to detail just as crown molding accents the edges of a room in a house.Large Rounded corners give a softer impression to the user and are often preferred to some demographics.
The time required to move to a target is a function of the target size and distance to the target
A property in which the physical characteristics of an object or environment influence its function
A phenomenon in which perception and behavior changes as a result of personal expectations or the expectations of others.Halo effect – Employers rate the performance of certain employees more highly than others based on their overall positive impression of those employees.Hawthorne effect – Employees are more productive based on their belief that changes made to the environment will increase productivityPygmalion effect – Students perform better or worse based on the expectations of their teacherRosenthal effect – Teachers treat students differently based on their expectations of how students will performPlacebo effect – Patients experience treatment effects based on their belief that a treatment will work.Demand characteristics – Participants in an experiment or interview provide responses and act in ways that they believe are expected by the experimenter or interviewer
There are five ways to organize information: category, time, location, alphabet, and continuum
Hierarchical organization is the simplest structure for visualizing and understanding complexity
Memory for recognizing things is better than memory for recalling things.
Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
A phenomenom of memory in which noticeably different things are more likely to be recalled than common things.
Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
Bring attention to an area of text or image by highlighting no more than 10% of the visible design.
