Don Norman’s Design Principles

Visibility

The more visible functions are, the more likely users will be able to know what to do next. In contrast, when functions are “out of sight,” it makes them more difficult to find and know how to use.

Feedback

Feedback is about sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity. Various kinds of feedback are available for interaction design-audio, tactile, verbal, and combinations of these.

Constraints

The design concept of constraining refers to determining ways of restricting the kind of user interaction that can take place at a given moment. There are various ways this can be achieved.

Mapping

This refers to the relationship between controls and their effects in the world. Nearly all artifacts need some kind of mapping between controls and effects, whether it is a flashlight, car, power plant, or cockpit. An example of a good mapping between control and effect is the up and down arrows used to represent the up and down movement of the cursor, respectively, on a computer keyboard.

Consistency

This refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks. In particular, a consistent interface is one that follows rules, such as using the same operation to select all objects. For example, a consistent operation is using the same input action to highlight any graphical object at the interface, such as always clicking the left mouse button. Inconsistent interfaces, on the other hand, allow exceptions to a rule.

Affordance

This term is used to refer to an attribute of an object that allows people to know how to use it. For example, a mouse button invites pushing (in so doing acting clicking) by the way it is physically constrained in its plastic shell. At a very simple level, to afford means “to give a clue” (Norman, 1988). When the affordances of a physical object are perceptually obvious it is easy to know how to interact with it.

Customer Development & Customer Interviews

Customer Development

Q:         How do we know a problem is worth solving?

A:         Through frequent interactions and iterations with users to build the best products.

Finding Customers

What types of people or groups do you want to target?

In what places or forums can you find these users?

Interview Tactics and Best Practices

Interview questions should be based on our assumptions.

Research Topic:             Music Streaming

Assumption:                 “Users would be more likely to stream music on a mobile device if they did not have to utilize their data.”

Hypothesis:                  “If users did not have to use their data to stream media from their mobile device, then they will be willing to pay a premium for that service.”

Questions should test your hypothesis.

Interviewing best practice

  • Ask open ended questions.
    • Closed Q – Are you a Risk Manager?
    • Open Q – What do you do for a living?
  • Avoid inserting biased in to Questions.
    • Positive Bias – Wouldn’t it be great if….?
    • Negative Bias – Are you frustrated when…?
    • Neutral Bias – How do you feel when…?
  • Explore and probe answers…
    • Tell me more about that….
    • Can you remember a time when that happened?
    • Why do you need that?
    • When do you need to do that?
    • How often does that happen?
  • Be an active listener.
  • Interview in-person
  • Ask permission to record the interview
  • Have questions prepared ahead of time.
  • Be respectful of time.

User Journey Research

The research should provide insights that will allow us to identify opportunities to engage our customers and inform the design and development processes for those engagements.

  1. Identify the moments and contexts to engage our audiences
    1. Assess the audience
      • Who are we serving?
      • What devices do they use?
      • What is their motivation and goal?
    2. Determine the audience’s context
      • What is their situation & location? (Location, movement, event, account data)
      • What is their emotional state or attitude?
      • What are their preferences & history?
    3. Design the engagement
      1. Engage the audience
        • What service will we provide?
        • What will it accomplish?
        • How will they find it?
      2. Calculate customer benefit
        • Does it improve the customer’s experience?
        • Does it accomplish a customer’s goal quickly and efficiently?
        • Is it convenient and enjoyable to use?
      3. Determine the value to FM Global
        • Does it accomplish our business goals?
        • Is it cost-effective? Does it drive revenue, client satisfaction or loyalty?
        • Are we committed to it for the long haul?
      4. Engineer our platforms, processes and people for the engagement
        1. Build Platforms
          • What systems will the engagement use?
          • Who will we need to work with to access the systems?
        2. Transform Processes
          • What processes will the engagement touch?
          • Where will the current process break down?
          • What changes will we have to make?
        3. Align People
          • What skills will we need?
          • Will our organization support the engagement?
          • Do we have the resources to make the changes?
        4. Analyze results to monitor performance and optimize outcomes.
          1. Identify the data you need
            • What are the business metrics?
            • What are the engagement metrics?
            • What are the technical Metrics?
          2. Determine if we’re ready to use it?
            • Can you collect the data?
            • Do you have the analysis tools?
            • Do you have the analytics expertise

Creating Interview Questions

