APPLYING HCI DESIGN PATTERNS TO PDA APPLICATIONS
ON ART MUSEUMS
R. Tesoriero, M. Lozano, J. A. Gallud and F. Montero
Laboratory of User Interaction and Software Engineering
mputer Systems, University of Castilla-La Mancha, AlDepartment of Co bacete, Spain
Keywords: Mobile technology, Art Museums, PDA, user interface.
Abstract: Mobile activities such as m-commerce, m-learning, etc, are being increasingly adopted by people. Actually,
new mobile activities are being explored, and one of them is supporting Augmented and Immersive Reality
(A&IR) features on physical spaces. An example of this vision is exposed in at The Cutlery Museum in
Albacete, know as MCA in Spain. Based on users’ suggestions and usability reports, we discovered a set
problems and improvements that could leverage HCI in a future new version of the application. To design
the new version we used HCI design patterns for Space Structured Applications (SSA). As MCA
application is a SSA, this paper presents a proposal of a new version of UI for the MCA application
applying these patterns.
1 INTRODUCTION
Nowadays, mobile activities such as m-commerce
(Elliot and Phillips, 2004) (Gary and Simon, 2002),
m-learning (Georgiev T. et al., 2004), etc, are being
increasingly adopted by people. For example,
(Upkar V. and Vetter R., 2002) estimate that 237
billion mobile terminal users have conducted m-
commerce in 2002, generating revenues of more
than u$s14 billions.
New mobile activities are being explored, and
one of them is supporting Augmented and
Immersive Reality (A&IR) features on physical
spaces to improve information availability.
Main reasons to use A&IR are physical space
constraints and information media restriction to text
and image only. Audio and videos are difficult to
play in public because people must be
“synchronized” at the beginning of reproduction.
Improvement on information availability started
on the Web. Examples of this view were: The
Museum Educational Site Licensing Project, the Art
Museum Image Consortium at
http://www.amn.org/AMICO/ , the Virtual Museum
of Canada at http://artsmia.org/directories/,
Minneapolis Institute of Arts at
http://artsmia.org/directories/ and the Online
Archive of California at http://www.oac.cdlib.org/.
Some authors (Léger, 2004) (Georgiev T. et al.,
2004) suggest that m-commerce and m-learning are
the “next step” of Web applications.
An example of this vision applied to art
museums is exposed in (Gallud J. et al., 2005) at The
Cutlery Museum in Albacete, know as MCA in
Spain. The MCA is an emblematic institution of the
city that is currently using PDAs to guide visitor
through the museum.
These devices have several limitations. An
obvious one is PDA screen size. So, user interface
should be simplified without sacrificing usability.
Based on users’ suggestions and usability
reports, that followed the CIF (Common Industry
Format for Usability Reports) standard defined by
the ISO/IEC DTR 9126-4 (Lozano M. et al., 2007)
we discovered a set problems and improvements that
could leverage HCI in a future new version of the
application.
A catalogue of HCI design patterns for Space
Structured Applications (SSA) (Tesoriero R. et al.,
2007) presented a collection of design patterns was
published at (Tesoriero R., Montero F., et al, 2007).
As MCA application meets SSA characteristics,
this paper presents a proposal of a new version of
the UI based on HCI design patters presented in
(Tesoriero R. et al., 2007).To aboard these ideas, the
article is structured as follows.
490
Tesoriero R., Lozano M., A. Gallud J. and Montero F. (2007).
APPLYING HCI DESIGN PATTERNS TO PDA APPLICATIONS ON ART MUSEUMS.
In Proceedings of the Third International Conference on Web Information Systems and Technologies, pages 490-496
DOI: 10.5220/0001292104900496
Copyright
c
 SciTePress

First, basic functionality and interface interaction
of old application interface will be exposed. A
detailed description and analysis of main issues to
aboard are also described. Once actual system
interface problems and improvements are described,
new user interface is explained pointing HCI design
patterns application. Finally, conclusion and future
work is established.
As we mentioned at Introduction, this application
will be used as an electronic guide for MCA visitors.
It provides four ways of guiding visitors.
1. Recommended routes
2. Guided tour
3. Access to finder
4. Unguided tour
2 MCA USER INTERFACE
To analyze UI problems and improvements we will
summarize how user interacts with the application
actually.
Figure 1 show UI screen transitions. To depict
interface behaviour a state diagram-like was used.
Each box represents a screen, arrows a transition
from one screen to another. Actions that perform a
screen transition are identified by a label above the
arrow line. An arrow without label expresses an
implicit transition (more than one, expresses
selection).
2.1 Recommended Routes
Recommended Routes mode was designed to guide
users interested in specific subjects. Samples of
these roads may be knives of XVII century or
French scissors. To provide this service, a list of
recommended routes is displayed to the user. Once a
route is selected, first piece location is shown at
exhibition on screen. User can see selected piece
information, by pressing ver Pieza (see Figure 8); or
can select to select next piece in order, by clicking
on siguiente; or can go to previous piece clicking on
anterior (see Figure 2).
Figure 2: Recommended Routes.
Figure 1: UI screen transitions.
APPLYING HCI DESIGN PATTERNS TO PDA APPLICATIONS ON ART MUSEUMS
491

