Web Usability

1. Web Usability • Introduction • All very well knowing the nuts and bolts of making web sites. • How do we make web sites that work? • Need to produce sites which meet the needs of the users. • What are many web sites slow and difficult to use? • Organisations produce web sites based on the internal concerns of the organisation rather than needs of the users. • Web sites frequently contain material which would be appropriate in a printed form, but needs to be adapted for presentation on the web. • Producing web pages is apparently so easy that it may not be subject to the same quality criteria that are used for more traditional forms of publishing.

2. Inexperienced designers/developers produce difficult to use systems. • Designing web sites requires combinations of expertise • Graphic Designers • HTML coders • Programmers (ASP, JavaScript, PHP, DB stuff) • Interface Experts • Writers • Web Usability Experts • Need a user-centred design process in order to produce successful sites.

3. Planning • What is the purpose of the site? (providing info, selling products, attracting business …..) • What types of users will be visiting (e.g. internet or intranet?) • Who are the important users? • How frequently will they visit? • What sort of expertise will they have? • Do they speak English? • What types of info will they be looking for? • Will they want to read the info onscreen, download, or print? • What browsers will they use? What speed will their communications links be?

4. Site Structure and Content • Structure information so that it’s meaningful to the user. • Try and figure out the level of detail which is appropriate to the user. • Interview users to see how they prioritise and categorise information. • Writing style is important - people rarely read web pages from start from finish - they scan … • So, make it scannable (bulleted lists, highlighted keywords, meaningful headings, short and concise text) • Don’t expect users to read large chunks of text … give them a printable version.

5. Navigation • Help users find their way! • Show them where they are and where they can go. • Use a consistent page layout. • Minimise the number of clicks needed to reach important content. • Pages which scroll are okay but beware of ones where important navigational info ‘falls off the bottom’. • Provide a site map • Provide links on each page to local content, a site map, and home • Large sites should have a search facility • Include navigational buttons at top and bottom of pages • Use meaningful URL’s • Avoid dead ends! (users may not enter your site at the front page) • Give sizes of files which can be downloaded.

6. Page Design • Design an effective home page which establishes the site identity and gives a clear overview of the content. • Important information should fit on one screen so users don’t have to scroll the home page. • Design for efficiency • Minimise download times. • Be careful of overuse of graphics • Reduce the size of graphics as much as possible • Give the dimensions of the images in the 'IMG SRC' tags of the HTML. • Use the ALT tag to describe graphics, as many users do not wait for graphics to load. • Use small images, use interlaced images, repeat images where possible.

7. Make text readable! • Avoid the use of flashing or animation, as users find this very distracting. • Avoid patterned backgrounds, as these make text difficult to read. • Where possible use tables instead of frames - frames can interfere with printing and bookmarking. • Support different browsers. • Test that the pages work in all browsers and all versions of each browser. • Test that printable information prints correctly from different browsers, on different platforms and different paper sizes (e.g. European A4 is different to US letter). • Provide support for text-only browsers (logical hierarchy of headings, avoid frames and use ALT tags for images)

8. Evaluation Methods • Expert inspection • Early mock-ups • Functional prototypes • All prototypes should be evaluated by prospective users (not by designers etc….) • Management and Maintenance • How will new pages be added? • Will training be required ? • How easily expanded/adapted is the site? • Will there be some criteria for acceptance of new web pages to ensure they fit?

9. Indexing • Help people find the site. • Use appropriate keywords in the META tag in order to let search engines index the site correctly. • Make the first few lines of text in the home page relevant and comprehensive. • Register it with search engines

10. Web Design Tips • Introduction • Difficult to agree on what constitutes ‘good’ web design • Lot’s of sites created by talented designers of great aesthetic values but of little informational value • On the other hand lot’s of useful sites are created by design novices by following guidelines like those presented earlier. • The following guidelines for web design were developed by CNET designers. • General rules are that pages should have no more than 20K of graphics and pure HTML is used as much as possible.

11. Colour Tips • Familiarise yourself with the 216 web-safe colours and use them. • Avoid airbrushing and fades in small graphics so the range of colours in an image is minimised. • Use an application like DeBabelizer to reduce the number of colours in your graphics • Reduce the number of colours beyond the web-safe palette if possible • You can use non web-safe colours as backgrounds to table cells (particularly light colours). • Type Tips • Vary fonts to add interest to blocks of text (e.g. capitalise initial characters of paragraphs and so on …) • Use aliased images for text graphics for faster downloading.

