Sign-posting the web

Romedi Passini in Jacobson's Information Design shows that the objective for sign-posting is not about designing signs, instead it is about helping "people move efficiently to their chosen destinations". This is also applicable to web design, as sign-posting is employed to aid visitors in finding their desired information.
We are constantly inundated with data. Television, radio, Internet, mail, billboards, smartphones, GPS systems, etc. all attempt to provide us with information. However, until we are ready to process that information into knowledge, it blurs together to become background noise.

The act of processing information is driven by a need in the moment for specific knowledge.  This is typically brought about by an event for which there is not a ready precident. To clarify, let's compare two situations involving car travel.

The first is the morning commute to work.  I get up, get ready and head out.  Many times I arrive at work having not even consciously recognized all that I have passed.  My brain is basically on autopilot, only focusing on the unexpected, after all I know where I am going, I have been going there for years, and hopefully will continue for years to come.

Now, compare that to taking a trip to a new destination, like Disneyworld in Florida.  Now I have a number of decisions to make - what route will I follow, where will I stay on the way down, how often will I need to stop?  All of these become secondary decision to the primary decision to visit Disney world.  All require a higher order of awareness to the surroundings to ensure a safe arrival. Effectively finding the proper route or wayfinding becomes an active process.

Specific knowledge is required at each decision point.  Information designers understand this and create targeted signage to aid us in making those decisions. These same information design principles can be applied to the Internet, providing clear signposts to aid in finding our way through the maze of data.

One key point to remember is that standardization of sign posts greatly aids in rapidly processing them.  Think for a moment if stop signs varied in color and shape - would it add to confusion and possibly accidents as people failed to correctly process the signage? These same standardizations can assist website visitors in finding their way.  Mark Griffen, managing director of  Ranking Quest, makes the point that simple clear sign posting aids web vistors in finding the information they seek and enhances their overall experience.

These basic principles are at work on this site.  Starting with four  icons representing the basic types of links - internal, external, secure, and eMail - I have worked to incorporate current usage conventions into this site.  Take for example the two external links in the paragraph above.  The external icon following the link clearly signposts that a visitor will be leaving this site.

On the home page, you might have noticed the short article discriptions followed by a sign post inviting you to read more. These short descriptions, refered to as teasers, function like a directory in a building lobby, helping visitors find what they are seeking.

Read about: Adding teasers to Blogger.

The key is to keep the volume of information manageable with clear and consistant signposts to aid in navigating the site.  A visitor can then follow the marked route to gain the additional information they seek. 

Sometimes it can be as important to know where you have been as to know where you are going.  The fairytale Hansel & Gretel has the children leaving a trail of breadcrumbs to find their way back.  A similar sign-posting technology under the same name exists on the web.  If you look to the top of this page, you can find a trail of breadcrumbs leading your way back to to the homepage.

A final element of signposting is font choices. Today the web offers many additional free font types. Used judiciously, font types can draw the web visitor's eye towards key items. In the case of my blog, I use specific fonts for the teaser headlines and the labels in my "Cloud of thoughts" widget. The size of the font in headlines will typically be the first place a visitor will scan. If none of these are relevant to what they seek, the thought cloud will be the next to draw their attention. In this way I help facilitate a visitor's decision process. Like road signs along the highway, these visual clues help my visitors wayfind their path towards the knowledge they seek.

Works cited:
Jacobson, Robert E. Information Design. Cambridge, MA: MIT, 2000. Print.\

Read more...

Tech Tip: Adding teasers to Blogger

One of the drawbacks I have noticed in most of Blogger's templates is a lack of short teasers for display on the home page. After a bit of research I uncovered a method to address this. Many blogs have an index page for their home page that displays a list of articles with a short description - or teaser - about the article.  The free Blogger templates I have used do not seem to incorporate this feature, so I investigated ways of adding the capability to my blog.
First, I would caution anyone undertaking this - have a good comfort with HTML, CSS, and at least one programming language {javaScript, PHP, ect.} before beginning.  Also, be prepared to have your blog display only a # as you work through the solution.

Before I begin, there is a bit of background to cover.  Blogger uses templates to determine what content is displayed and how it is arranged. The template has a number of "layout data tags" that can be used to determine what to display and when to display it. A complete listing of these tags can be found at Google>Help>Customize Your Blog>Layouts. Additionally, it is usefull to understand the logic constructs of Blogger's templating language. For this tech tip, I will be using the IF construct which is composed of three tags:

• <b:if cond='condition goes here'>
• <b:else>
• </b:if>

I will also leverage the blog.pageType data tag.  It typically has one of three values: item - it is the full blog post; index - it is on the index, or home page; archive - it has been moved into the archives.  When the blog.pageType is item, we want to display the full post. When it is index, we only want to display the teaser.  I will also be working with the post.body data tag which holds the contents of each post and the post.url data tag which houses the address of the full blog post.

To differentiate between teasers and the full post, I use two different CSS classes - teaser, fullpost.  I will place the text in my posts into the appropriate <span> so that the HTML of my posts looks like this:

