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 . . .