Escaping Flatland: Towards Better Documentation for Information Architects

逃離地平面:撰寫更好的資訊架構文件


Introduction

One of the hottest topics these days in Information Architecture circles is documentation. This is probably partly because the IA's role is so ill defined. This presentation is representative of my first attempts on the use of visualization to communicate information architecture concepts to clients.

簡介

最近在資訊架構這個領域中被討論的最熱烈的主題之一就是文件撰寫。有一部份的原因可能是由於IA的角色被胡亂定義,這份簡報是我第一次嘗試使用視覺化的方式來和我的客戶溝通IA概念的一個代表。

Story

Typical Information Architecture project

Question 1

Illustrate the depth of knowledge and we have acquired and the amount of effort expunged throughout the whole project.
<Chart 2 and 3>

Question 2

How to provide rich data - an overview - a small space for the intended audience - the non-working group.
<Chart 4 - p122)

Outcomes

Improve effectiveness of current documentation practice.

Set of diagramming/visualization guidelines

Enhanced understanding of different diagramming types -- proper usage, strengths, weaknesses, and techniques

Development of application libraries to allow rapid development of diagrams

故事

典型的IA專案

問題一

說明了解的程度、我們已經取得的資料以及我們在整理專案做過的努力

問題二

如何提供豐富的資料 - 一份概要 - 一些關於訴求對象的資料 - 沒有作用的分組資料

結局

改善目前我們撰寫文件的效率。

訂定流程圖 / 將設計指引視覺化

促進了解不同型態流程圖 -- 合適的用途、強點、弱點與技術

建立一個應用程式庫可以快速的開發流程圖

Definitions

Information architecture is the structural design of the information space to facilitate intuitive access to content
<Chart 1>

Information architecture (IA) is primarily about cognition - how people process information and construe relationships between different pieces of information.

Information architecture belongs to the realm of the abstract, concerning itself more with the structures in the mind than the structures on the page or screen.

定義

IA 是將資料(訊)轉化為更容易憑直覺取得內容的結構化設計。

IA 主要與認知有關,包括:人們如何處理資訊以及如何在不同的片面資料、訊息間建立關聯,IA 屬於抽象的領域,它主要關心的是使用者心中所形成的架構,而螢幕會頁面的架構就不是它的重點

Purpose of Documentation

"...the process of documenting a system's functionality or information structure is creative. It is creative in that we are at once designing the system and designing the documentation to represent that system. "

"Through the documentation, we come to a better understanding of our own conception of the system. As we develop a clearer vision of the system through the documentation, we find ways to improve the system."

Because of the rather abstract nature of this work, information architecture is defined by it's deliverables. The documentation is key to understanding, educating, and selling the work. Our deliverables, therefore, become high profile.

In the real world of business, abstract means:

撰寫文件的目的

"撰寫系統功能或資料的架構的過程是一種創意—也就是我們在設計系統的同時也要設計一份可以說明系統的文件的這種創意"。

"透過文件的撰寫,我們會更了解整個系統設計的概念。當我們依照所撰寫的系統文件而開發出一個比較明確的系統版本時,我們也會發現如何來改善它。"

由於 IA 本質上是一件相當抽象的工作,透過產出的東西才能讓它明確。撰寫文件是促進了解、進而教育以及推銷這個設計工作的關鍵。因此,我們所產出的東西就很重要了。

在現實的業務角度上,抽象代表:

What comprises deliverable's

Generally there a multitude of different deliverables within the Information Architecture process.

  1. Conceptual Model
  2. Content Inventory and Organization
  3. User Flows/Scenarios
  4. Task Analysis
  5. Site Diagram
  6. Page Architecture (wire frames)
  7. Decision tables

All of these types of deliverables are extremely important to the working team but will seldom read and understood by others who are important to the total decision making process. For them these deliverables can not be viewed in their "raw" state.

