Web Design Critique #69: Okay Geek

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Okay Geek, a delightfully geeky tech blog that we’ve seen before on Design Shack. Let’s jump in and see what we think of the new design!

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Okay Geek

“Okay Geek is a blog that writes about things that our editors find to be interesting. We don’t cater our content to anyone but ourselves. And while though that may sound a bit strange, we do it in hopes of creating content that truly expresses our enjoyment and allows readers to relate to us and what we write about.”

Returning Customers

One quick self-serving side note. If you’re wondering about whether or not a Design Shack Design Critique is worth it, you need look no further than our return customers like Okay Geek. Several sites have not only taken our advice into consideration, but implemented many of the suggested changes and returned for another critique. If you’re having doubts about your design, shoot us a message and arrange a critique today.

Now onto the critique, here is a screenshot of the Okay Geek homepage:

screenshot

First Impression

In our previous critique of Okay Geek, we complemented them for having a very clean and sharp looking site that highlighted the content well while remaining almost void of clutter. It seems the designers have decided to take this idea even further by really minimizing the design and stripping out all the unnecessary parts. The result is a super streamlined experience that makes for a great browsing experience.

I commend the designers on their work and really think they’ve done a great job here. As always though, I’m full of suggestions for how to make it even better. Let’s take a closer look and see what those are.

Navigation

One of my biggest issues with the redesign is the navigation area. Strictly from an aesthetic standpoint, it’s great. There’s a nice minimal appeal that really complements the site well. However, from a usability standpoint, it doesn’t score quite so high. The various links are divided up into two different sections in the header:

screenshot
screenshot

The first section is nicely done and makes perfect sense: Reviews, Editorials, Contact, About Us. The second though is a strip of icons that controls the contents of the sidebar in a sort of tabbed method. I actually like what they’re doing here and think they have really created a versatile sidebar, but I have some issues with the icons.

Again, though they look great, they’re pretty vague. For instance, the star, which is a universal web symbol for making something a favorite, is actually a link to the “Main” section of the sidebar. The “topics” section is similarly confusing, being represented by four squares (which makes sense only after you click on it). The titles appear on hover, but until then, you really have no idea what these icons are for.

Finding Your Way

In a tech blog like this that covers a fairly wide spectrum of topics, it’s important for users to be able to quickly find that niche they’re interested in. As a test, if you put someone in front of this site for the first time and say, “Find the gaming articles,” it would likely take them upwards of ten seconds to find the “topics” section, which then leads them to gaming.

I’m not quite sure how I would go about it, but I would definitely recommend putting some thought into how to make it easier for users to drill down to only that content that they would like to see. Honestly, it might be as simple as making the text visible beneath the icons all the time.

Featured Content

Like any good news site, there are a couple of different featured content locations that help highlight articles past what appears in the primary homepage feed. These look really great and, just like the navigation, appear both at the top left and in the sidebar on the right.

screenshot
screenshot

Repetition

Looking at these, I see one of my favorite design tools at work: repetition. There’s a really nice but simple consistency in the labeling of each section. However, this is a perfect example of how repetition can be a tricky beast and might even mislead the user. Consider the following graphic, which shows three consistently designed headers from the page:

screenshot

Now, the first two of these serve as section headers. They sit above content and simply serve as a label for what’s below them. They are not links, only visual helpers. This sets your brain to think that this will be the case for all similar items you see throughout the site. However, the third throws you a curveball.

screenshot

This label sits above an empty space, which makes it immediately confusing as to what it’s referencing. Remember that the other two headers have already taught us that these aren’t links so we’re left to conclude that “More Awesome Stuff” has yet to be added. However, it turns out that this header is in fact not a header at all but a link to a different page.

Selective Repetition

The simple design lesson here is that repetition must be wielded carefully. Make sure that when you’re repeating a visual design style or element that the elements share a common purpose and functionality. Otherwise, you set up an expected archetype that you then break, thereby reducing usability via repetition instead of improving it.

I see this same problem arising at least one other place on the site in the case of the aforementioned star icon. It’s used in the sidebar simply to denote the “Main” tab and is repeated in the post previews to indicate that the post is “Exclusive, featured content.” Once again, the repetition is actually stripping the meaning out of the icon because it’s being used for two very different purposes.

screenshot

Posts & Previews

Other than the icon repetition that I indicated above, I really like the new post preview format. The nice large images draw you in and all the information about the post that you need is clearly represented in a very organized fashion.

screenshot

I also notice that the old vague “Save” button has been changed to a “Save on Instapaper” button per my suggestion. Bonus points for implementing some suggested changes! I think this makes it infinitely clearer what’s happening with this button.

Similarly, when you click and follow through to a specific post, we see some more examples of really attractive design work. The end of a post is where people traditionally place a lot of various content like sharing, similar articles and comments. This area can quickly become a cluttered mess but I love how it was handled here. The three different sections are clearly distinct yet visually similar and really fit well with the overall theme of the site.

screenshot

You know a designer is good when he/she spends a lot of time getting the small stuff just right and I think this section is a clear example of how great the designers are working on this project.

About Us

The final section that I think warrants some attention is the About Us page. When the page first loaded, I was stunned by just how attractive it was. This is a really nice design that differs greatly from the rest of the site while staying 100% on brand.

screenshot

Conclusion

The guys at Okay Geek really encouraged me to have a good look around the site and give them both barrels when I noticed anything that needed addressing. This indicates a clear willingness to make the site as good as it can possibly be for users.

Taking criticism is one of the most difficult tasks you will face as a designer. We pour ourselves into our projects so much that a critique feels like a personal attack. When we can step away from this emotional response and evaluate feedback in a logical manner, we become better designers and our projects improve exponentially.

As I repeatedly stated throughout the critique, this site is gorgeous from a purely visual design standpoint. The areas that I’ve suggested improving are all closely related to usability and improving the user experience. These are the things that are easy to overlook when we’ve stared at a project for too long. I’m sure the team will consider and address many of these issues and continue to make Okay Geek a really great place to learn about the latest developments in the world of tech.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.