scanR Tour User Experience Specification

Release: scanR 4.6

September 19, 2008

Author: Pabini Gabriel-Petit, VP, User Experience

 

 

 

Copyright © 2007 scanR Inc. All rights reserved.

 

 

 

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:

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.

NoteColored text in the specifications indicates revisions to the text.

Contents

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:

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:

On tour pages, the header contains the following elements:

The footer on tour pages comprises the following elements:

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

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:

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:

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:

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:

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:

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:

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:

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:

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.

4.1  Example 1: Form to Fax  New

Example 1 shows a photo of a form and a fax, as shown in Figures 4-1–4-4.

Figure 4-1—Example 1 on page 3 of tour  Revised

Example 1

Figure 4-2—Original photo of form  New

Photo of fax

Figure 4-3—Faxed scan of form  New

Faxed form

Figure 4-4—Closeup of fax  New

Closeup of fax

4.2  Example 2: Color Document to PDF  New

Example 2 shows a photo of a color document and an image representing a PDF file, as shown in Figures 4-5–4-9.

Figure 4-5—Example 2 on page 3  Revised

Example 2

Figure 4-6—Original photo of color document  New

Photo of color document

Figure 4-7—PDF of color document  Revised

PDF of color document

Figure 4-8—Closeup of scan of color document  New

Closeup of scan of color document

4.3  Example 3: Document to Text  New

Example 3 shows a photo of a document and text, as shown in Figures 4-9–4-12.

Figure 4-9—Example 3 on page 3  Revised

Example 3

Figure 4-10—Original photo of document  New

Photo of document

Figure 4-11—Text from document  New

Document text

Figure 4-12—Closeup of text from document  New

Closeup of document

4.4  Example 4: Business Card to Data  New

Example 4 shows a photo of a business card and its data, as shown in Figures 4-13–4-16.

Figure 4-13—Example 4 on page 3  Revised

Example 4

Figure 4-14—Original photo of business card  Revised

Business card photo

Figure 4-15—Data from business card  Revised

Contact data

Figure 4-16—Closeup of data from business card  Revised

Contact data closeup

4.5  Example 5: Whiteboard to PDF  New

Example 5 shows a photo of a whiteboard and an image representing a PDF file, as shown in Figures 4-17–4-20.

Figure 4-17—Example 5 on page 3 of tour  Revised

Example 5

Figure 4-18—Original photo of whiteboard  Revised

Whiteboard photo

Figure 4-19—PDF of whiteboard  Revised

Whiteboard PDF

Figure 4-20—Closeup of PDF of whiteboard  Revised

Closeup of whiteboard