s14

Splashnology is a community design site. Members join up and submit articles, which are then displayed in blog format on the website.

Today we’re going to take a look Splashnology’s design to see what has been done well, and what we would improve on. Lets start by opening up a new tab, and then on to the review!

NB – This is a sponsored design review. To see about getting one for your own site, email us.

What Has Been Done Well?

The first word that comes to mind when describing this design would be “clean.” The color scheme is largely black and white, and there is ample padding with few visual effects.

The subtle differences in shades of grey, combined with relatively large headlines and photographs take what could otherwise be a very simple appearance, into a nice, minimal design.

s1

In the whole of the website, there are very few “graphical effects” as such to catch your eye. Instead this design relies on its very lack of those effects for its appeal, and some nice touches in smaller aspects of the site.

For instance, the article titles begin by naming their category, and then the title of the post. On a site with such a wide variety of categories, this could be a very nice of quickly scanning for the posts you want.

s2

Another well made section of the website is the “Our Friends” blogroll of the sidebar. It is a simple list, but with the favicons of each website shown. In more colorful websites, this could end up causing clutter, but here it adds a spark of life to the site.

They may want to follow their own advice on these images and use CSS sprites though, cutting down by 19 HTTP requests.

s3

One area of a website which rarely catches my eye is the navigation between results pages (The “1, 2, 3, 4…” etc. navigation at the bottom of a search). That changed on this site however.

The large “previous/next” makes it very easy to use. Too many sites have a tiny little arrow in a box that you have to hunt for (Or worse, a single arrow for the next page and a double arrow for the last page). Splashnology’s setup was very friendly and looks good.

s4

What Could Be Improved On?

One big question needs to be answered; what is this site?

Load the homepage and you will be presented with what looks like a blog. You’ll see a line of tabs saying “Posts Blogs People Jobs Help”, which is a little confusing. You’ll even see the name Splashnology, which could mean just about anything.

You may or may not notice the tiny little slogan tucked under the title, “Web technology society.”

Whilst there is nothing wrong any one of those elements, when you put them all together, they just don’t mesh well. When I began this review I thought I was reviewing a blog with some unusual tabs I should check out later.

It wasn’t until later that I found the site is a community where anyone can sign up and submit articles. They even have rather extensive author pages.

If your site looks like a blog, that’s no problem. But if it’s not a blog and you really want me to sign up, to vote on articles, or anything else your members can do, then you need to make it clear.

We’ll talk about the header in a minute, but let’s just look at the social voting options for now.

s5

Splashnology’s 2 boxes are hidden way down at the end of the post, those decimals could mean anything and even the 2 arrows aren’t that clear on their purpose (And yes, there is actually some sort of text in that blue box…)

Contrast that with Digg. One simple number which is clearly a number of votes, and the thumbs-up vote button is hard to miss.

If people are going to interact, it needs to be as simple as possible for them.

The other major area which could do with a rethinking is the header itself. This is the current header:

s7

There is quite a lot going on here, without any one element truly taking precedence. The content includes the logo, login/register buttons, navigation tabs, a submit button, a search form, and some more navigation.

But what could be done about this all?

Let’s start with the “Login or Register.” The 2 are given equal prominence, but a user will only ever need one or the other. Now let’s assume that a user looking for the login button has been to the site before and knows it better than a user looking for the “Register” button would.

The returning user knows his link is in the top left. The new user doesn’t know where to begin and needs the “Register” to catch his eye. With that in mind, why not make the “Register” larger (or the same size), and the login a lot smaller but nearby to it.

s8

Now onto the navigation. The large tabs divide the site into sections. Most are self-explanatory, except for the “Blogs” tab which instead of showing a list of blogs, it shows a list of topics.

This navigation is useful for people looking to get to other parts of the site, but the majority of users are going to be interested solely in the articles. The “Blogs” section already has a sidebar widget. Something similar could be made for the “Jobs”, and then the rest of the navigation can be moved somewhere less obtrusive.

The sidebar widgets will gather the attention to these sections (Better than the header could, because it will provide content from the sections, e.g. latest jobs), and users can then use the regular header links for navigation if they want to return to them a second time.

s9

Now we’re starting to free up some space!

We’re left with the Submit button, the search bar and the 2nd navigation bar to sort out.

The Submit button is an interesting one though. Currently it is the only indicator of the social nature of this site, but for an un-registered users, it’s pointless because they have to register before they can use it.

That leaves us with a choice; we can remove the “Submit” button for non-registered users (freeing up more space), but we have to find another way to emphasize the social nature of the website.

If we highlight the social voting buttons around the post titles (With a new design, as we talked about earlier), then the social nature will become apparent. We can also use the header to help us out by increasing the size of our slogan. I’ll also take the chance to reword “society” to “community.”

s10

When a user is logged in, they won’t have need of the “Register” or “Login” buttons, which frees up the perfect space for our submit button.

s11

Our next move now is to focus on the second navigation bar. Let’s consider what we currently have.

A “Popular” tab which lists the most popular posts. A “General Blogs” tab which showcases posts from other websites. A “Personal Blogs” tab which shows posts written for Splashnology, and a “Top” tab which display the most popular posts, with different options for date ranges (e.g. Top in 24 Hours etc.).

Each of those then has a “Positive” or “Negative” subnavigation option.

The first thing we can say is that Popular and Top should be the same thing, so let’s strike one off our list.

Now for General and Personal; the purpose of these tabs isn’t clear until you actually click them and try to work it out. And for a new reader, what difference does it make if the article they read was submitted in, or hand-written there on the site? That information doesn’t help them find what they’re after.

We could reduce this list down by putting the main categories in the top navigation, and the actual topics in the subnavigation.

You could experiment with grouping the topics into categories and listing those (e.g. Design would be a main topic, and Inspiration, CSS, Tutorials etc. would be a subtopic), but our goal here is to make it as clear as possible so we’ll keep it simple.

We will have one tab for “Home” and one tab for “Popular.” Both of those will then list the main site topics underneath.

When a user is logged in, this also leaves us with room for a “My Account” tab, giving them quick access to things like their profile, account settings and comments.

s12

Last but not least, the red “Search” text stands out merely by having almost the only color in the header. Let’s take that out and all a little spacing to the header.

Now we’ll compare our finished product with the original.

Original:
s7

vs. modified:
s13

And that was all done without adding any sort of graphic effect or changing the style in any way. It’s amazing what some organization and layout can do.

All in all, the minimal Splashnology design is well done and the style needs no changing. The usability of the site and its clarity of purpose could be strongly improved though. Taking each aspect of the site one at a time and thinking “how could I make this clearer?” will take it a long way.

What do you think of Splashnology? Is there anything you would do differently?

And on a purely Pro Blog Design note, what did you think of the style of this review? Our previous reviews have always been shorter and snappier. A list of the good sides, then a list of the bad. Which do you prefer?

Enjoy this post? You should follow me on Twitter!