TrippingWords unalterated verbiage

Designing Beautiful User-Experiences for the Web

User Experience (UX) design is traditionally categorised under the broader paradigm of web usability. It pertains to the building of architecture and interaction models that influence a user’s experience with and perception of websites. This article however, will not serve as an ordinary how-to guide on web usability tests/analysis, but rather, it aims to introduce a different perspective to user-experience studies – the meta-narrative. 

What is a Meta-Narrative?

Simply put, a “meta-narrative” is a story that a website communicates to its readers. Every website is supported by a meta-narrative. It conveys to the reader of how exactly to interpret/read and of course ‘experience’ the content presented. An analogical equivalent (but more explicit in its function) to the meta-narrative would be the “user manual” of a particular appliance, say a microwave. In the latter case, the document explains to the user in clear and concise terms, how to operate the mechanism in question. 

For the online world, meta-narratives are usually constructed and conveyed through visual indicators – the graphical/typographical/technical composition of a web page is a crucial storytelling device. Designing user experiences for the web refers to the of shaping these meta-narratives in a manner that meets the website’s primary objectives and satisfies specific user requirements, whatever they may be.

Most websites usually comprise of a series of browser and media specific style-sheets, an all-rounded content-management system (the “admin area”) and finally a landing homepage. The meta-narrative is an active interaction between these various components.

The current design trend of employing varying magazine styled page layouts for blog posts is a true testament to the phenomenon of the “meta-narrative”. Every blog post tells a unique story; not only in terms of content but more importantly how a user can potentially engage with and decode the displayed information. Visual cues, such as font choices, and layout structures, are utilised to construct a meta-narrative that is unique to that post alone. There are however certain consistencies in varying meta-narratives. The “site footer” for example, might remain rooted at the same absolute position, apart from undergoing certain subtle stylistic treatments, like a change of colour or font.

To summarise, the meta-narrative basically represents a “back-story” of any site. It is the story that subtly (or even subconsciously) informs the user how to experience a particular webpage. It is the cumulative effect of various visual (stylistic) and technical elements which eventually give rise to the meta-narrative.

Do not Underestimate the Intelligence of your Users

The meta-narrative of a website should never interfere (or become a hindrance) with the overall browsing experience. Its sole purpose is to function as an “invisible guide” for the user to navigate though a website’s information hierarchy. Javascript pop-up boxes, containing lengthy text descriptions, that are activated every time a link is hovered, can, under certain contexts, lead to a meta-narrative that is overwhelming to the extent of disrupting user experience. In my opinion, designing a user intuitive online platform requires a large degree of constraint (do not go overboard with informing your users how to behave). It also involves knowing exactly how certain visual indicators work to initiate specific responses from the reader.

Several usability articles often lament at how websites fail to provide substantial visual cues for users to interact and navigate. It is also equally vital that designers know how to construct a meta-narrative that guides users throughout the whole browsing process.

How to tell an Effective Story?

Let’s do a quick run through of what has been covered. I’ve defined what meta-narratives are, and spoke about how they function as usability ‘guides’. The next series of points addresses the ways in which designers can create effective meta-narratives that translate into positive user-experiences.

Good Narratives Make an Immediate Impact!

A good meta-narrative does not only serve as a usability guide for users but more importantly it immerses them into a ‘new’ and ‘fantastical’ experience outside the banalities of tradition. A well-designed and usable site offers a memorable ‘experience’, one that transcends all expectations and yet remains foundationally functional and easy to use. A simple and nifty MooTools effect applied on a website’s navigation for instance, can go a long way in ensuring a highly unforgettable user experience.

Discovery and Exploration

Meta-narratives should encourage user exploration- a feature that can only be fully developed through extensive usability tests. In certain situations, users may want to perform a particular action that runs against the “narrative flow/fluency” of the website. Wikipedia provides an excellent example of this. In any Wikipedia entry, there are hyperlinked words (in that particular article) that may or may not topically relate to the article you are reading. So a search in Wikipedia about Labrador Retrievers may lead you to a research ‘adventure’ that is on an entirely different scale, like rocket science! 

Well crafted meta-narratives facilitate user exploration and learning. Providing link tags at the end of each article/post (presuming that you run an articles-based site) is a novel and simple way to promote discovery, within the navigational boundaries of your own website.

Provide Carefully Considered Exit Points

Exit points are links to other sub-pages on the site that have a complementary relationship to the main content featured. These “exit pages” will usually contain snippets or interesting information relating to the primary content but it is less formal in its delivery and it also serves as a much needed reprieve for the reader. Exit points are the “breaks” between various chapters of a meta-narrative.

Understand the Concept of Knowledge Cartography

Cartography is the business of making geographical maps. Knowledge cartography is a project run by the Politenico di Milano (Italy) and it refers to the construction of knowledge maps. Knowledge maps show various relationship strains between different bodies of content. These maps are not simply symbolic representations of content but they have narrative meaning in explaining the similarities, differences and alternatives between various on-site articles/content. A contemporary design-based equivalent to knowledge maps would be “site maps”, which provide a largely superficial and taxonomical break down of the various sub-sections of a website (but this is hardly groundbreaking).

Online technologies are still (believe it or not) not equipped with the technical capabilities to syndicate dynamic knowledge maps on the fly, to allow readers to make distinct/detailed comparisons between different content. Nevertheless, if you are designing a content-heavy website it would be good to think about the information architecture of the site. How will the content be connected together as a cohesive networked whole?

In conclusion, the meta-narrative is an integral facet of user oriented experience. It is an ever-present user-guide to online browsing. I would certainly be interested to hear your thoughts!

Editor’s Note: I would like to wish all my readers a Merry Christmas and a wonderful New Year. Tripping Words has,till date, been serving the design community for 3 whole months, housing over 25 articles, and without your constant support, it would not have been possible. So thank you very much.