Faculty of Engineering and Technology

Department of Computer Science

6510CSMM
User eXperience Design

Dr. Phyu Hnin Thike

phyuhninthike@[Link]
Lecture 1
Module Overview
Learning outcomes

• At the end of this session you should:

– Have a holistic understanding of what the module is about

– Know how you will be assessed on the module

– Have learned some of the terminology of:

• Human-Computer Interaction (HCI)
• Usability
• User eXperience (UX) Design
3
In this session… How is my learning progressing?
How can I ensure I get the mark I
• An overview of the module will be described: want in the assessment?
– What you will learn on the module (Module Aims)
– How you will be assessed

• We will also discuss how you should go

about your learning and self-assessment on
this module:
– Lectures
– Lab Experience (Tutorials or Exercises)
– Private Study

4
Module Makeup

• Each week there are two lectures

– They are not the same lecture, so are not optional

• Mostly, after the lecture, there is an online tutorial and/or

exercises for you to complete
– The lab sessions are where/when most
of your learning will take place
– Talking with the tutor(s) about your
coursework during the lab sessions is
a key part of doing well
5
Module Makeup: Private Study
• If you do not complete the exercises in the
scheduled lab time, you should complete them
during your private study time
– This is how you will ‘keep up’ on the module

• There are several books in the reading list on Referencing these and
other works is part of
Canvas getting higher marks in the
– You do not need to read the books from cover to assessment
cover, but you should read the relevant sections
identified in the weekly ‘Private Study’ information
at the end of the lecture slides

6
What this module is about…

• Ultimately, we would like you to learn that:

YOU ARE NOT THE USER

• Your first private study task is to read the following

online article:
– [Link]

7
User eXperience (UX) Design

• the process design teams use to create products that

provide meaningful and relevant experiences to users
- the design of the entire process of acquiring and integrating the
product
- aspects of branding, design, usability and function.

8
Background

• When designing a new interface or analysing an existing

interface to make the user experience as good as it can
be, UX Design uses an iterative development process
approach, hoping to include user feedback in each
developmental iteration
• The Agile development process is often used to facilitate
this: An iterative software-
development methodology
which teams use in
projects

9
Background
• Testing an interface with users requires the use of
scientific principles

– Building prototypes
• From low-fidelity (lo-fi) prototypes (wireframe & textual description of
interactive behaviour), through mid-fidelity (mid-fi) prototypes (realistic
view of interface & textual description of interactive behaviour) to high-
fidelity (hi-fi) prototypes (realistic and interactive)
– Setting a Hypothesis
• E.g. Users will perform better with Design A than Design B with regard to
overall interaction time
10
Background (Cont)

– Adding in the necessary code to hi-fi prototypes to capture user

performance metrics:
• Interaction time, No. of clicks, No. of erroneous clicks, Task
completion…

– Administrative tasks and time to run the experiment with users

– Using scientific statistical methods on the results to derive a

conclusion as to whether the hypothesis is supported by the
results or the null hypothesis is supported

11
Assessment
• The two assessment components on this module are elements of
an agile process
1. Discover, Design and Develop
• Expert Evaluation of an Existing Interface
• Design and Develop Low-fidelity (lo-fi) and
(mid-fi) Prototypes
• Test Preparation

2. Test and Discover

• User Experiment of a given Hi-fidelity (hi-
fi) Prototype

12
Assessment
• There are two assessment components, both are
individual assessments:
– Coursework 1: User Participative Evaluation (Worth 40%)

• You will act as a UX Expert and analyse the results of a user

participative experiment
• You will be able to experience the experiment that has been developed
for you (LJMU Lab)
• The hypothesis and results will be provided and you will need to use
scientific statistical methods to aid you in deriving a conclusion

13
Assessment
• There are two assessment components, both are
individual assessments:
– Coursework 2: Predictive Evaluation (Worth 60%)

• A predictive UX evaluation of an e-Commerce web-based application

• To find usability and user experience issues
• To propose new interaction designs to overcome some of the issues
• Initial preparation for a user experiment (no development)

You cannot choose [Link] or any of its sub-sites.

14
 The amount of competition for e-Commerce business has
e-Commerce brought the user experience to the forefront

• e-Commerce has become even more of an essential

service during the pandemic
– It had become so large an industry that high-street shops that
did not adapt have been closed down

• Business to Customer (B2C) e-Commerce was worth