2.2 Guided Tour
This mode was designed as a general purpose route
to guide inexperienced visitors or users through the
whole building.
Functionality and behaviour is identical to a
selected route on “Recommended Routes”.
2.3 Access to Finder
This screen is used to look for pieces or showcases
on museum. This search can be performed on two
ways. The first one is using piece characteristics
(Figure 3). The second one is by entering the code of
piece or showcase (Figure 4).
Figure 3: Search by piece characteristics.
Figure 4: Search by code of piece.
Once search process is concluded, pieces or a list
of pieces are shown to the user. User may select
pieces and the application displays a screen as
shown in Figure 8.
2.4 Unguided Tour
This mode of guiding allows a user to navigate
across application to get information about pieces
and showcases.
Information is displayed on levels. Three levels
were defined: exhibitions, rooms, showcases and
pieces. User interfaces for each level are defined in
Figure 5, Figure 6, Figure 7 and Figure 8
respectively.
Figure 5: Floor screen.
Figure 6: Room screen.
Figure 7: Showcase screen.
WEBIST 2007 - International Conference on Web Information Systems and Technologies
492

Figure 8: Piece screen.
3 ANALYSIS OF MCA USER
INTERFACE
The system has been working for 18 months
approximately.
People were queried about the system and were
asked to express their feelings about MCA
application.To get general impression about user
satisfaction of MCA application a questionnaire was
prepared according to the CIF (Common Industry
Format for Usability Reports) standard defined by
the ISO/IEC DTR 9126-4. Details and results o of
the study were published on (Lozano et al., 2007).
Finally, to obtain more detailed information
about interface design and usability, we also
presented interface to at least five experts on HCI.
Next, common problems people faced using the
system will be exposed.
First issue users complained the use of stencil to
interact to application. The usage of stencil demands
the user to use both hands to manipulate PDA.
Visitors usually do not have both hands free (they
usually carry some bags).
Second, users do not have the possibility to go
back and forth while they are navigating across
exhibitions. Users usually comply about having to
turn the whole around to get the previous exhibition.
Third, people mentioned they usually get
confused about their position and orientation.
It was difficult to people to identify their
physical position on PDA map and vice versa.
Accessibility issues are really important on
applications that are part public spaces, as museums
for instance.
Although audio was available for users, they
were unable to note where such piece was placed.
Piece location is very important to contextualize it.
If a blind user is listening a description about the
knife, and he knows that this knife was placed on
XVII Century knives room, and user is aware of this
information, he/she may leave the room or not
according to his/her wishes.
As navigation is performed with stencil, blind
people need assistance to manipulate the artefact.
Text is displayed on a fixed size, people that
have sight constraints, may have difficulties to read
textual information. To sum up problems to be
solved, and identify them explicitly, we composed
the following list:
1. Usage of both hands to control PDA
2. Navigation on one way only
3. User orientation and position
4. Accessibility problems
a. Space perception
b. Navigation
c. Text size
4 PROPOSED USER INTERFACE
To overcome with problems described on previous
section we applied HCI design patterns for SSA.
This section begins describing HCI design
patterns purpose and categories. Then a proposal of
user interface for the application is described and
patterns application is explained. Finally, problems
described in previous section are analyzed according
to resulting interface and results of evaluation are
exposed.
Based on Christopher Alexander idea of “pattern
language” as “nothing more than a precise way of
describing someone’s experience of building”
(Alexander et al., 1977) (Alexander, 1979) applied
in architecture and the experience of defining design
patterns in computer science, firstly in programming
community (Gamma et al., 1993), later in HCI
(Tidwell, 1999) (Tidwell, 2005) (Van Welie, 2007)
(Borchers, 2001) (Van Duyne et al., 2002), etc.; a
pattern language for SSA was defined. SSA defines
an environment where patterns should be applied.
The pattern language was presented in (Tesoriero
et al., 2007) and it was divided into four categories.
Each category grouped design patterns that solved
related problems.
Orientation category introduces HCI patterns that
help users to get oriented into a physical space. They
improve virtual/physical synchronization of space in
order to locate users into the space.
Design patterns on Guide category are used to
model routes or paths that users may follow. Paths
can be used to guide users through physical space
based on user preferences.
APPLYING HCI DESIGN PATTERNS TO PDA APPLICATIONS ON ART MUSEUMS
493

