Pancake/French Toast/UX: Difference between revisions

Latest revision as of 21:53, 2 October 2012

Design

Design Approach

Job-to-be-done

Every good app is designed around a core job. This job is the reason a you open the app.

On devices like iPad and iPhone, the importance of the job-to-be-done is critical. Where one app ends and another begins hinges on the job you need to do.

French Toast's job-to-be-done is:

“Help me find what I’m interested in”.

Everything in Pancake is designed around this job. It’s what the user hires Pancake to do.

From that starting point, a few complimentary jobs become immediately obvious:

“I want to collect things I find”
“I want to organize what I’ve collected”
“I want to share my collections”
“I want to follow what I find”

...Not to be confused with “give me something to read”. This job-to-be-done appears to be similar, but has very different implications.

Find + curate: active, creative, goal-oriented, lasting.

vs

Read + consume: passive, aimless, disposable.

An app’s core job-to-be-done determines the way you approach it’s design.

Two apps may have similar features, but different core jobs, demanding a radically different approach to the user experience.

Design themes

We've designed French Toast around some core user experience principles:

Don't do what I say, do what I mean

Do use search and intelligent interpretation to help users arrive where they want to be. Don’t present the user with tedious, error-prone tasks. That’s what computers are for.

You call the shots

Pancake learns to deal you a good hand, but you always hold the trump card. If you don’t like the way Pancake organizes things, you can change it. If you like your desk messy, Pancake won’t mess with it. Pancake is polite. It will never fight you.

Search is about exploring

Google search feels like a spreadsheet. Boring.

Exploring is fun on touch devices.

Let’s make search results dashboards for your question. Terms are intelligently interpreted to display custom widgets, tailored to the data.

Search tabs allow the user to view the results through different lenses.

Don't type, tap

Typing on touch devices is hard. If the user has invested time in typing out a search, we make sure they don't have to do it all over again.

A search timeline offers an easy way to hop between searches. Pinning makes it easy to curate the things you do find, and share them with others.

No blind decisions

Don’t force me to choose before I understand what I’m choosing.

What does a blind decision feel like? Try installing a typical Facebook app:

 Computer: "I want access to your private life"
 You: "Why?"
 Computer: "..."
 Computer: "Skip this?"
 You: "Yeah, definitely skip this."

Or, take folders: I have to create the folder before I have something to put in it. Tags avoid this problem by presenting the choice at the moment you need it.

Choices should always be in context.

Privacy is tied to identity

People aren’t angry at Facebook because data is public. People are angry because they don’t know what is public.

It’s not about public/private. It’s about having a simple, trustworthy mental model for what you look like to others.

When I say privacy, I mean how do others see me?

Good privacy is making it straightforward to understand what is associated with your identity. Privacy means showing you exactly what you look like to the world.

Everything in Pancake is anonymous, unless you broadcast that you like it (pinning).

Cross-pollination

Social features in Pancake are about finding new and interesting things on the web by following people and Boards.

Tutorials suck

Good UX is self-teaching. It introduces you to concepts in the app one-by-one, building on previous experience. There should never be a moment where you don’t feel productive.

The first time you launch the app, it should present you with just one concept: the core job-to-be-done.

As you use the app, further concepts unfold. Building a user experience this way tells the user what the app is about, and how it fits into their lives.

Doing this without sitting the user down for a tutorial is a bit of an art form.

Content is King

The content is what you came here for.

When you’re browsing content, the rest of Pancake should fade to the background, and leave you with the best possible viewing experience.

This means full-screen browsing + native media viewers. Special views for special content.

First-run and self-teaching UX

Good UX is self-teaching. It introduces you to concepts in the app one-by-one, building on previous knowledge. Doing this without sitting the user down for a tutorial is kind of an art form, and it's crucial to get it right.

The first time you launch the app, it should present you with one concept and that concept should fit the job-to-be-done: "search". As you use the app, further concepts unfold. Here is our initial first-run path:

Search (nothing else is really on the screen)
Search dashboard loads, search tabs on the left.
Click on a result, viewer launches.
Home (search appears in timeline)

At this point, we've familiarized the user with the 3 levels of Pancake.

