Wireframes and Prototypes

The third course in my certification is called “Build Wireframes and Low-Fidelity Prototypes.”

Grade: 100%

Here are a few highlights and notes from what I learned.

Key Takeaways

Creating low-fidelity prototypes on paper can help iterate on many ideas quickly. They’re great for in-person teams, but harder with remote workers because of the barriers for real-time collaboration. Deceptive patterns are unethical and should be avoided at all times.

Understanding Information Architecture

  1. Organization – how pieces of information connect in a product
  2. Hierarchy – “tree structure” larger categories placed as the top and specific categories placed under
  3. Sequence – enables users to move through an app via certain orders/steps

8 Basic Principles

  1. Object – view your content as “living” – changes over time
  2. Choice – people think they want many, but actually need fewer
  3. Disclosure – info should not be unexpected or unnecessary
  4. Exemplar – humans put things into categories and groups together
  5. Front door – people usually arrive at the home page from another website
  6. Multiple Classification – people have different ways of searching for information
  7. Focused Navigation – must be a strategy/logic behind menu/navigation design
  8. Growth – amount of content will grow over time

Benefits of Paper Wireframes

  • Fast
  • Inexpensive
  • Explore lots of ideas

Digital Wireframes

  • Use actual content for important text
  • List actual text labels below links
  • Use placeholder text for large text
  • Don’t use expressive content

Gestalt Principals

  • Similarity
  • Proximity
  • Common region

Create Low-fidelity Prototypes on Paper

Prototype – early model of a product that demonstrates functionality.

Low-fidelity Prototype – a simple, interactive model that provides a basic idea of what the product could look like.

Reverb app hand drawn wireframe
Reverb app wireframe

Benefits of Paper Prototypes

  • Inexpensive
  • Rapid iteration
  • Low committment
  • Encourage honest feedback
  • Collaborative activity

Drawbacks of Paper Prototypes

  • Hard to interpret
  • Tested in person
  • Difficult with a remote team

Deceptive Patterns

  • Forced continuity
  • Sneak into basket
  • Hidden costs
  • Confirm shaming
  • Urgency
  • Scarcity