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.
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.
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.
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
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).
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.
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.
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.
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).