@@ Line 1: / Line 1: @@
-== French Toast ==
+== Design ==
-French Toast is our code name for Pancake's next-generation user interface.
+{|
+|-
+| [[File:French-toast-feed-concept.c.01.png | thumbnail | none | baseline]] || [[File:French-toast-type-ahead-concept.c.01.png | thumbnail | none | baseline]] || [[File:French-toast-type-ahead-concept-2.c.01.png | thumbnail | none | baseline ]]
+|-
+| [[File:French-toast-search-concept.c.01.png | thumbnail | none | baseline]] || [[File:French-toast-history-concept.e.05.png | thumbnail | none | baseline]]
+|}
+== Design Approach ==
+=== Job-to-be-done ===
+Every good app is designed around a core job. This job is the reason a you open the app.
+On devices like iPad and iPhone, the importance of the job-to-be-done is critical. Where one app ends and another begins hinges on the job you need to do.
+French Toast's job-to-be-done is:
+'''“Help me find what I’m interested in”.'''
+Everything in Pancake is designed around this job. It’s what the user hires Pancake to do.
+From that starting point, a few complimentary jobs become immediately obvious:
+* “I want to collect things I find”
+* “I want to organize what I’ve collected”
+* “I want to share my collections”
+* “I want to follow what I find”
+...Not to be confused with “give me something to read”. This job-to-be-done appears to be similar, but has very different implications.
+'''Find + curate''': active, creative, goal-oriented, lasting.
+vs
+'''Read + consume''': passive, aimless, disposable.
+An app’s core job-to-be-done determines the way you approach it’s design.
+Two apps may have similar features, but different core jobs, demanding a radically different approach to
+the user experience.
 === Design themes ===
