Insurance Services Site Heuristic Evaluation

Version 1 Published October 20, 2011 Created by Neil Tenzer

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

2 of 35

Table of Contents
Heuristic Evaluation
Executive Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Executive Summary - Results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Global Elements & Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Findings & Recommendations

Dashboard . . . . . . . . . . . . . . . . . . . . . Client Profile . . . . . . . . . . . . . . . . . . . . Employee Search . . . . . . . . . . . . . . . . . . Employee Details . . . . . . . . . . . . . . . . . . Employee Details - Confirmation . . . . . . . . . . Employee Details - Family Members . . . . . . . . Download Page. . . . . . . . . . . . . . . . . . . Download Alert. . . . . . . . . . . . . . . . . . . Employee Details - Family Members Confirmation . Policies . . . . . . . . . . . . . . . . . . . . . . . Certificates . . . . . . . . . . . . . . . . . . . . . Create New Certificate - Step 1 . . . . . . . . . . . Create New Certificate - Step 2 . . . . . . . . . . . Create New Certificate - Step 3 . . . . . . . . . . . Create New Certificate - Confirmation . . . . . . . Reports . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .8 .9 11 12 14 15 17 18 19 20 21 22 23 25 26 27

UI Patterns & Helpful Links

Address . . . . . . . . Email . . . . . . . . . Phone Number . . . . Legend . . . . . . . . Messages & Feedback Helpful Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 30 31 32 33 34

Next Steps

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

3 of 35

Heuristic Evaluation
Outlines the results, review and recommendations of a site evaluation and usability review of the Insurance Services site.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

4 of 35

Executive Summary
Introduction
This section outlines the results, review and recommendations of a site evaluation and usability review of the Insurance Services site. Appendix I to this document is a compilation of the notes taken during the site evaluation and usability review by the expert reviewer. This brief provides the following information: 1. Findings A synopsis of the findings from the site evaluation and the usability review, including comments, concerns and questions for the issues encountered. 2. Recommendations The changes that the expert reviewer advises are necessary to improve the user experience of the Insurance Services site.

Methodology
During the course of the site evaluation and usability review, the expert reviewer navigated through the site as a regular user would. The purpose was to interact with each part of the site and gain a better understanding of the task and navigation flow a visitor would be required to navigate. This evaluation and document are based on an expert usability analysis of the Insurance Services site. Being that this review took place using static screens, knowing the location per clicking the links cannot be determined at this time. After compiling and reviewing these results, recommendations have been provided, based on experience and training, which will resolve the main issues outlined in this document. These recommendations are general to the site and may not apply to every page. For page specific details, please review.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

5 of 35

Executive Summary - Results

Results
The Insurance Services wire frame document provided a high-level overview of the site redesigned in the standard. The wire frame document allowed the team to get usability feedback before the site was coded. This is a good practice of the User Centered Design methodology and should be encouraged throughout the design process. The Insurance Services redesign: Demonstrated a basic level of standard knowledge. Properly applied the Dashboard template. Used the Wizard template to make a complex process easier for users. The heuristic review identified 2 key issue areas: Standard issues and Usability issues. Below is the summary of the issues. Issue Area Standard Usability Total Issues Standard Issue Break Down # of Issues Found # of Duplicate Issues Found # of Duplicate Occurances Usability Issue Break Down # of Issues Found # of Duplicate Issues Found # of Duplicate Occurances 27 16 6 53 44 10 # of Issues Found 53 27 80 During the review process, some issues were identified as spanning multiple pages and when addressed could allow for easy fixes that would increase the overall usability and positive user experience of the site. Page Titles - Rename the page titles to names that provide meaning and context to the user. Use the correct text and design style. Icon Usage - Use standard icons and place them in the correct designated areas. When icons are used in tables and grids, provide legends so users can quickly glance to find the meaning. Page Editing - Allow users to edit pages on page entry. Use the correct page edit form template. Messages - Use the correct message type that correlates to the provided message text. Filter/Search Area - Remove the Filter By area on the left. Incorporate the information into the main Filter/Search area per the standard. Address - Use the standard address pattern.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

