Overview

1. Overview • The changing input and output devices • The need to separate content from presentation • The (changing) norms for good web design • Finding the structure of content • Accepting no barriers to presentation

2. Some examples of new technologies • http://www.microsoft.com/surface/Pages/Experience/Videos.aspx?video=dd170785-d97b-4509-8958-9b86f6ebaae1 Microsoft Surface http://work.secondlife.com/en-US/ http://www.verizon.com http://uk.media.xbox360.ign.com/articles/988/988356/imgs_1.html http://www.nintendo.co.uk/NOE/en_GB/systems/accessories_1243.html

3. “Indic scripts have a unique structure which necessitates the user to type multiple keystrokes to enter one character.” http://www.idc.iitb.ac.in/~anirudha/papers/ex06-joshi.pdf

4. http://www.ryerson.ca/alumni/magazine/Alumni_S09.pdf the Emoti-Chair, a cross-modal, audio-tactile display chair that allows deaf or hard of hearing people to feel the vibrations of music and sound. (...) embedded with voice coils which stimulate a user’s senses by syncing individual notes and sounds with vibrations and rocking motions at different intensities to give a multisensory music experience.

5. Embedded Sanyog • SSMI – eg Cerebral palsy – 2.1m people in India http://embedded.cse.iitd.ernet.in/assistech/Proceedings/P5.pdf Bhattacharya, Sarkarand Basu (2007) and Basu et. al (2002)

6. What can we assume about users of a website? • Screen size? • Operating System? • Browser? • Input technology? • Output technology? • Language? • Personal preferences?

7. Which browser ... and who’s right? http://marketshare.hitslink.com/browser-market-share.aspx?qprid=1 7/11/09 And do the browsers & devices themselves tell the truth? http://www.w3schools.com/browsers/browsers_stats.asp 7/11/09

8. And what size of screen? • 320 x 396   0.91%  • 240 x 320   0.08% • 480 x 320   0.06%    • 320 x 480   0.05% http://marketshare.hitslink.com/report.aspx?qprid=17 7/11/09

9. Operating System http://marketshare.hitslink.com/report.aspx?qprid=17 7/11/09

10. There are now many guidelines and standards to choose from • http://usability.gov/pdfs/guidelines.html#2 supplies over 200 pages for US public sector • Individual organisations have their own • http://www1.uwe.ac.uk/webguidance/webdesignguidelines.aspx • Special contexts have their own • Low Bandwidth http://www.aptivate.org/webguidelines/TopTen.html • In some countries it’s illegal to fail to conform to relevant accessibility standards and guidelines, in others you can be sued for direct or indirect discrimination that arises from failing to follow known “best practice”

11. PAS78 (2007) - 4 impairment categories to consider (plus combinations) • Vision impairment • Severe, e.g. users of screen reader software who need well-labelled images and links that make sense • Medium, e.g. users of magnification software. Avoid using text in images due to pixelisation • Mild, need to enlarge text, increase contrast, and use colour preferences. • Motor difficulties • Severe quadriplegic users might use voice recognition software. • Medium (or upper limb disorder), eg can’t use mouse so need to navigate by keyboard presses. • Mild - might have fine mouse control difficulties, so need larger links • Cognitive and learning • Medium dyslexia, personalise site colours and text formatting, plus text to speech software • Mild to medium learning or cognitive disabilities, e.g. users who might use a symbol browser to convert web pages to symbols • Deaf and hard of hearing • British Sign Language (BSL) users - multimedia content on the site or language issues. • Non-BSL deaf or hard of hearing, - captions or transcripts of audio content. •  Older Users

12. From WCAG 2.0 Guidelines (2008) • 1 Perceivable • 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language. • 1.2 Provide alternatives for time-based media. • 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure. • 1.4 Make it easier for users to see and hear content including separating foreground from background. • 2 Operable • 2.1 Make all functionality available from a keyboard. • 2.2 Provide users enough time to read and use content. • 2.3 Do not design content in a way that is known to cause seizures. • 2.4 Provide ways to help users navigate, find content, and determine where they are. • 3 Understandable • 3.1 Make text content readable and understandable. • 3.2 Make Web pages appear and operate in predictable ways. • 3.3 Help users avoid and correct mistakes. • 4 Robust • 4.1 Maximize compatibility with current and future user agents, including assistive technologies. http://www.w3.org/TR/WCAG20/

