Cover Page for CI6207/H6732
Final Project Report (2011/2012 Semester 1)
Group Number
:
Student Name(s)/
Number(s)
:
15
Aslin Harminah Binte Anuar / G1001118J
So Jami Florence /G10011157D
Tey Hwee Chen / G1101870J
Submission Date
:
8 November 2011
Instructor Name
:
Chang Yun-Ke
Marking Sheet for H6732/CI6207 Final Project (45 Marks)
Comment
Understanding Prospective Users
Requirements specification:
Functional
Requirements specification: Nonfunctional
Heuristic Evaluation
Re-design of “Mock-up” Website
Overall
1
TERM PROJECT: EVALUATION AND RE-DESIGN OF A PARENTING WEBSITE
1. Introduction
Our group will be evaluating and re-designing websites for first-time parents. We will start by
understanding the unique profiles of such parents and take a step further to define their specific
requirements. A website will be selected for conducting a heuristic evaluation to get
impressions on the usability of the website chosen. Thereafter, recommendations will be
given and the suggestions will be implemented on our newly redesigned website for new
parents.
2. Requirement Specifications
Understanding the Needs of First Time Parents
The prospective users are first time parents. Our group’s definition of “first-time parents” for this
project would be first time parents who are preparing for the arrival of their first child. The
prospective parents would typically have no experience in parenting as they are expecting their
first baby. They are facing a significant transition into the next phase of their lives and would
expect huge changes to their lifestyles. They are probably feeling anxious and may not know
what to expect as new parents and have many questions. They are probably looking for
information to prepare for the arrival of their new baby and details on the pregnancy journey.
Such parents would appreciate sharing the challenges and thrills of parenting with other parents,
so a blog and forum would be able to support this social element.
Objectives of the Websites
The objective of the website is to provide new parents with resources on parenting as well as a
social platform for such parents to share their parenting experiences. The website would feature
first rate resources on parenting. The website will also be useful to parents who have young
children under the age of 2 years. These parents are looking for parenting tips, techniques and
philosophies to manage their little ones. The information these parents are looking for will
include ways to raise their child in the early years of their child’s life. Information such as parentchild bonding activities is of great importance as well as emotional and physical well-being of
their young ones. The website will also cater to the needs of fathers, commonly omitted in
parenting websites.
Taking into account the needs of first-time parents listed above, the design of the website will
have to take into consideration the following attributes:
a) The design of the website should be pleasant and inviting. Cluttered designs would turnoff busy parents as they have no time to filter information.
b) Platform for sharing such as blogs and forums for like-minded parents to interact with
each other, share resources and their individual stories on parenthood.
c) The focus of the website should be on managing pregnancy and subsequently taking care
of their child, as this would be the immediate concern of first-time parents!
2
3. The Functional and Non-Functional Requirements
Functional requirements capture the intended behaviour of the system. This behaviour may be
expressed as services, tasks or functions the system is required to perform (Malan and
Bredemeyer, 2001). The functional requirements for new parents’ website should include the
following:
Functional Requirements
Search
The website should have a main search function that search across the
websites for information required by users.
Forum
The website should have a forum where parents are able to interact
with each other. They can share their experiences with other parents
facing the same challenges. The parents can also exchange best
practices and useful resources.
Email Contact
An email contact enables parents/visitors to contact site administrators
via e-mail. They can post any questions they have, so that site
administrators can assist them directly and follow up on their
feedback.
The Home Page
The landing page of the home page is the page that gives the new
parents who are looking for information their first impression. It is
important that this page quickly grabs the attention of our users. This
is the anchor page that pulls everything together. At the top of the
home page, it should clearly state what are the different information
being offered. Introductory text should be given to tell users what the
website is about, enticing them to explore the site.
Navigation Pane or
This will allow users to move quickly between different categories of
Tabs
information on the site.
Links to authoritative
Most specialized knowledge, especially in medical and psychological
external sites
area, may require expert knowledge. The site should have links to
authoritative external sites.
Website Backup
All information from the website should be backed up at the end of 24
hours cycle.
Website Administration The website should have a log-in screen for system administration of
the website. This administrative function should be able to provide:
 Summary Log of system use
 Functions to add, delete and upload new webpages and