6 of 35

Global Elements & Styles

Global Elements
The top-level icons (Preferences, Support, Log Out, Message Center,
Banner

Calendar, Profile, and Search) need to be updated per the standards. The About link should be removed from the footer.

Styles
Search/Filter Container

All text styles need to be updated per the standards. This

includes, but is not limited to: - Section Headers (incorrect font) - Field labels (incorrect font, not bold, no colon) - Links - Search/Filter Container - Pagination control - In line messages (Confirmation, Warning, etc.) - Tabs

In line Confirmation Message

Portlet Actions

(R)Evolution Form

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

7 of 35

Findings & Recommendations

Outlines the conclusions reached after examination of the Insurance Services site and courses of action.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

8 of 35

Dashboard
Findings
The role selector, displayed next to the name in the banner, is a component that is no longer supported by standards. The Support feature exists both as a portlet on the Dashboard Home page, as well as a link to an expanding window up in the main banner. A vertical scroll bar displays in the People portlet. The Client Profile portlet name does not speak to the client. The client would never refer to themselves as a client. The Alert icon used in the People and Certificate portlets is not supported by the standards.

Recommendations
Navigating between roles is provided via the mega menu. Based on the users login credentials, the mega menu will contain different menu structures that support the roles the user can access. Remove the Support portlet as it does not need to be duplicated. The Support link is a global component and should contain all of the same information. The amount of rows displayed in the grid should fit within the constraints in the portlet. When additional data rows do not fit, display a view all link at the bottom of the grid. The links on the Dashboard page should open into full portlets within the specific mega menu tab as it pertains to them. Rename Client Profile to Company Profile or My Company in all instances in the application. Reference the standards on accepted icons and how to use icons appropriately. Legends should be provided at the bottom of grids when icons or colored text is used.

Figure 1. Insurance Services Dashboard Home Page

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

9 of 35

Client Prole
Findings
The standards does not support the appearance of the four icons in the right area of the central object. Three of the four icons displayed in the central object are not supported by the (R)Evolution standards. The central object should contain more information than the company name. All fields should be editable upon entry of the page. The Account Activity/History section is confusing on the page level context as well as taking up screen real-estate.. How much history is shown? Will it scroll? The placement of the Edit buttons does not follow the standards. Incorrect field label layout and usage (i.e., Home Address and E-mail).
Figure 2. Insurance Services Client Profile

The Address format does not follow the standard.

Recommendations
Remove the icons from the central object and place them at the portlet level (in the portlet header) in an Action icon. The Action icon will contain links to export to PDF, export to excel, export to e-mail, and print. Remove the central object from the page. Put the name of the company on the page in place of the General Info heading. For the Company Details: Remove the Edit button and have all of the fields editable upon entry of the page. For the Authorized Contacts: Remove the Edit button and allow for the rows to become editable when clicked. Provide Add and Delete icons above the Authorized Contacts grid for the adding and deleting of contacts.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

10 of 35

Client Prole (contd)

Add Save and Reset buttons on the page to support the editable page. The buttons should be placed at the bottom left of the page in the following order: Save and Reset. The buttons should be placed 40 px from the last UI element on the page and 10 px between buttons. Remove Account Activity/History section from the page. There are 2 recommendations to resolve the issue. 1. Place a link titled History in the portlet action icon. The History link should open a light box window containing the History information. 2. Place it in context of a history task flow in another area of the menu. Follow the standard address entry format. Follow the standard e-mail entry format.

Figure 3. Insurance Services Client Profile

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

11 of 35

Employee Search
Findings
The page title is not needed on this page. The information it is containing is not appropriate for a page title. The left side Refine by Plan component is not a standard filter format . The Alert icon used in the grid is not supported by the standards. There is no way to view the masked information. The column header Classification is confusing. Its information has the same format as SSN.

