Joel Spolsky on Interface Design

Prepared by Mithat Konar

2011–11–14

Joel Spolsky on Interface Design

Controlling your environment

Controlling your environment

Figuring out what users expect

Figuring out what users expect

Figuring out what users expect

Figuring out what users expect

Identifying the user model

Model complexity

Model complexity

User model: clicking Spreadsheet 1 brings it to the top

Model complexity

Program model: “invisible sheets”

Choices

Choices

Choices

Choices

Choices

Choices

Metaphors and Affordances

Metaphors and Affordances

Metaphors and Affordances

Metaphors and Affordances

Metaphors and Affordances

Metaphors and Affordances

Metaphors and Affordances

Metaphors and Affordances

Metaphors and Affordances

Consistency

Consistency

Consistency

Consistency

Manuals and instructions

Manuals and instructions

Manuals and instructions

Manuals and instructions

Manuals and instructions

Manuals and instructions

Manuals and instructions

Manuals and instructions

Pointing

Pointing

Minimum-memory principle

Minimum-memory principle

Minimum-memory principle

Compare

to …

Minimum-memory principle

Minimum-memory principle

The design process

The design process

The design process

The design process

Function-based version of app

  1. Add text to card
  2. Add picture to card
  3. Get predesigned card from library
  4. Send card:
    1. Using email
    2. By printing it out

The design process

Activity Based Planning version

Top three activities:

  1. Birthday greeting → Sending a birthday card
  2. Party invitation → Planning a party
  3. Anniversary greeting → Sending an anniversary card

The design process

Activity Based Planning version

Reflection of activities into UI:

The design process

The design process

Endnotes

1 “Metaphor - Definition and More from the Free Merriam-Webster Dictionary.” Dictionary and Thesaurus - Merriam-Webster Online. http://www.merriam-webster.com/dictionary/metaphor (accessed November 14, 2011).

2 “Usability First - Usability Glossary - affordance | Usability First.” Usability First: Usability in Website and Software Design. http://www.usabilityfirst.com/glossary/affordance/ (accessed November 14, 2011).