Usability on TV

Innovative User Interfaces Depicted in Current TV Series and their Potential

to Inspire Actual Interfaces

Yang Zhong

and Monique Janneck

Digital Media, University of Bremen, Bremen, Germany

Electrical Engineering and Computer Science, Luebeck University of Applied Sciences, Luebeck, Germany

Keywords: Interaction Design, Innovative Interfaces, Fictional Displays.

Abstract: Current television series, especially those revolving around or dealing with information technology or

technical issues in general, often depict interesting ideas for user interfaces or interaction techniques.

Especially, user interfaces are often shown to be very intuitive and easy to use: Frequently protagonists use

unknown interactive systems without prior training and are able to conduct complex operations with the

system. This paper analyzes user interfaces and interaction techniques depicted in “CSI: Miami”, a widely

known US TV show. Possibilities and potentials to inspire actual user interfaces are explored.

1 INTRODUCTION

Everyday millions of people get in touch with the

most sophisticated and stunning technology,

amazing, efficient, and easy-to-use interfaces and

novel interaction techniques–but not at work or

while using their private computers or electronic

devices, but sitting in front of the TV watching

current TV shows such as the “CSI: Crime Scene

Investigation” series. Such fictional works often

depict interesting ideas for user interfaces or

interaction techniques. Especially, user interfaces are

often shown to be very intuitive and easy to use:

Frequently protagonists use unknown interactive

systems without prior training and are able to

conduct complex operations with the system. So we

asked ourselves: Could we as designers of

interactive systems learn something from watching

Usability on TV? Could these fictional technologies

inspire actual interfaces? Do they conform to design

principles from usability research or do they just use

bogus show effects that would not be practical in

reality?

In this paper we take a closer look at innovative

user interfaces depicted in the well-known US TV

series “CSI: Miami”. As a basis for our analysis we

used the following main areas of interaction design

(cf. Shneiderman and Plaisant 2010, Rogers et al.,

2011, Heim 2008): Metaphors and mental models,

direct manipulation, user control, menu design, and

information search.

2 ANALYSIS

The users of CSI interfaces systems are all well-

trained experts. Therefore, from an interaction

design point of view, the systems depicted in “CSI:

Miami” were designed for expert users. However,

likewise, they are designed to attract the audience by

showing advanced, stylish, and fun-to-use

technology.

Generally, regarding the presentation and

aesthetics of the interfaces shown in “CSI: Miami” it

can be remarked that dark colours are widely used as

a background, while text and graphical elements are

usually brightly coloured. Quite interestingly, this

use of colour resembles early command-line

interfaces rather than modern GUIs. Furthermore,

this kind of colour use seems rather questionable

from an ergonomic point of view. However, this

kind of presentation is presumably used to make it

easier for the audience to detect the information

presented on the screen while sitting in front of the

TV.

270

Zhong Y. and Janneck M..

Usability on TV - Innovative User Interfaces Depicted in Current TV Series and their Potential to Inspire Actual Interfaces.

DOI: 10.5220/0004352302700273

In Proceedings of the 9th International Conference on Web Information Systems and Technologies (WEBIST-2013), pages 270-273

ISBN: 978-989-8565-54-9

 2013 SCITEPRESS (Science and Technology Publications, Lda.)

2.1 Metaphors and Mental Models

Command languages are widely used because the

expert users are comfortable operating with

complicated command languages. However, some

metaphors can still be found in the series.

Figure 1: Interface of DNA identification.

In the DNA analysis interface shown in Figure 1, the

interface displays a mixture of changing colourful

bars when the DNA sample is being checked. It

provides a direct impression of the DNA

identification process while waiting for the results.

Additionally, the metaphor conveys the idea of each

DNA item being checked and compared with the

DNA database. Such metaphors establish the

connection between human lab work and automatic

DNA identification done by the computer. It can be

seen as a way to establish user trust in autonomous

systems.

2.2 Direct Manipulation

In “CSI: Miami” direct manipulation is widely used

to support the scientists to investigate evidence such

as fingerprints, DNA samples, soil samples etc. As

an innovative display, a multi-touch table together

with a huge monitor helps the scientists to analyze

the current case.

In the example shown in Figure 2, the

investigators simply place a mobile phone on the

multi-touch table and the contents of the storage

chip are automatically displayed on the table, which

also functions as a monitor. SMS and pictures stored

on the mobile phone are displayed as icons so that

the officers can check them by touching and clicking

on the desk. Users can zoom in and out the pictures

and read specific SMS by selecting it with their

fingers.

Figure 2: The multi-touch desk interface.

In the interface shown in Figure 3, an agent uses a

pen to draw the possible escape route of a criminal.

In this case, direct manipulation is realized through a

pointing device instead of multi-touch screen. This

resembles real-life applications in which pointing

devices are known to be more precise than touch

gestures: Drawing the track by fingers won’t be

precise enough for calculating and navigation. Since

in this case precision is important for the

investigation, this can be considered as a hint that

the designers of the fictional displays nevertheless

aimed for realistic designs. In real life, professional

digital artists also mostly use a professional drawing

pad together with a capacitive pen. Furthermore, the

pen device symbolizes the traditional drawing action

and therefore is more easily accepted by the users as

well as the audience.

Figure 3: Virtual spatial interface.

2.3 User Control

The underlying principle of user control design is to

offer users what they need while protecting them

from making risky and irreversible operations.