Recommendations
Remove the page title. The information it contains is displayed as part of the pagination control that is placed over the grid. Use the central object background for the Filter area. Remove the left side Refine by Plan filter component and add the information as part of the standard filter component that is over the grid.
Figure 4. Insurance Services Employee Search

Reference the standards on accepted icons and how to use icons appropriately (i.e. , provide fly over text or add a legend). Legends should be provided at the bottom of grids when icons or colored text is used. Add a Reveal link above the grid. This control allows users to see the masked information for a 10 second period of time before switching back to the masked format. Rename the Classification column header to Social Security Number or SSN. Rename the portlet name & bread crumb to Employee Profile.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

12 of 35

Employee Details
Findings
The standards does not support the appearance of the four icons in the right area of the central object. Three of the four icons displayed in the central object are not supported by the standards. The central object should contain more information than the company name. All fields should be editable upon entry of the page. The Account Activity/History section is confusing on the page level context as well as taking up screen real-estate.. How much history is shown? Will it scroll? The Approved icon used in the History area are not supported by the standards. The placement of the Edit buttons does not follow the standards. Incorrect field label layout and usage (i.e., Home Address). The Address format does not follow the standard. SSN masking lacks consistency between pages (Employee Details masks all but the last 4 digits and Employee Search masks all digits) and there is no way to view the masked information. The portlet name and ending bread crumb trail should not be the employees name. The placement of the Submit and Cancel buttons do not belong in the wizard bar as this page is not part of a wizard.

Figure 5. Insurance Services Employee Details

Recommendations
Remove the icons from the central object and place them at the portlet level (in the portlet header) in an Action icon. The Action icon will contain links to export to PDF, export to excel, export to e-mail, and print.
Figure 6. Insurance Services Employee Details - Edit Mode

Remove the central object from the page. Put the name of the employee on

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

13 of 35

Employee Details (contd)

the page in place of the General Info heading. Remove the Edit button and have all fields editable upon entry of the page. - The SSN & Employee ID fields should show information as masked in the text entry box. When the user clicks into box to add or edit, the masked information will change view so you can see what you are entering. When leaving the field the information will return to the masked state. The Reveal link should appear to the right of the text entry box. - Change the Submit button to a Save/Save & Exit combo button. Clicking Save saves the information and the user stays on the page. Clicking Save & Exit saves the information and brings the user back to the Employee Search page. The Cancel button cancels all information entered from the last saved state and brings the user back to the Employee Search page. The buttons should be placed at the bottom left of the page in the following order: Save combo button and Cancel. The buttons should be placed 40 px from the last UI element on the page and 10 px between buttons.
Figure 7. Insurance Services Employee Details

Add a Reveal link next to the Employee ID and SSN fields. This control allows users to see the masked information for a 10 second period of time before switching back to the masked format. Remove Account Activity/History section from the page. There are 2 recommendations to resolve the issue. 1. Place a link titled History in the portlet action icon. The History link should open a light box window containing the History information. 2. Place it in context of a history task flow in another area of the menu. Follow the standard address entry format. Decide on how the product is going to mask SSN (mask all but last 4 digits or mask all digits) and use the masking rule consistently throughout the product. Rename the portlet name to Employee Profile as the portlet name should never be the detail of the object you are on. Change the ending bread crumb to Employee Profile as it should never show the detail of the object you are on.

Figure 8. Insurance Services Employee Details - Edit Mode

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

14 of 35

Employee Details - Conrmation

Findings
The use of the Hide link in the Confirmation message is not supported by the standards. The highlighting of any updated/changed information is not part of the standards.

Recommendations
Remove the Hide link from the in line message. Reference the Standard for specific information on in line messages. Remove any green highlights representing updates/changes.

Figure 9. Insurance Services Employee Details Confirmation

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

15 of 35

Employee Details - Family Members

