Web Design Critique #43: Abdominals at Work
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 critique is Abdominals at Work, an iPhone application website.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $34 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 the Abdominals at Work App
“Passive method of isometric contractions. If you spend a lot of time in front of a computer or the television, you can use this method to work your abdominal muscles while you carry out other tasks. You choose the time and the place, and the application will teach you how to do the exercise, marking your rhythm and the intensity by vibration or melody in a discrete way.”
Here is a screenshot of the homepage:
First Impression
My initial thoughts on this page were fairly positive. I like the overall look of the site and how it closely mirrors that of the app. A cloudy sky scene definitely doesn’t suggest exercise to me but the app is sort of about exercising in a relaxing way so I suppose it all ties together well.
The colors and graphics are quite friendly and create a welcoming environment. My favorite aspect is how simple the the overall content was kept: just an iPhone with some screenshots, a brief description, some ways to share and a prominent link to the iTunes store where you can find out more and download the app. It’s just enough to get you interested without overwhelming you.
Though I do like the general direction of the app, as always, I have plenty of suggestions for improvement. Let’s break down some specific areas to see what positive changes could be made.
Sound
Everyone who has ever submitted a request to us for a Design Critique for a site containing sound gets the same advice. I always prefer that site developers give visitors the option to add sound initially rather than take it away. Web browsing is a typically quiet experience and sudden loud noises won’t make your visitors anything but angry.
This site admittedly does a lot better than most in this area. Though the sound does begin automatically, it’s at least a fairly serene and relaxing ocean theme with birds and waves. You can also turn off the sound by clicking the chirping bird image near the bottom of the page.
I have several thoughts about this. First, I had to scroll to find it (though I’m admittedly on a small MacBook screen). If someone visits your site at work, a library or any other public place, you don’t want them to have to scramble as they embarrassingly try to find a way to turn it off. You would think the user would just hit their mute button, but more often they’ll probably just close the window as fast as possible.
Further, I can definitely see how the bird with music notes coming out of it suggests a sound control, but it bears an unfortunate resemblance to a Twitter bird link like we now see on just about every site on the web. This makes it not immediately apparent that the bird is the sound control because there is no text to reinforce the message.
The simple advice here is, if you’re going to stick with auto-play audio, put the control near the top of the page and make it clearer what it does. I suggest a seagull graphic (the Twitter bird doesn’t match the ocean theme) and a “sound on/off” message near the bird. Also, make the music note animation stop when the site is muted and start when the sound is on rather than just continuing the whole time.
Animation
In addition to the sound, the page has several floating clouds that drift past both in front of and behind the content. This adds a little bit of fun to the page and is admittedly more interesting than static graphics.
For the most part, the clouds don’t impede usability, but they do occasionally interfere with the readability of the text. Also, as with any looped animation, they can get a bit monotonous if you spend as much time as I have staring at the site! One solid idea that we saw on our ToonyTuts Critique was a simple two-icon control system for stopping the music and/or the animated clouds. The site’s theme was very similar to today’s site so I think a similar control would work perfectly here.
Messaging and Text
I think the site does a good job of making it very clear that we’re discussing abdominal exercises. However, it might be a little on the technical side for such a fun looking page. Consider the main headline “Passive method of isometric contraction.” It’s nice and lofty, but it doesn’t really have a friendly ring to it does it?
You don’t have to ditch this message, but maybe consider incorporating it into the paragraph in favor of a more interesting headline like “Build a six pack while you watch tv!” This is by no means the best example but it gets at the core of my suggestion. A headline like this draws you in and makes you want to learn more rather than turning you off because you feel stupid and don’t have your Thesaurus handy.
Perhaps the biggest problem I have with the entire page is the yellow text on the blue background. These two colors are clashing big time on the small text and making this information very difficult to read.
The problem is the classic conflict vs. complement in color theory. When two colors simply aren’t different enough they tend to conflict with each other, especially when one is placed over the top of the other. Consider the example below and how much more readable the lighter, less saturated yellow text is than the version that precedes it.
Now, I realize that these are in fact the colors from your app so it’s not logical to change them on the site. My suggestion is therefore to simply scrap the yellow emphasis on the text and use something else, bold text, an underline, etc., that doesn’t interfere with the readability.
iPhone
The iPhone graphic with the slideshow is extremely popular for iPhone app websites, and for good reason. It makes it instantly clear what the site is all about. However, I think this could be refined a bit.
For starters, the little dots that serve as the slideshow navigation have a spinning loading circle next to them. This little animation never stops, so what purpose does it serve? When I see it spinning, this suggests that the page isn’t finished loading (we’ve been taught that this is what this graphic means) and when it never finishes loading, it makes it feel like your site is broken. Bottom line, this graphic is distracting, confusing, and serves no practical purpose, remove it.
Also, as a small annoyance, the Apple geek in me can’t help but notice that the iPhone image is out of date. The iPhone 5 is nearly upon us and this site still doesn’t have a graphic of the iPhone 4 yet. I know, it’s ridiculous to have to keep up on this, but since the site is actually for an iPhone app, this can be important. Having outdated imagery makes the app itself feel old and outdated, which makes me think twice before purchasing it!
Navigation
One last thought about the site is that the navigation really seems like an afterthought. It contains links that change the textual content on the page with information relevant to visitors, but for some reason it’s tiny and hidden way down in the footer.
If this were really something minor I wouldn’t mind but it actually seems more important than the designer gave it credit for. The simple solution is to throw it in the typical location at the very top of the page and enlarge the text a little.
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.