Usability Review: EliteByDesign.com

Author Avatar

Author

UX Reviews

Published

January 12th, 2009

Labels

Blogs and Portfolio

Reviews

Rating

Comments:

15 Comments

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.

Initial Impressions

EliteByDesign.com

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

Woothemes.com makes an unexpected appearance.

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.

The two main images on Elite By Design home page have inconsistencies. The image on the left is a link, the image on the right is not a link but contains a text link inside of it.

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.

The hover of replies throughout the comments show me what the user is replying to.

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.

Suggestions

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.

The Ratings

Andrew: Read Andrew's Full Review
Redd: Read Redd's Full Review
Matthew: Read Matt's Full Review
David: Read David's Full Review
Community
Average

Write for UX Booth

Contribute to UX Booth

Contribute

Contribute a guest post to UX Booth and let the community know what's important to you!

Comments

David Perel January 12, 2009

This is slightly off the topic to the website you have reviewed…

I just wanted to mention that the format that you review sites in is really great. The colour coded borders etc are a brilliant solution for scanning the page.

Back to the website. I remember seeing this site on a couple of CSS Galleries, I also remember thinking that it looked really good despite its similarities to Studio7Design (not sure which one came first between the two though).

However having gone back to the site since viewing a long time ago I feel a bit disappointed. The broken links is like suicide and it has lost its cohesiveness in design consistency (wow, that is one ‘big’ sentence). The font, the link colours and those drop shadows on the front page… not too sure about those drop shadows.

I am quite interested in the themes section and the way that Elite By Design are doing some clever affiliate link association. It would be interesting to see the results of their methods.

Annnyyway, that is my 2 cents. I am sorry if I have been too harsh.
Andrew Maier January 12, 2009

@David Perel: That’s not harsh at all. Do remember to weigh in by giving the site a “star” review (right above the “How we Review Websites” blurb).

There were a lot of design considerations I questioned while looking over elitebydesign.com. However, insofar as *usability* the site did have some discernible issues. It’s very hard to separate design from usability, so I try and remain as objective as possible :)
Will McClellan January 12, 2009

Well the site fails in one of them main usability areas…navigation! Which is a pity because the design is quite nice. I still don’t understand the navigation system after using it for few mins and it should be coherent immediately.

Great to see articles like this!
Andrew Maier January 12, 2009

@Will McClellan: I agree. In my full review I suggest just ditching the subnav and using a more prominent ‘categories’ section under each main topic.
Matthew Kammerer January 12, 2009

@Will McClellan: The navigation is out of the ordinary. I think my previous exposure biased be a bit I think. I also mentioned that in my full review.

Thanks for the feedback, guys! :)
Ben January 12, 2009

I don’t want to sound nasty but I’ve never understood why this site gets so much attention – apart from the admittedly pretty spacey background the design is an unfocused mess and ads on purchase pages? What on earth are they thinking?

Somebody is interested enough in their product to go to a “more information” page and all they can see is a massive box ad that’s blended into the site so is likely to be clicked by mistake. That’s a great way to build trust!
David Leggett January 12, 2009

@Ben: It’s not really our place to judge content so much as experience. If you want my personal opinion however, I do enjoy their blog. Actually, if I were only rating the experience of a blog post on EliteByDesign.com, I would probably have awarded a 4 or 5 star rating.
Ben January 12, 2009

I wasn’t talking about content either but design. The blog posts on their site are good – it’s the design i have issues with.

In this case I would argue that the advertising is ruining the user experience on the product pages. When I view a page “selling” a theme on their site I literally only see the advert – that’s all that’s visible where I would expect the content to be, I have to scroll to actually read anything – so I move on. That’s a bad user experience.
Matthew Kammerer January 12, 2009

@Ben: Great advice, hopefully Brian stops by and checks out the great feedback.
Brian January 12, 2009

First of all, I want to say thank you for this review. I think as a designer, there is always a time to step back and think about not how people look at the site, but instead how they use it. That’s the beauty of UX Booth, you guys help me notice things that I would never see after dozens of hours of staring at this design.

I’m still a young designer with room to learn, and it this review, and the comments on this post (@Ben) that will help me grow and develop. So now it is time to sit down and draft changes to the site, I hope that improvements will be made!

Thanks again everyone for your honest and open opinions.
David Leggett January 12, 2009

@Ben: Totally agree :) Very well put. I believe very strongly that if a company or individual plans to monetize their business through selling a product or service, they should not clutter their sites with ads that sell other services and products.
Andrew Maier January 12, 2009

@Brian: Thanks so much for submitting your site. I think it takes a lot of guts to take criticism from the web. On the other hand, I also think it’s invaluable. We all learn much more by actually doing rather than learning to do. Learning from your mistakes and taking other people’s perspectives into consideration is the only way to become a better designer.
Ben January 14, 2009

@Brian – thanks for taking the feedback the right way. Reading it back now it sounds a little harsh but I meant it constructively :)
Andy January 14, 2009

Very in depth review, nice :)
web design February 4, 2009

The Marketing section is really important