COIS 12036 Human Computer Interaction (HCI) Project A (Term 2 – 2014)

Total marks: 35 marks
Background
Global Toys, is a sole proprietor business, specialising in selling toys. Their shop lot occupies approximately one acre of floor space and is located in a metropolitan city. By most standards, the shop is huge and customers have difficulty in finding their way around. The owner of the business has contracted you to develop a website providing information about the shop. The website is not an online ordering system. Instead, it is a website to provide more information about the shop layout and the selection of toys it sells. You have been provided with the following initial and technical specifications:

Memo: Website Requirements
From: Global Toys, Senior Management
To: UX Engineering Software R&D Consultants

Specification
Design and develop a website. The idea is to provide information to potential customers visiting Global Toys premises. The goal is to allow potential customers to obtain an overview of the shop layout and to obtain details of the selection of toys offered by the shop.

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

1. Three folders named Board_Games, Lego_Models and RC_Toys. Each folder contains images relating to the different type of toys as indicated by the folder names.
2. A text file Toy_List.txt lists the proper names of the specific toys corresponding to each of the image within each folder. You need to use the proper names as the official description of the toys on your website.
3. A text file Shop_Hours.txt containing the business and opening hours of the shop.
4. Logo.png – an image of the logo of the museum.
5. Floor_Plan.jpg – an image of the shop’s floor plan.
General Requirements
The owner of Global Toys insists that the following requirements must be adhered to:
1. Each webpage of the website must display the shop 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 proper names of the toys. Do not rename the filenames of any of the images.
3. All images of each toy must be presented to potential customers. This can be done within one webpage or distributed across several web pages. The idea is to ensure that potential customers are made aware of the complete selection of toys the shop carries.
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 page providing the opening and business hours. The details are found in the Shop_Hours.txt file.

Example of a Walkthrough Interaction
The customers will be greeted by a welcome message. The floor plan of the shop should be displayed prominently. The customers click on any of the smaller rooms of the shop (yellow rectangles). It should bring up details of the room with corresponding images of the selection of toys indicated by the name of each room. The customer clicks on any of the images of the toys to obtain further information on that image. In addition, if the visitor selects an option to display opening or business hours, a separate page 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.

Deliverables
You are to deliver two reports and prototypes for Project A and
Project B on the respective due dates. That is, the first report for Assignment 2 (Project A) and second report for Assignment 3 (Project B). The reports must be accompanied by prototypes and all resources required for each of the project.
End-of-Memo
Project A: Task

The overall task is divided into two project phases (i.e. two separate, but related projects). It is strongly advised that you read the following project description in conjunction with the description for Project B.

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 HCI 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 requirements, develop a preliminary design of the specified web user interface. Use any combination of HTML5, CSS3 and JavaScript feature for this prototype. At this stage, the prototype is basically a medium to support your initial concept and ideas. For example, the prototype should show where the ‘basic’ button is located; or would it be possible to fit 20 images aesthetically on a single page, etc? The prototype need not be fully functional. At this stage, you only need to demonstrate the initial concept of your interface designs. 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, exclude mobile devices that run 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, PHP, AJAX, Dreamweaver, etc. You are required to demonstrate your knowledge of HTML5, CSS3 and JavaScript independently and without the assistance of templates, automated development and visual design tools.

• Obtain user feedback. Invite 3 – 4 potential users (e.g. friends, family members, classmates, etc.) to provide you with feedback of your prototype (i.e. the initial draft design). These potential users should be a mix of person with computer skills and with little computer skills, so you can get more representative feedback. You should not approach this task haphazardly. 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.

• Recommendation. Analyse the data you have collected from the previous user evaluation and produce a set of recommendation on how you should refine and improve on your initial design. This recommendation will be carried over to the next phase in Project B for implementation.

• Write a report. Produce a report to document the tasks and the outcome of your efforts undertaken for Project A.
•
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. 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) Recommendation.
(4) Conclusion – This is basically a summation, consolidating the main points of the report.
(5) 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.
(6) 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 these are not programming project in themselves. The primary purpose of both Project A and Project B is to ensure that students adopt best practice and adhere closely to HCI principles during the process of designing and developing the interactive user interfaces. Full functionality is not expected from either Project A or Project B. 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. The report should be separated from this folder (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 stand-alone 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 REPORT_A 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_A.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 understand and avoid plagiarism, please read the policies indicated in the following website.

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. (2 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. E.g. Alternate designs have been considered; analysis and evaluation of data are presented, etc. (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)
• Recommendation. (3 marks) 23

Low-fidelity prototype:
• Interface adheres to HCI principles in general and does not break major HCI rules. (4 marks)
• The prototype sufficiently demonstrates the main features of the initial design and its intended purpose. (4 marks)

8
Presentation:
• Report professionally presented. (1 mark)
• Grammar and spelling. (1 mark)
• Written style and expression. (1 mark)
• Overall presentation. (1 mark) 4
Total marks for Project A:
35

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.