SlideShare uma empresa Scribd logo
1 de 35
Baixar para ler offline
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)
User Interface Design
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
User Interface Design
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
User Interface Design
4
Introduction
User Interface Design
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.
User Interface Design
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
User Interface Design
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.
User Interface Design
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
User Interface Design
9
Investigation
User Interface Design
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
User Interface Design
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.”
User Interface Design
12
(Website 2)
Provide help documentation (Nielson Guideline)
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.
Clear text and documentation (Nielson Guideline)
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
Having Emergency Exit (Nielson Guideline)
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”
Layout and Content (Nielson Guideline)
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
Use of Font and Size (Nielson Guideline)
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
User Interface Design
13
Provide navigation and sitemap (W3C Standards)
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
User Interface Design
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
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
User Interface Design
15
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 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)
User Interface Design
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
User Interface Design
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
User Interface Design
18
Design
User Interface 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
User Interface Design
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
User Interface Design
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
User Interface Design
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
User Interface Design
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.
User Interface Design
24
Development
User Interface Design
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.
Provide help documentation (Nielson Guideline)
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!
Clear text and documentation (Nielson Guideline)
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)
Having Emergency Exit (Nielson Guideline)
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.
Please have a look on it!
Layout and Content (Nielson Guideline)
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.
Use of Font and Size (Nielson Guideline)
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.
Please have a look on it!
User Interface Design
26
Provide navigation and sitemap (W3C Standards)
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.
Please have a look on it!
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.
Please have a look on it!
Background
color
Font color and
its size 25 pt
User Interface Design
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.
User Interface Design
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.
User Interface Design
29
Testing
User Interface Design
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
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 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
5 Clicking on logo takes to home
page
1 2 3 4 5
6 Are the links correct? 1 2 3 4 5
7 Search box can find specific
information
1 2 3 4 5
8 Key heading and links are
clearly described
1 2 3 4 5
9 Layout and Content are well
structured
1 2 3 4 5
10 Is the contact information
clearly visible?
1 2 3 4 5
11 Is sitemap contains major links
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.
User Interface Design
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
User Interface Design
32
Conclusion
User Interface Design
33
Conclusion
Final Product
User Interface Design
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.
User Interface Design
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]

Mais conteúdo relacionado

Mais procurados

Interaction design comp1649
Interaction design comp1649Interaction design comp1649
Interaction design comp1649Htet Htet Aung
 
Interaction Design COMP 1649
Interaction Design COMP 1649Interaction Design COMP 1649
Interaction Design COMP 1649Shane Min Zaw
 
User Interface Design
User Interface DesignUser Interface Design
User Interface DesignNay Lynn Aung
 
May Hnit Oo Khin Business IT Project
May Hnit Oo Khin  Business IT ProjectMay Hnit Oo Khin  Business IT Project
May Hnit Oo Khin Business IT ProjectMay Hnit
 
Cw comp1108 78_mo233_20141120_200330_1415
Cw comp1108 78_mo233_20141120_200330_1415Cw comp1108 78_mo233_20141120_200330_1415
Cw comp1108 78_mo233_20141120_200330_1415Owen Muzi
 
Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019
Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019
Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019Unity Technologies
 
What is software engineering
What is software engineeringWhat is software engineering
What is software engineeringJennifer Polack
 
Srs template
Srs templateSrs template
Srs templatemuqeet19
 
Report on e-Notice App (An Android Application)
Report on e-Notice App (An Android Application)Report on e-Notice App (An Android Application)
Report on e-Notice App (An Android Application)Priyanka Kapoor
 
User interface design for people with special needs
User interface design for people with special needsUser interface design for people with special needs
User interface design for people with special needsRhaf Alloush
 
SRS example
SRS exampleSRS example
SRS examplegentzone
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb BaraaHarb
 

Mais procurados (20)

User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
MYINT OO ID BIT COURSEWORK
MYINT OO ID BIT COURSEWORKMYINT OO ID BIT COURSEWORK
MYINT OO ID BIT COURSEWORK
 
Interaction design comp1649
Interaction design comp1649Interaction design comp1649
Interaction design comp1649
 
Interaction design
Interaction designInteraction design
Interaction design
 
