COIS 12036 Project A: Website Design for Global Toys - HCI Application

This project focuses on designing a website for Global Toys, a physical store, aiming to provide information to customers. The project begins with an introduction to the concept and purpose of the website, followed by user and task analysis to understand the target audience and their needs. It then outlines the system requirements and design considerations, including navigation, content presentation, and responsiveness. The core of the project involves the creation of low-fidelity prototypes to visualize the website's structure and user interface. User feedback is collected and analyzed to evaluate the prototype's usability and identify areas for improvement. The project concludes with a summary of the findings and recommendations for enhancing user interaction and website effectiveness, including the importance of clear text, organizational details, and visual elements. The report also provides a bibliography of relevant sources.

Running head: HUMAN COMPUTER INTERACTION
Human Computer Interaction
Name of the Student
Name of the University
Author’s name:

1HUMAN COMPUTER INTERACTION
Table of Contents
Introduction:....................................................................................................................................2
User and Task Analysis:..................................................................................................................3
Design and System Requirements:..................................................................................................4
Low-Fidelity Prototype:...................................................................................................................5
User Feedback:................................................................................................................................8
Conclusion:....................................................................................................................................10
Recommendations:........................................................................................................................10
Bibliography:.................................................................................................................................12

2HUMAN COMPUTER INTERACTION
Introduction:
The website can be considered as the collection of various resources like multimedia
content, web pages, text contents and other resources. A website typically present all these
elements in a browser environment in a structured way. The purpose of a website is sharing
organization value and business to the visitors in the most effective way. A website can be
categorized into two types such as static and dynamic. The static one just renders the user side of
code into the browser. However, the dynamic website runs various scripts and user requests into
the server.
Global Toys, at present, runs their business through the physical store. They want to
develop a website which they can use to showcase their products. The proposed website will be
static. In order to gather and analyse the website requirement, it is essential to completing the
user and task evaluation. After this evaluation, the system requirements can be generated. These
requirements will be stored in the form of texts. Based on those requirements, the first design of
the website will be created. These designs will be mock-up of the actual website. The low-
fidelity prototypes or mock-ups are great tools for capturing user interactions of the system.
The purpose of the report is to gather ample amount of data on the proposed website of
Global Toys and evaluate those data to generate the first designs. The report also aims to show
the feedback of three to four participants against the developed prototypes. At the final section,
the reports aims to provide adequate recommendations so that user interaction of the system can
be better.

3HUMAN COMPUTER INTERACTION
User and Task Analysis:
The target audience of the website are the parents and people of all ages who wants to
buy toys for kids. People with various backgrounds can visit the page. Different language
speaking visiting the website will not be a rate scenario. The website must be simple enough so
that people of various website interaction experience will be able to easily access its pages. The
old people are tend to face difficulties while accessing an online application. That is why the
website must be able to present purpose of every section effectively. The old people are tend to
read instructions before completing any task. The images must be clear and easily
understandable. Texts are the heart of any website. No matter how clear the images are, if a
website cannot share its purpose its purpose through text, the user cannot relate to that website.
That is why it is important that website includes easily readable and understandable texts. The
website should prevent using excessive use of information in a single page. That is why it must
have different products into different pages.
People will be visiting the website rarely (only when they need some toys to buy from a
store) and when they visit the website they must recognize it. This means that the colour
combination, multimedia presentation, element positioning and other things must be unique in
the website. Consistency can be a key factor in achieving this objective. If all the pages of the
website use the same design patterns then user can easily recognize the website. The design
patterns can also be the identifying factor of the website. Moreover, the user can comfortably
navigate through all the website pages easily. The website must have some shortcuts that
frequent users can use. Taken as an example, an image map can be a great way to implement
shortcut. The header of the home page can have an image which shows different types of toys the
organization sells. The user will click on any of the type and the website will redirect the user to

