Overview: I conducted a heuristic evaluation of U.S. News and World Report which is an American media company and a multi-platform publisher of news and information. Using this evaluation method, I aimed at improving the usability and efficiency of the interface by identifying the potential usability concerns and providing recommendations to eliminate them.
My Role: I was the primary evaluator for this project alongside Heather Hill, Kevin Cosenza, and Tiffany Carcamo as the secondary evaluators. They helped me in evaluating the interface based on Jakob Nielsen’ s 10 Heuristics for User Interface Design. I was primarily responsible for conducting interface evaluation sessions. I initially performed my own evaluation and then conducted the test with the secondary evaluators. Based on all primary and secondary evaluation data, the group came up with possible recommendations that would help fix the major usability issues, as well as redesigning the interface.
Discipline: UI/UX Design, User Research, Heuristic Evaluation
Design Tools: Photoshop
Research Methods: Heuristic Evaluation
Duration: Fall 2017, 2 weeks
To analyze the usability, efficiency, and effectiveness of the U.S. News & World Report’s website, I used the Heuristic Evaluation technique where the 4 experts had to perform the following two tasks:
While performing the assigned tasks, the experts recorded all the usability problems that they encountered and explained which heuristic was violated and why.
These tasks were evaluated based on Jakob Nielsen’s Ten Usability Heuristics.
Based on the Heuristics violated, each problem was assigned a severity rating by the evaluator.
The severity of a usability problem is a combination of three factors:
Despite the fact that U.S. News & World Report’s website has a good design and contains a lot of relevant information for its unique visitors, our usability experts uncovered 10 problems out of which 1 was under the Usability Catastrophe rating, 2 were under the major usability problem rating, 3 were categorized as minor usability problems and 5 were put under cosmetic problems.
Of all the key findings, I picked only the most important ones for this report.
After analyzing the key findings, three impactful recommendations were put forward that aimed at enhancing usability, efficiency, and effectiveness of the interface. Hence, making it more intuitive.
Problem - During the 2nd task, the experts noted that if they enter a zip code that does not exist for checking the best price of the car under the “U.S. News & World Report Best Price Program”, an error message is displayed which says “We’re Sorry”. If the users accidentally enter a wrong zip code, it can end up in creating a confusion as they won’t get to know the actual reason for the error message.
On further evaluation, the usability experts discovered that there is a “Back to Previous Page” button under the above-mentioned error message, which is not visible. Users will get to know about this button when they will unintentionally hover over the area where the hidden button is placed. It was also noted that the layout of this web page is different from the actual website layout which affects the consistency of the design.
Recommendation - I would suggest them to rewrite the error message from “We’re Sorry” to “The Zip Code You Have Is Not Valid” as this will help in providing adequate feedback to the users that they have accidentally entered a wrong zip code. I would also recommend them to use a proper signifier which is a sort of an indicator to make the “Back to Previous Page” button visible. Moreover, to maintain the consistency of the website’s layout, my ideal suggestion is to redesign this page in a way that it matches the overall website’s layout.
Problem - During the second task the experts pointed out that when they enter the Compare College page, a box pops-up where they have to select the colleges that they want to compare. Once they add the colleges to compare they have to click on “X” button on the top right of the pop-up box to proceed further which is against the users mental model. Furthermore, it was also noted that when the evaluator tries to go back to the previous page from the Compare College page by clicking the back button on the browser, the page refreshes and opens the same page again.
Recommendation - To avoid this confusion, I would suggest them to add a “Compare” button on the bottom right of the pop-up box, which will also work as a clear indicator that the user has to click there to compare the selected colleges. In addition to this, I would like to mention that the back button problem is a back-end development problem but it needs to be fixed as it affects the usability of the interface.
Problem - While going through the college ranking page, one of the evaluators found that there is a chat-box like pop-up which is not clearly discoverable. That box will pop-up when the user will accidentally hover over a thin blue line on the bottom of the web page. Also, in this pop-up, there is a call to action which is not readable as it runs out of the browser due to its bad placement.
Recommendation - To make the pop-up box more discoverable for the users, I would recommend them to increase the thickness of the blue line and add an adequate signifier like an arrow which signifies that there is a pop-up box.
One of the most relevant examples that can be used as a reference is of Gmail wherein the user can minimize the “New Message” window and it remains on the bottom screen as a separate tab.
As far as the readability of the call to action is considered, the best feasible solution is to change its placement and move it a little upwards.
After evaluating the interface of U.S. News and World Report using heuristic evaluation, I learned that simple design isn't necessarily more usable. What actually helps in increasing the usability of an interface is using the existing design conventions which is familiar to the users. It is all about decreasing the learning curve.