Interaction Design COMP 1649
Interaction Design COMP 1649Interaction Design COMP 1649
Interaction Design COMP 1649
 
User Interface Design
User Interface DesignUser Interface Design
User Interface Design
 
May Hnit Oo Khin Business IT Project
May Hnit Oo Khin  Business IT ProjectMay Hnit Oo Khin  Business IT Project
May Hnit Oo Khin Business IT Project
 
DFM BIT Coursework
DFM BIT CourseworkDFM BIT Coursework
DFM BIT Coursework
 
Interaction Design
Interaction DesignInteraction Design
Interaction Design
 
Cw comp1108 78_mo233_20141120_200330_1415
Cw comp1108 78_mo233_20141120_200330_1415Cw comp1108 78_mo233_20141120_200330_1415
Cw comp1108 78_mo233_20141120_200330_1415
 
Hein Thu Soe's RM BIT Coursework
Hein Thu Soe's RM BIT CourseworkHein Thu Soe's RM BIT Coursework
Hein Thu Soe's RM BIT Coursework
 
Business IT Project
Business IT ProjectBusiness IT Project
Business IT Project
 
Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019
Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019
Modernizing the Look and Feel of the Unity Editor- Unite Copenhagen 2019
 
BIT PROJECT
BIT PROJECT BIT PROJECT
BIT PROJECT
 
What is software engineering
What is software engineeringWhat is software engineering
What is software engineering
 
Srs template
Srs templateSrs template
Srs template
 
Report on e-Notice App (An Android Application)
Report on e-Notice App (An Android Application)Report on e-Notice App (An Android Application)
Report on e-Notice App (An Android Application)
 
User interface design for people with special needs
User interface design for people with special needsUser interface design for people with special needs
User interface design for people with special needs
 
SRS example
SRS exampleSRS example
SRS example
 
The history of ux by bara' harb
The history of ux by bara' harb The history of ux by bara' harb
The history of ux by bara' harb
 

Semelhante a UID BIT Coursework

Best Practices for University Websites
Best Practices for University WebsitesBest Practices for University Websites
Best Practices for University WebsitesJeremy Robinson
 
Research paper
Research paperResearch paper
Research paperKhalid
 
Jeannine boone4_11portfolio
Jeannine boone4_11portfolioJeannine boone4_11portfolio
Jeannine boone4_11portfoliojboo2
 
SEO through Accessibility- How designing accessible websites leads to automat...
SEO through Accessibility- How designing accessible websites leads to automat...SEO through Accessibility- How designing accessible websites leads to automat...
SEO through Accessibility- How designing accessible websites leads to automat...Abhay Rautela
 
Information architecture for websites and intranets
Information architecture for websites and intranetsInformation architecture for websites and intranets
Information architecture for websites and intranetsContent Formula
 
ICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdfICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdfRedenOriola
 
Essay On The Crawling Module And Web Pages
Essay On The Crawling Module And Web PagesEssay On The Crawling Module And Web Pages
Essay On The Crawling Module And Web PagesChristina Ramirez
 
SharePoint customized code analyzer
SharePoint customized code analyzer SharePoint customized code analyzer
SharePoint customized code analyzer Microsoft
 
Kelly saleh howey_proposal
Kelly saleh howey_proposalKelly saleh howey_proposal
Kelly saleh howey_proposalPatrick Howey
 
Basics of Web Design
Basics of Web DesignBasics of Web Design
Basics of Web DesignStaci Trekles
 
Essay On Web Development Life Cycle
Essay On Web Development Life CycleEssay On Web Development Life Cycle
Essay On Web Development Life CycleKerry Lewis
 
ByteMeCollege High Level Design
ByteMeCollege High Level DesignByteMeCollege High Level Design
ByteMeCollege High Level DesignNathan Foster
 
Running Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docx
Running Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docxRunning Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docx
Running Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docxpotmanandrea
 

Semelhante a UID BIT Coursework (20)

Main
MainMain
Main
 
Best Practices for University Websites
Best Practices for University WebsitesBest Practices for University Websites
Best Practices for University Websites
 
Java Unit 5(part 1)
Java Unit 5(part 1)Java Unit 5(part 1)
Java Unit 5(part 1)
 
How To Cite A Website In An Essay
How To Cite A Website In An EssayHow To Cite A Website In An Essay
How To Cite A Website In An Essay
 
