etorf website-template-documentation

Geodesic Design Lab 22 February, 2012

eTORF Website

Design Documentation

Geodesic Design Lab


2 eTORF Website

Table of Contents

Common Page Elements .......................................................................................................................... 4

Header (Pre-login) ..................................................................................................................................... 5

Header (Post-login) ................................................................................................................................... 6

Primary Navigation ................................................................................................................................... 7

Footer ........................................................................................................................................................ 7

Homepage ................................................................................................................................................... 9

When to use .............................................................................................................................................. 9

Page Elements ........................................................................................................................................... 9

Simple Form (Display-only & Editable) ................................................................................................. 11

When to Use ........................................................................................................................................... 11

Example screens on eTORF ..................................................................................................................... 11

Page Elements ......................................................................................................................................... 12

Page Interaction ...................................................................................................................................... 13

Read-Only Form ...................................................................................................................................... 14

Dynamic Entry Fields ............................................................................................................................... 15

When to use ............................................................................................................................................ 15


Page Elements ......................................................................................................................................... 16

Working List............................................................................................................................................... 17

When to use ............................................................................................................................................ 17


Page Elements ......................................................................................................................................... 19


Wizard ........................................................................................................................................................ 23

When to use ............................................................................................................................................ 23


Page Elements ......................................................................................................................................... 23



3 eTORF Website

Special Cases ........................................................................................................................................... 25

Uploading Product .................................................................................................................................. 25

Analysis and Reports ............................................................................................................................... 26


4 eTORF Website

Common Page Elements

Header (Pre-login)

Footer

Header (Post- Login)

Primary Navigation

Notification Message

(4-columns) Grid

Structure


5 eTORF Website

Header (Pre-login) The header reflects the brand identity of the product and conforms to the corporate branding style guide. It contains the product Logo and the Login area.

Appearance

Logo on the top- left. Login area on the right.

Should not increase in height beyond 200 px so as to accommodate website and application

content on the screen. The design is optimized for a screen resolution of 1280x800.

Login appears as a pop-over

Labels & Fields for “Username” and “Password” are all left-aligned

Button for “Login” is middle-aligned.

“Forgot your password?” link is left aligned and below the “Login” button.

Interaction

Header

Pressing “Members Login” button opens up the Login pop-over.

The popover can be canceled by clicking elsewhere on the screen area.

Login

Pressing “Login” button after entering valid credentials takes the user to the secure area of

the site that displays the subsequent landing page for the eTORF users (Site Admin/Data

Admin/Field Staff).

If the credentials are incorrect then an inline error is shown.

Error Notification

2

Inline Error Message

3

Attempts Notification

1


6 eTORF Website

Clicking “Forgot my password?” link opens up a new page.

An entry field appears that states the user to enter the email id used for registration.

This page contains text and button which are left aligned. The Label “Request Password” is

middle aligned.

Header (Post-login) The header reflects the brand identity of the product and conforms to the corporate branding style guide. It contains the product Logo and Global Navigation Links.

Appearance

Logo on the left. Global Navigation Links on the right.

“Logout”, “My Profile” and “Company Profile” are Global Navigation Links

Welcome message indicating username.

Interaction

Logout – Logs out the user and shows the pre-login homepage.

My Profile – Opens navigation-less page like “Forgot Password” with personal details & password

change options.

Users will have to make changes or read the details before getting back to their other tasks.

Company Profile – Opens navigation-less page like “Forgot Password” with read only data on it.

The content viewed here is primarily edited by Site admin. The Company Profile is view only for

Field Staff and Data Admin.


7 eTORF Website

Primary Navigation Provides access to the different levels of information in the eTORF Database. Users can see the static

tab based on their role. Based on their selection dynamic tabs open. In general, the dynamic tabs

represent information lower in hierarchy as shown by the static tab. For tasks that users want to perform

on the website e.g. create user profile/ adding new product / managing packages etc. the user is taken to

Dynamic Tabs that can be closed when the user completes the tasks.

Appearance

Static tabs on the left. Dynamic Tabs follow the static tabs on the right.

Dynamic tabs have close button on right.

Dynamic tabs contain star mark if the tab is unsaved.

Sequencing

Static Tabs are always placed at the left part while Dynamic Tabs appear at the right side.

The leftmost tab should be the one that is used first within the group in the usual task flow, and

generally, it is the default static tab.

Interaction

Tabs get selected only on mouse clicking. Selecting a tab makes it come forward.

