COIS 12036 Human Computer Interaction (HCI)
Project B (Term 1 – 2018)
Total marks: 45 marks
Project B: 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 A.
You are to complete the following task in the order given:
•
Develop high-fidelity prototype. Based on the user test feedback and recommendations
that you proposed in the previous phase (Project A), develop a high-fidelity prototype
(i.e. reasonably complete version) for the website. Use any combination of HTML5 and
CSS3. 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, WordPress
etc.
•
Carry out user acceptance test. Devise two walkthrough scenarios. For example,
“Instruct the user to visit the Kites section, look up two items, exit and select
Quadcopers section and look up four other items.” Apply this walkthrough scenario to
your test subjects. Invite 3 to 4 potential users (e.g. friends, family members, classmates
should be fine, etc.) to play the role of users. You do not need to provide their names.
Ask each of the users to perform all the walkthrough scenarios 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.
•
Identify features. Identify any one or two features of the website that you think
deserves particular attention. An example of a feature is, draw attention to interface
design elements that are particularly innovative, e.g. visitors can call up a mini
navigational ‘menu bar’ from any page.
1
•
Recommendation. From the outcome of the user acceptance test, provide
recommendations on how the high-fidelity prototype can be improved. Assertions made
in your recommendation need to be supported by the test results you have carried out
earlier.
•
Write a report. Produce a report to document the tasks and the outcome of your efforts
undertaken for Project B. 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 is performing as intended.
Format of Report
As you are performing the tasks prescribed above, you will need to document every step of
your activity (i.e. write up what you have done). These pieces of information will be
consolidated into a 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 your activities. You
should document the design principles you have adhered to in the development of your
website. You need to show the relationship of the interface design principles relating to
your webpage.
(3) User acceptance test. Do not include raw or unprocessed data. Summarise your findings.
Include only the analysis, evaluation, summarization and outcome of the acceptance
test here. 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.
(4) Features.
(5) Recommendation.
(6) Conclusion – This is basically a summation, consolidating the main points of the report.
(7) 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.
(8) 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.
2
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. This
process is to be fully documented in your report. 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
PROJECT_B.ZIP 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 and
CSS3 to develop your website. The web browser you specified should render your
markup and scripts without problems.
2. The report should be named REPORT_B and saved as a single file in DOC or DOCX
format. This file should be located outside the ZIP folder.
Submit (1) PROJECT_B.ZIP and (2) REPORT_B.DOCX as separate files. That is, submit ONE ZIP
file and ONE DOCX file. Both need to be separate items when you submit through the online
submission portal.
PLAGIARISM
CQUniversity regards plagiarism as a serious offence and it can
have serious consequences for you as a student. To avoid
plagiarism, please read:
https://www.cqu.edu.au/student-life/services-and-facilities/referencing/what-is-plagiarism
3
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 acceptance test are appropriate and sufficiently in-depth. (3 marks)
o Walkthrough scenarios are appropriate and sufficiently complex. (1
mark)
o Results for the test user performance. (6 marks)
o Evidence that this task have been carried out with users. E.g.
analysis and evaluation of data are presented, etc. (3 marks)
21
•
Features. ( 3 marks)
o Features are appropriate and suitable for the website.
o Innovative.
•
Recommendation. (3 marks)
High-fidelity prototype:
• Interface adheres to HCI principles in does not break major HCI rules. (6
marks)
• The final prototype sufficiently demonstrate the developer’s skills in web
development tools (i.e. HTML5 and CSS3 (or JavaScript, if appropriate)). Eg.
webpages can be rendered to display elements to provide an idea of the
overall design. (4 marks)
• Final 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. the design is appropriate for intended
users, and use of good metaphors. (3 marks)
o Aesthetics, innovation, creativity, impression etc. (5 marks)
o Walkthrough based on the walkthrough scenario you devised
above. (2 marks)
Presentation:
• Report professionally presented. (2 marks)
• Written style, expression and overall presentation. (2 marks)
Total marks for Project B:
4
20
4
45
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 ---
5
Running head: HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
1. Introduction
This project is undertaken to design and develop a website for “Flying Hobbies” company to
help it provide the right information to customers who want to visit its shop. It will enable the
company achieves one of its main goals of giving the customers a general overview of the
shop layout and also find details of items available from the shop. The website will not be an
online shopping shop but an information website that will provide information to customers
who want to visit the shop in person.
1.1 Purpose
The purpose of this document is to provide an overall description of the Project. It includes
what was done in each step. In addition, this document will also describe the work
experience gained from this project. The whole description of the design phase will be
included in the document.
1.2 Objective
In addition to adding programming skills to the students. The main objective of this project
is to help the students adopt and adhere to the best practices of HCI principles. To enhance
this, the project gives the students a chance to learn and use HCI principles during their
process of designing and developing interactive user interfaces. The final deliverable will
be in the form of a prototype and not a fully functional website that has both the front and
backend. For this case, the project only concentrates on the front end which must adhere to
HCI principles for it to add value to the company. This was the give the students a great
HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
experience of working with prototypes which are easier to change unlike the changing the
whole project.
2. Content
Task analysis is one of the most important methods brought by professionals to test the usability
of an application. It involves performing steps aimed at accomplishing a certain goal. This
method decomposes people’s tasks and makes them understand their procedures better and
enables them to receive computer help for their task.
For this case, a task analysis was
conducted using different types of potential users i.e. users with mixed computer skills (little,
intermediate, and advanced skills). The main aim was to test how different users will be doing
their task using the interface. The method used for this task was direct observation, to determine
how different people will be interacting with the interface.
The main goal of this analysis was to observe ease of users between the web pages and search for
information. Below were some of the sub-goals:
1. Give the customers an overview of the shop layout
2. Allow the customers to find details of items in the shop including
a. Quadcopter
b. Toy Planes
c. Kites
3. Allow the user to find information about the opening and closing hours of the shop.
4. And finally, provide easy navigation for the user to move to any page regardless of where are
on the website.
View information about
Flying Hobbies shop
Open the website
HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
The above diagram was drawn to show the flow of information in the website between different
pages. This diagram shows how the tasks will be made easier for the users in that one will just
need to click one button/link to be taken to the required information. The user will not have to
navigate through several links to find information. The vertical navigation bar will be used at the
top of the website where the user just needs to click on a link that will take them to information
related to that link. Each link will be labeled as per the information it provides. With all these,
the website will be very easy and simple to use for all types of users regardless of their levels of
computer skills, age, or language skills. It will require only the user to be able to read and click
on links. Also, the website will eliminate unnecessary information as much as possible as a way
of reducing complexity and improving usability, accessibility, in that, users will only be provided
with the information they need (Yablonski, 2015).
Proposed design and system requirements
a. Vertical navigation for ease navigation between web pages
b. Screen size: height(automatic), width (75%). This will ensure that information occupies
much of the screen space hence eliminating unnecessary blank spaces (Yablonski, 2015).
c. Colors used: light-green background color for the navigation and footer and light-blue
background color for the header. Both will use white font colors which ensures the
visibility of information is not affected (O'GRADY, 2015). In the content page where
images and their descriptions will be used, a white background color and black font color
HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
hence ensuring all the information is visible at ease even to those users with short eye
sights/visions such as the old aged people.
d. The Number of items to display: the items displayed per page is one image. For pages
with multiple images, the users will be scrolling down to view each image after the other.
This ensures that all the images are large enough for users to view without straining their
eyes.
e. Visibility on browsers: the target browsers are Mozilla, Google Chrome, Opera, and
Safari browser.
The website will contain a maximum of four pages and three sublevels. Below is my design
storyboard to illustrate the proposed design of the website.
Homepage
HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
Quadcopters page
Toy Planes Page
HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
Kites Page
Business Hours page
HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
3. Recommendation
Having analyzed all the researched information and users’ feedbacks, I would recommend
using a simple website with non-framed pages, images, navigation bar with roll effects and
sliding images using JavaScript or jQuery technology. In addition, all the controls i.e. font –
size colors should be done using Cascading Style Sheet so as to obtain a consistent look and
feel website.
4. Conclusion
With the rapid growth of Web development and websites demand, it is essential to always
come up with a good page design for your website. Creating a bad design on your website
will have many negative impacts including loss of visitors which can result in loss of
business (Metz, 2017). Therefore, each website is expected to have a good page layout which
will meet the basic requirements of a good page design. This includes the organization of
fonts, color contrasts, font selections, page size, styles of a page, consistency, and graphics
HUMAN COMPUTER INTERACTION (HCI) PROJECT REPORT
used. It is always important to identify the audience so as to analyze their needs on the
website (Gaines, 2017). Though it is very difficult to come up with a web design that will be
suitable for all the users, it is good to have a design that will be appropriate for the most
audience. Adhering to HCI design principles will result in good page designs that will bring
more hits to the website as a result of increased accessibility and hence increasing the
business profits.
References
Danino, N. (2011). Human-Computer Interaction and Your Site. Retrieved from sitepoint:
https://www.sitepoint.com/computer-interaction-site/
Gaines, K. (2017). Designing for Your Target Audience . Retrieved from webdesignerdepot:
https://www.webdesignerdepot.com/2011/12/designing-for-your-target-audience/
Metz, T. (2017). The Real Effects Of Bad Web Design. Retrieved from usabilitygeek:
https://usabilitygeek.com/real-effects-bad-web-design/
O'GRADY, N. (2015). Web design 101: color theory. Retrieved from webflow:
https://webflow.com/blog/web-design-101-color-theory
Yablonski, J. (2015). Reducing Design Complexity. Retrieved from jonyablonski:
https://jonyablonski.com/articles/2016/reducing-design-complexity/
COIS 12036 PROJECT A - Marking Sheet v2
Task as Documented in report:
1. Overview and description.
(2 marks)
2. User and task analysis are appropriate and sufficiently in-depth.
o User and task analysis are appropriate and sufficiently in-depth.
That is, present your evidence that this task have been carried
out.
(6 marks)
3. Design and system requirements.
o Present your evidence that this task have been carried out. E.g.
Different designs have been considered or mentioned; analysis
and evaluation of data are presented, etc.
(6 marks)
4. User Testing and Feedback.
o Present your evidence that this task have been carried out. E.g.
Users were involved; analysis and evaluation of data are
presented, etc.
5. Recommendation as a result of the above tests and results.
(6 marks)
(3 marks)
Marker comments (or see in-text comments):
User Testing and Feedback. Not done
Low-fidelity prototype:
1. Adheres to HCI principles in general and doesn't break major HCI rules.
2. The prototype sufficiently demonstrates the main features of the initial
design and its intended purpose.
Marker comments (or see in-text comments):
(4 marks)
(4 marks)
Presentation:
1. Report professionally presented.
2. Written style, expression and overall presentation.
Marker comments (or see in-text comments):
Summary / Overall Comments:
End of Marksheet - COIS 12036
(2 marks)
(2 marks)
Item Marks
1.50
3.00
4.00
0.50
1.50
Section Total:
10.50 (out of 23 marks)
4.00
4.00
Section Total:
8.00 (out of 8 marks)
1.50
1.50
Section Total:
All Sect. Total:
Penalty:
Final Total:
3.00 (out of 4 marks)
21.50
0.00
----→
21.50 (out of 35 marks)
Reason:
COIS 12036 - Project B Marking Sheet
Student name:
Student number:
Campus:
Required only if the filename of this marking sheet
does not show the student's name or ID number.
Task as Documented in report:
1. Overview and description.
(2 marks)
2. User acceptance test are appropriate and sufficiently in-depth.
o Walkthrough scenarios are appropriate and sufficiently complex.
o Results for the test user performance.
o Evidence that this task have been carried out with users. E.g.
analysis and evaluation of data are presented, etc.
(3 marks)
(1 mark)
(6 marks)
(3 marks)
3. Features.
o Evidence that features works as described.
o Innovative.
(3 marks)
4. Recommendation.
(3 marks)
Marker comments (or see in-text comments):
High-fidelity prototype:
1. Interface adheres to HCI principles in does not break major HCI rules.
2. The final prototype sufficiently demonstrate the developer’s skills in web
development tools (i.e. HTML5, CSS3 and JavaScript).
3. 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. the design is appropriate for
intended users, and use of good metaphors.
o Aesthetics, innovation, creativity, impression etc.
o Walkthrough based on the walkthrough scenario you devised.
Marker comments (or see in-text comments):
(6 marks)
(4 marks)
(3 marks)
(5 marks)
(2 marks)
Presentation:
1. Report professionally presented.
2. Written style, expression and overall presentation.
Marker comments (or see in-text comments):
Summary / Overall Comments:
End of Marksheet - COIS 12036
(2 mark)
(2 mark)
filename of this marking sheet
student's name or ID number.
Item Marks
0.00
0.00
0.00
0.00
0.00
0.00
0.00
Section Total:
0.00 (out of 21 marks)
0.00
0.00
0.00
0.00
0.00
Section Total:
0.00 (out of 20 marks)
0.00
0.00
Section Total:
0.00 (out of 4 marks)
All Sect. Total:
0.00
Penalty:
0.00
Final Total:
0.00 (out of 45 marks)
----→
Reason:
Purchase answer to see full
attachment