Designing for the WWW© De Montfort University, Designing for the World-Wide Web

Designing for the WWW© De Montfort University, Problems with Hypermedia Navigating the hypertext web Easy to lose sense of current position Difficult to return “home” or Exit Solution: provide map? Multiple entry points to a linked page leads to loss of contextual information Complex structure may mean crucial information is by- passed by user Leads to uncertainty, loss of confidence Printing hard copy is non-trivial Printing is linear, hypertext is not

Designing for the WWW© De Montfort University, Web Site Design Essentially the same process as when designing any interactive application, be it a... –web-site –stand-alone application –multimedia presentation Same basic process as described in lecture on design process user-centered design process and focuses on –users –tasks –environment

Designing for the WWW© De Montfort University, Principles, processes and guidelines Principles: general rules in the form of do’s and don’ts Process: guidance on a sequence of activities,products resulting from these and methods for conducting these Guidelines: collection of specific pieces of design guidance on topics, such as use of graphics Good design is not a mechanistic process, the designer needs to apply this general guidance to a specific context and add individual creative flair

Designing for the WWW© De Montfort University, Decide on criteria for success Make sure the reasons for building a web-site are clear Get organisational agreement about what success means Examples of criteria for success – number of hits per day – number of repeat visits – number of new people signing up to an organisation or service – quantity of products sold – feedback from customers – getting good press reviews – making customer communication easier If you aren’t clear about what constitutes a successful design, then you won’t know when you achieved this.

Designing for the WWW© De Montfort University, Decide who you want to impress Be clear about which groups of people you are designing a site for what assumptions you will make about their level of knowledge and their expectations what you think the target audience wants to get from visiting your site

Designing for the WWW© De Montfort University, Example: ‘fanzine’ site dealing with Liverpool football club target audience - people who are already football fans, primarily of LFC assumptions: audience probably know a lot about football and probably follow the matches played in the league week by week, expect high quality interactive magazine audience wants up-to-date news, analysis, gossip, match reports with photos audience not primarily looking for basic facts about LFC, Liverpool or football in general Clearly other people may visit the site (e.g tourists visiting Liverpool), but they are not who the site is aimed at primarily

Designing for the WWW© De Montfort University, Design the site structure around the information Identify natural structure of the information –people looking for information make inspired ‘guesses’ about which link to follow based on what they see at the interface – –grouping information in a logical or ‘natural’ way increases the likelihood that users will guess their way correctly to where information will be found Allow for growth : –plan for growth and the addition of new material so that this can fit into the existing structure, –otherwise there is a danger that the site structure will need to be changed to accommodate new information

Designing for the WWW© De Montfort University, Design the site structure around the information User tasks: –define what tasks users will use a site for, what information they will need in order to complete the task and what sequence activities will be carried out in. Navigation: –based on information structure and knowledge of the order in which activities are likely to be carried out, an appropriate means of linking the items of information together can be devised, often a combination of a hierarchical structure and a linear structure

Designing for the WWW© De Montfort University, Design the site structure around the information Prioritise Information: –put the most popular and important information towards the top of the site or page Establish User Interest: Don’t give the user too much information too early on. –Users may less inclined to read through large amounts of information in the hope of finding something of interest further on Graphics should support the information design and communicate the structure of the rest of the site –otherwise they are merely decoration and add to the download time for users.

Designing for the WWW© De Montfort University, Make it easy to see what's there and how to get it Make the site structure explicit Provide an overview page Tell the users where they are Provide a 'home' and give constant access to it Identify and give access to landmarks Make link names explicit Make access as direct as possible

Designing for the WWW© De Montfort University, Don't expect WWW pages to be just like paper publications Exploit the medium –paper pages can be viewed simultaneously, written on, given to friends etc. Don’t seek to replicate the structure on a paper document in its on-line version. Look at integrating pages Add value: – good example are links to ‘more like this’, ‘customers also bought these books, ‘reviewers comments’ against an on-line book catalogue Reading from the screen is hard –break up the text into sections with subheadings. –Pay attention to text/background contrast to avoid legibility problems. –Enable ‘print’ versions of long documents to be downloaded as 1 document, even these are split into different documents at the site for on-screen reading.

Designing for the WWW© De Montfort University, Use graphics with care Hire a professional graphics designer Make sure the designer understands the medium Carry graphic style throughout the whole medium Graphics can still be boring Less can be more Match graphics to usage scenarios, not just link speed If in doubt, leave graphics out Test graphics on different browsers

Designing for the WWW© De Montfort University, Keep users interested Always have something new –keep site updated with new content to ensure that users return for more. This need not be the central content, but a feature of interest to the target audience, such as ‘Latest news’, ‘Fact of the Day’ Provide genuine content –useful and unique content ensures the site will be visited regularly Integrate the site with other media – the WWW is not an isolated medium, but integrated with newspapers and television as advertising media, notifications of updates Get users involved –site is more likely to be bookmarked if it engages the user is some other activity, competitions, on-line surveys and experiments, quiz’s, discussion groups

Designing for the WWW© De Montfort University, Web design guidelines In addition to applying general guidelines other guidelines for evaluating websites have been compiled These have been grouped into three categories –Navigation –Access –Information Design

Designing for the WWW© De Montfort University, Navigation The biggest problem! Avoid orphan pages – Are there any? Where do they go? Avoid long pages. Reduce scrolling Provide navigation support. –Is there a site map? Are the menus useful? Avoid deep menus – broad is better Avoid non-standard link colours Provide consistent look & feel

Designing for the WWW© De Montfort University, Access Avoid complex URL’s –Is the URL difficult to remember? Are mistakes likely? Avoid long download times –Does the site have too many graphics? –Can the user choose to see a graphic?

Designing for the WWW© De Montfort University, Information Design Good graphical design is important. Do not have lots of text or graphics Do not use bold or Caps for long pieces of text Place the navigation elements in a consistent location on each page Use black text on white for optimum readability Do not overuse colour Keep it simple Be consistent

Designing for the WWW© De Montfort University, References User Centred Website Development D Mc Cracken & R J Wolfe. Prentice Hall 2003 Mary Jones: Worldwide Web Design in Interface Technology - the Leading Edge, eds. Noyes & Cook, Research Studies Press, 1999, ISBN