<div class="teaser>
{Teaser text goes in here}
</div>
<div class="fullpost">
{Full post text goes in here}
</div>

One more item before we begin.  I would recommend that anyone attempting to edit their Blogger template utilize a good line editor.  I prefer using the shareware editor notepad++ which can be downloaded from http://notepad-plus-plus.org/.  However any good line editor will do.  I would caution against using the default Windows Notepad or a full word processor such as Microsoft Word.

Now let's begin.  The first step is to acquire the template HTML.  To do this, open your blogger account and select Template from the left menu.  Click on the Edit HTML button to open a window containing the template.  Once open, click on the Expand Widgets Template checkbox. Now click anywhere in the HTML code and press {Ctrl+A} to select all the text and {Ctrl+X} to cut it to the clipboard.  Paste this into your line editor.

Inside the editor, find the <data:post.body/> data tag and replace it with:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>.teaser{display:none;}</style>
      <style>.fullpost{display:inline;}</style>
      <p><data:post.body/></p>
<b:else/>
     <style>.fullpost{display:none;}</style>
     <style>.teaser{display:inline;}</style>
     <data:post.body/>
     <b:if cond='data:blog.pageType != &quot;item&quot;'><br/>
          <a expr:href='data:post.url'>Read more...</a>
     </b:if>
</b:if>

This will turn on teasers on the index page, then turn them off on the actual post pages. You then select all from my line editor {Ctrl + A}, copy it to the clipboard {Ctrl + C} and paste it back into my Blogger template window {Crtl +V} and click on Save template. 

Next, choose Settings > Post and comments > Post Template and add the following to the Post Template:

<div class="teaser">
{teaser text goes here<br /><br />}
</div>

<div class="fullpost">
{post text goes here<br /><br />}
</div>

These same <div> tags can be inserted into existing posts to incorporate teasers.  Just edit each post, and turn on HTML.  Add <div class="fullpost"> to the top of the post and </div> to the bottom.  Then insert <div class="teaser"> </div> at the very top and type the teaser between the div tags.

Depending on your template, there may be a number of items displayed below the Read more... link.  I suggest working through each item below the <data:post.body> data tag, commenting them out {<!--   -->} and seeing the result on the index page of your blogger site.  Once you have it the way you like it, replace each comment pair with <b:if cond='data:blog.pageType == &quot;item&quot;'> and </b:if>

That's it.  Save the final template and your site will now have teasers on the index page.

Read more...

Areas of Focus

In my career I have found that most information systems can be broken down into 4 high level components - input forms, output, whether it is to the screen or print, data storage and processing that ties it all together.

In my career I have found that most information systems can be broken down into 4 high level components - input forms, output, whether it is to the screen or print, data storage and processing that ties it all together.

While traditional application design has spent it's time in the reverse order - that is starting with the processing and ending with input forms - inverting this paradigm can lead to greatly enhancing the human usability of a given system.  Increased usability directly correlates to how quickly and thoroughly it will be adopted.

Apple is a perfect example of this.  Twice Apple has broken the mold by generating a new paradigm for usability.  First in the early 1980's Apple introduced the Macintosh with a graphical user interface.  Then in 2007 Apple again revolutionized the way we interface with devices when they introduced the iPhone.

Most people today take for granted graphical user interfaces, such as Microsoft's Windows and have only limited knowledge of the computer green screens from the past.  Likewise, many of the gestures and interface designs pioneered by Apple in the iPhone are now the norm for phones.

Finally, application development capabilities have progressed such that most anything which can be visualized can be programmed.  Thus the focus of design needs to shift towards the human factors and much greater time spent on both the usability and aesthetics of applications.

Read more...

What is Information Design?

To me, Information Design is the intentional conveyance of knowledge through the transfer of relevant information filtered from the vast sea of data collected through the ages.  Quite a mouthful, but as the old saying goes a picture is worth a thousand words. Welcome to my thoughts about information design.  Within this blog I will endeavor to not only convey data about information design but to illustrate these principles in action. 

So what is information design? As Melissa Winans, a fellow classmate, puts it: Information Design "includes designing everything that an individual may look at as a whole".  I would extend that to include other senses as well and designs with intentionality. For example, the header graphic, the brief message, and the background music on this site are all targeted towards conveying aspects of information design.

Robert Jacobson, author of Information Design (1999) describes information design as "the systematic arrangement and use of communication carriers, channels and tokens to increase the understanding of those participating in a specific conversation (pg 4)". Andrew Paul LeBarron II, another colleague, simplifies and clarrifies Jacobson's definition to being the use of shapes and symbols to communicate.

Monks of the middle ages used this principle, adding illustrations to the books they were scribing to aid in the comprehension of the written word.

But what is Information Design? 
To me, Information Design is the intentional conveyance of knowledge through the transfer of relevant information filtered from the vast sea of data collected through the ages.  Quite a mouthful, but as the old saying goes a picture is worth a thousand words.

Works cited:
Jacobson, Robert E. Information Design. Cambridge, MA: MIT, 2000. Print.\
Enigma, Mea Culpa, 1990. MP3

Podcast Powered By Podbean

Read more...