Creating Interview Questions

  1. Who are my users?
  • Are they business users?
  • Job Functions / Roles
  • Demographic
  • Firmographic
  1. What are their habits?
  • What do they currently do?
  • What key tasks do they need to perform?
  • How do they complete those tasks?
  • What information do they need and how do they get it?
  • What do you do if you can’t find info/ complete task?
  1. Where are they accessing from?
  • Environmental context
  • Platform Context (Mobile, desktop, PDF)
  1. When do they need your product?
  • Is it a time of day?
  • During a big moment in there planning cycle?
  1. Why do they need your product?
  • Do other products not meet their needs?
  • Do other products exist to fit their needs?
  • How would they improve your product or other products?
  1. How do they access your product?
  • One time download
  • Web app, native app
  • Admin approver

Personas

Persona Definition

A single representation of a cluster of target users who represent similar behaviors, goals, and motivations.

Why do we need Personas?

To create products that are useful, usable, and desirable for our customers, we have to understand who our users are and what they need.

If we don’t understand our users…

We make decisions for ourselves (self-referential design).

We make decisions based on assumptions, or what we “think” we know.

Creating a persona

Creating Enterprise Personas

  • Review the organization chart to identify the actor roles
  • Identify the hero’s of the story and the supporting actors
  • Collect data that defines the role:
    • Position profiles describe their jobs
    • Performance Management documents may define role objectives and drivers of behavior

Define your goal and what are your research questions?

Insight categories – starter list…

  • Needs and Priorities
  • Goals
  • Motivations for using your product Processes, Behaviors & Habits
  • Pain Points
  • Tools and Technology

How many users should be interviewed or observed?

  • Talk to 5-30 participants
  • Trends are often observable from just 5 people
  • Law of diminishing returns applies
  • More than 5 will deepen your understanding
  • Identify extreme users

Analysis and Segmentation

  • Talk to SMEs to identify attributes that are important within the scope of use
    • Tenure
    • Geography
    • Occupancy
    • Education / Background
    • Technology competency
    • Demographics
    • Context (environments, devices, psychology)
  • Understand similarities and differences among each attribute
    • g. Technology – Low, medium, high?
  • Break down the attributes to identify patterns
    • Make a grid with common attributes across the top & participants down the side
    • Describe how each participant scores against each attribute
    • Compare and contrast data and identify the similarities

Persona building blocks

Biographical information

  • What: Contextual background and personal detail about the persona. Can include defining characteristics about persona segment.
  • Why: Makes persona relatable and realistic. Promotes empathy.

Goals, priorities, needs, expectations

  • What: What is important to the user in this domain?
  • Why: Helps us derive and prioritize features, and make decisions about interaction

Behaviors & habits

  • What: Contextual details about how they use the product. When, where, how often, unique usage patterns, workarounds.
  • Why: Helps us understand how people currently use the product and situational considerations we can apply to the product.

Frustrations and pain points

  • What: Describe the issues they are dealing with on a daily basis.
  • Why: Understand and react to the user’s state of mind. Be empathetic to their situations and difficulties when making design decisions.

Quote

  • What: A real quote from qualitative research that embodies that persona’s segment. This should reflect their attitude and behavior.
  • Why: Bring the user’s voice into the persona. Make them sound like a real person.
  • How: Extract single quote or combine multiple user comments to create believable quote. Don’t get too wordy.

Persona image guidelines

  • Choose images that look like real people
  • Avoid selecting images that include distractions
  • Avoid posed, model-like or studio photography
  • Avoid images that include too much stereotype

Check out these sites for free images

Prioritize Features & Ideas

Use personas to score different feature ideas.

  • Helps identify which features will useful for who.
  • Features that benefit more personas can help prioritization (coupled with other measurements biz value, feasibility and frequency of use)

Measurement framework could be:

  • -1: Hurts persona
  • 0: Persona is neutral
  • +1: Helpful to persona
  • +2: Persona LOVES this feature! It’s a must-have!

Application in Agile Teams

Story Mapping            Include personas in brainstorming and prioritizing

Sprint Planning            Use backlog persona tags to help determine user stories to pull

Daily Standup              Inform the team of any additional research or findings that have influenced the personas

Design Review             Cognitive walkthrough with personas

Backlog Grooming      Analyze prioritization matrix, and any changes in personas

Retrospective              Think in terms of persona needs & goals

Personas applied to usability testing

Recruiting the right users

  • Consider the characteristics that really matter to your product
  • Create screening questions that will allow for parsing into persona categories

Putting together your tasks

  • Leverage scenarios to write tasks – context, problems, processes
  • Prioritize key tasks

Presenting test results to stakeholders

  • Did a particular persona have significant problems with a task?
  • “Julies” experienced difficulty with the initial pages of registration

Segment web analytics by persona

Segment your analytics by personas

  • Validate assumptions made
  • Refine personas if new information is uncovered