Only one of the task tabs may be selected at any given time, including the initial display upon

opening the application.

Dynamic Tabs can also be displaced in custom order.

Clicking on any tab shows the landing page of that tab irrespective of where the user is in the site

hierarchy.

The star mark disappears when the tab is saved. Label text should be bold

Tabs must operate with the selected tab in front and with the color matching the display area

background.

The non-selected tabs must show in a different color and in an "in-back" position.

Footer The footer provides a consistent location for the information on help, feedback, contact us and about

eTORF and Terms of Services. The footer also provides a consistent visual cue to indicate the end of the

content. No additional content appears below the footer. A copyright text is provided at the bottom left.

Non- selected Dynamic Tab

with unsaved data

Selected Dynamic Tab with

saved data

Non- selected

Static Tab


8 eTORF Website

Appearance

A copyright text is provided at the bottom left.

All Footer Links are centrally aligned.

Interaction

Help - Redirects user to the help content, resources and eTORF product tour is displayed.

Feedback - Opens up a new page where user can enter the feedback for the web application.

About eTORF - Takes user to pre-login page in a signed in state to get information about eTORF

and its product features.

Terms of Service - Opens up a new page where user can read the terms of service and the IP

policy.


9 eTORF Website

Homepage When to use

Use the homepage:

As the first page of the website for login and product authentication.

To show branding image, product tour video and feature content.

To redirect users (eTORF members) to the for their workbench area.

To provide users with required resources, sales opportunities and marketing.

Page Elements

1. Code Validation

Appearance

Code Validation area is displayed on the rightmost part of homepage:

Area that displays code validation fields and help text (left aligned).

Contextual help is also provided below the fields.

Contains “Authenticate” button is below the field aligned left to the field. Label of the text is

central aligned.

Visually distinct from the rest of the page as it caters to specific user group and is important task

on the page.

Code Validation

1

Content Area

2


10 eTORF Website

Below the multiple data entry field for codes, this section consists of mandatory data entry fields

“Send me the reply on” where the user need to enter either the Email or Mobile.

There is captcha as the last entry field for secured authentication.

Interaction

Data entry fields. (Single comma separated entry field for entering multiple codes for validation)

On click of Authenticate button the user is displayed a temporary message which will state that

the authentication response has been sent to the provided email or mobile.

This message will also contain “Resend” button that will allow the user to get the authentication

response if not received on mobile or mail. This temporary message can be canceled to get back

to the previous code validation section.

2. Content Area

Primary part of the screen is dedicated to provide sales and marketing information such:

Product tour video of standard resolution of 480*360.

o A Text appears at the top that displays what is video about.

o When the video is paused. Display the text area “Play Product tour”

o Video can be scaled to full screen mode.

o All media controls are in enabled state.

Feature list

Downloads Area(Brochure, product guide, whitepaper)

Contact Info

Share links

Description of eTORF

o What is eTORF? : Description about the product

o Why to use? : Utility and Application of the product

o How it works? : Working and functionality of the product


11 eTORF Website

Simple Form (Display-only & Editable) When to Use Use a Simple Form when the user:

Needs to enter text data and make choices that need to be submitted to the form.

Example screens on eTORF

Create Company Profile (Site Admin)

Add New Product (Data Admin)

Create User Profile (Site Admin)

Request Details (Field Staff)

Results page of Code Validation (End Users)

Field Labels

1

Required Data Entry Indicator

2

Data Entry Fields

3

Terminating Buttons

5

Contextual Help

4

2 Column Form


12 eTORF Website

Page Elements

1. Field Label

Appearance

Left-align field labels.

Do not hyperlink the labels since this is unusual and adds keystrokes when TAB-ing through the

form.

2. Required Data-entry Indicator

Appearance

Flag the fields with a prominent color to identify them as required fields. E.g. place an asterisk to

the left of label without any gap.

Ensure this flag used is defined in the form on the top.

3. Data Entry Fields

Appearance

Provide sufficiently wide field to accommodate the longest entry.

4. Contextual Help

Appearance

Text font to be smaller than that used as field labels.

Ensure sufficient contrast with background for easy reading without drawing too much attention.

2 Column Form

Read Only Form


13 eTORF Website

5. Terminating Buttons

Appearance

Right align the digressive buttons such as “Close” or “Cancel” at the bottom of the form.

Left align the progressive buttons such as “Ok” or “Submit” or “Continue” at the bottom of the

form.

Page Interaction

General

Selection from a form control should not change the previous fields.

