scanR Tour User Experience Specification

Release: scanR 4.6

September 19, 2008

Author: Pabini Gabriel-Petit, VP, User Experience

Revision History

Date	Author	Contributors	Description
9/4/08	Pabini Gabriel-Petit	Scott Yu Chris Dury	Revision 1, Version 1.0
9/17/08	Pabini Gabriel-Petit	Chris Dury Charlie Guo Dan Nieuwland	Revision 1, Version 1.1 Revised the following sections: Section 3.0, scanR Tour—Added Buy scanR Now call to action badge below tour navigation bar. Section 3.3, Page 3: Digitize your documents.—Made the label Digital Scan a variable and described when to display each variant of the label. Section 3.6, Page 6: Use your phone or camera.—Added text that appears within mobile phone camera image. Section 3.7, Page 7: Try scanR now!—Removed box containing text and images at bottom of page. Added Section 4.0, Examples and its subsections, which describe the 5 examples for page 3 of the tour. Revised the following figures: Figures 3-1–3-9—Added Buy scanR Now call to action badge below tour navigation bar. Figure 3-5—Added example content. Figure 3-8—Revised text within mobile phone camera image. Figure 3-9—Removed box containing text and images at bottom of page.A Added Figures 4-1–4-20, which depict the 5 examples for page 3 of the tour.
9/19/08	Pabini Gabriel-Petit	Chris Dury	Revision 1, Version 1.2 Revised Section 3.3, Page 3: Digitize your documents.—Changed the variable labels for digital outputs. Revised the following figures: Figures 3-1–3-9, 4-1, 4-5, 4-9, 4-13, and 4-17—Revised appearance of sidebar blue box. Figure 3-3—Revised size and layout of blue box containing examples and variable label for digital output. Figure 3-4—Revised size and layout of blue box containing examples, size of landscape placeholder, and variable label for digital output. Figure 4-1—Changed label for digital output. Figure 4-5—Revised size and layout of blue box containing examples and label for digital output. Removed PDF badge. Figure 4-7—Removed PDF badge. Figure 4-9—Revised size and layout of blue box containing examples and variable label for digital output. Figure 4-13—Revised size and layout of blue box containing examples, size of landscape placeholder and example, and variable label for digital output. Figures 4-14–4-16—Revised example images. Figure 4-17—Revised size and layout of blue box containing examples, size of landscape placeholder and example, and variable label for digital output. Removed PDF badge. Figures 4-18–4-20—Revised example images. Figure 4-19—Removed PDF badge.

Date

Author

Contributors

Description

9/4/08

Pabini Gabriel-Petit

Scott Yu

Chris Dury

Revision 1, Version 1.0

9/17/08

Pabini Gabriel-Petit

Chris Dury

Charlie Guo

Dan Nieuwland

Revision 1, Version 1.1

Revised the following sections:

Section 3.0, scanR Tour—Added Buy scanR Now call to action badge below tour navigation bar.
Section 3.3, Page 3: Digitize your documents.—Made the label Digital Scan a variable and described when to display each variant of the label.
Section 3.6, Page 6: Use your phone or camera.—Added text that appears within mobile phone camera image.
Section 3.7, Page 7: Try scanR now!—Removed box containing text and images at bottom of page.

Added Section 4.0, Examples and its subsections, which describe the 5 examples for page 3 of the tour.

Revised the following figures:

Figures 3-1–3-9—Added Buy scanR Now call to action badge below tour navigation bar.
Figure 3-5—Added example content.
Figure 3-8—Revised text within mobile phone camera image.
Figure 3-9—Removed box containing text and images at bottom of page.A

Added Figures 4-1–4-20, which depict the 5 examples for page 3 of the tour.

9/19/08

Pabini Gabriel-Petit

Chris Dury

Revision 1, Version 1.2

Revised Section 3.3, Page 3: Digitize your documents.—Changed the variable labels for digital outputs.

Revised the following figures:

Figures 3-1–3-9, 4-1, 4-5, 4-9, 4-13, and 4-17—Revised appearance of sidebar blue box.
Figure 3-3—Revised size and layout of blue box containing examples and variable label for digital output.
Figure 3-4—Revised size and layout of blue box containing examples, size of landscape placeholder, and variable label for digital output.
Figure 4-1—Changed label for digital output.
Figure 4-5—Revised size and layout of blue box containing examples and label for digital output. Removed PDF badge.
Figure 4-7—Removed PDF badge.
Figure 4-9—Revised size and layout of blue box containing examples and variable label for digital output.
Figure 4-13—Revised size and layout of blue box containing examples, size of landscape placeholder and example, and variable label for digital output.
Figures 4-14–4-16—Revised example images.
Figure 4-17—Revised size and layout of blue box containing examples, size of landscape placeholder and example, and variable label for digital output. Removed PDF badge.
Figures 4-18–4-20—Revised example images.
Figure 4-19—Removed PDF badge.

Note—Colored text in the specifications indicates revisions to the text.

1.0 Overview
2.0 Definitions of Terms
3.0 scanR Tour

3.1 Page 1: Scan and fax on the go.
3.2 Page 2: See how scanR works.
3.3 Page 3: Digitize your documents.

3.4 Page 4: Store and view scans online.
3.5 Page 5: Send scans or fax worldwide.
3.6 Page 6: Use your phone or camera.
3.7 Page 7: Try scanR now!

4.0 Examples

4.1Example 1: Form to Fax
4.2Example 2: Color Document to PDF
4.3Example 3: Document to Text
4.4Example 4: Business Card to Data
4.5Example 5: Whiteboard to PDF

1.0 Overview

This document specifies the design for the scanR tour, which appears when a user clicks Take a Tour on the home page.

2.0 Definitions of Terms

