COMP1650 User Interface Design

Please note the lectures contain links to websites and videos and if you have
poor internet please remove these before using as they are additional
material and not integral to the course. Note all files are in the relevant
folder and the book presentation files are a subset of that folder.
Below is a copy of the Moodle page we use so feel free to adapt and use as
appropriate to your target audience.
o

Welcome to the world of User Interface Design

My name is EurIng Dr Mary Kiernan and I hope that you will find the course both
challenging and enjoyable and provided below are the three aims for the course:
1. to provide you with an understanding of the current practice in human computer interface
development and evaluation.
2. to 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.
3. to 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.
You will also gain an appreciation of, and be able to apply the legal, social, ethical and
professional issues that are involved in the development of interfaces. Additionally you will
have the opportunity to improve your transferable, cognitive skills and presentation skills.
o

Timetable: enter your dates

Assessment: enter your dates

o

Course Textbook: Designing the User Interface: Pearson New International

Edition: Strategies for Effective Human-Computer Interaction Paperback 17
Jul 2013

ISBN-13: 978-1292023908
Presentations from the book will be available to you in relevant weeks

Schedule of Work File

User Interface Design Course Handbook File

Week One Introduction

Introduction to the course, the learning outcomes and the assessment rationale.
o

Negotiate course content and assessment topic.

Negotiate tutor groups

o
o

Introduction to the Course File

What do you want from this course? Find out students expectations

"A designer knows that he has achieved perfection, not when there i nothing left to add, but
when there is nothing left to tke away." Antoine de St-Expurey 1935
Working in pairs we explore your skills and knowledge and how we can meet your needs.
o

Lecture and Activity Schedule File

Courework handed out for you to read for discussion next week.

Section 2 Interface and Evaluation

Learning Outcomes for this week are to provide some of the underpinning
knowledge that contribute to the learning outcomes of:

- understand the issues involved in developing and evaluating interfaces to interactive

applications;
- demonstrate an awareness of human-computer interface standards and guidelines.

During the session you will be introduced to your coursework and discuss your strategy for
completing it. You should also raise questions for areas that need clarification and post
these to the course forum so that the class may benefit from the answers. The answers
may come from other members of the class and/or myself and this process then becomes a
collaborative work.

In your lab session you should undertake a critical evaluation of the current issues in user
interface design contextualised into your coursework. These will include data
visualisation/infographics and how they help users to understand complex sets of
information and any issues to be aware of, desktop touch screen interfaces where users
may also be using a keyboard and mouse
Chapter 1: Usabiity of Interactive Systems File Background Reading Course Textbook
o

Interface, Interface on the Wall File

Tutorial Research Article

In groups of 4 or 5 you have 30 minute to undertake a 'gut' evaluation to the new front page
of the University of Greenwich portal. Image focussed design is becoming prevalent in
some websites. What are your thoughts on this for intranet based systems? An
interesting article on this is attached. Please note your group may be asked to present
their findings (5 mins maximum).
o

Heuristic Evaluation File

Research Paper on Evaluation File

F. Balagtas-Fernandez, J. Forrai, and H. Hussmann, Evaluation of user interface design

and input methods for applications on mobile touch screen devices, Proceedings of the
2009 Interract Conference, Human-Computer Interaction, pp. 243246, 2009.
o

Data Visualization File

Section Three User Centred Design Methods

o

Read Chapter 2: Guideines, Principles and Theories File Background

Reading Course Textbook

The learning outcomes for this session are to create an awareness of the
human-computer interface standards, guidelines and user centred design
methods that inform the development process.

The focus of your lab session is to provide formative feedback on your findings from last
week. You will also prepare a contents page for your report and map it to the assessment
criteria.
o

User Centred Design Methods File

Standards and Guidelines File

Apple Interface Guidelines URL

https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/OSXHIGu
idelines/index.html
Microsoft Guidelines URL
https://msdn.microsoft.com/en-us/library/windows/desktop/dn688964.aspx
o
o

Social, Legal, Ethical and Professional Issues File

UK Government Standards and Guidelines URL

W3C Content Accessibility Standard URL http://www.w3.org/2012/07/wcag2pas-pr.html

W3C Mobile Web Standards and Best Practice URL http://www.w3.org/Mobile/
o

Overview of ISO Standards File see file in folder

ISO Standards File

Section 4 Four Pillars of Design and Scenarios

This week we will focus on the four pillars of design and scenario development. This will
contribute to the learning outcome of "Develop high level cognitive skills with respect to relating
theoretical concepts to practical implementation; develop high level key transferable skills in
problem solving and decision making; communication skills; working with others and working to
deadlines; present work in a variety of ways including a report and a demonstration."
During the lab session you will reflect on the legal, social, ethical and professional issues
that apply to your coursework and document them, if applicable. You will also compile a set
of guidelines and standards that you will use and consider any cross platform issues that
will apply.

During the week you will need to hold a focus group with 3-5 members where you will each
present a very rough outine of a proposed design and discuss which one(s) are suitable for
future development to a full low level prototype. On an individual basis you will decide
which one you are going to develop further.
o

Read Chapter 3: Managing Design Processes File Background Reading

Course Textbook

Four Pillars of Design File

7 scenarios for information evaluation File

What are scenarios? File

Section 5 Prototyping

In this session we will explore how to use prototyping effectively and this links
to the learning outcome "Apply the principles, concepts and models of usercentred design methods to the development and evaluation of interactive
systems design".

You will also be able to gain an appreciation of the basic concepts of text, graphics, video
and annimation and contributes to the learning outcome "to enable students to gain an
appreciation of the concepts of colour theory, font terminology, layout and graphic design
elements in terms of visual user interface design".
The focus of your Lab session is to start to make a critical selection and application of the
concepts of colour theory, fonts, layout and graphic design of the visual interface design
relevant to your coursework.
o

