User Interface Design

CS140 P: Software Engineering

Dr. Patrick D. Cerna

What is a User Interface?
◼ UI is the basic format allowing a user to
operate a program
 Command Line (CLI) is text-based
 Graphical User Interface (GUI) relies on
pictures
◼ Both user interfaces can be applied to
biomedical informatics
 But when?
UI Components
◼ Most common GUI configuration
 WIMP – window, icon, mouse, pointer
◼ CLI configurations can vary
 Scripts
 TUI – looks like graphic, but comprised of text
characters
Design Principles

◼ Know your users!

Needs and goals
◼ Special professional jargon
Computer literacy
◼ Emulate a familiar system
◼ Nobody loves an ugly GUI
Human-Computer Interaction
◼ Study of interactions between computers
and people
 Interdisciplinaryfield draws from informatics,
psych, cog. sci., comp. sci., etc.
 Clear understanding of HCI improves user-
friendliness
How to Make It All Better

◼ User involvement
Model user habits indirectly
Direct user involvement better, but
complicated
◼ Medical information specialists
 Mediatebetween users and software
developers
How to Make It All Better (con’d)

◼ User testing
Prototyping
Spiral model
◼ Evaluation from Users
The user interface
◼ User interfaces should be designed to
match the skills, experience and
expectations of its anticipated users.
◼ System users often judge a system by its
interface rather than its functionality.
◼ A poorly designed interface can cause a
user to make catastrophic errors.
◼ Poor user interface design is the reason
why so many software systems are never
used.
UI design principles
◼ UI design must take account of the needs,
experience and capabilities of the system
users.
◼ Designers should be aware of people’s
physical and mental limitations (e.g.
limited short-term memory) and should
recognise that people make mistakes.
◼ UI design principles underlie interface
designs although not all principles are
applicable to all designs.
User interface design principles
Principle Description
User familiarity The interface should use terms and concepts which are drawn
from the experience of the people who will make most use of the
system.
Consistency The interface should be consistent in that, wherever possible,
comparable operations should be activated in the same way.
Minimal surprise Users should never be surprised by the behaviour of a system.
Recoverability The interface should include mechanisms to allow users to
recover from errors.
User guidance The interface should provide meaningful feedback when errors
occur and provide context-sensitive user help facilities.
User diversity The interface should provide appropriate interaction facilities for
different types of system user.
Multiple user interfaces
Graphical user Unix shell
inter face inter face
(Gnome/KDE) (ksh/csh)

X-windows GU I Command
mana ger langua ge
interpreter

Linux operating system

LIBSYS interaction
◼ Document search
 Users need to be able to use the search
facilities to find the documents that they need.
◼ Document request
 Users request that a document be delivered
to their machine or to a server for printing.
Web-based interfaces
◼ Many web-based systems have interfaces
based on web forms.
◼ Form field can be menus, free text input,
radio buttons, etc.
◼ In the LIBSYS example, users make a
choice of where to search from a menu
and type the search phrase into a free text
field.
LIBSYS search form
LIBSYS: Search

Choose co llection All

Keyword or phrase

Search using Title

Adjacent words Yes No

Search Reset Cancel

Information presentation
◼ Information presentation is concerned with
presenting system information to system
users.
◼ The information may be presented directly
(e.g. text in a word processor) or may be
transformed in some way for presentation
(e.g. in some graphical form).
◼ The Model-View-Controller approach is a
way of supporting multiple presentations of
data.
Information presentation
Model-view-controller
Analogue or digital
presentation?
◼ Digital presentation
 Compact - takes up little screen space;
 Precise values can be communicated.

◼ Analogue presentation
 Easier to get an 'at a glance' impression of a
value;
 Possible to show relative values;
 Easier to see exceptional data values.
Presentation methods

1
0 10 20
4 2

Dial with needle Pie char t Ther mometer Horizontal bar

Displaying relative values

Pressur e Temper atur e

