COIT 20241 User Interface Development (UID) Project (Term 1 – 2014)

Total marks: 40 marks

Background

The Robot Expo, is a government sponsored museum. They have contracted you to develop a web based information system (online kiosk). You have been provided with the following initial process and technical specifications:

Memo: Website Requirements
From: Robot Expo, Senior Management
To : WIMP Engineering R&D Consultants

Specification
Design and develop a web based information menu (similar to an online kiosk). The idea is to provide information to tourists visiting the museum. The goal is to allow visitors to obtain an overview of the museum layout and to find details of exhibits (i.e. each type of robots) they would like to visit.

Resources
Resources such as images and details of opening hours can be found in ProResource.ZIP. The content of the ZIP file is:

1. Four folders named Domestic Robots, Industrial Robots, Military Robots and Educational Robotics. Each folder contain images relating to the different categories of robots.
2. A text file Robot_List.txt contain the names of the robots corresponding to each of the image from each folder. You need to use these names as the official description of the robots on your web site.
3. A text file Time_Fees.txt containing the time-table of opening hours and entrance fees to the museum.
4. Logo.png – an image of the logo of the museum.

General Requirements
The managers of Robot Expo insist that the following requirements must be adhered to:

1. Each webpage of the website must display the Robot Expo logo. You can edit this image, but the font style, type and colour must remain as in the original image.
2. Do not change the description of the robots. Do not rename the filenames of any of the images.
3. All images of each robot must be presented to the visitor. This can be done within one webpage or distributed across several web pages. The idea is to ensure that visitors are made aware of the complete selection of items available for them to visit.
4. The images are to be used as it is. You can resize the images retaining the original aspect ratio, but do not crop or edit (e.g. recolour, touch up, sharpen, etc.) or rename the images in any way. 5. Generate a separate pop-up page providing the opening hours and entrance fees. The details are found in the Time_Fees.txt file.
6. Each season, the Robot Expo museum holds a specialised collection on display for a limited time. This special collection is the
Educational Robotics exhibit. Your webpage design should provide prominence to this collection, ensuring that the menu selection should differentiate this collection from the other three collections (i.e. Domestic Robots, Industrial Robots, and Military Robots).

Example of a Walkthrough

A visitor walks up to the information kiosk. The visitor will be greeted by a welcome message and the following layout of the floor plan of the Robot Expo museum. The visitor clicks on any of the exhibition hall (3x circle and 1x larger circle). It should bring up details of the specific hall selected with relevant type of robots. The visitor clicks on any of the images of the robots to obtain further information on that image. In addition, if the visitor selects an option to display opening hours and/or entrance fees, a separate page (or window) should appear to provide this information. Note this is the basic requirement, it is up to you to implement other details
e.g. instructions, navigational control, etc.

Task

You are to complete the following task in the order given:

• Carry out user and task analysis. You must have a clear view of the users of this system. Consider that not everyone is comfortable with the technology. For example, you need to deal with user variation such as age or language skills. Perform a user analysis, i.e. characterise the users and identify your potential users. Clearly identify the tasks the potential users perform, and in what order. These are all user interface design considerations that you should take into account.

• Propose design and system requirements. Consolidate your findings from your user and task analysis with the given specifications into a design and system requirements. For example, the number of items to display, the screen size, what colours, how many different screens to display etc.

• Develop a low-fidelity prototype. Based on the above requirements, develop a preliminary design of the web user interface. At this stage, the prototype is basically a medium to support your initial concept and ideas. For example, the prototype should show where the ‘Business Hour’ button is located or would it be possible to fit 20 images aesthetically on a single page, etc? You can use paper-based (e.g. paper and colour pencils etc.) or screen based (e.g. painting software) to sketch your design. Lowfidelity prototyping is mainly to allow designers to produce alternative designs expediently without having to go into depth or functionality. Think of low-fidelity prototyping as the 5D tool for: design, draft, decide, discard and do-over. Keep a sample of your designs for your report. Once you have several alternate paper based or screen based prototypes, select the most satisfactory design and proceed with the following step.

