iPhone wireframes

Leopoldo Basanez | Karmin Mauritz | Sam Ryan | Hannah Sherwood

NOTES

Findings Wireframes

Splash/loading screen Log in1. The logo doesn’t appear elsewhere in

the design, so this splash screen is a good place for it. Like most apps, we’ll rely on the visual language of the UI once people have opened it.

The HIG recommends showing an empty interface instead of a full-on splash screen, as a way of improving the apparent speed of the app and letting the user see what they’re about to navigate with. See the difference between Sparrow and Draw Something, for example.

2. On first launch, you can explore the app without logging in or signing up. When you click on anything that requires an account, though, you see this modal window pop up asking you to log in.

1

10:00 AMCARRIER 3G

Stream Add Clip Me

All Clips Following

|

Password

Q W E R Y U I O P

A S D F G H J K L

Z X C V B N M

.?123 space Done

T

Log InSign Up

Log In10:00 AMCARRIER 3G

Cancel2

NOTES

Findings Wireframes

Create an account Set up profile1. Brings up an action sheet: log in to

Tumblr, Instapaper, Twitter.

Password

Full Name

Sign UpCancel

Email

|

Q W E R Y U I O P

A S D F G H J K L

Z X C V B N M

.?123 space Done

T

Sign Up Cancel

10:00 AMCARRIER 3G 10:00 AMCARRIER 3G

Edit Profile Done

Take Photo

Edit your biography...

Sharing Services1

NOTES

Findings Wireframes

Global Stream Global Stream Search/RefreshThe basic interface model of the app, once you log in, is a set of three hierarchical views accessible through a tab bar. (Similar to the official Twitter app.) The tab bar is almost always visible.

1. Pulling down on the global stream page will reveal a segmented controller that lets the user switch between all clips and clips from the people they follow.

2. Pulling a little farther reveals a search box, as in Mail.app. Pulling past the search box reveals a pull-to-refresh control, as in Twitter.app.

3. Swiping a clip cell to the right will reveal the user’s profile picture, swiping far enough will take you straight to their profile page.

Tapping on a clip takes you to a detailed view of that clip (see next page).

10:00 AMCARRIER 3G

Stream Add Clip Me

This underscores the larger problem

with how so many companies in the

entertainment industry think...

The kernel, the soul—let us go

further and say the substance, the

bulk, the actual and valuable...

Familiarity may or may not breed

contempt, but it certainly seems to

stifle creativity.

Companies strive to make their

products “viral” and “sticky” so that

“users keep coming back” to...

found by LUCASWIMAN - May 11, 2012

found by DESIREE - May 11, 2012

found by LUCASWIMAN - May 11, 2012

found by JBRIGGS - May 11, 2012

10:00 AMCARRIER 3G

Search

Releaseto refresh

All Clips Following

This underscores the larger problem

with how so many companies in the

entertainment industry think...

The kernel, the soul—let us go

further and say the substance, the

bulk, the actual and valuable...

Companies strive to make their

products “viral” and “sticky” so that

“users keep coming back” to...

found by LUCASWIMAN - May 11, 2012

found by DESIREE - May 11, 2012

found by LUCASWIMAN - May 11, 2012

Stream Add Clip Me

1

2

3

All Clips Following

NOTES

Findings Wireframes

Individual clip view (top) Individual clip view (bottom)1. Almost every piece of content on the

site is too long to fit comfortably in an iOS title bar - instead of truncating the item’s actual title, we’ve opted for the generic name.

2. This Share button brings up an action sheet with the same sharing options as the website: Tumblr, Twitter, Facebook, link, cancel.

3. Hashtags and user names are clickable and behave as you’d expect, taking you to either the user profile page or a stream of search results for that hashtag. If you click on one of your notes, it brings up an action sheet that lets you delete the note.

4. On your own clips, there will be an “Edit Clip” button here that brings up an action sheet: make private/public, delete, cancel.

10:00 AMCARRIER 3G

Stream Add Clip Me

ClipStream

“This underscores the larger problem with how so many companies in the entertainment industry think about piracy. Instead of thinking about the ways lack of access to media creates opportunity for piracy, and how increasing the access to products could help stave off illegal downloads, too often people want to take legal measures or implement digital protection on their products. These “fixes” always have easy work-arounds.”

from the web - May 11, 2012

From:

HBO Has Only Itself To Blame For Record ‘Game of Thrones’ Piracy - Forbes by Erik Kain - Forbes

HBO Has Only Itself To Blame For Record ‘Game of Thrones’ Piracy - Forbes by Erik Kain - Forbes

10:00 AMCARRIER 3G

Clipped by:

lucaswimanLucas Wiman

Notes:

Add Note

This is an example note. #meta

5 minutes agoSam Ryan

1 2

3

Refind this Clip 4

ClipStream

Stream Add Clip Me

NOTES

Findings Wireframes

Source page User profile / Me1. Clicking “Read” on a source page

brings up the same options as on the website, depending on the kind of source you’re looking at: view web page, send to Instapaper/Readability, find on Google Books, find in a library, buy on Amazon. (Although Apple has complex rules about purchases, it appears that you can link to the Amazon web store in a webview or in Safari.)

2. On your own profile, Follow/Unfollow is replaced by an “Edit” button. Clicking Edit brings up an action sheet for editing your bio, changing your picture, logging out, and editing privacy settings.

SourceClip