12. Use gifs to avoid unwanted wrapping text • Use gifs to provide unusual fonts • HTML Design Tips • Leave out attributes as much as possible (e.g. width and height attributes for table cells) • Use HTML control characters for bullets e.g. • <font face="Arial" size=-1>&#149;&nbsp;</font> • much faster to load than images …. • Always designate font alternatives • Use coloured tables cells to create large coloured areas on your page. • Make tables stand out by using 1 pixel wide coloured table cells around them.

13. Page Design Tips • Start off by drawing a grid (on paper or with some image software) which describes the layout of your page. Use this to decide the positioning of elements, size of individual elements, and to aid in table/frame design. • Use consistency from page to page but make them interesting by having design elements which change from page to page. • Always keep important stuff above the fold. E.g name of the site, title graphics, introductory info and navigation elements. • If you must use background graphics blur then to make them easier to read. • Lay out text in narrow columns. • Use subheadings when there are large blocks of text.

14. Page Layout Tips • Avoid nested tables and long tables with lots of rows (stack separate tables on top of each other instead). Pages with these take a lot longer to load. • Avoid gimmicks like scrolling text on the status bar or Java tickers. • Most web servers call up four gifs at a time so if you limit each page to four gifs they will load faster. • Use white space generously to avoid clutter. • Don’t depend on optional plug-ins or browser specific features. • Site Planning Tips • Plan the site before starting to code it! • Establish clear naming conventions for files/images. • Use a sensible hierarchical file structure for storing files.

15. Site Design Tips • Place logos in the same location on each page of the site and make them the same size!! • Re-use the same images on multiple pages - they will get cached and hence load faster and also give a consistent look and feel to the site. • Above all aim for consistency! • …. And now for something completely different ….

16. What’s XML? • Introduction • Future of the web? Maybe …. • XML is eXtensible Markup Language (XML). • Put it simply … using XML you can define your own tags. • Huh? • Processing Data • Computers can only process data in a meaningful way if you tell them what the data is. • E.g. giving a computer all the numbers which represent a bank account does not allow it to calculate interest. • What’s this got to do with the web?

17. 2 big web problems • Firstly the Internet is too slow and secondly it’s full of information but difficult to find what you are looking for. • Both problems are because of HTML. It’s an easy-to-use and learn language for formatting documents. • Not designed for web sites which take orders from customers, transmit medical records, run factories or scientific experiments. • So, for example, your doctor may be able to get your medical records up in his/her browser but can’t then automatically email them to a consultant who can then automatically insert them into a database. • I.e. the client program can’t process the info because it doesn’t understand it. No tag for blood group !! • => slow web … change quantity on a shipping order and you have to get the server to recalculate • => limited searching .. We can’t mark something as a price so how can a search engine index it as such?

18. Solution • Simple enough … use tags which say what the information is, not how it should be displayed. • Label the info about a shirt as size, colour,material, and price rather than as bold, italic, etc… • If we do this a program can understand the data and do something with it. Make an order, insert into a database, display the info for the user etc… • XML allows us to do this. • Derived from SGML (Standard Generalized Markup Language). XML is a subset of SGML. • XML is a metalanguage rather a language itself. It allows us to define new markup languages. • For example suppose the medical profession get together and agree on a markup language for medical records. • It might contain tags like <patient>,<name>,<blood group>,<age> etc….

19. XML defines a set of rules as to how such a language should be created. • If these rules are adhered to then it is easy (using XML parsers) for programmers to write software to process information specified in this form. • But how do we display a Blood Group? • Not really what XML is about. • But, if XML is to be used on the web a browser has to be able to render it. • Do this using eXtensible Stylesheet Language (XSL). • This allows the definition of a set of rules explaining how an XML document should be displayed. • E.g. blood groups are displayed in red with a big font! • Different applications could reference different stylesheets to display the same information.

20. How will this solve the web’s problems? • Speeds up the web • Because the semantic information embedded in XML documents makes possible much more sophisticated processing of this information by client machines (browsers). • For example if my bank account details are on the web in XML format and are downloaded to my browser then since my browser can parse that info it can calculate interest, tell me how much I am overdrawn, etc… • To do this the server could send a small Java program. • Previously we would have to have asked the server to do the processing. Much more info going needlessly back and forth over the internet. • But the really big gain is for search engines. • Since web documents are now tagged according to the meaning of their elements much more precise indexing of their contents is possible.