eTORF
Website
Design
Documentation

Geodesic Design Lab

Geodesic Design Lab

22 February, 2012
2

eTORF Website

Table of Contents
Common Page Elements ....................................................................
3

eTORF Website
Special Cases ..............................................................................................
4

eTORF Website

Common Page Elements
Header (Pre-login)

(4-columns) Grid
Structure

Footer

Header (Post- Login)
Primar...
5

eTORF Website

Header (Pre-login)
The header reflects the brand identity of the product and conforms to the corporate b...
6

eTORF Website



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

An entry field appears that states the ...
7

eTORF Website

Primary Navigation
Provides access to the different levels of information in the eTORF Database. Users c...
8

eTORF Website
Appearance




A copyright text is provided at the bottom left.
All Footer Links are centrally aligned....
9

eTORF Website

Homepage
When to use
Use the homepage:






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

eTORF Website



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

eTORF Website

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



Needs to enter t...
12

eTORF Website

Read Only Form

2 Column Form

Page Elements
1. Field Label
Appearance




Left-align field labels.
D...
13

eTORF Website
5. Terminating Buttons
Appearance




Right align the digressive buttons such as “Close” or “Cancel” a...
14

eTORF Website

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

eTORF Website

Dynamic Entry Fields
When to use
This has a context specific use when the user needs to create an entry...
16

eTORF Website

Dynamic Field

Page Elements
1. Dynamic Rows or Fields
Appearance



Look like conventional rows or fi...
17

eTORF Website

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




Needs a lot of flexibility for ac...
18

eTORF Website



With Filters on the left


Products (Data Admin)



Authentication Response (Field Staff)

Action ...
19

eTORF Website

Page Elements
1. Data Display Table
Appearance



The data table can be changed by addition or removal...
20

eTORF Website
3. Search
Appearance






Place it to the left of the working list.
Above the Filters.
Left align t...
21

eTORF Website
Authentication Response (Field Staff)



Here the field staff can filter the page primarily by selectin...
22

eTORF Website
6. Action Buttons for the Working List
Used for actions on the selected records from the Data Display Ta...
23

eTORF Website

Wizard
When to use
Wizards help user to complete complex activities by breaking the task into short but...
24

eTORF Website



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

eTORF Website

Special Cases
Uploading Product
Getting data files as CSV/XLS format to either locally uploaded users’ ...
26

eTORF Website

Analysis and Reports
This displays the code management and the analytics for the eTORF website. It will...
27

eTORF Website
2. Details



This is basically the working list for the Analysis and Reports page. Displays the table ...
Upcoming SlideShare
Loading in …5
×

eTorF Website-template-documentation

327 views

Published on

Published in: Design, Business, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
327
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

eTorF Website-template-documentation

  1. 1. eTORF Website Design Documentation Geodesic Design Lab Geodesic Design Lab 22 February, 2012
  2. 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
  3. 3. 3 eTORF Website Special Cases ........................................................................................................................................... 25 Uploading Product .................................................................................................................................. 25 Analysis and Reports ............................................................................................................................... 26 Geodesic Design Lab 22 February, 2012
  4. 4. 4 eTORF Website Common Page Elements Header (Pre-login) (4-columns) Grid Structure Footer Header (Post- Login) Primary Navigation Notification Message Geodesic Design Lab 22 February, 2012
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×