We need to incorporate as much of this data as needed and as possible in a visualisation that the target can understand and utilise.

產出的東西有哪些

一般來說,在作 IA 的過程中,會有下列的產出。

這些各式各樣的產出對於工作團隊是相當重要的,但是卻鮮少被那些在決策過程中佔有重要地位的人所了解或閱讀。對他們來說,這些資料還原始的無法閱讀。

我們必須把這些資料以視覺得方式,儘可能的具體化,好讓需要了解它們的人可以了解與利用。

Lessons from Edward Tuftee

“Make all visual distinctions as subtle as possible, but still clear and effective” (Explanations 73). The intent of this strategy is to discourage authors from creating a greater visual distinction than the data implies.

“Confusion and clutter are failures of design, not attributes of information” (Envisioning 53). In a way, this sentence—which begins the chapter in Envisioning Information on Layering and Separation—captures the essence of Tufte's work.

Edward Tuftee 的經驗

"視覺化的設計要儘可能的精巧,但是要清晰、不失效率"(Explanations 73) 這個意圖是用來打消作者在資料本身所沒有暗示到的部分過度發揮創意。

"令人困惑、混亂,這都是失敗的設計,它們不是資料的屬性" (Envisioning 53) 在 Envisioning Information on Layering and Separation 這一章開頭的這句話,倒是抓到了Tufte 的工作本質。

Conventions

Visual conventions play a critical role in our ability to perceive the meaning of a diagram. If a web site is actually an invisible, multi-dimensional abstraction, we may understand it as a set of cards or boxes connected by lines, color, or symbols in part because we know, from our previous experience, what cards, boxes, and lines can represent.

Here are a few of the decisions to be made when diagramming the mentioned information:
The kind of information to be represented must be defined. There are many possible dimensions to illustrate: click depth, page type, logical grouping, major navigation path, link relationships within the site or out to other sites, access rights, media types, user tasks, flows and scenerios, etc.

The information must be organized into a visual pattern. Choices of what to use to represent link relationships must be made.

慣例

視覺上的慣例在我們理解圖表的意義上扮演一個很重要的角色。如果一個網站真的是一個看不見、多面向的抽象概念,我們也許可以透過一組用直線連起來的卡片或是方框、顏色或一些符號來了解它。因為我們從過去的經驗可以了解卡片、方框以及直線所代表的是什麼。

這裡有一些我們在將所提及的資料圖表化的時候所需要決定的事:
被表示的資料種類要有所定義,有幾個角度可以來說明它:點選的次數(click depth)、網頁形式、邏輯分類、主要導覽路徑、與內部、外部網站的連結關係、存取權限、多媒體型態、使用者的目的、使用流程與腳本等等。

這些資訊必須被組織成視覺的模組。選擇用什麼來代表連結關係必須先決定。

Current Practice

Hypertext links have no type, classification, or structure other than uni-directional point-to-point navigation. As such, a hypertext has no inherent topology.

In my quest to find out answers to my questions I did a quick review of current visualisation practice.

The most common problems with this approach are utilization of space and the representation of links that do not adhere to the tree topology. The space problem is simple to explain. A flat representation of the tree becomes wide (or long) very quickly. This makes the overview difficult to grasp in a single view. The application of magnification on sections of the tree in combination with a reduced view of the entire structure can and has been used.

While these techniques are useful, the loss of visual context and the absence of appropriate detail do not satisfy the need for a single comprehensible view. In my experience, the client needs a single overview of the entire structure to grasp the shape of the product.

目前的做法

超連結除了單向、點對點的倒覽之外,沒有型態、分類或是結構。就其本身而論,超連結沒有固有的拓樸架構。

在我尋找我的問題解答時,我很快的查閱了目前的一些視覺化的做法。