Findings
Information in the Family Member section does not flow well. Dependent Information is mixed with Benefit information and is confusing. Is the user adding a dependent? Are they adding a dependent to a benefit plan? All fields should be editable upon entry of the page. The placement of the Submit and Cancel buttons do not belong in the wizard bar as this page is not part of a wizard. Family Member title is misleading. Most benefit plans allow employees to cover dependents other than family members (example: Domestic Partner, etc.). The use of the secondary central object is not necessary. The sub header General Info & Plans is not needed. The Add Family Member button does not follow the standard button naming convention. Text box entry of Relationship and Gender allows for not standard naming conventions and could allow for database confusion especially when sending information to carriers.
Figure 10. Insurance Services Employee Details - Family Members

Recommendations
Remove the Family Members section and redesign the information so that it is clear that users are adding dependents and enrolling in benefit plans. It is recommended to break the information into 2 tabs Benefit Elections and Dependent Information. (example)

Benefit Elections Tab - Use this tab as a Summary of all the Benefit Elections the employee has made. It is suggested to place the information in a grid

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

16 of 35

Employee Details - Family Members (contd)

that displays the Benefit Area, Benefit Plan, Covered Individuals, Employee Price, and Employer Contribution. Clicking on the Benefit Area link will allow the user to enroll/change the plan (i.e., Aetna, Horizon, etc.) and cover dependents. This page would allow the user to show Employee elections as well as dependent coverage. Dependent Information Tab - Use the CRUD model to add, update and delete dependents. Include a reveal link above the grid to reveal the SSN and DOB information. When clicking on the Add button or Edit link users will be taken to a different page or pop up depending upon the amount of information needed. Grid order of column headers should be check box, First Name, MI, Last Name, DOB, SSN, Relationship, Gender. First Name will be a link to open the edit page. Relationship and Gender fields should use drop down selection of a standard data set.

Figure 11. Insurance Services Employee Details - Family Members - Edit Mode

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

17 of 35

Download Page
Findings
An in line Warning message is not the correct message type. The placement of page content diminishes the importance of certain information (i.e., Request ID). The Submit and Cancel buttons are confusing. The placement of the Submit and Cancel buttons do not belong in the wizard bar as this page is not part of a wizard. What happens when a user click Cancel? How do users access the documents to download again? Are the submitted changes still saved? The green check icon used for document download complete is the incorrect use of the Confirmation icon. What starts the download process? What do the document name links do? Standard does not provide a widget for displaying download progress in a bar.

Recommendations
Figure 12. Insurance Services Document Download

Instead of a full page, place the information into a light box pop up with an OK button and Cancel link. The OK button should become enabled once the user downloads all of the documents. Replace the Warning message style with an Information message, and remove the Next Steps: text in the message. Reorder information on the page. Place the Request ID under the in line message followed by the instructional text, address and download box area. Provide a Download button next to each document. The Download button could then change to show the standard processing (downloading) message with a spinner. The button would go away once the download is complete. Unless the links open to the actual documents, remove links from document names. Change download complete icon to the Standard check icon.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

18 of 35

Download Alert
Findings
The message text is not alert necessary. The OK button name is not standard.

Recommendations
Remove the alert altogether nor is it necessary to inform the user of this information multiple times.

Figure 13. Insurance Services Download Alert

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

19 of 35

Employee Details - Family Members Conrmation

Findings
An in line Warning message is not the correct message type. The use of the Hide link in the Confirmation message is not supported by the standards. The highlighting of any updated/changed information is not part of the standards. The Alert icon and Approved icon used in the History area are not supported by the standards.

Recommendations
Use the standard Confirmation Message. Remove the Hide link from the in line message. Reference the Standard for specific information on in line messages. Remove any green highlights representing updates/changes. Reference the standards on accepted icons and how to use icons appropriately (i.e. , provide fly over text or add a legend). Legends should be provided at the bottom of grids when icons or colored text is used.

