Saturday, April 27, 2013

Wayfinding in the Real World

The art of wayfinding is as old as written history.  In this post I will look at a modern real-world implementation of this ancient art.
The art of wayfinding has been utilized for as long as there has been written communication.  Ancient cave paintings are known to depict crude maps.  For overland travel, cartography and trailblazing have been combined for centuries.  In earlier eras, trailblazing many times consisted of marking trees along a trail with hatchet chops.  Today this is done in a more ecologically friendly form, using paint or plastic markers.

Near my home, Norman Lake State Park uses a combination of signs, maps, and trail-blazing marks to aid in wayfinding.  This utilizes many of Passini’s Sign-Posting principles of Information Design, including presenting the right information, where it is needed (Jacobson, 2000, p. 90)


This is evidenced by the placement of a general map, and a detailed insert in the parking lot. 


Then at the trailhead there is a clear sign as well as a trailblazing mark.  Following the color and shape of the mark leads one down the full trail.  Turns are indicated by two marks, the upper being left of the lower if the trail veers to the left, or on the right for trails turning right. These standards in form and presentation greatly aid in both finding the desired path and remaining on that path.

Resources Cited
Jacobson, R. (Ed.). (2000). Information Design. The MIT Press.

Wednesday, April 10, 2013

The tools I use.

In this article I will go over the Information Design tools I regularly use in the production of this blog.
I was recently asked what tools I have used in the design and production of this blog.  There have been three primary tools I have relied heavily upon.  The first is Photoshop from Adobe for the creation and manipulation of the images displayed on this site.  The second is CorelDraw from Corel.  This I use for the production line art, which I then finalize in Photoshop.  The difference between these two is Photoshop is a raster-based (think pixels) product, while CorelDraw is a vector-based (think lines) program.  Raster images do not scale well, but vector images are not designed for display in web browsers. 

For information design purposes, I would add two additional desktop tools from Microsoft - Excel for the production of charts and graphs; Visio for the creation of flowcharts and certain types of other graphics.

However, the single most important tool in use for the production of this site is Blogger – the content management system underlying this blog.  Blogger provides a number of key tools for the creation and customization of a blog site.  Starting with fully customizable HTML-based templates, and easily added gadgets, the system allows for each blogger to craft a site unique to themselves.

While the tool allows an author to fully customize their blog using client-side Javascript, CSS, and HTML, it also provides simple to use editors and site designers that require no knowledge of these technologies.  Additionally it provides for building a social network component into a user’s blog through comments. Finally it provides an excellent set of tools for performing web analytics, showing how much traffic a site is seeing and where that traffic is originating.

Best of all, Google provides all features of Blogger for free.  There are no upgrades.  The only opportunity to spend money is on high-end third-party templates.
 

Every picture tells a story

While a picture may be worth a thousand words, it is only valuable when people look at it.  InfoGraphics adds the additional complexity of needing to be understood.  The challenge becomes producing the right image, shown at the right time to the right audience. In this article I will explore Dan Roam's methodology for making the right choices.
Napoleon Bonaparte is credited with saying “a picture is worth a thousand words”. This is especially true today where we have relatively little time to spend on absorbing knowledge in our information dense society. The new profession of Information Design and concept of InfoGraphics has risen up around this fact – aiding people in more rapidly grasping meaning through transforming information into images.

However, it needs to be the right image presented at the right time to the right audience. To accomplish this, Dan Roam recommends that an Information Designer utilize a methodology he has dubbed Imagining. As a preamble, the designer is encouraged to close their eyes and begin visualizing what is not readily visible. A designer draws connections between different bits of information and develops a mental understanding. They then work on how to best visually portray the information to convey the information in an easily digestible format.

But what format? While Microsoft Excel provides 53 chart types to convey information. Microsoft Visio adds hundreds more to the possible formats. However, all of the charts and graphs can be grouped into one of six archetypes. Each of these are associated with one of six basic questions: Who/What; How much; Where; When; How; or Why. This forms the first axis of Dan Roam’s Visual Thinking Codex. To use the codex, a designer needs to decide the type of information to be conveyed. Is it about a person, a group or an item? Then develop a portrait. Is it a question of how many or how much? Then create a chart. Is it about a location or structure? Then craft a map. Is it time-dependent? Then construct a time line. Is it about how things fit together? Then build a flowchart. Or is this a question of WHY? This calls for a multi-variable plot which can be the hardest to create.

Readers of Mr. Roam’s The Back of the Napkin are familiar with his SQVID (and I am not talking about seafood). SQVID stands for Simple, Quality, Vision, Individual attributes, Delta (change). He uses these five attributes to define the five dimensions of all infographics. Each dimension is an either/or decision to be made based upon the target audience. Is this a simple drawing, or should it be elaborate? Is portrayal of Quality or Quantity more important? Is the audience more concerned about a vision of the future, or today’s execution? Is the goal to highlight a single attribute, or compare items? Finally, should focus be on changes or on the status quo?

