FIT5152 User Interface

Design and Usability

Applied Class 4

Learning outcomes this session

Today we will explore usability theories and concepts in order to gain a better

understanding of psychology of interaction and interface design.

● Storyboards

● Norman’s principles

Storyboards

• A storyboard is a visual tool

to concisely depicts a

scenario that relating to a spM raa ygic

user goal/story.

• Using a series of drawings

and descriptive text you will

explore how the person

behaves before, during and

after their interaction with a

system.

• A storyboard will collate

personas, user stories and

context into the scenario.

A storyboard for searching for plant care information

What's wrong with this storyboard?

From Last Session’s Activities…

Scenario: Imagine you are being asked to design a smart gardening app that helps all

types of users (novice to expert gardeners) with what they can plant in their home

(backyard, balcony...), and how and when to take care of their plants.

● Refer to your personas from last week’s class.

● You can also use the sample database again for ideas.

● We have also provided some sample user stories.

User Scenarios

Let’s have a look at the user story from last week again..

"As Tom, I want to choose a plant, so that I know how to take care of it."

We can write a user scenario based on the persona and user story.

Tom is a software engineer. He has bought a new home with a big backyard and wants to start an outdoor

garden. He wants to learn about gardening, which plants will grow well in Melbourne weather and how to take

care of them. He has started looking up information on the internet and borrowed a few outdoor gardening

books from the local library. It feels like a bit of work to get it started but will make the backyard look beautiful

once it is set up. He has just found a gardening app that he can use to learn about gardening and pick the right

plants. He will be able to look up information on plants, how much to water and how to look after them. He’ll

be able to share the progress of his garden with his family. It looks like an easy and fun way to get the garden

going and maintain it.

User Scenario: Setting up an outdoor garden

Let’s analyse the scenario…

Tom is a software engineer. He has brought a new home with a big backyard and wants to start

an outdoor garden. He wants to learn about gardening, which plants will grow well in Melbourne

weather and how to take care of them. He has started looking up information on the internet and

borrowed a few outdoor gardening books from the local library. It feels like a bit of work to get it

started but will make the backyard look beautiful once it is set up. He has just found a gardening

app that he can use to learn about gardening and pick the right plants. He will be able to look up

information on plants, how much to water and how to look after them. He’ll be able to share the

progress of his garden with his family. It looks like an easy and fun way to get the garden going

and maintain it.

Key: Actor Goal/Motivation Action/Intent Emotion

Storyboards: Consider the following…

Think about the structure of the story Think about the user story ✔

you are trying to tell ✔ ● How will they go about achieving

● How does it start and end? their goal?

● And what will happen in-between? ● What problems might they encounter

● What path will your user take? in achieving this goal?

● Does it resolve successfully or not?

Convey emotion in the storyboard ✔

Think about your persona ✔ ● What are the user's thoughts?

● What are they trying to achieve? ● What emotions do they experience?

● Where would they use it? ● Include pain points/frustrations

● What motivates their decisions?

Let’s look at our scenario’s storyboard…

Use 1 or 2 frames establish

the context.

Use 2 to 4 frames to depict a

sequence of actions.

Use 1 or 2 frames to reveal

the outcome.

The outcome can be a

positive desired outcome or

one that reveals potential

issues that need to be solved

when you design the app.

Create Scenarios and Storyboards (40 mins)

Group Activity (10 minutes)

1. Write a scenario based on one of the sample user stories.

○ Note: Personas are not provided. You group can imagine details for the user.

2. Analyze the user-scenario for actors, goals, tasks, and emotions.

○ You can annotate a written scenario as shown on the previous slides.

○ Or use the Nielsen Norman Group scenario breakdown format (a template is

provided on the next slide).

Individual Activity (30 minutes)

3. Draw a storyboard based on your group's scenario. You can make a copy of our Google

Drawing storyboard template.

○ Note: Your storyboards should be completely drawn by you (either using digital

drawing tools or by hand); no AI or external images should be used.

NNGroup Scenario Breakdown

User story [paste your user story here]

[write your user scenario here]

[who is this scenario about?]

Actor

[what influences the actor's decisions?]

Motivator

[what is the actor's desired outcome?]

Intent

[what does the actor do?]

Action

[what are the possible outcomes?]

Resolution

Use the scribble tool to sketch

directly into the storyboard

template.

Add text descriptions to each

drawing to indicate context,

actions, thoughts and feelings.

Replace this slide with your own

storyboard to complete this

activity.

Duplicate this slide for each group member

[before the end of the class, add an image of your storyboard here]

Don Norman's Principles of Interaction Design

Class Discussion

Watch the video to the right, where Don Norman

explains the concept of affordance.

Next, consider the following 2 statements

"I can afford to buy lunch today".

and…

"This small lunchbox can afford being

lifted".

In both of these instances, the word “afford”

means that it is possible to perform an action.

"Defending Human Attributes in the Age of the Machine", 1994

Design Theories and Concepts

The conceptual model of product is the designer's

intended understanding of the how it should work.

We can understand it by reading user manuals and

documentation as well as from the product’s

appearance (including signifiers, mapping and

constraints).

The user’s mental model is how the user

understands the product and how to interact with it.

Consider the digital wristwatch shown here:

Design Theories and Concepts

Class discussion

● What can we interact with here?

● What are the actions that can be performed (e.g.

pressing one button or pressing two at the same

time)?

● Does the design communicate information about

how we interact with it? How?

● How can you set time, date or alarm or control

radio?

● How is your mental model may be different from

the designer's intended conceptual model.

Norman's Principles in Interface Design (10mins)

Class Discussion

Open the Google

calendar from your Monash

email and explore its

features:

Make a list:

● What UI elements can

you interact with?

● What interactions can

you perform with each

UI element?

Design Theories and Concepts (20 mins)

Group activity

1. In Google Calendar, identify some interactions and explain how of each of the

following principles is implemented (if present in the design):

○ Affordance

○ Signifiers

○ Feedback

○ Constraints

○ Natural mapping

3. Identify whether each of interaction makes use of:

○ Knowledge in the head OR Knowledge in the world

Principle Example Reason Knowledge in the…

Affordance

Signifier

Feedback

Constraint

Natural Mapping

That's all for today!

In the next applied class we will look at accessibility and inclusivity in design.

Important reminders for this week:

● Make sure a tutor has checked your in-class activity before you leave class.

● Submission 1 is due at the end of next week, Friday 11:55 pm.

○ All components should be combined into one PDF document.

See you in the next session!

20