Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
1 Introduction
The design of a physical space can and should take advantage of information
architecture (IA) deliverables, in particular when designing an integrated model of IA.
The user must be able to easily-consult […] technology-dependent environments, e.g.
digital medium or printed paper catalogue, in line with the information flow conveyed
through the website.
Conveying the relevance of information to the user/consumer by means of applying
information architecture principles with a view to designing a crisscross-connecting
model of human-information interaction is the focus of this work.
In his article, “Design for Bridge Experience”, Joel Grossman asserts ‘Bridge
Experience’ involve situations in which people must traverse different domains in
order to communicate successfully, complete a task, or elicit a desired physical,
mental, or emotional response.
*
Though this paper is the result of a collaborative effort, D. Potente wrote paragraphs 1-5.3 and 7-8;
E. Salvini paragraphs 6-6.5.
The design of a physical space can and should take advantage of information
architecture (IA) deliverables, in particular when designing an integrated model of IA.
The user must be able to easily-consult any of the above-mentioned technology-
dependent environments, e.g. digital medium or printed paper catalogue, in line with
the information flow conveyed through the website.
3 Related works
3.1 find@unistrapg.it
Annalisa Falcinelli, student at University for Foreigners of Perugia, discussed
a thesis about the project find@unistrapg.it. It highlights the relevance of a crossing
model for the information seeking process inside the University for Foreigners of
Perugia meant as physical and digital space.
The integrated information architecture is based on two levels model: the first level
uses a hierarchical-enumerative classification to organise activities inside the
university by these categories:
prospectus
communication
services
these are based on the same classification principle used on the website
<http://www.unistrapg.it> that can be considered as one of the contexts involved in
the project.
The second level is based on a faceted classification, obtained by Ranganathan
PMEST scheme (Personality, Matter, Energy, Time) (Gnoli, 2000) , for each
category at the first level, is possible to notice the following facets: people, activities,
space, time.
First level categories are used from digital to physical spaces. Inside and outside the
university, each category is followed by a specific colour:
prospectus light blue
communications pink
services green.
3.1.1 Directions and breadcrumbs
Figure 3.1.1.1 Information point area works as a breadcrumb in Perugia’s city centre
1
Lynch, Kevin. The Image of the City. Boston: MIT Press, 1960.
Figure 3.1.1.4 Internal signage shows
information design and colour
consistency
In the same way information point areas inside the university, directions showing
names of buildings and classrooms, are designed following a consistent information
design, colours, symbols and fonts.
The integrated model of information architecture features a mobile system that allows
users to get access to a large amount of information that ordinary signage can’t
convey. The system feature the common hierarchical-enumerative scheme at the first
level of classification and a faceted classification at the second level, like on iPods2.
At the first level is possible to find the mentioned categories:
prospectus
services
communication
At the second level, for each category, is possible to notice these facets:
People: (Who?)
o Students
o Teachers
o Administrative staff.
Activities: (What?)
o Lessons
o Office hours
o Tests.
Space: (Where?)
o Buildings
o Classrooms
2
Candido, Maria Giovanna. Architettura dell’informazione e trovabilità nell’iPod. Trovabile.org.
January 14th, 2007. <http://trovabile.org/articoli/architettura-informazione-ipod>.
o Areas.
Time: (When?)
o Dates
o Days
o Timetable.
This case is of great interest because it leads to the development of a model of human
– information interaction. Maya Design, who was involved in this project, first
investigated the mental models of users and the organizational schemes of the library.
After sessions of interviews and observations one of the first thing they discovered
was information overload conveyed by library jargon and ad hoc solutions, which
produced a disjointed system over years.
The library jargon issue is related to a typical labeling system issue on the Web:
designing effective labels means considering the content, users and context, this is
even more important considering an integrated model of Information Architecture
like the Carnegie Library. In this case, labels cross different contexts and must be
consistent and understandable between these contexts: library jargon badly affects
labeling systems neglecting the users’ vocabulary and a given information on the
website (words, wayfinding signals, …) could not find an equivalent information in
the phisycal space because it was replaced by the library jargon.
Comparing the contextual inquiry and the information architecture, Maya Design
team, librarians and building architects found that the focus was on:
Wayfinding
Website
Catalogue
Comparing wayfinding strategies in other libraries they found adding signals was
considered by people as a mean to improve wayfinding, that is totally wrong instead.
Maya designed a new wayfinding system that would:
Work system-wide in all facilities for our client.
Use little or no jargon.
Offer librarians easy-to-use and consistent tools for making signs.
MAYA created a classification scheme and lexicon that organized library messages
(not just signs) into five broad categories:
Orient/Direct: displays the cope of physical spaces and time-based events, and
provides directions to major areas.
Identify: identifies areas, objects, and actions.
Educate: instructs, explains, and informs customers as a means of encouraging
self-sufficiency and helping them to become expert users.
Connect: reveals serendipitous connections between internal and external
activities and resources.
MAYA created a web-based content management and publishing system for static
and dynamic (plasma, LCD, and LED) signs. Librarians can now maintain system-
wide visual continuity. […]
3
More details on this Maya Design project can be found at <http://www.maya.com/portfolio/carnegie-
library>.
The Carnegie Library continues to use this entire customer-focused framework to
improve the library experience. Although they've not yet begun exploring
improvements to the catalogue, their revised Web site has become a customer-centred
map to the library experience. The words customers see on the site match those inside
the library buildings so that customers have a consistent experience no matter how
they engage the library (Maya Design 2005).
Close analysis of the Apple website and, in particular, the Apple Retail Store
highlights the role of information architecture in building bridge experiences. IA can
cross various contexts of experience with the objective of defining a unique human-
information interaction model by means of proper organisation of information flows
and tasks.
The website and the store share a common information organisation - outside of their
obvious and necessary interface differences.
Figure 4.1.1 Map of correspondences between Apple website taxonomy and products’ placement
inside the Apple Retail Store
Table 4.1.1 Comparison between Apple website IA and Apple Retail Store IA
Figure 4.1.2 Area showing Mac computers Figure 4.1.3 Area showing iPod, iTunes and
related to “Mac” section on the Apple website Apple TV related to “iPod + iTunes” section on
the Apple website
Figure 4.1.4 Area showing software solutions Figure 4.1.5 Genius Bar related to “Support”
related to “Download” section on the Apple section on the Apple website
website
Inside the store, lcd video screens might be provided in the particular area to
demonstrate the products on sale, its specifications and any related accessories -
highlighting products corresponding to the visited area of the store. While inside the
dedicated Mac area (Figure 4.1.2), computers will be displayed. Likewise, within the
confines of the iPod area (Figure 4.1.3), iPods and the Apple TV are on display. The
same holds true for the iPhone with a specific physical space allotted to bring
attention to the similarity and compatibility of the iPod, in particular the iPod Touch.
This further highlights the accessories and applications available to both the iPhone
and iPod.
Accessories (which are not clearly noted on the webpage) could be displayed and
contextually included within the related Mac and iPod areas by means of the lcd video
screens. In addition, the retail store could promote the most requested line of
accessories on the website, so that popular selections/purchases made by online users
can also be offered in the physical retail space.
Figure 4.1.6 Visual design of menu on lcd screen should reflect the website visual design menu for
information-seeking processes, in order to convey consistency and continuity
The location of a particular product within the retail space can be clearly indicated
and displayed on the lcd video screens. Such information is helpful to the client in
that it provides a clear idea of how to reach the product sought within the retail
space: this is an example of how to effectively and efficiently incorporate wayfinding
strategies in the information-seeking process.
When a product is viewed on the lcd video screen, other co-related products can be
suggested using the following purchase-related associations:
People who looked for this product also looked for:
People who bought this product also bought:
These type of suggestions favour a circular flow of information and improve the
information-seeking process by leading customers to evaluate needs to which they
were previously oblivious. A specific product or service can be suggested as
contextual content on the lcd video screens with the aim of encouraging the customer
to deepen his/her research. In this way the same information can be retrieved
following various information paths through a multidimensional approach.
Customers can identify various paths to follow a specific information-need. These
paths cross the web, lcd video screen interfaces and physical retail spaces: the
information-seeking process can be considered as an example of evolving transversal
research. Satisfied only by a final set of conclusive information in relation to a
specific topic, rather by various references and information gathered step by step
(berrypicking process). Users may thus refine and deepen the process at every stage
of their research (Bates 1989).
Staff-worn coloured t-shirts have recently been introduced in all Apple Retail
Stores. Each colour is representative of a specific competence:
light blue t-shirt: specialist
dark blue t-shirt: creative and genius
orange t-shirt: concierge
polo shirt: business partner
black t-shirt: stockroom staff.
On the Apple website every product could be followed by replicating the colour
combination used for the staff: in this way purchasers know who to address their
questions to, in order to have further information about a product, how to use it and
suggestions about other products. A key or legend explaining the colour combination
should be shown at the bottom of the product’s page to avoid information overload.
Colours are an efficient and effective mechanism for conveying a circular and linear
flow of information between different conceptual contexts.
Bridge experience is defined by a unique mental model the user can keep
through a range of concepts, thus ensuring homogeneous interaction . To convey this
homogeneity, people need signals and cues connecting the digital world to the
physical space: textual contents can offer a great help to obtain this consistency.
Textual labels, icons and symbols, work as signals both in the realm of the web and
within physical retail space. The way these signals communicate with people can
show consistency through contexts of experience: the box “Shopping Tips from the
Apple Store” <http://www.apple.com/retail/>, shows a particular style of
communication - warm and close to its users yet not overly confidential.
Content design determines the creation of a closely-linked connection between the
experience encountered via the web and that of the physical: web-posted suggestions
aim to always provide the user with a high-level browsing experience, as close as
possible to the one that the customer finds in the physical retail space.
This attention to detail means that the communication mode (electronic for the web or
on printed paper for the physical retail space) and communication style
(advertisement offers and/or posters) together with its content (fonts, titles, short
paragraphs, labels) must always be consistent to facilitate and promote clarity in the
eyes of the user/ consumer.
Micro-content design (titles, paragraphs, labels) must reflect the people’s point of
view. It is very important to offer clear content that, with symbols and icons, convey
that type of crisscrossing of information between contexts of experience. These
elements perform an important function for wayfinding strategies between the Web
and the physical retail space.
4
We have considered the Florence retail store, but the results can be globally valid.
Ikea offers a wide range of products at affordable prices. Customers are actively
involved in the shopping experience. They begin by choosing their products at home
on the website or on the paper catalogue, then they collect their products at the store,
and the final step would be to assemble the items by themselves following the
instructions.
This idea of collaboration has been resumed with the following slogan: “You do your
part. We do our part. Together we save money”.
Ikea’s strategy towards emotional buyers aims to induce them to feel part of a whole
evolutionary process: we call it experiential shopping.
In order to reinforce this strategy, Ikea shows hundreds of inspirational displays
providing fresh ideas with product combinations, contemporary interior design
suggestions and the possibility of products’ testing. In this way, customers perceive a
strong emotional experience.
The choice of single model displaying for each product in order to optimise products’
placing and customer experience is definitely a strong point.
Moreover, the interaction between physical and digital world is already provided by
the website and virtual interior design facilities access. The website allows to consult
products’ range, to be aware of periodic offers and extra services. The virtual design
planning allows customers to act as interior designers.
There is not a unique and coherent human-information interaction model; our aim is
to better this weakness reorganising information in a crossing way.
According to the Ikea concept, the shopping experience can be considered as a
circular process, it starts and ends at home. For this reason, it is even more important
to create bridge-experiences, which facilitate the passage from one domain to
another.
The annual catalogue shows the range of products for sale, related technical
guides and the extra services information.
It is built on a hierarchic-enumerating classification: 15 classes highlighted by
different colours and relative subclasses.
Figure 6.2.1 Ikea catalogue’s categories
From this taxonomy’s analysis we can notice several division’s criteria used for each
hierarchical level:
1. rooms linked to products’ allocation
2. customers to whom products are addressed
3. products’ material
4. use of products
5. sort of furnishings
6. other
After the previous analysis, we can affirm that the catalogue’s information
architecture is theoretically incoherent and chaotic, from a scientific point of view.
Beyond this consideration, it is important to check if this classification works anyway
for Ikea customers and if it is suitable for Ikea context.
The main catalogue’s classes are created on customer’s demands and human
cognitive models. For examples:
A potential buyer looking for a double bed will normally refer to the class
“Bedroom”. But if the same customer wants to buy a cot for his baby, the same
category wouldn’t be so obvious. The class “Children’s IKEA”, in this case, is
a more appropriate reference.
The “Textiles” class has been created to help a reader to find certain items as
kitchen’s curtains, which may be difficult to be located because potentially
linked to different categories.
The categories’ order follows the degree of importance: the first ones are the most
marketable according to business strategies and sales.
These new considerations enable us to notice that, even if theoretically incoherent,
the taxonomy is perfectly coherent from the empiric-pragmatic point of view, which
is the most important issue to make the information retrieval easier.
Considering the second level, subclasses relocation in different categories would help
to respect human mental associations and hierarchical relation.
COOKING AND EATING - Tableware, food storage, pots and pans and cooking accessories
LIGHTING - Table lamps, floor lamps, ceiling lamps, shades, bases and cords
DECORATION - Vases, plant pots, candles, wall decorations, mirrors and flooring
INFORMATION - Guarantees, special offers, IKEA FAMILY, financial services, shopping at
the store, services, stores and maps, INDEX, restaurant
5
Ikea catalogue 2009 already takes in this suggestion.
Table 6.4.1 Ikea catalalogue categories (in English) modified following our reccomendations
Table 6.4.2 Ikea catalalogue categories (in Italian) modified following our reccomendations
The website has several menus with different categories from the ones on the
catalogue. The main navigation menu displays only the most popular classes and
some of them have different labels.
Hierarchical relations are not observed: classes and subclasses are shown at the same
level. Though each product can be reached from different paths, links that provides
these accesses are imprecise. As a result we have a chaotic heap of information which
may confuse someone who has consulted the paper catalogue.
In the same way the retail store does not observe a common products’ classification,
a crossing information architecture is important to improve the customers’ shopping
experience.
For this reason, the use of the same distinctive colour in each environment helps
customers to recognize immediately the class of product they are looking for.
In order to highlight a crossing reference between contexts, colours can be used for
the main menu’s buttons on the website and also for the admittance walls and floors
of each department of the retail store. Interior walls and partitions of the store must
be kept in white because they are frequently used as background of realistic room
settings.
Moreover, to realise an information architecture even more transversal, web
advantages can be transferred to the retail store. We suggest three interventions:
more accesses to departments, following a sort of faceted classification
maps’ collection and information points to make customers’ mobility easier, to
make them aware of their position inside the store (wayfinding) and to let them
be aware of the way they’ve walked through (breadcrumbs);
installation of LCD screens in the central area, showing products and offers
with relative characteristics and giving information on the items pick up point
area (findability).
The actual internal path within the store is obligatory. Customers are obliged to begin
their tour from the first floor, going through all departments towards the storehouse to
finally reach the cashier desks on the ground floor: no possibility of detouring.
This path creates a delimited running flow which may prevent visitors to go back to
look over a product.
Obviously, this kind of interior space design is based on a market strategy frequently
used in furnishings stores. It is based on time spent by customers inside the store: the
possibility to have a look at the whole range of products would induce clients to buy
more. It may be partially true, but it is not scientifically proved.
An obligatory path could be too long and boring. Usually IKEA stores are crowded
especially at weekends, when shopping experience becomes quite stressful.
To avoid this problem it is possible to provide separate access to floors and direct
access to departments, still maintaining the possibility of a whole explorative route
for people who like spending some hours inside the store.
Moreover the aim of the market strategy could be reached anyway maintaining low
cost products display closed to the storehouse and in front of cashier desks. In this
way, even hurried or distracted customers could be tempted to buy those items.
Figure 6.5.1 Map that shows the obliged path inside the store
Figure 6.5.2 Ikea’s map redesign to provide a crossing wayfinding strategy by the use of the same
colours.
Pocket maps are available at Ikea’s entrance. They are very useful because they
concretely help customers to find their way inside the store.
Information panels could be located at the entrance to indicate the departments found
on each floor. Each department will be pointed out by specific colour used on the
web, on the catalogue, on leaflets.
Furthermore, we suggest installing LCD screen in the central area of the store to
improve the product’s findability. On the homepage offers would be highlighted and
catalogue’s categories would be displayed using their respective colours.
Page description diagram allows for the description of content areas of a web
page in prose, as in a functional specification. Specifications are arranged following an
order of priority and can be followed by mini-layouts to give more details about a
specific feature on the page.
A page description diagram is useful in showing priorities and defining a context by
providing useful information on content and functionality for the visual design of
every single page. An example is the following:
Figure 7.1.1 Example of page description diagram for Apple homepage <http://www.apple.com>
On this PDD, high fidelity mini-layouts are shown in order to provide a clear
document. By using existing parts of the web pages to obtain mini-layouts; in an
ordinary design project pdd are developed before wireframes are drawn, we are able
to replace these layouts with those of a lower fidelity.
This is an example of area description diagram for Apple Retail Store. It shows
suggestions conveying information architecture principles to provide a retail design
that is part of the crisscrossing model of human-information interaction.
On the ADD we can show information about product placement inside the store. In
the same way it is possible to highlight relevant areas where specific support services
are provided like help-related information , electronic product catalogues and
customer services. This deliverable is not only relevant to the physical retail space,
rather it is closely related to designing user-friendly content and functions inside the
physical retail space. It can highlight connections between different contexts:
navigational menu related to wayfinding cues
posters that work as product previews on the website
support areas coherent with related website sections.
The area description diagram could be considered as a sort of tool for verifying
IA coherence. It can highlight the conceptual model underlying a new kind of design:
the process design defined by organizational and interaction models.
Considering other sections of the Apple website like the one related to Mac
computers it becomes possible to analyse further connections between digital and
physical environments.
Figure 7.2.1 Mac computers on Apple website <http://www.apple.com/mac/>
This webpage can be divided into three sections. At the top of the page a horizontal
scrolling bar can be used to browse between Mac computers, accessories,
applications, servers and Wi-Fi devices. This solution provides an immediate
overview regarding the main content material available in this section and recalls the
product’s physical location within the Apple Retail Store6.
6
According to store’s features, the connexion between digital and phisycal environments, is provided
using different types of shelves’ placing.
Apple Retail Store
Figure 7.2.2 Connexion between Mac’s section on <http://www.apple.com/mac/> and Apple Retail
Store
This model shows two relevant connections between digital and physical
environments:
users can visualize products using the scroll bar, and by the same means they
can look for Mac computers, accessories and applications grouped together in
contiguous areas inside the Store
information design used within the Mac webpage is identifiable within the
Apple Retail Store, as shown in this figure, each area finds its equivalent on the
Web and vice versa:
- grey area (overview): an overview on the website relates to shelves
showing Mac computers within the Store
- purple area (what I can do?): the section “Find out how to get more
out of your Mac”, showing software solutions and tutorials on the
Web relating to a specific area where software solutions are shown on
display racks
- orange area (help): learning activities and support are provided on the
website and within the store. The staff can be considered as part of a
specific area, by providing their competences and offering content to
customers in the same way contents are provided on the website. The
experience with personal training, workshops and support starts on
the Web to end at Apple Retail Store.
The same model could be applied to the iPod+iTunes webpage and corresponding
physical space inside the Apple Store. There is a strong level of coherence when
compared to the previously-mentioned analysis.
iPod+iTunes webpage replicates the information design from the Mac webpage.
Adapting the model shown therein it is possible to identify the same human-
information interaction model:
users can visualize products using the scroll bar, and by the same means they
can look for iPods, Apple TV and accessories grouped together in contiguous
areas within the Store
information design used in the iPod+iTunes section
<http://www.apple.com/itunes/> is identifiable within the Apple Retail Store
(figure 7.2.2), each area finds its equivalent on the Web and vice versa:
- grey area: an overview of the website relates to the display shelves
showing iPods, Apple TV, inside the Store
- purple area: the section “Featured on iTunes” together with
“Tutorial+Tips”, “Accessories” on the Web, relates to a specific area
where accessories are shown on the display racks
- orange area: within the iPod+iTunes webpage links are not provided to
learning activities and support. The staff offers advice and information
on products provided in this area of the Store, so it could be useful to
provide information about workshops and support on the web in
order to convey a bridge experience between these environments.
Organizational and human-interaction models are merged in a unique process
conveyed through a clear bridge experience. Users therefore receive a seamless and
continuous experience between the digital and the physical environments.
Each individual webpage like “Mac” and “iPod+iTunes”, each with their related
physical areas, reiterate the organizational system noticed for the homepage and the
overall design within the Store. The corresponding ADD could be superimposed on
Mac’s ADD or on that of iPod+iTunes’, this means there is a continuous, reciprocal
recall mechanism between the macro-architecture and the micro-architecture both on
the website and within the retail store.
Figure 7.2.3 Area description diagram for Apple Retail Store: it shows connexions between Mac area
inside the Store and the related webpage <http://www.apple.com/mac/>
Figure 7.2.4 Area description diagram for Apple Retail Store: it shows connexions between
iPod+iTunes area inside the Store and the related webpage <http://www.apple.com/itunes/>
This adaptability to different conceptual contexts is proof and further testifies to the
integrated information architecture and organization of information flows and tasks
by crossing digital and physical space and thus conveying a unique human-
information interaction model. Through these area description diagrams it is possible
to verify that the Apple Retail Store is representative of the entire Apple website and
vice versa.
8. Conclusions
“Too often as
designers, we think about
users as “static” entities…
rather, today users always
move “across”
something…”7
As shown in the case studies users collect information on the web and use them in the
real world and vice versa: the Ikea case study focuses on how to organise and design
information to allow its users to easily locate what they are looking for leading them
from the web to the store, while the Apple case study focuses on the possibility of
charting information within their related areas in a physical space and on web pages,
with a view to highlighting interconnections between them and to highlight how
people interact with information and across these environments.
These considerations emphasise the role of users and their evolving needs: people can
improve the design process making suggestions of what they need in terms of
functions and contents, also the way they recognise the information and interact with
them.
From websites to retail stores, from digital interfaces to physical ones, why would
not users play a more proactive role in the overall design and the consequential bridge
experiences they create and crisscross in everyday life?
Participatory design strategy is the answer because it offers an approach to design
that attempts to proactively involve the end users in the design process and help
ensure that the product designed meets their needs and is usable.
7
These lines are taken from a chat with Chiara Ferrigno on 13th of August 2008.
9. References
BATES, M. 1989. The Design of Browsing and Berrypicking Techniques for the
online search interface. [Also available at
<http://www.gseis.ucla.edu/faculty/bates/berrypicking.html>].
BROWN, D. 2002. Where the Wireframes Are: Special Deliverable #3. Boxes and
Arrows, July 01,
<http://www.boxesandarrows.com/view/where_the_wireframes_are_special_de
liverable_3>.
CHI, ED. H - PIROLLI, P - PITKOW, J. 2000. The Scent of a Site: A System for
analyzing and Predicting Information Scent, Usage, and Usability of a Web
Site, in Palo Alto research center. User interface research,
<http://www2.parc.com/istl/projects/uir/pubs/items/UIR-2000-01-Chi-
CHI2000-WebVisualization.pdf>.
FOLLETT, J. 2006. Interfaces for People, Not Products. UX Matters, October 23,
<http://www.uxmatters.com/MT/archives/000134.php>.
INSTITUTE FOR THE FUTURE. 2000. The Future of Retail: Revitalizing Bricks-
and-Mortar Stores. Institute for the Future Corporate Associates Program SR-
689, <http://www.iftf.org/docs/SR-689_Future_of_Retail.pdf>.
MAURER, D. 2006. Four Modes of Seeking Information and How to Design for
Them. Boxes and Arrows, March 14,
<http://www.boxesandarrows.com/view/four_modes_of_seeking_information_
and_how_to_design_for_them>.
------. 2008. Architettura dell’informazione integrata secondo Apple: Fra web e t-shirt
colorate. Trovabile, May 19, <http://trovabile.org/articoli/architettura-
informazione-integrata-apple>.
------. 2007a. Dal design partecipativo all’oggetto partecipato. La forma del futuro di
Bruce Sterling. Lucarosati.it, January 18, <http://lucarosati.it/blog/la-forma-
del-futuro>.
------. 2007b. L’architettura dell’informazione e il Web 3.0. Lucarosati.it, February 5,
<http://lucarosati.it/blog/architettura-informazione-e-web-30>.