Once realistic personas have been generated, a number of ‘user journeys’ need to be created for each fictional character. These will help the site designers to envisage a possible structure for the site. In the previous blog I touched on the different ‘shapes’ that these journeys can take – ‘A to Z ASAP’, ‘funnel’, ‘Exploration and Inspiration’ and ‘Rooted to the spot’. The first two are fairly self-explanatory in that they involve often quite routinIdeally, our user journeys would have been presented in an attractive visual format but time has prevented us from doing this. e actions with relatively few choices involved and a clear goal in sight eg. booking a ticket (A to Z ASAP). moo.com, a site that allows people to make their own customised cards, is one very good example of a guided routine with relatively few options and a linear tunnel-like creation process. A ‘desperately seeking’ or ‘funnel’ journey, on the other hand, might occur on the NHS Direct site where a user presenting with cold or flu symptoms can use a ‘symptom checker’ (series of questions) to narrow down the range of possible diagnoses.
An ‘exploration and inspiration’ journey is more like to take place on a site with a lattice structure – Channel 4 News, for example. In these journeys the speed and direction of searching are irregular and there is no definite goal in view other than seeing what information might be interesting and/or useful. It is likely that there will be more of this context-led user behaviour on sites in the future as they become more semantically intelligent and intuitive in line with Web 3.0. Another part of Web 3.0 consists of ‘augmented reality’ which involves overlaying electronic data over iPhone or Android screens in camera mode – thus blurring the distinction between digital reality and the ‘real world’. mashable.com have a revealing list of existing iPhone applications that use AR to enhance user experience. These range from ‘WorkSnug‘, a programme that allows you to locate the nearest WiFi spot for your laptop, to DishPointer – software that helps satellite installers and mobile broadcasters to determine the location of satellites. Some AR apps are fairly frivolous (Le Bar Guide for instance) but it is clear that they also have serious uses and could even save lives eg. when lost in the mountains… Vuzix have even created AR sunglasses – the ultimate user journey.
For each of our four personas we have created three or four user journeys that will help us to see the structure of the site and begin to envisage its page layout. For 28 year old Angela Beckworth, for example, we created the following narrative:
Angela Beckworth wants to know what is new on the site.
user journey 3DHome Page > Main Feature Box (Top Centre) > Feature Page (Article) > ‘Just Added!’ (left column) > Restaurant Link (eg. Jamie’s Italian) > Home Page.
This is of course a classic example of the lattice model and often described in terms of Web behaviour as ‘browsing’. Not all users to our site would necessarily want to find out specific information about a restaurant or leave a review for somewhere they have eaten. For this reason, it will be important for us to find other ways of keeping our users interested and a ‘news’ or ‘special features’ section is an excellent way of doing this. The best sites dealing with food, BBC Good Food for example, keep the public interested with a variety of features, competitions etc.
Ideally, our user journeys would have been presented in an attractive visual format but time has prevented us from doing this. There are different ways of representing the way the user progresses through a site but the most commonly used software forms are Microsoft Visio and Omnigraffle (for Mac). These visual representations of user journeys can sometimes merge into what are called ‘wireflows‘ which relate user functionality to a sketch of what the actual screen might look like – similar to a cartoon storyboard. This is very similar to the workflow processes that are part of project management in wider industry. Once an idea has been formed of the kind of elements that each page must contain and potential user journeys within this space, ‘wireframing’ can begin. As Christina Wodtke points out in her handbook on Information Architecture, (2003, p. 288) ‘The wireframe is probably the most controversial of the IA deliverables. This is because it is the bridge between design and architecture and between planning and executing.’ Jakub Linowski’s Wireframes blog discusses some of the issues around wireframing including an interesting post on how electronic sketching can be used to generate new ideas quickly without abandoning traditional sketching techniques.
An example of sketching by Jakub Linowski (Wireframe blog).
Once the functional and navigational elements of the website have been put in place (searching, breadcrumbs, images etc. – of which, more later) the site can finally be realised in concrete form. Functional websites are generated using Hypertext Markup Language (HTML). HTML, now on its fourth version, was created in beta form by Tim Berners-Lee in 1989, and the ‘hypertext’ which forms the basis of the Web has been around in conceptual form since the 1940s. The Web standards consortium W3C gives an interesting history of HTML on its site. XHTML appeared in 2000 and is often described as a subset of XML (Extensible Markup Language) or a simplified form of it. All these Web markup languages are ultimately based on the metalanguage, SGML (Standard Generalized Markup Language). The widely-used PHP (Hypertext Preprocessor), invented by Rasmus Lerdorf in 1995, is a scripting language used to create dynamic web pages.
HTML allows the programmer to specify the appearance and functionality of the website using tags and attributes which will, for instance, create ‘hover states’ when the mouse moves over a field or allow the designer to insert hyperlinks etc. W3C released ‘Style Sheets’ in 1996 as a way of improving Website aesthetics. CSS (Cascading Style Sheets) simplify coding by enabling style elements to be ‘cascaded’ through many pages within the site instead of laboriously recreating each individual page (the HTML and CSS code for a site is contained within two separate files). In his HTML blog, Ross Shannon points out that in sites designed with CSS pages will download up to 50 percent faster than pages in HTML alone, not to mention the benefits of shorter coding and easier site maintenance. The future of CSS seems assured even if not everybody is happy with its development.
(If proof were needed of the importance of easy navigation and usability then consider Jared Spool’s $300 Million Button – simply by allowing users to buy without registering UX expert Spool generated a massive increase in revenue for his client).
Johannalouw's Blog 