"X" Marks The Spot
We'll Sleep On It
|Pei Li Guan
This site forms the Working Prototype
component of Assignment 2 for the subject Electronic
Commerce Management (INFS3685), held in Session 1, 2001. It
represents a prototype for a shopping precinct in Randwick, Sydney
called "The Spot". Because of its prototype status, the site
is not complete nor comprehensive in its content. Back-end features have
not been implemented and what exists here is representative of what a
possible "real live" implementation may contain. Furthermore,
the information on this site, while grounded in some fact, may not
accurately represent The Spot.
This is a prototype site only, it
should not be construed as otherwise.
The required "details on design
issues addressed" forms the rest of this page, and is also included
as an appendix in the business plan.
Navigation Chart & Storyboards
• View the navigation chart for this site
• View storyboards used in the design of the site
These can also be found in the
business plan appendices.
Design issues regards aspects of site
implementation, ranging from visual appearance, interface usability,
technical compatibility and so on. Following is a listing of design
issues addressed while implementing this prototype, and what was done in
Aesthetics, Accessibility and
Aesthetics, accessibility and usability
relates to the physical visual appearance (layout) of the site, and the
ease with which a user physically interacts with it.
The layout of this site has been kept
clean and ordered. The design is relatively simple, with little
on-screen movement (in the form of animations etc.) that may provide as
a distraction to the main content. A soft pastel colour scheme has been
selected that blends well. There are no clashing, vibrant colours,
except for parts where the user's attention should be drawn to. Text
colours have been chosen such that they contrast highly with the
background, and links have been coloured to clearly demarcate them from
normal text. Standard fonts have been chosen for maximum on-screen
legibility. The standard nature of these fonts also means that most
users should have them loaded on their computer (Arial, Verdana and
Times New Roman).
Different sections of the site maintain a
uniform screen layout. The uniformity means that a user can familiarise
themselves with the site - common navigation or information elements are
in the same place on each page. Even so, the sections have been colour
"themed" for easy identification of where in the site a user
The site's appearance has been designed
with sight-impaired users in mind. Most large bodies of text, such as
this, are written black-on-white, facilitating viewing as well as
printing to paper.
Navigability relates to a site's logical
structure, and how easily a user can move around the site, and find with
minimal effort any information he or she may be searching for. If a user
is not specifically looking for information, but is merely browsing, the
structure should also facilitate a systematic perusal of the site.
In a nutshell, a site structure that
makes logical sense aids navigation.
This site has a hierarchical structure.
From the front page, the site branches off into various major sections.
Within those sections, subsection pages branch off. To reach one of the
subsections, a user logically navigates through to the section, and then
the desired subsection.
To minimise mouse clicks (which is
related to the amount of pages that must be traversed through to get to
a destination page), a user can access any major section from any page
within the site. Links to subsections are not provided on every page -
the number of subsections would clutter the screen too much and impair
For the store directory, a search
function is provided along with browsing. The search permits a user to
find a particular store quicker, whereas browsing allows a user without
a target store to view a listing of them at leisure.
Regarding a web site, there are technical
aspects which deserve consideration. The site must be viewable, and that
means it must run on a web browser. The issue here is, that there are a
vast variety of web browsers, platforms and other factors that cause a
site to appear physically different on a screen. A site should be able
to cater for most, if not all, of an audience regardless of what they
are using the view a site.
The first and foremost aspect is that of
browser compatibility. The two major players in this market are Internet
Explorer and Netscape Navigator, with a variety of smaller ones such as
Opera. Web sites are comprised of HTML code, plus a variety of other
technologies (eg: cascading style sheets and scripting languages like
standards and render (interpret and display) code identically to others.
However, the reality is that different browsers interpret this code
differently to others. A page on one browser may appear different on
another browser, and in worst cases, may be totally unviewable. Browsers
also come with proprietary technologies that will not work on other
The challenge is to be able to utilise
some of these more advanced technologies, without excluding or impacting
adversely upon the browsing experience of users using less
"capable" browsers. This site takes this into account. Any
extra functionality provided is indeed extra. They do not degradate the
appearance when rendered in other browsers, and thus do not exclude
other browsers from accessing parts of the site. Compatibility is the
key - to provide extra functionality to those that can handle it,
without affecting those that can't. One such example is the use of
cascading style sheets (CSS). CSS provides a way to centralise and
enhance design elements of sites. Internet Explorer renders CSS code
differently from Netscape. In Internet Explorer, CSS enables hypertext
links to change colour when a user moves a mouse over it (providing a
visual cue to alert the user of a hyperlink). Netscape does not support
this. Although the Netscape user does not get this benefit, their
browsing experience is unchanged. Links changing colours is not a
critical function of the site. More importantly, no error occurs due to
this extra functionality - it is simply ignored by Netscape.
A danger of using proprietary
technologies is how wide-spread support of them is. Many of these take
the form of "plug-ins" whereby a user must download a small
piece of software in order to enable that technology on their computer.
An example is Macromedia Flash. The use of plug-ins on this site is
minimal. Having to download a plugin in order to view a site is a hassle
and may turn users away. However, it should be acknowledged that it is
possible for a plug-in to become standardised, at which point the
majority of the market can support that plug-in.
This site consciously avoids the
inclusion of too many "bells and whistles" that, instead of
impressing a user, actually detract from the browsing experience.
Apart from technology and browser issues,
users view web sites in different screen resolutions. Although the
standard resolution is 800 by 600 pixels, this does vary considerably.
This web site is designed in a "liquid" fashion. It will flow
to fit any size of browser window it is placed in.
Web sites are accessed over the Internet,
and this access is not instant. Sites takes time to download, and a site
which takes too much time will cause disinterest or even distress to the
user. The length of time a site requires to download is directly related
to how much media is contained on it. Text loads quickly, whereas
graphics contain more data in a smaller area and thus loads relatively
slower. However, a text-only page, while quick to load, would look
boring and so a balance must be struck. This page adds enough
"spice" to each page as to make it interesting to look at,
without increasing load times to impractical levels.
A less significant issue, but nonetheless
worthwhile considering, maintainability relates to the actual underlying
structure of the site. A maintainable site is one where a site designer
can upkeep quickly and efficiently. Various technologies exist to help
with this, and some of them are employed in this site. A centralised CSS
file, which all pages reference, provides an easy was to update the
visual aspects of the site. Footer code is standardised into a central
file which is "included" into each page. Because each page is
uniform in nature, templates can be created to expedite creation of
additional pages should they be needed.