Figure 14. Insurance Services Employee Details - Family Members Confirmation

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

20 of 35

Policies
Findings
The Help icon is not supported for use within a tab. The page title is not needed on this page. The information it is containing is not appropriate for a page title. There is no way to view the masked information. The Alert icon used in the grid is not supported by the standards. The link in the Status column is confusing. Can policies be added and/or deleted from the grid? Policy Number link is confusing. Does it reveal the Policy Number?

Recommendations
Use a single Help icon for all information on this page and place it in the far right of the portlet header. Remove the page title. The information it contains is displayed as part of the pagination control that is placed over the grid.
Figure 15. Insurance Services Policies

Reference the standards on accepted icons and how to use icons appropriately (i.e. , provide fly over text or add a legend). Legends should be provided at the bottom of grids when icons or colored text is used. Add a Reveal link above the grid. This control allows users to see the masked information for a 10 second period of time before switching back to the masked format. The Status link should be moved into a separate column with a column header that clarifies what the links represent. Remove the Policy Number link. Have the Carrier Name link open up a page/pop up containing additional information that is associated with the record.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

21 of 35

Certicates
Findings
The page title is not needed on this page. The information it is containing is not appropriate for a page title. The button to create a new certificate does not follow the standard Add New button format. Can Certificates be deleted from the grid? The left side Refine component is not a standard filter format . The Alert icon used in the grid is not supported by the (R)Evolution standards.

Recommendations
Remove the page title. The information it contains is displayed as part of the pagination control that is placed over the grid. Replace the New Certificate button with the standard Add icon. Fly over text displaying Add New Certificate can be added to provide further information.
Figure 16. Insurance Services Certificates

Remove the left side Refine filter component and add the information as part of the standard filter component that is over the grid. Reference the standards on accepted icons and how to use icons appropriately (i.e. , provide fly over text or add a legend). Legends should be provided at the bottom of grids when icons or colored text is used.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

22 of 35

Create New Certicate - Step 1

Findings
Help Icon Placement is not Standard. Does the user really need to identify the number of certificates being issued in this step? It may make more sense to place it on the Recipient Info Step (step 2).

Recommendations
Place the help icon to the right of the text field, check box, drop down, etc. Remove the Number of Certificates field. This will help in the Step 2 redesign. Refer to page 23 for the Step 2 redesign to see how the new design handles adding multiple certificates.

Figure 17. Insurance Services Create New Certificate - Step 1

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

23 of 35

Create New Certicate - Step 2

Findings
Page Title is not the Standard Wizard Title format. The Address format does not follow the standard. Bar lines separating check box responses is not standard. Left hand navigation is not standard for Wizards. It is not clear as to which certificate the user is filling out the information for. Waiver Information gets lost within the wizard scrolling area and information pertaining to the selected waiver option falls below the page fold. Users can easily move to the next step without seeing the additional fields. Date text field is not Compliant. Italic text at the bottom of the waiver section gets lost. Selection of company in combo button is not standard.

Recommendations
Follow the standard Wizard Page Title format of Step 1 of 3: <<Step Name>>.
Figure 18. Insurance Services Create New Certificate - Step 2

Follow the standard address entry format. Remove bar lines around the check box responses for Send Copies to: * text field. Remove the left hand navigation area. Redesign the information so that it is clear to users which certificate number they are entering information for and so the waiver section does not get lost. It is recommended that this page should use the following components. - Instructional text that notifies the user that they can only enter up to 5 certificate holders within the grid. - CRUD Grid on page. Initial grid would have add button with the following

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

24 of 35

Create New Certicate - Step 2 (contd)