available: (Adj.) Describes a button or option that does not appear dimmed. When a button or option appears available, the functionality is available, and a user can click or select it.
dimmed: (Adj.) Describes an unavailable feature or button that has a grayed out appearance. When a button or option appears dimmed, a user cannot click or select it.
page title: A text string that identifies the current page and appears on the page title bar on a Web page or a Web application page.
page title bar: A gradient bar beneath the header that displays the page title for a Web page.
popup: An Ajax popup that appears on top of a page within a browser window.
progress message box: An Ajax popup within a browser window that contains a progress bar.
title: A text string that appears on the browser window title bar and on any tab displaying a Web page in a browser window. The title for a specific Web page typically includes its page title—though there are exceptions—and may also include the company name or tagline.
variable: Conditional text that appears on a page and differs depending on state. Within specifications, variable text appears within brackets. For example, the text Remove [a photo/[#] photos]… represents the variable strings Remove a photo and Remove [#] photos, and the variable [#] represents a number of photos.
wizard page title: A text string that identifies the current wizard page and appears on the wizard page title bar on that wizard page.
wizard page title bar: A bar at the top of the main content area of a wizard page that displays the wizard page title for that wizard page.

3.0 scanR Tour

The scanR tour appears when a user clicks Take a Tour on the home page. It comprises tour pages with the following titles, which appear left aligned on the tour page title bar:

Use your mobile phone to scan and fax on the go.
See how easy it is to scan and fax with scanR.
Digitize your printed and handwritten documents.
Store and view your digital scans online.
Send digital scans of documents or fax them worldwide.
Use your existing mobile phone or digital camera.
Try scanR now!

The page title scanR Tour appears left aligned on the page title bar on all of the tour pages. The following tour page titles appear on the browser window title bar:

scanR Tour :: Scan and fax on the go.
scanR Tour :: See how scanR works.
scanR Tour :: Digitize your documents.
scanR Tour :: Store and view scans online.
scanR Tour :: Send scans or fax worldwide.
scanR Tour :: Use your phone or camera.
scanR Tour :: Try scanR now!

On tour pages, the header contains the following elements:

scanR logo—The scanR logo links to the home page.
Tagline—Scan, copy, and fax with your camera phone
header linkbar—The content of the header linkbar differs depending on whether a user is currently signed in.
- When a user is not signed in, the header linkbar comprises the following elements, separated by pipes:
  - Sign In—Clicking this link displays the Sign In to scanR page.
  - Sign Up—Clicking this link displays the Sign Up with scanR page.
  - Language drop-down menu—Clicking this link, the green menu arrow button to its right, or the space between them displays a menu comprising the following language options:
    - English—On the US version of the site, this option is selected by default, so a check mark appears to its left.
    - Japanese (in Japanese script)—On the Japanese version of the site, this option should be selected by default, so a check mark would appear to the left.
  - Help—Clicking this link displays the scanR Help page.
- When a user is signed in, the header linkbar comprises the following elements, separated by pipes:
  - Welcome [Given Name]—This welcome text appears when a user is signed in. Given Name is a variable and displays the given name of the user who is signed in. This text is in bold.
  - Sign Out—Clicking this link signs a user out. The user remains on the same page.
  - Language drop-down menu—Clicking this link, the green menu arrow button to its right, or the space between them displays a menu comprising the following language options:
    - English—On the US version of the site, this option is selected by default, so a check mark appears to its left.
    - Japanese (in Japanese script)—On the Japanese version of the site, this option should be selected by default, so a check mark would appear to the left.
  - Help—Clicking this link displays the scanR Help page.

The footer on tour pages comprises the following elements:

a left-aligned linkbar, comprising the following links, separated by pipes:
- Contact Us—This link is a mailto link. A user can click this link to send an email message to scanR Support at support@scanR.com.
- Terms of Use—Clicking this link displays the scanR Terms of Use popup.
- Privacy Policy—Clicking this link displays the scanR Privacy Policy popup.
right-aligned copyright information

The tour navigation bar includes the following links to tour pages:

Scan and fax on the go.
See how scanR works.
Digitize your documents.
Store and view scans online.
Send scans or fax worldwide.
Use your phone or camera.
Try scanR now!

Navigation between the pages of the tour is not constrained. On the tour navigation bar, a user can click a link to view any tour page or click the Back button or Next button to progress backward or forward through successive pages of the tour from the current page, respectively. Clicking the Close button returns a user to the home page.

Important—When a user navigates from tour page to tour page, there should be no wait for page loads, so a user can flip rapidly between tour pages. For those cases where a page load is absolutely necessary, as many page elements as possible—including the header, page title bar, tour navigation bar, and footer—should be shared across all of the tour pages, to minimize the perception of a full-page reload.

To click a link to a tour page, a user can click anywhere within the vertical space its page selector outlines and anywhere within the entire width of the tour navigation bar. Figure 3-1 shows the page selector for Page 1 of the tour.

Below the tour navigation bar, a badge containing the following elements appears on all tour pages:

Heading: Subscribe!
Text: For as little as $3 a month, get unlimited scanning and up to 100 fax pages.
Buy scanR Now button—Clicking Buy scanR Now displays the Sign Up with scanR / Pricing for scanR Pro page.

If the height and/or width of the browser window is insufficient to display the content of a tour page in full, display the window’s vertical and/or horizontal scroll bar, respectively.

3.1 Page 1: Scan and fax on the go.

Page 1 of the tour, shown in Figure 3-1, provides an overview of the benefits scanR offers, using stories from real people.

Figure 3-1—Page 1: Scan and fax on the go. Revised

This tour page comprises the following elements:

Tour page title: Use your mobile phone to scan and fax on the go.
Intro text:
In the office, on the road, or at home—wherever you are—you can make digital
copies using your mobile phone’s camera. Capture documents, forms, books,
receipts, business cards, notes, whiteboards—just about anything that includes
printed or handwritten information.
Subheading: Fax paper documents using your mobile phone.
Image of a fax on a rounded rectangle background
Quotation:
“One of my biggest headaches is collecting documents from clients. Obviously, nobody wants to let me take away original tax returns and other personal documents. scanR has eliminated this problem! Now, I can fax high-quality copies to my office immediately, saving countless hours.”—Tim B.
Subheading: Digitize and preserve important documents.
Image of a document on a rounded rectangle background
Quotation:
“As a researcher, I often need to work with old, delicate manuscripts from libraries’ rare book rooms or private collections. Once I locate a text, I snap some closeup photos of it, then send them to scanR. Presto! I've got a permanent, PDF record of the text. It’s a magnificent solution!”—Oren H.
Subheading: Capture and share meeting notes with coworkers.
Image of a whiteboard on a rounded rectangle background
Quotation:
“I use scanR to copy meeting notes and diagrams from whiteboards. Before scanR, I’d have to quickly scribble down everything—and either risk missing what people were saying or wait until the meeting was over, when other people were waiting to use the conference room. Now, I just snap a photo and walk back to my desk. So much easier!”—Perry R.
Subheading: Save contact information from business cards.
Image of a business card on a rounded rectangle background
Quotation:
“When I leave appointments with clients, I use scanR to capture contact information from their business cards. This has been a huge benefit! Now, I don’t have to worry about misplacing important business cards or carry around a large stack of cards.”—Brian S.

3.2 Page 2: See how scanR works.

Page 2 of the tour, shown in Figure 3-2, illustrates how scanR works. This tour page comprises the following elements:

Tour page title: See how easy it is to scan and fax with scanR.
Intro text:
Simply take a photo of a document, whiteboard, or business card, upload it
to scanR, and get a digital scan in just few seconds. Then, download your
scan as a PDF, text, or vCard file or send a fax anywhere in the world.
Illustration

Figure 3-2—Page 2: See how scanR works. Revised

3.3 Page 3: Digitize your documents.

Page 3 of the tour, shown in Figures 3-3 and 3-4, lets a user view some before and after examples of photos and scans, respectively. This tour page comprises the following elements:

Tour page title: Digitize your printed and handwritten documents.
Intro text:
scanR uses advanced image-processing technology to overcome common
digital-imaging challenges such as low lighting, shadows, blurring, and skewed
orientation to provide high-quality results consistently, under a wide range of
conditions. You can quickly and easily create digital files from your printed
and handwritten documents. Explore some examples:
Example viewer—Displays before and after examples of photos and scans, respectively.
- Original Photo—Label centered over an example photo. The placeholder in Figure 3-3 shows the maximum width and height of an example photo that has a portrait orientation; that in Figure 3-4, a landscape orientation.
- Page navigator control—This control comprises two buttons: the View Previous Example button, which is the left-arrow button, and the View Next Example button, which is the right-arrow button. If a user points to the View Previous Example button, after a 500ms delay, display the ToolTip View Previous Example. If a user points to the View Next Example button, after a 500ms delay, display the ToolTip View Next Example. Clicking the View Previous Example button displays the previous page. Clicking the View Next Example button displays the next page. Once the last page in either direction appears, the display sequence wraps around. That is, if a user clicks the left-arrow button when viewing Example 1, the display wraps around to Example 5. If a user clicks the right-arrow button when viewing Example 5, the display wraps around to Example 1. To ensure that it is sufficiently apparent that a user has clicked the desired button, these buttons have a rollover/click state.
- Example [#] of [#]—Displays the number of the current example and the total number of examples.
- [Digital Scan] variable—Label centered over an example of the digital output. The placeholder in Figure 3-3 shows the maximum width and height of an example scan that has a portrait orientation; that in Figure 3-4, a landscape orientation. If a user clicks the Zoom In button, a closeup image of the digital scan appears. The closeup image has the same dimensions as the example digital scan. Display the variables for the label, as follows:
  - Example 1: Fax
  - Closeup of example 1: Closeup of Fax
  - Example 2: PDF
  - Closeup of example 2: Closeup of PDF
  - Example 3: Text File
  - Closeup of example 3: Closeup of Text
  - Example 4: Contact Data
  - Closeup of example 4: Closeup of Data
  - Example 5: PDF
  - Closeup of example 5: Closeup of PDF
- Zoom In/Out button—This button has two states. The default state is Zoom In, as shown in Figure 3-3. If a user points to the Zoom In button, after a 500ms delay, display the ToolTip Zoom In. If a user clicks the Zoom In button, a closeup image of the upper-left corner of the digital scan appears and the button state changes to Zoom Out, as shown in Figure 3-5. If a user points to the Zoom Out button, after a 500ms delay, display the ToolTip Zoom Out. If a user clicks the Zoom Out button, the original image of the digital scan reappears and the button state changes to Zoom In.

Figure 3-3—Page 3: Digitize your documents. with placeholders with a portrait orientation Revised

Figure 3-4—Page 3: Digitize your documents. with placeholders with a portrait orientation Revised

Figure 3-5—Page 3: Digitize your documents. with Zoom Out button Revised

Closeup of faxed scan

3.4 Page 4: Store and view scans online.

Page 4 of the tour, shown in Figure 3-6, shows the Web and mobile user experiences for storing and viewing scans online. This page comprises the following elements:

Tour page title: Store and view your digital scans online.
Intro text:
scanR stores your scans online, so you can view them anywhere—using
a Web browser on your computer or mobile phone—search for text in your
documents, and share documents with others.
Images of the Web and mobile user experiences for storing and viewing scans online

Figure 3-6—Page 4: Store and view scans online. Revised

3.5 Page 5: Send scans or fax worldwide.

Page 5 of the tour, shown in Figure 3-7, shows the Web and mobile user experiences for sending scans and faxes. This page comprises the following elements:

Tour page title: Send digital scans of documents or fax them worldwide.
Intro text:
Away from your desk and need to send or fax a printed document? scanR lets
you send scans of documents to almost any computer, mobile phone, or fax
machine in the world. scanR supports both email and SMS text messaging,
and you can send faxes to over 200 countries.
Images of the Web and mobile user experiences for sending scans and faxes

Figure 3-7—Page 5: Send scans or fax worldwide. Revised

3.6 Page 6: Use your phone or camera.

Page 6 of the tour, shown in Figure 3-8, describes the capabilities the camera in a user’s mobile phone or a user’s digital camera must have. This page comprises the following elements:

Tour page title: Use your existing mobile phone or digital camera.
Intro text:
scanR works with most mobile phones and digital cameras, so you can use your
existing phone or camera. To scan documents, you’ll need at least a 2-megapixel
camera with autofocus. For whiteboards, all you need is a 1-megapixel camera. If
you’re not sure about your camera’s resolution, try scanR, and we’ll let you know
what its capabilities are.
Images: A mobile phone, mobile phone camera, containing information about camera requirements for scanR, and a digital camera
- Text: Take a photo!
  For documents, you need a 2-megapixel or greater camera with autofocus.
  For whiteboards, you need just a 1-megapixel camera.

Figure 3-8—Page 6: Use your phone or camera. Revised

3.7 Page 7: Try scanR now! Revised

Page 7 of the tour, shown in Figure 3-9, is a call to action. This page comprises the following elements:

Tour page title: Try scanR now!
Intro text:
Not sure yet whether scanR meets your needs? Your first upload and fax
are free! So, you can get started with scanning now!
Try scanR Now button—Clicking this button displays the Getting Started with scanR wizard.

Figure 3-9—Page 7: Try scanR now! Revised

4.0 Examples New

This section shows the examples for page 3 of the tour, shown in Figures 4-1–4-20. Each example comprises an original photo and some form of digital scan. Center the images within the placeholder boxes.