In the final project of advance interaction course I along with my group choose to redesign http://www.thelocal.se/ .
The Local is an English-language online newspaper published in Sweden. The original Swedish edition began in 2004. Coverage is purely domestic and includes current events, politics, economy, sports and culture, as well as analysis and opinion. There are also guides to Swedish aimed at English-speaking foreigners, local celebrities and a discussion forum.
Because many people use this site for getting more and more information about the country, the delivered contents should be better from usability point of view.
So we made use of Jacob Nielsen’s 10 Usability Heuristics and performed usability analysis and proposed redesign of the website.
Problems according to heuristics:
1. Visibility of system status – The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
- In http://www.thelocal.se/ there is no breadcrumb which makes difficult for the readers to understand in which page (current page) they are in.
2. Match between system and the real world – The system should speak the users’ language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.
- The title of the news is under the pictures which is confusing.
- The “News & Features” has to be assumed as Home.
- It looks more like an advertisement web page with news in it. It has advertisement at the top of the page and the advertisement video in the starting page which is of no use.
- Picture occupies most of the part with very little description of news.
- The links are in orange color as the standard is blue.
3. User control and freedom – Users often choose system functions by mistake and will need a clearly marked “emergency exit” to leave the unwanted state without having to go through an extended dialogue. Support undo and redo.
- The page is too long and it’s hard to go to the top if you are at the complete bottom of page.
4. Consistency and standards – Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.
- When you click on any news for details then the details starts even below the middle of the new page because of the advertisements on the top.
- Jobs links are redundant as it’s in the menu bar as well as in the advertisement.
- It doesn’t stand up to the e-newspaper standards. It has lot of advertisements, lots of pictures and too big pictures with redundancy.
5. Error prevention – Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation option before they commit to the action.
- It’s a website not a system so there are not enough error messages if something wrong is being committed.
6. Recognition rather than recall – Minimize the user’s memory load by making objects, actions, and options visible. The user should not have to remember information from one part of the dialogue to another. Instructions for use of the system should be visible or easily retrievable whenever appropriate.
- The readers have to understand as which picture is for which respective news.
- Date and time of the news are not written with the headline.
- It is difficult to know the exact location of the page while navigating.
- The menu bar is unsorted and is confusing as buttons are not differentiable.
7. Flexibility and efficiency of use – Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions.
- It would be difficult to go to the top of the page once the reader is at the bottom of the page since there are no “Go to Top” in the long page.
- The options of the menu bar are also categorized in the bottom of the page under the “Highlights” section which is difficult to understand.
- “Discuss” and “Notice boards” are in between the advertisements.
8. Aesthetic and minimalist design – Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.
- Too many advertisements as this we found very unnecessary for a newspaper.
9. Help users recognize, diagnose, and recover from errors – Error messages should be expressed in plain language (no codes), precisely indicate the problem, and constructively suggest a solution.
10. Help and documentation – Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
After doing the usability analysis and depicting problems, the proposed solution was drawn. The new design addresses most of the problems.
The main problems for being a news site to look like an advertisement site has been addressed by moving advertisements to the right side. The big one that used to come on the top has been given more preference that is why it has been placed just under the “other stories” section making it prominent with respect to other advertisements.
The advertisement next to the site title has been removed. The current date and temperature has been placed instead. The temperature updates in accordance with the city. User can read local news of a city by simple selecting the city on the selection box.
Most of the users may be wondering which is the main page or the home page of the site. To overcome this problem, we changed the “news & features” on the main tab to “Home”.
One of the tiresome job was scrolling over the page because of a long list of news and big pictures. Our proposed solutions minimizes the page height by organizing news in the tabbed panel.
Three latest news are listed. When one of the news is clicked, its picture is displayed on the left. When “Read More” link is clicked, it goes to the detail page. When “More News” link is clicked, the next latest three news will be displayed the same way as it is now. In addition, there are “Today’s Most Read” and “Today’s Most Commented” tabs next to the “News” tab. This feature provides minimalist and aesthetic design along with all the necessary information in same place.
The “Other Top Stories” are placed on the right. All the “Highlights” have been moved below the tabbed news.
The footer part has been kept as it is.
Similarly, the “Noticeboard”, “Discussion” blocks are arranged near the advertisement section.
This is how the design of TheLocal.se was arranged by me and by my group.