As we listen to someone speak, subtle variations in intonation, volume, speed and rhythm contribute more to our understanding than words alone. Conventional typography communicates pure, refined content, stripped of most of the emotion. Unless we highlight a word with italic, any information about someone’s tone of voice must be annotated into the text. Such a marked difference between speech and text means that we have one voice for speaking and another for writing. Dictography tries to bridge this divide.

In dictographic notation, conventions of typographic and musical notation are combined and augmented. The four basic properties of speech: pitch, volume, tone and speed are divided into separate channels. These elements are then encoded according to a set of rules which use relative position, visual weight (boldness and condensed-expanded) to background and text colour, word spacing.

That basic framework is further augmented with symbols relating to individual vocal characteristics: key signature gives information on overall tone, the speakers’ sex, nationality and accent and standard pitch of the voices (think bass, baritone, treble and soprano). The ends of phrases or sentences are marked with a large blue dot. Phrases needing exclamations or question marks add Spanish-style inverted marks before the phrase, issuing advanced warning to readers. Any non-specific vocal sounds such as a tut or a click of the tongue is indicated with an orange star. Likewise, a trembling voice is represented by a trill mark. Finally, en dashes are replaced with a discrete arrowhead because of the risk of conflicts with the stave lines.

The inside front cover looks, at first glance, to be entirely abstract but is in fact a rendering of the Archers episode as a sample:

Analysing a 5 minute scene from BBC Radio 4’s The Archers took a huge amount of work, codifying each speaker’s pitch, speed, volume and emotional cues. It should be possible to automate this using a software tool, or perhaps one day even to automate speech recording directly into dictographic notation. That would give a different look to Hansard!

This close-up view shows the level of detail I had to go into in order to produce the transcript:

Obviously, this system still has serious limitations. It cannot truly portray the vast subtlety of vocal dynamics, harmonics and the barrage of other variables inherent in anything as complex as human speaking.

But by offering several more layers of data into the text stream, it can offer a richer reproduction than conventional text and annotations can convey and I hope that might be of value to certain professionals for whom conveying meaning through speech has a value.

Technorati: design, idea, music, notation, personal, system, typography

You can read more about the experiment on Ed’s blog at the Transition Network site but in essence, Richard and I will be taking over the Twitter account for a short while and exploring new ways of working with Twitter in order to figure out the best strategies for raising awareness of Transition on Twitter as well as engaging with other people who are in Transition already.

Ed’s a braver man than me, since I’m not sure I’d be so eager to allow my Twitter account into someone else’s hands!

I’m really flattered to have been offered the chance to help with such an interesting project for such an amazing organisation and I’m looking for interesting and exciting news stories and people to connect while I’m involved in the account. Please send me anything you feel would be of interest to those who are interested in the international Transition Network. There are some interesting developments happening right now so it should be a fascinating experience.

Technorati: #transitiontowns, socialmedia, transition, twitter, volunteering

Anyway, to appropriately mark the passing of such an important part of all our lives, the professional lovely lady Beth Kanter suggested I carve a memorial tombstone (using JJ Chandler’s Tombstone Generator tool).

This is what I came up with but please add your own suggestions in the comments:

Technorati: creativity, email, humour

Technorati: 10:10, activism, activists, climatechange, comedy, energy, environment, peakoil, politics, transition, war

The basic content page is a fairly bog-standard three column model with a wide range of regions which collapse based on block allocation, via the usual Drupal theme layer conditional regions. However, we are exploring using Context module or Panels to assign blocks and region visibility.

Standard content page

Wide content page

This page demonstrates how region visibility allows for variable width content.

Map page (wide, no blocks)

Feedback needed

Please feel free to comment on any aspects of the visual design, information architecture and other usability or Drupal development issues if you can spot any technical problems. For instance, I read recently that it’s actually quite hard to write a “Read more” link into the header of a Block header.

Technorati: design, drupal, linkedin, transition, ttmvt, website

This page is essentially intended to be a basic local newspaper type of blog site with tag clouds, latest news, a headline block and sub stories sections. Many initiatives may not have the journalistic skills or manpower in order to exploit such a feature but I personally believe this could be one of the most important focuses for large-scale Transition awareness raising within and across communities. TransitionNetwork.org’s upcoming news aggregator feature will rely on well-formed and timely news stories being available over RSS feeds etc. Navigation is via Tagadelic tag-cloud, calendar view and other routes.

News landing page

News page

Likewise, a single News page or Story is essentially a blog posting with associated tools and navigation options available for finding related stories, sharing the story with friends and adding comments.

News story

Feedback needed

Please feel free to comment on any aspects of the visual design, information architecture and other usability or Drupal development issues if you can spot any technical problems. For instance, I read recently that it’s actually quite hard to write a “Read more” link into the header of a Block header.

Technorati: design, drupal, transition, ttmvt, website

All Albums listing

This is a simple gridded display of all the albums in the photo section of the site along with other lists of most popular and most-recently-added photos.

View of all photo albums

Photo album

The album displays all the images within a single album in another grid view, giving information about which user uploaded (and by inference who made) the photos  as well as some basic metadata and tagging about the collection.

Photo album view

Photo page

The Photo page displays one photo or digital image on its own with metadata, basic information and a link to the photographer’s profile if they have one. There is plenty of space underneath to pass comment on the image if users wish.

Photo view

Feedback needed

Please feel free to comment on any aspects of the visual design, information architecture and other usability or Drupal development issues if you can spot any technical problems. For instance, I read recently that it’s actually quite hard to write a “Read more” link into the header of a Block header.

Technorati: design, drupal, transition, ttmvt, website

A simple gridded listing similar to the Photo album page showing videos found by users. These videos will be hosted elsewhere on sites such as Youtube or Vimeo and the codes embedded into a post by a user. You can sort and filter the listing of videos by various criteria on this page along with listings of latest and most popular videos.

Video listing page

Video page

This page shows what the user will see once they click on a video in the Video listing view. Basic information on who added the video, some metadata and voting tools also appear here.

Video page

Feedback needed

Please feel free to comment on any aspects of the visual design, information architecture and other usability or Drupal development issues if you can spot any technical problems. For instance, I read recently that it’s actually quite hard to write a “Read more” link into the header of a Block header.

Technorati: design, drupal, transition, ttmvt, website

A requirement for a links page was identified in our team – a place to both provide recommendations of local organisations and businesses, link to other partners and similar organizations, provide more detail and further reading and also possible allow other users to publicise their own groups. A taxonomy and structure need to be hammered out for this section.

Links directory

Feedback needed

Please feel free to comment on any aspects of the visual design, information architecture and other usability or Drupal development issues if you can spot any technical problems. For instance, I read recently that it’s actually quite hard to write a “Read more” link into the header of a Block header.

Technorati: design, drupal, transition, ttmvt, website

This is a normal forum-style listing of topics with symbols marking hot, new, stale sticky and normal topics. Some debate needs to be had over whether we need multiple levels of topics inside topic containers or whether a single unstructured listing page would be adequate for the number or diversity of topics we will be hosting.

Discussion forums

Discussion thread page

This image demonstrates how a specific Discussion thread could look with basic information next to the thread itself and showing tools next to each post. More work needs to be done on how this operates.

Discussion thread

Feedback needed

Please feel free to comment on any aspects of the visual design, information architecture and other usability or Drupal development issues if you can spot any technical problems. For instance, I read recently that it’s actually quite hard to write a “Read more” link into the header of a Block header.

Technorati: design, drupal, transition, ttmvt, website