• Obtain user feedback. Invite 3 – 4 potential users (e.g. friends, family members, classmates, etc.) to provide you with feedback of your low-fidelity prototype (i.e. the initial draft design). Carry out the evaluation according to prescribed methods as in Chapter 4 of your textbook (Shneiderman & Plaisant, 2010) or from other scholarly source. Use appropriate survey techniques. Analyse the data you have collected from the user evaluation and produce a set of recommendation on how you should refine and improve on your initial design.

• Develop high-fidelity prototype. Based on the user test feedback and recommendations from the previous phase, develop a high-fidelity prototype (i.e. reasonably complete version) for the Robot Expo information kiosk. Use any combination of HTML5, CSS3 and JavaScript feature for this prototype. Remember to indicate which browser (i.e. IE, Firefox, Safari, Chrome, etc.) you are targeting as the main working platform. For the purpose of this project, please exclude mobile devices that runs on fragmented or closed-system technology, such as Android, Apple iOS and Nook. Do not use Rapid Application Prototyping (RAD) tools or any other type of scripting languages or services, eg. Python, Lua, AJAX, Dreamweaver, etc. You are required to demonstrate your knowledge of HTML5, CSS3 and JavaScript independently and without the assistance of automated development and visual design tools.

• Carry out user acceptance test. Devise three walkthrough scenarios. The scenarios should be sufficiently complex to test the features and functionality of your website. Example of a Scenario: Visitor initiates session, clicks on Robots exhibition hall, looks up two industrial robots, exits and clicks on military robots and looks up four robots. Then decides to look up the opening hours. Then goes back to Robots exhibition hall and looks up the images of three more robots on educational robotics. Then finally exits. Invite 3 to 4 potential users (i.e. the same group of users from the previous test is acceptable) to play the role of users. Ask each of the users to perform all the walkthroughs you have devised. Apply appropriate techniques to determine how the website performs under these test conditions. Systematically collect data on the user performance. For example, how long did each of the users take to complete each of the scenarios? Did the users find the interface easy or challenging to use? Does the interface allow users to change their minds? Etc. Refer to your textbook for more detailed and appropriate parameters that suits your requirements.

• Write a report. Produce a report to document the tasks and the outcome of your efforts undertaken for the project. Remember, this report is intended for your employers. You need to document and support the viability of your website – that is, to convince your employer that your webpage design is satisfactory and that it meets user acceptance test.

Format of Report

For the purpose of this project you are assumed to be a professional. As such, you should attempt at your best to reflect this quality in the preparation of the report. As a minimum, the report should contain the following:

(1) Introduction – State the purpose and objectives of the report.
(2) Content – This is the main section where you should document the various stages and outcome of your activities. Do not include raw or unprocessed data (e.g. original questionnaires, low-fidelity prototype sketches etc.). You need to analyse, evaluate and summarise the outcome of each of the task. If you really need to include critical or important raw data, then do so by appending them to an appendix at the end of the report. Keep a record of your raw data. If required, your instructor or marker may request that you provide them with a copy.
(3) Conclusion – This is basically a summation, consolidating the main points of the report.
(4) There is no minimum or maximum limit to the number of words required in this report. However, the length of your report must be within reason and of adequate length to succinctly support the complete account of tasks you have undertaken.
(5) Figures or diagrams can be added as required.

Page formatting: A4 size paper, 2.5cm margins on all sides, single-sided, Time Romans or New Time Romans font, 12pt font size, DOC or DOCX format.

Learning Objective

Note that this is not a programming project in itself. The primary purpose of the project is to ensure that students adopt best practice and adhere closely to user interface design and development principles during the process of designing and developing the interactive user interfaces. Full functionality is not expected. For example, knowledge of database backend servers and web servers are not required in this course.

