Interfaces

Sara Muneeb
[email protected]
Computer Science Department
Introduction
An interface is a portal for
interaction between two entities.
Interface Types

Command Line Graphical

Multimedia VR
Web Mobile
Appliance Voice
Pen Touch
Gesture Haptic
Multimodal Sharable
Tangible AR
Wearable Robots and Drones
Brain Computer Interaction Smart
Command Line Interfaces
Command Line Interfaces
Command Line Interfaces

Second Life command-based

interface for visually impaired
users
Graphical User Interfaces
The original GUI was called WIMP

Windows: Sections of the screen that can be scrolled,

stretched, overlapped, opened, closed, and moved using a
mouse

Icons: Pictograms that represent applications, objects,

commands, and tools that are opened or activated when
clicked on

Menus: Lists of options that can be scrolled through and

selected in the way a menu is used in a restaurant

Pointing device: A mouse controlling the cursor as a point

of entry to the windows, menus, and icons on the screen
Graphical User Interfaces

The boxy look of the first generation of GUIs

WIMP/GUI

Simple smartwatch menus with one, two, or three options

Windows Design

Microsoft Edge browser showing thumbnails of

top sites visited and suggested highlight pages.
Dialogue Box
Confirmations, error messages, checklists, and forms are
presented through dialog boxes. Information in the dialog
boxes is often designed to guide user interaction, with the
user following the sequence of options provided.
Menu Design
 Flatmenus are good at
displaying a small
number of options at the
same time or where the
size of the display is
small.

 Expanding menus enable

more options to be shown
on a single screen than is
possible with a single flat
menu list.
Menu Design
 Cascading menu provides
secondary and even
tertiary menus to appear
alongside the primary
active drop-down menu.

 Mega menu, in which

many options can be
displayed using a 2D
drop-down layout.
Menu Design
 Collapsible menus provide
an alternative approach
to expanding menus in
that they allow further
options to be made visible
by selecting a header.

 Contextual menus provide

access to often-used
commands associated
with a particular item, for
example, an icon.
 Icon Design
 Isomorphic : have direct mapping between what is
represented and how it is represented.

 Analogies, associations and conventions: a

combination of objects and symbols that captures
the salient part of the action

Two styles of Apple icons used to represent different kinds of functions

Icon Design

2D icons designed for (a) a smartphone and (b) a smartwatch

Multimedia
Multimedia, as the name implies, combines different
media within a single interface, namely, graphics, text,
video, sound, and animation, and links them together
with various forms of interactivity.

An example of a multimedia learning app designed for tablets A

Dynalinking
Where information depicted in one
window explicitly changes in relation
to what happens in another.
Other Examples
ABCmouse
: Educational Games, Books, Puzz
les & Songs for Kids & Toddlers
First Person: Donald Norman, Def
ending Human Attributes in the A
ge of the Machine on Vimeo
Virtual Reality
The illusion of participation in a synthetic
environment rather than external observation of
such an environment. (Gigante, 1993)

The 3D graphics can be projected onto Cave

Automatic Virtual Environment (CAVE) floor and
wall surfaces, desktops, 3D TV, headsets, or
large shared displays, for instance, IMAX
screens.

Presence, in this case, means “a state of

consciousness, the (psychological) sense of
being in the virtual environment
Virtual Reality
Different viewpoints : DOOM (1st
person view) / Tomb Raider
(Avatar)

Advance headtsets: Oculus Quest

2, HTC Vive, Samsung Gear VR
Other Examples
Magic Leap Studios | Project Crea
te
We Wait - Trailer for New Interacti
ve VR Project
iFLY Virtual Reality
Website Design
To make them applicable to website
design, focusing on simplicity, feedback,
speed, legibility, and ease of use.

The use of graphical elements (such as

background images, color, bold text, and
icons) can make a website look
distinctive, striking, and pleasurable for
the user when they first view it and also
to make it readily recognizable on their
return.
Breadcrumb Navigation
Breadcrumbs are category labels
that appear on a web page that
enable users to peruse other
pages without losing track of
where they have come from.
Responsive Designs
Mobile Devices
Appliances
Appliances include machines for
everyday use in the home (for
example, washing machines,
microwave ovens, refrigerators,
toasters, bread makers, and
smoothie makers).
Voice User Interfaces (VUI)
A voice user interface (VUI)
involves a person talking with a
spoken language app, such as a
search engine, a train timetable, a
travel planner, or a phone service.
Pen Based Devices
Pen-based devices enable people
to write, draw, select, and move
objects on an interface using light
pens or styluses that capitalize on
the well-honed drawing and writing
skills that are developed from
childhood.
Touch Screen
SingleTouch
Screens

Multitouch
Screens
Gesture Based Systems
Gestures involve moving arms and
hands to communicate.
Haptic Interfaces
Haptic interfaces provide tactile feedback, by
applying vibration and forces to the person,
using actuators that are embedded in their
clothing or a device that they are carrying, such
as a smartphone or smartwatch.
Vibrotactile feedback can also
be used to simulate the sense of
touch between remote people
who want to communicate.

