E-Pass UI Design Document Version 1.2 Page 1 E-Pass User Interface Design Document Phena Partners LLC Revision History: Date Version Updated By Comments 18-Dec-2002 0.2 Michael Cordi Heather Fox Original. 12-Feb-2003 0.9 Pete Hazen Heather Fox Major upgrades. 24-Feb-2003 0.9a Michael Cordi Inclusion of rules for curved borders, ruling and embedding of all graphics. 03-Mar-2003 0.9b Pete Hazen Heather Fox Minor upgrades. 10-Mar-2003 1.0 Michael Cordi, Pete Hazen Changes to error screens and embedding of CSS file. 24-Mar-2003 1.1 Pete Hazen Fixed inconsistency regarding height of Welcome image and global nav 28-Mar-2003 1.2 Michael Cordi, Pete Hazen Added ribbon to support multiple-role start pages. Removed home link on global nav for authenticated users. 30-Apr-2003 1.3 Michael Cordi Heather Fox Fixed pages with incorrect breadcrumb separators (―<‖ vs. ―>‖). Added example of site selector from usability prototype.
Transcript
E-Pass UI Design Document
Version 1.2 Page 1
E-Pass User Interface Design Document Phena Partners LLC
Revision History:
Date Version Updated By Comments 18-Dec-2002 0.2 Michael Cordi
Heather Fox Original.
12-Feb-2003 0.9 Pete Hazen Heather Fox
Major upgrades.
24-Feb-2003 0.9a Michael Cordi Inclusion of rules for curved borders, ruling and embedding of all graphics.
03-Mar-2003 0.9b Pete Hazen Heather Fox
Minor upgrades.
10-Mar-2003 1.0 Michael Cordi, Pete Hazen Changes to error screens and embedding of CSS file.
24-Mar-2003 1.1 Pete Hazen Fixed inconsistency regarding height of Welcome image and global nav
28-Mar-2003 1.2 Michael Cordi, Pete Hazen Added ribbon to support multiple-role start pages. Removed home link on global nav for authenticated users.
30-Apr-2003 1.3 Michael Cordi Heather Fox
Fixed pages with incorrect breadcrumb separators (―<‖ vs. ―>‖). Added example of site selector from usability prototype.
E-Pass UI Design Document
Version 1.2 Page 2
Table of Contents
Table of Contents..................................................................................................................................... 2 1 Page Elements & Styles ..................................................................................................................... 4
1.1 General ........................................................................................................................................................ 4 1.2 Global (top) navigation ................................................................................................................................ 5
1.3 Left-hand navigation .................................................................................................................................... 6 1.3.1 Left-hand navigation items – dependent on user rights assigned and login state ................................................... 6 1.3.2 Styles ...................................................................................................................................................................... 7
1.4 Right-hand navigation .................................................................................................................................. 7 1.4.1 Items – dependent on user rights assigned ............................................................................................................ 7 1.4.2 Styles ...................................................................................................................................................................... 8
3.1 Home page ................................................................................................................................................ 12 3.2 Start page – single role .............................................................................................................................. 13 3.3 Start page – multiple roles ......................................................................................................................... 14 3.4 Single-column content page ...................................................................................................................... 15 3.5 Three-column content page ....................................................................................................................... 16 3.6 Daughter windows ..................................................................................................................................... 17
3.6.1 General daughter windows ................................................................................................................................... 17 3.6.2 Field-based help ................................................................................................................................................... 18
4.1.1 Input field blank or error ........................................................................................................................................ 19 4.1.2 Execution errors where operation is repeatable .................................................................................................... 20 4.1.3 Warning with continuation option .......................................................................................................................... 21 4.1.4 Unrecoverable system errors ................................................................................................................................ 22
5 Page Mockups ................................................................................................................................. 23 5.1 Home page ................................................................................................................................................ 23 5.2 Start page – one role ................................................................................................................................. 24 5.3 Start page – multiple roles, current role corresponding to start page highlighted ..................................... 25 5.4 Single-column content page, global navigation item active ...................................................................... 25 5.5 Two-column content page, left navigation item active .............................................................................. 27 5.6 Single column content page with tabbed interface .................................................................................... 28 5.7 Single column content page with ―wayfinder‖ ............................................................................................ 29 5.8 Daughter windows ..................................................................................................................................... 30
E-Pass UI Design Document
Version 1.2 Page 3
5.8.1 Company/SBU/site selectors ................................................................................................................................ 30 5.8.2 User and sponsor search selectors....................................................................................................................... 33 5.8.3 External sponsor selector ..................................................................................................................................... 35 5.8.4 Token administration queue selector .................................................................................................................... 36 5.8.5 Token distribution point selector ........................................................................................................................... 37 5.8.6 Report criteria (filter/sort) selectors ....................................................................................................................... 38 5.8.7 Report content window ......................................................................................................................................... 40 5.8.8 Sponsor information window ................................................................................................................................. 41 5.8.9 Additional token information window ..................................................................................................................... 41 5.8.10 Topical help ...................................................................................................................................................... 42 5.8.11 Page-based help .............................................................................................................................................. 43 5.8.12 Field-based help............................................................................................................................................... 43
E-Pass UI Design Document
Version 1.2 Page 4
1 Page Elements & Styles
This section describes the various page elements used in the application and the styles applied or used in creating them. The styles described here are also contained in this embedded .CSS file:
1.1 General
Style Elements using this style Sample
Font: Arial 9 point Dark Grey (#333333)
CSS class: body
Text in main content area; text in daughter windows
Sample
Font: Arial 8 point Dark Grey (#333333)
CSS class: bodySM
Status information in Informational content/navigation area; link text in footer
Sample
Font: Arial bold 9 point Dark Grey (#333333)
CSS class: calloutBody
Form field labels; section headings Sample
Font: Arial bold 9 point Red (#CC0000)
CSS class: calloutRed
Error message text Sample
Font: Arial 7 point Blue (#004080)
CSS class: small
Breadcrumbs Sample
Font: Verdana italic 7 point Dark Grey (#333333)
CSS class: smallgray
Left navigation find E-Pass user text Sample
Font: Verdana bold italic 8 point Dark Grey (#333333)
CSS class: smallgrayBold
Left navigation find E-Pass user text; required form field notification
Sample
Font: Arial bold 12 point Dark Grey (#333333)
CSS class: headerBlack
Page titles Sample
Font: Arial bold 11 point Maroon (#990033)
CSS class: headerRed
Headings for pages that have multiple steps
Sample
Font: Verdana bold italic 8 point White (#FFFFFF)
CSS class: personalization
Personalization text in global navigation bar
Sample
E-Pass UI Design Document
Version 1.2 Page 5
Font: Arial bold 8 point White (#FFFFFF)
CSS class: headerWhite
Page titles in daughter windows
Background: Dark grey (#666666) Section Heading
Background: Tan (#FFCC99) Informational content/navigation; content page title
1.2 Global (top) navigation
1.2.1 Masthead components
Masthead component File name and specs Sample
Application name in DuPont signature font
Font: MetaMedium Roman 22 point Black (#000000)
File name: site_header.gif
DuPont logo File name: logo_dupont.gif
1.2.2 Items – persistent
Home (displayed only when user is not logged in)
Your Start Page/Log in (―Log in‖ displayed when user is NOT logged in; otherwise ―Your Start Page‖ is displayed)
Help
Policy & Guidelines
Contact
FAQs
Terms of Use
1.2.3 Styles
Navigation State Style (Hex values given for colors) Sample
Global Navigation - Page not active
Font: MetaMedium Roman bold 8 point White (#FFFFFF)
Background: Grey (#666666)
Global Navigation - User points at item (hover)
Font: MetaMedium Italic bold 8 point Grey (#666666)
Background: White (#FFFFFF)
Sample
E-Pass UI Design Document
Version 1.2 Page 6
Global Navigation - Page active
Font: MetaMedium Roman bold 8 point Grey (#666666)
Background: White (#FFFFFF)
Role Navigation - Page not active
Font: MetaMedium Roman bold 7 point Grey (#666666)
Background: White (#FFFFFF)
Role Navigation - User points at item (hover)
Font: MetaMedium Italic bold 7 point Grey (#666666)
Background: White (#FFFFFF)
Role Navigation - Page active Font: MetaMedium Roman bold 8 point Grey (#666666)
Background: Tan (#FFCC99)
Files used for Global (top) navigation:
1.2.4 Boxing
On the left-hand edge of the Global Navigation bar there is a graphic that forms a quarter-rounded corner in the same color as the Navigation bar itself (Grey – Hex value #666666) as shown below.
On the left-hand edge of the Role Navigation bar there is a graphic that forms a quarter-rounded corner in the same color as the Navigation bar itself (Grey – Hex value #666666) as shown below.
1.3 Left-hand navigation
1.3.1 Left-hand navigation items – dependent on user rights assigned and login state
Items displayed when logged in o View/edit profile o Select security questions o Return a token o Manage token inventory o Find an E-Pass user / Find a token owner o Manage your users o Request an E-Pass o Support users o Add a company o View/edit company o View reports o Log out
E-Pass UI Design Document
Version 1.2 Page 7
o Designate alternate o Manage DB tables
Items displayed when not logged in o What is E-Pass? o Register for E-Pass o Troubleshoot E-Pass problems o E-Pass training o E-Pass job aids o Find an E-Pass user
1.3.2 Styles
Navigation State Style (Hex values given for colors) Sample
Page not active Font: Arial 8 point Dark Grey (#333333)
Background: White (#FFFFFF)
CSS class: A.leftNav:link
User points at item (hover) Font: Arial 8 point Dark Grey (#333333)
Background: Yellow (#FFFF99)
CSS class: A.leftNav:hover
Page active Font: Arial bold 8 point White
Background: Grey (#666666)
CSS class: leftNavon
1.4 Right-hand navigation
1.4.1 Items – dependent on user rights assigned
Manage user‘s E-Pass o Edit profile o Request a token o Change privileges o Transfer to another sponsor o Activate/Deactivate E-Pass o Revalidate E-Pass o View activity log
Manage user's token o Report token lost, stolen or broken o Set a temporary password o Reset PIN o Resync token o Activate/Deactivate token
E-Pass UI Design Document
Version 1.2 Page 8
1.4.2 Styles
Navigation State Style (Hex values given for colors) Sample
Normal link Font: Arial bold underlined 8 point Blue (#004080)
CSS class: A.body:link
User points at item (hover) Font: Arial bold underlined 8 point Maroon (#990033)
CSS class: A.body:hover
1.5 Global footer
1.5.1 Items – persistent
Link to Internet/Intranet usage guidelines (appears only on Home, Log In, and Start pages)
Copyright Notice
Internal use disclaimer
1.5.2 Styles
Item Style (Hex values given for colors) Sample
Link to usage guidelines Font: Arial underlined 8 point Blue (#004080)
CSS class: A.bodySM:hover
Copyright Notice Font: MetaMedium 8 point Dark Grey (#333333)
Internal use disclaimer Font: MetaMedium 8 point Dark Grey (#333333)
1.6 Breadcrumb navigation styles
Navigation State Style (Hex values given for colors) Sample
Page is in a previous step Font: Arial underlined 7 point Blue (#004080)
CSS class: A.small:link
E-Pass UI Design Document
Version 1.2 Page 9
Page is active Font: Arial 7 point Blue (#004080)
CSS class: small
Breadcrumb separator (right-angle bracket)
Font: Arial 7 point Blue (#004080)
CSS class: small
Breadcrumbs are intended to help a user understand at a very basic level where in the application he/she is located. In this fashion, breadcrumbs highlight the relationship between the current page and any previous pages that form the most direct path to the current page (note that breadcrumbs may or may not reflect the actual path a user has taken to get to any given page). Where a user is in a multi-step process and has not yet completed the task, i.e. has not reached the final confirmation page, portions of the breadcrumb may be clickable, allowing the user to return to a previous step in the process. When the user has completed the process and reached the confirmation page, these previously clickable portions of the breadcrumb will no longer be clickable, except for the link to ―Your start page.‖
1.7 Tabbed navigation styles
Navigation State Style (Hex values given for colors) Sample
Tab not active Font: Arial 8 point Dark Grey (#333333)
Background: Tan (#FFCC99)
CSS class: A.tab:link
User points at tab link (hover) Font: Arial 8 point Dark Grey (#333333)
Background: White (#FFFFFF)
CSS class: A.tab:hover
Tab active Font: Arial 8 point Dark Grey (#333333)
Background: White (#FFFFFF)
CSS class: tabon
Pages that use tabbed navigation: User pages (Version 1.0, last revised 1/12/03) Page 5: view profile Page 6: Edit profile-E-Pass info Page 7: Edit profile-contact info Page 8: Edit profile-local time zone Page 9: Edit profile-other computer systems Page 10: Edit profile-token management details Sponsor pages (Version 1.1, last revised 1/31/03) Page 7: Edit profile-E-Pass info Page 8: Edit profile-contact info Page 9: Edit profile-local time zone
There is a 2-point wide vertical rule that appears on every page and that is positioned between the left navigation and the gutter to the right of the navigation that extends from the Global Navigation bar down to the bottom of the page. The color of the ruling is grey (hex value #666666). There is also a horizontal rule that is a default html style rule that appears at the top of the footer. The rule extends from the 2-point wide vertical rule on the left to the right-hand edge of the page and extends 90% of this width. This horizontal rule also appears on every page.
E-Pass UI Design Document
Version 1.2 Page 11
1.10 Start page and ―remaining tasks‖ boxing
Tables on the Start page showing open tasks, open requests and information will be arranged in two columns (see sections 3.2 and 5.2) and will have a 1 pixel light grey (hex value #CCCCCC) border (CSS class: startTable) and a header with the same color background. The text in the header will use the style defined in section 1.1 for section headings.
1.11 ―Manage user‖ page boxing
Tables on the Manage user page will include a header row that spans across the top of the main content area and joins with the table in the informational content area. This row will have a tan (hex value #FFCC99) background and will use a rounded top left corner as pictured below.
The table in the informational content area spans the entire width and height of that area and has a tan (hex value #FFCC99) background. It uses a rounded bottom right corner as pictured below.
1.12 ―Edit profile‖ page boxing, etc.
Tables on the Edit profile pages will feature a ‗tabbed‘ interface. The table that contains the tabs and the content for each tab will have a 2 pixel wide tan (hex value #FFCC99) border. The tabs will have a tan (hex value #FFCC99) background, which will change to white when the tab is active. There will be a 1 pixel wide white separator between each tab and a rounded top left corner as pictured below.
2 Icons
Help Information Error Warning Wayfinder Intermediate
step, not active
Wayfinder Intermediate step, active
Wayfinder final step, not active
Wayfinder final step,
active
Note that none of these icons are clickable. The HELP icon may show up on the screen either next to a field that has help associated with it, or will show up in the upper right corner of the content window when a whole page has help associated with it. The HELP icon is always accompanied by a link, as illustrated below:
Help Field help label
Click here for help on this page Page-level help label The INFORMATION icon is used to indicate ―tips‖ or ―nice-to-know‖ information on a screen—used only in the right column of a page. The WARNING icon is used to alert users to required fields within a form. The ERROR icon identifies fields that have errors within them.
E-Pass UI Design Document
Version 1.2 Page 12
3 Page Layouts
3.1 Home page
Main Content 625 pixels wide
750 pixels wide
Head
er
70 p
ixe
ls
Site Banner 50 x 450 pixels
DuPont Logo 50 x 300 pixels
Body
Foo
ter 5
0 pi
xels
Global Navigation Bar 20 x 750 pixels
Local Navigation 95 pixels wide
Copyright Notice and Internal use disclaimer 30 x 625 pixels
Gutter
10
pix
els
wid
e
Welcome Message 20 x 625 pixels
Link to Internet/Intranet usage guidelines 20 x 625 pixels
Gutter
20
pix
els
wid
e
Breadcrumbs 20 x 645 pixels
E-Pass UI Design Document
Version 1.2 Page 13
3.2 Start page – single role
Copyright Notice and Internal use disclaimer 30 x 625 pixels
Main Content 625 pixels wide
750 pixels wide
Head
er
70 p
ixe
ls
Site Banner 50 x 450 pixels
DuPont Logo 50 x 300 pixels
Body
Foo
ter 5
0 pi
xels
Global Navigation Bar 20 x 575 pixels
Local Navigation 95 pixels wide
Gutter
10
pix
els
wid
e
Welcome Message 30 x 625 pixels
Breadcrumbs 20 x 645 pixels
Personalization 20 x 175 pixels
Open requests 282 pixels wide Open tasks 283 pixels wide
Gutter
30
pix
els
wid
e
Gutter
30
pix
els
wid
e
Link to Internet/Intranet usage guidelines 20 x 625 pixels
Gutter
20
pix
els
wid
e
E-Pass UI Design Document
Version 1.2 Page 14
3.3 Start page – multiple roles
Link to Internet/Intranet usage guidelines 20 x 625 pixels
Breadcrumbs 20 x 645 pixels
Main Content 625 pixels wide
750 pixels wide
Head
er
70 p
ixe
ls
Site Banner 50 x 450 pixels
DuPont Logo 50 x 300 pixels
Body
Foo
ter 5
0 pi
xels
Global Navigation Bar 20 x 575 pixels
Local Navigation 95 pixels wide
Gutter
10
pix
els
wid
e
Welcome Message 30 x 625 pixels
Personalization 20 x 175 pixels
Open tasks 283 pixels wide
Gutter
30
pix
els
wid
e
Gutter
30
pix
els
wid
e
Role Navigation Bar 20 x 645 pixels
Open requests 282 pixels wide
Copyright Notice and Internal use disclaimer 30 x 625 pixels
Gutter
20
pix
els
wid
e
E-Pass UI Design Document
Version 1.2 Page 15
3.4 Single-column content page
Main Content 625 pixels wide
750 pixels wide
Site Banner 50 x 450 pixels
DuPont Logo 50 x 300 pixels
Body
Foo
ter 3
0 pi
xels
Global Navigation Bar 20 x 575 pixels
Local Navigation 95 pixels wide
Copyright Notice and Internal use disclaimer 30 x 625 pixels
Gutter
10
pix
els
wid
e
Welcome Message 30 x 625 pixels
Gutter
20
pix
els
wid
e
Breadcrumbs 20 x 645 pixels
Personalization 20 x 175 pixels
Head
er
70 p
ixe
ls
E-Pass UI Design Document
Version 1.2 Page 16
3.5 Three-column content page
Main Content 445 pixels wide
750 pixels wide
Head
er
70 p
ixe
ls
Site Banner 50 x 450 pixels
DuPont Logo 50 x 300 pixels
Body
Foo
ter 3
0 pi
xels
Global Navigation Bar 20 x 575 pixels
Local Navigation 95 pixels wide
Informational Content
180 pixels wide
Internal use disclaimer 30 x 625 pixels
Gutter
10
pix
els
wid
e
Gutter
20
pix
els
wid
e
Breadcrumbs 20 x 645 pixels
Page Title 20 x 445 pixels
Personalization 20 x 175 pixels
E-Pass UI Design Document
Version 1.2 Page 17
3.6 Daughter windows
3.6.1 General daughter windows
This layout applies to the following types of daughter windows:
Company/SBU/site search selectors
User and sponsor search selectors
Report selectors
Report criteria (filter/sort) selectors
Sponsor information window
Additional token information window
Topical help
Page-based help Note that the actual height of these windows may vary depending on the body size. Some widths may also vary, depending on the information to be displayed. Daughter windows will feature a title bar and minimize, maximize, and close buttons. They will have vertical scroll bars only and will not have a status bar or any toolbars (see section 5.7).
425 pixels wide
Head
er
20 p
ixe
ls
Body
Foo
ter 4
0 pi
xels
Main content area
400 pixels wide
Navigation links 20 x 425 pixels
Spacer 20 x 425 pixels
Gutter
25
pix
els
wid
e
Page Title 20 x 425 pixels
E-Pass UI Design Document
Version 1.2 Page 18
3.6.2 Field-based help
325 pixels wide
Head
er
20 p
ixe
ls
Body
Foo
ter 3
5 pi
xels
Main content area
300 pixels wide
Navigation links 25 x 325 pixels
Spacer 10 x 325 pixels
Gutter
25
pix
els
wid
e
Page Title 20 x 325 pixels
E-Pass UI Design Document
Version 1.2 Page 19
4 Specialized Page Treatments
4.1 Error pages
4.1.1 Input field blank or error
On those pages with input fields, where a user has left an input field blank or an acceptable value for one or more fields has not been provided, the following page treatment will be used:
E-Pass UI Design Document
Version 1.2 Page 20
4.1.2 Execution errors where operation is repeatable
Where a task is attempted but cannot be completed because a business rule has been violated or a system resource is unavailable (for example, the ACE infrastructure), and the operation can be retried, the following page treatment will be used:
E-Pass UI Design Document
Version 1.2 Page 21
4.1.3 Warning with continuation option
In some cases, execution of a task may create known side effects. Where these side effects would have substantial consequences, the application will describe the situation and allow the user to indicate whether to proceed with the task. The following page treatment will be used in this circumstance:
E-Pass UI Design Document
Version 1.2 Page 22
4.1.4 Unrecoverable system errors
Where a non-recoverable system error occurs the user will be automatically be returned to his/her start page, or if this is not possible or the user has not been authenticated, to the application home page. The error will be reported using the following page treatment:
E-Pass UI Design Document
Version 1.2 Page 23
5 Page Mockups
5.1 Home page
E-Pass UI Design Document
Version 1.2 Page 24
5.2 Start page – one role
E-Pass UI Design Document
Version 1.2 Page 25
5.3 Start page – multiple roles, current role corresponding to start page highlighted
5.4 Single-column content page, global navigation item active
E-Pass UI Design Document
Version 1.2 Page 26
E-Pass UI Design Document
Version 1.2 Page 27
5.5 Two-column content page, left navigation item active
E-Pass UI Design Document
Version 1.2 Page 28
5.6 Single column content page with tabbed interface
