Mike Kippenhan
Due to the nature of Health Management and Retirement Services, YBR is a content heavy Web site. Content is presented in a three column layout; the overall width is 740 pixels with the Web site being centered in the browser window; bordered by very light grey background when the window is expanded. The center and left columns are populated by contextual information, while the right column contains search functionality and contextual messages all within a darker background. In select areas such as Retirement Planning, the layout shifts into a single column format with additional tab navigation for the content. Primary navigation is provided by a horizontal bar placed under the branding area with the complete feature set of 10 primary content areas; however, most clients do not utilize the full suite. Secondary contextual navigation, when applicable, is contained in a horizontal bar directly below the Primary navigation. The site utilizes pop-up windows, however the use of this feature is inconsistent. The Web site also has numerous tools and transactions, all of which utilize different functionality.
The overall function and subsequent content of the Web site is, by nature, characterized by numerous charts, tables, caveats, qualifiers, data entry fields and pull down menus. Visually, the Web site has few images apart from the branding bar. and the most frequently encountered graphic elements are contextual charts and graphs.
The complexity of the services and content of YBR highlight the need for a robust and easy to use navigation. Currently, the primary and secondary navigation of YBR is the Achilles Heel Visual Hierarchy of the Web site and represents the highest priority for improvement. In its present state, the navigation reflects content changes and additions without addressing the architecture or contemporary applications of Web navigation. Then secondary navigation appearing in a small horizontal bar below the primary navigation appears dated and lacks any hoover or click state to indicate where the user is. In a Web site as complex as YBR, where pages are often linked via tools and transactions, the navigation does not aid users in what can be complex decisions and interactions. Compounding this, the Web site lacks bread crumbs which would also assist users in navigating the site. To address these concerns, YBR needs both a re-architure and navigational system to reflect this.
For the navigation, a cascading menu system should be inplemented that would offer users a clearer and more logical experience. The advantages of cascading menus far out weight and disadvantages, especially when navigating content with as many options as YBR. In the content area, side menus could be impleented to help control secondary information, promotions and/or third–party content.
In the current YBR Web site, navigation and content are presented in a relatively uniform manner of size and color. In order to address accessability requirements, all content is HTML. The only typographical variation is size, weight (roman or bold) and color and all links are underlined. The end result is there being little visual difference between navigation, content, technical footnotes and pro-active information. This, and the fact that many pages utilize numerical tables unfortunately brings to light the Web site's lack of a prounced Visual Hierarchy and the need for one to be established. The lack of hierarchy and refined content/information design will be a critical step to the redesign of YBR and one that will require the greatest amount of exploration and usability testing.
The are numerous techniques and methods that YBR could utilize to help create a defined information hierarchy including the following. Colored type, for example “medium grey” in footnotes and other necessary-but not critical-content would remain legible while not having the visual weight of primary content. Another solution would be to make the headers, or tabs, a solid background color with white (reversed) text. Both, or either, of these methods could be supplimented by introducing “All Caps”. A directed use of this typographic method in specific areas such as tab headers, would be an effective technique to seperate and distinguish content. Currently, all links within YBR are underlined, even in the off state, all of which adds to the visual congestion of the Web site. By utilizing underlines or back highlights in the hover state, the amount of visual noise would be lessened.
Typographically, non-browser standard type can be introduced via SIFR. This would allow the use of non–browser typefaces such as a Slab Serif or other distinctive faces that could contribute to the creation of a visual hierarchy. The effectiveness of typefaces introduced via SIFR is Oprah Winfey where the overall visual quality is higher than standard html generated type. Even though SIFR does not allow text to be read by accessibility programs, Hewitt could explore the option of having two parallel Web sites, once of which is stripped down HTML to address accessibility issues.
One clear example and consequences of lacking a strong visual hierarchy are the tabbed facts such as Did You Know that are found throughout YBR. Even though these areas have different tab colors and light tan backgrounds, they appear to be content, when in fact, they are content created to add value to the YBR site. Differentiating these areas visually would make them immediately recognizable and of greater benefit to the user.
In the long run, while HTML generated navigation and content saves time, in this case the user experience could be improved with a few changes.
The current graphic elements of YBR comprised rounded corner tabs and rules. While these help differentiate content and create hierarchy, the rounded corners, with their large diameters and gradient or solid fills appear unrefined. All buttons are dynamically generated and could be easily replaced with CSS generated ones.
One aspect of YBR that contributes to its dated appearance is the page width. Currently, YBR utilizes a fixed width of 740 pixels—a dimension that is currently being utilized by only 8% of displays. In fact, the trend towards higher display resolutions, such as 1024 x 768 is becoming a common visual trade mark of contemporary Web sites. If YBR increased page width, it would will help address spatial and content issues, reflect a more contemporary approach to Web site design and differentiate it from most of its competitors. In the case where a client’s employees are accessing YBR through a kiosk, smaller dimensions could be utilized (exact data on how many people utilize the site through a kiosk is not available).
This Web site has the strongest overall visual quality with graphic rules and boxes helping differentiate and separate content. As the user travels deeper into the Web site, more graphic elements are encountered which make these internal pages more effective visually than some of the earlier, less designed pages. Fidelity(k) utilizes photos throughout site and as predictable as they are, they add some visual interest. Page width is 764 pixels.
The most evident aspect of this Web site is the heavier top branding and navigation bar which adds visual weight to the top of the page. All text is generated via html and the graphical boxes have square tops and rounded bottoms–flipped versions of YBR. Two aspects of the Web site that result in both poor usability and branding decisions are the top navigation bar and page dimensions. The top navigation bar changes, visually, depending on what section the user is in and often, backward navigation is unavailable. In addition to this, many internal pages utilize a frame set, thus allowing the navigation to remain in place while the content is scrollable. Another aspect is the fact that the side bar navigation of the previous page remains in place until the user clicks on the subnavigation. Page dimensions range between 775 and 1000 pixels wide.
The most notable aspect of their Web site is the use of their corporate color–deep red. This is a nice break from the variety of blues often associated with the financial sector. In content areas, Vanguard incorporates light blue, a color that doesn’t necessarily compliment the red, but maintains the industry standard. Navigation is provided with tab shaped buttons with subnavigation appearing in a solid bar below. As with the other sites, all text is HTML. Below the navigation bar, a lightly colored box appears with a small image on the right side. This box functions by either summarizing content or posing questions to the user–a design element not seen in the competitors. A notable design aspect of this Web site is that the top branding bar is the smallest, and least populated among the competitors which, in this case, results is the Web site appeaings incomplete, as if a graphic element did not load. Ultimately, an opportunity to distinguish the band is lost. On pages such as Determine how much to save, the manner by which the questions are asked in rudimentary HTML layout is simplistic at best. Page width is set to 1048 pixels, however, the site is scalable.
Schwab has done one thing that the competatros have not–utilize a broad range of colors which estentially color codes their Web site. Most likely derrived from their corporate (secondary) color palette, these colors distuinguish the larger content (navigational) areas. The Web site also integrates Schwab's ubiquitous Talk to Chuck word bubble from their print and broadcast collateral. In step with the rest of the market, they utilize primarily HTML text on content heavy pages. The Web site’s large headers help the user determne thier location within the Web site, however, since they are rudimentary HTML, they don't have the visual and navigational impact that would make them memorable. The Web site is approximately 770 pixels wide and Schwab smartly extends the color band to the right as the browser expands, a nice touch to avoid the vacuum of white space. The overall design of the Web site positions Schwab at top of the competition.
Even though JP Morgan is not a competator, their top graphic banner, demonstrates a level of design and spatial usage not found in the proceeding Web sites. The combination of this graphic and top navigation bar illustrates that the financial sector is open to design. The Securities Services banner includes a complex annimation.
Each of the competitors, as well as Hewitt, utilize similar stock photography on their Web sites. The imagery is predictable and safe and could be interchanged between the brands with no consequences. This sort of imagery offers nothing unique the brands and nothing more than a little color on otherwise text heavy pages. It is also interesting to note that many sites, especially consumer based products such as Sony, Adidas and Apple are using large images; obviously to showcase their product, but acknowledging higher band widths and larger screen resolutions.
The colors most often utilized on these Web sites are light, bright blues. These are a safe colors in that they are not too bright, not too dark, not too neutral and are, or are similar to, Web safe colors. utilizing Web safe colors throughout a Web site is an aspect that can contribute to it appearing dated. In the case of buttons, HTML generated, or simple, flat buttons lack any sense of design. Not only the flat colors, but the rectangular shapes don't add anything to a Web site. It is possible to something a little more interesting.
The most notable aspect of Fidelity 401(k)’s home page is the lack of information hierarchy. Three key service components—Saving for College, Net benefits and What it takes to retire well—are all presented in graphical boxes of approximately the same size and visual weight. Another illustration of the determent of weak hierarchies is Are you saving enough?. What is and should be a key component to a retirement Web site is lost in a sea of HTML generated text. The hyperlink doesn't stand out and thus appears to be no more important than any of the other 401(k) information. From the home page Fidelity offers My Plan Snapshot, a flash based application that asks five simple question, then generates a graph indicating how much money the user would need to reach their retirement goals. Once the calculation has been performed, bar graphs illustrae how their investment would perform in a poor and average market. Sliders allow the user to adjust either their contribution, retirement age or investment style to determine how long it will take to meet their goals. Next steps include Create a plan and Save more buttons. This application is simple to use and offers an immediate, clear indication of where the user fits within their retirement plan. Finally, It is interesting to note that of the three most frequently requested pages, Tools, Change Address and Login Help; the one with the most long term benefit to users—Tools—is not found on the home page.
The home page navigation represents T. Rowe Price’s entire services, thus, a user will navigate to the desired section, bookmark it and not cross navigate; this essentially renders the home page to a portal entry. The path Home Page > Individual Investors > Already an Investor is the area where individual investors would most likely utilize on a regular basis. Unfortunately, this section is so dense with information and hyperlinks that a simple starting point is not evident. Navigating through the Web site illustrates that this is the standard for T. Rowe Price and the resulting user experience isn’t easy or unique.
Vanguard offers a retirement planning tool, however rather than actually being a tool, it is a series of pages, each looking like the other. When the user finally arrives at Determine how much to save, the functionality is contained within the body of the content and thus, it doesn’t have the stand out ”tool” appearance of similar functions found on Fidelity. In addition, when comparing it to the Fidelity tool, Vanguard’s tool offers the minimal amount of function, it is too simplistic to be of help. Buried at the bottom of the Web site is a link Investing for Retirement, which, visually, does not reflect the importance of this content and is a clear indication of how the lack of thoughtful User Interface Design is a disservice.
Chuck offers their Retirement Savings Calculator as a series of HTML pages, nothing exciting or special. A cursory examination of the Schwab site indicates that they have the same functionality as the competators. One feature unique to Schwab are roll–over feature/service advertisements which encourage the user to trade through Schwab. These roll–over advertisements are an effective introduction to the Active Trading section.
Ultimately, all four of the companies have content and services beneficial to a user, but the packaging and presentation isn't helping make the user experince easier.
The biggest obstacle to Hewitt and Your Benefits Resources is the presentation and distillation of information and content into easy-to-use yet accurate presentations. With streamlined primary navigation and the redesign of content to relfect the needs and actions of the user, the design of YBR would reflect the user’s, or non-expert’s, point of view. When comparing YBR to the competitior's Web sites, it fits well within the market category in both functionality and design. But is that may not be a good measure. Since the overall visual and informational approach to YBR appears dated and reflects “content dumps”, it is time that Hewitt developes a more sophisticated, considered approach for the services. Currently, the Benefits and Financial sectors as a whole have failed to capitalize on strong design and usability in their Web sites, and are failing to recognize the sophistication of their users. In a market sector where content, services and functionalty are relatively the same, a Web site that reflects a more sophisticated presentation of information and the user's visual expectation, will make it immediately recognizable and offer unique user experiences.