Ultrahaptics which creates the

illusion of touch in midair by
ultrasonic waves.

Exoskeletons haptics are also

being embedded into clothing.
Multimodal Interfaces
Multimodal interfaces are intended to
enrich user experiences by multiplying
the way information is experienced and
controlled at the interface through using
different modalities, such as touch,
sight, sound, and speech.
Multimodal Interfaces
Interface techniques that have been
combined for this purpose include speech
and gesture, eye-gaze and gesture, haptic
and audio output, and pen input and
speech.

The assumption is that multimodal

interfaces can support more flexible,
efficient, and expressive means of human–
computer interaction that are more akin to
the multimodal experiences that humans
encounter in the physical world.
Sharable Interfaces
Shareable interfaces are
designed for more than one
person to use.
It provides multiple inputs and
sometimes allow simultaneous
input by collocated groups
Examples
1. SmartTable
2. Circle Twelve’s DiamondTouch
Sharable Interfaces

A SmartBoard in use during a meeting

Shareable Interfaces

Mitsubishi’s interactive tabletop

interface
Sharable Interfaces
Another type of shareable
interface is software platforms that
enable groups of people to work
together simultaneously even
when geographically apart
Examples
◦ Google Docs
◦ Figma
◦ Balsamiq
Tangible Interfaces
Tangible interfaces use sensor-based
interaction, where physical objects, such
as bricks, balls, and cubes, are coupled
with digital representations.

When a person manipulates the physical

object(s), it is detected by a computer
system via the sensing mechanism
embedded in the physical object,
causing a digital effect to occur, such as
a sound, animation, or vibration
Tangible Interfaces
 There is no single locus of control or
interaction
 Instead of just one input device, there is a
coordinated interplay of different devices and
objects
 There is also no enforced sequencing of
actions and no modal interaction.

Magic Cube
(Learn to Code)
Augmented Reality
Augmented reality (AR) is an enhanced
version of the real physical world that is
achieved through the use of digital
visual elements, sound, or other
sensory stimuli and delivered via
technology.
Augmented Reality

Augmented reality overlay used on a car windshield

Mixed Reality
Mixed reality is a term used to
describe the merging of a real-
world environment and a
computer-generated one.
Wearable
Wearables are a broad category of
devices that are worn on the body.
These include smart watches, fitness
trackers, fashion tech, and smart
glasses.
Exoskeleton clothing
Google Glass
Vuzic Blade
Snap’s Spectacles
Talking Shoe
Robots and Drone
Robots have been around for some time, most
notably as characters in science-fiction movies,
but they also play an important role as part of
manufacturing assembly lines,
as remote investigators of hazardous locations (for
example, nuclear power stations and bomb disposal),
and as search and rescue helpers in disasters (for
instance in forest fires) or faraway places.
Console interfaces have been developed to
enable humans to control and navigate robots
in remote terrains, using a combination of
joysticks and keyboard controls together with
cameras and sensor-based interactions.
Examples
Drones
Drones are a form of unmanned
aircraft that are controlled
remotely.
Brain Computer Interfaces
Brain–computer interfaces (BCI) provide
a communication pathway between a
person’s brain waves and an external
device, such as a cursor on a screen or
a tangible puck that moves via airflow.
Examples
Brain–computer interfaces have
also been developed
to control various games.
to enable people who are
paralyzed to control robots
Smart Interfaces
The motivation for many new
technologies is to make them
smart, whether it is a
smartphone,
smartwatch,
smart building,
smart home,
or smart appliance (for example smart
lighting, smart speakers, or virtual
assistants).
Smart Interfaces
Smart devices are often used to suggest
that the device has some intelligence, and
it is connected to the Internet.

Smart devices are automated, not requiring

users to interact with them directly

The goal is to make them context-aware,

that is, to understand what is happening
around them and execute appropriate
actions.
Example
NestThermostat
Smart buildings
◦ Human Building Interaction
Natural User Interfaces and
Beyond
A natural user interface (NUI) is designed to
allow people to interact with a computer in
the same way that they interact with the
physical world , using their voice, hands,
and bodies.

NUIs enable users to

speak to machines,
stroke their surfaces,
gesture at them in the air,
dance on mats that detect feet movements,
smile at them to get a reaction, and so on…
Natural User Interfaces and
Beyond
 An emerging class of human–computer
interfaces are those that rely largely on
subtle, gradual, and continuous changes
triggered by information obtained
implicitly from the user together with the
use of AI algorithms that are coded to
learn about the user’s behavior and
preferences.

 Theseare connected with lightweight,

ambient, context-aware, affective, and
augmented cognition interfaces
Which Interface?
The requirements for the user
experience that have been
identified will determine
what kind of interface might be
appropriate and what features to
include.

It will also depend on the interplay

of a number of factors, including
reliability, social acceptability,
Conclusion
Types of Interfaces
Natural Interfaces
Which Interface