Before I became completely set on the final idea for my portfolio, I had to take into consideration some do's and don'ts of web design. I read Steve Krugg's 'Don't Make Me Think' to gain a further understanding into usability and clarity of a website. I found that too much content is always a bad idea, and simplicity is key. I decided to make the navigation of my site as easy to understand as possible, and as Steve Krugg explains using as few words as possible (one word is best) for site pages and links are a lot easier for the user to digest.
Steve Krugg talks about the visual hierarchy, meaning the larger and bolder content will be the users main focus and the smaller content will be less important. These are considerations I would have to make in my design, this is why I have created emphasis to headings and titles by using larger and bolder fonts.
Monday, 3 January 2011
Five Star Review
Website: BBC
I researched and studied the BBC website to examine its look, accessibility and ease of use. The information architecture of the home page is rather overcrowded; there is a lot of content for the user to take in such as a calendar, news headlines, clock and radio which are scattered around the page. The site however retains a professional and modern look and each feature of the site is customisable in that the user can move and close any of the features on the home page to rearrange the look of the site to suite there needs.
The website’s main navigation is at the top of the page, the site uses css navigation which is easy and simple to use. The text is around size 12 which is a standard size for most website however may not be easily readable for all users. The site also has sub navigation at the bottom of the page which is slightly larger and more accessible to the potential user. However, this is another example of maybe too much content which could leave the user unable to find what they want from a certain element of the navigation, for example, a user may see the top navigation and realise there is no link to the music section.
The BBC website has an accessibility option at the bottom of the page in the footer. I feel this would be more helpful if it was at the top of the page as the user would be directed to it more easily when they click on to the site. I do feel however that the accessibility options are very helpful on this website as they allow the user control of the colour scheme of the site to make text easier to use, for example some users find light text on a contrasting black background easier to digest than black text on white. These options also allow the user control over the font size; the user can has three options with the highest font size being around size 15.
The websites colour scheme changes depending on what time you visit, although this is an advanced and effective method of displaying the site, it does show some inconsistency which could make the user unfamiliar with the site when they use it again in the future.
Design: *****
Accessibility: ****
Rating: ****
Website: MSN
The MSN website uses a simple blue and white colour scheme which is subtle yet effective. The site has many categories with two lines of navigation; perhaps this information could be more simplified into broader sub categories as the information architecture is a bit crowded. The homepage includes a search bar at the top which is the main focus and function of the site; this is clear and easy to use so it is a good example of information architecture.
The main content of the site shows the latest news headlines with a large picture relating to it. This is helpful and informative to the user and they are immediately aware what the story is about. The site requires a lot of scrolling to get to certain parts of information, this could lead the users interest astray, for example certain features such as ‘weather’ and ‘directions’ are right at the bottom of the page and when visiting the homepage for the first time the user would not be aware that they are even there.
There is a separate container on the right where a lot of the sub sections are displayed, however, the main content of the site on the left stops about half way down and has a large amount of empty white space under it. This is not a good visual element of the site and some content here would be advised.
Design: ****
Accessibility: ***
Rating: ****
Website: Yahoo
The Yahoo website uses a strict white colour scheme with very subtle use of purple and blue. The site navigation is displayed down the left hand side of the page; this is well structured with an image next to each link. Similarly to the MSN website, Yahoo has a search bar across the top and the main news headlines in the main body. This attracts the user’s attention and allows them to find what they are looking for easily.
Unlike MSN, Yahoo’s homepage requires little scrolling to get to the information on it, the site is more organised and structured and this is a positive aspect of information architecture. I feel the colour scheme could be slightly more adventurous but the information is displayed well and it is hard for the user to get lost around the site.
The user can also edit the navigation to only display the pages that they often visit. This is a very helpful feature for users that may only visit the site to find sports or business news. The site however has no noticeable section to cover accessibility options of the site; this is something that could turn displayed users away from the website.
Design: *****
Accessibility: ****
Rating: ****
Website: Sky News
The Sky News website uses a basic white background with black, red and blue colour for the main content. The navigation is displayed under the banner; there is also a large flash advertisement above the navigation which is quite distracting. The main news story is in the middle, this uses yellow text which breaks the colour scheme and makes the site look quite untidy.
Similarly to MSN, Sky News’ homepage requires a lot of scrolling to get to the content, most of the information on the site is below the main story which takes up the majority of the screen. This could be frustrating to users who just want to get onto the site and find what they want immediately. The text size is quite large throughout the site which is good for accessibility, unlike Yahoo, the website also has a full section on accessibility in which the user can find a more simplified version of the site with options to increase text size and change colours.
I feel the main look of the site is quite poor, however, the accessible mode of the site is a lot better in structure and style, and this saves the site from a low rating if the user is willing to scroll down the page to find where the accessibility option is hiding.
Design: ***
Accessibility: *****
Rating: ***
Website: iGoogle
iGoogle is fully customizable with a large amount of available themes and styles. This allows the user control of the site to create it how they would like it to look. The main search bar is at the top of the page, as was the case with all of the previous sites I looked at. However, in contrast to the other sites, the main news stories are not in a fixed position, as the user can move these around anywhere or the page or even get rid of them if they don’t find them necessary.
The site is fairly well structured with little need to scroll down, the main navigation if down the left and is well organised. The site is easy to personalise and easy to navigate, these are clear features which make the site better than the others. However, there is no obvious section to be found on accessibility, this could segregate the audience of iGoogle.
In the news stories section of the site, the user can chose which news headlines they want to receive, for example if they are interested in a particular football club they can get the news stories specifically from that club. This is an advanced feature of the site which enhances user experience.
Design: *****
Accessibility: ***
Rating: ****
Flash Gallery
Assignment Brief
You are required to develop an interactive animation that portrays movement from one or more areas to another. This requires a minimum of five images to do this. For a higher grade you must utilise some form of button interface to be able to move between the areas.
The project should utilise coloured, black and white or sepia toned images/photographs and for a higher grade make use of interactive sounds, e.g. button presses.
You may add background music, (bear in mind if you allow access to your flash work over the internet then you may fall foul of copyright laws). I advise using copyright free material or perhaps showcase a local band(s) music if you publish your work on the web.
You may add other interactive elements within your images.
Use your imagination for the images; do not just use the corridors in the college.
The project when finished should be saved to your storage area and backed up on CD or USB memory stick. You are advised to use a maximum document size of 760 pixels x 410 pixels (displayed centrally) to fit safely within the confines of a web page.
Outcome
Outcome
Subscribe to:
Posts (Atom)