4HUMAN COMPUTER INTERACTION
that page. As inexperienced users need constant feedback against their request, the website must
be able to response to every action of the user. The user must be able to reverse an action easily.
Such as if a user unintentionally clicked on a link then he must be able to either come back to
previous page or redirect to the intended page easily.
Design and System Requirements:
The main system requirement is displaying various HTML elements in the most efficient
and effective way. Navigation is a key system requirement. The navigation panel or main menu
must be placed at the top of the page so that user can easily access it. As the user may need to
access it while at the bottom of the page, navigation links at the footer is also important. The next
thing is the image of the store. In the next section, the website must share some valuable
information on Global Toys so that user can relate to the organization. A short section which
showcases some of the products from each category will make the user confident about what
kind of product they can buy from this store. As the website is for sharing information of the
organization, sharing the timing of opening and business hours is very crucial requirement.
Product showcasing is the next important requirement of the website. Each product sold
by the store must be available in the website. In order to increase the usability of the website,
showcasing different category of products in different pages is important. These pages must be
accessible easily. One to make it happen is drop down menu. If the user hover over the product
menu item then all the links to the different categories will appear.
Responsiveness is a big deal in website development. The users are prone to access
websites from their mobile devices. That is why the website scale its screen size based on screen
size of the device. The website can experience change in presentation of elements because of in

5HUMAN COMPUTER INTERACTION
small screens, the website must provide information in a compact. It must use as less white space
as possible. Using black colored text over the light background increase the readability of the
text. The texts must be at least 16px of font size. The important texts will be bold and at least 3px
more font size than adjacent texts. There should be at least five pages in the website such as one
home page, three product page, one opening and business hour page and one about us page.
Low-Fidelity Prototype:
Figure 1: Home Page of Global Toys
(Source: Created by Author)

6HUMAN COMPUTER INTERACTION
Figure 2: Product Category Page of Global Toys
(Source: Created by Author)

7HUMAN COMPUTER INTERACTION
Figure 3: About Us Page of Global Toys
(Source: Created by Author)

8HUMAN COMPUTER INTERACTION
Figure 4: Opening and Business Hours Page of Global Toys
(Source: Created by Author)
User Feedback:
Participant 1: The name of the first person is John Adler.
i. How likely is it that you would recommend this website to family member or
friend or colleague?  7
ii. Overall, how satisfied or dissatisfied are you with our website?  Somewhat
satisfied

9HUMAN COMPUTER INTERACTION
iii. Which word would you use to describe our website?  Reliable
iv. How well our website meets your needs?  Somewhat well
v. How would you rate the interaction quality of the website?  Neither low nor
high
vi. How would you rate the value for time of the website?  Average
vii. What would you like to give as feedback?  I liked the design pattern but the
website does not have much textual information. I had difficulties in
understanding the purpose of the website
Participant 2: The name of the second person is Emma Watson.
i. How likely is it that you would recommend this website to family member or
friend or colleague?  5
ii. Overall, how satisfied or dissatisfied are you with our website?  Somewhat
dissatisfied
iii. Which word would you use to describe our website?  Ineffective
iv. How well our website meets your needs?  Not so well
v. How would you rate the interaction quality of the website?  Low quality
vi. How would you rate the value for time of the website?  Average
vii. What would you like to give as feedback?  I could not really understood the
purpose of the website. It felt like website is for purchase but does not have that
option
Participant 3: The name of the second person is Elvis Cloyed.

