Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
User Interface Design
1
Student Name: Myint Oo @ Amirul Hassan
UOG Student Registration ID: 000805763
Coursework Title: Us...
User Interface Design
2
Table of Content
1. Requirement Specification
1.1 Introduction…………………………………………………………………………….….5
1....
User Interface Design
3
4. Development
4.1 Features (Changed/ New)………………………………………………………25-26
4.2 High Level Prototype……………...
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 ...
User Interface Design
6
Website Selection
Website 1 and 2
http://bexton.info/index.html#&panel1-1 http://www.crockhamhill....
User Interface Design
7
The below are some guidelines of Nielson (These guidelines will be used to check usability for the...
User Interface Design
8
User Group
There will be four types of users who will use the website. Depending on the type of us...
User Interface Design
9
Investigation
User Interface Design
10
Evaluation of existing websites with W3C Standards and Nielson Guideline
I am going to evaluate t...
User Interface Design
11
Provide navigation and sitemap (W3C Standards)
Even if the website provides a good navigation, th...
User Interface Design
12
(Website 2)
Provide help documentation (Nielson Guideline)
Although the website has help document...
User Interface Design
13
Provide navigation and sitemap (W3C Standards)
The navigation bar seems missing due to complex us...
User Interface Design
14
Accessibility and Usability Checklist of the current websites
Websites 1
This checklist is drawn ...
User Interface Design
15
9 Key heading and links are
clearly described
1 2 3 4 5
10 Layout and Content are well
structured...
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 t...
User Interface Design
17
Mobile and Tablet
Why website for mobile is important
According to research, more than 20% of the...
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 i...
User Interface Design
20
Design Issues
Issues 1
Small logo
Search box is put at the middle of the navigation bar
Sub navig...
User Interface Design
21
Low Fidelity Prototype (2)
Primary School
Logo
Social network
links
Search Box
Key Navigation
Sub...
User Interface Design
22
Issue 2
Big font is used for sub navigation menus
Quick links at the left side of the body under ...
User Interface Design
23
Evaluation of the Low Fidelity Prototype (Website)
First of all, the first prototype is drawn bas...
User Interface Design
24
Development
User Interface Design
25
Changed, Removed and Added Features
There are many features and functions I changed, removed, add...
User Interface Design
26
Provide navigation and sitemap (W3C Standards)
The navigation of the new website is put horizonta...
User Interface Design
27
High Fidelity Prototype (Home Page and News and Information Page)
Evaluation of High Fidelity Pro...
User Interface Design
28
High Fidelity Prototype Mobile Prototype
As I have not enough time for developing Mobile applicat...
User Interface Design
29
Testing
User Interface Design
30
Testing
This checklist is drawn according to the selected guidelines, W3C standards and Neilson
g...
User Interface Design
31
User Testing
High Fidelity Prototype (One)
This has been tested by one of my family members for t...
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 requireme...
User Interface Design
35
Reference
Trento Moss, 2013. WCAG 2.0: The new W3C accessibility guidelines. Available from
<http...
Upcoming SlideShare
Loading in …5
×

UID BIT Coursework

3,629 views

Published on

User Interface Design (BIT Coursework)

Published in: Technology, Design
  • How we discovered the real reason nice guys don't get laid, and a simple "fix" that allows you to gain the upper hand with a girl... without changing your personality or pretending to be someone you're not. learn more...  http://ishbv.com/unlockher/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

UID BIT Coursework

  1. 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. 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. 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
  4. 4. User Interface Design 4 Introduction
  5. 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. 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. 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. 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
  9. 9. User Interface Design 9 Investigation
  10. 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. 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. 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. 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. 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. 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. 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. 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
  18. 18. User Interface Design 18 Design
  19. 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. 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. 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. 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. 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.
  24. 24. User Interface Design 24 Development
  25. 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. 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. 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. 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.
  29. 29. User Interface Design 29 Testing
  30. 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. 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
  32. 32. User Interface Design 32 Conclusion
  33. 33. User Interface Design 33 Conclusion Final Product
  34. 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. 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]

×