nearly £200bn in 2018
– Nearly £700bn in total sales (B2C, B2B, B2G, etc)
– [Link]
kingdom/ 15
The User
• We will explore the idea of the user
– As we are all users, our own interactive
experiences are a benefit on this
module, but should not ‘over influence’
your interaction designs
• We will bring the user to the centre of
our design consideration
• We will explore the novice user and
focus much of our attention on their
first experience with an interaction
design
16
HCI Usability Engineering UX Design
The time to acquire a target is a function of the distance to
Needed in theand size of the target.
• Earlier
– Fitt’s Law - 1956
coursework!
T (Time) = a + b log2 (2 D (Distance)/ W (Width)

– [Link]

• Human-Computer Interaction (HCI) – 1980’s

– ‘Think Aloud’ – Cognitive Interface Design
– ‘Usability Problems’

• Interaction Design – 1990’s

– Cognitive Walkthrough
– Heuristic Evaluation

• Usability Engineering – 2000’s

‒ Measuring User Performance As a ……, I want…… so that…..
Needed in the
As a [UX Designer] I want to [embrace Agile] so that [I
• User eXperience (UX) Design – 2010’s can make my projects user-centered]
– User Stories and Remote Testing
coursework!
17
Human-Computer Interaction
• The 3 U’s of Computer System Success, in that a system can
only be deemed ‘successful’ if it is:
– Useful
• Provides the function(s) necessary for user task completion
• Neilsen Norman Group term this Utility
– [Link]
– Usable
• Functions can be utilised efficiently, effectively and satisfactorily
– Used
• ONLY A USEFUL AND USABLE SYSTEM WILL BE FREELY USED
• Defined by Dix et al in their book ‘Human-Computer Interaction’
18
 Needed in the
a quality attribute that assesses
how easy user interfaces are to
Usability coursework!
use

• It is more than the ‘look and feel’ of the interface, although these are important
– Look
• Commonly referred to as the aesthetic of an interface
• Includes the colour scheme, font choices, layout, etc.

– Feel
• The interactive style of the interface
• Includes styles such as WIMP (windows,
icons, menus, pointer), Point and Click,
Menu-driven, Command Line, etc.

– Definition: Look and Feel

• “The appearance (look) and interactive style (feel) of software whose uniqueness to a particular platform or
application defines the aesthetics and values of that application and how users subjectively respond to it.
The look-and-feel is considered the front end of the software, whereas the abstract functionality is the back
end. The look-and-feel is often considered to incorporate the copyrightable aspects of the user interface —
those aspects not entirely determined by the functional requirements.”
• [Link]
19
The Language of Usability
• We will explore the principles to support usability in our interaction
designs

• There are three categories of principles:

– Learnability
– Flexibility Needed in the
– Robustness coursework!

• Each category has four/five principles and these can be used to

help us identify usability problems as well as help in describing
how they can be fixed.
20
The Language of Interaction Design
• We will explore the visual language of interaction
design
– Jenifer Tidwell has championed design patterns for
nearly two decade
– A good first way to begin to understand design
patterns, is to think of the configurable interface
components offered by a programming language
API, for example:
• Menu bar, menu item, sub-menu
• File Open/Save/Save As dialogs
• Yes/No/Cancel Dialog
21
User eXperience (UX) Design
• UX Design expands on all of these past methods/
techniques to encompass not only the software interface
but the whole product / service

• The video at the following page describes this well:

– [Link]

• We will be focussing primarily upon the software interface

in this module

22
 Bringing it all together
• User eXperience Design is about bringing all of the
methods/techniques together
• We will explore:
about the USER about Interaction Design and Usability
– Domain/Market Analysis ‒ Design Patterns
– Personas ‒ Principles to Support Usability
‒ Learnability
– Task Analysis
‒ Flexibility
– User Actions and Interaction ‒ Robustness
– Heuristic Analysis ‒ Prototyping
– Cognitive Walkthrough ‒ Lo-fidelity and Mid-fidelity
23
Summary

• In this lecture, we have learned:

– What the module is about
– How you will be assessed
– How you will be taught and how you will learn

24
Private Study

• Read the following online article:

– [Link]
– [Link]

• Read chapter 1 of the following texts available via the

‘Reading List’ on Canvas:
– Human, Computer-Interaction, Dix et al, 3rd Edition
– The UX Book, R. Hartson & P. Pyla, 2nd Edition

25