10HUMAN COMPUTER INTERACTION
i. How likely is it that you would recommend this website to family member or
friend or colleague?  8
ii. Overall, how satisfied or dissatisfied are you with our website?  Very satisfied
iii. Which word would you use to describe our website?  Effective
iv. How well our website meets your needs?  Extremely well
v. How would you rate the interaction quality of the website?  High quality
vi. How would you rate the value for time of the website?  Excellent
vii. What would you like to give as feedback?  Including a menu that I can access
from anywhere in the page can be extremely helpful
Conclusion:
From the above study it can be concluded that the proposed website design is effective
enough to meet organization needs. In terms of colour combination, the color combination used
in the website must be contrasting. The background color of the website must be light and text
colors should be dark. The website can have this information in the home page or have a separate
page for showcasing this information. Including the address of the store is equally important. The
image has two purpose such as showing the layout of the actual physical store and shortcuts to
different product categories.
Recommendations:
i. Adequate Amount of Text: The website must include more text so that user can
easily understand the purpose of the elements. Each link must have proper name
so that user can understand which information they can access by clicking that
link

11HUMAN COMPUTER INTERACTION
ii. More Information on Organization: As the website is for promoting the physical
store, the website must be able to share the organizational details with the users
properly. If the users do not know about the store, they will not physically travel
to the shop to buy toys.

12HUMAN COMPUTER INTERACTION
Bibliography:
Bakker, S. and Niemantsverdriet, K., 2016. The interaction-attention continuum: considering
various levels of human attention in interaction design. International Journal of Design, 10(2),
pp.1-14.
Wurhofer, D., Fuchsberger, V., Meneweger, T., Moser, C. and Tscheligi, M., 2015, June.
Insights from user experience research in the factory: What to consider in interaction design.
In IFIP Working Conference on Human Work Interaction Design (pp. 39-56). Springer, Cham.
Pinhanez, C., 2017. Computer Interfaces to Organizations: Perspectives on Borg-Human
Interaction Design. arXiv preprint arXiv:1712.03012.
Lopes, A., Marques, A.B., Barbosa, S.D.J. and Conte, T., 2015, April. Evaluating HCI Design
with Interaction Modeling and Mockups. In Proceedings of the 17th International Conference
on Enterprise Information Systems (pp. 79-87).
Hibbeln, M.T., Jenkins, J.L., Schneider, C., Valacich, J. and Weinmann, M., 2017. How is your
user feeling? Inferring emotion through human-computer interaction devices. Mis
Quarterly, 41(1), pp.1-21.
Chen, L. and Sass, L., 2016. Fresh Press Modeler: A generative system for physically based low
fidelity prototyping. Computers & Graphics, 54, pp.157-165.
Monteiro-Guerra, F., Rivera-Romero, O., Mylonopoulou, V., Signorelli, G.R., Zambrana, F. and
Fernandez-Luque, L., 2017, June. The design of a mobile app for promotion of physical activity
and self-management in prostate cancer survivors: personas, feature ideation and low-fidelity

13HUMAN COMPUTER INTERACTION
prototyping. In 2017 IEEE 30th International Symposium on Computer-Based Medical Systems
(CBMS) (pp. 761-766). IEEE.
Rottermanner, G., Wagner, M., Kalteis, M., Iber, M., Judmaier, P., Aigner, W., Settgast, V. and
Eggeling, E., 2018. Low-Fidelity Prototyping for the Air Traffic Control Domain. Mensch und
Computer 2018-Workshopband.
Alnasser, A., Alnabit, N. and Alanazi, W., 2017. Usability Evaluation of Prototypes Designed for
a Saudi University Website. International Journal of Computing & Information Sciences, 13(1),
p.15.
Boiano, S., Borda, A. and Gaia, G., 2019. Participatory Innovation and Prototyping in the
Cultural Sector: A case study. Proceedings of EVA London 2019, pp.18-26.
Peña, E. and Dobson, T., 2015. Glass, Paper, Scissors: Investigating the Metaphors of the Glass
Cast Through Paper Prototyping. Scholarly and Research Communication, 6(2).
Belay, E.G., McCrickard, D.S. and Besufekad, S.A., 2016, July. Mobile user interaction
development for low-literacy trends and recurrent design problems: A perspective from
designers in developing country. In International Conference on Cross-Cultural Design (pp.
409-417). Springer, Cham.