materials
This administrative log-in should only be accessed by appointed
system administrators.
Table 1: Functional Requirements
Non-functional requirements include constraints and qualities. Qualities are properties or
characteristics of the system that its stakeholders care about and hence will affect their degree of
satisfaction with the system (Malan and Bredemeyer, 2001). The non-functional requirements for
new parent website should include:
3
Non-Functional Requirements
System Platform and
This web site should be easily accessible by anyone who can log onto
Interface
the World Wide Web using a standard browser that is version 4.0 or
higher
Colour and Aesthetics
Pleasant colours should be used to give users a nice and happy feeling,
inviting the users to continue using the site. The right amount of
colour should be used as too much colour causes the eye to dart around
the screen. Adequate contrast should be used to allow good
readability.
Consistency
Website layout should have a consistent look and feel. For example, a
consistent legible font should be used throughout the website. The
look and feel of each web page should carry the same theme.
Screen Area
To improve the reading experience of the web pages, we must ensure
parents who are accessing the website can see all content without
needing a horizontal scroll bar. This is prevent users from missing out
on anything beyond the default page view.
Website Capacity and
The website should have enough capacity to ensure stability of
Speed
website. Users should not be subjected to long waits for pages to load
up.
Navigation Structure
The website should have simple navigation but yet offer enough depth.
We will restrict the level of navigation to three levels to ensure that
parents are not overwhelmed by a complex website.
Security
The website’s information should have good security. All user
information should be safeguarded.
Table 2: Non-Functional Requirements
4. Heuristics Evaluation
Heuristics evaluation helps to find usability problems in the design of user interface. A heuristic
is a guideline or general principle or rule of thumb that can guide a design decision or be used to
decision that has already been made (Dix et al., 2004). Heuristics evaluation, originally developed
by Jakob Nielson and Rolf Molich in 1990 to provide a structured means to critique a system, was
subsequently revised by Nielson in 1994 and now often referred to as Neilson’s revised heuristics.
It is a set of 10 heuristics comprising of 1) visibility of system status, 2) match between system
and real world, 3) user control and freedom, 4) consistency and standards 5) error prevention 6)
recognition rather than recall 7) Flexibility and efficiency of use 8) aesthetic and minimalist
design 9) help users recognize and, diagnose and recover from error 10) help and documentation.
Using Neilson’s revised heuristics as the framework, evaluation on a parenting site for new
parents – The New Parent Guide (http://www.thenewparentsguide.com/) was conducted to find
out the usability problems of this parenting site.
Evaluation Method
Three independent evaluators evaluated the site in relation to usability heuristics. They were not
allowed to communicate with one another before and during the evaluation process.
The evaluators were first asked to go through the site to get a general idea of the site. After which,
they inspected the site systematically to examine its usability. They were given a heuristic
usability worksheet (Appendix A) to help them focus on specific interface elements. Their
4
observations were recorded on the worksheet by the evaluators themselves. Recommendations to
address the problems were identified and recorded too.
At the end of the evaluation process, evaluators discussed their findings and come to an
agreement on the recommendations. The checklists were collected and the information on them
collated into a summary (Appendix B).
Profiles of Subjects
All the three evaluators are experienced web users with at least 10 years of experience in using
the internet. They are currently students of Masters in Information Studies Programme.
Evaluator A is a mother with first-hand experience with the needs of new parents. Evaluator B
and C have experiences working with young children.
Analysis of Results & Recommendations
All evaluators agreed that the following usability problems need immediate attention. The
relevant recommendations are also listed in Table 3 below.
Usability Problems
Poor, uninviting aesthetic design
Recommendations
Use warm inviting vibrant colours.
Better layout that highlight the content. None cluttered.
Use more appropriate graphic that will capture the
attention of visitors to the site. The graphics should be
appealing and attractive.
Poor organization of content and
naming convention
Reorganization of the content in categories that is
mutually exclusive.
Rename the header for greater consistency and to make
it more intuitive.
No focus in the content
Long wait for web pages and pictures
to load
Broken links and blanks pages
Include an introduction in the home page to state the
scope of the site.
Expand on content that is relevant, within the scope.
Reduce content outside the scope.
Upgrade the system
Clean up the site.
Remove the obsolete links
Insert notice for pages under construction or under
maintenance.
Table 3: Usability Problems and Recommendations
Due to the multiple usability problems that surfaced in the evaluation, it is recommended that the
site undergoes a total revamp to incorporate the recommendations listed in Table 3.
5
5. Description of the New Design
In designing a mock-up website, we have used a free commercial flash website builder (at
www.wix.com). The website builder allows novice designers as us to build a website that is able
to meet our requirements.
The new mock-up website is clearly divided into four main sections; ‘Pregnancy’, ‘Your Baby’,
‘Parenting’, ‘and Communities’ and ‘Contact Us’. These sections are familiar to the target
audience and they will be able to connect and understand the tabs. (Appendix C)
Under each tab, there are further levels of navigation links which will direct users to other useful
information. With regards to ‘Pregnancy’, some women may be wondering if she is really
pregnant, hence, ‘Signs of Pregnancy’. When the doctor confirmed the pregnancy; she will want
to know everything about the 9 months of pregnancy. Mummies-to-be will also require directions
on what type of food to eat and the nutrition they need to have a healthy baby. Once the baby is
born, new parents will need information about their new-born and they will need to learn how to
create a baby schedule. This can be seen in the tab, ‘Your Baby’. Parenting tips and resources are
also included in the website. We have separated it into, ‘Mums’, ‘Dads’ and ‘Family Fun’. For
‘Dad’s, we have included hyperlinks to other useful websites on the topics. This allows users to
get information from other sources. We have kept it to a minimal as too much hyperlinks will
cause confusion and messy layout. Lastly, we have added a tab where the new parents can
communicate with other new parents through social networking sites such as Facebook and
Twitter. We have also included Blogs and Forum for them to communicate with each other.
Content-wise, it should relate back to the needs of first time parents. They do not have any
experience and will be looking for information such as looking after their new born, the baby’s
development, and parenting tips. Information presented under each section is concise for easy
reading. The content was taken from a popular website, ‘Babycentre.com’. These articles are
chosen and adapted to fit the layout of our new website.
Aesthetically, the design of the website is bright and we have use colours and visuals to create an
inviting feel for the parents. They will also feel at ease navigating through the website, as it
designed to promote recognition rather than recall. For example, when the user is thinking of
sharing some news with other parents, they will intuitively, select “Community” tab.
6. Conclusion
In evaluating the website, we have learnt that there are instances of design flaws. Thus, it is
important to engage independent evaluators that can help identify flaws that the web designers are
not aware of. One such method is to conduct a heuristic evaluation. From our experience, it helps
to improve the usability of website significantly. To conclude, we realise that there are indeed
many factors that we have to consider and more importantly to always put the prospective users
in mind as they are ultimately the ones using the website.
6
REFERENCE
Dix, A. (2004). Human-computer interaction / Alan Dix ... [et al.]. Upper Saddle River,
NJ : Pearson, 2004.
Kantner, L., Shroyer, R., & Rosenbaum, S. (2002). Structured heuristic evaluation of
online documentation.
Malan, R. and Bredemeyer (2001). Functional Requirements and Use Cases. Retrieved on 15
Oct 11 from www.bredemeyer.com/use_cases.htm
Websites
1. New Parents. Retrieved from: http://www.newparent.com/ on 29th October 2011.
Description: Website of New Parent. Contains information on pregnancy and
becoming new parents.
2. The New Parent Guide from: http://www.thenewparentsguide.com/ on 29th October
2011.
Description: Website of The New Parent Guide. Contains links and information on
parenting with issues such as travelling tips and shopping information.
7
Appendix A
Heuristic Evaluation Worksheet
Name of Evaluator :
Profile/Role of Evaluator
Date of evaluation:
Site evaluated:
Part 1:
:
Rate each heuristic and provide detail description of problem.
Rating scale:
1: No problem observed
2: Minor problem observed
3: Major problem observed
1
Heuristics
Visibility of system status
2
Match between system and the
real world
3
User control and freedom
4
Consistency and standards
5
Error prevention
6
Recognition rather than recall
Rating Description of Problem
8
7
Flexibility and efficiency of use
8
Aesthetic and minimalist
design
9
Help users to recognize,
diagnose and recover from
error
10
Help and documentation
11
Content
Part 2: Identify the usability problems
Part 3: Suggest design changes
9
Appendix B
Summary of Heuristic Evaluation
Rating scale:
1: No problem observed
2: Minor problem observed
3: Major problem observed
Evaluator A: So Jami Florence
Evaluator B: Aslin Harminah Anuar
Evaluator C: Tey Hwee Chen
Date of Evaluation: 25 Oct 2011
(A)
1
Heuristics
Visibility of
system status
Rating
A B C
A
3 3 2 The website does not have any
visibility of system status.
While evaluating the system
had downtime, however,
nothing was indicated. Had to
try evaluating the next day and
luckily the website was up
again, with no particular
explanation
Description of Problem
B
Does not indicate any time
required or percentage of
completion.
No mention of maintenance
downtime.
C
The page on baby picture took
more than 1 minute to be
completely loaded. No indication
of time required for the page to
load.
Website was done on 22/10/11.
There was no notice or
explanation on before and after
the downtime.
“Does my baby have colic?” does
not have any content. No
indication of page under
construction or otherwise.
10
(A)
2
3
Heuristics
Match
between
system and
the real world
User control
and freedom
Rating
A B C
A
1 3 3 Words and concepts are used
are familiar with parents. The
headlines are rather logical.
2
3
2
User can lose orientation when
browsing and must try to
remember where they are at.
One big problem is the
downloading time for each
page takes a very long time;
between 6 to 8 seconds. After
a while, you may feel you want
to give up on the website.
Yes, there is a search function
but does not really reduce
browsing.
Description of Problem
B
Most words and concepts are
familiar.
However, the title of the
website: ‘The New Parents
Guide’, does not match the tabs
or info. For example, ‘shopping’
and ‘travel’. This can be
included but should be under
extra info as the main focus
should be on parenting
information such as tips,
resources and etc.
Although it allows immediate
exit from site by just the ‘X’
button on top.
Design layout can be improved
as user does NOT know where
he/she is within the website.
No customization of font size
and content pane.
C
Headers in the shopping category
are potentially misleading.
Header – “Trying to conceive” in
the Shopping category leads to
items like fertility supplement,
books on trying to conceive.
Font and Content pane are frozen.
Does not have print friendly
version of the text
Search function is not available on
the homepage, only available
from 2nd level pages onwards.
Position of search box in the page
banner also makes it difficult to
spot.
Search results are not ranked
according to relevance.
11
(A)
4
5
Rating
Heuristics
A B C
A
Consistency
1 1 1 Design is quite consistent.
Colour scheme definitely
and standards
consistent!
Error
3 3 3 Hyperlinks are recognisable
prevention
Does not differentiate visited
and unvisited links, however, it
is hard to tell as the colour
used for differentiation looks
almost the same!
Some misses. For example”
Information Materials for
Parents” should not be under
the category “Shopping”.
Logically should be under
“Resources”.
6
Recognition
rather than
recall
2
3
1
Another example is under
“Parenting Information”, there
is a “Baby Product Buying
Guide”. Should logically fall
under the shopping tab which
they have.
Colours are generally two- tone
and boring. No much
differentiation to reinforce
information structure.
Not great for recognition.
Description of Problem
B
Nil
C
Nil
Content not logically structured.
Differentiation between pages
visited and not visited is not
Child behaviour is located under consistently applied across all
‘shopping’. User could actually
categories at all times. The
be looking for information rather colours used to differentiate the 2
than product.
are also difficult to distinguish.
Although hyperlinks are
Headers naming convention is not
obvious, it is too much and looks consistent. Eg of headers: Breast
cluttered.
feeding; Does my baby have
colic?
“Child behavior” is in the
Shopping Category. The content
is books on child behaviour and
items like reward chart.
Titles are easily recognised but
the symbols and colours are all
similar and there are no
differentiations.
Nil
12
(A)
7
Heuristics
Flexibility
and efficiency
of use
Rating
Description of Problem
A B C
A
B
2 1 2 Navigation from one tab to
Nil
another tab is slow! Takes
about 5 – 6 seconds to upload a
page. Cannot do book
marking and does not provide
RSS feed.
C
Does not have RSS feed to help
visitors track new content.
Pages are slow to load.
Yes – quick access to
homepage.
8
Aesthetic and
minimalist
design
3
3
3
I felt that the fonts were slight
smaller than usual. The
colours used are very corporate
blue and black. Not very
friendly, warm or inviting.
Graphics are also of poor
quality.
Advertisements are placed
when there is space. Overall
cluttered design, definitely not
minimalist.
9
Help users to
recognise,
diagnose and
recover from
error
3
1
2
There are no colours except for
blue and black.
Information is not pleasing as it
looks cluttered and messy.
Graphics are minimal and does
not look appealing or attractive.
Plain design. Does not correspond
to the joyous mood of new
parents.
Page is not welcoming.
Advertisement is given greater
importance than content of the
page.
The advertisements are also Blue
font so there is no
differentiation.
No. As mentioned earlier in
Nil
point 1, no error messages even
when website was down!
Most common error encountered:
page cannot be displayed. But
using the back page and clinking
on the link usually works.
Website does not provide any
assistance.
13
(A)
10
Heuristics
Help and
documentation
11
Content
Rating
A B C
A
2 2 2 No visible help available
except for contact us.
1
3
3
Style of writing is easy to
comprehend.
Should be able to answer the
information needs of parent
Description of Problem
B
No help button.
If users are lost while
navigating, there is no mention
of where to go next.
Too much information, too
messy.
It does not really answer info
needs. For example, if users are
looking for preparing the arrival
there, is no info it.
C
There is no help function but
feedback is possible through the
“Contact Us” page.
Homepage does not provide a
introductory message informing
visitors what the page is about.
Judging by the title of the site-The
New Parents Guide, it obviously
lacks content for new father.
The navigation pane on the left
indicates a greater emphasis on
shopping rather than parenting
information.
The content for “Family Travel
Guide” has no direct relevance to
first time parents. It does not state
if the place has baby friendly
facilities etc.
14
B
C
Discussion Areas
Identify the usability
problems
Suggest design changes
A
One big problem is the loading
time of the various pages.
Takes between 6 to 8 seconds
to load up and I feel that if I
am have limited time... I may
not have the patience.
B
Organisation of information
within the site
C
The top few usability problems
are:
Focus on parenting information
The content organisation seem
not logical to me and find it
hard to understand why it is
categorise that way.
Layout of webpage
Classification of the content and
naming convention of the
categories are not intuitive to
prevent error when deciding what
to click first.
Some time have to be spent on
browsing the content before
you fully understand the
structure. I am only doing that
because I have to evaluate the
website, but a casual user
coming across the website, I
would have exited after a short
while (3 mins) would soon be
off to another website.
For a start, the website should
have more pleasing and warm
colours that entice parents-tobe to explore.
Better graphics to be employed
on the homepage to give a
Aesthetic design
Links and content do not always
work.
Content needs to be improved
upon.
Design of the site is not inviting
and warm. Position of advertising
is still the limelight of the main
content
As the websites should be for
first time parents, information
should be focused on preparing
for the arrival, looking after the
infant to growing up to a
toddler. First time parents are
also new to parenting so there
Classification of the content and
naming convention of the
categories has be clearer and more
intuitive
Links that do not work has to be
removed. Notice to be put up for
15
Discussion Areas
A
users feel that the website has
good “qualities”
Structure of content need to be
improved upon.
Also I get the feeling that it is
more of a “shopping” website
offering lots of products.
Overall it should not look so
cluttered on the home page.
B
should be information on it.
C
content under construction
So tabs can be named after them
such as ‘Your Baby’,
‘Pregnancy’ or ‘Parenting’.
The content is not logically
structured. New website should
have clear headings and not
many hyperlinks as it will be
messy.
The new website should have
more colours and the symbols,
headings should be clear.
One major problem in the
website is its aesthetic design.
New website should be much
more attractive with images that
are appealing and attractive.
Information should not be
cramped together.
Content should answer the
information needs of the target
audience.
Expand the content of the
parenting information
Use more colour and warmth
colours like pink, yellow or baby
blue. Position advertisement at the
side or at the bottom, not in the
centre of the page.
16
Appendix C: Screenshots of New Site
1) Menu Page – 1st Level
The graphics should be appealing and
attractive. The graphics used show
real life contents and users will be
able to connect to the images.
Navigation bar (Menu
functions).
Search function.
Screenshot 1: Home Page of Revamped Website
Include an introduction in the
home page to state the scope of
the site.
Tagline or title of the website.
Use of warm inviting vibrant colours.
17
2) Pregnancy – 2nd Level (Signs of Pregnancy)
Navigation bar (Menu
functions)
Scrolling is done vertically and not
horizontally.
Screenshot 2: 2ND Level Web Page on Pregnancy
Provide other relevant information which
follows the same format as the main
navigation bar.
Headers and fonts are
similar for greater
consistency.
18
3) Pregnancy – 3rd Level (Eating Well)
Headers and fonts are
similar for greater
consistency.
Screenshot 3: 3rd Level Web Page on Pregnancy; Eating well
Use of appropriate graphic that will capture
the attention of visitors to the site.
19
4) Parenting – Dads
Screenshot 4: 2nd Level Web Page under Parenting
Re-organize the information in a
clear and consistent manner.
Clean up the site.
Include relevant links that are not obsolete and expand
on content that is relevant, within the scope.
Better layout that highlight the content and not
cluttered.
20
5) Communities
Screenshot 5: Webpage under “Communities”
6) Contact Us
Screenshot 6: Webpage under “Contact Us"
21
Appendix D
Screenshots of Original Site (http://www.thenewparentsguide.com/)
Screenshot 7: Home Page of Website that was evaluated.
Screenshot 8: Example of 2nd level page: Home>Parenting Information
22
Screenshot 9: Example of 3rd level page: Home>Parenting Information>Tips on Choosing Baby
Names
Screenshot 10: Example of 4th level page: Home>Parenting Information>Breastfeeding>Breast or
Bottle?
23
Screenshot 11: Example of problem with hyperlink:
Home>Parenting Information>Tips on Choosing Baby Names> Take a look at the most popular
names for the current year and over the past 120 years.
Screenshot 12: Example of content for Family Travel
Home>Family Travel > Family Travel Guides > Alabama Travel Guide
24
Screenshot 13: Example of shopping function on the site (linked to external site)
Screenshot 14: Example of shopping function on the site (linked to external site):
25
Screenshot 15: Example of link to its secondary blog site
Screenshot 16: Example of memory intensive page:
26
Screen 17: Search result for milk powder
27