While all well-developed infographics contain all five aspects, the next step in leveraging the codex is to determine which aspect is most critical. For example, if we are looking to describe inter-relation of data – ie, show where items overlap – then we would go to the Where row and determine that a map is the best method for conveying the information. Next, if we determine that the information is primarily focused on a goal or vision, we would look to the V column and see that the optimal framework for our use is a Venn diagram.

The Charities Aid Foundation (CAF) world giving map provides a clear example. From their map we can determine that their intent was to show how much each country gave and how they compared. Using the codex, a bar chart is recommended. However, the nature of information – country data – includes a Where factor, which would indicate the use of a map. To encompass both the Where and How Much factors, CAF utilized a bubble chart where the relative size of each bubble was indicative of their rank and then placed each bubble in the approximate location of the country it represents.

Thursday, April 4, 2013

InfoGraphics - cure for Information Overload

As the volume of information increases, the time we have to assimilate knowledge from any one item decreases. To help counteract this effect, Information Designers have begun to utilize pictographs to more readily convey understanding. These pictographs have been dubbed InfoGraphics.
Infographics aid visual thinking

Wednesday, April 3, 2013

Design Tools

In The Back of the Napkin Dan Roam explains the four step process of Visual Thinking: Look; See; Imagine; and Show. The Information Design process would appear focused on the Show step, and most design tools are targeted there. However, tools do exist to aid in the other steps. In this article I will be examining one that I use regularly when working with clients as we collectively Imagine their future design.

In The Back of the Napkin Dan Roam explains the four step process of Visual Thinking:
  1. Look - Take in all the information available to build an initial "Big Picture"
  2. See - Assess the information and begin making connections
  3. Imagine - With eyes closed, visualize what isn't immediately obvious and begin manipulating the information to make hidden connections visible
  4. Show - Find the best method to visually represent a summarization of the information observed and the connections found
The Information Design process would appear to be focused on the Show step, and most design tools are targeted there.  Andrew LeBarron  briefly reviews three of these: Piktochart; Gelphi; Gliffy; all of which can be used to create striking visualizations of information. While not as readily visible in the final web design, one tool I frequently use is FreeMind.

FreeMind is a mind mapping tool useful in creating diagrams that visually outline information. A mind map is a graphical way to represent ideas and concepts. It is a visual thinking tool that aids in structuring information, helping us to better analyze, comprehend, synthesize, recall and generate new ideas. A mind map is often created around a single word or text, placed in the center, to which associated ideas, words and concepts are added. Major categories radiate from a central node containing the key idea, with lesser categories as sub-branches of the larger branches. Categories can represent words, ideas, tasks, or other items related to the central  idea.

Mind Maps organize the information in the same way our brain organizes information. This makes it very natural and easy to understand. Our brains like thinking in pictures. The smooth curves and colorful pictures create powerful images for our brains to remember.

We have two halves to our brains which think in different ways. The left half thinks linearly following direct linkages to related ideas. Our right brain likes to see the whole picture with colors and flow. A mind map caters to both sides of the brain at the same time, which makes it a very good way of storing and recalling information, presenting complex concepts to other people, and brainstorming new ideas.

Brainstorming is encouraged through the use of a radial hierarchical layout and non-linear creation of categories. This creation process generates mind maps that are unique in structure and design, making it easy for our brains to process and retain the information.

I have found mind mapping a useful practice in helping clients identify key driving forces behind web projects, as well as the information and its association to be contained within their web-based system.  Below is an example mind map created interactively with a client describing a future cloud-based business system.



 
Works cited:
Roam, Dan. The back of the napkin (expanded edition): Solving problems and selling ideas with pictures. Portfolio, 2009.

About Me

My Photo
"delivering the BIG PICTURE through managing the little details"
 
When you sit in a boardroom with Tim Foley, it becomes clear that he is a key contributor and valued advisor within the IT Security environment.  And, what may not be as readily apparent is a more personal side that compliments and adds depth to his management style.  Often using humor and real-life examples to illustrate a point, Tim brings an air of levity to an often dry and complex technical discussion.  Recently, when explaining the mortgage crisis of 2007 to a neighbor, he likened it to buying strawberries at Costco and created an entire scenario surrounding the process.  Afterwards, the neighbor remarked that although he had been trying to understand the mortgage crisis situation for some time, he had never truly understood it clearly until this discussion.  Being an avid reader, Tim brings a wealth of general knowledge into his discussions, making him an engaging conversationalist.