2. 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
Example screens on eTORF ..................................................................................................................... 15
Page Elements ......................................................................................................................................... 16
Working List............................................................................................................................................... 17
When to use ............................................................................................................................................ 17
Example screens on eTORF ..................................................................................................................... 17
Page Elements ......................................................................................................................................... 19
Page Interaction ...................................................................................................................................... 22
Wizard ........................................................................................................................................................ 23
When to use ............................................................................................................................................ 23
Example screens on eTORF ..................................................................................................................... 23
Page Elements ......................................................................................................................................... 23
Page Interaction ...................................................................................................................................... 24
Geodesic Design Lab
22 February, 2012
5. 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.
Attempts Notification
Error Notification
Inline Error Message
Geodesic Design Lab
22 February, 2012
1
2
3
6. 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.
Geodesic Design Lab
22 February, 2012
7. 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.
Non- selected
Static Tab
Non- selected Dynamic Tab
with unsaved data
Selected Dynamic Tab with
saved data
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.
Geodesic Design Lab
22 February, 2012
8. 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.
Geodesic Design Lab
22 February, 2012
9. 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.
Code Validation
1
Content Area
2
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.
Geodesic Design Lab
22 February, 2012
10. 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
Geodesic Design Lab
22 February, 2012
11. 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
Required Data Entry Indicator
Data Entry Fields
1
2
3
2 Column Form
Contextual Help
Terminating Buttons
Geodesic Design Lab
4
5
22 February, 2012
12. 12
eTORF Website
Read Only Form
2 Column Form
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.
Geodesic Design Lab
22 February, 2012
13. 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.
Geodesic Design Lab
22 February, 2012
14. 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 noneditable.
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)
Geodesic Design Lab
22 February, 2012
15. 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.
Example screens on eTORF
Package Details (Data Admin)
Add Product Categories (Site Admin)
Dynamic Rows
Geodesic Design Lab
22 February, 2012
16. 16
eTORF Website
Dynamic Field
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.
Geodesic Design Lab
22 February, 2012
17. 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)
Example screens on eTORF
Without Search and Filters
User Management (Site Admin)
Data Display Table
1
Geodesic Design Lab
22 February, 2012
18. 18
eTORF Website
With Filters on the left
Products (Data Admin)
Authentication Response (Field Staff)
Action Buttons for Page
2
Search
3
Filters
Pagination
4
5
Action Buttons for
Working List
Geodesic Design Lab
6
22 February, 2012
19. 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.
Geodesic Design Lab
22 February, 2012
20. 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).
Geodesic Design Lab
22 February, 2012
21. 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.
Number of results per page
Geodesic Design Lab
Page Navigators
22 February, 2012
22. 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
Geodesic Design Lab
22 February, 2012
23. 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.
Example screens on eTORF
Create Company Profile (Site Admin)
Create Product (Data Admin)
Step Header
Step Buttons
1
2
Page Elements
1. Step Header
Appearance
Geodesic Design Lab
22 February, 2012
24. 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.
Geodesic Design Lab
22 February, 2012
25. 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.
Geodesic Design Lab
22 February, 2012
26. 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.
Overview
Details
Action Button
1
2
3
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.
Geodesic Design Lab
22 February, 2012
27. 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”
Geodesic Design Lab
22 February, 2012
