UID BIT Coursework

User Interface Design
1
Student Name: Myint Oo @ Amirul Hassan
UOG Student Registration ID: 000805763
Coursework Title: User Interface Design
COMP1650: User Interface Design
Due Date: 07/11/2013
Center: KMD (Yangon, Myanmar)

2
Table of Content
1. Requirement Specification
1.1 Introduction…………………………………………………………………………….….5
1.2 Objectives…………………………………………………………………………….…....5
1.3 Assumption and Constraints………………………………………………...……….….....5
1.4 Selected websites (Home page Print Screens)……………………………………….……6
1.5 Explanation of selected websites …………………………………………………..……..6
1.6 Explanation of selected guidelines (W3C/Nielson)……………………...…………..…6-7
1.7 User Groups ……………………………………………………………………….……...8
1.7.1 Parent Users……………………………………………………………..……8
1.7.2 Teacher Users…………………………………………………………..…….8
1.7.3 School Staffs……………………………………………………………..…...8
1.7.4 Students…………………………………………………………………..…..8
2. Investigation of the current two websites
2.1 Evaluating the existing websites with guideline………………………………...10-13
2.1.1 Accessibility and Usability Checklist of two existing websites……14-15
2.2 Task Analysis……………………………………………………………………15-16
2.3 Mobile and Tablet …….……………………………………………………………17
2.3.1 Why Website for mobile is important…………………………………17
2.3.2 Issues for viewing the first website on mobile and tablet……………..17
2.3.3 Issues for viewing the second website on mobile and tablet …………17
2.3.4 Factors need to be considered for mobile optimization………….……17
3. Design
3.1 Low Fidelity Prototypes……………………………………………………………19
3.1.1 Website Prototype…………………………………………….……19-21
3.1.2 Mobile Prototype……………………………………………………...22
3.2 Design Issues……………………………………………………………………20-22
3.3 Evaluation of Prototype (Both Website and Mobile)……………………….……...23

3
4. Development
4.1 Features (Changed/ New)………………………………………………………25-26
4.2 High Level Prototype………………………………………………………………27
4.2.1 Website Prototype……………………………………………………………27
4.2.2 Website Evaluation…………………………………………………………..27
4.2.3 Mobile Prototype…………………………………………………………….28
4.2.4 Mobile Evaluation……………………………………………………………28
5. Testing
5.1 Checklist …………………………………………………………………………..30
5.2 Feedback Evaluation……………………………………………………………....30
5.3 User Testing……………………………………………………..………………...31
6. Conclusion
6.1 Final Product…………………………………………………………………..…33
6.2 Project Evaluation………………………………………………………………..34
6.3 Future Enhancement (Both Website and Mobile)……………………………….34
6.4 Knowledge we got from this coursework………………………………………..34
6.5 Reference…………………………………………………………………………35

4
Introduction

5
Introduction
Bexton and Crockham hill are primary school websites. They were built with a view to offer their
school information such as history of the school, experiences of the teachers, programs, activities. The
websites provide access to every user. The websites contain some design issues such as layout,
content etc and is not very appropriate for people disabilities even if they work well. So, I am going to
redesign these websites based on guidelines as well as some human centered design methods. I will
make deep analysis the current websites to find accessibility and usability issues. Each issue will be
identified with guideline and examples from the existing websites. Every issue will be tested heuristic
evaluation check list which help meet all the requirements.
Objective
 To make deep investigation or analysis on the existing websites by comparing with guideline
 To find the issues of the current websites
 To create a prototype for the two websites by mixing them into one
 To convert the website into mobile version and create a prototype for mobile
 To redesign the websites based on W3C and Nielsen guidelines
 To target the end users by using an appropriate design
 To check the issues by using human computer interaction methods
Assumption
Users such as Parents, Teachers, School Staff, Other users who are interested in the school
information are supposed to have the necessary skills of using computer and internet.
I also assume that they will be able to surf the school websites by using a web browser. It’s widely
recommended that Google Chrome, Mozilla Firefox, Safari and Opera will be the most suitable and
efficient web browsers in comparison to others to use the school website.
I am going to create a new prototype to add some new features and change the old design and
redesign the whole website based on HCI, W3C and Nielson Guideline.
Constraints
For any projects to be successful, it’s very important to do under plan. In order to meet all the
required requirements and finish on time, I have to apply a methodology such as DSDM etc. Only
then I can finish the project before the deadline comes. By focusing on these six factors quality,
scope, time boxing, financial plan, risks and resources will make the project a successful one.
After I have completed all, only the administrator will have the right to control the database
and the whole website. He can update the information and amend it and make changes if needed. The
rest of the school staff will not be given the admin right.