Build segment filters

  • Select characteristics that are representative of that group of users.

Grid Systems

The Grid System

In graphic design, a grid is a structure of intersecting lines that serve to guide the layout of content. This framework is used to organize content in a rational, easy to process manner through the layout.

Not only do grids serve as a guide for positioning elements within a layout, they also help with responsive design (web pages must render well on a variety of devices, browser window sizes, and screen sizes). In short, grids assist designers in creating a unified structure. They speed up design and make it easier to align future elements against existing ones.

The Rule of Thirds

A common application of grids is “the rule of thirds.” This rule — often applied in photography — utilizes an invisible grid of two horizontal and two vertical lines. The important elements in the image should be placed along those lines or at the points at which those lines meet.

For instance, on the grid below the intersection points noted in red. In the photograph below the important element — the pineapple — is placed where the left two intersection points would be. To most, this layout is more interesting and appealing to the eye than a layout in which the pineapple is centered.

Phi (Golden Ratio 1.61803399)

The Golden ratio is a special number found by dividing a line into two parts so that the longer part divided by the smaller part is also equal to the whole length divided by the longer part.

The Golden Ratio determines the most pleasing set of proportions for an object and can be simplified by the ‘rules of thirds’. When the Golden Ratio is combined with a grid, rules for size, position and proportion can help a layout feel coherent and aesthetically appealing.

You can apply Phi to your design by taking the length or width of your page and dividing it by Phi.

The image below shows a horizontal and vertical split using this dimension.

Applying the Rule of Thirds & the Golden Ratio.

12 Column Grids

Common Breakpoints for responsive designs

Setting up a spacing system with units of 8 pixels

Set up a spacing system to create a consistent grid system.

Start by defining a base number for your grid.

Material Design principles use divisions of 8: 8px / 16px / 24px / 32px / 40px / 48px / 56px and so on for all padding / margin between elements (sometimes 4px if you need to go in tight).

You can use other base number like 5: 5  / 10 / 15 / 20 etc..

Creating Grids in Sketch using 8 px Units

Select Artboard

View menu > canvas > show rulers (if, not already showing)

View (icon top right) > show layout (lets you see grid on artboard)

