SWEN303User Interface Design

Simon McCallum

Introductions

Design?

I thought we were Engineers

Format\begin{table}[tbp] \centering \begin{tabular}{c|c} Age & Gamers \\ \hline Under 18 & 28 \\ 18 - 35 & 29 \\ 36 - 49 & 20 \\ 50 + & 23 \end{tabular} \caption{An example table.} \label{tab:example1}\end{table}

Age Games %

Under 18 28

18 - 35 29

36 - 49 20

50+ 23

Interface Matters

Possible ≠ Useful

Command Line Interface vs

Graphical User Interface

Microwave

http://www.youtube.com/watch?v=WJye30brhrM

Chocolate

Design Thinking

Empathise

Define

IdeatePrototype

Test

Overview

Course Design● What it is like to be a 3rd year?● What are the learning objectives?● What topics and teaching style?● Create lectures and assignments● Collect feedback from students

Course Design

Waterfall vs Agile?

3 Assessments25%, 25%, 50%

Lectures support assignments

Flow

Personas - EmpathySystem analysis - Define

Create designs - Ideate

Prototyping - PrototypeUser Testing - Test

} Ass1

} Ass2

} Project

Design Thinking

Ass 2Empathise

Define

IdeatePrototype

Test

Ass 1

Ass 2

Project

Design Thinking

Empathise Define

Ideate

PrototypeTest

Ass1

Ass2

Project

Semester plan

Ass 1 : 3 weeksAss 2 : 3 weeks - done by EasterProject : Easter to June 15th

Learning Interfaces

Blackboard ( prefer not to use )vs

ECS wiki ( submission system )vs

Gitlab ( project management )

Comms

Realtime chatting tools?● Slack ● Mattermost● Discord● WeChat● Zoom

Video

Video recording / streaming tools?● Panopto (default)● Youtube● Twitch● Mixer● Zoom

Agile Lecturing

Willing to make changesListen to students

Required set of topics for about 60% we can work on order and content for the rest.

Rubric Assessment

Assignment 1 has 4 parts● System description 20%● Personas 30%● Tasks 30% ● Reflection 20%

Adaptive weighting:● Persona 20, 40, 25, 15● Task 20, 25, 40, 15● Reflection 20, 25, 25, 30

Team work

Working in pairs - Assignment 1&2Working in teams - Project● Defined roles - Animal model● Gitlab for project management

○ Issues, weighting, milestones, timing○ Document sharing○ Logging progress○ Feedback during project

Empathy

Understanding the user

Creating a persona as part of understanding your audience

Creation as part of thinking

First Assignment

Choose a systemCreate personas to understand usersCreate tasks for those personasReflect on what you learn

Systems for the Assignment

● Student questioning system (Peerwise external partner)● Youth games for mental health site (Sparky)● Carbon footprint visualisation (Sustainability Office)● Political compass / Voting site● Augmented Reality Promotion (Engineering Faculty

engagement)● Time management tool for accountancy firm (external

partner)● Student-created project ( by approval of the course

coordinator only )

Multimodal teaching

Reading - About FaceWatching - Panopto / YoutubeDoing - Assignment and ProjectAsking - Forum & Discord

Product vs User

We will start with the user and problems they have

Office

Simon - CO257,

Chat with me in my office or online

Discord and WeChat -