My Web 2.0 Marketing Proposal (Phew, It's Done . . .)

I have been working on a proposal for a company that wants to launch Web 2.0 marketing initiatives in 2010. It is as much an overview of Web 2.0 social media platforms as much as it is a marketing proposal. What's weird is that I decided to do it as a website - I'd provide a link, but it is, after all, a service that is being brought to market, so proprietary issues abound. But I think the opening video I embedded in the site is a safe bet - here, take a look:




I tried to bring a point home in this proposal, that Web 2.0 is not a Kevin Costner Field of Dreams endeavor, where you build it and they just come. Companies have to engage in dialogue with the people they are trying to reach and offer them something that makes them feel rewarded by the interaction.

I inserted evidence of the effects of Web 2.0 marketing, both in terms of its upside as well as how it can work against a firm. The first video below is one I used to show a different kind of marketing, one that makes the target audience feel as though they are understood. The second one is a reminder that someone can always use Web 2.0 marketing tactics against your firm.





I am actually surprised how much video wound up in the proposal, perhaps six or seven, if you count the screencasts where I put my voice over PowerPoint presentations. But the images and voices together strike an emotional chord that is hard to match otherwise.

I completed the proposal on Google Sites (again) and experienced HTML coding irregularities (again!). But in the end, it wasn't quite as painful as my last project on Google Sites.

I am still wondering what my client will ultimately think of the ideas I presented . . . perhaps they'll send their opinion my way in a multimedia format . . .?

So what do think about connecting with you audience? Post a comment with examples of effective connecting. Be sure to include a URL.

Collaboration - What Worked, What Didn't

I have been working on an interesting proposal project, which is due out soon. It's a proposal for Web 2.0 marketing services, and I am presenting it on a website. I have developed it online, partly with the help of a colleague.  We are part of a larger group engaged in a common endeavor, and it's been interesting to see how the various forms of communication have been useful - or not.
Most of the communications were asynchronous, and most were text-based. One synchronous application we tried was online chat sessions. While it was interesting to see people's comments come up, it was hard to keep track of who said what to whom, and after an hour, I felt l could've said it all in 15 minutes on a conference call. Those sessions were not very productive, but it did start a collaboration between one colleague and I that lasted the entire project.

The need to get our respective website projects rolling drove two of us to start collaborating. That relationship started on email following the chat sessions. I think I started it. That led to asynchronous thoughts passing between us, with some attachments to boot. Email served a useful but utilitarian purpose, and was best for attaching files. But it was still slow, as each of us was online perhaps once or twice per day.


Emails became limiting when it came to sharing URLs. "Now where was that email about Twitter metrics?" Surf around the Inbox for a few minutes, perhaps I'd find it, perhaps not. To avoid the pain of sorting through the email, we turned to delicious to pass bookmarks back and forth. That application worked as desired, no more, no less. Finding bookmarks was easy this way, which was important for reference info for our project.

We also used our respective websites to collaborate, sort of. We would each develop our site and direct the other to it for a look-see and feedback. A picture may be work many words, and the reassurance that I was on the right track was valuable, but it wasn't necessarily productive. That doesn't mean it wasn't worthwhile, it just didn't produce anything.

At one point, several of us were trying out a different technology, Writeboard, in order to collaborate on an unrelated matter. In that venue, a third person mentioned that they were interested in podcasting for their project. I like podcasting and thought I could be helpful, so I made a 30-second pitch using Audacity that essentially said, "If you write the script, I'll do the podcast." My idea got a warm reception, but I never did receive a script, so the podcast never materialized.

Time management pressures governed all this work, and it seemed (and still seems) like I took on more than I bargained for. Desperate times called for desperate measures - I picked up the phone. Wow, that's when things started happening. Just hearing someone's voice on the other end who seemed to be scratching their head as hard as I made me feel better, and with each of us having computers in front of us while we talked, we were able to provide responsive information to each other in real-time. While we couldn't interact on the screen, it was collaboration none the less. In the end, we provided each with references that we used in building our projects, and bartered services in trade. I did the layout for branded documents, while my colleague provided a logo.

So my proposal is almost done but for the proofreading, due partly from a moderate productivity boost from our efforts. We used different technologies for different purposes, but in the end, I found I enjoyed the human touch - hearing another persons voice - the best.

Red Phone Booth:

http://www.flickr.com/photos/craig-sinclair/ / CC BY-NC-ND 2.

Relief Photo: 

http://www.flickr.com/photos/seriykotik/ / CC BY-NC 2.0

Form vs. Function In Blog Redesign . . . or One Man's Skirmish with Cloud Computing

Form vs. Function – It is the age old argument about which should be emphasized in a design. In marine designs, there are widely divergent possibilities, and each feature on each craft produces results that affect both the resulting form and function. Mariners have long held strong opinions. Some are more romantic, comparing the form of a fine craft to that of a beautiful woman – recall that boats and ships are referenced with feminine pronouns. Others subscribe to the ultimate utility despite what the result looks like. See the Brossard Trimaran video below for an example in the extreme.



Where do I sit on this Form vs. Function continuum? I’m a minimalist who believes the most elegant solution is the one that gets the job done without encumbrances. I once took the scenic route  across the U.S. – on a bicycle. And when it comes to water, my boat isn’t any more elaborate. I paddle a 17-foot mahogany kayak I built from this design; apparently, 45 pounds of boat is all that is needed to cover 20 miles before lunch.


For those who have followed this blog, you likely know that I am a minimalist who emphasizes function when it comes to design. That philosophy is reflected in the kayak line drawing above (thanks to designer Nick Shade of Guillemot Kayaks).When I created this blog, I used the Minima Dark template on Blogger, designed by David Bowman.

I chose it then for the same reasons I chose my kayak: it was aesthetically pleasing, and it seemed like it was enough to do the job well without extra bulk. When I initially adapted the template, it looked like this:

My first set of changes to the blog created the following page, which most of you have read for some time. During the first month, the body was expanded from the default width to a wider specification to make the blog more readable. The wider version looked like this:

Since then, I've discovered an increasing fondness for my blog and most of its design, but I have to tell you, the mechanics of altering it have been a battle . . . more on that later. Pondering a redesign, I set out to change features in ways that matter, and decided to stay away from features that were superfluous. I’ll run through the design changes briefly, and then I’ll discuss what worked – and what didn’t.

The features I desired included:

1. a more personal and meaningful banner
2. truncated posts
3. a texture to the background
4. an RSS feed
5. a link to delicious
6. a way to have others link to my blog
7. that the blog be identified by search engines

Let’s review these one-by one.


BANNER


The new header was a success. The images were chosen to contrast simple and complex forms and functions, and the contrast of a line drawing with a photograph underscores the difference. The banner uses two typefaces, Bradley Hand ITC and Corbel, and was created using PowerPoint, then Inkscape, and then Jing screen capture software. The line drawing of the kayak is actually a negative I made of a proprietary source graphic, and a text gadget was added for attribution. While the header appears elementary, 13 versions were completed and uploaded before I settled on one. Posting it required fiddling with the colors, backgrounds, and various widths within the template. Compare the header at top to the old version below:

Score: Steve 1, Technology 0


TRUNCATED POSTS


One day, I decided to truncate the posts to fit more on the initial view. Searching the Blogger help files, there were instructions for using the Jump Break feature. Simple enough. I installed it on every long post. Afterwards, I found that my right-hand sidebar had dropped below the body of my blog – see below.

Researching this problem, I found it was a common dysfunction reported by others for the Google Blogger platform, but, despite more hours than I care to recall, I never found a reported solution that worked for my blog. Later attempts never resolved the issue, and, in the end, I removed the feature from all the posts. For now, the blog is limited to displaying two posts. Truncating the posts remains a “to do” item.


Score: Steve 1, Technology 1


A BACKGROUND TEXTURE



On a number of occasions, I surveyed available patterns and even tried to make my own using various methods, such as this pattern that I intended to tile in the background.

Hours went into the development and selection, with the most recent favorite being this one:

More time went in to the attempted upload. In every instance, using various techniques specified by the Blogger help files or the many other sources I found on the web, I was unable to get my blogs to accept the CSS or HTML code associated with these features. Searches for fixes led to further installations of code that did not work, or were so technical, I couldn’t understand them.


Score: Steve 1, Technology 2


AN RSS FEED


This was one of the few things that worked easily. It went in as a gadget in the sidebar. Done. See right. Phew!


Score:Steve 2, Technology: 2


A LINK TO DELICIOUS



I tried to post code into the Google Java script gadget, and also tried posting code into the template of this blog. I used code from at least 4 different sources. No avail. The best I could muster was the delicious logo sans text on one of my test blogs.


Score: Steve 2, Technology: 3


A WAY TO HAVE OTHERS LINK TO MY BLOG


I think my content is worth reading, I want others to be able to share my blog. I found HTML code that could be inserted into a Google Gadget that that showed viewers how to post a link back to my blog. It worked in this blog, see right. I posted the code displayed here into one of my other test blogs. It displayed properly there, and linked right back here. Here’s a screen shot of the feature:

Score: Steve 3, Technology: 3


GOOGLE SEARCHABILITY


Initially, my blog was not found when I searched for it on Google. Eventually, I figured out that Blogger's Label feature was metadata, so then I went back through all my posts and added descriptors to the Label fields. Two days later, Google was finding my posts. I showed the results to my kids and told them I was famous. Their eyes just rolled . . .


Score: Steve 4, Technology 3


CLOSING THOUGHTS


I suspect that there is something amiss. Other Blogger users I know have not had the same level of difficulties as I. And writing this post to admit temporary defeat on several counts isn’t a source of pride. Furthermore, I have a website project on Google Sites, and I am finding that it is riddled with similar issues. Some are genuine user errors, but some are attributable to unstable templates or technical difficulties that have yet to be diagnosed. I have tried working three different blogs, created several Google accounts, and worked from two different geographic locations using different ISPs. I can’t figure out what it is. My errors? Perhaps . . .


In Cloud Computing applications like Google Blogger, posting your problem to the Help forums is often useful, because end users who’ve experienced similar issues can give you good advice. But several problems could arise here as well: (1) you may have a problem that no one else has experienced; (2) a knowledgeable user may not be around when you need one; (3) if you don’t understand your problem, you may not describe it in terms others recognize, and therefore, will get no response. What else can you do? Call Google? Nope. If these conditions apply to your situation, you may find yourself On Your Own.


Back to this blog. In the end, my redesign was more modest than intended because of my battles with technology, limiting the resulting FORM. But given my minimalist ideology, a good basic template, the use of mixed media and a strong emphasis on communicating with a clear and personal voice, the content has remained the No.1 priority for this blog. The results emphasize FUNCTION. And looking back over the posts, it turns out that I have really enjoyed this process. If you’ve enjoyed it, too, than I think this blog is accomplishing its mission, A Better Message.

But Will They Get It?

Most of us are familiar with readability statics, at least if you routinely spell check documents created in Microsoft Word. You know . . . that Readability Statics dialog box that pops up after your spell check is complete, like the one shown below.

The two bottom lines show readability metrics for two popular algorithms, Flesch Reading Ease and the Flesch-Kinkaid Grade Level. Ok . . . admit it . . . you have been interested in seeing how high of a grade level has been assigned to your prose, at least once.

So we see these statics routinely, but what do they really mean, and how can they used to craft A Better Message?

THREE INDICES

There are several common metrics for readability. They attempt to quantify how easily a message can be read and understood by evaluating patterns in text. For three common metrics, the parameters evaluated are sentence length and the amount of multisyllabic words used in those sentences. The metrics I have encountered most often are Flesch Reading Ease, Flesch-Kinkaid Grade Level, and the Gunning-Fog Index. These are calculated as follows:

Gunning-Fog Index:

·       Grade Level = [(Average Sentence Length) + (percentage of multisyllabic words)] x 0.4

·       The exact method for accumulating data and calculating the result can be seen here.

·       The result suggests the grade level for which a text is most appropriate.

Flesch Reading Ease:

·       Flesch Reading Ease = 206.835 - (1.015 x Average Sentence Length) - (84.6 x Average Syllables per Word)

·       The method for counting words for use in the formula is given here.

·       The result occurs within a range of 0-100, with 100 being the most easily read. A table that further defines the score is given here.

Flesch-Kinkaid Grade Level:

·       Grade Level = (0.39 x Average Sentence Length) + (11.8 x Average Syllables per Word) – 15.59

·       The formula and counting method are expressed here.

·       Again, the result suggests the grade level for which a text is most appropriate.

As you can see, the results for the first and last indices are expressed as grade level. I did not find a descriptor on this, but I assume these reference common grade levels in the US.  I am not sure that these indices translate directly to grade levels in the educational systems used in other countries. If you know, please post a comment . . .

THEIR APPLICATION

In order to see how these indices rated text, I ran several passages through a readability calculator that provides readability statics according to multiple parameters. Here is what I found:

From my October 29, 2009 blog post, “Web 2.0 for Gearheads”:

Flesch reportedly identified 65 as a plain language index, so my text is just about there, but the grade levels assigned by Gunning-Fog and Flesch-Kinkaid differ by 4 years.

I also ran some text from the Starbucks website – here’s what came up:

This passage showed similar, slightly lower trends, and again showed a significant difference between Gunning-Fog and Flesch-Kinkaid.

Given contemporary concerns, I tried a passage from flu.gov, which provided this result regarding a passage addressing the flu concerns for pregnant women:

These results showed the site requires the reading skills of a 6^th to 8^th grader, which is appropriate for general audiences.

A review of a short text from my local motor vehicle regulator provided these results:

Hmmm . . . grade 14 to 18 grade for a site almost every adult in the State of New Jersey might have to reference . . . I have my doubts.

The indices above are valuable in several ways. They can help authors tailor content to an intended audience. In the case of young students, these indices can ensure that readability is maintained by keeping adult-written language simple to understand. For a public-facing communication, these indices can be used to ensure that the language remains sufficiently plain to be clear to a very broad audience, or, in the case of the NJDMV, flag a comprehensibility problem.

Applying these indices effectively suggests that the intended audience is known by the author. If it isn’t, keeping the text to grade 7 or 8 (or in the case of Flesch Reading Ease, above 60-70) is a good guideline.

READABILITY OF VISUAL DESIGN

Someone asked me if these indices might be used to assess visual design of documents. I suppose an algorithm might be worked out given an industry or academia-based effort to build consensus on how to measure visual "readability". In the case of text, the indices I selected use syllables and sentence length, two easily-defined qualities. But defining common visual literacy for the subjective perception of qualities such as color, unity, rhythm, contrast, typographic effects and the host of other design parameters seems daunting.

I suppose one could establish “visual readability” by analyzing performance-based measurements derived by experimentation. But that sounds a lot like usability testing. Perhaps when some critical mass of usability research has been completed, the complex patterns involved in visual comprehension will become more reproducible, allowing for development of complex algorithms. Until then, I see that usability testing will be required to establish visual design functionality.

What are your thoughts? Are there visual readability hypotheses that I am not aware of? Or is the subject just too gnarly to tackle in a consistent manner?

By the way, MS Word is telling me this piece has a Flesch-Kinkaid Grade Level of 10.8 . . .

The Presidents and Their Approval Ratings

On October 29, 2009, I posted a piece on imagery, which included several data visualizations. I am not interested in making this a political blog, but  I recently stumbled across an interesting interactive data visualization that I thought I'd post here.

This one shows the presidential approval ratings data for each US president since Harry Truman. There is a static screenshot below - go to USA Today's site to interact with the visualization, which you can adjust to compare specific presidents.

Interestingly, it shows repeated cycles of high approval at the outset of each Presidency followed by lower ratings at term's end, except for Presidents Clinton and Reagan. I wonder how the movement of the 9/11 terror trial to New York City, announced yesterday, will ultimately play out for Mr. Obama's approval ratings at the end of his term?

Nice job by William Couch, Kristen Novak, Michelle Price, and Joshua Hatch at USA Today.

A Website for Reflective and Visual Learners

I recently built a website on GoogleSite. It is designed for an audience with a particular learning style - Mine. The site, Torque Wrench Basics, trains viewers to use a torque wrench. To identify my learning style, I completed the Index of Learning Styles Questionnaire, sponsored by North Carolina State University. There are four continuums on which learning styles are evaluated. Learners are:

1. Active to Reflective
2. Sensing to Intuitive
3. Visual to Verbal
4. Sequential to Global

A discussion of the various learning styles can be read here. My profile was identified as follows:

My profile indicates that I am a moderately-to-strongly reflective and visual learner, with a tendency towards sensory rather than intuitive learning. To accommodate an audience with my learning tendencies, I used design elements that would help learners like me understand and retain the training content. The elements that made it into my final design are listed below by each learning style component.

Active vs. Reflective: Moderately-To-Strongly Reflective 
Active Learners like to learn by doing. Reflective Learners tend to learn by thinking about the matter for a while. I am a little of both, but more of the latter. To satisfy this description, I included two elements in my site:

• Review questions, where appropriate, to allow for reflection during the training.
• Links to sources outside of the training tool for additional information, study and reflection.

The review questions were included to force the viewer to do what they do best, reflect on the material in a particular section of the site. I used a two-page format for my reviews - the first was a questions page:

Following the "Answers"  link brought a copy of the page with the corresponding responses:

Sequential viewing of these pages immediately following the related training content allows, even forces, time for reflection by target audience to improve understanding and retention.

Links to outside sources of information, such as dictionary definitions and Wikipedia articles, were included to promote further reflection.

Sequential vs. Global: Neutral

Sequential Learners thrive when there is structure and order, while Global Learners take a more eclectic approach, jumping around until the piece s fall into place and they suddenly "get it". With neutral results on this scale, I thought it best cater to both traits. To address both ends of the spectrum, I incorporated the following features:

• Sequentially-numbered major pages for sensing learners. These presented the content in 5 modules.
• Color-coded icons at the top of content pages that show global learners the relationship of the page materials to the remaining site content.
• Titles in the content area colored to match the training module in which the page is located, again for global learners.

All of these features are shown below. The red title nearest the content indicates that this page is located within Module 1: Principles.

I also used sequential links at the bottom of each page for sensing learners, and site map that could be expanded to show the all of tha pages across the site, visible on every page for global learners. These features are show in the two screenshots below.

Sensing vs. Intuitive: Slightly-to-Moderately Sensing

Intuitive Learners thrive on learning the relationships within the subject of study. Sensing Learners are better with facts, but need to know the practical applications for the information. I used the following featuers to accommodate these traits.:

• Inter-page navigation links labeled as to the content, for example “Calibration” rather than “Next”.
• Content that favors actual use over theoretical constructs, related to field or job applications.
• Graphics composed of actual photographs or photo-realistic illustrations rather than abstract line diagrams.
• Supplemental fact-based content that reflects “real world” applications, such as lists of, and links to, calibration labs.
• A question-based navigation feature, picture in the next two screenshots, that:
• Allows answers to be found quickly.
• Responds to Sensing Learners’ affinity to application-infomation. 

The links in the screenshot above bring the user to the page that responds to the listed questions, an application-oriented result that caters to our Sensing Learner's need for practical information.

Visual vs. Verbal: Moderately-To-Strongly Visual

The learning style for this audience is strongly visual. To met the needs of Visual Learner, textural information was minimized. Again, photographs and photo-realistic sketches were used to illustrate key topics, and in two instances vidoes were used. In the first instance, a short video was used to allow Visual Learner's to see and hear how a torque wrench works. This video was very, very short:

The next video also meets the needs of Visual Learners, but was also used to underscore the real world consequences of the training content, something that could prove important to our Sensing Learners.
   


Closing Thoughts
Developing the actual content for the site proved to be fun. Developing the site itself proved to be a bit more challenging. Google Sites didn't have the feature sets I had originally planned on, such as buttons that functioned as links, and this caused me to implement solutions that were more crude than my intentions.  All the same, I think the site hits the design objectives, and the process I used to adjust this site is one that can be used in other web-based training applications. After all, adjusting the message based on audience analysis is an important key in creating A Better Message.

Less Words, More Meaning

When I was a kid, the technologies I saw every day were things like rotary dial phones, small black and white televisions, and shelves full of books. Things have changed a bit - today I have a cell phone that takes photos and video; TV's have grown as big as a wall, and books have been partially replaced by the Internet. 

What's interesting about newer technologies and newer lifestyles is the prevalent use of imagery. My cell phone creates and displays images, and images are an important component in its user interface. Televisions are everywhere, and the advertisements on them are more image-intensive than ever. Some of the information that we formerly found in books is now found on the Internet, an image-intensive environment. One thing is certain, the prevalent use of imagery is not going away anytime soon, so competency in its use is a must-have for technical communicators.

To evaluate the effective use of imagery in designing communications, I decided to focus my thoughts on the use of two particular types, and icons and illustrations, particularly data visualizations. The overused cliché says that a picture is worth a thousand words, or maybe 60,000 according Dr. Lynell Burmark. 

ICONS

In the case of icons, instructional meaning can be imparted in an instant, providing graphical instruction for viewers. One example is the use of icons in computer interfaces (shown below), another is the use of icons in web navigation.

In either case, the purpose of the icon is to inform the user on how to take action using a graphic to provide the instruction. Icons can be quite effective in enhancing usability . . . or not, as you can see in this screencast, where I review the use of navigational icons used on a business directory website, http://www.logonav.com/:

ICON-ILLUSTRATION HYBRID

Now navlog.com uses icons in their simplest form, and icons themselves are examples of relatively simple images with simple visual messages. Illustrations, however, can be used to convey even more meaning, depending on their sophistication in any number of properties. I found one example, however, where illustrations were used in a creative way to provide a dual function. The Story of Stuff is a 20-minute video lecture that explains the ecology of a materials economy. Illustrations are used on its website as elements of visual rhetoric that support the goals of the lecture and as icons that inform the user how to use the site and learn more about the subject, such as in the instance below:

I encourage you to go to the site, watch the 1^st couple of minutes and click on the illustrations to see how they also function as icons. I thought this application was really creative, useful, and effective. Did the graphics replace words in this application? I’m not so sure, but the certainly ADDED meaning in this instance. By the way, I am not necessarily endorsing all of the content in the video, but if you’ve got the time, it is a thought-provoking piece.

DATA VISUALIZATION

If iconic images are elementary in form and meaning, illustrations can transfer the meaning of complex ideas more quickly that many, many words. One genre of illustration is data visualization, which I referred to briefly in my September 13 post. In this form, large amounts of data can be evaluated visually, a process that far quicker, and certainly more interesting, than a textural description of the same information. In my earlier post, I referenced this animated visualization of a decade of U.S. trade deficits. How many words do you suppose that illustration replaced? 

One excellent data visualization is this one, posted at Axxis.org, on web browser market share over time. The center ring is the earliest, and shows the use of early versions of Internet Explorer, Netscape and AOL. The outer and latest rings include the market share of Safari, Opera, and Firefox, as well as the ubiquitous Microsoft browsers. There is a lot of information here that is instantly accessed . . .  I only had to read the key – there are no instructions on the graphic – to be able to write this description of the data.

Perhaps the ultimate data visualization project is Google Earth – how many words would it take to describe all of the features of the surface of the Earth? Using Google Earth, you can see your are of interest in seconds, and understand something about that area quickly by looking at the visual images presented.

Images convey meaning, and their effective use can communicate meaning far faster than words and text. So if effective use of imagery is the key to great communications, is bad imagery the fastest way to ruin your message? That’s an idea I don’t think we want to learn the hard way.

Data of the People, By the People, For the People

So maybe I am a day late and a dollar short, but I recently started an account with the online bookmarking service, Delicious. A latecomer to Web 2.0, I started the account because of the difficulty I experienced managing the many bookmarks in my browser. You can see my Delicious account here. If you look on the right-hand side of the screen, you'll see the number of tags that I have entered to date. "What are tags?” I'm glad you asked.

In Web 2.0 and other computer applications, tags consist of keywords assigned to a data file that describe the corresponding file content. Tags are a form of metadata that is useful when searching across a database. These data artifacts are used in a variety of applications; for instance, I am creating this blog entry in MS Word, and have assigned metadata to this file (which I viewed by clicking “File”, then “Properties”). It looks like this:

In this graphic, you can see some of the metadata is assigned to this file, which may become useful if I need to find this piece at a latter date. In this instance, the keywords identify the content. While I don’t often use this function because my database is small, it provides utility to a company involved in identifying and managing content across one or more organizations. The result is that specific tags can be searched within a database to facilitate retrieval of similar content. Doing so requires that the tags be organized in a way that allows them to be easily found.

Organizing systems of information can be approached in various ways. One source I read cited the Dewey Decimal System as a familiar system for establishing a hierarchy for the information contained within your local library. In the biological sciences, taxonomy of the known species of flora and fauna organizes our knowledge of the plant and animal kingdoms. In the same way, tags placed as metadata on database files can be used to classify and organize the files in a database. By the way, clicking on the tree in the link below gives rise to specific instances of biological classification – go to this link and click on the frog, for instance . . . the Tree of Life is an interesting Data Visualization.

Web 2.0 applications similarly use databases to organize tags, but their use figures more prominently in the functionality of the site. Hierarchy is established by folksonomy, where increased the frequency of tag use by the viewer community elevates the tag in site’s tag hierarchy. This can make for some other interesting data visualizations – Delicious has established a tag folksonomy for my personal account, which uses text color and relative size in a Tag Cloud to denote my most frequent tags. It looks like this:

Delicious’ site-wide tag cloud, as of the wee hours of October 21, 2009, looked like this:

Looking at this tag cloud, it’s easy to see that “design”, “blog”, “video”, and “software” are the most frequent terms used in tags by the Delicious community. This hierarchy is established by data the user’s entered, and implies that that these are the topics that Delicious users are seeking on the Internet. It’s a pretty solid statement about what is important to people. It is data of the people, by the people, for the people.

These hierarchies are not without imperfections. Anything derived from the actions of people is subject to human error – such as when I was looking for information on wrench design and entered the term twiting force instead of twisting force – see my personal tag cloud above.  As such, errors can be incorporated in the database, although this one should get buried at the bottom of the tag cloud pile, unless every other web-surfing mechanic is as bad a typist as I. This illustrates another Web 2.0 principle - the applications get better with increased use. As other tags are elevated in the hierarchy, the impact of my error will become essentially nil.

Other problems occur in folksonomies.  One of them has to do with the idiosyncrasies of the language used for tagging.  In English, we have synonyms. When I searched on lemon, two date-ordered bookmarks that came up had to do with automotive defects and lemonade, two results that are clearly unrelated. 

Searching on bush included items about the former U.S. presidents and a development project with bush in the title, but nothing about plants. See below:

So people aren’t perfect and neither is our language. Other aspects that make folksonomies less than perfect are discussed in this interesting paper by Adam Mathes. But the imperfections do not negate the power of folksonomies – knowing what your audience is thinking can be an important and powerful tool.

In business, reviewing a folksonomy against a firm’s own marketing goals could increase its success. For example, a software giant ready to introduce its Next Big Program could review a folksonomy on its site and find the most common searches are crash, corrupt and security patch. These descriptors could be indicative of the desired qualities for new products as well as an existing quality and public relations problem. A chain of auto repair stores that pushes brake and oil change services can review a car repair site and find “check engine light” and “state inspection” are the most popular tags assigned by site users. How might that inform their marketing plans going forward? A political organization could use folksonomies to gauge the interests of the public. Opening a tag cloud is a whole lot easier than accessing and reviewing website logs on user habits, and is more meaningful because the data and language are input by the collective usership.

So Delicious got me thinking about folksonomies and audience analysis, which resulted in the piece you are reading.  Good technical communication is all about accurate audience analysis. Folksonomies offer a feedback mechanism like no other - Data of the People, By the People, For the People. And imperfect or not, I cannot think of a more direct method for gauging audience interests, a key to creating A Better Message.

Web 2.0 for Gearheads

The sport of motorcycling consists of a number of rider communities. Many folks associate motorcyclists with either rough-and-ready riders with loud bikes, or with testosterone-laden youth who are dangerous to themselves and others - these groups are the most visible to the public. Another group is dedicated to touring and adventuring, and these riders tell the most amazing stories (Advrider is an interesting wiki site in its own right - you don't need to be a gearhead or a motorcyclist to enjoy the filmstrip of high quality photos on the entry page.) Then there is another fringe group -the folks who just enjoy how the experience and the machines come together - the ones like me who think that motorcycles are to land what sailboats are to water.

I started riding in 1979. I now own my seventh motorcycle, and am up around 80,000 or 90,000 career miles. Oddly enough, after owning some larger, more sophisticated bikes, I now ride a lowly Kawasaki Ninja 250 similar to this one, a motorcycle that most motorcyclists sneer at for is small size and even smaller motor. Interestingly, with a motor only nominally larger than a lawn mower, it is still capable of cruising faster than any speed limit in the US, and gets 70 miles to the gallon while doing so. I rode it to work about 90 days this year, a 95-mile per day commute, and some days covered 300 miles. But I digress.

So what does any of this have to do with Web 2.0? Recently, my Ninja left me stranded on I-84. I got it running again, but it would only function at full throttle, a condition that made the 100-mile run home rather interesting. Turned out, it was the carburetors (shown below using a picture from Ninja250.org), which needed to be rebuilt in order to resolve the problem. Three times. Eventually, I got it all back together (one of my other interests is turning wrenches) with some good instructions and advice. That's where Web 2.0 comes in . . .

Initially, I turned to the Kawasaki repair manual, the de facto standard for all things Ninja 250. Written by Kawasaki in the 1980's, the book seems like it is translated from another language. Poorly written, poorly organized, and poorly photographed, it's a usability train wreck. It takes nearly a full page to tell me that the carburetor float height specification is 17 millimeters. Again, I digress . . .  


The most relevant and useful information for my problem was found at ninja250.org, a wiki frequented by other Ninja 250 owners who share experiences, problems, and knowledge about these bikes. I was able to view and print instructions for getting carbs off my bike, rebuilding the units, and tuning the carbs after getting it all back together. I was even able to query other owners about my problem, who then provided advice and encouragement.  

That's what I like about wikis - the user-generated content is often the best available because it is born of the experience of the end users. In this case, the instructions, and photographs were much better than the information provided by the manufacturer. My tenure as a Volvo owner had me surfing another excellent site, brickboard.com, for years. Every wrench-turning friend I know has a favorite wiki for their vehicle.


Wikis are my favorite example of Web 2.0 applications. What's Web 2.0? That's the subject of some debate. In my opinion, Web 2.0 consists of sites that are all about viewers interacting with user-generated data. In the case of the Ninja250.org and Brickboard wikis, the users both benefit from and contribute to the site, which maintains the information in databases viewed by all. Each of these sites have user communities consisting of thousands of individuals, many who post contributions, such as I did recently when I saw an New York Times article on helmet design. This generated a threaded discussion on the matter, each entry of which was copied to my email. That's another feature of Web 2.0 applications- they signal the users based on database events, such as when another user responds to my post.

I will soon post another item to Ninja250.org - pictures of the auxiliary gravity-feed  fuel system I constructed from a turkey baster to diagnose carb dysfunction right on my workbench, something which may make life easier for my Ninja 250 colleagues. My postings are examples of the kind of user-generated data that makes wikis dynamic and useful. You won't find Kawasaki's tech writers publishing the turkey baster idea anytime soon.


So if Web 1.0 consists of web sites we read like magazines, then Web 2.0 consists of applications that we both read and contribute to. Tim O'Reilly at O'Reilly Media is widely credited with promoting the term Web 2.0 in 2005. In his article, he elaborates on the principles that are common to Web 2.0 sites, indicating that Web 2.0 applications are the ones that get better with increased use, and conversely, that these applications consist of data and operations that must be maintained daily in order to function. Mr. O'Reilly's doesn't give a bona fide definition, rather his ideas are best defined by a table that he included in the article:



Mr. O'Reilly later refined his definition as:

'Web 2.0 is the business revolution in the computer industry caused by the move to the internet as platform, and an attempt to understand the rules for success on that new platform. Chief among those rules is this: Build applications that harness network effects to get better the more people use them. (This is what I've elsewhere called "harnessing collective intelligence.")'

This definition references an important concept - computing services will not be hosted on our own computers or on a dedicated machine on the other end, but by the software interface that exists somewhere in between. This software will capitalize on data derived from users. This is the heart of the interactivity I experienced on the wikis I described above, and will continue to define and shape our collective web experiences.

Some are saying that we are moving on to Web 3.0. From what I've read, Web 3.0 might be the web that evolves from interactive to proactive, the web that could assist you by learning patterns about your behavior and choices. For instance, by recording your internet search habits, Web 3.0 applications could return customized results for different individuals even though those individuals input the same search terms. It could track your preferences and tell you where to take your spouse for dinner and a movie. Maybe it could become the web that tells you what to do. And if you are designer, how do you design for that?

This kind of pro-activity seems fascinating to some, but a bit big-brotherish to me. It seems that privacy issues might loom large in this model. However, I might become less skitish if some Web 3.0 application could rebuild my carbs FOR me.

A Better Law Firm SIte?

Some recent soul-searching about my blog has me thinking that my entries are too long, so I’ll keep this one short and sweet.

In my day job, I was surfing the websites of certain law firms that have environmental practices. I am in a related field, law firms are some of our clients.

In my opinion, most law firm websites tend to be similar. Of the 20 or more sites I visited that day, most were reasonably well done with useful layout, design, and aesthetics, tending towards something that is supposed to be confidence–inspiring or just rather fancy. Most used a lot of text, and most do not look all that different from each other.



In my surfing I came across the one above; I thought it was a bit different. The visual content and the coordinated messages on the home page identified clearly what the firm thought its strong points were, and didn’t wait for me to read a lot of text to get the point across. Here’s the link, look at the changing messages. Let me know if you agree.

http://www.williamskastner.com/

Changing Media, Changing Type

At different points in A Better Message, I have commented and will comment on how changes in communication technology have impacted our ability to get a message across – for better or worse. Each medium presents its own advantages and challenges. The number of available of communication media is increasing, and enables knowledgeable communicators to select more options for effective transfer of meaning than ever before.

Amid all this change, one topic that might not be at the forefront of our thoughts is Typography. If we take a minute to think about it, it seems almost obvious that the type style selected helps make the message, providing a visual/emotional context for meaning of our words. However, it may be that we seldom stop and think about the impact that typeface has on the many messages we read every day. And to the extent that our daily activities now have us authoring messages, we may rarely think about the impact of type at the times when it might be most beneficial to do so.

In reality, there are several limitations imposed on our selection of typeface. Depending on the message and medium, our reasonable choices are often limited by circumstance. Are you writing for your company something that will actually be printed on paper? Use the standard fonts in the company Style Guide. Want to get creative in that Word doc you are going to email to a client? You’d better be sure that she has the same font loaded on her machine before you hit “Send”, or else it may be read in something like Courier. Want to get fancy on that website? Better make sure that it can be rendered well on most screens by most browsers. Better yet, stick to something mainstream, like Arial, Verdana, or Helvetica.

Notice that the latter issues are all within the realm of digital communications. That’s because more and more of our communications are being shifted from print to digital media. And those suggestions I made about sticking with the tried and true typefaces . . . they are the defaults used in most web browsers. It turns out that some fonts are easier to read on paper, while some work best on screens. The three fonts I mentioned are sans serif fonts, which work best for screen-read text. And although they work well, they are not as warm or elegant as the serif fonts typically used for printed text.

Well, we are not the only ones who have noticed that the environment in which we read is going digital. While it is true that many traditional typefaces do not render well on computer screens, not everyone believes that sans serif fonts need to look and “feel” Spartan. When Microsoft introduced Office 2007, it also introduced several new ClearType fonts, partly to foster easier reading of digitally-rendered type. One of those fonts is Constantia, a font that is designed to read well on-screen, and look good on paper, too. However, the one I have been using for a while is Calibri, which I believe is the default font in certain recent Microsoft applications.

I’ll fill you in on little secret. Calibri didn’t get to be one of my favorites because of my extensive analysis of fonts or because of my vast expertise (ahem!) in Typography. Rather, when working on my resume a couple of years ago, I stumbled across it in my MS Word program. I liked it instantly. Calibri is simple and to the point, like many other sans serif fonts, but this one seems a little . . . well . . . warmer and easier to read. "Hmmm . . . Why is that,” you ask? Let’s take a look.

IS IT LEGIBLE?

One simple test to assess text legibility, the degree to which letters are recognizable, is to cover either the bottom or top half of a line of text and see if you can read it. If you can read the sentence, the text is likely to be considered legible. To try this out, I compared three lines of 10 pt. text (from top to bottom using Arial, Calibri, and Times New Roman).



Ok, so I picked three fonts that are all considered very legible, primarily because Arial and Times New Roman are very popular sans serif and serif fonts. But I found it easy to make out the sentence, “Think about how children and seniors differ in their behavior, disposition, interests and intellect." I hope you could also. Truth be told, I didn’t see any major legibility faux pas here, so our conclusions regarding legibility differences between these three fonts may be subject to our own preferences. But I think Calibri edges out the other two fonts in this test, because we are looking at this on a screen, the text is a few words, and Calibri has a little less character mass with a little more space between the characters. I wonder if our collective opinions would change if we saw the same three on paper?

IS IT EASY TO READ?

Readability, the ability to easily read text set in a specified typeface, results from several factors in typeface design. One of those factors is character spacing. To compare the amounts of character spacing, see below:



In this instance, you can see that Times New Roman and Calibri have about the same horizontal spacing. Arial is wider, but the characters do not seem to be spaced, in relative terms, as far apart. In my opinion, Arial is hardest to read, and it seems related to the relatively close spacing between the rather wide letters. Calibri, on the other hand, seems to have a bit more space between its characters than Times New Roman, and the overall character mass is less than Arial. This gives Calibri more white space (or, in this case, black space) within and between characters, as well as vertically between the lines of text.

Another factor affecting readability is x-height, the base height of lower case letters, discounting any ascenders or descenders on the characters. Typefaces with larger x-heights are reported to be easier to read. The balance of white space also matters – all other factors being equal, more white space can be found in type with larger x-heights, which makes text easier to comprehend. To compare x-heights, I again placed the three fonts together for evaluation. The relative height differences can be seen below:



All three of these typefaces are regarded as having relatively large x-heights. It seems that Arial is largest, but, again, it also has the widest characters. The x-heights of Calibri and Times New Roman are similar, with Calibri being just a bit higher.

SO WHAT IS DIFFERENT ABOUT CALIBRI?

In my opinion, there are two characteristic about Calibri that are striking. One is that it has “soft edges”. Calibri is rendered differently on the screen because of a technique related to aliasing, the treatment of pixels used to compose digital images. The end result gives Calibri a less defined edge to its lines, imparting a warmer color to this than seen in other sans serif typeface.

Another factor I noticed was the use of changing line weights in Calibri. It is not as pronounced as that seen in Times New Roman, but is more pronounced than that in Arial, and perhaps the other mainstream sans-serif typefaces. Even though Calibri is a sans serif font, its line weights make it seem as though it is somewhat closer in style to some serif fonts. This can be seen in the top curve of lowercase h’s or the curves in the letter m. The result is a text that is slightly more elegant and still quite readable.



Finally, Calibri has some rounded elements that give it more personality. The lines in each character have bowed ends and rounded corners. The rounded line ends are seen in the feet of the R. End curves in the text tend to be even, using a bit larger than normal radii – see the base of a lower case t, for example. Again, from left to right, the typeface is Arial, Calibri, then Times New Roman.



So here it is. Communication is changing in ways that are even affecting how text is presented, read and understood. To accommodate these changes, typography is also changing to maintain functionality in the new media. Traditionally, serif fonts, like Times New Roman, have worked best for long printed passages. In Calibri, we see some elements that are often used in serif fonts, making it more readable while still being screen-friendly.

As a new font for digital media, Calibri has been well received – see a review here and a somewhat more technical read here. And as for me, I’ll be happy to use Calibri in more documents . . . as soon as I know my recipients’ machines are also similarly equipped.