Web Page Layout - Examples - Bad Examples

Bad Examples

Cursor

This is a leftist news blog that collects hard to find and not well covered stories generally about Iraq and Afghanistan and links to them. It also has many blog rolls of links to sites that are potentially of interest to the audience of the site. While the content it links to is very good, and it's blog rolls are probably the most comprehensive in this domain, it remains an incredibly difficult site to view and use. Cursor Homepage One of the first things you'll notice is that there is no noticeable navigation at the top of the page. The second is that the layout is fixed to a very thin size. This is problematic for users with larger screens that want to view more content at once.

The next thing that you'll notice is that there is what appear to be ads running down the right side of the main content. Actually these are not ads, they are links to articles. Which is extremely confusing given the way they look and where they are positioned. The final thing here is that content items are not uniquely identifiable. Sometimes two article links are in the same paragraph. Sometimes they are related and sometimes they seem to have almost no relationship. The content is in no way clearly marked where it will take you. So you have no idea as to how the navigation works.

Sony

Sony's site is very slick on the surface, but is really a confusing maze for the user. The main problem here is a lack of consistency from page to page. If you look at the 3 different pages you can see how different they all look. They particularly don't have a consistent navigation system.Sony homepageSony Electronics HomepageSony Electronics Support Homepage In the last screenshot you can see that it is unclear what the main navigation is. In all the pages it seems difficult to tell why certain items are grouped together and other's aren't. For instance if you look at the main Sony page it is difficult to understand why the Explore box on the right is there. Returning to the main page for the support site, there are too many navigation links there, causing unnecessary confusion for the user.

HP

Once again the initial navigation is not well placed. In stead of being on the top or the left, it's on the right and the middle. Also there's overlap in the domain of the links making it confusing as to where you should click. The two good things about this main page is it's not to busy, and it's very short and to the point.HP homepageHP Support Site Homepage HP Small and Medium Business Page On the support page there is a nice easy to understand navigation bar at the top, but that's the end of the line for good page layout here. The search function in centrally placed and that's probably what most people end up using because the links that surround it aren't very helpful or well laid out to make sense. The final page shown, the small business page, looks initially like it has well defined and separated content items, but a closer look reveals otherwise. The items seemed to be grouped for unknown reasons, that I can't see making sense to the average user. And of course there are to many links to sort through for a page like this.

All in all the problem with the HP site is that as you maneuver through the site, the layout changes way too much. There is generally too many links on each page and they aren't well organized. Also the colors seem to change, and not always having to do with what section of the site you're in. Making the color information confusing to the user.

UCLA's Graduate School of Education & Information Studies

On the Information studies page you'll find too many navigation links in too small a space. You'll also find that it's not clear if the center is actually content or navigation. And what looks like a bottom navigation link set, is on a page that has no scrolling, and the number of items in this set is way too many.UCLA Information Studies HomepageUCLA Graduate School of Education and Information Studies Homepage On the main page for the whole GSEIS is a little better, less links, more clear division of the parts of the page, etc. Also not all of the grouping is clearly semantically explainable.