This test was performed on a 1024×768 resolution (still the most common used reso at the moment).
The first thing you notice is a wall of red, the big logo in the center of the page and the weird navigation on top.
Further inspection of the landingpage shows us that there is a horizontal scrolling bar. You can scroll the lenght of the entire site to the right. What’s that all about?
The navigation on top of the page is made in Flash, but the only animation you see when you hoover over the words is the fact that they turn red. Why use flash for this? The color change itself is a good thing, because for the casual internet user, it could get confusing whether or not this is a navigation element.
Talk for example the third link ‘publicaties (publications)’. If you create your navigation in a way you need to split up a small word like that, you’re doing something wrong. End of story.
Also, there is no uniformity within the navigation besides the ‘people icons’ and the font. The creation of the black person with a red books is neatly done, but all the different positions and figures make the site look cluttered.
The second link is made in way by using the person image as the letter ‘V’. This is unnecessary because it doesn’t add anything to the site/look besides cheapen it.
Onwards to the center content section.
There you see a white & red striped background pattern. This was probably put in place because using a plain white background would kill your eyesight. Because of the red & white pattern, you can’t use black text for the content, it would be harder to read.
Next is the big logo in the center of the page. I’d place that within the navigation element. The logo itself is wellmade, but cutt-off for no apparant reason.
Last of this page is the footer. Why is the image cutt-off again. Why? Because that makes it arty-farty? Who knows.
Lets try some links now shall we?
Click the link ‘veldeke’. The content (text) is spread out across the entire page. Big nono, you just don’t place text on a page like that, and definately not black text on a red & white background.
Next click ‘groepen & scholen’ (which is partially covered by an image by the way!). Again the context is spread out across the page with headlines marked in red. This works pretty well, making them stand out pretty decent. But if you scroll down further, you notice other headlines marked in a different colour red. Okay it’s all red, but lets try and keep it to a minimum please.
The little ‘^’ icon on the right side on the page to get back to the top also doens’t cut it.
Sure for someone who is used to working with the internet it can be a universal sign saying ‘hey get back on top with this’, but for the average user this usually goes unnoticed.
At the time of writing this, I found out why the mainlogo on the landingpage is cutt-off. If you look at the bottom of every subpage, you’ll notice a smaller version of the logo pasted on top of a table. I’ll admit this is nicely done. But don’t just copy/paste the image on the landingpage like that.
So in conclusion:
- Plus: The site has its own identity
- Plus: The logo and image icons (people) strenghten the look of the site (although they’re not used properly)
- Plus: The navigation tries to put some emphasis on typography, which I find to be a good thing, but the placing of the person icons bother me
- Cons: Use of frames. Makes it hard to bookmark
- Cons: Cluttered navigation because of the different images (flash)
- Cons: Dense content, makes it hard to scan
- Cons: Coding issues, take for example the landingpage, with the horizontal scrolling
Overall, it definately needs tweaking (maybe some redesigning). The idea behind the site is fine, it’s the execution that’s lacking.
I have decided to do this regularly, so keep your eyes peeled for more in the usability test series. And if you have a site, and like to see it reviewed here, let me know! Maybe I’ll dedicate a topic about it!
Add your comment below, or trackback from your own site.
Subscribe to these comments.
Be nice. Keep it clean. Stay on topic. No spam.
You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>