What to Submit

You should submit two items for assessment. These are:

1. All necessary files, images, scripts, coding and resources should reside in a single main folder. Do not include the report (see item 2 below). It is up to you to organise the files and sub-folders within the main folder. Ensure that all your scripts and coding is standalone and portable. That is, your marker or instructor should be able to run your scripts from the type of browser you have specified by clicking on the main.html or main.htm startup file. Use only HTML5, CSS3 or JavaScript to develop your website. The web browser you specified should render your markup and scripts without problems.
2. The report should be named PROJRPT_UID and saved as a single file in DOC or DOCX format. This file should be located outside the code folder.

Copy item 1 and 2 items into a single PROJECT_UID.ZIP file. Submit this single ZIP file through your course website submission portal.

PLAGIARISM
CQUniversity regards plagiarism as a serious offence
and it can have serious consequences for you as a student. To avoid plagiarism, you must acknowledge the source of the ideas through an academically acceptable system of referencing.

Read more:
http://www.cqu.edu.au/about-us/service-andfacilities/referencing/what-is-plagarism
Assessment Criteria

The following criteria will be used to assess your assignment:

Criteria Marks

Task as documented in report:
• Overview and description. (3 marks)
• User and task analysis are appropriate and sufficiently in-depth. (3 marks) o Evidence that this task have been carried out. E.g. Alternate user tasks have been considered; analysis and evaluation of data are presented, etc. (3 marks)
• Design and system requirements. (3 marks) o Evidence that this task have been carried out; analysis and evaluation of data are presented, etc. (3 marks)
• Low-fidelity prototype. (3 marks) o Evidence that alternate designs have been considered; evidence that low-fidelity prototypes have been fully utilised
for the design process. (3 marks)
• User Testing and Feedback. (3 marks) o Evidence that this task have been carried out. E.g. Users were involved; analysis and evaluation of data are presented, etc. (3 marks)
o Recommendation for improvement. (3 marks)
• User acceptance test are appropriate and sufficiently in-depth. (3 marks) o Walkthrough scenarios are appropriate and sufficiently complex. (3 mark)
o Results for performance of the webpage. (3 marks) o Results for the test user performance. (3 marks) o Evidence that this task have been carried out with users. E.g.
analysis and evaluation of data are presented, etc. (3 marks)
45

High-fidelity prototype:
• Interface adheres to UID principles in does not break major UID rules. (5 marks)
• The prototype sufficiently demonstrates the functionality of the webpage and its intended purpose. (5 marks)
• The final prototype sufficiently demonstrate the developer’s skills in web development tools (i.e. HTML5, CSS3 and JavaScript). (9 marks)
• Final usability and expert review. The instructor and/or marker will carry out a final usability and expert review of the website based on:
o Overall interface design, e.g. interaction experience, the design is appropriate for intended users, and use of good metaphors. (6 marks) 39
o Aesthetics, innovation, creativity, impression etc. (4 marks) o Walkthrough based on the walkthrough scenario you devised. (6 marks)
o Expert walkthrough. (4 marks)

Presentation:
• Report professionally presented. (4 marks)
• Grammar and spelling. (4 marks)
• Written style and expression. (4 marks)
• Overall presentation. (4 marks) 16
Total marks for Project
(To to be scaled to 40% of actual marks for this course) 100

Marker’s Guideline

• To obtain 76-100% of the marks allocated for a specific section of the assessment, the student’s work is expected to demonstrate a very high level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course.

• To obtain 51-75% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a high level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course.

• To obtain 26-50% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a sound level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course.

• To obtain 1-25% of the marks allocated for a specific section of the assessment, the student’s work typically demonstrate a limited level of knowledge and understanding of concepts, facts and procedures, and application of knowledge within the scope of the course.

• 0 marks will be allocated for a specific section of the assessment, where an erroneous or no attempt has been made by the student.

--- End ---