-Every good app is designed around a core job. This job is the reason a you open the app. On devices like iPad and iPhone, the importance of the job-to-be-done is critical. Where one app ends and another begins hinges on the job you need to do. French Toast's job-to-be-done is "help me find ''x''". To make this happen, we're focusing on creating a brilliant search and curation experience.
+We've designed French Toast around some core user experience principles:
+==== Don't do what I say, do what I mean ====
+Do use search and intelligent interpretation to help users arrive where they want to be. Don’t present the user with tedious, error-prone tasks. That’s what computers are for.
+==== You call the shots ====
+Pancake learns to deal you a good hand, but you always hold the trump card. If you don’t like the way Pancake organizes things, you can change it. If you like your desk messy, Pancake won’t mess with it. Pancake is polite. It will never fight you.
+==== Search is about exploring ====
+Google search feels like a spreadsheet. Boring.
+Exploring is fun on touch devices.
+Let’s make search results dashboards for your question. Terms are intelligently interpreted to display custom widgets, tailored to the data.
+Search tabs allow the user to view the results through different lenses.
+==== Don't type, tap ====
+Typing on touch devices is hard. If the user has invested time in typing out a search, we make sure they don't have to do it all over again.
+A search timeline offers an easy way to hop between searches. Pinning makes it easy to curate the things you do find, and share them with others.
+==== No blind decisions ====
+Don’t force me to choose before I understand what
+I’m choosing.
+What does a blind decision feel like? Try installing a typical Facebook app:
+  Computer: "I want access to your private life"
+  You: "Why?"
+  Computer: "..."
+  Computer: "Skip this?"
+  You: "Yeah, definitely skip this."
+Or, take folders: I have to create the folder before I have something to put in it. Tags avoid this problem by presenting the choice at the moment you need it.
+Choices should always be in context.
+==== Privacy is tied to identity ====
+People aren’t angry at Facebook because data is public. People are angry because they don’t know what is public.
+It’s not about public/private. It’s about having a simple, trustworthy mental model for what you look like
+to others.
+When I say privacy, I mean how do others see me?
+Good privacy is making it straightforward to understand what is associated with your identity. Privacy means showing you exactly what you look like to the world.
+Everything in Pancake is anonymous, unless you broadcast that you like it (pinning).
+==== Cross-pollination ====
+Social features in Pancake are about finding new and interesting things on the web by following people and Boards.
+==== Tutorials suck ====
-We've designed French Toast around some core user experience mantras:
+Good UX is self-teaching. It introduces you to concepts in the app one-by-one, building on previous experience. There should never be a moment where you don’t
+feel productive.
-* '''"Don't do what I say, do what I mean"'''. Use search and intelligent interpretation to help users arrive at what they mean. Instead of presenting the user with error-prone tasks like typing in a URL, why not give them helpful hints with type-ahead search?
+The first time you launch the app, it should present you with just one concept: the core job-to-be-done.
-* '''Search is about exploring'''. Exploring is fun on touch devices. Topical search pages become dashboards for your query, presenting different types of ''widgets'', relevant to the ''type'' of search you're doing. Search terms are intelligently interpreted to present information that is ''related'', even if the information is not a text match. Search tabs allow the user to view results for their query through different lenses.
-* '''"Don't make me type"'''. Typing on touch devices is hard. If the user has invested the time to type out a search, we need to make sure they don't have to type it again. A search timeline offers an easy way to hop between searches. Pinning makes it easy to curate the things you do find, and share them with others.
-* '''Privacy is tied to identity.''' Privacy isn't a switch switch you toggle. When I say ''privacy'', I mean ''how do others see me?'' Privacy means making it obvious what is associated with your identity. Some things I want to keep to myself, other things I want to share with the world. Tell the world I think something is cool, that endorsement changes the way people see me. Everything is anonymous (private) unless you broadcast that you like it (pinning).
-* '''Cross-pollination'''. Social features in Pancake are about finding new and interesting things on the web by following People and Boards (curated topics).
-=== First-run and Self-teaching UX ===
+As you use the app, further concepts unfold. Building a user experience this way tells the user what the app is about, and how it fits into their lives.
-Another goal for the user experience is that it be self-teaching. The first time you launch the app, it should present you with one concept and that concept should fit the job-to-be-done: "search". As you use the app, further concepts unfold and you become familiarized with them. Here is our initial first-run path:
+Doing this without sitting the user down for a tutorial
+is a bit of an art form.
-# Search (nothing else is really on the screen)
+==== Content is King ====
-# Search dashboard loads, search tabs on the left.
-# Click on a result, viewer launches.
-# Home (search appears in timeline)
-At this point, we've familiarized the user with the 3 levels of Pancake.
+The content is what you came here for.
-=== Design Files ===
+When you’re browsing content, the rest of Pancake should fade to the background, and leave you with the best possible viewing experience.
-* [[File:French-toast-wireframe-artboard.pdf]]: a wireframe artboard exploring French Toast's UX concepts.
+This means full-screen browsing + native media viewers.
-* [[File:French-toast-ux-animated-wireframe.tar.gz]]: An early animated keynote wireframe exploring interactions in French Toast.
+Special views for special content.
-=== Search Page ===
+=== First-run and self-teaching UX ===
-The goal for search is to make finding and exploring easy. In addition to no-nonsense search-via-tabs, the search overview dashboard aims to be like the front page of a newspaper for your given search term.
+Good UX is self-teaching. It introduces you to concepts in the app one-by-one, building on previous knowledge. Doing this without sitting the user down for a tutorial [http://www.auntiepixelante.com/?p=465 is kind of an art form], and it's crucial to get it right.
-We try to identify the following concepts, using them to present information in helpful ways.
+The first time you launch the app, it should present you with one concept and that concept should fit the job-to-be-done: "search". As you use the app, further concepts unfold. Here is our initial first-run path:
-* People
+# Search (nothing else is really on the screen)
-** Flickr/Instagram
+# Search dashboard loads, search tabs on the left.
-** Twitter, etc
+# Click on a result, viewer launches.
-* Places
+# Home (search appears in timeline)
-** Maps
-** Local suggestions
-* Events
-** News headlines/articles
-In addition, we have special ways to display:
+At this point, we've familiarized the user with the 3 levels of Pancake.
-* Your stuff (boards, pinned places, frequently visited) -- this is always first.
+== Subpages of {{FULLPAGENAME}}==
-* Stuff friends have pinned
+{{Special:PrefixIndex/{{FULLPAGENAME}}/}}
-* Web results
-* Graph results
-* Social network results
-* Media (video/images)