As someone who spends a LOT of time researching, reading about, and looking at websites, I have lots of thoughts and opinions about design, usability, accessibility, so I was pretty psyched when Arianne suggested a mini-review of a reader’s website.
Brenda Watts of Cattails Woodwork wrote us about her site, saying:
I have a site/shop, I know where stuff is, what it is and how to buy but never sure for visitors if it works or is ‘clear as mud’ LOL. A new set of eyes and professional advice would be soooo welcome.
It’s not very common that the site-owner is as self-aware about this as Brenda is, but just because you’re familiar with your website and you know where everything is, that doesn’t mean it’s intuitive or user-friendly for someone new to your business and/or website. It can be hard to step out of your “insider” role to view the site as a potential customer or lead would, but that’s exactly what you’ve got to do (or hire a pro to do) if you want your site to work for you the way it should.
Here are my main observations about the Cattails Woodwork site, and tips that apply to both Brenda’s site specifically and other websites in general:
1. Visual distraction, with a side of too-large logo
Here’s what I see when I first pull up Brenda’s site. I sized this screenshot to show the portion of the home page that is visible when I have the browser about the size I typically use it for casual browsing on my laptop.
Image may be NSFW.
Clik here to view.
While there are conflicting arguments out there about how important the “fold” is for websites, in this case I’m not too concerned with what I see without scrolling in terms of content strategy, although I think that logo and header are taking up more room than is necessary and keeping me from seeing the actual products as soon as I’d like to. I’m much more concerned with just how much there is going on in this small area.
Here’s what I notice just at first glance in this little area of the site:
- Textured wood-grain background (cream/white)
- Dark gray background with subtle shadow
- Header with:
- Wood grain pattern circle
- Circular two-tone pattern overlay
- Another wood grain pattern under the circular pattern
- Medium gray border
- text in two colors and two fonts, some with drop shadowing
- At least three fonts (sans serif in top menu and some body text, serif in main nav and headers, exaggerated script in logo/ header
- Photo slider with high-texture/ detail photos
- Internal shadow effect on photo slider
You’re probably getting the idea just from that list, but I really think there’s too much going on here!
Tip: You don’t need to be literal with references to your work or product in the design of your site. In fact, you often shouldn’t be since it’s going to compete with or distract from the work itself.
Three wood textures, not counting those in the photos, is overwhelming. I would stick to just one, maybe the one in the logo if that’s part of the offline branding as well. Brenda’s photos are great, and those get the texture and grain across without needing to go quite as crazy with textures on the website itself.
I’d also suggest that Brenda minimizes all the divisions across the site – right now the main column is sharply divided from the background, the header sharply divided from the main column, and the slider’s shadow effect sharply divides the photos from the gray background. It feels harsh and choppy to me, when her work is much more smooth and natural in feel, and that disconnect is a little confusing.
2. Color Choices & Readability
While Brenda has done a pretty good job keeping her site to a just a couple of colors (off-white, light gray, dark gray and that woodsy sienna tone), they aren’t quite meshing as well as I’d like them to. I think the main issues I have are with the bright white of the text and the darker gray, both of which read on the cool side.
Tip: Look to your work itself for color inspiration
Here are some colors pulled right from the photos, with the current link color included as well:
Image may be NSFW.
Clik here to view.
While these particular colors are just an initial brainstorm, for this particular site, I would definitely suggest sticking to warmer colors and tones, such as the cream/ off-whites in the header and main background, and the sienna link color. I’d either warm up the gray or ditch it entirely in favor of tans. It might also be fun to bring in a nice blue like the one above (pulled from the pencil in that desktop organizer) for some contrast, but only in small amounts and only to highlight action items..
Tip: Take care with contrast, especially for readability’s sake
In general, you want your images and important text/ buttons to be the most eye-grabbing part of your website, not the edges of content areas or supporting headers or text areas. Contrast is a tricky thing to get right – it’s a balance between too much (distracting and hard to look at), and too little (boring, often hard to read).
White text is really hard to get right in terms of readability, so I’d suggest avoiding it unless you really know what you’re doing with typography, sizing, and contrast. In this instance I’m finding it extremely hard on the eyes, to the point where I’m finding myself skipping the text entirely.
3. Unintuitive naming and too many places to go
Now that the design/ aesthetic tips are out of the way, let’s actually take a look at Brenda’s question about usability. I like the menu items across the top – while they’d be easier to read without the texture behind them, they are clearly named so that I know what I’ll get if I click each one.
The homepage layout reads to me a bit like an info site (I think it’s the header combined with the amount of text below the slider), which throws me off a bit since it’s actually a store site. I’d rethink the home page layout to something simpler that focuses on the wonderful product photos. Maybe something like this:
Image may be NSFW.
Clik here to view.
Text could be incorporated right over the images where it helps clarify the purpose or direct the user. This would give site visitors a really clear idea of where to go, while lessening the chance of too-many-choices paralysis.
You may notice that I’ve also simplified the category navigation in the above wireframe – I think fewer top-level links would be a great place to start, but I’d probably add drop-downs so that users can see without clicking what the subcategories of each section are, and can jump right to “rolling pins” if that’s really why they’re here.
A note on the Granite & Grain link – it’s not clear what it is. Even when I click through and read the description, it doesn’t tell me what the other artist’s medium is (painting, I think, from the photos). I don’t see any stone elements, which is what I would have expected from the name. At the very least, I’d recommend clarifying what the collection is at the very beginning of that page, before getting into the story behind it.
Once you get into the categories, things are pretty straightforward and the Cart link is right where I’d expect to see it, so I think once the design is cleaned up a bit and the home page and navigation are simplified Brenda will have a much more usable site across the whole shopping experience.
Subscribe to our newsletter
Aeolidia is _the_ resource for creative businesses looking to grow and increase profit. Subscribe to our newsletter for more tips and info like this, and to get access to our free resources area, full of tools you can use to improve your business.