Design Critique: Gizmodo.com

Gizmodo.com is a design and technology blog that is a part of the wider collection of blogs hosted on the Kinja platform. The blog has both original content written by a team of dedicated bloggers and writers as well as content sourced from the other blogs in the Kinja world. The blog uses a minimalistic interface with black on white, legible typography to make for a very reading oriented website. In this paper I will critique Gizmodo.com and offer suggestions for improvement and my reasoning behind them.

Gizmodo home page screenshot

A screenshot of the Gizmodo home page

The Home Page

The Gizmodo home page surprises a visitor with a giant banner advertisement (in this case an advertisement for a mobile phone) that takes up more than two thirds of the available space on a laptop monitor of average (1366×768 in my case) resolution. This does seem to be an exception, but when the ad banner displays it pushes the Gizmodo site header all the way to the bottom one third of the screen. This has the effect of denying a visitor access to the search, menu, and login buttons by displacing them from their usual place – at the top of the page. Speaking in terms of design freedom, there is no standard about where the site header and menu should be placed, but for a particular site it should remain consistent. Such displacement of important navigation tools may not affect regular patrons, but can throw off new ones who are used to a menu-on-top website layout.

Accessibility of menu bar

The regular home page (i.e. one without the top banner ads) too has a very important drawback with respect to the accessibility of the site header. The header, and therefore the menu and search features, are not always accessible – once the user scrolls down to browse the home page, the header rolls up and out of view. While this again appears to be a conscious design choice, the sheer length of the home page calls for the implementation of at least a “back to top” sort of button as soon as the menu goes out of view. This is a drawback not just for desktop users, but also for users accessing the site on their smart phones.

Another problem that I found with the menu bar was that it behaved differently on different browsers. On Edge and Firefox, the menu bar scrolls up out of view as soon as one begins to scroll down, but on Chrome the menu bar does not disappear until approximately one page’s worth of scrolling down has been completed

Menu Bar: Appearance and features

Considering the menu bar in isolation reveals a couple of noteworthy points. Firstly, clicking it (on a desktop) slides down into view a panel that contains hyperlinks to more blogs. Curiously the set of hyperlinks are divided into two broad categories: “Related Blogs”, and “Blogs You May Like”, but the distinction between the two categories is not made clear at all. On close inspection I found that the links in the first category were subdomains on the gizmodo.com domain, whereas those in the second category were independent domain names. The user is left confused as to whether he/she will be taken away from the main site upon clicking on one of the items, or would remain on the same site. Another aspect of this linkage to multiple blogs is that while it may make sense for mobile users that the new blog loads in the same tab/window as they are on, for desktop users it is preferable to default the hyperlinks to open new tabs. This is especially true for users who are authenticated or logged in, given they do not know at the outset whether the links keep them within the world of Gizmodo.com, or take them away to another web site. Another criticism about the about the design of the menu options is that “Gizmodo.com” itself is shown in the “Blogs You May Like” category – this indicates a static-ness in the design of the website.

Secondly, being a blogging site, the menu bar does not offer any way to filter the articles. Although Gizmodo describes itself as a design and technology blog, I found that many articles could easily be ‘tagged’ with labels that describe their contents appropriately. If the articles are tagged well, an effective categorization or filter widget could be incorporated into the menu bar.

Menu Bar: Ambiguity in blog identification

Another problem that I noted in the menu bar owes itself to the integrated nature of the group of blogs that Gizmodo is part of. Many articles that appear on the home page are actually written by authors part of other blogs in the group. For example, an article from the “io9” blog may get featured on the Gizmodo home page. But there are two points to be noted that create confusion when a user tries to read such articles on Gizmodo.

gizmodo-screenshot-articles-from-other-pages

Articles from other blogs on the home page

Firstly, on the home page the real source of the article is indicated just above the headline and in a small and light grey font. This info is of the general format “Shared from <xyz>” where <xyz> could be one of the many blogs in the group. The light grey color and the small size of the font obfuscate this piece of information especially when the main headline written in big black type captures a reader’s attention.

Notice the title of the blog in the menu bar

Notice the title of the blog in the menu bar