0 1 00 200 300 400 0 25 50 75 100
Data visualisation
◼ Concerned with techniques for displaying large amounts
of information.
◼ Visualisation can reveal relationships between entities
and trends in the data.
◼ Possible data visualisations are:
 Weather information collected from a number of sources;
 The state of a telephone network as a linked set of nodes;
 Chemical plant visualised by showing pressures and
temperatures in a linked set of tanks and pipes;
 A model of a molecule displayed in 3 dimensions;
 Web pages displayed as a hyperbolic tree.
Colour displays
◼ Colour adds an extra dimension to an
interface and can help the user
understand complex information
structures.
◼ Colour can be used to highlight
exceptional events.
◼ Common mistakes in the use of colour in
interface design include:
 The use of colour to communicate meaning;
Colour use guidelines
◼ Limit the number of colours used and be
conservative in their use.
◼ Use colour change to show a change in
system status.
◼ Use colour coding to support the task that
users are trying to perform.
◼ Use colour coding in a thoughtful and
consistent way.
◼ Be careful about colour pairings.
Error messages
◼ Error message design is critically
important.
Poor error messages can mean that a
user
rejects rather than accepts a system.
◼ Messages should be polite, concise,
consistent and constructive.
◼ The background and experience of users
should be the determining factor in
Good and bad message design
Mobile User Interface Design:
◼ Developers can concentrate on the precise
features cause of constraints on the devices.
◼ Application can also use exciting new
features like:
 Motion
 Gestures: zooming, swiping, tapping, turning, and
shaking
3) UNDERSTANDING MOBILE
INFORMATION DESIGN
◼ The visual display of information is how
people connect with loved ones,
colleagues, and friends.
◼ Information Display
 A microwave has a simple display.
Design Patterns
◼ Navigation
 Good design makes it clear how
users can move through and use
application features.
 Annunciator Panel
◼ An annunciator panel, seen at the top
of Figure 4-7, gives information
on the state of a mobile device.
Design Patterns
◼ Fixed Menu
 A menu that remains fi xed to the viewport as users roam content is useful in
many situations:

➤ When users need immediate access to frequently selected functionality on

multiple screens

➤ When a reveal able menu is already used on the same screen

➤ When a lack of controls, conflict with key interactions, or low discovery

makes a reveal able
menu a poor choice.
Design Patterns
◼ Expandable Menu
 When all function options for one
page cannot fit on the viewport, an
expanding menu can provide
selectively available options.
 A gesture, like a swipe or double
tap, may prompt the reveal as well
as selecting an on-screen icon.
 Users may exit a menu using a
back button, a close button that is
part of the revealed menu list, or by
toggling with the same gesture or
soft key that prompted the reveal.
Design Patterns
◼ Scroll
 As in the case of a reveal able
menu giving additional functionality,
there
will often be more content on a
screen than can be seen in the
device viewport.
Design Patterns
◼ Scroll
Design Patterns
◼ Notifications and Feedback
 If the user needs new information,
application creators must use
notifications. These prompts pause
ongoing tasks, and enable users to
change processes and behaviors
according to the new information or
feedback.
Design Patterns
◼ Content and Controls
 Input mechanisms, the controls users
manipulate to enter or modify data,
can be enhanced during
the design process by keeping a few
key concepts of mobile usability.
Design Patterns
 Reveal Content
◼ You can display content either as a full
page or revealed in context. When you
use a full-page layout, the user should
not need to constantly bounce back
and forth between pages:
Design Patterns
◼ Intervening Screens
 Application branding with the title of
the application
 Content is loading
 In between screens
UX/UI Design for IoT Mobile
Apps
◼ IoT sector is getting crowded.
Established tech companies, device
producers and myriad emerging
startups enhance their offerings with
connected technology and big data
services and roll out innovative IoT
systems to the market.
Personalize user experience
Enable remote control
◼ Adding a mobile
app to an IoT
system can be
the easiest way
to enable remote
control for end-
users.
Make push notifications and
alerts smart
◼ Context also plays an important role in
making design decisions for
notifications and alerts.
Tailor data visualization and
dashboards
◼ Consider the
limited screen
space and,
therefore, need to
make important
design choices on
how to organize
dashboards and
optimize IoT data
visualization.
THE END