When selection from a form control changes the subsequent fields, these fields should appear

only after the selection.

Terminating Buttons

Runs edits, saves changes, closes the form, and displays the next logical page.

Data Entry Affordance

Affordance messages helps in interacting with the data entry fields, such affordances can be data

entry aid (italic text with color macro) or contextual label in the search box

Place the exclamation point icon to the right of the fields of errors.

Place the field related error below the entry field.


14 eTORF Website

Read-Only Form When user needs to only views the data and not edit it, provide a read-only form.

All standard design practices for a Simple Form remain same except the fields are shown as non-

editable.

The page size of this form is the same as the editable forms (Simple Form). If the data is more than that

can be accommodated in the given area, vertical scroll is shown within the tab.

Screens on eTORF that are read-only forms are:

Company Profile (Site Admin, Data Admin, Field Staff)

Product Details (Data Admin)

User Profile (Site Admin)


15 eTORF Website

Dynamic Entry Fields When to use This has a context specific use when the user needs to create an entry that dynamically gets submitted to

the application which then displays the entry fields that users want to fill.


Package Details (Data Admin)

Add Product Categories (Site Admin)

Dynamic Rows


16 eTORF Website

Page Elements

1. Dynamic Rows or Fields

Appearance

Look like conventional rows or fields. That appears on the left part of the screen. The current

row/field is highlighted with form at right part being in read-only state. The next row/field is for

subsequent data entry which is disabled. Highlight the current Dynamic Entry point.

Interaction

On clicking the entry point (row/field) there are 2 prominent changes that occur on the screen

a) The right part of the screen gets enabled (edit state) where user can perform tasks related to

adding/editing the data to the fields.

b) The entry point below the current entry point gets enabled for further data addition to the

screen.

Dynamic Field


17 eTORF Website

Working List When to use Use a Working List page when the user:

Needs a lot of flexibility for acting on a list of records.

Needs to seek items by filtering a long or complex list of records.

The working list page has three required components:

Search & Filtering facility (optional)

Display of the records (usually database search results) in a tabular form

Action buttons & Navigation Links

Pagination options (optional)


Without Search and Filters

User Management (Site Admin)

Data Display Table

1


18 eTORF Website

With Filters on the left

Products (Data Admin)

Authentication Response (Field Staff)

Action Buttons for Page

Search

Filters

2

3

4

Action Buttons for

Working List

5

Pagination

6


19 eTORF Website

Page Elements

1. Data Display Table

Appearance

The data table can be changed by addition or removal of column through filters especially for field

staff.

Always left-align the header for the entire column.

Display a caret to the right of column header for the currently sorted column, indicating the sort

direction (ascending or descending).

Always place a horizontal rule below column headers to separate them from the data.

Separate column headers with vertical rules only if needed.

Use a horizontal rule to separate rows or sections of data if needed. This rule should extend the

full width of the table.

If multiple records can be selected, checkboxes are placed left-most in the table.

Links if any in the working list should look clickable.

Actions applicable for only one column item at a time may be placed as choices in a drop-down

list at the right-most part of column header of the table.

2. Action Buttons for the Page

Used for actions on the tab irrespective of selection in the table.

Appearance

Place below the tab at an appropriate distance to not look associated with the table.

These are kept just above the table.

Grouping

Use space to separate groups of buttons within a larger group (viz: Upload / Create).

Provide contextual help if the task is complicated in nature.


20 eTORF Website

3. Search

Appearance

Place it to the left of the working list.

Above the Filters.

Left align the search field and button.

When the search results are displayed, the area below the primary navigation and above the

filtering options show:

“Showing search results for “<search string>”

4. Filters

Allows the user to select the scope of the data that they want to display

Appearance

Below the search.

To the left of the working list.

Filtering Fields holds the different options for viewing the data on the right.

The Reset button is given at each filtering choice and also at the bottom of the Filter table to reset

the entered or selected data in the working list.

Grouping

The basic view filters for eTORF web app are on screens:

All Products (Data Admin)

Here the data admin can filter the page primarily by selecting the Product Category to view

and then the packages level within those selected product category(s).


21 eTORF Website

Authentication Response (Field Staff)

Here the field staff can filter the page primarily by selecting the Authentication Status to view

and then the product category under which he can select the products to view.

5. Pagination

Appearance

Above the working list.

Left align text with selectable drop down to show the number of results per page.

Interaction

Right aligned page navigators with clickable page links as shown in the image.

Clicking on drop down the users can set number of results to be displayed say 50, 100, 150, 200