6
Website Selection
Website 1 and 2
http://bexton.info/index.html#&panel1-1 http://www.crockhamhill.kent.sch.uk/
Explanation of Selected Websites
I selected these two websites because they are poorly built and contain a lot of usability issues for
example, font, color blindness, content, layout, etc to be fixed. There are also some accessibility
problems for example, these websites can’t be accessed from mobile devices and they don’t provide
equal access to all people for example, inappropriate for people with disabilities and older people due
to color blindness. Why I selected them is to improve and redesign using guidelines and HCI which
turn these two sites into a good website. All issues will be discussed in Design section in detail.
Some explanations of selected guidelines
As the web technology is improving day by day, People from different places are using
websites for different purposes with different devices. The websites should provide equal access to all
people. But there are a lot of websites that doesn’t provide equal access. The websites should be
realistic and understandable for almost all kind of people. To become a successful website, it should
be built based on appropriate guidelines. There are a lot of guidelines for websites to improve
usability, accessibility, visibility, security and many more. W3C standards and Nielsen are two of
them. W3C and Nielsen will be applied to redesign the websites because W3C is mainly for
accessibility which will be discussed briefly at the following sections. Nielson is for usability of a
website. The below are some standards and guidelines of W3C and Nielson which will help make a
better website. These are the reasons why I selected these guidelines and standards