在使用這個方法時最常見的問題在於空間的利用以及連結的表示。這三個圖表製作的拓樸架構並不一致。空間的問題很容易瞭解,這三種方式用平面來表示,一下子就會變得很寬(長),要一瞥之間就要抓住整個全貌是很困難的。使用縮小的架構圖,然後配合將部分放大來檢視,這是這三個圖表製作可以用也已經在用的方法。

而這樣的做法是可行的,這些少掉的視覺脈絡以及相關的細節並不能為這簡要的概觀說明帶來多大的幫助。在我的經驗上,客戶所需要的是可以很快的從整個架構的概觀說明裡面抓到產品的形狀或樣子。

Dimensional paper

Dimensional Deliverables:
Exploring the Realm Between Paper and Screen

Abstract

The evolution of the Information Architect's project deliverables has, out of necessity, become a process focused on flat representational site maps — a controlled jumble of lines and squares on paper or on a screen. If web sites are dimensional information spaces, then what do IAs miss by typically presenting artifacts in two-dimensions? The experimental paper and plastic sheet forms in the project test the possibilities for adding physical dimension to paper deliverables by using basic office supplies. This process was limited to the simple actions of cutting, folding, bending and gluing working with adhesive substrates that can be printed on by office copiers. The resulting patterns could now apply to real world client engagements, and to solicit feedback from the Information Architecture community.
<insert all_maps.jpg>

All the map prototypes shown with images used for concept inspiration. The prototypes are unprinted. Grid patterns for each of the maps have been created in Adobe Illustrator. The base grids will be imported into Visio to have web map graphics applied.
<insert circular_cut>

The Circular Cutout Book Map with pages partially lifted. Holding the large half-circle on the right level keeps the 1.0 Home disk label label no matter which way the map is rotated. All map box IDs and labels will be printed to always read correctly in the bottom quadrant of the map as the whole book is rotated. The pages are all cut from 11 x 17" card stock that will be printed via color laser.
<insert step_map>

The Collapsible Step Map. Pulling the top flap down to close also collapses the dimensional map levels. The front facing squares of the extruded levels will have web page thumbnails. The top faces will have corresponding ID numbers and labels. The paper base is 11 x17" card stock that will be run through a color laser printer.
<insert step_map_sketch>

A sketch of the Step Map labeling. We are limited to 3 or four levels, and maybe a couple dozen facets per level on an 11x17" sheet. A web site architecture map that is limited by the paper it's visualized on might be a good thing.
<insert concentric>

The Concentric Transparency Map without graphics applied. The next prototype will incorporate the ability to collapse the transprent sheets.
<insert concentric_tube>

The Concentric Transparency Map with map box and link placeholders. These are 8 1/2 x 11" transparency sheets that will be run through a color laser copier to have custom Visio map graphics applied. I will explore how web site map symbols interact and re-cluster across multiple transprent planes.

方格紙

這部分的產出:
探索紙張與螢幕之間的領域

摘要

資料架構專案已經超過需求地演進到成為一種製作平面表示網站地圖—一堆在紙上或螢幕上被控制著的線或方框—的過程。如果網站是一個可以丈量的資料空間,那麼在典型二度空間 IA 的表示方法上有哪些漏掉了?這個專案所產生的測試紙和塑膠版是在測試利用基本的辦公室用品來替書面的產出加上一些實體向度的東西的可能性。這個過程是限定在一些簡單的剪、摺、扭曲、黏貼的工作上,而且也要可以用辦公室的印表機列印。所產生的圖樣可以應用到現實世界與客戶的約定上,而且可以請求資料架構社群給予一些意見。
<insert all_maps.jpg>

所有的和影像一起顯示的地圖原型是用來啟發概念靈感的。原型沒有字。每一個地圖裡面的格子樣式是用Adobe Illustrator 作出來的。基本的格子將會匯入 Visio 給網站地圖運用。
<insert circular_cut>

