FIT5152 User Interface

Design and Usability

Applied Class 6

Peer evaluation for Assignment 1 is now open

This week you can provide the teaching team with ratings and feedback about your

experience working in a group for Assignment Submission 1.

● Ratings for teamwork and behaviour

● Constructive feedback comments

The peer evaluation results are not used for any automatic adjustment of marks.

Teaching staff will review ratings and comments from each group. Where problems

are found, we will contact students directly to collect further evidence.

Access the Peer Evaluation in Moodle's Week 6 Own-Time section.

Peer evaluation closes on Friday 30 August, 11:55pm.

Learning Outcomes

In today’s tutorial you will continue designing the smart gardening app you started in

Session 2.

● Defining acceptance criteria

● Set up tasks in a Kanban task board

● Practice low-fidelity prototyping

The Scenario

Here is a reminder of the task:

“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.”

You can to refer back to the user stories you created in session 2. Alternatively,

choose from a set of example user stories that we have prepared.

Set up a Kanban task board for each story (20 mins)

Individual activity

Make a design plan for 1 user story (each person in the group should choose a

different user story) using the Kanban format shown below (make a copy of the

Kanban slide for each user story), adding the user story in the "story" column.

Story To Do Doing Done

As Tony, I want reminders for

when my plants need watering,

so that I don't have to memorise

their watering schedule.

Define your acceptance criteria

In the To Do column, write the tasks/features that you need to complete to solve the

user story in your app. This will be your story’s acceptance criteria. Manage your

project by moving tasks into the next column as they are implemented.

Story To Do Doing Done

Story To Do Doing Done

As Tony, I want reminders for ● Option to register/add a ● Provide 3 different ● Notification icon on the

As Tony Smith, I want ● Option to register/add a ● Provide 3 different ● Notification icon on the

when my plants need watering, user’s plants in the app. alternatives for the user homescreen of the app

reminders for when my plants user’s plants in the app. alternatives for the user homescreen of the app

so that I don't have to memorise to receive notifications;

need watering, so that I don't ● Provide 3 different to receive notifications;

their watering schedule. e.g. Email, sms,

● Provide 3 different

have to memorise their alternatives for the user e.g. Email, sms,

WhatsApp, etc.

alternatives for the user to

watering schedule. to receive notifications; WhatsApp, etc.

receive notifications; e.g.

e.g. Email, sms, ● Notification icon on the

Email, sms, WhatsApp, etc. ● Notification icon on the

WhatsApp, etc. homescreen of the app

homescreen of the app

●

●NotifNicoattiifiocna tiicoonn i coonn t hoen the

homheosmcreesecnr eoef nth oef athpep app

User Story Acceptance Criteria

For your chosen user story, create a minimum of 5 acceptance criteria, which will be

listed in the To Do column.

✅ Acceptance criteria should be a list of features a designer needs to implement in

order for the user story to be feasible or completable.

✅ Criteria should be platform agnostic (ie. not specific to iOS, Android, etc).

⛔ Criteria should not be a list of steps that users perform (eg. first click this

button, then go to the next screen, then complete the transaction).

As you complete the prototype sketches later in this applied class, you will move

these acceptance criteria across the columns to keep track of your progress.

[duplicate this slide for each group member]

User Story To Do Doing Done

"As [persona], I want to

[goal] so that I [benefit]"

Think of different features that are

required to solve the user story.

Make a copy of the sticky note

below for each feature and place

them in the To Do column.

Describe the task/feature

When you start designing the

feature, move the note into the

Doing column.

When the feature has been

implemented, move the note into

the Done column.

Why we prefer hand-drawn sketches for ideas

You need to be comfortable expressing ideas with quick, simple sketches.

Pencil and paper has advantages compared to digital tools for rough work:

● High usability with minimal learning curve

○ No time spent learning features of software tools.

○ No worrying about compatibility and troubleshooting.

● Less attachment to early ideas

○ If an idea doesn't work, scrap it and try again!

○ Less time spent refining details.

○ More time spent generating unique ideas.

Prototyping (60 mins)

Individual activity

Design a low-fidelity prototype for the features you

proposed in your Kanban board. Your prototype should

depict the basic function, workflow and look of your app.

It may take you a few attempts or iterations to settle on a

satisfactory design.

NOTE: The goal of prototyping is to test new ideas.

DO NOT copy an existing design! Copying defeats

the purpose of prototyping and existing designs may

have their own usability flaws.

Low-fidelity sketching guidelines.

The frame of the device is represented by

●

a clearly drawn, straight, rectangle.

Try to draw to interface elements to scale.

●

Draw at a larger size to make adding small UI

elements easier.

Depict each different type of element

●

clearly (examples on the right)

Avoid depicting specific UI design styles or

●

very specific informational contents.

Don't use any colours within the sketch.

Don't spend too much time refining fine details.

Start sketching your prototype

Assume that the prototype is for a mobile phone device.

1. Each group member will create a low-fidelity prototype based on their user story.

2. Choose your prototyping tool

○ Sketch using pen and paper, or draw on a whiteboard (recommended)

○ Use basic shapes and scribbles in Google Slides or Google Drawing

■ Group members can make a copy of the Google Drawing template

■ Or draw in the next slide (duplicate the slide for each group member)

Paste images of your group’s prototypes into this slide deck.

Remember to update your kanban board

1. Check your kanban board's To Do column for acceptance criteria and think about

different ways the feature could be implemented.

2. When you start working on a feature, update your Kanban by moving the

acceptance criteria to the Doing column.

3. When the feature has been completely implemented, record this by moving the

acceptance criteria to the Done column (i.e. completed tasks).

Prototype Presentations

Group Activity

Present your low fidelity prototypes to the rest of your group.

Identify and annotate good usability in the prototype screens of the group member

next to you.

● Highlight and label how a Norman Principle is used in the design.

● Highlight and label an accessibility feature and identify the issue that it

addresses.

Norman Principle: Discoverable

- Will be the first element the user

encounters when visually scanning the layout.

- Location is consistent with most other apps,

appears in a predictable place.

WCAG Principle: Operable

- Entire card can be tapped to see more

detail instead of tapping a smaller button

within the card.

- Guidelines: 2.5.5 Target Size (Enhanced)

Assignment

Submission 2 Brief

That's all for today!

In the next applied class we will explore menu and navigation design guidelines.

Important reminders for this week:

● Peer Evaluation for Assignment Submission 1 is now open

○ Available on Moodle in the Week 6 Own-Time section.

○ Due at the end of this week (Friday 11:55PM).

● A brief for Submission 2 is now available on Moodle.

○ Individual submission.

○ Due at the end of week 8 (Friday 11:55pm).

See you in the next session!

18