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.
Looking down the front page I see “Premium Reviews,” “Community Articles,” and “Resources.” I like how there are (more) links right after the topic headers. It’s very easy to correlate the action (see more) with the topic.
Looking at the footer, I see a number of familiar icons: Apple, WordPress, and 9rules. I can only assume that the list in the bottom left of the footer are “Friends” of this blog. I would consider providing a header above this list. In fact, the content groupings in the footer are a bit ambiguous, so it’s kind of hard to parse. I notice things like “Icons by Function,” and “Ported by DesignSlicer.com.” What do these mean to laymen web users?
After I get my fill of the footer I see the heading: “Got premium WordPress?” Since UX Booth is run on WordPress, I’m intrigued to say the least. After I read the subheading, I get the impression that elitebydesign must make themes, so I follow the trail and click “Learn More”
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.
Below this is a collection of headers and screenshots. I immediately notice the red buttons below (above?) each of the screenshots. I’m trying to guess which screenshots are related to which set of buttons; I eventually give up. The shading and distance between these element pairs leaves things a bit up in the air. I decide to take the plunge and click “More Info.”
The layout change is a bit disorienting. It’s sort of odd. On the one hand, the fact that the site now resembles a more traditional blog is comforting…while on the other hand, I’m a bit taken back by the fact that there isn’t a big header in the way anymore. It’s odd becuase I’ve set an expectation: that the site will always have a bold banner up top. Because I’m used to looking there, I immediately notice the ads, in the place where the banner would be. I feel a bit duped.
I’m thinking that there’s plenty of room for content to the right of these ads. It would be less disorienting if I didn’t have to scroll to find the content I wanted on this page. I’m reading through the information about the Fresh News theme, learning more about what it offers me on my wordpress site. However, I’m feeling a distinct lack of screenshots. In fact, I’m not even able to see the screenshot I saw on the previous page. This presents an Information Architecture problem: to get an idea of how this theme looks I need to take a step backward.
By the end of the description, I’m ready to see how much the theme costs and potentially buy it—but the controls for this are nowhere to be found. How do I find this information? I don’t see any links in this regard so I start to think back. There *was* a link on the previous page I could click, but I don’t want to go back, I want to delve in deeper. Looking below I see more Articles (not what I want), Information about the author (not what I want), and Comments (also not what I want). Bugger. I figure I’ll click the only link that makes sense: Learn more about “Fresh News.”
Where am I? I start scanning the text for the phrase “Fresh News.” 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 “Fresh News.” 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. Not only do I wonder why elitebydesign.com linked me here, I wonder why I can’t get back easily. I take this as a point of jest and simply click the back button twice. Other, less-savvy (or more attention defecit) users may just stop here.
The last thing I want to check is how I would have ordered said theme. I return to the theme index and click “buy now,” assuming I will shortly be purchasing “Fresh News.” No dice. Again I’m taken to woothemes.com, again this page has no mention of “Fresh News” or elitebydesign.com. I give up here. Let’s go to the blog.
After returning to elitebydesign.com 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.
I click on a post “10 best free WordPress themes you haven’t seen.” the page scans very easily. The typography makes it a touch difficult to parse, but otherwise it’s a no-frills blog post.
When I get to the end, I see the “about the author” blurb and get to the comments. Fortunately, these elements need no explanation.
This section is very similar to the blog. Because the layout is similar, I don’t have to think about where to look for the information I’m seeking. There are only a couple of questions I have: When were these articles posted? How many people liked/commented on these articles? What the heck does “View Source” mean?
As a web developer myself, “view source” means something completely different to me. It may be just me, but I think that this link could be better worded. Additionally, when I click on the link itself, I’m taken to a new page. The thing is, I didn’t know that the link would do this. Perhaps including some kind of indicator would help your users know they’re being taken to another site. Also, consider opening these links in new windows to keep your community looking around your site.
Next, I click the “Submit” link at the top. The forms are pretty simple. I like that the forms appear at the top and that the “Additional information” (read: not mandatory) appears below. It’s good that users can get straight to submitting content. But I notice one peculiarity: the forms are identical. Yes, save their titles, each form has exactly as many fields and the other one. Perhaps you could consider using a drop-down to tell resources/articles apart and then consolidating your forms.
As I wrap up my review I revisit the homepage. It’s a bit refreshing to start over. After going through the site, I’ve ascertained what elitebydesign is all about: a design community. Now the front page makes sense. This wasn’t as clear to me the first time around. Even still, the two big “callout” blocks seem to be floating there without any indication what they’re describing.
Also, I’m still confused as to the site’s “sub” navigation. The options under “BLOG COMMUNITY THEMES” seems both inconsistent and unrelated. The home page gives no indication as to the site’s structure. In fact, “Home” is highlighted, but it’s shown as a “sub” page. Why? Also, why is “contact” under themes?
Looking around the home page once more, I notice an RSS icon at the top. Next to it is a faint “Close [X]” label. Curious, I click the text and the RSS icon flys away. That’s pretty neat. I guess if I take issue with the fact that there is an orange icon in the top right of my page, I can either scroll down OR close it entirely. Like a cool party trick. But that’s where the party ends.
I quickly refresh the page so I can actually try subscribing, but then I notice something missing: the RSS icon. Yes it seems that to deny elitebydesign.com the pleasure of getting a subscriber once, you will never be shown the RSS icon again. This seems counterintuitive. Because I know how a browser stores persistent state, I go into my preferences and clear my cookies. Problem solved, for me anyway.
Based on my review, I would consider refining these elements:
- 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.