Circular Cutout Book Map 的頁面有一部份可以立起來。握住右邊這一層比較大的半圓,無論地圖怎麼旋轉,都可以看到1.0 Home disk 這個標籤。當書被轉動時,所有地圖方框的 ID 和標籤都會出現在地圖下部 1/4 的地方。這些頁面是用將來可以用彩色雷射印表機列印11 x 17" 的卡片剪出來的。
<insert step_map>

The Collapsible Step Map。拉下上方的邊緣可以關閉或收起地圖的層次。正前方的方形上會有網頁的縮圖,上方的那一面會有相對應的ID和標籤。紙張的規格是11 x17",可以用彩色雷射印表機列印。
<insert step_map_sketch>

Step Map 標籤的草圖。我們設限在 3 或 4 層,而 11x17" 紙張上的每一層可能有數十個面。一個網站架構地圖受限於用來將它視覺化的紙張也許是一件好事。
<insert concentric>

Concentric Transparency Map 沒有使用圖片。下一個prototype 將會加入收合透明版的功能。
<insert concentric_tube>

有地圖方框與預設連結的 Concentric Transparency Map。這些是用應用 Visio 製作,彩色印表機印出來的 8 1/2 x 11" 透明版。 我將進一步說明網站地圖符號如何跨越這些透明版間彼此作用、重新串聯。

Isometric projection

Of or exhibiting equality in dimensions or measurement.

--- The American Heritage(R) Dictionary of the English Language, Fourth Edition.

Isometric projection , a species of orthographic projection, in which but a single plane of projection is used. It is so named from the fact that the projections of three equal lines, parallel respectively to three rectangular axes, are equal to one another. This kind of projection is principally used in delineating buildings or machinery, in which the principal lines are parallel to three rectangular axes, and the principal planes are parallel to three rectangular planes passing through the three axes.

---Webster's Revised Unabridged Dictionary

The most rewarding and challenging form of information graphics are compositions that convey multivariate data, diagrams that pack many layers of information into the "flatland" of graphic two-dimensional presentation.

正規投影

尺寸或測量上的呈現品質。

--- 美國英語語言遺產字典,第四版

正規投影(Isometric projection) 正交投影的一種,通常用在單一平面的投影上。之所以這麼稱呼它是因為它是三條等長的線,兩兩平行於三個長方形的軸。這樣的投影主要用在畫建築物或機器的輪廓上。

--- 韋伯斯特修訂字典完整版

The most rewarding and challenging form of information graphics are compositions that convey multivariate data, diagrams that pack many layers of information into the "flatland" of graphic two-dimensional presentation.

Application

The visualization works best as a large printed diagram, large enough to contain the necessary detail and organized to provide at a glance information about high level structure. In this sense, it functions much like a city map or museum floor plan, providing the viewer with a sense of the organization in a single view while providing detail on specific locations. The same diagram can be presented in PDF format on the computer screen. However, the lower resolution of the screen, even at 1024 pixels wide, does not support the visual experience as well as a printed page. The requirement to magnify the view in order to read specific details introduces the same loss of visual context mentioned above in our discussion of large tree structures.

The application of isometric projection to represent a web site grew from several models.

The technique is commonly used for architectural drawings. By representing a building on an isometric grid, the drawing can present details in the foreground and background on a uniform plane, aligned to the parallel lines of the grid. This avoids the reduction of background elements dictated by the geometry of a vanishing point perspective view.

The same technique has been applied for mapping cities.
<insert turgot map>

A classical example of this is the Turgot map of 18th century Paris, an engraving produced in twenty sections. This map uses a raised point of view and isometric projection to represent all the building structures of the city as well as the major streets and geographical features. A portion of this map, along with a 20th century orthogonal map of Manhattan, are reproduced in Tufte 1990 in his discussion of Micro/Macro Readings. <insert chart 5, 6 >

Using this technique to visualize information architecture brings with it two useful associations.

