Transcript
Analysis of Web Sites
AIM: To brows and critique existing Web sites. To create critical awareness of navigational, design, aesthetic and content components of Web sites and to introduce the features and building blocks of a good Web site. To create awareness of features that makes a Web site difficult or unfriendly to use. To produce a list of do's and don'ts that applies to building a Web site.
Checklist for the analysis of Web sites
This list below includes various criteria by which you can evaluate Web sites. It is not always immediately obvious why we prefer some sites to others, but by taking the time to understand what makes a Web site 'work' for us, we can begin to establish some best practice rules for creating really effective Web sites.
Develop a list of some web sites for analysis and assign each site and score for each question:
Excellent
Good
Not good, but not entirely useless
Useless
1- How navigable is the site?
Is it easy to find the information you're after, given the various signposts on the Home Page?
Is it easy to find your way back to the home page or other main section pages from the site's 'interior'?
Are the navigation graphics self-explanatory?
Do you have to click through too many pages, to get to your destination page?
2- How readable is the information on the site?
You've found the section of the site with the relevant information for your needs -is it easy to read?
Are there clear headings on the page?
Is the size and color of the text easy on your eyes?
Do the graphics on the page compliment, or detract from, the text content?
3- Is the site aesthetically pleasing?
Do the colors of the site design work well together?
Is there a continuity of style between the graphics?
Is the spatial arrangement of text and graphics complimentary, incidental or Irritating?
Is the design of the site in tune with the subject matter/organization?
4- How informative is the site?
Does the information on the site stick to overviews and links to other resources, or are there opportunities to access in depth resources?
Are there opportunities to interact with the site and ask for additional?
Information (e.g. 'contact us' buttons etc.)?
Are the search pages, discussion forums, guest books and other special features clearly explained and easy to use?
Are the lists of contacts, resources and links annotated with useful descriptions, explanations and advice?
5- How long does it take to get the page loaded onto the screen?
Are there large graphics that slow down the delivery of text onto the site?
Are there text alternatives to the graphics to read whilst waiting for the graphics?
Does the length of the page force you to wait a long time before you can read what is at the bottom of it?
6- How does it look on the different browsers and different resolutions?
How it appears on Internet explorer?
How it appears on Netscape Communicator?
Does it look same on the different resolutions?
7- How does it come with Daily Updates and Breaking News?
Does it look static all the day?
Does it provides follow ups and updates constantly, throughout the day?
8- Does it provide any system to enable readers to alert to mistakes and hold us accountable?
Does it manage for the corrections, modifications and changes on daily bases?
Does it make corrections in the follow up stories?
9- Does it provide the facility of Feed back?
Does it include two-way, interactive communication systems?
Does it provide the facility of inter personal Communication?
Does it provide the contact information or any other way of getting response and queries of users?
Does it provide the way to users to comment on news story or other journalistic content?
10- Does it provide the facility to view or read the old versions of news paper?
Does it archives or create a directory for each year of issues?
Does it provide the facility to search the articles with respect to date of publishing?
11- Does it provide the facility of Search the site because the larger sites need a search feature so visitors do not get lost?
Information architecture
Information architecture, as its name implies, is fundamental to your design. Information architecture (also know as IA) is the foundation for great web design. It is the blueprint of the site upon which all oilier aspects are built - form, function, metaphor, navigation and interface, interaction and visual design. Initiating the IA process is the first tiling you should do when designing a site. Information Architecture includes:
1- Defining the mission and vision for a site;
2- Determining the content and functionality of the site:
3- Specifying how users find information on the site; and
4- Mapping out how the site will accommodate growth and change.
When describing information architecture, designers often focus on the third role, which is specifying how users find information on the site. This role can be broken into role into the following tasks:
Designing ways to group your content;
Designing a labeling system for those content groups;
Designing navigation systems to help you move around and browse through the content; and Designing searching systems for your content.
Navigation
Navigation is a sub-set of information architecture. It also emphasizes the interlocking relationship between navigation, content grouping and site structure within the overall information architecture.
Navigation is the means you offer your users to locate their position within your site and find their way around the structure, both forwards and back again. It gives them something to hold on to and, if you get it right, it will increase both their confidence in your site and their ability to use it.
Three fundamental questions of navigation on a web site are as follows:
Where am I?
Where have I been?
Where can I go?
No matter what navigation design you pick for your site, there is one common theme to all navigation. All it does is visualize the user's current location and alternative movements relative to the structure of the underlying information space. If the structure is a mess, then no navigation design can rescue it. Users like to build a mental picture of the organization of a site. This is not possible if there is no proper structure. Web sites are built around basic structural themes. These fundamental architectures govern the navigation interface of the web site and mould the user's mental models of how the information is organized.
User interface
For successful navigation design, it's important to consider the interface as well. In the graphical environment of the Web, interface design has to do with constructing visual meaning. The happy marriage of architecture and interface - of logical structure and visual meaning - creates a cohesive user experience. The marriage is crucial to helping users get around on the web.
The user interface can extend, for example, to how well or badly you have labeled your content sections. If the labeling is ambiguous, you are making it more difficult for the user to operate within the environment of your site. However, with the web, the focus is on making sense of the environment generated by the medium, with its interactive and graphic capacity. You can structure your content logically and provide the right navigational help, but how your user is able to relate to them and work them is the key ingredient of interface. User interface can be everything from having standard colours for visited links to using metaphors that help deliver the other elements of the information architecture (e.g. content categories and navigation). You may use the disciplines of graphic design to present your interface, but they arc not your interface design. That should centre on functionality and utility.
Graphic design
To some beginners, this is web design, i.e. the layout, use of typeface, colours and graphics. It is in fact just one stage of the process, but a critical one. Being a graphic designer must be a frustrating business. To the uninitiated it looks easy because you can change the font and text layout with the click of a mouse. This gives people the false impression that as they can 'do a little graphic design', they can try it on a web page. This is not the case. There is a good argument for saying that if you only have enough budgets to call in a single expert for your web project, you should make it a graphic designer. It is a highly skilled discipline, particularly on the web, which is not an understanding environment for graphic designers. It is difficult for them to control how the same page is seen by every user because, among other things, not every user uses the same type of web browser.
Usability experts
Usability is now a big issue in the web world. Expectations have risen and choice has been extended. Sites must deliver. But do not confine usability to information-based content. If an entertainment site is not entertaining, it's got a usability problem. A good way to test whether a site is delivering the high-quality is constantly to check with your users and consult a usability expert.
Site mapping
Aim: The aim of site mapping is:
To develop a strategic approach to site planning and development.
To understand why it is necessary to develop a 'statement of purpose' for a Web site and why the target audience of the site should be identified before building a site.
To understand why it is important to plan the structure of a Web site.
To map out the site in a manner that ensures easy and effective navigation by users.
To map out the site in a manner that will make it easy to maintain and add new information on an ongoing basis.
Plan and build a site
You will now plan and build a site as follows:
Discuss the purpose of the site. In other words, what do you want the site to achieve?
Who is the intended audience of the site? Not just the people that will access it, but also the people that you really want the site to have meaning for.
How does the site relate to the broader goals and communication strategies of your organizations?
What kinds of information circulate in the organizations in which you work, or have worked? This could include: staff profiles; project work, recent news, events, newsletters etc. Try and make the list as long and varied as possible. Assess whether this information is relevant for the Website. Use the purpose of the site, as defined earlier, as a yardstick.
Look at the list and try and come up with 6-8 headings that are inclusive enough to accommodate all the items on the list. These headings will form the entry points to information within the site, so they need to be as self- explanatory and useful as possible. They will become the main links from the home page. Avoid acronyms, and keep the headings simple.
Now link the items in the first list to their relevant section heading, by drawing lines from one to the other. Some headings may contain several items on the list, while others might contain only one item. E.g., newsletter may be the only item that is linked up with the News section heading, while staff, history and Donors may all be linked to the About Us section heading.
We now have enough information to draw a map, which shows the basic structure of the site. This map will also show routes around the site, that is, how users can navigate their way from one page of information to another. The different headings will become different sections of the site.
Draw a diagram that contains a box to represent the Home Page and boxes for each main section page, on a single sheet. Place the Home Page in the top left-hand comer. Draw arrows from the Home Page to all the pages it should link to.
Having established where the user can go to from the Home Page, we now need to look at links from each of the other Main Section pages. Insert arrows to demonstrate these links on your diagram.
Now we can start adding documents to the main sections to see how this affects navigation of the site. The news stories or 'documents', which make up the News Section, are all linked to from the News page, and link back to it as well. They also link back to the home page, but these are 'one-way streets'. Each Main Section page should give the user an opportunity to return Home, or visit the site's other main sections. This results in the site developing 'two-way streets' between all these 'principal' pages.
The site has been mapped for the user that will navigate it. Now we can turn to the Web master's plan: the file and folder (or directory) structure of the site.
Consider each of the Main Section Pages in turn. Check which ones will form entry pages to other documents, and establish which ones will contain that section's information within that single Main Section Page. For example, the News Page will probably link to other pages with news, while the Links Page may well contain all its information on that one page. It is important to think ahead when making these decisions. Assess which sections are likely to grow into collections of pages, and which ones will remain concise and no longer than one page. Any section which looks like it will grow into several pages of documents will become a folder:
Design your web resource
Following are the key stages in developing a web resource. These stages will guide you, as you take your content through the design process.
1- Ask yourself if online the right medium for your message is.
2- Define who you are trying to communicate with and what you are trying to communicate. 3- Define your mission and the goals for your site.
4- Consider all your potential content.
Four main types of content are:
Static - any information that is unlikely to change, for example contact details, site rules and codes of conduct;
Dynamic - 'what's new' sections, daily news and articles; links and references;
Functional - menus, navigation bars, etc.; and
Interactive - e-mail, members' areas, forms and scripts.
5- Organize the content into sections.
6- Choose a structure for your sections.
7- Give users the tools to find their way around the sections. 8- Present the whole package effectively.
9- Ensure that the whole package works within the online environment. 10- See what your users think before going live.
Qualities of a good web site:
1- The freedom enjoyed by users roaming where they wish, gathering content, comes at a price that you, the provider, have to tell your users where they are within the web and the site, and to help them find their way around all the other pages; helping the users to operate in a screen-based interactive environment.
2- Give users the tools to find their way around the sections.
3- The first thing you must offer is consistency. You may want to offer a rich mix and variety of content, but if you want users to find it you must give them clear and consistent guidance around your site structure. Remember, not all your visitors will come through the front door. Some may be delivered to a single page, deep within your site. by a link from elsewhere. So each page should be able to stand alone editorially with a clear identity and provenance.
4- Each of your pages should contain your site identity, usually a consistent logo or heading.
5- Each of your pages should state who created the content on it.
6- Also inform the readers when it was created or revised.
7- Provide an informative title for the content.
8- Indicate which area of the site the user is currently in.
9- Provide a link to the home page.
10- Provide a link to an index or site map.
11- Provide a search facility;
12- Provide a way for the users to return to previous pages.
13- Provide a linkable summary of where else on the site they can go; and
14- Link them to web content anywhere that is specifically related to that page.
15- Don’t put ambiguous labels on content categories
16- Standard features that can support navigation
There are certain standard features that can support navigation, such as links being underlined and the cursor arrow turning into a hand when over an interactive area. In theory, your browser window can help with backtracking by offering 'Forward', 'Back' and 'History' buttons, although these do not help users who have parachuted in from another site to navigate yours. The 'Back' button will only return them to the previous site they were visiting. So you've still got a bit to do.
17- Do not put search facilities at the bottom of the page and, so, usually off- screen unless the user scrolls.
18- A page must have a visual balance. The size of graphics and images should be in relation to others.
19- Do not forget the white space:
White space - the space between visual elements - is an integral part of the message ... the white space tells you where one section ends and the other begins ... systematic use of white space can vastly improve the presentation of text for easier reading and better comprehension. Designers have always been aware of its potency on the printed page. The screen is no different. Some of the most successful web pages use the background to the content to form a design as much as the content itself. The successful use of white space is a great skill. It is not just the holder of the text, images, etc. It has a visual weight of its own.
20- Use of color:
Color is a powerful tool in the designer's box, so you are advised to use it carefully. Color can say much about your site and you. It should be used in line with your mission statement. Color designed by mission. But if the purpose of your design is to communicate, color is an important part of this process. If you think carefully about your users and what they want, you can provide a color scheme that will enhance your message and encourage user involvement.
21- Use of Type
Type plays an important role on almost any web page. The two main issues for type are readability and legibility.
Readability is important when reading a lot of body text. A serif text such as Times New Roman or Georgia is often used because the extra lines on the edge of each character helps the flow of our eye movement and makes it less tiring to read large amounts of the text. However, poor screen resolution can reduce the benefit of this by making the serifs less distinct.
Legibility is important for short sections of text such as headlines. Sans serif fonts such as Arial or Veranda are preferable, not just for headlines but also the body text if the serif font is indistinct.
