COMP1773 –
User Interface Design
Introduction to the module
Dr. Annemarie Zijlema
Dr. Ralph Barthel, Dr. Nuno Otero
Structure of this lecture
About the delivery team
Overview of the module
Schedule
Learning outcomes
Text book
Introduction to User Interfaces and User Interface Design
2
Module delivery team
3
Some housekeeping…
Lectures
Labs
4
What to expect…
“Without Development,
Design is useless. Without
Design, Development is
unusable”
• Front end vs. Back end
• User-oriented vs. Solution-
oriented
• How can we bridge the
gap?
5
The module aims are to:
Provide you with a fundamental understanding of the
current theories, practices and principles of user
interface design and evaluation;
Provide you with the knowledge of how user-centred
design helps to build user interfaces which are
accessible, easy to learn and friendly to use;
Enable you to gain an appreciation of the concepts of
colour theory, font terminology, layout and graphic
design elements in terms of visual user interface
design
6
Learning Outcomes
This lecture and the associated activities provide the
underpinning knowledge that contribute to the learning
outcomes of:
1. Providing a fundamental understanding of the current
theories, practices and principles of user interface design
and evaluation;
2. Providing the knowledge of how user-centred design helps
to build user interfaces which are accessible, easy to learn
and friendly to use;
3. Enabling you to gain an appreciation of the concepts of
colour theory, font terminology, layout and graphic design
elements in terms of visual user interface design.
4. Proposing and designing solutions that are suitable to
different users and contexts.
7
Example – good or bad?
8
Source: Yale School of Art
Example good or bad?
https://www.lingscars.com/ 9
Source: https://www.lingscars.com/
Example
10
Example
11
The user interface…
System users often judge a system by its interface rather than its
functionality;
Poor user interface design is the reason why so many software
systems are never used;
A poorly designed interface can cause a user to make
catastrophic errors!
12
Why never used?
• 44% of website visitors will leave a company’s website if there’s no
contact information or phone number;
• 79% of online shoppers who experience a dissatisfying visit are less
likely to buy from that site again;
• Despite all the selfies, TED Talks and cat videos, the web is still 95%
words;
• Personalised Call-To-Actions (CTAs) convert 42% more visitors into
leads than untargeted CTAs;
• Spending 10% of your development budget on usability should
improve your conversion rate by 83%;
• 39% of people will stop engaging with a website if images won’t
load or take too long to load.
Source: https://anartfulscience.com/Frankensite.php?ref=quuu&utm_source=quuu
13
Why catastrophic errors?
o The United States warship USS Vincennes shot down
a civilian plane because the interface on their radar
system showed the operator what objects were
detected on radar, and if he clicked on an object, it
would track it. But if the operator wanted to get more
information about the object (in this case, by
listening in on its radio signals) to find out what it
actually was, he had to move a separate cursor and
click on the object again.
o The operator in the USS Vincennes thought he was
listening to the incoming aircraft (the Airbus full of
innocent people), because that's the thing he selected,
when he was actually receiving signals from a parked
F-14 several miles away, because that's where his
other cursor was.
14
User-system interaction
Two problems must be addressed in user interface
design:
• How should information from the user be provided to
the computer system?
• How should information from the computer system be
presented to the user?
User interaction and information presentation may be
integrated through a coherent framework such as a user
interface
15
Poor digital products…
16
Photographs courtesy of Baddesigns.Com
Good or poor design?
17
Photograph courtesy of Baddesigns.Com
What makes a poor user
interface…
Digital products that irritate, reduce productivity, and fail
to meet user needs;
Don’t provide an engaging or enjoyable experience;
“Technology that does not work the way they expect
makes people feel stupid.”
“If you intend to drive people away from your site, it’s
hard to imagine a more effective approach than making
them feel stupid.” (J J Garrett)
18
Beyond usability…
For a meaningful and valuable user interface, information must be:
Useful – fit for purpose and environment?
Usable – design is not the main outcome, human behaviour is
Desirable – emotional design, attractive
Findable – navigation, location
Accessible – cater for all types of users abilities and context
Credible – is the design trustworthy?
19
How do we create a good user
interface?
A user interface is not one size fits all; it
won’t work in every situation for every user
We must design for specific user desires,
needs, motivations, and contexts
A design must be tailored to business
goals, values, production process and
constraints
User-centred design: take the user into
account in every step of the way. More in
next week’s lecture…
20
Usability & user experience
Usability User Experience
• Whether it is effective and/or efficient to use • how people feel about a product
• Safe to use • pleasure and satisfaction when using it
• Easy to learn and remember how to use • From anticipation to the use to afterglow
• (includes usability goals too)
Example
Image source: https://www.usa.philips.com/healthcare/product/HCNOCTN193/philips-computed-tomography-5000-ingenuity-family-ct-scanner
Example
Philips Ambient Experience (2009) 23
Web interface design
http://www.arngren.net https://www.ebay.co.uk
Which website is more user friendly?
User-centred design
• Is about people and supporting their goals
• Identifying the right problems to solve
• Systems thinking - consider all components and stakeholders of a system
User Centred Design cycle
Final design / Understand
implementation context of use
Specify user
Evaluate
requirements
Design solutions
Adapted from: https://www.interaction-design.org/literature/topics/user-centered-design
So, why is this module relevant?
• This module complements your other modules, because
although the technology runs the system, it is the interface
that provides the user with the functionality of that system.
• However, users often interact with the system in ways the
developer did not envisage and this can lead to software
disaster:
• In 2008, 9 patients’ deaths were attributed to users
misunderstanding the interface of new medical pump
machines (Infusion Pump Recall, 2009).
• Some vending machines can never dispense anything from
column 10 or higher, because as soon as you ask for row "C"
(for instance) and press "1" for the first digit of the column
you want, you get product C1.
27
Areas of study
Web and mobile user interface design
User-centred design
Visual design and aesthetics
Information architecture
Prototyping
Evaluation
More in the Lectures and labs…
28
Teaching and Learning Activities
Concepts will be introduced in the lecture content
and practical exercises and problem solving will be
done in the labs.
In the Labs we will be exploring Axure – a rapid
prototyping software and feedback on coursework
Student time will be: Lecture and tutorial 2/3 (note
these two activities take place in what your timetable
refers to as a Lecture), and Laboratory 1/3 in tutor
groups.
29
Module Assessment
100% Coursework
Specified in the coursework brief
Development and evaluation of a user interface for a given
specification.
Mapped to the learning outcomes for this module.
Individual (not group)
Distributed once confirmed (in a few weeks)
30
Feedback is important!
We provide feedback every time you:
ask questions
complete tutorials and labs
post questions on the forums
We:
ask about your progress in the labs
discuss the progress of your coursework
see your prototype developing
31
Key Texts
Shneiderman, Plaisant, Cohen, Jacobs and Emqvist. Tidwell, J. (2010). Designing Interfaces.
Designing the User Interface: Strategies for Effective O’Reilly Media
Human-Computer Interaction. Latest edition. Pearson.
32
Other Recommended
Rogers, Sharp and Preece (2015). Interaction Design: Beyond Norman, D. (2013). The Design of Everyday
Human-Computer Interaction. 4th Ed. Wiley. Things. 2nd Ed. MIT Press.
33
Journals
ACM SIGHCI
Computers in Human Behaviour
Interacting with Computers (British Computer Society: Human
Computer Interaction Special Interest Group)
International Journal of Human-Computer Interaction
Interactions Magazine (BCS, British Computer Society)
Journal of Usability Studies (UXPA, User Experience Professionals
Association)
User Experience Magazine (UXPA, User Experience Professionals
Association)
34
http://www.ixda.org/
35
https://www.interaction-
design.org/literature
36
How will studying this module help you in
your degree and future career?
You will be able to:
decide between different interface alternatives and justify
your choice;
understand why users are the biggest source of errors in any
system and be able to carry out usability testing and evaluation
to reduce this factor;
it closely maps to the software lifecycle from the user
viewpoint;
appreciate the key issues when designing for mobiles, touch
screen interfaces, electronics and robots;
today it is all about the interface and usability.
37
And finally, we hope you:
38
Axure RP10
Axure is a prototyping software
Axure RP10 is installed in the labs and on the
virtual desktop
Axure 10 can be downloaded for home user
The link to download Axure RP10 is here
39
Tutorial exercise
Download the exercise from Moodle when in the lab.
Do not hesitate to ask questions to your personal tutor or
share your thoughts.
40
Thank you.