Layout patterns were introduced to organize
space structured applications. Screen resolution on
mobile devices is restricted, information to be
displayed is increased due to virtual / physical space
relationship, and extra information related to object
dwelling there. So, it is important to know how to
layout and present this information.
Museums should be available to everyone,
including disabled people. Accessibility category
groups patterns that can be applied to improve
information access to disabled people.
A full catalogue of these patterns can be found at
(Tesoriero R., Montero F., et al, 2007).
User interface of PDA system at MCA is mainly
depicted in figures 9 to 14.
Figure 9: Museum screen.
Figure 10: Building screen.
As previous version of the system, interface is
organized in levels. First and upper level represents
the whole museum (see Figure 9). A museum can be
composed by several buildings. A building may be
composed by several floors (Figure 10). A floor may
be composed by several rooms (Figure 11) and a
room may contain some terminals (Figure 12). A
terminal is a term used to define an object container,
as a showcase. A showcase contains objects as
depicted in Figure 13. Finally, the lower level is
defined by piece information, as shown in Figure 14.
Figure 11: Floor screen.
Figure 12: Room screen.
Figure 13: Showcase screen.
To navigate across spaces we applied Free Will
Navigation. This pattern intent is the provision of a
method to access spaces at any level through
application using cursor keys only.
Up and Down cursor keys are used to select a
space, a piece or a resource in a list. It provided
intra-screen navigation.
WEBIST 2007 - International Conference on Web Information Systems and Technologies
494

Figure 14: Piece resources screen.
Left and right keys provide inter-screen
navigation. Right arrow retrieves the screen related
to the space selected in actual screen. And left arrow
retrieves the “parent” of selected space, i.e. the
screen representing the space that contains actual
space.
For instance, if a user stays in a room, up and
down keys allows a user to select a showcase within
the room, while left takes the user off the room to
show floor view and right get the user into selected
showcase.
This pattern application leads to solutions several
problems stated in previous section.
Free Will Navigation allows the user to navigate
across any space level homogeneously. So
navigation can be performed on every way dealing
with problem 2 (navigation on one way only).
Besides, user may query any level of space at any
time keeping him/her located somehow (this
situation covers problem 3 user orientation and
position).
Free Will Navigation is manipulated by cursor
keys only. Cursors can be used by blind people; so if
we combined this pattern with Space Audio
Perception pattern by adding sounds on space
transitions the application can be used by blind
people (problem 4.2, navigation and 4.1, space
perception for blind people are solved).
Free Will Navigation can be combined with
Landscape pattern too. So, PDA can be used with
one hand only. Landscape proposes to design PDA
application in landscape. A user can handle PDA
with one hand and command cursor keys (and other
keys) with fat toe.
Although Free Will Navigation solves many
problems, it adds a new accessibility problem. Left-
handed and right-handed people should use the
application. To cope with this situation we apply
Right-Left handed users, design pattern. This pattern
proposes control keys switching and screen
mirroring.
To improve user orientation and localization
(problem 2), we applied Signs and Door at back
design patterns.
Signs help users to get oriented when he or she
spends a long a time into a space and get lost there.
A physical sign and a mark in the map are used to
synchronize virtual and physical space get the user
oriented. An example is exposed in Figure 12.
Door at back help users to get oriented when a
space transition occurs. A space transition happens
when a users moves virtually and physically from
one space to another; for instance form a room to
another. The door that was used to get into the room
can be calculated and pattern aim are marking the
door that could have been used and rotate the map to
get probably used door in front of the user, in the
PDA map. An example is exposed in Figure 12, too.
When a text document is reached, Zoom pattern
proposes to use left and right cursor keys to change
font size (bigger and smaller, respectively) and up
and down cursors to scroll text.
5 CONCLUSIONS AND FUTURE
WORK
This article presented problems and possible
improvements for a concrete SSA, the MCA
application.These problems or improvements were:
1. Usage of both hands to control PDA
2. Navigation on one way only
3. User orientation and position
4. Accessibility problems (mainly for blind
people)
a. Space perception
b. Navigation
c. Text size
To cope with previous situation, we applied HCI
design patterns for SSA. These patterns provided us
solutions to most of issues exposed before. They
were Free Will Navigation, Door at Back, Signs,
Landscape, Space Audio Perception, Right-Left
Handed Users and Zoom.
One of the most interesting issues we learned
about these patterns was simultaneous pattern
application. This characteristic allowed us to
combine patterns in order to solve some specific
problem. For example, Free Will Navigation and
Space Audio Perception allow blind users to
navigate across application.
Another interesting issue we found is how a
combination of patterns may lead to a problem but it
can be solved applying another pattern. An example
can be examined on Free Will Navigation and
APPLYING HCI DESIGN PATTERNS TO PDA APPLICATIONS ON ART MUSEUMS
495

