Whether you are a do it yourselfer or a veteran financial planner, Morningstar's robust investment information makes it one of the most authoritative financial resources on the internet. A typical user may view a mutual fund's expense ratio, moving average, or current NAV value to help decide on a fund purchase. Another user may simply check on the “star rating” Morningstar provides for each fund. Information gathering can be at a high level or can be very granular depending on the user, how much they drill down into the information, and statistical data provided. There is a need for financial information that can be accessed in real time. For the day trader this information must be reliable and available constantly. It has been suggested that the market's volatility may be due in part to the ability to automate trading and stop loss orders through the web. I feel Morningstar is a major information resource for financial investing. Applying the usability guidelines offered at the usibility.gov website (/usability.gov/guidelines), I set about applying these guides to a site analysis of www.morningstar.com. Sections are ranked on a scale of 1 to 5, 5 being the best.
Usability checklist findings:
Page Titles and Headings were used effectively? Score: 5
All the major investment types are located at the top navigation in full view and are easily accessible. They remain throughout the user's experience as they navigate through the site. From section 1:3: Understand and Meet User's Expectations: "The use of familiar formatting and navigation schemes makes it easier for users to learn and remember the layout of a site." On each page there is the appropriate sub heading and page title to inform the user where they are.
Page Length was appropriate for the site? Score: 3
The scrolling on the home page is a bit too long. I feel there is redundant information in the areas linking to the screenings and research sections. I do like the news overview widgets that provide the latest information on stocks, ETFs, etc. In section 5:7: Limit Homepage Length: "If users conclude that what they see on the visible portion of the page is not of interest, they may not bother scrolling to see the rest of the page. Some users take a long time to scroll down 'below the fold,' indicating a reluctance to move from the first screenful to subsequent"
Search capabilities were available on the web site? Score: 5
Perhaps the most important search feature of any brokerage or investment site is the market quote. Both the stock ticker search and the general site information search widgets are displayed throughout at the top level.
The site used sound navigational principles? Score: 5
According to section 6:3: Place Important Items at Top Center. Major section navigation items are at the top for the page. The user knows where in the site they currently are by the highlighted navigation tabs and the page title sub heads. Clicking the logo will bring the user back to the home page. See section 7:2: Differentiate and Group Navigation Elements. The site makes use of "group navigation" principals. "Clearly differentiate navigation elements from one another, but group and place them in a consistent and easy to find place on each page". Here we see the excellent use of the page title, highlighted section tab, and the valued Morningstar "star rating" system rendered in the Chrome browser.
Graphics were used effectively on the site? Score: 3
With any financial site chart graphs are used extensively. The market index area reveals the moving daily average for the selected region. It loads somewhat quickly and provides robust information. Although not for every level of investor, many find this useful. Commercial "ad" graphics abound. On the home page the ad graphics are kept at the footer, however navigating through the site the ad graphics are placed at the top of the page. For the home page this is correct. From Section 14:7: Limit Large Images Above the Fold. "Large graphics that cover most of the screen at the top of the page suggest to users that there is no more information below the graphic. In one study, because a graphic filled the screen, some users did not use the scrollbar to scroll down to more content." There is a sponsor's area to the right side call out. Some of the applets are done in "Flash" animation, others as animated gifs and Java applets. Load time is always an issue. Disappointingly however the graphics lack any title tag, or alt tag which would provide information when mousing over, or disabling graphics.
The use of fonts was appropriate for the site? Score: 4
The site uses Verdana as the font and scales nicely to allow site resizing. This font is available on all user systems and shouldn't be a problem. From an article on A List Apart (http://www.alistapart.com/articles/cssatten) "web designers should always make sure their pages degrade gracefully." As a web developer this is my favorite development resource blog. The site's font scales well across all browsers. On my web development team as a rule we declare font sizes in EMs rather than pixels. This helps with cross browser accessibility scaling. Additionally, declaring the font site in the body and scaling down in percentage values is another way to provide the visually impaired with scalable font sizes.
The content layout and organization were appropriate for the site? Score: 4
The Wall Street Journal sponsors the stock ticker applet at the top of the home page. An old principle from the ticker tape machine days now rendered as a new web widget. Additionally, this is customizable by the user to include their investment vehicles which they can track at a glance. From a coding perspective, I think it's an awesome app. See section 15:7: Limit the Number of Words and Sentences. On the home page, I like the news widgets on the left call out area. This adheres to the "limit words" standard. The top financial news stories are presented in such a way that the user can see a brief overview in a few sentences and bullet points, and drill down into the story if needed. Each area of the site uses the same approach to content presentation. The top level navigation reveals sub navigation when the user selects "Real Life Financing". The sub navigation is strongly related to the parent navigation item. One thing I did notice is the lack of any "Social Media" widget linking icons.
The site was accessible to multiple audiences with multiple needs? Score: 3
Section 3:5: Provide Text Equivalents for Non-Text Elements.
Morningstar is lacking in this area. There are no tool tips, title tag tips, or alt tags available. They do provide descriptive info when mousing over videos. From section 3:11: Do Not Require Style Sheets. Disabling CSS works well. As shown by this screen shot the navigation and content are still available after disabling CSS.
Section 3:13: Avoid Screen Flicker. Morningstar fails here. The site does a refresh every 60 seconds to post new content and dynamic stock ticker updates. Disabling JavaScript still renders the site to an extent, but you lose this functionality.
The applets and real time quotes are dependant to a large part on Dom Scripting for their presentation. Additionally, some of the top level pages are center aligned, while some are left aligned. This can be a distraction to the user.
Screen shot after disabling JavaScript.
Tabbing through the content rather than using the mouse works well. This is an important feature for accessibility.
The site followed appropriate design principles? Score: 4
From section 1:7: Consider Many User Interface Issues. The site may be sluggish due to the amount of real-time charting data that needs to be included. Additionally, load time is slowed due to the ad server http requests and tracking data. The site renders well on the iPhone's Safari browser. Also, it tested well in IE 6, 7, and 8, Firefox, and Chrome. Morningstar came up first in a non sponsored hit on Google. See section 1:8: Be Easily Found in the Top 30. The examples given in the guide use "meta tagging" as a way to index a website. This for the most part has been deprecated. Search engines use quality inbound links, and relevant content in addition to properly constructed well formed sites to aid in page ranking. Morningstar has an excellent free iPhone app, and as a registered member I receive an email every evening with a brief list of the day's market activity as well as my personal investment choices. However, there is entirely too much stray JavaScript code sprinkled throughout the page.
Recommendations for website redesign
I have been a web UI and web application developer for a number of years now. My team uses the Yahoo User Interface JavaScript library, (http://developer.yahoo.com/yui/). This helps with cross browser compatibility issues regarding CSS, DOM and AJAX, and JavaScript calls. We also code using the “Progressive Enhancement” methodology. (http://www.alistapart.com/articles/understandingprogressiveenhancement). Formatting needs to be separate from content. Content should not include inline JavaScript. If JavaScript or CSS are turned off at the client level, content must still be accessible. I would begin by leveraging these methodologies into Morningstar. In re examining page length, I would move redundant content into areas that can be accessible by the site's top navigation. Perhaps adding additional top level navigation tabs. For example the fund and stock research area along with the fund and stock screening area can be moved into the "Tools" section. In the area of font declaration, I would convert all the pixel declarations to their EM equivalents e.g. 1.1em rather than 12px. This will allow consistent text resizing cross browser. Currently, the DTD is 4.01 Strict: . I would begin porting the site over to HTML 5 to take some of the burden off the JavaScript and let the browser do more of the work. This would increase download time. Additionally, HTML 5 makes excellent use of video, and applet embedding. To help with the site refreshing, or “flickering” I would segment out the applets that need the push technology. These applets should be doing the heavy lifting, not the entire browser. HTML 5 would help in this regard. We also use the JavaScript “modernizr” library which ensures that any code written for HTML 5 is available to only HTML 5 compatible browsers. (http://ajaxian.com/archives/modernizr-html5-and-css3-detection). As mentioned, the site jumps from a center aligned content style to left aligned. I'd make it uniform throughout the experience. Note the different background color. I would address this as well.
The site's load time is slowed due to the ad server http requests and tracking data. I would wrap the requests in the JavaScript OnDocumentReady() method, which waits till the page content loads before executing any content in this method call. This way, the user can begin reading content without interruption. There appears to be many separate JavaScript functions all wrapped in declarations at the footer. This is the correct placement, but I would add them to a single file and reference it externally to increase the download speed. I would also add Morningstar's presence to Twitter and Facebook through the use of linking icons, and creating the appropriate social media pages. I would add descriptive text to all image alt tags, and add title tag attributes to images, and hyper links. The benefits are twofold; it enhances the experience for users with special needs as well as aiding search engine indexing.
Comments