per page, whereas page navigators help user to navigate across pages back and forth.

Page Navigators

Number of results per page


22 eTORF Website

6. Action Buttons for the Working List

Used for actions on the selected records from the Data Display Table.

Appearance

Place below the table and shown disabled unless one or more rows are selected.

Grouping

Grouped by function. E.g: Export – Print

Use space to separate groups of buttons within a larger group.

Page Interaction

Users can type in the search field and the results will be displayed on click of the Enter key or the

button with magnifying glass icon.

Search enables searching for all results containing the string of characters entered.

Where filters are provided the user can select any one of them. By default “All” will be selected.

Use a vertical scroll for the table if data is more than that can be accommodated in the area.

Actions Buttons act on the whole table.

On clicking any row of the Data Display Table, a dynamic tab opens up in simple form.

Dynamic tab


23 eTORF Website

Wizard When to use Wizards help user to complete complex activities by breaking the task into short but logical steps and

guides them through task completion. The simplified step-by-step function of a Wizard to fill in a long form

can also be integrated into a task. This is highly appropriate when users will do a task infrequently (for

example a step operation). For these reasons, a wizard appears with all the primary and global navigation

stripped from the screen. Wizards are not terribly efficient. They spend a lot of space on controls, but they

hold the user’s hand through an operation.


Create Company Profile (Site Admin)

Create Product (Data Admin)

Page Elements

1. Step Header

Appearance

Step Buttons

Step Header

1

2


24 eTORF Website

Always highlighted in a box with the word "Steps". No other words are permitted. The box always

extends fully to the right of the page.

Current step is always highlighted. While the next subsequent step is disabled.

2. Step Buttons

“Next” Buttons are positioned at bottom left of the wizard and label is centre-aligned.

"Cancel" returns the user to the page from which the form was accessed without saving any

information entered till that step. This button is at the bottom right of the wizard and label is

centre-aligned.

The "Next" button is replaced by “Finish” button on the last step. It runs edits, saves all currently

displayed data, and completes the processing of the wizard.

Page Interaction

Steps and Step Buttons

The initial step is highlighted and displayed in normal text in the Step Display Area. The step

header is the hyperlink of step and the unselected or next steps appear disabled until the user

completes the initial step.

To complete the initial step the user has to click "Next" button that saves all currently displayed

data, and navigates to the next step of the wizard.

The user can navigate to the previous page in the wizard to edit the selections and entries by

clicking on the page header of the previous step.

User cannot skip the first step to move to the next tab. The second tab is enabled only on the

click of “Next” and the “Next” button is enabled only when all required fields are filled in.

The "Cancel" button returns to the originating page or menu. It does not save entered data.


25 eTORF Website

Special Cases Uploading Product Getting data files as CSV/XLS format to either locally uploaded users’ machine or from the companies

ERP Software is not easy to understand for a user. To support users in performing this infrequent and

tedious task, a contextual help is provided. This help also gives users instructions for sub-tasks they have

to perform outside “eTORF” to get their data onto it.


26 eTORF Website

Analysis and Reports This displays the code management and the analytics for the eTORF website. It will offer a tabular and

graphic view of the codes analysis associated with the eTORF account for the site admin.

Page Elements

1. Overview

Consist of the tabular form that displays the code history of last 3 months on the company’s

eTORF and a graphical representation of the same data.

Bar graph with X axis as months and Y axis as number of codes is placed below the data table.

The yellow bars are total codes authenticated and green are the successful authentications.

The user can see the codes generated, sent for printing, total authenticated and total codes

which passed authentication for the past 3 months.

On changing the date range or product category from the filter the data on the right changes.

By default the ongoing month & the previous two months are shown selected.

Overview

1

Action Button

3

Details

2


27 eTORF Website

2. Details

This is basically the working list for the Analysis and Reports page. Displays the table for

searched/ filtered data.

3. Action Button for the Page

Export button allows users to save the overview & details with set filters in a PDF.

Print button prints the overview & details.

Page Interaction

Search

The user can search for data or filter the existing data based on filters like date range or product

category or selecting the products for which the data needs to be viewed.

The overview section displays the graphical interpretation of the searched or filtered data. The

user can minimize this section by clicking on “Up” arrow and view Details section of the searched

or filtered data by clicking on “Down” arrow that maximizes the details section.

“Overview” is by default expanded and “Details” is by default collapsed.

“Print” and “Export” open a secondary window for exporting or printing the “Overview” and

“Details”