grid columns: Holder Name and Waiver. - Clicking the Add button would open a light box pop up containing 2 tabs: Certificate Holder and Waiver. - Light box pop up should have a Done button with Cancel and Add Another Links. Clicking Add Another would save the information entered and clear the form so the user can add another Certificate Holder. - Certificate Holder tab should contain all information up to the Waiver section. - Waiver tab should contain the 3 waiver options with subsequent information pertaining to each radio button option. Subsequent information should not appear in a grey background. It should just appear on the page as per the progressive disclosure model. - Add an Information Message under the radio buttons when the user selects option Waiver of Subrogation. The informational message would contain the italicized text at the bottom of the Waiver of Subrogation section. Remove the Company Combo button next to the greeting in the banner. Users can select companies by using the search area in the banner area.

Figure 19. Insurance Services Create New Certificate - Step 2

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

25 of 35

Create New Certicate - Step 3

Findings
Page Title is not the Standard Wizard Title format. Field level help is not in the proper location and not necessary for two fields.

Recommendations
Follow the standard Wizard Page Title format of Step 1 of 3: <<Step Name>>. Remove field level help and provide a single help icon in the top right corner of the page.

Figure 20. Insurance Services Create New Certificate - Step 3

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

26 of 35

Create New Certicate - Conrmation

Findings
Confirmation does not belong on its own page within a wizard. It is confusing to click on Done only to have to click Done again to really complete the wizard. Request/Ticket number is lost on the page. It should be in a more prominent place.

Recommendations
Remove this page. Clicking the done button on Step 3 should navigate the user to the Certificates page. Place the in line confirmation message at the top of the grid on the Certificates page. In line Confirmation message should display the Request/Ticket number first. Then tell the user about ADP needing to review the request and that a message will be e-mailed and sent to the message center.

Figure 21. Insurance Services Create New Certificate - Confirmation

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

27 of 35

Reports
Findings
The page title is not needed on this page. The information it is containing is not appropriate for a page title. The left side Filter by Plan component is not a standard filter format . Tabbed report types are not needed. Users should be able to select report at a higher search level. The Help icon is not supported for use within a tab.

Recommendations
Remove the page title. The information it contains is displayed as part of the pagination control that is placed over the grid. Use the central object background for the Filter area. Remove the left side Filter by Plan filter component and add the information as part of the standard filter component that is over the grid. Remove tabs on the page. Redesign the search to use one main filter central object. Users will be able to select a report type and then refine the filter criteria through the selected reports associated plan check boxes. Check boxes under the selected Report Type are enabled. (Example)
Figure 22. Insurance Services Certificates Reports

Use a single Help icon for all information on this page and place it in the far right of the portlet header.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

28 of 35

UI Patterns & Helpful Links

Provides information on UI Patterns and links on standard information.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

29 of 35

Address
Pattern Details
Address Fields shall be displayed with Country first. The selection of country will drive the fields that will display below for the address format. Example: Choosing Canada will change the fields to the following format. Country: Address: City: Province: Postal Code: City is the revit.form.search widget and will work as follows: User can type in the state. As the user types the results will be filtered. Results will display City and State. Upon selection of the city, State will populate. Generic Format: The country drop down will also have an option for a generic format for address called other. Selecting the other option will present the user with the address information and the user selects if it is a state, province, or region and ZIP Code or Postal Code.
Figure 23. Standard Address Pattern

Use My Address: This is used when the users address is in our data base and we are asking the user to fill out address information (example - we need to collect dependent address, user can select use my address if the dependent address is the same as the users). Checking the Use my address check box will present the users address as read only information.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

30 of 35

Email
Pattern Details
Email shall be displayed with a default option of Personal and User for notifications selected with the following options in the drop down field name: Personal Work Other
Figure 24. Standard Email Pattern