13. Break

14. Designing Web Sites • Different genres of Web sites; • News, Shopping, Information and Entertainment. • Each of these have several sub-genres • News has Broadcast TV, Newspaper and Magazine • Within a genre certain design features are common. • For example, shopping sites will have a fill-in form to collect data on delivery address and payment details, news sites must pay special attention to the presentation of text. • The genres also have different ways of arranging the content. • News sites will have long scrolling pages whereas shopping sites will have short pages. • Combination sites are of course common. For example a site for booking plane flights will often have a news site associated with the destination.

15. Design principles and Web sites • Navigationis a central concern here. • Enable people to discover the structure of the site • To find what content the site contains • To find their way to a particular part of the sites. • Where am I? Where can I go? Where have I been? What is nearby? • An emerging standard for Web sites includes • The top menu lets people know where they are, through clear and obvious labelling and sometimes “breadcrumbs” – a trail in hierarchy • A navigation bar down the left hand side gives a full set of options • A bottom menu covers legal and other specialist interests • Some options on RHS are “promoted”. • A search box top right .

16. Eyetrackingheatmaps

18. Learning how to navigate • Users will develop a clear overall ‘map’ of the site. • Navigation of a web site is very similar to navigation in the built environment. • People start off by learning simple routes from one place to another, by following the signposts. • They gradually build up this route knowledge, adding in landmarks along the way • until they are able to form survey knowledge; • an overall understanding of the structure of the site. • This requires a good “Information Architecture” – content is organised as you would expect and easy to get to