In “CSI: Miami”, the systems mostly allow users

to make changes and requests freely. This seems

appropriate as expert users like the investigators are

UsabilityonTV-InnovativeUserInterfacesDepictedinCurrentTVSeriesandtheirPotentialtoInspireActualInterfaces

271

very familiar with the systems and know how to get

satisfying results. Thus, the system serves as an

assistant that offers adequate information according

to the user’s request.

Figure 4: Image processing interface.

An example of applying user control is the image-

processing interface shown in Figure 4. In one

episode, the suspect successfully hides the evidence,

giving the investigators a hard time. Therefore

photographs taken by the suspect are inspected

several times to find any possible evidence. The

image processing system allows users to enlarge the

picture, overview the gallery, and analyse the picture

due to different instructions. Users control the image

processing system, which detects the appropriate

filter and analysis strategy. In this crime case, users

filter the reflection on the car taillight and enlarge

the picture. After the image is processed the eye of

victim is discovered. But without the user’s notice

and direction, this evidence would have remained

uncovered. In a word, users take control of the

decision-making procedure and the system executes

users’ instructions.

2.4 Menu Design

Using familiar terminology and suitable structure is

important for menu design. In the interface shown in

Figure 5, reported crime logs are stored in a

database, which can be looked up by date or

searched for certain logs. In order to support users to

work more effectively, task-related menu

organization is applied here. Distinctive and

comprehensible menu categories are listed in the left

side so that users can make selections confidently

and know clearly what will happen afterwards.

Often hierarchical decompositions are applied in

menu organization because it is a natural and

comprehensible structure. Furthermore, every item is

categorized into one group according to its

characteristics.

Figure 5: Miami Dade Log interface.

Unlike these principles, in the car license search

interface depicted in Figure 6 the search results are

displayed distributed across the screen, with the

agent simply grasping the appropriate information.

Figure 6: Interface of car license search.

This strategy seems questionable since large

quantities of information might cause severe

problems with this kind of display. It is difficult for

users to leave out the unwanted information and get

straight to the required object. A simple list of

results would probably enable users to filter the

information more efficiently than a scattered map of

matches. So in this case, the design can

rather be

seen as a treat to the audience than actually serving

with a certain purpose.

2.5 Information Search

Information search is one of the most important

tasks performed in “CSI: Miami” because of the

numerous suspect profiles and related information

libraries. Powerful search methods are needed and

smooth technology is used to support the task.

WEBIST2013-9thInternationalConferenceonWebInformationSystemsandTechnologies

272

Figure 7: Flight search interface.

In the interface shown in Figure 7, natural language

is taken as a search language instead of short

keyword search or Structured Query Language

(SQL). This is an example of sophisticated search

techniques that are not yet working successfully in

real-life systems.

3 CONCLUSIONS

In our view, the interaction styles and interface

designs presented in movies and TV series such as

“CSI: Miami” definitively deserve interface

designers’ attention. The analysis shows that the

fictional user interfaces depicted in a TV series like

“CSI: Miami” conform to quite a great extent with

actual interface design principles, and that guidelines

are mostly applied in a sensible way. Nevertheless

they incorporate some innovative ideas that might

inspire actual interfaces, such as well organized and

task-related but yet aesthetically appealing and easy-

to-scan menus. Furthermore, as most interface

elements are quite large (much larger than one

would expect on a regular desktop screen) in order

to make them readable for a TV audience these

displays might inspire designers of smartphones and

other mobile device applications, where display

space is usually limited.

As for hardware design, multi-touch and also

multi-use panels and tables are maybe the most

spectacular devices shown in “CSI: Miami”.

However, systems like these are already available,

such as Smartboards or the Microsoft Pixelsense

tables. Regarding these technologies, “CSI: Miami”

does not show hardware innovations but rather

examples for innovative use cases for these systems,

such as creative teamwork in complex problem

solving tasks. Furthermore, it shows that the

strengths of these systems would be to integrate a lot

of information from various sources and also

different applications.

Surprisingly few interfaces can be deemed as

outright unrealistic: Among them are some fancy

graphical displays and effects that in real life would

probably rather annoy users, and also the use of

natural language which has a long tradition in

computer science research but still mostly falls short

of expectations in current implementations.

In our view analysing fictional displays like

those shown on TV is worth further research

activities. More detailed analyses could be done for

specific areas, e.g. menu design or visualization

techniques. Contemporary series or movies like

“CSI: Miami” are especially suitable since they are

situated in the beginning of the 21

century and do

not display mere science fiction. Furthermore, other

artwork and also written novels might be interesting

material to explore.

REFERENCES

CSI: Miami. Season 7. Produced by Jerry Bruckheimer.

CBS Television Studios.

CSI: Miami. Season 9. Produced by Jerry Bruckheimer.

CBS Television Studios.

Heim, S., 2008. The Resonant Interface. HCI Foundations

for Interaction Design. Pearson Addison-Wesley.

Boston.

Rogers, Y., Sharp, H., Preece, J., 2011. Interaction design.

Beyond human-computer interaction. J. Wiley & Sons.

New York, NY, 3

edition.

Shneiderman, B., Plaisant, C., 2010. Designing the user

interface. Strategies for effective human-computer

interaction. Addison-Wesley. Boston, 5

edition.

UsabilityonTV-InnovativeUserInterfacesDepictedinCurrentTVSeriesandtheirPotentialtoInspireActualInterfaces

273