Once a user has completed the email entry, the user has the option to add an additional email by clicking Add Another. When Add Another is clicked a new email drop down field and text entry will appear. Users can delete the additional email by clicking on the grey x icon to the left of the additional email field. On page validation (i.e. Save) when no values or duplicate values are entered display an error message. General Rules: When adding additional email addresses the page content that falls below the email section will be pushed down. When removing email addresses the page content that falls below the email section will move up. Email Type [Drop Down] - Personal is the default option in the drop down. Product teams can add additional options per the business requirements and can change the default option if needed. Add Another [Link] - clicking the add another link will present the user with an additional email address text field and drop down box. The user will then select the email type. Depending upon business rules users may or may not enter more than one email address type. Remove Email Address [Icon Button] - clicking the (x) icon located to the left of the email type drop down will remove the email address entry. Users may not delete all email addresses. They must always have 1 email type drop down and text entry box.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

31 of 35

Phone Number
Phone number fields should be long enough for any international phone numbers. In some areas of the world, the local phone number can be 12 digits long. Reserve space for the area code and the country/region code, too. Field for Extension or PIN is optional. General Rules:
Figure 25. Standard Phone Number Pattern

When adding additional phone numbers the page content that falls below the phone number section will be pushed down. When removing phone numbers the page content that falls below the phone number section will move up. Phone Number Type [Drop Down] - Home is the default option in the drop down. Product teams can add additional options per the business requirements and can change the default option if needed. Add Another [Link] - clicking the add another link will present the user with an additional phone number text field and drop down box. The user will then select the phone number type. Depending upon business rules users may or may not enter more than one phone number type. Remove Phone Number [Icon Button] - clickin the (x) icon located to the left of the phone number type drop down will remove the phone number entry. Users may not delete all phone numbers. They must always have 1 phone number type drop down and text entry box.

Pattern Details
Phone Number shall be displayed with a default option of Home with the following options in the drop down field name: Home Mobile Work Fax Pager Other

Once a user has completed the first phone number entry, the user has the option to add an additional phone number by clicking Add Another. When Add Another is clicked a new phone number drop down field and text entry will appear. Users can delete the additional phone number by clicking on the grey x icon to the left of the additional phone number field. On page validation (i.e. Save) when no values or duplicate values are entered display an error message.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

32 of 35

Legend
Pattern Details
The legend text link is located at the bottom right side of the grid. On-click it displays a tooltip dialog containing the legend details. In the dialog, the icons are located left followed by the text description. Display a single item legend in the same location, at the bottom right side of the grid, as read-only text.

Figure 26. Standard Multiple Item Legend Pattern

Figure 27. Standard Single Item Legend Pattern

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

33 of 35

Messages & Feedback

Pattern Details
Messages are divided into three categories. A message may be inline within the page or may generate a separate page or dialog. Modal Messages - Information message, Warning message (Confirmation dialog), Confirmation message, Error message, In-progress Indicator Inline Messages - Error message, Confirmation message, Information message, Alerts and Warnings, In-progress Indicator, Wait Indicator Error Messages - Inlcude three things in the content of an error message:
Figure 28. Standard Modal Message Pattern

1. A brief explanation of what happened or what went wrong, in language that the user will easily understand. Identify where the problem happened (which field). 2. The reason for the problem or requirement in terms familiar to the user. 3. A recovery strategy that the user can adopt to solve the problem. Common Inline Message Types:

Figure 29. Standard Inline Message Pattern

Informational - Are used to communicate important information to a user related to a specific form, process, or application.

Confirmation - Are used to communicate the application/server has successfully completed an action or request the user performed.

Alerts and Warnings - Are used by clients as broadcast messages regarding specific applications or features to all users.

Figure 30. Standard Error Message Pattern

Error - Are used to convey errors or omissions when a user submits a form, search, or other query requiring manual input.

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

34 of 35

Helpful Links

Insurance Services Site Heuristic Evaluation

Version 1 published October 20, 2011 by Neil Tenzer

35 of 35

Next Steps
Publish findings to the Insurance Services Team. - Opportunity to review detailed findings. - Present to a broader audience at the discretion of the stakeholders. As part of the requirements elaboration, working in collaboration with the User Experience Design (UX Design) team address the issues identified in the review. Work in close collaboration with the UX Design team for reviews as the product moves into implementation. Schedule periodic reviews.