View (icon top right) > layout settings (lets you define the settings

Columns

  • Total width = width of Grid.
  • Off set = if the width of the grid is less than the full width you divide the excess by two to center the grid – so…. Artboard width – Total Grid width / 2 = offset
  • Number of columns (Desktop = 12, Tablet 9” 12, Mobile 6)

Rows

  • Gutter height set as 4 (smallest division when using 8px unit base)
  • Row height set as 1

Desktop HD w1440 with 1248 Grid

Tablet 9” w768 with 720 Grid

iPhone 7 w375 with 360 Grid

Grid Further Reading

Grid Resources

 

 

Typography

Like other key design elements, typography matters. It can set a tone and mood, and even influence the meaning a reader draws from the text.

Font vs Typeface

A typeface is a family of fonts.

For example, Helvetica is a Typeface and within this font family  are fonts of varying weights and styles e.g. 12 pt Helvetica Bold.

There are 5 Typeface Families

Geometric Sans

  • Represents 3 different groups Geometric, Realist and Grotesk
  • Geometric Sans-Serifs are those faces that are based on strict geometric forms.
  • Examples of Geometric/Realist/Grotesk Sans: Helvetica, Univers, Futura, Avant Garde, Akzidenz Grotesk, Franklin Gothic, Gotham.

Humanist Sans

  • These are Sans faces that are derived from handwriting
  • Examples of Humanist Sans: Gill Sans, Frutiger, Myriad, Optima, Verdana.

Old Style (aka Venetian)

  • These are our oldest typefaces.
  • Examples of Old Style: Jenson, Bembo, Palatino, and — especially — Garamond

Transitional & Modern

  • Typefaces emerged as type designers experimented with making their letterforms more geometric, sharp and virtuosic
  • Examples of transitional typefaces: Times New Roman, Baskerville. Examples of Modern serifs: Bodoni, Didot.

Slab Serif (aka Egyptian)

  • They convey very specific — and yet often quite contradictory — associations.
  • Examples of Slab Serifs: Clarendon, Rockwell, Courier, Lubalin Graph, Archer.

Popular Type Faces

Sans Styles

  • Myriad
  • Gotham
  • DIN
  • Akzidenz Grotesk
  • Interstate

Sans Serif

  • Mercury
  • Electra
  • Perpetua

Anatomy of a Typeface

Ascenders, Meanline, Baseline & Descenders

Kerning, Tracking and Leading

Tracking is overall letterspacing.

Kerning is selective letterspacing.

Leading is the space between rows.

Choosing the right fonts

  1. Consider your brand & Audience
  2. Make sure it’s readable
  3. Factor in information hierachy
  4. Contrast font family & weights

Best Practices

  • Make sure the body copy is readable.  Readability has a lot to do with color contrast, character spacing, tracking, and leading.
  • Bold, sans-serif, all-caps works well for header text
  • Medium serif works well for body text.
  • To create visual hierarchy play with size, weight, color and position.
  • You can use just one typeface but useful to have different fonts to create information hierarchy
  • Break long text up with bulleted lists if possible
  • Chunk copy into sections with easily scanable sub-headers
  • Avoid single words on a single line at the bottom of a par (Widow) or at the top (Oprhan).
  • Point size is the size of the letters. In print, the most comfortable range for body text is 10–12 point. On the web, the range is 15–25 pixels. Not every font appears equally large at a given point size, so be prepared to adjust as necessary.
  • Line spacing is the vertical distance between lines. It should be 120–145% of the point size. In word processors, use the “Exact” linespacing option to achieve this. The default singleline option is too tight; the 1½ line option is too loose. In CSS, use line-height. The easiest way to calcualte is to multiply the font by 1.5 (16pt / 24, 21pt / 32, 24pt / 36 or 32pt / 48)
  • Line length is the horizontal width of the text block. Line length should be an av­er­age of 45–90 characters per line (use your word-count function) or 2–3 lowercase alphabet, like so:abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

Questions to evaluate Typefaces

  • How legible is it? Do the letterforms feel organic or more stylised or geometric?
  • How readable is it? Does it invite long-form reading, or is it more suited to headlines?
  • How flexible is it? Does it work in different sizes and weights? Does it function in both body copy and titles?
  • How unique is it? Is it memorable? Does it have interesting details? Does it have amazing numerals or an interesting looking lowercase g?
  • How classy is it? Does it feel elegant or more down-to-earth?
  • Has it been optimized for screen? Will it look good on Macs, PCs and mobile devices?

Creating a Design System for Typography

  • Header
  • Sub Heads
  • Intro Par
  • Body copy
  • by lines
  • Time Stamps
  • Grid definition (vertical and horizontal)

Tips

  • Most brands have existing Typefaces so best to refer to Brand toolkits or guidelines before selecting a new typeface for a client
  • Remember most typefaces cost money – each weight or style will add to the price tag
  • Some typefaces are designed specifically for Headlines (aka “display faces”.  Examples include, League Gothic, Mardrone, Didot, Grafolita, azo sans uber.
  • Use a reputable foundry to source your fonts. Adobe Subscribers can use Type kit to test various typeface’s weights and styles. Google Fonts (using free resources runs the risk of missing characters or punctuations
  • When selecting typefaces keep it exactly the same, or change it a lot!

Further Reading

Typography Resources

  • Fontface Ninja (a browser extension that lets you inspect, try, buy and bookmark any fonts on any website) https://fontface.ninja/
  • Kerntype (a font spacing game) by Mark MacKay for Method of Actions http://type.method.ac/
  • Google Fonts: hundreds of high-quality open-source web fonts. (You can download .ttf fonts by adding fonts to your collection and clicking the download arrow in the top right of the screen.)  http://www.google.com/fonts/
  • The League of Movable Type: a collection of high-quality open-source typefaces that are licensed for use on the web, and available for download as .otf font files. https://www.theleagueofmoveabletype.com
  • Typedia.com: A Shared Encyclopedia of Typefaces. Typedia is a resource to classify, categorize, and connect typefaces. Search for typefaces, designers, foundries, and more.

Color Theory

Color Theory 101

Hue – Color in its purest form.

Saturation – intensity of color expressed as the degree to which it differs from white.

Value – how light or how dark the color is.

Contrast

The degree to which colors differentiate from each other in terms of their hue, saturation and color.

If contrast is too high it can cause strain on the eye of the user.

If contrast is too low – low contrast limits legibility.

Color Wheel

Primary, Secondary & Tertiary Colors

Primary Colors are Blue, Red & Yellow

Secondary colors are created by mixing two adjacent primary colors.

  • Primary + Primary = Secondary
  • Blue + Yellow = Green
  • Red + Yellow = Orange
  • Blue + Red = Purple

Tertiary colors made by mixing Adjacent Primary and secondary colors.

  • Primary + Secondary = Tertiary Color
  • Blue + Purple = Blue Violet
  • Red + Purple = Red Violet
  • Red + Orange = Red Orange
  • Yellow + Orange = Yellow Orange
  • Blue + Green = Blue Green
  • Yellow + Green = Yellow Green

Color Combinations

Monochromatic

Light and dark values and tones of a single color.

Use tints, shades and tones as complementary colors.

Triads

Taking three colors that are adjacent from one-another.

Analogous

Taking three colors next to each other.

You choose a main color and then select the two colors either side.  If yellow was your main color you’d also have green and orange as your complementary colors.

Complementary

Two color on opposite sides of the pallet.

When placed together the boarder can look like its vibrating which can be jarring.  So break the colors up with neutral colors or find different tints and tones of the color to avoid this.

Split Complements

Taking one color and selecting the complementary colors either side of the color directly opposite.

Square Colors

The square color model takes four colors evenly spaced around the color wheel. In the example above, the colors are blue, orange, red-violet, and yellow-green. This color scheme is really nice and would work well with one strong color and muted versions of the other colors.

Tetradic Colors

Tetradic color schemes are built by creating a rectangle on the color wheel. Select two opposites on the color wheel and then select another color two spaces over and its compliment across the color wheel.

Tints & Shades

A tint of a color is when you take a color, such as blue, and add white to it. A shade is a hue that has black added to it. You can create a monochromatic color scheme buy using tints and shades of the same hue.

Warm Colors

Warm colors (Red > Yellow) create a sense of warmth and heat in an image or a design. When you see warm colors, you think of the sun, heat, fire, and love (passion). Red is the color of blood, which is warm, and orange and yellow go along with summer. Adding an orange photo filter to an image instantly makes it look warmer and happier.

Cool Colors

Cool colors (Purple > Green) carry connotations of cool climates, winter, death, sadness, ice, night, and water. Cool colors can be associated with calmness, tranquility, trust, cleanliness. Purple is associated with royalty, because they are supposed to be reserved.

Psychology of Color

Red. It symbolizes both good and bad feelings including love, confidence, passion, and anger.

Orange. An energetic and warm color bringing the feelings of excitement.

Yellow. This is the color of happiness, the sunlight, joy, and warmth.

Green. The color of nature which brings calming and renewing feelings.

Blue. It often represents some corporate images. May be associated with distance and sadness.

Purple. Long associated with royalty and wealth. It’s also a color of a mystery and magic.

Black. It associates with a tragedy and death and signifies a mystery. At the same time, it can be traditional and modern.

White. The color means purity and innocence, as well as wholeness and clarity.

Selecting UI Colors

A simple strategy for selecting web pallet is to select a hero image and accent color and support with neutrals.

This pallet would look like this:

  • Hero Color
  • Accent Color
  • White
  • Dark gray
  • Light gray

Color Tools

Further Reading

Visual Design Resources

TYPES & FONTS

  • Google Fonts: hundreds of high-quality open-source web fonts. (You can download .ttf fonts by adding fonts to your collection and clicking the download arrow in the top right of the screen.)  http://www.google.com/fonts/

COLOR

GRIDS

PHOTOGRAPHY

The following are a few collections of free high-quality images that you may download and incorporate into your designs.

ICONS & SYMBOLS

  • FontAwesome: a web-friendly, open-source icon font. You will need to open “glyphs” under the type menu in Illustrator to access these icons.  http://fontawesome.io/
  • The Noun Project: another source for creative commons (open-source) icons. You will need to search for individual icons and download them one at a time as either png files if you are working in Photoshop, or svg files if you are using Illustrator. To gain free access to these icons, you will need to create an account and agree to attribute the icon designer in your design. For the purposes of this class, you may assume that your client would pay for the icon, so attribute the icon designer in your presentation deck, not in your polished landing page design.  http://thenounproject.com/
  • Material Design Baseline Icons: https://material.io/tools/icons/?style=baseline
  • Font Awsome Icon Cheatsheet: https://fontawesome.com/cheatsheet?from=io

VISUAL DESIGN INSPIRATION

 

Goal Setting Framework

Simple framework for setting goals and work out how to achieve them.

1. Define the Goal
– what I want to achieve?
2. Identify the Benefits
– What will I get from achieving this goal?

3. Action steps for achieving this goal
– The things I must do to achieve this goal
– Target dates for completing the action

4. Obstacles & Solutions
– What are the obstacles that could interfere with the goal being achieved?
– What are the ways to remove these obstacles from the path?

5. Methods of tracking purpose
– How will I know I’m making progress

6. Return on investment
– Is this goal worth the time, effort and Money?
– Yes
– No
– Yes, but later
– Today’s date

7. When did you achieve the goal?
– Target Date
– Date Achieved