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 havelabeled 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 highquality 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:
1.
Discuss the purpose of the site. In other words, what do you want the site to
achieve?
2.
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.
3.
How does the site relate to the broader goals and communication strategies of
your organizations?
4.
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.
5.
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.
6.
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.
7. 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.
8.
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.
9.
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.
10.
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.
11.
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.
12.
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 acolor
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.
No comments:
Post a Comment