Default Site Weblog

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. 

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.

Great Article!! It was interesting to read about meta-narrative in UX design. I really liked the Wikipedia example. Most of the times you really end up viewing something entirely different from the topic with which you began your search. It’s like going down the rabbit hole!!

Hey Josh,

This was an awesome article, introducing me to concepts and design stratagems that I was previously unaware of and in the dark about - a great round-up of the facts and a perfect launching point for further research! I certainly hope this one makes the rounds on the big dev blogs!

@Adit Gupta

Thanks Adit. Wikipedia presents a whirlwind of surprises. I really admire the ‘networked’ information architecture they have.

@Laneth
Glad you enjoyed the article Laneth and thanks for the comment! Yup, I do intend to expand on this research. I find UX design pretty fascinating!

Hey Josh, I guess I’m a first-timer here. I’m no UI/UX expert but I’ve been creating websites for quite some time now. More of a coder though, but I do layout design sometimes too

The article is awesome, well done! I never came across the term “meta-narrative”, but it seems that most of us have been doing that without even knowing it. Or at least trying to..

Anyways, nice blog man, good to know you were featured on @smashingmag

Cheers buddy and happy holidays!
~ K

@Konstantin

Thanks for the compliment. The meta-narrative concept is a method of perceiving UX, it is not a fixed category under web usability or user experience. It is one of the many ways in which we can perceive UX.

Thanks for commenting!

Hi Josh!

I have spent shopping for the holiday and I didn’t know you have just posted such a great article.

Keep it up, Josh!

@Lam Nguyen

Thanks for the kind words!

Thanks so much for this article Josh, I’ve been really getting into design theory lately and you don’t find many articles discussing it in relation to the web.

Jason Santa Maria has been really inspiring for me lately. I really would like to rework my blog so that individual articles can be styled to most benefit the basis of the article.

Overall, extremely interesting stuff!

@ Angie

Thanks for the comment. I agree, Jason Santa Maria has really set the standards in terms of “art-direction” - a trend which has gained popularity in recent times.

Josh, I am so happy to have come across your blog. It is one of the most beautiful I’ve ever seen (and if you were wondering, displays great in the android browser). I was excited to read this interpretation of web design from a theoretical perspective - I will have to browse your other articles for tips on improving usability as I update my website. Happy holidays!

Alexa

Thanks so much for the RT. Truly, appreciate it!
Hi there and thanks for the kind words. I am actually in the process of designing separate versions of this site on various mobile browsing platforms so it’s great that the website works fine on android.

Glad you found the articles useful.

Oh and btw, loving the minimalistic elegance of your website!

Nice read in writing. Something we consider when designing, but never define in words! Tnx!

Charlie

Thanks for the response. Much appreciated.

Hey Josh, very interesting post.

Most of the things that you talked about are very foreign to me. It was good to read about meta-narratives, exit points, knowledge cartographies, and more.

I didn’t go to design school so I might have missed out on a lot of design theories, but the internet has been my teacher and I am constantly learning new things.

I have studied typography in great detail but have personally not really read up on user interface/interaction/experiences. This is a topic where I am not so strong in, and this article is a good starting point for me.

I just purchased Smashing Magazine’s book and it has a chapter on this so that should further help out as well.

This post has been an eye-opener for me. Thanks for writing it and sharing it with us.

Hi Jad. Thanks for writing in!

I am glad the post provided you with some insights on UX design. To be honest, I am relatively new in this field too, and I’m trying to learn something new everyday.

I love typography but it is an area which I haven’t paid enough attention too.

Thanks again mate.

dwnadmka http://yjbjzuyb.com yxddcsoh igiwpbqi gxiwywac  nvtyiytz

You make a few interesting points that I didn’t think about.

I always understood meta-narrative as a framing story applied to one’s worldview. I think it might be a misnomer to apply the term to a website. But I see your point.

We’re 20-somethings. Philosophically, that puts us somewhere under the influence of postmodernity. A key tenet of that philosophy is a skepticism of great meta-narratives.

Eternal-destination, Is Jesus God?”, and where we come from are all questions we’re inclined to shy away from asking or engaging with.

In contrast, postmodernity encourages a wealth of micro-narratives. We love fiction. We love short stories. We like getting our fix.

I think that’s why we enjoy websites. If we don’t like it, we can close the tab or window with a simple CMD+W.

Your response was indeed enlightening and educational! Postmodernity grapples with the varied intermix of various narrative structures and you are absolutely spot on in saying that the postmodern era encourages micro-narratives - short, asccessible “experiences” that are easy to “log on and log out of”.

In fact, postmodern theorist, Baudrillard, once made the (ludicrous) assertion that reality does not exist anymore and we live in a world of hyper-reality - a world of fleeting images. (simulcra)

OMG!  I love this article! 

I’m the I.S. manager for a small company that hosts a webpresence called “Monalle: The Positive Thinking Playground ( http://www.monalle.com ) that serves pure positivity in articles, games, and videos fresh daily… There are hundreds and hundreds of pages there with content of all kinds…

The Meta Narrative was/is/and always will be absolutely crucial to the project for us.  As the I.S. overseeing the whole thing, I’m incessantly pushing for a better narrative, “The page must tell the story at a glance” I say repeatedly…

Your article and the examples express so cleanly what I’ve been trying to, however I want to introduce an element to the discussion if I may (I’ll be back to see if you respond to little old me!)...

The element is this: “The 3 & 50 Challenge”  It works like this, “Core thematic elements are allotted 3 http requests and 50k bandwidth”

It’s our interpretation of the Google Speed initiative,  because when it comes to page load time, Fast is Good!

So if you visit our site, you may say, “This is nice, but trippingwords is much better”...  And honestly, your aesthetic and meta-narrative is outstanding, however, you aren’t part of the 3 & 50 challenge… 

I am very curious to see how you would express yourself within those harsh constraints (for reference: this page has 45 http requests and loads in about 31 seconds over T1 placing it slower than 99% of websites, Monalle loads in just over 3 seconds : : : ten times faster per page)... For us, the meta narrative includes the “Sitting there waiting for the page to load” portion of the narrative…

In other words, what I want to intriduce to the discussion is Page Load Time as an instrumental, crucial, all too often completely overlooked element of the Meta-Narrative (did you really need to spend 11 seconds per page downloading 9 separate java scripts and stylesheets for this page when with ten minutes effort you could have concatenated them and shaved 9 seconds off every page your visitors see?)

I’m not saying that a site as beautiful as yours should strike for the 3 & 50 challenge, that would detract rather than benefit the web…

I’m just saying that for many of us designers, as discourse on meta narrative must include the perenial balance we must strive to seek between the best Meta-Narrative possible and the strict constraints of aggressive page load times… The unseen is often as important as the seen in this matter…

End note: I used http://www.websiteoptimization.com/services/analyze/ to analyze your page… and Yslow to record a real time 31second load time…