The second point is closely related to the first. When a user happens to click on the headline, not only is the user taken to the main article (which is obviously expected), the Gizmodo brand identity is replaced by the logo/logo-type of the blog which the article is actually part of. This is not easy to notice at first given the fact that the menu bar itself disappears as one scrolls down. I was unpleasantly surprised in my initial exploration of the site when I landed up on the io9 website after clicking on an article headline on Gizmodo! I discovered that I had landed on io9 only when I was finished skimming through the article and scrolled back to the top. Figure 3, and Figure 4 show the apposite screenshots.

Content: Article Pages

The article pages on Gizmodo.com follow the same visual layout as the home page, but have two features that draw my attention. First, while most articles I viewed had a big image accompanying the headline, none of them had a synopsis of the article or a caption for the image. Since the website is actively maintained and new articles appear roughly every half hour I believe it will benefit the users’ experience if the articles carried synopses.

Second, the side-bar located on the left of the article window has a grid of tiles that displays thumbnails of suggested articles; the grid is labeled “You may also like”. While this is a good idea, it has two important flaws. Firstly, it only shows thumbnails – one has to hover their mouse over a thumbnail to see what the article’s headline is or what it is about. Secondly, and a more striking flaw is that this grid of thumbnails is not anchored to the window. Just like the menu bar, the suggestion thumbnail grid goes out of view as a reader scrolls down to read the article. While this may be intended to reduce the distractions for a user reading the article at hand, it makes for poor ‘discoverability’ of articles that Gizmodo.com wants to suggest or promote.

Another flaw, but less significant than the above two, is that on a standard desktop screen the representative image and the article headline occupies all visible space, and the user has to scroll down to begin reading the first words. This is especially important, given there are no synopses for the articles.

Performance: Page loading time

Like most modern websites, Gizmodo.com takes some time to fully load up into a browser window, even on a 10 MBps internet connection. When I investigated the source code of the home page (using Firefox’s ‘view source’ option), I expected to see links to JavaScript files placed on (perhaps) slow servers. But to my surprise I figured that Gizmodo’s pages have a huge amount of inline JavaScript and styling. While the JavaScript is minified at many places, it still does occupy a lot of space on a typical webpage of Gizmodo. Although inline scripts reduce the time otherwise required to fetch scripts from other URIs, they undo some of that advantage with their bulk.

Also, as a design decision, it appears that a lot of html markup is generated (or fetched remotely) via these JavaScript scripts which burdens the browser and hence impact the site’s performance and user experience.

Suggested improvements

To counter against the above mentioned criticism, I suggest that Gizmodo.com makes improvements as mentioned in this section. All suggested improvements are referred to in the following sections. ­­

Menu bar Improvements

In the next image, I have re-imagined the menu bar as anchored to the top of the browser window as a user scrolls down to read the complete article (or browses the home page).

suggested improvements to the menu

Suggested Improvements: Menu bar anchored to the top as the user scrolls down.

The next image shows how the suggested articles widget should look, as re-imagined by me. Notice the brief descriptions below each of the tiles.

suggested articles widget with brief descriptions

Suggested articles widget with brief descriptions

In the next image (below) I represent my reinterpretation of the main menu. As mentioned previously, the labels on the two groups of hyperlinks are not entirely clear, and therefore I have tried to give them labels that are more appropriate in their descriptions. Also, the self-reference to Gizmodo.com has been deleted from the second group.

re-imagined menu

The re-imagined menu

 

Article page improvements: Addition of synopses

Figure 10 shows an improved design of a typical article page. Currently the article pages lack some sort of synopsis of the article (Figure 4). I have tried to incorporate my idea of how a synopsis could fit on an article page.

Addition of a synopsis to the article page, and addition of the 'Back to Top' button (near bottom left)

Addition of a synopsis to the article page, and addition of the ‘Back to Top’ button (near bottom left)

Figure 10 also includes a possible “back to top” button (in red, near bottom left of figure 10) that can scroll back to the top of the page in one go to take the user back to the menu (as it currently is).

Summary

All of the above mentioned critiques and improvements can of course be assimilated into a significant overhaul of the Gizmodo.com website. I have presented the improvements in isolated depictions to illustrate the relevant point at hand. Most problems with the appearance and aesthetics of the current design of Gizmodo.com can be corrected as I have suggested above. Problems related to the performance of the website, however need a more detailed look as it likely involves a major overhaul of the JavaScript and CSS libraries that developers at Gizmodo.com have built over the years. In conclusion, I can say that if the above mentioned improvements can be made, it would positively impact the user experience of the website.

Leave a Reply

Your email address will not be published. Required fields are marked *