Chapter 4: Evaluating Interface Design File Background Reading Course

Textbook
Presentation Slides Lecture 5 Prototyping File 5.3MB Powerpoint presentation

Develop prototype We will be working in groups to develop a prototype for an applet that is
aimed at boys aged 7-11 to help them develop their mental multiplication skills for the
following tables: 2, 5, 10. It should be drawn in back/grey/white and you should indicate the
colour palette you will use for the final game.

Example of low fidelity prototype URL

Example of High Fidelity Prototype URL

Hidden from students:FileL5 Prototying File

Free Prototyping tools File

Here is a list of free prototyping tools. If you know of any others please let me know and I
will add them to the list.
o

Tutorial

In groups you created an interface for booking a train ticket for a mobile device and a couple
of designs were novel. The key issues arose were: using a full calendar on the screenmay be too small for a mobile, consider using a text box which allows a calendar to pop up;
missing key elements, the next/confirm/proceed button; too much information on one
screenand and the price.
o

During your Lab Session this week you will work on your ideas for low level
prototypes for your coursework

Section 6 - Websites

Websites are an important feature of all walks of life and we will explore how
their interfaces are designed. The Internet of Things is demystified. These
contributes towards the learning outcome "understand the issues involved in
developing and evaluating interfaces to interactive applications".

In the Lab session you will continue to work on developing your low-level prototype and use
heuristic evaluation to inform your decision making process.
o

Designing for Websites File

Graphics and Sound File

Text File

Video and Animation File

These are the Lecture and Lab slides for Lecture 6. The topics covered in the presentation
are:

Designing for Websites

Web Typography

User Interfaces Design in the context of the Internet of Things

Section 7 Design Patterns

Design Patterns, Metaphors and Visualization are focussed on today and they
map to the learning outcome apply the prinicples, concepts and models of
user-centres deisgn method to the development and evaluation of visual user
interface design.

In the lab session you will finalise your documentation to date and upload your interim
deliverable to the weekly upload area of the coursework system.
o

Read Chapter 13: Quality of Service File Background Reading Course

Textbook
Design Patterns and Metaphors in User Interface Design File

Section 8 Information and Selection

Many interfaces require users to complete forms and make selections. This week we will focus
on this area and it contributes to the learning outcome of apply the concepts of colour theory,
font terminology, layout and graphic design elements in terms of visual user interface design.
The lab session will be used to provide you with formative feedback on your coursework
using the register to note the work seen.
o

Read Chapter 13: Information Search and Chapter 6 Menu Selection,

Form Fill-in and Dialog boxes Files Background Reading Course Textbook

Interfaces to Manage Information URL

BBC Accessibility for Games URL

http://www.bbc.co.uk/guidelines/futuremedia/accessibility/games.shtml
o

This session focusses on game interface design. These presentations will contribute to
your knowledge to the learning outcome "apply the concepts of colour theory, font
terminology, layout and graphic design elements in terms of visual user interface design.
o

UI Design for Games: the good, the bad and the ugly URL

Gaming File

Information Design and Data Visualisations File

Form Design File

Section 9 Designing for the Small Screen

We will explore designing for the small screen eg Android vs Apple and this will contribute to the
learning outcome "to understand the issues involved in developing and evaluating interfaces to
interactive systems.
In the lab session you should review your work to date and incorporate any new
justifications for your design based on these lectures. You may also wish to review your low
level prototype.
Read Chapter 14: Information Visualisation file Background Reading Course Textbook
o

The lab session will be used to provide you with formative feedback on your
coursework using the register to note the work seen.

Additionally by next week you should aim to have drafted your coursework report at least to
the level at which you have a report structure, some background research, decided on the
guidelines and standards. fonts colour, data visualisation and evaluation methods you will
use in your coursework.
From your earlier focus groups you should also have at least 3 initial very low level
prototypes and hopefully be able to explain which one of them you will be taking forward to
the low level prototype stage.
Please make use of this time effectively as I really want you to do well in your coursework.

Kind regards
Mary
o

Designing for the small screen File

Section 10 Colour and the Golder Ratio

In the lecture this week we will be exploring the power of colour and the golden ratio. This will
contribute to the learning outcome of "Apply the concepts of colour theory. font terminology,
layout and graphic design in terms of visual user interface design".
In the labs you should write your conclusion drawing together key facts that would provide
evidence of "proof of concept" to relevant parties.

Section 11 - Toggle

In this session we will be exploring the compromises which are made when balancing Function
and Form. This will contribute toward the learning outcome of "The student will: develop high
level cognitive skills with respect to relating theoretical concepts to practical implementations;
develop high level key transferable skills in problem solving and decision making;
communication skills; working with others and working to deadlines; present work in a variety
of ways including a report and a demonstration."
In the lab session you will demonstrate your work to the tutor for formative feedback and
this is noted in the register.
o

Read Chapter 11: Balancing Function and Fashion Background Reading

Course Textbook

This week there are no formal lectures as it provides a day for you to bring your
coursework up to the stage of a final draft. I will be available for consultations
during this week - either by skype, email, or by appointment.

Please check your work carefully against the marking criteria at this stage.

How to achieve the best possible grade File

Section 12 Review and Consolidation

The one hour session will review and consolidate the topics we have covered
in this course.

The remaining two hours will be devoted to coursework demonstrations; either in the lecture
or laboratories.
Review and Consolidation File

Thank you for being such a wonderful class and I wish you every success for
your final degree and future employment.

Take care and have a wonderful life.

Mary