Post on 06-Oct-2020
MIT2100
Aspects of Web DesignAssessment One and Web Design Project
Critique
Student ID: 570000734
4th May 2010
MIT2100 Student ID: 570000734
Assessment locations http://people.exeter.ac.uk/ahj203/
On both sites also visit the assessment menu item or site map to view a PDF of this critique
Contents
Part One: Assessment One3
Part Two: Web design Project.................................................................................................12
List of figures
Part One
1 (p.3) Original CMIT Garden website 2 (p.4) Dreamweaver in Code View
3 (p.5) Site Mock up 4 (p.5) Site Map
5 (p.6) Navigation rendering 6 (p.6) Visibility and tagline
7 (p.7) Google Labs 8 (p.7) Visual cues
9 (p.8) Colour Scheme 10 (p.9) Colour scheme designer
11 (p.9) Typography 12 (p.10) Firebug for Firefox
13 (p.10) Web developer tool 14 (p.11) HTML and CSS validation
15 (p.11) Final product in IE 16 (p.11) Final product in Firefox
Part Two
17 (p.14) Competitor websites 18 (p.15) Competitor websites 2
19 (p.16) Competitor websites 3 20 (p.17) Mock up
21 (p.17) Navigation 22 (p.18) Visual accessibility
23 (p.19) Interactive elements 24 (p.19) Interactive elements 2
25 (p.20) Favicon and colour change 26 (p.20) Social networking
27 (p.21) Validation and WAVE 28 (p.21) Firefox Web Developer
29 (p.22) Final product 30 (p.23) Browser compatibility
2
MIT2100 Student ID: 570000734
Introduction
Throughout this portfolio I will be testing and constructing each assessment in Internet
Explorer (7) (IE) and Firefox (3.6) due to the W3C’s (2010) recommendation that these are
among the most popular browsers. I will also test each finished product in Opera, Safari and
Google Chrome.
Part One: Assessment One
Nielsen (2000, p.18) controversially states
“unfortunately we see many sites that spend more screen space on the navigation
than on the information that supposedly caused the user to visit in the first place.
Navigation is a necessary evil that is not a goal in itself and should be minimized.”
This can be contrasted against Krug’s (2006) assertion that “navigation isn’t a feature of a
website, it is the website.” Whichever stance is adopted toward navigation, there is a common
agreement that if customers “can’t figure out how to use a website in a minute or so, they
conclude that it won’t be worth their time. And they leave.” (Nielsen, 2000, p.10) The
navigation must be clear, concise and within natural psychological capacities. As Khosrow-
Pour (2002, p.103) notes, the “cognitive load refers to the demands placed on the learner’s
working memory during instruction.” In aiming to reduce this, it is accepted that navigation
systems should hold seven items or fewer at each stage, as “the working memory can
typically hold 7+/-2 items for rehearsal.” (Errey et al., 2006, n.p)
Utilising the practice information provided (figure 1) the navigation system re-design seeks to
cater for usability, functionality and visual aesthetics.
3
MIT2100 Student ID: 570000734
Figure 1:Original CMIT garden site
Primarily I will analyse the previous navigation design (figure 1) in order to assess what
requires adaptation. The navigation is laid out in a format akin to a site map, and on the right
hand side of the page. As such it is not visually stimulating or in an expected position. As
Nielsen and Tahir (2002) discuss, navigation is frequently (top) left-positioned positioned in
order to promote visibility on various screen sizes, reducing the possibility of it being cut off
screen. Whitmore (2004) also remarks, “Western users read from left to right, so the upper left
hand corner would be the first thing they see.” Although the colours allow a degree of contrast,
there is no visual separation and contrast between different sections of the page. The lack of
any graphics, logos, or symbols also means the website’s aim and message is not quickly
discernable.
With such considerations in mind, and the nature of the information (the number of items and
divisions) provided I chose to construct and implement a suckerfish drop-down menu.
Although a controversial choice they “do have their advantages. First, they conserve screen
space. They also…only show legal choices. Finally, because they are standard…users know
how to deal with a drop-down menu when they encounter it.” (Nielsen, 2000, altertbox, n.p) In
the same article Nielsen however warns that whilst such menus can be effective, they are
employed for a number of purposes including: command, navigation, form fill-in and attribute
selection menus. As such they may cause confusion. The navigation constructed in
assessment one must therefore avoid the pitfalls commonly associated with such menus
including: long menus requiring scroll, user confusion about which item is selected, and poorly
visible menu items.
Construction decisions
4
MIT2100 Student ID: 570000734
Macromedia Dreamweaver 8 was utilised as a base for the
construction of the style-sheet (CSS), solely in its Code View setting
(figure 2). This allowed me to write code with line values listed,
offered prompts for possible tags or attributes, and automatically colour-
coded each item, aiding visual clarity whilst altering the individual items. I
have not utilised Dreamweaver’s additional design features at this stage.
Bearing in mind the preceding and subsequent considerations, the following mock-ups
(figure 3) and site map were created (figure 4). I have chosen to employ a hierarchical
structure, with the site’s homepage acting as an overview at the top, and the additional menu
items branching down below, as the depth of the information increases. As you can see, the
suggested hierarchy is fairly simple, making it easy for the user to navigate. Throughout, there
will also be contextual links, including the logo as a link to the homepage, enhancing
navigation around the site for the user.
5
Figure 3: Above, mock layout Figure 4: Left, site map
MIT2100 Student ID: 570000734
Initial functional considerations for my drop-down menu were based around usability, including
the aforementioned cognitive load theory, content and the positioning of items in priority-order.
Usability refers to “the ease with which a product can be used, learned and provides
satisfaction to its users.” (Bedi and Banati, 2006, p.283) Krug (2006) proposes several key
tenets for usability. These can be summarised as the recommendation that pages are short
with concise content, unambiguous clicking choices (reinforcing his ‘don’t make me think’
motto) and the clear positioning of the search application. Krug’s focus is upon the
functionality of the website, with clarity and content key in creating a usable website. Whilst
stating that there is a place “for art, fun, and a general good time on the Web”, Nielsen (2000,
p.11) also acknowledges above all the “main goal of most web projects should be to make it
easy for customers to perform useful tasks.” The aspects that assessment one will employ in
order to aid usability are therefore as such.
The number of items in each portion of the drop-down menu will not exceed the suggested
seven item limit, and the menu imposed will remain consistent throughout the site, reflected in
the five sample pages created. This addition of these menu items initially presented a number
of problems. For example, in IE the navigation appeared as a vertical list (figure 5). In the CSS
I then altered the feature ‘inline-block’ to read ‘float: left.’ This allowed the correct display.
Figure 5: navigation rendering
6
MIT2100 Student ID: 570000734
In terms of content, I followed the advice of Nielsen and Tahir (2002, p.10) suggesting that
“the company name and/or logo [are placed] in a reasonable size and noticeable location.”
Similarly it is crucial to both “emphasise the highest priority tasks” and what “your site does
that’s valuable from the user’s point of view.” (p.10) As such, the key content to include is
recommended as “a directory of the site’s main content areas (navigation)...and a search
feature.” (Nielsen, 2000, p.168) In the case of the CMIT Garden navigation, I have ensured
the taglines visibility at the top of the page, alongside the project name. Similarly, the search
feature is prominent in the header of the page (figure 6).
Figure 6: visibility of title and tagline
Content and layout are also related. Nielsen (2000, p.105) proposes a combination of three content-layout based suggestions, “concise text, scannable layout, and objective language.” Whilst the text is already provided, the layout and hierarchy are significant in catching the user’s eye. As mentioned, the title and tagline location is significant. Webtint (2009, n.p) recommend observing the Google Labs browser size feature to explore the most visible areas of a website on multiple screen sizes (figure 7). The feature aims to ensure “important parts of a page's user interface are visible by a wide audience.” (Google Labs, 2010) The purple section (top left) is therefore highlighted as a key content and layout area, visible in 99% of user’s browsers visiting Google. The important features of the CMIT Garden have therefore
been displayed there, with the navigation clearly beginning in the top left in order to alert users that there is additional content on the site, as “only a small proportion of any site is visible at any one time,” (Horton and Lynch, 1999, p.20) causing such visual cues to be significant.
Figure 7: Google Labs
7
Each contour line, for example 99%, denotes the number of people viewing Google have their browser window to at least this window size or greater.
MIT2100 Student ID: 570000734
Equally significant is the idea of working “above the fold.” (Webtint, 2009, n.p) This refers to
the idea that screens have only a certain capacity to display material (in terms of dimensions),
under which a user then has to scroll to view additional content. As Horton and Lynch (1999,
p.57) note, the ‘safe area’ of a page “is determined by…the minimum screen size in common
use today.” According to the W3C School’s data log (2010) “most users are using a display
with 1024x768 pixels or more.” Whilst this is true, I have aimed to prioritise and display the
most important at the top of the page in the hope that it will remain above many user’s
browsers folds. Equally, where the content continues I have included clear cues about what to
expect (figure 8), prompting the user to continue reading. Finally, I have also avoided the use
of the horizontal scroll as it “invariably causes usability issues- the biggest being that users
don’t notice the scrollbar and miss seeing content that is scrolled off the screen.” (Nielsen and
Tahir, 2002, p.23)
Figure 8: visual cues
Initial aesthetic considerations for the navigation system regarded the layout, colour scheme
and typography. The navigation should act as a visually distinctive feature of the page,
drawing the user’s eye directly to the content. A ‘visual logic’ should be sought regarding the
“optimal balance between visual sensation and graphic information.” Horton and Lynch (1999,
p.53) continue to remark “without the visual impact of shape, colour, and contrast, pages are
graphically boring and will not motivate the viewer.” (As shown in figure 1) It is however
important to remember that the use of flashy and irrelevant displays, although potentially eye-
catching can reduce loading speeds and distract the user from useful content. Such displays
8
MIT2100 Student ID: 570000734
may also alienate disabled users if not compatible with screen-reader technology, for example.
This is discussed further under part two.
In terms of colour scheme choices, as Lengel (2002, p.63) remarks, “some combinations
create visual contrast and discord, whereas others induce a sense of comfort and harmony.” I
have selected a white background with black text (figure 9) as this “achieves the maximum
possible contrast and the highest possible readability.” (Nielsen and Tahir, 2002, p.51)
Additionally, I have chosen a neutral blue as the background colour for the header and
navigation (figure 9). It is said that to some “cool colours seem more businesslike.” (Legel,
2002, p.51) Additionally, I have added the feature that when hovered over, menu items are lit
up and turned black (figure 9). This was done utilising the CSS code of ‘#nav a:hover’.
Against the white text, this is again maximum contrast, allowing users clarity over what they’re
selecting and high readability. These colour choices also avoid the use of any blue or violet
text, “close to the default web link colours.” (Horton and Lynch, 1999, p.91)
Figure 9: colour scheme
When finalising such colour choices I utilised the ‘colour scheme designer’ site (figure 10).
This site has a feature which can simulate how such colour would be viewed by users
suffering Deuteranopia, the most common form of colour blindness. As figure 10 illustrates,
their spectrum is greatly reduced particularly in the red and green areas. ‘Colour scheme
designer’ estimates that 5% of men and 0.4% of women suffer this, and as such I have
avoided displaying such colours on areas of significant content.
Figure 10: Colour Scheme Designer
9
MIT2100 Student ID: 570000734
Additionally, the W3C browser display statistics (2010) note variations between current
computers that “use 24 or 32 bits hardware”, older computers and laptops often using “16 bits
display hardware”, and finally hand-held computers using 8 bits. Although a huge number of
colours are supported through such hardware, I have aimed to utilise widely recognised
hexadecimal values (web source, 2010).
In terms of typography, I have selected a commonly installed font, verdana. I have also
specified the font-family on CSS as including Arial, Helvetica and sans-serif fonts. If the
verdana font is missing on the visitor's system, Arial is then used, etc. Whilst verdana requires
the percentage designation of font-size in CSS (I’ve set it to ‘font-size: 80%;’) in order to keep
the size in line with other fonts (Poley, 2005, n.p), it is also a widely compatible font choice.
This font-family is also commended as highly readable (Nielsen and Tahir, 2002, p.51).
Nielsen (2000, p.84) recommends not using “absolute font sizes, instead, specify[ing] all text
relative to the base font size defined by the user’s preference setting” regardless of the font
choice.
Figure 11: typography
Secondly, I have avoided using uppercase headlines, as Horton and Lynch (1999, p.85) deem
them “monotonous rectangles that offer few distinctive shapes to catch the eye.” Initially the
links were all set to underlined (figure 11), but after a usability test subject reported “the
underlining is a little overwhelming, especially as the navigation should all be links to
10
MIT2100 Student ID: 570000734
somewhere” I altered these to non-underlined in the navigation. I maintained the in text links
as underlined (and blue in colour, purple once visited) as “under-lining has a special functional
meaning in web documents.” (Horton and Lynch, 1999, p.90-91) Finally, for the body text I
have applied left-justified. Horton and Lynch (1999, p.84) recommend this as it is “the most
legible option.” It is also what users expect, and hence any alterations may disrupt their focus
on key content.
During the construction process I installed Firebug for Firefox (figure 12), an extension
allowing users to inspect HTML and CSS and to modify style and layout in real-time. This
allowed me to practice the initial changes without altering the progress I’d made in both
documents. I then added the background image to see how it would display in the page.
Figure 12: Firebug in Firefox
Whilst continuing to construct the pages, I also installed Firefox’s Web developer toolbar. This
extension allowed me to check how the navigation would render if user’s had certain browser
settings specified. For example, figure 13 shows the homepage rendered in Firefox with the
page colours disabled. The homepage is also pictured on the left with the CSS styles
disabled. Crucially, all the outlines and links remained visible and all the text content
accessible. Figure 13: Web developer tool
11
MIT2100 Student ID: 570000734
During the first attempt at validating the HTML using the W3C’s validator, 3 mistakes needed
to be corrected including altering the <html> tag and adding two additional <div>s. The HTML
was then validated to be XHTML 1.0 strict. The CSS was also successfully validated (figure
14). Figure 14: HTML and CSS validation
The main contention with this drop-down menu is that it is not accessible to a screen reader
(as it detects the display none in CSS) or to keyboard users. The final product is first shown
successfully rendering in IE (figure 15), then subsequently all five pages in Firefox (figure 16).
Figure 15: IE final product
Figure 16: Final product in Firefox
12
MIT2100 Student ID: 570000734
Usability test
Prior to adapting the navigation for the web design project I conducted a small usability test on
two independent users utilising a sample usability test script reprinted from Krug’s (2010)
Rocket Surgery Made Easy text. The first subject answered the preliminary questions, stating
“I spend about fourteen hours a week online” when asked the number of hours a week spent
browsing and answering emails. In answer to the second question, the subject answered “I’m
very quick checking my email, it’s almost all browsing time,” when asked which activity utilised
the most of their internet usage. When asked what kinds of sites do you look at when on the
web, the subject answered “sports, news, forums, online shopping (Amazon, Ebay),
entertainment sites.” When then faced with the CMIT Garden homepage, I asked the user to
comment on what initially strikes them about the page, without clicking on anything. User one
stated that “the colours are striking, drawing you straight to the top of the page….The design
is simple, but that’s good, I can work out what the site’s for quickly.” When asking the user
about conducting the task of bringing up “information about birds”, the user scrolled over the
bird menu item (as expected), but then asked “which example do you want, the blackbird?”
This highlighted that it may be more useful to not link main content from the navigation title
item, instead only from the items below. I will employ this suggestion in the web design
project. The second user answered fairly similarly regarding the initial questions, though is a
computer science subject with a greater degree of technical web design knowledge. The
second user reacted fairly differently when examining the initial page. A particularly significant
remark centred on whether the “site has any links to any external content?” This remark came
as the user was asked to homepage and state the site’s function and role. Although the
second user could discern the function as “a site providing information regarding wildlife in the
garden,” when asked for any additional comments or suggestions- the second user mentioned
13
MIT2100 Student ID: 570000734
the increased look of professionalism and also ability for the site’s presence to be increasingly
felt externally with the use of material such as Delicious (an external bookmarking site). This
suggestion will be employed in the web design project. The second user also remarked on the
colour-scheme, when asked to display the blue tit page, and subsequently the site map. The
user stated “although the navigation colour-scheme is key, it might be better with a darker
blue, to aid contrast and ease the user’s eye.” This change will be experimented with in part
two.
Part 2: web design project
As Edward Tufte (1997 in Horton and Lynch, 1999, p.53) remarks, “clutter and confusion are
failures of design, not attributes of information.” The importance of web page design is
significant in terms of its role in facilitating the absorption of information. When applied to a
business situation, web page design therefore becomes a key tool to gain custom. As Nielsen
(2000, p.14) notes, “any company that makes its site easy to use will have a major advantage
over its competitors, no matter what industry it’s in.”
The process involved in constructing a website is exemplified in numerous texts (Nielsen
2000, Lengel 2002, Krug 2006, and Horton and Lynch 1999), and a common procedure
deduced as such. Initially, you must determine the client expectations, the sites aims and the
type of user. Secondly, you must generate first draft documents, including the site map, a
rough page design and a navigation prototype. Finally, you must construct a minimal part of
the site and begin test cycles in order to repair any problematic features. Part 2 follows this
procedure. Throughout, Nielsen (2000, p.14) recommends placing the “customers’ needs at
the centre of your web strategy,” in order to increase the sites effectiveness in the long term.
The Design Brief
The brief is to set up a website for an emerging fictitious Events Management Company,
Concept Events. The requirements include simply to: make their contact details readily
14
MIT2100 Student ID: 570000734
available to customers, to detail the purpose of the business operations, and finally to present
the information in a fresh and clean, yet colourful way, reflecting the culture of the
organisation.
Site Aims
Site visitors are likely to be considering planning an event but wishing to contract the
responsibilities to a professional organisation. Due to the recent proliferation of competitors in
the industry, as illustrated on the ‘Free Index’ detailing 438 UK events management
companies, the website should provide an opportunity to concisely convey the business’
strengths, skills and potential to provide a fantastic service. The site must answer the following
common customer questions clearly: does the company have the scope, relevant staff and
professionalism to deliver our event? Can my event be delivered within time and budgetary
requirements? What previous experience can be exemplified? What do I do next?
The Target Audience
Concept Events are contracted in to project manage events of any size. Clients range from
predominantly large businesses and organisations, councils and finally family events. The
design and functionality of the site should hence reflect the demands of such users.
In order to deduce additional changes required from assessment one, I have conducted an
analyses of several events management competitor websites.
Competitor websites
Bedi and Banati (2006, p.284) assert the importance of a site appearing appropriate for the
industry in which it’s situated. Following Nielsen and Tahir (2002) the analyses of a number of
events management homepages will highlight the following criteria: page layout, colour
scheme, content, typography, logo and brand presence, and hence overall usability.
The first competitor is ‘Maximillion’ (figure 17). The site design positives include the logo’s
prominence, the use of blue to signify the presence of links, and the clear place of the primary
navigation. The design negatives include the prioritisation of the content, with much of it
displayed below the fold, including many links that a user may miss. The tagline is also weak,
and doesn’t quickly convey to the user the role of the company.
Figure 17: Competitor websites
15
MIT2100 Student ID: 570000734
‘Knights Templar Events’ (figure 17) illustrate a well positioned left-hand navigation, with the
menu items changing colour to promote clarity. There is also a clear link back to the
homepage at the top of the navigation. This navigation does however consist of 23 items,
including many located below the fold. These should be subdivided, and a different navigation
style used in order to aid customer retention. The image of the wine bottle also appears blurry,
as it has not been resized for display on a larger screen. The navigation colours of blue and
yellow are also not highly contrasting. Finally there is a large amount of text continuing below
the fold. As Horton and Lynch (1999, p.54) note “a dull page of solid text will repel the eye as a
mass of undifferentiated gray, without obvious cues to the structure of your information.”
Although the information has been divided into “chunks”, there is not consistency in the way
the information is presented, as the use of capital words in the third ‘paragraph’ illustrates.
‘Bluesky Events’ (figure 17) utilise a business-like high-contrast blue colour scheme, clearly
stating (and depicting) the business’ function as involved with events management. The
majority of the key content is designed to be above the fold, and bullet points are used to aid
readability. The top level navigation is however a lot smaller than the secondary level
navigation, and there is also a third level of navigation located on the right, an unusual
position. The homepage also appears cluttered a little daunting at first, as there are many
options for the user take.
‘Group Seven Events’ (figure 18) utilise a logo link back to the homepage. There is no vertical
or horizontal scroll allowed and the changing image graphic banner is certainly eye-catching,
though may disrupt user interaction by increasing page loading times. There are also twelve
items on the navigation menu, which is not styled significantly different to the text, instead
appearing initially more like a list. The positioning of the banner in place of further left-justified
text is also a contentious choice given the aforementioned Google Labs comments. Finally,
there is no obvious search facility.
Figure 18: Competitor websites 2
16
MIT2100 Student ID: 570000734
‘AJ Services’ (figure 18) illustrate an even more graphic based homepage. Although again
without the scroll feature, the site is not intuitive to the user. The navigation is on the top-right
and does not clearly illustrate the role or function of the company. The layout of the page is
therefore very inappropriate for any user with a smaller monitor or hand-held device, who
would be unable to discern the role or any text regarding the site’s function. As figure 19
shows, when you reach an information page, it is still right-justified, with the globe in the
corner unclearly a link back to the homepage.
Figure 19: competitor sites 3
Finally, ‘Interact’ (figure 19) display clearly the role and aims of the site. The navigation colour-
scheme is contrasting when highlighted, though the fiery background image clashes with the
choice of yellow text items. Inverted colour-schemes are also a contentious issue within web
design. There is also a large amount of black-space illustrating the potential for a liquid-layout
to be applied. As Nielsen and Tahir (2002, p.40) note a “liquid layout” is an attractive option
considering “frozen pages were cut off in small windows, and they displayed huge amounts of
wasted whitespace in large windows.”
Key features to note
When adapting the product of assessment one several considerations arise from the
aforementioned analyses. In terms of the content, which will be more extensive and varied,
there are also several key considerations. Content must be prioritised, with the organisation’s
name, logo, contact details and search feature visually accessible. As Lengel (2002, p.42)
17
MIT2100 Student ID: 570000734
notes “a site whose purpose is to build brand awareness and corporate identity might display
a large, colourful identity item prominently on every page.” I will aim to prioritise linked and
crucial text in the top-left of the page, keeping the paragraphs to a single point each, short and
concise. This involves employing a technique known as ‘chunking information’, that which
Horton and Lynch (1999, p.24) describe as the separating content so that “it can be located
and scanned quickly.” This is important in order to avoid reader disorientation if they are
required “to scroll long distances and to remember what is off-screen.”
I will also maintain the high-contrast colour-scheme, and utilise a couple of images to increase
user visual interactivity. As Horton and Lynch (1999, p.42) note “the dichotomy between slow-
loading but attractive graphics-based home pages and fast-loading but prosaic text-based
home pages” is a concern. I have aimed for a middle-ground, not disregarding the appeal of a
carefully prepared and presented image, but also not compromising the loading-speed. In the
case of the repeating background image on the left I will resize it appropriately in Irfanview in
order to aid the potential pixelation of the image in various sizes of monitor. This should also
aid the loading time in the face of Nielsen’s (2000, p.46) claim that “speed must be the
overriding designing criterion…Remove graphic; increase traffic. It’s that simple.” As such,
these mock-ups of the site and several proposed pages were created.
Figure 20: mock ups
18
MIT2100 Student ID: 570000734
After finalising the proposed sketches I also discussed the results with another computer user-
who noted that the proposed second level navigation for the press (under media) page should
not be utilised as it is inconsistent with other pages not featuring it. This is in keeping with
Horton and Lynch’s (1999, p.53) suggestion that “visual and functional continuity in your web
site organization, graphic design and typography are essential to convince your audience that
your web site offers them timely, accurate and useful information.” This feedback also
suggested that the contact page (under contact us) be compiled into one page featuring the
telephone, address and email details. Figure 21: Navigation
Site Map and Structure
As such the site plan was altered as such (figure 21). The importance of
creating the site plan is echoed by Horton and Lynch
(1999, p.25) stating “hierarchical organization is virtually a
necessity on the web.” I have opted for
a single top level navigation due to
the amount of content. There is
still room for expansion under most
of the menu options, and all the
key business areas are already covered.
Construction process
Adaptations and usability considerations
Once the site plan was finalised, I began drafting the content which would later form the site.
Throughout, a significant consideration was the usability of the site for disabled users
reflecting Paciello’s (2004, p.4) comments that “building and redesigning the Web to be
accessible to people with disabilities became an important directive of the World Wide Web
Consortium (W3C)…As we move towards a highly connected world, it is critical that the Web
be usable by anyone.” Aside from the aforementioned colour-blindness provisions there are
several additional mechanisms utilised in order to aid their experience. For example, a fully
linked site map is also provided for those having visual difficulties with the navigation (figure
22). Equally, on the sample budget page the table displaying the costs and figures utilises the
‘th tags’ to identify significant title cells, while td tags signify data. I have also added both a
summary for use with a screen-reader, and a caption clearly noting what the table includes.
Figure 22: Visual accessibility
19
MIT2100 Student ID: 570000734
I have also utilised several media formats in order to convey the content in different ways for
various types of user. For example, on the production page there is an alternative audio-visual
video of ‘Yr Wall’, a client of Concept Events. I have resized it in order to aid loading speed, as
it can be made full-screen (as explained on the site) if the user wishes. As Nielsen (2000,
p.155) notes, “hearing-impaired users can be supported by the use of captions on videos and
transcripts of audio presentations,” with these “textual alternatives also mak[ing] the content
more accessible to search engines and facilitates translation.” I have therefore added a
caption to the video. Nielsen and Tahir (2002, p.111) also discuss the use of “elevator music or
musak” on homepages. Although an alternative sensory feature, it is not relevant to the
company’s role, and widely discouraged as a distraction.
Figure 23: Interactive elements
Finally, the ‘contact details’ page displays various user-dependent mechanisms in order to
reach Concept Events. Key information is presented in tabular format (with the above
considerations), a link to a functioning website (also reachable from the ‘email us’ link in the
page’s footer), an interactive map of the HQ location (figure 23) and finally a contact form
20
MIT2100 Student ID: 570000734
appropriate for keyboard users provided (figure 24). These mechanisms also act as feedback
provisions, allowing any user to get in contact directly. This reinforces Horton and Lynch’s
(1999, p.49) assertion that the “web is a bidirectional medium- people expect to be able to
send you comments, questions and suggestions.” The addition of functioning links for the site
map and ‘email us’ in the footer of the page also allowed the site to be more interactive (figure
24). Figure 24: Interactive elements 2
When adapting assessment page, I realised that whilst aiming to provide a linked image as
the logo in the header, I wanted to support Nielsen’s (2000, p.50) assertion that “the top of the
page should be meaningful even when no images have been downloaded.” As such, I added
the tagline to the page design, clearly signalling the company’s role. The name of the
company (a signal to the industry itself) can also
be seen on every
functioning page for clarity. Each page is also specifically individually named by the title,
appearing on the browsers tab. In terms of the HTML I have also aimed to separate the
content in order to aid blind users and screen readers, allowing an overview of the structure of
a page by using various levels of <H>’s, which can be read aloud by a screen reader.
(Nielsen, 2000, p.301) This affords the user more freedom to skip content. I also resized all
images in Irfanview in order to reduce image loading times. I also created a Favicon, a unique
icon file that can be put creatively into a site’s webserver directory and is displayed in the
address bar. This is a minor detail that would display if the page was published. Figure 25:
Favicon (left), colour change (right)
Acting upon the usability test subject’s recommendations I primarily altered the colour scheme
from a lighter to darker blue as such (figure 25), increasing the contrast of the text. Regarding
21
MIT2100 Student ID: 570000734
user two’s comments about presence of external links, I also added links to both stumbleupon,
increasing the advertising potential of the business site, and Delicious a social networking
bookmarking service (figure 26). These additions were also validated by the W3C.
Figure 26: social networking
Accessibility testing
As well as validating the HTML and CSS (figure 27) accessibility testing is also recommended.
Once validated, you are also offered the W3C validation logo, which is hence displayed on my
page (figure 27). I utilised the website Wave (figure 27), and found only one accessibility error.
The search tag requires alteration, though I do not understand the technicality behind this.
This is the first thing I would alter in the future. Wave did not point out any other major usability
errors.
Figure 27: Validation and WAVE
22
MIT2100 Student ID: 570000734
I also used Firefox’s web developer tools to disable features on the page in order to assess
that the site would again function bearing in mind the specific settings users may have within
their browsers. For example, the homepage would look as such if the page colours were
disabled (figure 28). Although clearly less visually impacting, the websites aims, name and
navigation remain visible and functioning. It would still be discernable to the user that the site
is an events management company, named Concept Events. I have also made the name of
the business apparent on each functioning page to ensure clarity. Also, disabling all CSS
styles also results in the page appearing as such (figure 28), similarly the main content and
role of the site is discernable. Figure 28: Firefox web developer
I also discussed the final product with a user suffering from colour-blindness under usability
test conditions. Although not requiring the use of a screen-reader, this test subject
recommended several alterations. Primarily, the addition of a clear border between the content
and footer. This was added, and can be observed below in the final product box (figure 29).
Secondly, the user commented upon the size of PDF containing the assessment on the
assessment menu item, in the ‘MIT2100’ option. The user asked that the PDF be made larger,
and as such this was resized slightly, aiming to make the controls visibly clearer without
compromising the loading time of the page.
23
MIT2100 Student ID: 570000734
Final product Figure 29: final product
Browser compatibility tests
I then tested the functionality of the site on the following browsers: Opera (10.53), Safari
(4.0.5) and Google Chrome. Netscape was discontinued in 2008. All pages rendered correctly.
Figure 30: browser compatibility
24
MIT2100 Student ID: 570000734
Conclusion
Nielsen (2000, p.10-11) reminds us of the importance of usable and customer-orientated
website design, stating “in product design and software design, customers pay first and
experience usability later. On the web, users experience usability first and pay later.” This
consideration has underpinned the alterations on both sites created.
25
MIT2100 Student ID: 570000734
Bibliography
Texts
Bedi, P., Banati, H. (2006) Assessing User Trust to Improve Web Usability. Journal of Computer Science 2 (3) 283-287
Horton, S., Lynch, P.J. (1999) Web Style Guide: basic design principles for creating web sites. Yale University Press: New Haven and London
Khosrow-Pour, M. (2002) Web-based Instructional Learning. IGI publishing: UK
Krug, S. (2006) Don’t make me think: a common sense approach to web usability. New Riders: USA
Krug, S. (2010) Rocket surgery made easy. New Riders: USA
Lengel, J.G. (2002) The web wizard’s guide to web design. Pearson Education: USA
Nielsen, J. (2000) Designing web usability: The practice of simplicity. New Riders Publishing: USA
Nielsen, J., Tahir, M. (2002) Homepage Usability: 50 websites deconstructed. New Riders Publishing: USA
Paciello, M.G. (2000) Web accessibility for people with disabilities. CMP books: USA
Websites
Colour scheme designer (2010) [URL: http://colorschemedesigner.com/] [Accessed: 23/04/10]
Errey, C., Ginns, P., Pitts, C. (2006) Cognitive load theory and user interface design: Making software easy to learn and use- Part 1 [URL: http://www.ptg-global.com/papers/psychology/cognitive-load-theory.cfm] [Accessed: 15/04/10]
Favicon (2010) Icon creation [URL: http://www.favicon.co.uk/whatisfavicon.php] [Accessed: 18/04/10]
Free Index (2010) Index of UK events management companies [URL: http://www.freeindex.co.uk/categories/advertising_and_marketing/corporate_events/events_planning_and_management/] [Accessed:17/04/10]
Google Labs (2010) [URL: http://browsersize.googlelabs.com/] [Accessed: 16/04/10]
Krug (2010) Rocket Surgery Made Easy. Sample usability test reprinted [URL: http://www.sensible.com/Downloads/test-script.pdf] [Accessed: 14/04/10]
Nielsen, J. (2000) Alertbox [URL: http://www.useit.com/alertbox/20001112.html] [Accessed: 25/04/10]
Poley, S. (2005) Web matters: on Verdana [URL: http://www.xs4all.nl/~sbpoley/webmatters/verdana.html] [Accessed: 24/04/10]
Webtint (2009) 7 ways to increase website usability [URL: http://webtint.net/articles/7-ways-to-increase-the-usability-of-your-website/] [Accessed: 24/04/10]
26
MIT2100 Student ID: 570000734
Web Source (2010) Web safe colours [URL: http://www.web-source.net/216_color_chart.htm] [Accessed: 26/04/10]
Whitmore (2004) [URL: http://www.webpronews.com/topnews/2004/12/10/website-usability-breadcrumbs-and-leftside-navigation] [Accessed: 26/04/10]
W3C browser statistics (2010) [URL: http://www.w3schools.com/browsers/browsers_stats.asp http://www.w3schools.com/browsers/browsers_display.asp] [Accessed: 24/04/10]
Yr Wall (2010) Graffiti wall [URL: http://www.yrwall.com/] [Accessed: 20/04/10]
27