7
The below are some guidelines of Nielson (These guidelines will be used to check usability for the
existing website and new website)
1. Provide emergency exit (for example, if users do an action by mistake, they should be
provided access to the home page with one click such as home link)
2. Provide user control and standard(for example, the users shouldn’t be wonder for the same
words “ Home” “ Home Page”
3. Provide help and documentation
4. Ensuring that layout and content is well-structured and consistent.
5. Making sure that use of standard font and size
There are many set of Nielson’s guidelines approximately 31 guidelines but I am going to use the
above 5 guidelines to check usability issues from the existing websites and use them to develop new
interface design because they are mainly used by developers around the world. These are very
fundamental for developing a website and they have mainly suggested the main necessities that a
good website should have.
W3C stands for World Wide Web Consortium. It tells the main part of what makes a good website. It
says
(These standards will be used to check accessibility from the existing website and new website)
1. The website provide clear navigation and sitemap
2. Ensuring that the whole site is not replying on color
3. Making sure that it provide user control ( For example, play and stop buttons for the moving
texts and graphics)
There are many W3C standards and versions but I am going to use the above 3 because these three
standards are very important for a good website. Without these, the website will be difficult to use.
The other standards are also important but without them, the website will have not much accessibility
problems.
In my opinion, these two guidelines will be best suited to redesign the websites I selected
because they suggest the main necessities of the websites for example accessibility, usability, user
freedom, consistent and standard. Without them the websites are incomplete. I don’t think other
guideline will be very appropriate because they have a few set of guidelines.

8
User Group
There will be four types of users who will use the website. Depending on the type of users, their need
of information will be different. The types of users are as follow
Parents
It is assumed that Parent users will be in the old age, possibly aged 30s to 60s. Their need of
information will be different from others. The information they will need are as follow
- School Policies
- Contact Information
- The School background
- Newsletters
- Enrolment Information
- School Fair
Teachers
It’s assumed that Teacher users will be the same age as Parents users. Their need of
information will be different from Parents and other users. The information they will need are as
follow
- School Strategic Plan
- Job Vacancies
- School Information
- Future Activities
- Curriculum Information
School Staff
It’s assumed that these users will be the reception team and low level staff of the school who will be
in the age range of 20s to 30. The information they will need are as follow
- School Tour
- School Events
- Notice board
Students
It’s assumed that these users will be in the age of 5 to 12. They will be the students of schools and
depending on their grade, their need of information will be different. They will need the following
information
- School Events
- Notice Board
- Photo Gallery of Previous events

9
Investigation

10
Evaluation of existing websites with W3C Standards and Nielson Guideline
I am going to evaluate the Website 1 with Nielson guideline as I explained about Nielson first at
Selected Guideline section. As I mentioned first, Nielson will be used for usability as it’s one of the
main aspects for a good website. Then, Website 1 will also be evaluated with W3C standards for
accessibility as it’s the key mechanism for websites. Likewise the website 2 will be evaluated the
same.
Provide help documentation (Nielson Guideline)
Although all information of the website is written in simple English, there’s no documentation which
is very important for the almost all users. This helps user how to use the website well and in a short
time.
Clear text and documentation (Nielson Guideline)
Although the whole website is written in simple English, some headings are not very clear and no link
descriptions for example clear link phrases. Many users see the headings and only a few users who go
in detail. For example, PTA link from Community menu of the navigation bar.
Having Emergency Exit (Nielson Guideline)
Most of the pages have Emergency Exit (Home page link) but some pages don’t’ have emergency exit
to go back to the home page which is widely recommended at Nielson guideline that “There
should be a clearly marked “emergency exit” to leave the unwanted page without having to go
through an extended dialogue” . For example Blog from News& Blogs.
Layout and Content (Nielson Guideline)
The existing layout of the content for the Bexton website is well-placed but contains many pages like
staff from our school Menu, news from News & Blogs Menu etc which are needed to scroll down to
see their information. The study shown that many of the users hardly scroll down to see the
information.
Use of Font and Size (Nielson Guideline)
Even though Time New Roman font is used at the navigation bar of the website, the font size is very
small and the remaining pages are used different types of fonts with different sizes. These may be the
issues for the users with visual impairment. The recommend fonts (for example Arial etc) and font
size is (for example)
body {
font-size: 100%
}
Examples from the website

11
Provide navigation and sitemap (W3C Standards)
Even if the website provides a good navigation, the logo at the middle of the navigation bar can make
users confused. Even if the navigation is well-ordered and there is no sitemap on it. Some of the links
doesn’t work well for example, Latest Newsletter, Newsletter archive from new & blog menu.
Provide user control (W3C Standards)
There are moving objects and moving effects on the home page of the website and no chance to
control by users. So, the home page is not suitable for people with cognitive disabilities. So, moving
objects can make them unable to use the website. For examples
Replying on Color (W3C Guideline)
The navigation bar and most of graphics of the website are completely relying on the background
color and without the color; the texts on it won’t be visible because the background color is light gray
and the font color is white.
For example (1)
For example (2)
For example (3)
W3C says “Make sure that without color, the text and graphics used in the website are clear and
easy to understand.”

12
(Website 2)
Although the website has help documentation to offer the flexibility for all users to use the whole site,
but there’s no search box to find the specific information they need from the documentation. The help
documentation is too much and doesn’t describe about specific task of the users.
Even though all the links in the website have their own descriptions, they are not very clear. The links
and headings are used with different color and size. The documentation is written in simple English.
For example
There’s no emergency Exit for every pages of the website. For example, no emergency exit for bug
club. If a user clicks on this link by mistake and want to go the home page. There’s no way to do that.
The user may leave the website.
Nielson says “There should be Emergency exit such as home page link for every pages and
things related to the website”
The layout of the content of the current website is poorly structured and the arrangement of graphics
and texts are completely rubbish. Graphics are distributed everywhere at the home page. As many
home pages of the websites do, the main information of the school isn’t put clearly at the top of the
website. Users scan the website first then they see the information or something else which are well-
described or well-ordered.
For example
The use of fonts at the headings and links are not recommended fonts such as Sans-Serif, Arial.
Different color is used for different types of fonts. User with visual impairment will not be able to
read the contents or information because of the poor color mixture of text and background for
example, light blue font at the yellow background.
For example

13
The navigation bar seems missing due to complex use of graphics throughout the website. It’s placed
at the top of the right side of the home page. Although the links of the navigation works well, it’s not
visible at the home page and the sitemap is also not included.
Provide user control (W3C Standards)
Most of the pages of the website are full of moving graphics and texts. These are the big issues for the
user with disabilities. No control for moving objects.
For example
The above texts are moving all the time and no control to stop
Replying on Color (W3C Guideline)
The home is completely replying on the background color. The graphics used on the home page are
quite confusing and hard to understand. Without the background color, some text will be lost and
some graphics will become invisible.
For example
Light Blue graphics on the blue background
Light blue texts on the blue background

14
Accessibility and Usability Checklist of the current websites
Websites 1
This checklist is drawn based on Nielson guideline and W3C standards. It is used to check the
existing websites. The key reason for the checklist is to investigate the issues of the current websites
and improve them in the new website. Ratings are provided by some of my family members.
Accessibility
No Criteria Rating
1 Font size is readable 1 2 3 4 5
2 Use of color is suitable for color
blindness users
1 2 3 4 5
3 The loading time of the website
is sensible
1 2 3 4 5
4 The scrolling is reasonable 1 2 3 4 5
5 The texts and images are
relying on color contrast
1 2 3 4 5
Usability Criteria Rating
6 The link of navigation works
well
1 2 3 4 5
7 Clicking on logo takes to home
page as an emergency exit
1 2 3 4 5
8 Are the links correct? 1 2 3 4 5
9 Key heading and links are
clearly described
1 2 3 4 5
10 Layout and Content are well
structured
1 2 3 4 5
11 Is the contact information clear? 1 2 3 4 5
12 Is sitemap contains major links
of the site
1 2 3 4 5
They said it’s not a good website. They had many accessibility and usability problems to surf this
website.
Websites 2
Accessibility
No Criteria Rating
blindness users
1 2 3 4 5
3 The loading time of the website
is sensible
1 2 3 4 5
4 The scrolling is reasonable 1 2 3 4 5
5 The texts and images are
relying on color contrast
1 2 3 4 5
Usability Criteria Rating
6 The link of navigation works
well
1 2 3 4 5
page as an emergency exit
1 2 3 4 5

15
clearly described
1 2 3 4 5
structured
1 2 3 4 5
11 Is the contact information clear? 1 2 3 4 5
of the site
1 2 3 4 5
They said it’s a poor website. They had many problems for reading texts and using navigation.
Task Analysis
The followings are called “Task Analysis”. It shows the skill of the users to find throughout the two
existing websites. The first one is for website 1 and the second one is for website 2.
0. Go to WebPages
1. Go to our school
1.1 Go to about
1.1.1 View the school information
1.2 Go to staff
1.2.1 View names and experiences of the teachers of the school
1.3 Go to governors
1.3.1 View the governors information
2. Go to virtual office
2.1 Go to Policy
2.1.1 Select the policy type
2.1.2 Download the selected policy
2.2 Go to Policy
2.2.1 Go to School Calendar
2.2.2 View the Calendar by month and year
2.3 Go to term dates
2.3.1 Download term dates
2.4 Go to useful forms
2.4.1 Select types of forms
2.4.2 Download selected forms
2.5 Go to admissions
2.5.1 Link to another website
2.5.2 View the admissions information
2.6 Go to school e-payments
2.6.1 Link to another website
2.6.2 View the school e-payments information
3. Go to news & blog
3.1 Go to News
3.1.1 Select news by months
3.1.2 Download the selected news
3.2 Go to Blogs
3.2.1 Select year of the class ( Year 3)

16
3.2.2 View the comments given by different people
4. Go to classes
4.1 Select the year and view the class information
5. Go to community
5.1 View PTA information
6. Go to contact
6.1 View contact information
(Website 2)
0. Go to Quick Links of the homepage
1. Go to Admissions
1.1 View the admissions information
1.2 Download the admission form
2. Go to Bad Weather Procedure
2.1 View the bad weather information
3. Go to Job Vacancies
3.1 View the job vacancies information
4. Go to Fun Things
4.1 Select a game
4.2 Play the game
5. Go to Bug Club
5.1 Select a button or link
5.2 View the information of bug club
6. Go to Code Club
6.1 Select a link or view the code club information
7. Go to School Information
7.1 View contact address of the school
8. Go to Information for parents
8.1 Open any type of information link (Term dates/Annual holiday leave of absence)
8.2 View the respective information
9. Go to Ofsted
9.1 View the information or download the Ofsted report
10. Go to Policy
3.1 Open the link or direct download policy statements
3.2 View the policy information
4. Go to Prospectus
4.1 Open PDF link
4.2 Download Prospectus
5. Go to Holiday Form
12.1 View the holiday information or download holiday request form

17
Mobile and Tablet
Why website for mobile is important
According to research, more than 20% of the users (approximately 1.2 billion users) browse
the internet with smart phones. Over 800,000 mobile phones are activated every day because Google
projects will become available on mobile phones as well as tablets rather than PCs. So, it’s very
important that the websites can be accessible on mobile platform.
Issues of viewing the first website on Mobile and Tablet
There are a lot of differences to view a website on mobile and PC (for example, screen size,
content stability). There is no screen size issue in the first website. It can be viewed without many
issues. But, the use of font and color make the information invisible which will be difficult for people
with disabilities. The website doesn’t include any big issues ( for example, much use of graphics and
content which makes a website less usable to use from mobile) and flash plug in so that I don’t need
to make much changes for mobile optimization but the change of color, font and long information.
Issues of viewing the second website on Mobile and Tablet
This website doesn’t work very well on mobile. But, the use of much graphics and images on
the websites make it load slowly. It doesn’t have screen size issues for mobile phone. One of the big
problems is that it contains flash plug in which will no more supported by Adobe. Due to use of
lengthy information and much graphics, it is required to scroll horizontally and vertically which make
users annoyed. Some of the graphics doesn’t appear clearly. Some of the links doesn’t work well to
download the information. So, this website will need to be made a lot of changes to work well on
mobile.
Factors need to be considered for current websites to improve mobile optimization
Before considering the following factors, we need to follow the accessibility and usability
standards of W3C and Nielson guideline to develop a mobile version website. Then we need to
consider the following factors in order to make these websites work well on mobile platform
 Responsive CSS must be used for optimizing
 Considering that various mobile and tablets have various screen sizes
 Developing “ Fluid” layout in mind
 XML or XHTML should be used with encoding set at UTF-8
 The important information should be short and set at the top of the page and fast to access
 Ensuring the design of the mobile website appropriate for every user
 Making sure that the download time is reasonable
 Not all browsers supports plug in or extension
 Removing the unwanted graphics or images
 Designing for touch screen and non-touch screen
 Using radio buttons and check boxes instead of input text boxes
 Avoid using flash plug in as Adobe won’t support its mobile plug in

18
Design

19
Design
Two low level screen prototypes will be designed for the current websites by mixing them into one to
make changes and better based on selected guidelines.
Low Fidelity Prototype (1)
Search Box
Prototype
explanation
Contact Address
Main Navigation
Sub
Navigation
Content
Site Map
Help
Social links
Logo

20
Design Issues
Issues 1
Small logo
Search box is put at the middle of the navigation bar
Sub navigation is not left-aligned
One column for content
Sitemap and help is put at the middle of the footer
Social links at the right side of the footer

21
Low Fidelity Prototype (2)
Primary School
Logo
Social network
links
Search Box
Key Navigation
Sub Navigation
Quick links
Contact AddressLinks for Gallery Links for Sitemap
Content Info

22
Issue 2
Big font is used for sub navigation menus
Quick links at the left side of the body under sub navigation
Contact address is set at right side of the footer
No headlines for the information
The layout of page is a bit narrow
Mobile Low Fidelity Prototype
A mobile prototype is drawn based on the selected guideline. As mobile technology is on the rise,
people surf the internet from their mobiles. So, a mobile prototype is created for the website to
provide access to the school information from the mobile platform. (Can see brief explanation at
Mobile section)
(Main Screen) (Sub Navigation Screen)
Logo
Social
links
Search
box
Key
Navigation
Home page
link
Setting page
Sitemap
Contact page
Logo
Social
links
Search
box
Sub
Navigation
menus
men
Body
text/Content
Information
Home page
link Setting page
Sitemap
Contact page

23
Evaluation of the Low Fidelity Prototype (Website)
First of all, the first prototype is drawn based on selected guidelines. It doesn’t have some
necessary functions and the layout and design is not well. A second prototype is drawn to have better
design. The logo will be linked to the home page. It will be set on every page of the website to
provide easy access to the home page as an emergency exit. The logo is neither big nor small. The
information is written in simple and understandable English. The contact information will be available
on every page. Help documentation is visible on every page as well. The prototype contains a search
box to help users find the specific information they want. The layout is consistent. The same layout
and interface will used on every page not to make users confused using it. There will be a lot of
improvements in high level prototypes.
Evaluation of the Low Fidelity Prototype (Mobile)
The logo of the school will be in every page of the mobile application. The search box is set
at top of the application will help find the specific information. The social links will take users to
social pages of the school with one click where users can also find information. There will not be
much images and graphics about schools. The main navigation bar is set at the center of the body with
a background. It is vertically aligned. Each navigation menu has its sub navigation menus. The home
is put at left side at the bottom of the screen and will be linked to the home page as an emergency exit.
The setting button will be hold edit information for example, change font, size, color etc. A sitemap
bottom is positioned on the right side at the bottom of the screen which will help use the application in
a quick way. The contact link is set at the bottom on the right side of the screen. It will contain contact
information and a map where users can easily know the location of the school. There will be many
improvements in the high level prototypes after testing.

24
Development

25
Changed, Removed and Added Features
There are many features and functions I changed, removed, added for the new website based on the
selected guidelines. The new website is completely different from the existing websites. The new
website may not have any problems related to accessibility and usability as W3C is used for
accessibility and Nielson for usability.
To offer ease and comfort for using new website, a help button is put at the footer with correct guide
and instruction on how to use the website well. It’s written in simple English.
Please have a look on it!
The information is written is written in simple English. The headings are also described in simple and
in a clear way. No duplicate headings and links are used which make users confused (for example,
help at one page and guide at another page)
To help users with their mistakes, the logo at the left side of the banner is linked to the home page as
well as a home page button at the left side of the footer at every page as an emergency exit.
The layout and content of the new interface is well structured and consistent. Rather than using much
graphics, texts are used for faster loading. The contact address is put at the right side of the banner at
every page of the website. At the right side of the footer, some social links are set to get access to the
social web pages of the primary school.
Widely used font, Arial is used throughout the whole website. The font sizes used for the headings are
25pt and 15pt for the content which make the user see clearly to read and doesn’t need to pay much
on it.

26
The navigation of the new website is put horizontally and well-located with five key links at every
page of the website. It’s has also a sub navigation which is put at the left side of the website.
Depending on the key navigation links, the sub navigation will be changed. The new website has a
sitemap with correct links to provide easy access to the users in accordance with W3C standards.
Provide User Control (W3C Standards)
There are no moving texts and images used in the new website
Replying on Color (W3C Standards)
Any of the texts and images used at every page of the new interface is totally separated from
background color. All the texts and images are clearly visible without the background color. The
background color used is gray and the font color used for heading is white and black for content.
Background
color
Font color and
its size 25 pt

27
High Fidelity Prototype (Home Page and News and Information Page)
Evaluation of High Fidelity Prototype (Website)
It has five main navigations with its sub navigation menus. Each link of the navigation bar works
well. The navigation bar is realistic which shows the clicked menu with different color so that users
can easily know their recent action. The logo is linked to the home page at every page of the website
as an emergency exit. There is also a home page button at the left side of the footer as an emergency
path as well. A sitemap bottom at the footer is set for the users who want to use the website in a short
time. A help button is set at the left side of the footer to provide instructions who want for it. Help
instruction is written in simple English and short texts. The contact address is put at right side of the
banner to be visible clearly. The search box at the middle of the banner will help users to find their
specific information. It provides clear error messages if users click it empty. The content and layout
design are well structured and consistent. The same interface design and content are used throughout
of the website not to make users confused. Not much graphics and images are used which make the
loading time slower. Some social buttons are placed to take users to the social websites to like their
school pages and get up to minute information about school. The website can be accessible from
various browsers as it’s developed with CSS.

28
High Fidelity Prototype Mobile Prototype
As I have not enough time for developing Mobile application for the website, I used an application
named “Prototyper” for creating these high level prototypes. I will develop this mobile application by
using Responsive CSS if I have a chance to do.
Evaluation of High Fidelity Prototype (Mobile)
Due to the lack of enough time, I have just created mobile high level prototypes without any
functionality but a good interface design based on the selected guidelines.

29
Testing

30
Testing
This checklist is drawn according to the selected guidelines, W3C standards and Neilson
guideline. The first checklist was used to check the existing websites. This is the second one
to test the new interface design. I asked some of family members to offer ratings on my new
interface design again and they provided their feedback on their view.
Checklist (New Interface Design)
No Criteria Rating
blindness users
1 2 3 4 5
3 Website loading is fast 1 2 3 4 5
4 Navigation is easily reachable 1 2 3 4 5
The link of navigation works
well
1 2 3 4 5
page
1 2 3 4 5
7 Search box can find specific
information
1 2 3 4 5
clearly described
1 2 3 4 5
structured
1 2 3 4 5
10 Is the contact information
clearly visible?
1 2 3 4 5
of the site
1 2 3 4 5
They said the new interface is quite good. They didn’t have any problems to surf the new website. But
they gave me some suggestions on new interface which are described at the following feedback
evaluation.
Feedback Evaluation
All of my family members offered positive feedback on new interface design. Many of the ratings
they gave were between 4 and 5. They said the contact information is well-placed and clearly visible.
The search box can produce error messages if it’s put empty and be used to find specific information.
They weren’t confused at the navigation bar as it contains five main navigation menus. The sub
navigation menus also work well and its links are correct. They could easily go to the home page by
clicking on the logo from every page of the website. The background color and texts are well thought
and appropriate for all kind of users. The only Arial font is used throughout the website. The font size
used for the headings and content are well structured. They had no problems surfing the website. But
they suggested me to change the color of the logo as it is not very suitable with the background color.
They also recommended that the sitemap page should contain major links rather than unnecessary
links of the website. However, it can be said that it’s a good interface.

31
User Testing
High Fidelity Prototype (One)
This has been tested by one of my family members for the first time to the new website. He said
everything he tested is ok. Because of time limit, I haven’t created many pages for user testing.
No Action Result Modification
1 Go to Home page Home page visible None
2 Click on About on the
sub navigation menu
Shows about school
information
None
High Fidelity Prototype (Two)
No Action Result Modification
1 Go to News &
Information
News and Information
Page visible
None
2 Click on Newsletter on
the sub navigation menu
Shows newsletter
information
None

32
Conclusion

33
Conclusion
Final Product

34
Project Evaluation
This section offers how the project has been completed and meets all requirements. It has ended in
positive results. But, the management of the project was not very well planned. It took much time to
draw high level prototype. The new interface was drawn based on selected guidelines and on my
thoughts. It was developed with accessibility and usability checklist done by users and their positive
feedback which makes a better interface design. Every stage of the project was done using selected
guidelines. Much of the time was given to make analysis and study the similar websites. Surfing the
internet to search the required information took time as well. What’s worse, I have not enough time,
so there will be some project activities which will be developed in the future. But the decision and
goal has already been set.
Future Enhancement (Website)
As I didn’t have enough time, I could add only a few functions and features. Many more functions
and features for example (a good sitemap, help documentation etc) are left to be developed based on
the selected guidelines in the future. The website will be developed under a good management and
plan. User will also involve in the future development in order to meet all requirements of a perfect
primary school websites.
Future Enhancement (Mobile)
Mobile prototype which is shown in high fidelity prototype section will also be developed by using
responsive CSS to offer easy access to the primary school information from mobile platform. The
same functions and features of the websites will be added to the upcoming mobile application. It will
be developed for both iOS and Android.
Knowledge we got from this coursework
Honestly, I wasn’t very clear about W3C standards and Nielson’s guideline. I didn’t even know how
to use them in developing websites. This coursework gave me a lot of knowledge related to HCI,
guidelines, evaluating websites with guidelines. Now, I fully understand the use of guidelines and to
create prototypes based on guidelines. I come to know how to make a good interface design. As I had
to search much information for this coursework from the internet, I got much useful information
which will come into use for future development. I can proudly say that this coursework really make
me strong in UID subject as well as web technologies. Thanks UOG for providing us such useful
subject and this coursework.

35
Reference
Trento Moss, 2013. WCAG 2.0: The new W3C accessibility guidelines. Available from
<http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/wcag-guidelines-20.shtml>
[Accessed 5 October 2013]
WebpageFX, 2012. How to design and build a mobile website. Available from
< http://www.webpagefx.com/design-build-mobile-web-site.html > [Accessed 6 October 2013]
Michael Bernard & Melissa Mills, 2000. So, What Size and Type of Font Should I Use on My
Website? Available from < http://usabilitynews.org/so-what-size-and-type-of-font-should-i-use-on-
my-website/ > [Accessed 10 October 2013]
Best font size for web design, 2011. Available from < http://www.webpagemistakes.ca/best-font-
size-for-web-design/ > [Accessed 15 October 2013]

UID BIT Coursework

More Related Content

What's hot (20)

Similar to UID BIT Coursework (20)

Recently uploaded (20)

UID BIT Coursework