First, the architecture is seen as a space with depth. The architecture begins at the lower left of the drawing, with the suggestion that the user will move into the architecture by following links between adjacent pages, moving towards the upper right. In this way, the third dimension also reflects the element of time measured in number of clicks needed to reach each level.

Second, the Z dimension can be used to imply navigational connection without requiring additional visual symbols, such as lines or arrows. The illusion of depth carries with it the implication of connection between elements that are behind each other on the plane. In addition, the isometric projection allows us to introduce depth while still representing the foreground and background elements at the same size. This is critical for presenting detail in a uniform way throughout the visualization.

They are optimized for presenting comprehensive patterns of high level structures, with elements sorted on a depth axis according to their position in a hierarchy, while the value of the marks represented by color, size, vertical position, etc., carries secondary information. Portions of the floor of the grid can be bounded to signify grouping. This floor can be moved to positions above the base plane. The vertical position can then be used to signify other aspects of the information. Care must be taken to respect the alignment of elements to the grid and connection of lines between elements, to maintain the visual logic of the composition. When this is done, the relationship of the various elements are understood by the reader largely through intuition, without reference to an explanation key.

應用

視覺化的工作最好向一章印好的大型圖表,大到可以涵蓋所有的細節、組織,讓人一看就可以了解高階的結構。從這個角度來看,這樣的功能就好像是一張城市的地圖或是博物館的樓層說明書,提供參觀的人可以很快的了解整個組織,而在一些特別的地方則提供詳盡的說明。同樣的圖示也可以用在螢幕上用 pdf 格式來呈現。然而,解析度不好的螢幕—即使是1024 像素寬—也無法提供和紙本一樣的視覺經驗。為了可以閱讀特定的細節而擴大瀏覽範圍的需求說明我們在之前所提到當要看大形樹形結構時會遺漏掉一些視覺內容的形情。

運用正規投影的方法來表示網站已經發展出來幾個模式

在技巧上一般是用建築式的畫法。用一個正方形格子來表示建築物,將前景與背景畫在統一的平面上,依照格子的平行線排好。這樣可以避免背景元素被透視法的幾何學方式支配。

同樣的技術也被用來替城市畫地圖。
<insert turgot map>

一個典型的範例是 Turgot 作的 18 世紀巴黎的地圖—一個二十個部分的雕刻品。這份地圖用凸起的角度和正規投影來表示所有的建築物結構以及主要的街道地理特徵。這份地圖的部分和20世紀曼哈頓的直角地圖在1990年Tufte 討論Micro/Macro Readings 時重新被提到。
<insert chart 5, 6 >

使用這樣的技術將資訊視覺化帶來兩個很有用的聯想。

第一,建築物看起來好像是一個很深的空間。建築物從圖畫左邊低處開始,使用者將依照建議進入建築物,藉著比鄰一頁頁裡的連結,往右上放移動。這樣一來,三度空間也反映了點選到每一個層次所需衡量時間的因素。

第二,Z 軸方向可以用來暗指不需要額外視覺符號導覽的連結,例如直線或箭頭。深度的錯覺涉及在平面背後元素與元素間的連結。此外,正規投影可以讓我們可以在同樣的版面上說明深度,也可以表示出前景與背景。在整個視覺化上,從頭到尾保持一個統一的方式是很重要的。

他們對於高層次結構各種多樣化的呈現方式是很樂觀的。利用儲存在深度軸上的元素,依照架構中以顏色、尺寸、垂直高度等等標示的位置,來攜帶第二種訊息。部分的樓層格子可以被用來表示分類的界線。這層樓可以被移到平地以上的地方。垂直的位置可以用來代表其他方面的訊息。要注意的是你要尊重元素在方格上的排列以及彼此間的連結線,保持整個作品的視覺邏輯。當這些都做好了,各種元素之間的關係將可以很直覺地、不需要參考解釋說明就可以被讀者了解。

作者:馬克勞 /Author: Clark Macleod (cmacleod@itri.org.tw)