Interface Design & Aesthetic

With the advent of Web 2.0, websites today need to be simple and social. While PETA’s site is indeed social, its design is not simple, which in turn affects it functionality.

Because of the nature of PETA’s organisation, PETA has tried to cram as much information as possible on to its home page whereas it needs to eradicate the unnecessary information and present a clean and simple interface design.

THE GOOD, THE BAD & THE UGLY –

Design Analysis of PETA’s Homepage

PETA’s site is centred to cater for various screen sizes and resolutions.

The structure and layout of the site does not guide the eye around the page. There is a lack of variation in visual weight throughout the page.

Users need to be able to identify navigation, which tells them various important information (ie. Where they are; Where else they can go from here; What options they have for doing stuff). The site’s navigation is definitely not simple. The site is confusing to navigate through and some of the tags are not simple, logical or clear. The links are also not obvious and needs to be addressed, eg. Positioning permanent navigation links apart from the content; differentiating navigation using colour, tone and shape; making navigation items large and bold; and using clear text to make the purpose of each link unambiguous.

PETA would have benefited from a bigger top section where they could have made their logo bigger and could have put ‘People for the Ethical Treatment of Animals’ as a large header so users would know exactly what PETA stood for. Basically, the top section looks crammed and is too small. On Web 2.0 sites, both the main branding and main navigation should be obvious, bold and clear. PETA’s site lacks this.

The site has three columns which is the norm in today’s websites. There could be more white space between columns though. The site tends to look like a newsletter though, which is trying to get as much information put in as possible.

PETA’s site does not use rounded edges on its corners which would help it to reflect the informal attitude and casual tone of today’s web.

Sans serif fonts are used on the site which reflects a casual and informal tone.

Not only does big text stand out, but it’s also more accessible to users. This benefits not only users with visual impairments, but also users looking on LCD screens in sunlight, users sitting a little further from the screen and users just skimming through the page. The site does not make use of large fonts, which it would also benefit from to give the site some structure and hierarchy. The font size used on the site’s articles and headings need to be increased to make it easier for the user to read. Basically, legibility needs to be increased. The headings would also benefit from being a different colour and bolder to make them stand out.

PETA’s logo is not bold and it is unclear what PETA actually stands for.

Bold, strong colours draw the eye. With Web 2.0, bold and strong colours are used to divide the page into clear sections and to highlight important information. The colours used on PETA’s site are very light and there is no use of strong colour. The site could benefit from the use of bold colour to give it some structure and hierarchy and make it easier for users to navigate around the site. It also helps the user to differentiate between areas and to draw the user’s attention to elements.

While PETA have used the complementary colours – blue and orange – there is not enough of the orange for it to be effective and dynamic. A stronger blue with more use of its complementary orange would make the site more appealing and modern.

3d, reflections, drop shadows and gradients are called rich surfaces. They help make the visual interface feel more real, solid and finished. The only use of rich surfaces on PETA’s site is the use of gradients in the top navigation and heading blocks.

Images rather than simple icons are used throughout the site.

There is an average amount of whitespace between features and there is a reasonable amount of padding (space) between elements and text.

The line heights (leading) of the text would benefit from being increased to make the text easier to read.

The heading sizes, font choices, colouring, button styles, spacing, design elements and illustration styles are all consistent throughout the page, but these all need to be improved to give the site a cleaner, simpler look and would help to guide the user around the page.