Design Review : New University of Botswana website

I was going to review the Department of Customs and Exercise website as recommended by a fellow edumela poster but I decided against it because, as you can probably tell, there is not a lot anyone can say about that website except to say, “It’s really embarassing.” I probably shouldnt even be posting the url to that website given the standard of the website.

Anyways, I decided to write about the newly launched University of Botswana website. The review of this website will be a two part series with the first post focusing on website Layout, Navigation and Typography and the second and last post focusing on Content and Page Markup and concluding with the Verdict on the new website.

Overview

At first glance the website gives very little away as to what it is all about, at first impressions it looks like a minimalist website for a small charity organisation than a website for the largest academic institution in the country. The minimalist style was a good idea but it looks like it is minimalist for its own good because now it looks nothing like a website for a reputable institution.

Layout

The layout is purely CSS, well done to UB web developer/designer for that, it’s about time someone did their job right and follow the standards. However, the layout lacks any design appeal, it is just a set of colored boxed with some text written in them no artistic imagination whatsoever.

The use of Setswana traditional dancers’ image as one of the primary components of the layout is also questionable; what does it say about the university? It might have been relevant for a culture club or as part of a slideshow tucked somewhere in the menus but not in the main page of the university. It reminds me of the Southampton University website which has also undergone a re-design;

The logo seems somewhat out of place, the design may be all clean and tidy but it just looks inappropriate as a logo for the University of Botswana and so does the website.

Navigation

There is three sets of navigations - 2 on the left and a single one at the top right corner; all of which use Javascript to provide drop down and collapsible effects.

One fundamental flaw in the design is the lack of a Home link, I realised the logo is linked to the Home page except in the homepage itself but some people will not be able to pick that one up.

I guess it is worth discussing each menu group in turn.

Left Navigation Menu

The collapsing effect of the two menu groups on the left is an overkill especially given that with both menus fully extended, the whole left column barely exceed the 600pixel mark that the layout is targeting. If you are using Internet Explorer 6 or 7 you won’t see the roll-out effect however, it only seems to work in Firefox [3].

The leftmenu as shown in the image below, when fully or just one portion of it is expanded, it makes the left column spill right through the footer [see image]. Another design flaw! If you are using Firefox, you can go to the Student ID page to see what I’m talking about or better still, check out the image below.

• For those who have this “sliding out” effect, you will realize that everytime you load a new page, the menu collapses, so you always have to click on the arrow that opens the menu up everytime you want to navigate through the menu items: obviously this can be a pain on the behind.
• On the same menu, the menu item International Students results in Page Not Found error; webmasters designers and masters must learn to validate their websites. (If you get a 404 error here, don’t point a finger ;-), I’m only a part-timer . . . )

Top Navigation Menu

The top menu comprises the quadruple, quick links, downloads, UB sites and faculties and schools; The text size is way too small for medium screen resolutions, the designers must have forgotten to check the design in different resolution. Talk about commission a website without validating or quality control!

This menu also has the following flaws

1. Inadequate vertical space between quick links and downloads as well as between UB Sites and Faculties and Schools menu items; the side-effect of this is that, it becomes very difficult to know which menu item you are hovering over or clicking on.
2. The drop down menu in the sub-navigation does not have any a:hover effect which causes a similar problem to the above, i.e. you can never be sure which menu item you will be clicking on, you just have to click’n hope you land on the right page.
3. The quick-links sub-menu is too long with respect to the vertical size of the page as it covers at least 3 quarters of the page and looks unprofessional at low resolutions e.g. 800×600 as shown in the image below.

Typography

At a medium resolution of 1280×1024, the text on the website looks very small and the website itself looks a bit isolated in the middle of screen, I wonder what it looks like at high end display resolutions e.g. UXGA@ 1600×1200 or the WUXGA@1920×1200.

The line-height on many pages is also very poor unlike the one in the previous review of the communications ministry website. Some points of note s far as typography is concerned

1. Inconsistent or lack of proper formating of content e.g. no use of lists, blockquotes, shorter paragraphs and no systematic sectioning of textual content; Some pages are well sectioned like this one but others border on ridiculous.
2. Small line-height e.g. 1.166[no units] in may pages making the text very difficult to read.
3. Use of text only, I wonder what happened to “A picture is worth a thousand words.” We all know it’s an institution of learning and whatever but c’mon guys, not even a single picture of students just hanging in the uni or at least busy titrating in the Chemistry lab.

That’s it for this part of the review, tune for the conclusion to this 2-part series focusing on Content and Markup. Please leave your comments below.

Cheers

Thapelo