Landscape pattern combination that lead to a
problem with Right-Left handed people that is
solved applying Right-Left handed pattern.
At last, based on analysis performed on previous
section we can conclude that patterns were
successfully applied on this situation and provided
us with solutions to HCI problems discovered on
usability evaluations and expert suggestions.
As future work, an implementation of this
interface is planned. Once application is
implemented, we think that a usability evaluation
will be very useful to compare application
performance against old version.
We are also studying location and positioning
technologies to minimize “clicks” and synchronize
user physical position with user virtual position in
the map automatically.
Finally, we think that once new system becomes
in production, we will be able to find new HCI
design patterns for SSA applications to increase our
experience and reuse more solutions easily.
ACKNOWLEDGEMENTS
We would like to thank the Spanish CICYT project
TIN2004-08000-C03-01 for funding this work,
which was also supported by the grant PCC-05-005-
1 from JCCM
REFERENCES
Alexander C., Ishikawa S., Silverstein M., Jacobson M.,
Fiksdahl-King I. and Shlomo A. 1977. A Pattern
Language: Towns, Buildings, Construction. New
York: Oxford University.
Alexander C. 1979. The Timeless Way of Building. New
York: Oxford University Press.
Borchers J. 2001. A Pattern Approach to Interaction
Design. Publisher: John Wiley & Sons. May, 2001.
ISBN-10:0471498289. ISBN-13: 978-0471498285.
Elliot, G. and Phillips, N. 2004. Mobile Commerce and
Wireless Computing. Pearson Education. New York,
NY.
Gallud, J.A., Penichet, V.M.R., Argandeña, L. González,
P., García J.A. 2005. Digital Museums: a multi-
technological approach. HCI-International Conference
2005. :Lawrence Erlbaum Associates (ISBN 0-8058-
5807-5) Las Vegas (USA).
Gamma E. and Helm R. and Johnson R. and Vlissides J.
1993.Design Patterns: Abstraction and Reuse in
Object-Oriented Designs. Proceedings of ECOOP'93.
Springer-Verlag. Berlin.
Gary, S. and S.Y.S. Simon 2002. A Service Management
Framework for M-Commerce Applications. Mobile
Networks and Applications, Vol.7, pp.199–212. ISSN:
1383-469X.
Georgiev T., Georgieva E., and Smrikarov A. 2004. M-
Learning - a New Stage of Е-Learning. International
Conference on Computer Systems and Technologies –
CompSysTech’04.
Léger, P.M., Cassivi L. and Fosso Wamba S. 2004.
Determinants of the Adoption of Customer-Oriented
Mobile Commerce Initiatives, International
Association of Management of Technology,
Proceedings of IAMOT, Virtual Organizations and
Partnerships / E-Commerce Track, Washington.
Lozano M. D., Tesoriero R., Gallud J. A., Penichet V. M.
R. 2007.Evaluation the user’ experience of PDA-based
software applied in art museums. 3rd Conference on
Web Information Systems and Technologies 2007
WebIST. Barcelona Spain.
Tesoriero R., Lozano M. D., Gallud J. A., Montero F.
2007. HCI design patterns for PDA running Space
Structured Applications. 12th International
Conference on Human-Computer Interaction.Beijing.
P.R. China
Tesoriero R., Lozano M. D., Gallud J. A., Montero F.
2007 Technical Report. HCI design patterns for SSA
to pdA applications in art museums. URL
https://www.dsi.uclm.es/trep.php?&codtrep=DIAB-
07-01-2
Tidwell, J., 1999. Common Ground: A Pattern Language
for Human-Computer Interface Design. URL
http://www.mit.edu/~jtidwell/common_ground_onefil
e.html.
Tidwell, J. 2005. Designing Interfaces: Patterns for
Effective Interaction Design. Publisher O'Reilly.
November 2005. ISBN-10: 0-596-00803-1. ISBN-13:
9780596008031. URL http://designinginterfaces.com/.
Upkar, V. and Vetter R. 2002. Mobile commerce:
framework, applications and networking support.
Mobile Networks and Applications, Vol.7, pp.185-
198.
Van Welie M. 2007. Interaction Design Patterns. URL
http://www.welie.com/patterns/index.html.
Van Duyne D. K., Landay J. A., and Hong J. I. 2002. The
Design of Sites. Publisher: Addison-Wesley
Professional. July, 2002. ISBN-10: 020172149X.
ISBN-13: 978-0201721492.
WEBIST 2007 - International Conference on Web Information Systems and Technologies
496