Using Principles from Architecture to Inform HCI Design By Andreas Karatsolis and Lito Karatsoli-Chanikian
ISDOC’14 on May 16–17, 2014 in Lisboa, Portugal.
This paper was published by ACM as part of the Conference on Information Systems and Design of Communication ISDOC’14 on May 16–17, 2014 in Lisboa, Portugal.
Using Principles from Architecture to Inform HCI Design Andreas Karatsolis
Lito Karatsoli-Chanikian
karatsol@mit.edu
letokc@gmail.com
Massachusetts Institute of Technology Cambridge, Massachusetts, USA +1 617-253-3375
ABSTRACT
The field of Human-Computer Interaction (HCI) Design has traditionally been very inclusive, as it emerged from the confluence of seemingly disparate disciplines, such as Computer Science, Information Design and even Rhetoric. However, this interdisciplinary orientation has not translated into direct conversations with other disciplines in order to explore a variety of actionable design strategies, which can inform future systems and interactions. T his position paper explores one such possible relationship, arguing that HCI can benefit by drawing from other design fields, specifically Architecture. In order to understand how architectural design can inform better information design, we compare and contrast architectural design elements and principles to information architecture design elements within websites. We then use examples of both typical and award- winning architecture to compare to common and award- winning information architecture and website design, in order to draw parallels between the principles at work. T he comparison specifically explores how architects of physical spaces create a sense of place through context and transition spaces, and provide users with a thorough understanding of they space they are navigating, concluding with implications for transfer into information design.
Categories and Subject Descriptors
J.5 [Arts and Humanities]: Architecture, D.2. 10 [Software Engineering Design]: Design T ools and T echniques, H.5.4 [Hypertext/Hypermedia]: Methodologies, Web-based interaction.
General Terms Design, T heory.
Keywords
Information Design, Architecture principles, Generalizable actionable knowledge, Web design.
INTRODUCTION
Most approaches to developing a better understanding of how to engage users in technology-mediated environments have been either from a purely technical perspective (based on the affordances of the tools and the software) or from a high-level theoretical perspective, focusing on general strategies and principles (e.g. Don Norman’s or Steve Krug’s de sign principles). A quick survey of textbooks on Web Design shows that in the top Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commerci al advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than ACM must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior speci fic permission and/or a fee. Request permissions from Permissions@acm.org ISDOC’14, May 16–17, 2014, Lisboa, Portugal.
$
Carnegie Mellon University Pittsburgh, PA, USA +1 518-409-0226
bestselling spots for Web design one will find either volumes on HT ML and CSS or some general design principles volume. However, a very recent article [1], which captured the understanding of twelve design experts through interviews in terms of their design knowledge of functions and principles behind their work, seems to suggest otherwise. T he authors concluded that, among other design implications arising from an analysis of the interviews, generalizable actionable knowledge should be specified. Such a finding is not foreign to the Learning Sciences literature on evaluation and feedback, since we know that goal-oriented, actionable feedback works best [2]. However, for the Design Sc iences this still seems a breakthrough concept. Such a statement this might seem rather counter-intuitive, as taskbase d, data-driven approaches to understanding users and their interactions with the system have been used for many years. Why is it still that generalizable actionable knowledge is not the direct outcome of many methodologies? Are we perhaps emphasizing more narrow, localized methodologies which focus on getting users to move faster through information or get better at finding items, but in a disjointed, fragmented manner, in order to get data quickly and meet the expectations of development teams? Are there ways to explore evaluation methods in technology-mediated environments that can lead to such actionable knowledge? One relatively recent article made significant headway in identifying heuristics for the assessment of the effectiveness and usa bility of technology-mediated communication [3]. T he authors presented ten research-based generalized heuristics and several examples to showcase how these heuristics can be applied in context. Despite the significant value of this effort towards our understanding of general principles, there is still very little on the development of concrete strategies or actionable knowledge which can provide designers with clear pathways towards effective technology-mediated communication. Our position paper will take one of the heuristics presented in [3] and explore the potential of using strategies from the discipline of Architecture to help information architects apply them in developing new actionable knowledge for we b design projects. More specifically, we intend to focus on the heuristic the authors of [3] call “ cre ating a sense of place ” to argue for the need to use well-established approaches from traditional architecture to help us develop generalizable actionable knowledge in IA. We intend to show that these strategies are not only useful, but are already implicitly enacted in the many award-winning websites.
Virtual and Physical Architecture
Current information architecture is almost entirely focused on taxonomy, as categorization and labeling seem to be its main concerns. This approach, for the most part, results in designing and implementing effective ways to convey information and data to users, but it’s becoming clearer that good information architecture must go beyond just trying to convey discrete
information points. One of the most important metrics for web analytics professionals is retention of users on the same site after finding some information they might need. A template typical drop down menu presents users with a list of options in parallel structure, without necessarily showing the relationship between the different pages or the path that might connect them. Figure 1 [4] is an example of a typical navigation
Figure 1: Me ga Drop Down Menu Te mplate tool, as it appears on a site offering template code for free to incorporate drop down menus into your own website. The site map of Argo.com (Figure 2) is another example of typical website structure [5]. T his site map is effective in categorizing and including as much information as possible, but it is very hierarchical and confusing if one were to consider a path to follow and explore the whole site. It might serve us better to understand we bsites as virtual spaces that require flow, much like space in our physical world.
requires human interaction with space, whether it is physical or virtual. In Architecture each project has an audience (user), a patron, and a context, all of which need to be taken into careful consideration, much like in IA design. For example, saying that the purpose of information architecture is only to communicate information to the user is like saying the purpose of architecture is only to provide shelter to the user. It is true that these are the fundamental and bare-necessities that are required, but they are not enough [14]. While shelter is a basic human need, much like information, feeling safe and able to move around in physical (or virtual) spaces is as important a need to most of us. Current IA is primarily centered on using “ design principles” as blanket statements to direct good design, but we believe that, like all design fields, there are deeper user experience issues to be addressed that cannot be adequately addressed with blanket statements. A website that uses simple “ design guide lines” is similar to a building whose only design direction is to meet the local and national “ building codes.” With this method you’re guaranteed that the spaces will be f unctional, and legal, but they do not make good architecture or spaces that comfort and inspire the human psyche [16]. One can move beyond the bare bones of design by considering three core considerations from architectural principles: considering the space in its context, acknowledging and designing transition spaces, and assessin g how users un derstand the space around them. We will argue through examples that these are possible strategies to help one move beyond just providing shelter or information to the user. Of course, in Architecture, going beyond the basics doesn’t mean adding complication; it means designing and creating with elegant, intuitive simplicity. If there is no courtyard, there shouldn’t be a fountain; if there aren’t more than 3 floors, there shouldn’t be an elevator; if it’s not a commercial building, there shouldn’t be a huge sign on the front of the buildin g. One should first ask “ what does it NEED to be?” and then “ what SHOULD it be?” We believe that the next wave of IA will be informed by the understanding of good architectural space. The following are some critical ways in which architectural design can inform IA design.
Space in Context
Figure 2: Argo We bsite - Site Map Page We believe that Information Architecture can draw from and learn from physical world examples of architecture practice and theory, as it has been studied for thousands of years. Information architecture design is in its first steps in comparison to other design fields, such as Architecture, and creating a thorough analogy and understanding of how Information Architecture can learn from Architecture practitioners in both fields very well. Why do we believe that Architecture is a suitable analogy to Information Design? Architecture is a de sign disc ipline that
Providing the user with an understanding of their space within a particular context requires un derstanding the space as a whole, and how it relates to all objects and places around it. All good architecture asks and answers the questions: “ Where is this buildin g located? Who is using this building? What is the function and purpose of these spaces? Where do they come in? How do they find where they are going?” In a similar fashion, good information design will be g similar questions: “Who is using the we bsite? What is its position in relation to the ones around it? Where do they come in? How do people know where they’re going?” In the current architectural design process, the first few months of the design are dedicated only to answering these questions thoroughly through extensive research and communication with the patron(s) and the client(s) of the building. For example, the prestigious architecture firm, BIG is be st known for their thorough diagrammatic representations of their design concepts. T hese diagrams include how the buildings fit into their context, how the users navigate the spaces, and how the main programs meet one another. A good example of this integration can be seen at the
Danish National Maritime Museum that won the AIA Cultural Architecture Building of the Year award for 2014 (see Figure 3).
the harmonious ease with which the buildin g is experienced and understood. A visitor might not consciously realize that the exhibition halls are primarily concrete and the transition spaces are primarily wood, but they will notice that they always know where they are, where they are going, and that they are comfortable [13]. This is what distinguishes good architecture: it is a place with intangible qua lities, with subconscious flow. It is a place people want to stay and come back to [12].
Figure 3: Photograph of the Danish National Maritime Muse um by B.I.G. in Helsingor, DK [6]. The task at hand wa s to create a design for the Danish National Maritime Museum centered on the dry dock (Figure 3). T he museum is almost entirely below the ground, where all the exhibition rooms, facilities, auditoriums, offices and classrooms are arranged undergroun d around the dry dock. The glass bridges that cross the dry dock connect different floor levels and exhibitions together within the museum while giving the visitors a different perspective on the dry dock while they cross through it. It is clear that the architecture reflects the mission of the museum patrons as on their own webpage of the museum they describe the architecture as “… iconic, guidin g visitors through a continuous flow of spaces expanding across gently sloping floors at different levels before crossing the old dock.” [7]. The diagrams in Figure 4 show the key concepts that drive the form of the entire building. T hese dia grams are design data, created early in the design process to ensure all parties, patrons, clients, and architects were on the same page as to what the driving priorities were [15]. T he initial concepts of how the buildin g should interact with its context are presented in Figure 4, where one can see the clear evolution and hierarchy of the spaces. The dry dock is the first priority, to keep its integrity and give the visitor a unique and profound experience of it. Secondary are the exhibition rooms, which are arranged around the space of the dock, tertiary are the bridges connecting the galleries, which bring the dry dock and the museum together. T he diagrams go further to illustrate how the different materials are applied to guide the visitors through the spaces. Concrete is used for the main spaces; when the visitor is walking on concrete they are, consciously or subconsciously, experiencing an exhibition space. Wood is used for supporting spaces, once again indicating to the visitor what sort of function the space they are in is providing. T he final diagram in the series shows how the concrete and wood overlap and come together to create a more complete experience. The last set of 3 diagrams shows the purpose and directionality of the transition spaces. T he first bridge visually and physically connects the visitor parking area to the neighboring attraction, the Kronborg Castle. The second transition space is the staircase straight down to the cafeteria at the base of the dry dock, thirdly the final bridge that provides the entrance into the museum. These diagrams outline simply and clearly the main driving forces behind form and program adjacencies of the museum. As a visitor to the museum, the only way these diagrams are apparent are in
Figure 4: Diagrams of Danish National Museum Building Conce pt and Circulation. [6] Such an initial architectural design phase is either completely lacking or exists in a much smaller proportion in information design, and there is rarely any emphasis on creating clear diagrams of the purpose of the websites or virtual spaces being designed. T he diagram and concept phase ensures that the designer and the patron (client) are on the same page regarding design direction and priorities. This is important because too often in we b de sign the client provides the designer with a set of categories and items of information without communicating fully what the intention and priorities are, and, to a much lesser de gree, the flow between sections or pages. However, there are a few websites which show a concern for the context that surrounds the virtual space, though most are within the cultural or art domain. One such example which effectively demonstrates this direction is the “With Art Philadelphia” [8] museum consortium we bsite (Figure 5). T he main page of the site greets the user with a large banner of a variety of images of artworks from all the museums that the user can scroll through and hover over for titles and information.
Figure 7: De tail of main page of the Art Philadelphia Museum we bsite Figure 5: Main page of the Art Philadelphia Museum we bsite Right belo w the user can find a clear dia gram of the location of the museums in relation to one another and at the top 5 links to key areas at the site to navigate to. This creates a clear priority, firstly the work, secondly the location of the work, and thirdly the context, by providing all the links for the user to get to the museum s and therefore artworks. The artwork is the first priority, therefore when one arrives to the main page that is what they are greeted with. It’s a very simple concept but doing it elegantly is a big challenge.
Another way which architecture design principles can be taken into consideration for IA design is through understanding the relationship of the pieces to the whole. If we understand a we bsite as a whole building and a page of that website as a room in that buildin g, we can dra w parallels in design un derstanding for IA that have not been made clearly in the past. We expect a building to be coherent as a whole structure, as we expect that where the rooms, though they may contain different functions and furniture and content, fall within a similar building style and form a coherent whole. Looking at great architects such as Frank Lloyd Wright we can see that there were elements of his buildings that ran throughout the whole building, connecting rooms with different functions together seamlessly. T his was the beauty; this was true design that went beyond providing mere shelter or following code s. T his is the point at which website design finds itself now. It is about the need to have an overarching idea that guides every room, every page, toward a similar style and goal. The pinnacle of cohesive design for a building is when a user always feels that they are in one buildin g, no matter what room they are in within this building. In the same way, a user on a we bsite should feel that they are navigating through one cohesive we bsite rather than a series of just hyperlinked web page s.
Transition Space
Figure 6: Bottom of the main page of the Art Philadelphia Muse um we bsite The way this site choses to address this is thumbnails that provide information only once the user hovers over the image. By making the image banner scroll right and left this allows for many more images to be included in the list without having to navigate away from the page, or even scroll down. It’s easy to use, the user doesn’t have to navigate anywhere to efficiently find artwork or attractions that they are interested in. Furthermore, when the user navigates away from the page to a different page, the new page will aga in have the scrolling banner of artworks and attractions. This banner is the main “ concept” of the site, and thus it follows the user throughout the site so they never feel lost or as if they navigated away too far away from the original main page.
This brings us to another critical architectural design principle: At least 20% of a building’s floor plan is “Transition space,” and good architecture usually has more. T ransition spaces include lobbies, staircases, hallways, corridors, paths, etc. Realtors dislike transition spaces beca use they do not add a marketable square footage to the buildin g. It’s not another office, or another bedroom; it’s not monetarily valuable. T ransition space, however, is public space. T ransition space includes a beautiful entrance, a courtyard, a balcony one can look over and get an understanding of the building they’re trying to navigate and it is critical for human comfort. T he most efficient transition space is a narrow corridor, as short as possible, barely enough to get you from one room to another. The most enjoyable experience for the user, however, requires a lot more than just what is efficient. Narrow hotel corridors with an array of endless rooms on either side (such as the one in Figure 8 from Hotel Syracuse) are comparable in human comfort to Argo’s site map (Figure 2), in that the structure is purely there to lead the user to one specific room/webpage. In an average hotel, the corridors are narrow, bland, and do not give any intrigue to the user; their only purpose is to help you arrive to your door, which looks like every single other door, and the only way you know which door it is, is the number on it. In the same way, average websites have a navigation structure that gives the user a way to get to what they are looking for by reading labels (hopefully helpful labels, though this is also not always a guarantee). Hotels are designed this way to deliberately make users go to one place, their room, so there is
no space pleasing enough along the way to cause pause or intrigue. However, this is not always the case when it comes to online platforms. In fact, in most cases, such as in marketplace or information rich sites, it is exactly the opposite. Users are constantly browsing the internet for information and the site that will get them the information they need fastest is valuable, but the site that will inspire them and intrigue them will be visited regularly and they will spend more time there.
Figure 8: Plan of guest room floor at Hotel Syracuse [9] An excellent example of a website that creates intrigue and pause for the user through its navigation structure is the winner of the 2014 Webby awar d for best navigation structure, cloudsovercuba.com (Figure 9). When entering the site, one is presented with one option, starting the documentary, which begins with a single click. Below the full screen video a simple, elegant timeline is provided telling one where they are in the course of the documentary. T his timeline points out critical moments within the documentary, and even points out moments of side commentary and explanation on the history. One can navigate to these shorter explanations by clicking the callout on the timeline of the documentary one is watching. By hovering over the callout one gets a small image and the name of the 4 video minute explanation, so one can decide to either navigate to this extra information or just continue on with the documentary. If one chooses to go to the explanation, the documentary pauses and is taken to this new video. Once this video ends, one is automatically taken back to the main documentary that begins playing where it left off.
Figure 9: Welcome page from cloudsove rcuba.com [10]
Figure 10: Detail of the vide o from cloudsove rcuba.com
The smooth transitions, and the way this website gives the user full un derstanding of where they are in the website and in the documentary is empowering. T he side informational videos could have been a standard drop down list, but it wouldn’t be clear as to what part in the documentary they relate to and the user wo uld be less likely to watch them. All other necessary, but not pertinent, links are at the very bottom of the screen in font just big enough to be legible. It is always there if one needs them, but unnoticeable when they are not. This site gives the user a sense of time and space clearly, that they can simply navigate. When arranging space, architects have to carefully consider the relationships of adjacencies they create, and this website demonstrates a sensitivity to adjacencies which is uncommon in Information Design. T he timeline creates a relationship between the different videos which can only be achieved in the context of a webpage, and the relationships it created add value to both the main documentary and the smaller videos because of how they relate. In the same way, architects strive to add meaning and intrigue to spaces through the relationships of the spaces to one another. This is just one example of exceptional navigation design in HCI and, though there are others, many more such examples are necessary. T he Danish National Maritime Museum (Figure 3) is again a case in point. T he architects were charged with creating a museum on/around a dry dock about the maritime history of Denmark, and by placing the museum inside and around the dry dock undergroun d they gave the visitors a better understanding of just how large and cavernous the dry dock really is. Using the bridges which cross inside the dry-dock, the architects make the transition areas from one gallery to another an opportunity for the visitors to view the dry-dock from a different perspective. The relationships of the spaces add value in the same way as the relationships of the different parts of a website should add value to one another.
Comprehending Space
We have discussed how one might give the user an understanding of space in context and how they might add value to space through transition spaces; however, how does one provide the user with an understanding of where they are going? It is necessary to understand how to provide visual cues of the user’s path or the possible options they have at any give moment, so they can fully comprehend the space they have to navigate and make informed decisions. Feeling comfortable in a new space requires giving people an understanding of their possible inhabitable space as a whole and where they are located with this space. Imagine walking up to a vertical wall, stretching as far as the eye can see in every direction, and there’s a single door. T here is no way to know how large, or small, the space you are about to enter is. There is no way of knowing what’s on the other side. Most people would be uncomfortable, though they might open the door if they thought that what they are looking for, might be on the other side. Imagine that every time someone enters a website they are taking the leap to open that door – but what is being given to them on the other side? What is the user encountering at the entrance? Conversely, imagine one opens the door and comes up to a buildin g that gives them a thorough understanding of how its spaces are arranged. One can immediately get some understanding of what they’re walking into, and this feeling makes people more comfortable, and willing to keep exploring. The next step is the entrance. Imagine what an entrance to a public building might look like, there’s probably an elevator, a
staircase, and a list of different institutions and where they are located on each floor. A nice entrance sets the tone for the whole experience of the space. Imagine if the entrance is a room with an array of doors with obscure labels on them (Figure 10). T his arrangement would make most people uncomfortable because it’s nerve-wracking to be presented with so many choices of equal weight that are labeled in obscure ways. Imagine this hall of doors as the main page of a we bsite, containing an endless array of equally weighted drop-down menus (Figure 1). It is a misconception that giving people all of the options up front is the most efficient way to guide people to what they are looking for. This is a major lesson which we can learn from architectural navigation of spaces, and human comfort.
Conclusions
Information architecture design has the opportunity to learn from its users and constantly learn from and adapt to its users and its environment, whereas physical structures are much harder to alter. This is one way which information architecture has an enormous advantage over architectural design -- the medium is virtual, not physical. T he amount of time and effort it takes to change the structure of a website is minimal compared to altering a building to fit new requirements. It has become common practice in web design to make a website as a product, that is complete and final and never touch it again except for minor updates. If something isn’t working, if the audience or environment is changing, the tendency is to start all over again, possibly with an entirely new designer. IA can hugely benefit from looking at other design fields, especially Architecture, but it has an elasticity and pliability that none of the other fields have. There are many architectural theories that argue that good architectural design is good beca use the general public can appreciate it, while others say good architecture is good beca use specialists can appreciate it. It’s time that HCI design develop far enough to begin to have these arguments, and one way to begin these discussions by dra wing from other design professions, such as Architecture.
Figure 11: Name d the "Corridor of Powe r" this hallway is locate d in the forme r central bank building of the Ge rman Reich, the se cond largest building in Be rlin [11]. In website design, the user rarely has any idea how large the space is, how far deep they can go, even how to get back to where they were. T he “ Home” button can be compared to the fire exit, though this is one way to go from one space to another it isn’t the way most people would like to go. If every time one wanted to go to another room they had to go back to the entrance of the buildin g they would most likely leave the buildin g unless they absolutely had to find what they were looking for, and once found, they would leave immediately and never return. What if getting to each room took you through five other rooms, and you weren’t really sure how they all connect once you arrived. It’s an anxiety ridden nightmare which in architecture manifests itself in a feeling of being lost and deep anxiety, whereas in a virtual space is just leads to people clicking the “ home” button or the “ back” button until they feel they are somewhere they recognize again. Worse of all, it makes people give up, and leave the webpage altogether to look for one which they can better navigate. The With Art Philadelphia website uses an easy, clear, small bar to allow the user to be aware of how far they have scrolled through the banner of images (Figure 5). It might seem like a small detail, but this small detail combined with good context and navigability make for a website that people will willingly explore and enjoy. The Clouds Over Cuba we bpage also gives the user a clear understanding of where they are located on the timeline as the video is playing (Figure 9). This way the user is a way ho w far into the documentary they are, how much more they have left, and the timeline also provides them with interactive information.
REFERENCES
[1] Sa s, C., Whittaker, S., Dow, S., Forlizzi J. and Zimmerman J. 2014. Generating Implications for Design through Design Research. CHI 2014, April 26 - May 01 2014, Toronto, ON, Canada . DOI= /10.1145/2556288.2557357 [2] Ambrose, S., Bridge s M., DiPietro M., Lovett M., 2010. How Learning Works: Seven Research-Based Principles for Smart Teaching, Jossey-Bass [3] Grice, R., Bennet, A, and Fernheimer, J. 2013. Heuristics for Broader Assessment of Effectiveness and Usability in T echnology-mediated T echnical Communication. Technical Communication. Volume 60.1. pp. 3-27. [4] Muldoon, K. "100 Great CSS Menu T utorials." Web log post. Noupe. N.p., 23 Aug. 2011. Web. 16 Mar. 2014. Retrieved from http://www.noupe.com/css/100-great-cssmenu-tutorials.html [5] Argo site map. (n.d.). Retrieved from http://www.argo.uc sd.e du/sitemap.html [6] [Web Photo 06-09]. Retrieved from http://www.big. dk/#projects-sof [7] Danish National Maritime Museum (n.d) Retrieved from http://mfs.dk/en/about-museum/abo ut-museum [8] With Art Philadelphia. (n.d.). Retrieved from http://withart.visitphilly.com/ [9] Original 3rd floor plan. (n.d.). Retrieved from http://syracusethenandnow.org/Dwntwn/Columbus/Hot elSyracuse/HotelSyracuse.htm [10] T ricklebank, B. 2012. Clouds Over Cuba. T ool. John F. Kenedy Presidential Library & Museum. Screenshot from http://cloudsovercuba.com/ [11] Wehrmann, G. Corridors of Power. Digital image. German Missions in India. N.p., n.d. Web. 15 Mar. 2014. [12] Grosz, E. A. 2001. Architecture from the outside: Essays on virtual and real space. Cambridge, MA: MIT .
[13] Kieran, S., and T imberlake J. 2004. Refabricating Architecture: How Manufacturing Methodologies Are Poised to Transform Building Construction. New York: McGrawHill. [14] Norman, D. "Designing For People." 2013. Foreword. Microinteractions: Designing with Details. By Dan Saffer. Se bastopol, CA: O'Reilly Media. N. [15] Norman, D. "Design Without Designers." 2010. Web log post. Core77 Design Awards. N.p., 7 Oct. Web. 15 Mar. 2014. [16] Parker, L. S., and Hijun Yu. 2011. Basic Design Principles of Architecture. Lexington, KY: CreateSpace.