19. Consistency in web sites • Distinguish links from non-links so people recognise signposts • Web tradition was to use a blue underline to show a link. • But if not, make link colour consistent so people will quickly learn them. • Many sites confuse people by not making links sufficiently visible and distinguishable from other text in the site. • Nielsen (http://www.useit.com/homepageusability/guidelines.html) • 34.Differentiate links and make them scannable. • 35.Don't use generic instructions, such as "Click Here" as a link name. • 36.Don't use generic links, such as "More…" at the end of a list of items. Instead, (...) "More New Fiction" or "Archived Book Reviews.”. • 37.Allow link colors to show visited and unvisited states. • 38.Don't use the word "Links" to indicate links on the page. Show that things are links by underlining them and coloring them blue. • 39.If (...) linking to a PDF file or launching an audio or video player, (...) , make sure the link explicitly indicates what will happen

20. Other guidelines • Provide feedbackon where users are in the site and clarify contexts and content. • Using meaningful URLs (Web addresses) and familiar titles will help people find what they are looking for and will help to understand what other content is in the site. • Provide alternative routes – thus giving Flexibilityof navigation can be enabled by providing alternatives for people. • A good design guideline for Web sites is to minimise the need for scrolling and plan for entry at (almost) any page as not all your visitors will go in through the front page!

21. Trade-offs in design • In general there is a trade-off in designing pages • people who have just arrived there • people who have followed the navigational structure. • Having a link to the ‘home’ (front page) of a site in a prominent position and having a site map will afford people getting oriented. • Consistency is always a key design principle, but unlike Windows applications there are few overall standards to be followed. • The designer has to establish a consistent design ‘language’ – consistent use of colour, positioning, text and so on that people can quickly learn and become familiar with. • Consistency can also be enhanced through the naming of links, name of sub-sites, other details. Style sheets help to ensure consistency.

22. The Home Page • is particularly important and should feature • a directory • summary of important news/stories • a search facility • This will help people to feel in control rather than feeling lost. • Different people have different strategies on Web sites. • Half of all users are search dominant, • 20% link dominant • the rest are mixed

23. Recovery, feedback and control • figure most highly in shopping sites. • Because the Web is primarily a publishing medium rather than one with lost of functionality, the are often long pauses when processing things such as a payment transaction. • Feedback is critical here, but can often be difficult to provide as the site cannot be updated in real time. • Recovery from an erroneous click can usually be provided through the ‘Back’ button in the browser, but again this can go wrong if the site is in the middle of a transaction.

24. Aesthetics • Conviviality • can be provided by allowing people to join in; to support and create communities. • Web sites can easily connect people with other people – though many do not. • Style is also key to Web sites and offer the most opportunities for designers to demonstrate their creative flair. • The use of animation, video and other design features can really develop a whole sense of engagement with the site.

25. Mobiles • A key design feature with mobile technology is the limited screen space. • very difficult to achieve the design principle of visibility • Functions have to be tucked away and accessed by multiple levels of menu leading to difficulties of navigation. • There is not room for many buttons so each button has to do a lot of work. • This results in the need for different ‘modes’ and this makes it difficult to have clear control over the functions. • Feedback is generally poor and people have to stare into the device to see what is happening • There is no consistency in the interfaces – even to the point of pressing the right hand or left hand button to answer a call.

26. Mobiles continued • Flexibility is provided to a limited extent • e.g. being able to press any key to answer a call, but it is generally not possible to personalise things such as menus. • Physically swapping the covers is one way to personalise the device. • Style is very important and many mobile devices concentrate on the convivial nature of the physical interaction (e.g. the size and weight of the device). • The physical buttons afford pressing, • there is little in most of the graphical aspects of the interface that afford anything • the obscure symbols on many buttons do not easily convey any meaning. • Those growing up with mobiles might be familiar with much of the terminology, and where to find things this is not the case for newcomers.

27. Ubiquitous Computing • Computers are becoming increasingly small and pervasive • they are now wearable • they are increasingly able to communicate with each other autonomously. • For example, there are toddler beds that detect movement, picture frames that respond to distant events, and fridges that have e-mail.

28. Guidelines for Ubicomp • Visibility is critical to ensure people know what is connected to what • Consistencywill only be achieved once certain standards have been evolved. • The devices must provide good feedback so that people do not feel that they have lost control. • How devices will represent suitable affordances is a significant design challenge. • For example if a picture frame can display the status of a baby in a cot, how will we know? • The proliferation and non-standard nature of these new devices will mean that familiarity is very difficult to achieve. • Security and the ability to recover from errors becomes even more important when devices are controlling devices in the home such as heaters.

29. Summary • Good design is about usability and engagement. • It is about ensuring systems are accessible to all and that designs are acceptable for the people and contexts in which they will be used. • Paying attention to design principles can help sensitise the designer to key aspects of good design. • Systems need to be • Learnable – through ensuring good visibility, consistency, affordance and familiarity • Effective – through providing good navigation, feedback, control, and ensuring good recovery and utilising constraints • Accommodating – through flexibility, style and conviviality

30. But ... What users want is control • Now we want to share links via social computing environments • And we want to mash data sets together • Which needs standardised data structures • http://www.openmashup.org/ • http://labs.adobe.com/technologies/durango/mashup/ • http://msdn.microsoft.com/en-us/library/bb259691.aspx http://www.dcs.napier.ac.uk/~cs81/music/gigmenu.htm basic PHP to MYSQL database

31. So are we beyond traditional notions of website usability? • Does your data conform to a standard for open access and mashup • Do you offer Facebook, twitter, RSS feels • Do you allow user input and comment http://www.bcs.org/server.php?show=conBlogPost.1480 • Can your content be searched by a search engine robot? • Are your images free for others to use?

32. To summarise the last two weeks • Design and Requirements Analysis overlap and require repeated cycles of iteration • Both depend on Context of Use, for example PC, Mac or mobile standards, or different types of users’ expectations. • Spotting breaches of design principles as early as possible leaves more resource to for fundamental and desirable requirements • Even something as trivial as TicTacToe requires design and analysis – to minimise the hours spent (re-)implementing it • New technologies are changing totally the ways in which we interact with people and information • Applications and pages now stand out because people can find them, utilise them and then use them in other ways of their choosing • There are many code resources out there that can be re-used – the hard part is knowing what you need, why and where to find it.