CSIT226 Human Computer Interaction

Tutorial 02 - Handout

ACTIVITY 01: KEY TERMS

Discuss the key terms.

• Domain
The area of work under study (e.g., graphic design)
• Goal
What you want to achieve (e.g., create a solid blue square)
• Task
How you go about doing it? Ultimately in terms of operations or actions (e.g., select fill tool)
• Conceptual Model
: “…a high-level description of how a system is organized and operates” (Johnson and Henderson, 2002, p26
• Human Cognitive Architecture
Information is being stored and processed by short-term memory (working) and long-term memory so as to be able to
retrieve it for subsequent use.
• Cognitive Load Theory
Information is being stored and processed by short-term memory (working) and long-term memory so as to be able to
retrieve it for subsequent use.
• Skeuomorphism
Skeuomorphism makes interface objects familiar to users by using concepts they recognize.
• Flat Design
Flat design is a user interface design style that uses simple, two-dimensional elements and bright colors
• Material Design
Material Design is an Android-oriented design language created by Google, supporting onscreen touch experiences via cue-rich features
and natural motions that mimic real-world objects.
• Attention
Attention is the behavioral and cognitive process of selectively concentrating on a discrete aspect of information,
• Perception
Perception is the organization, identification, and interpretation of sensory information in order to represent and understand the
presented information or environment.

ACTIVITY 02: THE ‘HUMAN’—INPUT AND OUTPUT

• In the lecture input and output was discussed (visual, haptic, auditory and movement)
• Identify different interfaces that highlight effective applications of these different human i/o methods
Visual –> Microsoft windows, visual diagrams , graphics wtc etc
haptic - > mice/keyboard
Auditory -> paper crinkling noise when throwing into rubbish bin
movement-> animations
• Create a model of this using draw.io (web based) to demonstrate these different i/o methods

Generate a list based on the 4 channels, consider how future interfaces can capture more of these different channels.

ACTIVITY 03: USER-CENTRED DESIGN PROCESS MAP

Work through the User-Centred Design Process Map available from https://www.usability.gov/how-to-and-tools/resources/ucd-
map.html

ACTIVITY 04: CONCEPTUAL MODELS

 • Read: http://boxesandarrows.com/conceptual-models-in-a-nutshell/
Reflect and answer the following:
1. Identify how to build an app for helping visitors navigate their way around an unfamiliar city.
2. Redesign a vending machine.
ACTIVITY 05: SKEUOMORPHISM, FLAT DESIGN AND MATERIAL DESIGN

You are to read:

• https://www.interaction-design.org/literature/article/skeuomorphism-is-dead-long-live-skeuomorphism
• https://99designs.com.au/blog/trends/skeuomorphism-flat-design-material-design/
• https://www.fastcompany.com/90163615/bringing-back-skeuomorphic-design

Based on the readings above, discuss the three different design approaches.
• Which is the design approach that you prefer and why? Flat design
the minimalistic designs look much neater and simplistic while also being able to recognize them by anyone
• What are examples of current systems or applications that use these different approaches?
Microsoft windows

ACTIVITY 06: QUESTIONS (INDIVIDUAL)

1. Define what a conceptual model is.

A conceptual model is a representation of a system. It consists of concepts used to help people know, understand, or simulate
a subject the model represents.

2. What are design/interface metaphors (analogies)? Provide examples of common computing metaphors.

In user interface design, an interface metaphor is a set of user interface visuals, actions and procedures that exploit specific
knowledge that users already have of other domains. The purpose of the interface metaphor is to give the user instantaneous
knowledge about how to interact with the user interface.

An example of an interface metaphor is the file and folder analogy for the file system of an operating system. Another
example is the tree view representation of a file system, as in a file manager.

3. Explain the concept of ‘interaction paradigms.’

Paradigms of interaction are examined for functions and procedures, objects and processes, APIs and frameworks, databases,
GUIs, robots, and virtual-reality systems.

4. What is cognition and why it is important for interaction design?

Cognition refers to "the mental action or process of acquiring knowledge and understanding through thought, experience,
and the senses"

We need cognition to help us understand information about the world around us and interact safely with our environment, as
the sensory information we receive is vast and complicated: cognition is needed to distill all this information down to its
essentials.

5. What is attention?
The processes by which humans are able to focus on some things and filter out others, to concentrate on certain mental or
perceptual events and devote less mental resource to the rest, are known collectively as attention

6. What strategies do you use to help you remember things? How can we design systems to enable this?

7. Explain the concept of information processing.

ACTIVITY 07: MODELLING USER INTERACTIONS

Find actual examples of the interactions from lecture slides.

• Single Sequence
• Hierarchy Sequence
• Hubs and Spokes
• Matrix sequence
• Network

2 | CSIT226 TUTORIAL 02
Take screenshots of these systems and the different pages of the interactions.
Use Axure RP or any other appropriate software to model each of these in a single file with the home page allowing the user to
navigate to the different examples. See the screenshots below for an example and hints.

3 | CSIT226 TUTORIAL 02
TO LINK PAGES IN THE ‘INSPECTOR PAGE’ FRAME CLICK ‘ADD CASE’.

THEN LINK AS SHOWN BELOW.

TO ADD AN IMAGE
Use the image object and add it to the page.

Right click and select ‘import image’. Find your screenshot and add it to your project.
You can use clear boxes to be your ‘buttons’ over your screenshot.

ACTIVITY 08: PROJECT GROUP FORMATION

1. Use this last part of tutorial to contact your potential team members and finalize your Project Group.
2. You should select your team members from within the same tutorial group, as far as possible, as you will need
to work and present your work in the same session allocated to a particular group.
3. Each group should comprise of 4 to 5 group members (no more or less).
4. Elect a group leader and he/she shall email to me a unique name for your Project Group.
5. My email is: sudhirj@uow.edu.au