User Interface Design G52UID Milena Radenkovic Introduction

Goals of this module Provide students with the knowledge and skills required to design usable applications Theory goals Appreciate why user interface design is important Knowledge of design process and design and evaluation methods Knowledge of guidelines for good interface design Understand the future trajectory of interfaces Practice goals Gain practical experience in developing Graphical User Interfaces using Java/Swing)

Module structure Introduction (1 lecture) The design process (1) Understanding the user (3) Designing graphical user interfaces (3) Programming graphical user interfaces with Swing and Java (6) Evaluating interfaces (3) Immersive and ubiquitous interfaces (2)

Supporting materials Slides, code examples, courseworks and other supplementary materials at: Background texts: Ben Schneiderman, Designing the user interface: strategies for effective human computer interaction, Addison Wesley

Lectures and labs Thursday, 11:00 in CTF-LT3 Friday, 13:00in CTF-LT2 Optional laboratory sessions in November (details to follow later on)

Assessment Two assessed courseworks (no exam!) User requirements and design tasks. Set 20 th October and due 3 rd November. Worth 40% Prototype implementation and evaluation tasks. Set 3 rd November and due 8 th December. Worth 60%. Well documented design counts as much as developed prototypes Relatively open ended

What kinds of interface are out there?

Command line interfaces

Direct manipulation & graphical user interfaces

Immersive interfaces

Ubiquitous Interfaces

The co-evolution of hardware, interface and users Punched cards Character displays and keyboards Graphical displays, keyboards and mice Immersive hardware Wireless and mobile hardware Command line interfaces Direct manipulation - graphical user interfaces Immersive, ambient, embedded, wearable, tangible etc. time BoffinsWorkersEverybody

User-centred design Put the user – not the system – as the central focus of design Designing interfaces that are usable: Learnable Memorable Efficient – speed and errors Satisfying – or even inspiring Organisationally and socially appropriate Legal and ethical

Why user-centred design? Safety – prevent stupid things from happening Productivity – make it easier to do sensible things Pleasure – make using computers a fulfilling experience Reduce development costs

Usability Cost-Benefit Analysis The costs – extra effort required Person-days to apply different ‘user-centred’ methods Preparation time Application time Documentation time Other costs Payment of participants Material/equipment costs High cost Low cost Heuristic/expert evaluation Laboratory trials Field trials

The benefits Development – how much does it cost to change a system at different stages of development? 1.5 units of project resource during conceptual design 6 units during early development 60 during systems testing 100 during post-release maintenance Sales –attractiveness and customer satisfaction Use – reduced task time, fewer errors, reduced training time, reduced staff turnover due to higher satisfaction and motivation Support – less training and time spent answering questions

The nature of user-centred design More than coding Understanding design requirements Evaluating how people use interfaces Aesthetics – beauty, simplicity and consistency Documentation Development Multi-disciplinary: Computer science drawing on Psychology, Sociology, Art and design Collectively known as Human-Computer Interaction (HCI or sometimes CHI)

Hypothetically … Company with 1000 employees updates its Intranet site A short laboratory study identifies interface improvements that shave one minute off of the average time an employee takes to find information This costs 20 days at a rate of £300 = £6000 The benefit in productivity alone is: 1 minute x 1 visit per week x 48 weeks x 1000 employees = 800 hours saved Average employee costs £60K per year (salary + overheads) and works 1800 hours a year (7.5 hours per day x 5 days x 48 weeks) 800 hours is worth roughly £27,000 (per year!)