Aspects of Web Design - people.exeter.ac.ukpeople.exeter.ac.uk/ahj203/aspects of web design/Aspects of web de… · Aspects of Web Design Assessment One and Web Design Project Critique

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


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


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


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


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


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.


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


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


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


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


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


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


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


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


‘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


‘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


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


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


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


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


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


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


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


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


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

http://colorschemedesigner.com/

http://webtint.net/articles/7-ways-to-increase-the-usability-of-your-website/

http://webtint.net/articles/7-ways-to-increase-the-usability-of-your-website/

http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

http://www.useit.com/alertbox/20001112.html

http://www.sensible.com/Downloads/test-script.pdf

http://browsersize.googlelabs.com/

http://www.ptg-global.com/papers/psychology/cognitive-load-theory.cfm

http://www.ptg-global.com/papers/psychology/cognitive-load-theory.cfm


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

http://www.yrwall.com/

http://www.w3schools.com/browsers/browsers_display.asp

http://www.w3schools.com/browsers/browsers_stats.asp

http://www.webpronews.com/topnews/2004/12/10/website-usability-breadcrumbs-and-leftside-navigation

http://www.webpronews.com/topnews/2004/12/10/website-usability-breadcrumbs-and-leftside-navigation

Aspects of Web Design - people.exeter.ac.ukpeople.exeter.ac.uk/ahj203/aspects of web design/Aspects of web de… · Aspects of Web Design Assessment One and Web Design Project Critique

Documents