HBO Has Only Itself To Blame For Record ‘Game of Thrones’ Piracy - Forbes

Erik Kain - Forbes

This underscores the larger problem with

how so many companies in the

entertainment industry think about... found by THINKLB - May 30, 2012

Another clip in a list of clips. To clip, or not

to clip?

found by THINKLB - May 30, 2012

These ‘fixes’ always have easy work-

arounds.

found by THINKLB - 3/30/12

Read

10:00 AMCARRIER 3G

Stream Add Clip Me

10:00 AMCARRIER 3G

Stream Add Clip Me

thinklbFollowers Unfollow

thinklbLeopoldo Basanez

Clips

Following

Followers

Sources

This is Leo’s biography.

123

22

14

30

1

2

You are following this user.

NOTES

Findings Wireframes

Following Followers1. As on the site, users you follow or who

follow you are sorted in reverse chronological order based on follow date.

2. You can pull up on these pages to reveal a local search bar.

Followingthinklb

10:00 AMCARRIER 3G

Followersthinklb

10:00 AMCARRIER 3G

joelgvt

jcn

karminKarmin Mauritz

greglinchGreg Linch

BorensteinGreg

john

samryanSam Ryan

sarahsosiakSarah Sosiak

sherwoodhpHannah Sherwood

jasonJason Morrow

1

Stream Add Clip Me Stream Add Clip Me

John BorthwickJoel Gluck

Jesse Chan-Norris 2

NOTES

Findings Wireframes

User Clips / My Clips User Sources / My Sources1. This screen is similar to the main

Stream view, but it’s part of the navigational hierarchy (hence the title bar). The user name is taken out but the date is still associated with each clip.

2. You can sort this index view by title or author. Sorting by “recent” removes the index. See the “Songs” screen in Music.app for an example of an index with a search bar.

This underscores the larger problem

with how so many companies in the

entertainment industry think...

The kernel, the soul—let us go

further and say the substance, the

bulk, the actual and valuable...

Familiarity may or may not breed

contempt, but it certainly seems to

stifle creativity.

Companies strive to make their

products “viral” and “sticky” so that

“users keep coming back” to...

May 11, 2012

May 11, 2012

May 11, 2012

May 11, 2012

Clipsthinklb

Stream Add Clip Me

10:00 AMCARRIER 3G

1

10:00 AMCARRIER 3G

C

A Sand County Almanac (Outdoor Essays & Reflections)

A

B

Sourcesthinklb Sort2

Aldo Leopold

A Walk in the Woods: Rediscovering America on the Appalachian Trail

Bill Bryson

Bossypants

Tina Fey

Stream Add Clip Me

Search ABCDEFGHIJKLMNOPQRSTUVWXYZ

NOTES

Findings Wireframes

Add Clip (main screen) Clip from a web page

Add Clip

Stream Add Clip Me

10:00 AMCARRIER 3G

Clip from a physical book

Clip from a web page

Sync Kindle highlights

10:00 AMCARRIER 3G

Address or search terms Close1

1. This is a direct copy of the Web option in Instapaper 4 - clicking on “Clip from a web page” will bring up a modal web view. Once you’re at an address, you can highlight text on the web page and tap a “Clip this” button on the lower left corner of the screen. This invokes the bookmarklet.

2. This is Readability’s feature. Tapping No takes you to a blank page where you can type in a URL or search.

3. Change privacy settings on what you’re about to clip. (Changing the ones you’ve already clipped requires leaving this view.)

Clip this

URL detected on clipboardWould you like to visit http://

kottke.org/ and highlight clips from that page?

No Yes

Privacy

2

3

NOTES

Findings Wireframes

A Sand County Almanac (Outdoor Essays & Reflections)

A

B

Aldo Leopold

A Walk in the Woods: Rediscovering America on the Appalachian Trail

Bill Bryson

Bossypants

Search

Clip from paper: main Clip from paper: select source

New clip

Stream Add Clip Me

10:00 AMCARRIER 3G

Add Clip Select Source

Stream Add Clip Me

10:00 AMCARRIER 3G

New Clip +

1. If the developer can implement OCR, this is where it should be available.

2. This brings up a numeric picker.

3. Clicking this “Add” button brings up an action sheet:

* Scan Barcode (see next page)

* Search by ISBN

* Cancel

ABCDEFGHIJKLMNOPQRSTUVWXYZ

Post

From:

Select source

Clip:

Enter clip

Note:

Type comments or hashtags here (optional)

Make Private

Page #1 2

3

NOTES

Findings Wireframes

Scanning a barcode Sync Kindle highlights1. We recommend licensing a third-party

barcode scanning library:

http://redlaser.com/developers/

http://shopsavvy.mobi/developers/

http://code.google.com/p/zxing/

The Amazon mobile app is a good example of intuitive barcode scanning.

2. Instapaper does a great job of walking you through installing the bookmarklet in Mobile Safari, and apologizing for the length of the process as you go through it. We envision a similar set of instructions here. The page is a web view that you click through with a customized version of the bookmarklet.

Sync with KindleAdd Clip

10:00 AMCARRIER 3G

First, log in to Amazon.We’ll walk you through the process of

syncing your Kindle highlights.

Cancel Continue

Stream Add Clip Me

1

10:00 AMCARRIER 3G

Scan Source

1

Cancel

Hold the barcode in the target area and wait for it to focus.