What's Wrong with Lifehacker? of effort is not the reason for bad design, but rather a misunderstanding of what is useable.

Size: px

Start display at page:

Download "What's Wrong with Lifehacker? of effort is not the reason for bad design, but rather a misunderstanding of what is useable."

Jeffrey Hoover
5 years ago
Views:

1 What's Wrong with Lifehacker? Having a website that is both functional and usable is a key aspect in keeping visitors on any site, so why are there so many sites with bad designs on the web? For many of them, lack of effort is not the reason for bad design, but rather a misunderstanding of what is useable. Take for example, in February 2011 it and all of its sister sites (Gizmodo.com, Gawker.com) were redesigned. After the new design was launched, it immediately experienced a huge decrease in traffic. Gizmodo.com was hit the hardest, falling from 746K unique visitors per month to only 420K unique visitors ( Using several important concepts that Krug discusses in his book "Don't Make Me Think", I will analyze why the current design of lifehacker is such a failure. If the designers of lifehacker's site would have even looked at the cover of Krug's book, they would have known the key problem with their site: using lifehacker is a mental workout! The first exercise that a visitor encounters when they visit lifehacker is figuring out how to navigate a page. Lifehacker is separated into two panels, one on the left and one on the right. The left panel contains the main content and the stores of the day, and the right panel contains topics and headlines. Now that seems pretty simple, but the tricky part comes in when scrolling up and down a page. Only the left panel is affected by scrolling, so how do we navigate the right panel? Well, if you happen to place your cursor in the right panel and scroll, then only the right panel will be affected by scrolling. You will also notice a tiny scrollbar that has a width of about 1 pixel in the right panel, which is supposed to be enough to show the user that it is scrollable 1. 1 I am using Firefox to view this website, it may be different in other browsers.

2 This design goes against one of Krug's rules: make pages self-evident (p.11). Unless the user has previously been to lifehacker, this design is entirely unintuitive. The reason that it is unintuitive is because it does not follow any conventions that we are used to, and does not have adequate visual cues to push us in the right direction. Krug also says "...as a rule, people don't like to puzzle over how to do things. The fact that the people who built the site didn't care enough to make things obvious-and-easy can erode our confidence in the site and its publishers." (p.15) Proof of this lies in the site's loss of traffic. To fix this issue, the two panels should simply not scroll independently of each other. One design flaw down, many, many more to go. Following the trend of not being self-evident, the content located in the lower part of the left panel is a navigational mess. Below the main story is 2 more links to other stories, and below those are 4 more story links. Above each of the stories are the topics which they fall under. Here is one part that does not make sense, if you click the story title the left panel is reloaded with the story, and the same links are displayed in the right panel. However, if you click the topic above the story, the left panel behaves the same way (showing the story), but the right panel only contains links to other stories for that topic. It would make sense if, when the topic was clicked, the left panel would have links to other stories of that topic. Instead, the much smaller right panel contains all of the links. This means that whenever a user clicks a topic, they are immediately taken to a story that might not interest them. On top of this, if the user does not know that the right panel is scrollable then they are really out of luck! Further down in the left panel is a list of topics. Some of the topics are grey and others are green. Figuring out what the colors mean takes some thought. If a story from a certain topic is in the left panel, then that topic will be green in the list. Knowing that a story from a particular topic is on the main page is not useful information, especially when the user must

3 scroll past all of the stories to get to this list of topics. Krug talks about this type of useless noise in Chapter 3 of his book. Krug says "One of the great enemies of easy-to-grasp pages is visual noise...it's probably a good idea to assume that everything is visual noise until proven otherwise."(p.38-39) There is no need for the topics to be different colors, so making them all grey would fix this problem. At the very bottom of the left panel is one last problem. Below the list of topics are images of lifehacker's sister sites, with green and white topics under each picture. If a user is unfamiliar with the sister sites, then they will think that the links are simply more topics on lifehacker (since they are the same font and color). It makes sense the lifehacker would want to link to sister sites, but the current method is confusing. Simply making the topics of the other sites a different color would help alleviate this problem. Ideally there would not be multiple lists of topics all next to each other, but I can see that they are trying to show the user what their other sites are about. Although lifehacker goes against almost all of the paradigms that Krug establishes in Chapter 1 and most of Chapter 3 of "Don't Make Me Think", the site does have some redeeming qualities. One of the points made in Chapter 3 is "Create a clear visual hierarchy." (p.31) Lifehacker does this by giving the most space in the left panel to the most popular story. The second and third most popular stories are smaller than the number one story. This is a clear way of organizing stories by popularity, and it is easy to comprehend. Another important idea in Chapter 3 is "Break up pages into clearly defined areas" (p.36) Lifehacker begins to do a good job of this by separating the main stories (left panel) from other topics and headlines (right panel), however their approach to navigation makes this design less effective.

4 The final aspect of lifehacker that follows an idea of Krug's is that it is easy to determine what is clickable and what is not. Almost all of the clickable text on lifehacker is marked by an underline when the user hovers their mouse over it. However, for some reason, only every third topic in the right panel is underlined when hovered over. There does not seem to be an explanation for this because the topics that do not have an underline are still clickable. If this issue was fixed, then lifehacker would have fulfilled one of Krug's design criterion. Lifehacker needs to reevaluate its current design and take into consideration the ideas that Krug proposes in "Don't Make Me Think". Many of the problems that are present in lifehacker's design are directly discussed in Krug's book. The site is not to a point beyond repair, it just needs to fix navigation issues and some confusing design properties. If the site had usability tests run on it, the designers would be able to see for themselves why there has been a decrease in internet traffic and be able to respond appropriately.

5 Works Cited Krug, Steve. (2006). Don't Make Me Think. New Riders Publishing. Schonfeld, Erick. (2/17/2011). Gawker's Gulp Moment: Big Redesign Is Driving People Away. Retrieved January 27, 2012, from

Design of Look and Feel of Websites

Design of Look and Feel of Websites Steve Krug Steve Krug is a usability consultant who has more than 20 years of experience as a user advocate for companies like Apple, Netscape, AOL, Lexus, and others.