Master Thesis: Multimodality in Web Design

M.A. Thesis: Multimodality in Web Design

In my thesis I decided to explore web design from the lenses of semiotics and multimodality discourse. I explored ways in which recognizing the relationships of interface elements and the affordances of the web affected the way I approached redesign challenges. In the end I developed an annotation system that helped me identify opportunities aimed at creating web interfaces that empower users to achieve their goals when visiting one or another page.

Thesis first analysis approach

At the very start of my research I used preexisting models of multimodal analysis to run some analyses of my own. These models unfortunately require a large amount of previous knowledge, and their results are text-heavy documents. Even worse for my goal, these models look at the analyzed piece at a distance, from the perspective of an evaluator and not from the perspective of a maker.

Thesis second analysis approach

I then pursued a way to apply the multimodality concepts by intervening the web pages myself. Not as a mere philosophical set of documents, but rather as a set of actions that can help visualize what happens on an interface. By overlaying coloured areas and coding them I expected to be able to visualize patters and make relationships evident. It didn't work as expected, but took me closer to the exploration I was pursuing.

Thesis final annotation system

Finally, inspired by proofreading marks, I envisioned an in-place annotation system. Instead of covering the formal elements I decided to expose what happens in the spaces between those elements. What better way to reference something than to be able point at it and give it a name?

Thesis excercise - design evaluation and design result

My annotation model was refined through a set of analyses and redesigns. In order to limit the research, I focused my work on websites meant to be read with sporadic interaction from the user (web magazines, newspapers, institutional or government sites).

The entire process would become an iterative loop: it begins with an analysis of a page, after which the relationships between elements would be identified, challenges defined, design solutions proposed, and then it starts again with an analysis of the new design.

Thesis excercise: original Fast Company layoutThesis excercise: Fast Company redesigned layout

After redesigning four different pages I ran a set of comparative and usability tests to find out how the originals vs the redesigns fared. I discovered that while in general the redesigns seemed to have proposed improvements over the originals, there was still a lot of room for improvement in terms of reining in the wildest redesign options.

In reading order: original article from Fast Company selected for an analysis and the redesigned version. The redesign attempts to enhance the experience of "seeing the weird, wonderful ads that made Americans love computers".

Semantic differential used to evaluate the Fast Company redesign

I surveyed designers and ask them to fill out a semantic differential to evaluate the design of both the original and the redesigned pages from my research. This semantic differential displays the results of the Fast Company evaluations.

The final design of my thesis work was a webpage where I explained briefly the annotation system. I created a page designed to be read an added a switch to allow people to see the annotation system applied on the page itself.

Final annotation system reference chartDelivered website with annotations overlay