Got a moment to see if your site passes this quick usability checklist? These are some common usability mistakes we encounter on the web while reviewing sites.
The purpose of Elite by Design (http://www.elitebydesign.com/) is to provide helpful and insightful articles in the fields of web design, web development, and Photoshop. The site is looks very nice but the flow of things could be improved upon.
The first thing I notice is the big navigation. It’s hard to miss. Unfortunately, nothing is highlighted, so it’s kind of hard to know where I’m at in the site initially. The background is interesting: a galaxy. I don’t know if that relates to the site in any way, but it is distinctive. Overall the header is big and the callouts are big, and I don’t know what this site is about. Maybe it’s a personal portfolio? I can’t tell. After taking a second to think: “Blog, Community, themes…” Ah ha! This site must center around the web-design community.
Elite By Design is, at first glance, a very monochrome site. When I first look at it, nothing instantly leads my eye. I am not immediately sure where I am supposed to be looking. I notice the Subscription button right away, mainly because it is the only color on the site. The next thing I see is the Web Design Tuts Button. If I click on home, it transports me directly to what looks like a blog section. It’s hard to tell because there are so many ads that I don’t get any content at all above the fold.
My first impression of the site is positive. The layout is very attractive and seems to have space enough so that my eyes navigate easily throughout the homepage elements. If I were a first time visitor, however, I would be looking for a one to two line sentence describing what this site is about. A simple way to increase usability is to offer the user a quote about your site, even if it is just saying “blogging about design”. I do notice the title of the page describes the content but would like a visual element as well.
When I land on Elite By Design, I first notice the banner, two large lead images, and the top navigation. It’s all very pretty but means very little to me. There are no immediate calls to action and I’m not really sure where to go next.
What Confuses Us
When I load the themes section, I immediately notice the header. In a very Apple-esque fashion, the header is bright and bold. It looks like an ad promoting a video player or something. I read below to see that this is a WordPress theme that features movies and videos. The placement of this information doesn’t make much sense to me. Is this theme featured for some reason? Is there a special on this theme? Maybe it just deserves some attention. I click “Learn more,” and then “Check out Elite Video today“.
Where am I? I start scanning the text for the phrase “Elite Video.” The previous page told me I’d find more information on this page and for some reason I can’t. I immediately lose trust in elitebydesign.com. For some reason this new page gives me no mention of “Elite Video.” I start scrolling down the page and scanning the headers, maybe looking for that screenshot I saw (now) two pages back. Nothing. So this is a non-starter.
I see a big Web Design Tuts Button. If I click on home, it transports me directly to what looks like a blog section. It’s hard to tell because there are so many ads that I don’t get any content at all above the fold. I have to scroll down to find more. I scroll down to a blog entry. Just one, with comments below. Have I hit the home page for a blog or have I been taken to just one article?
Clicking on Community from the homepage takes me to articles written by other people. This is a community aggregator section. You are permitted to submit articles for consideration, it seems. This is confusing, and without some kind of header to tell you exactly what it is, the casual reader could be confused and bounce away very quickly.
The two main elements on the home page seem to be a recent post and a video theme feature. I am confused, though. The recent post image is all a link where as the video theme image is not a link? Consistency would help a great deal with this, choose to link the whole block or not. Making the user not have to think is an easy way to increase UX.
As I head to the About page my eyes are left scanning the page. The formatting that leaves so much white space to the right of the page makes me cringe and wonder, why? There doesn’t seem to be a reason and I would advise changing it.
The word “Community” is used all over the site, so I check it out. It must be a forum, or some other type of important element at Elite by Design given it’s prime placement at the top of the page.
However, the Community page does nothing to explain to me what it’s all about. I just see a whole bunch of links to different articles. It’s not until I actually click an article that I figure out it’s a collection of links from outside of ElitebyDesign.com. It takes a bit of searching, but I eventually even find a form for submitting links of my own. The form isn’t difficult to figure out, but could certainly be reduced to one form instead of two.
What We Like
I click on “BLOG” up top. This should be pretty easy, I think to myself. The layout for the blog is fairly standard, posts on the left and meta-data and additional information on the right. I think to myself that the pictures on the left are rather small. I would consider reading three or four of the most recent posts and (as a photographer) pictures are what catch my eye first. On the other hand, this is a design issue and not necessarily a usability issue, so it may be better to let users see as many articles as possible. If that’s the goal, this format is brief and dense—it lets users get directly to the articles.
Categories takes me into a very nicely organized category section with recent articles. Popular sorts them by number of comments, and recent by date. I like all of these features immensely. They are well organized and give the reader some nice options for article exploration.
I really like the structure of the comments! I am a big fan of the hover images and how the threaded comments pan out. I also like that the author comments are easily distinguishable from the rest of the conversation.
There is a lot to like on EliteByDesign.com. The design is very pretty, the blog posts are constructed very well, and everything feels polished despite some problems with flow.
- I would provide some kind of “blurb” on the front page about what this site is about
- Provide a prominent “Home” link next to “Blog, Community, Themes”
- The Navigation/Subnavigation needs work. It’s hard to tell what’s going on until you play with it. I would consider make the use of categories more explicit and ditching the subnav.
- The callouts on the front page are a little disorienting, it’s hard to get to the content.
- Consider adding dates and comments to resources
- Give “View source” links a new title and some kind of indicator that they link offsite
- The RSS/Close box at the top right shouldn’t close. It doesn’t add any value and may detract from potential subscribers.
- All links except “More Info” should be removed from the Rhemes section. Once a user clicks more info, they should see additional information, including screenshots. From there a user should have the option to see a “real” demo and/or buy the theme. Not only does this consolidate users’ paths through your themes, but it follows a logical order. Finally, users should link directly to the theme, and not have to search for your theme on woothemes.com.
- Consider a smaller “callout” section above the content. It’s a bit disorienting. You aren’t selling anything on this site, you’re providing a service. Gear the form to the function.
- Less Ads above the fold
- Make Comments Smaller
- Indicate what the links in your footer are.
- Consider changing your buttons from grey so we know they are links.
- Declutter the homepage and work on making it easier to navigate.
- Consider a home button above the other navigation on the same line as the RSS button.
- Establish consistency with the featured items on the home page. Choose to make both whole images links or both just have text links. Not one of each.
- Fix broken links. Go through your site and make sure links work. I noticed a few on the links to premium themes on the home page as well as themes section.
- Check out that About Us page one more time. The excessive white space makes my eyes do a double and triple take to analyze what is going on.
- Consider moving the Read More link. The normal placement at the end of the post except may be a better place for it.
- Check out the themes page. Linking to WooThemes for all your themes makes me not want to pursue purchasing any of them.
- Add a contact link to the footer. Since you have no contact button on your themes page I’d say put one in the footer. I always like for users to be one click away from being able to reach me.
- The two large lead images take up a lot of space on the front page. The dimensions of these images could be reduced (or eliminated) to bring the important content up to the top.
- The flow of EliteByDesign.com is hard to follow until you’re a few clicks off from the Front Page. The front page could be better organized to quickly get designers to the content they want to see, and shoppers to themes they want to buy.
- The navigation isn’t very intuitive. “Community” is meaningless to the first time viewer, and the subnavigation changes but doesn’t associate itself visually with the primary navigation. Use color,tabs, or some other visual cue to connect the selected primary navigation with it’s secondary choices.
- On Blog category pages, move the page navigation outside of the Premium Themes container as they are not related.
- On some categories, “Older Articles” and “Newer Articles” are right next to each other in the page navigation and have arrows pointing in the same direction. Typically, page navigation has arrows pointing left and right to insinuate movement in different direction (or at least showing links on two separate sides of something).
- Explain what “Community” is on the Community page. Have a BIG call to action for users to submit links of their own. Consider changing “Community” to “Community Links“, or something else that implies it is a collection of user contributed links.
- Reduce Community Submit form to just one. There is no need for a user to have to decide between two forms with identical fields.
- The front page is roughly 1MB. This may be a problem for users on slow connections. Consider optimizing images.
Write for UX BoothContribute to UX Booth
Contribute a guest post to UX Booth and let the community know what's important to you!