Research paper
Research paperResearch paper
Research paper
 
College Web Site HTML PROJECT
College Web Site HTML PROJECTCollege Web Site HTML PROJECT
College Web Site HTML PROJECT
 
Jeannine boone4_11portfolio
Jeannine boone4_11portfolioJeannine boone4_11portfolio
Jeannine boone4_11portfolio
 
SEO through Accessibility- How designing accessible websites leads to automat...
SEO through Accessibility- How designing accessible websites leads to automat...SEO through Accessibility- How designing accessible websites leads to automat...
SEO through Accessibility- How designing accessible websites leads to automat...
 
12 Phases of Web Development Life Cycle
12 Phases of Web Development Life Cycle12 Phases of Web Development Life Cycle
12 Phases of Web Development Life Cycle
 
Information architecture for websites and intranets
Information architecture for websites and intranetsInformation architecture for websites and intranets
Information architecture for websites and intranets
 
ICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdfICT 9 LESSON 1.pdf
ICT 9 LESSON 1.pdf
 
Essay On The Crawling Module And Web Pages
Essay On The Crawling Module And Web PagesEssay On The Crawling Module And Web Pages
Essay On The Crawling Module And Web Pages
 
MobileStore.pptx
MobileStore.pptxMobileStore.pptx
MobileStore.pptx
 
SharePoint customized code analyzer
SharePoint customized code analyzer SharePoint customized code analyzer
SharePoint customized code analyzer
 
Web Design Process
Web Design ProcessWeb Design Process
Web Design Process
 
Kelly saleh howey_proposal
Kelly saleh howey_proposalKelly saleh howey_proposal
Kelly saleh howey_proposal
 
Basics of Web Design
Basics of Web DesignBasics of Web Design
Basics of Web Design
 
Essay On Web Development Life Cycle
Essay On Web Development Life CycleEssay On Web Development Life Cycle
Essay On Web Development Life Cycle
 
ByteMeCollege High Level Design
ByteMeCollege High Level DesignByteMeCollege High Level Design
ByteMeCollege High Level Design
 
Running Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docx
Running Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docxRunning Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docx
Running Head HUMAN-COMPUTER INTERFACE 1HUMAN-COMPUTER IN.docx
 

Último

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 

Último (20)

UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 

UID BIT Coursework

  • 1. 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. User Interface Design 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. User Interface Design 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
  • 5. User Interface Design 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. User Interface Design 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. User Interface Design 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 Interface Design 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
  • 10. User Interface Design 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. User Interface Design 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. User Interface Design 12 (Website 2) Provide help documentation (Nielson Guideline) 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. Clear text and documentation (Nielson Guideline) 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 Having Emergency Exit (Nielson Guideline) 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” Layout and Content (Nielson Guideline) 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 Use of Font and Size (Nielson Guideline) 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. User Interface Design 13 Provide navigation and sitemap (W3C Standards) 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. User Interface Design 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 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
  • 15. User Interface Design 15 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 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. User Interface Design 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. User Interface Design 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
  • 19. User Interface 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. User Interface Design 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. User Interface Design 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. User Interface Design 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. User Interface Design 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.
  • 25. User Interface Design 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. Provide help documentation (Nielson Guideline) 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! Clear text and documentation (Nielson Guideline) 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) Having Emergency Exit (Nielson Guideline) 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. Please have a look on it! Layout and Content (Nielson Guideline) 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. Use of Font and Size (Nielson Guideline) 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. Please have a look on it!
  • 26. User Interface Design 26 Provide navigation and sitemap (W3C Standards) 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. Please have a look on it! 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. Please have a look on it! Background color Font color and its size 25 pt
  • 27. User Interface Design 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. User Interface Design 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.
  • 30. User Interface Design 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 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 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 5 Clicking on logo takes to home page 1 2 3 4 5 6 Are the links correct? 1 2 3 4 5 7 Search box can find specific information 1 2 3 4 5 8 Key heading and links are clearly described 1 2 3 4 5 9 Layout and Content are well structured 1 2 3 4 5 10 Is the contact information clearly visible? 1 2 3 4 5 11 Is sitemap contains major links 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 Interface Design 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
  • 34. User Interface Design 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. User Interface Design 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]