Design and Usability Website management issues Andy Dawson

1
Design and Usability Website management
issuesAndy Dawson

• B001 Web Technologies and Management

2
What we will be covering today

• Usability
• What is it?
• What aspects of design impact on usability?
• Visual, textual, structural
• Accessibility
• Management issues
• Control strategies and models
• Promoting your site, success factors
• Site evaluation

3
Web Usability

• How to ensure that your web site is easy to use!
• Design
• Navigation
• Page structure
• Text
• Images
• Ensuring that users get what they want from your
  site without difficulty

4
Who Are the Users?

• New users
• Returning users
• Users from another culture
• Users who dont read the language of the web site
  well

5
For Discussion

• What are the three most important usability
  issues for
• New users
• Returning users
• What three things do you dislike most in using
  web pages?

6
Web Page Design and Usability

• Unlike print, not designing for a static medium
• USER can change fonts, size etc
• Everything is interpreted and depends on local
  criteria the designer has only limited control
• Always remember WYSINWTG!
• Furthermore, paradigms of use are different from
  a hardcopy environment

7
Screen Real Estate

• Make the best use of it
• Avoid too much whitespace
• but make sure you have enough!
• Make the pages resize to fit the screen but
  make sure it is also readable at various sizes
• high-tech and low-tech approaches
• Using defaults and relative values can be helpful

8
Page Design

• Where is the eye going to go to first?
• Make all the important things visible without
  scrolling
• Avoid information overload
• In terms of choices
• In tems of detail
• Avoid side to side scrolling
• NEVER use blinking!

9
Page Design

• Try to keep the same look and feel
• But at what level should this stop?
• Users may bookmark further down the site
• What about pages with forms or graphics?
• Keep the important information at the top
• Preloading graphics good or bad?
• What does the user NEED?

10
Menus

• Where to put them?
• Top or side? Or somewhere else?
• Better if user doesnt have to scroll
• Difficult to assimilate more than 7 items
• Are frames appropriate?

11
Backgrounds

• Is no background dull?
• Images, patterns, or a colour for background?
• Choose something which does not detract or divert
  attention from the rest of the site
• Background images are normally tiled need to
  make sure that tiles match

12
Identifying Pages

• Identity is important!
• Page title important for search engines, and
  for bookmarking
• Not too long but
• Freestanding and complete
• Page footer
• Contact information
• Date last updated (or at top)

13
Tables on the Web

• Can be used to control layout
• More predictable than stylesheets?
• Many web sites consist of tables with borders
  hidden
• Helpful to make a design grid for your layout
• Validation and colour rendering issues

14
Tables and Design

• How wide to make the table
• Full width can make long lines
• Possibly a percentage width
• Fixed width in pixels
• Possible printing problems
• Can look narrow on some screens
• May require horizontal scrolling on small screens

15
Colour

• Adds another dimension to draw attention to
  things
• Keep to a simple colour scheme
• Good contrasts are better
• Dark on light better than light on dark
• Colours can have intrinsic overtones
• Be aware of cultural differences in views of
  colours
• NB Colours MUST be considered as a set!

16
Links

• How easy is it to identify them?
• Does underlining clutter the screen?
• But it is the default for a link
• If no underlining, link must be obvious
• Rollovers can sometimes work nicely
• But its possible to miss them!
• Setting link states
• Avoid any state resizing to prevent judder

17
Link Text

• Keep it fairly short (2-4 words) but also
  meaningful
• Can add more explanation as well, in surrounding
  text
• Naturally occurring, relevant text usually makes
  the best link
• Avoid things like click here

18
Text

• Dont underline text or put ALL IN CAPITALS!
• Left-justified is best for blocks of text
• Avoid hardcoding too many textual breaks
• Colour changes may be ok in moderation
• Dont use multiple tags for spacing (use style )
• Unusual fonts may not be present, so have
  alternatives
• Dont mix fonts too much

19
Writing for the Web

• Textual style horses for courses
• Keep it short and concise
• Write and structure layout for scannability
  (Nielsen)
• short paragraphs
• subheadings
• bulleted lists
• rules and other division indicators

20
Writing for the Web

• Write clearly
• Avoid idioms and slang (in general)
• Users may not know your language well
• Expand acronyms
• Explain technical terms (or have a glossary)
• Avoid marketing fluff
• Accurate spelling and grammar

21
Longer Text

• Should it really be there?
• Break up longer text into sensible chunks
• Use a table of contents or pointers to each chunk
  (and return links)
• Consider use, and provide alternatives, e.g.
  printable versions

22
Text and printing

• Printing direct from HTML often doesnt look good
• Layout problems
• Colour resolution
• Might be better in another format such as PDF, or
  even Word .doc files
• Avoid width which is too wide for A4 portrait
  printing

23
Navigation

• Clear, perceivable structure very important
• Make it easy to see where you are in the site
• Possibly use breadcrumbs to show route
• Use and construction of site maps
• How many clicks to get where you want to be?
• Make it easy to return to home page/menu
• Not too many items on each menu 7 is perhaps
  enough (/-2)

24
Nielsens Fundamental Questions for Navigation

• Where am I?
• Where have I been?
• Where can I go?
• If you can always easily answer these questions,
  your design is probably a good one!

25
Search Engines / Forms

• Contents of boxes must be obvious
• Provide some help
• Links to help pages
• Users like examples
• Go to search forms easily from home page
• Pointless if indexing doesnt work well
• Recall and precision
• but thats another story!

26
Animation

• Do you really need it?
• Should it go on continuously or stop?
• Draws attention to something
• Is it controlled by the user?

27
Image Databases

• Possibly start with thumbnails
• Use alt attribute for text describing the image
• Can the user see all the image at once how much
  scrolling is needed
• Possibly deliver a large image in a second window
• But avoid opening more and more windows

28
Multimedia

• Need a high speed line for effective downloads
• But sound and video are becoming more usual on
  the Web
• Need to think about the end user and also the
  nature of the information
• Users attention span is short if no interaction

29
Multimedia (or other large files)

• Give size of file after link text
• Mention file type if not HTML
• Mention software needs for file type
• Add some text to make it meaningful to users
  without additional software

30
Accessibility

• Making material useable (accessible) to people
  with various disabilities
• Legal requirements for web accessibility in the
  UK
• Service providers cannot discriminate against
  disabled people

31
Accessibility some common issues

• Variable text size vs non-resizable text
• Contrast and legibility
• Colour blindness
• Daltonism red and green
• Other colour problems
• Compatibility with screen reading software
• Context and layout independence
• Importance of ALT and textual alternatives

32
Checking for accessibility

• W3c guidelines, but lack of formal universal
  standards
• lots of helpful advisory sources and tools
  though!
• W3c web content accessibility guidelines -
  www.w3.org/WAI/intro/wcag.php
• Betsie www.bbc.co.uk/education/betsie/about.html
  and the Accessibility Valet valet.webthing.com/acc
  ess/url.html
• Bobby webxact.watchfire.com
• Article Web accessibility and the DDA
  www2.warwick.ac.uk/fac/soc/law/elj/jilt/2001_2/sl
  oan/

33
Any questions

• on design and accessibility issues?
• Remember YOU KNOW what makes a good and bad
  webpage!

34
Management issues

• Management strategies
• Fit to purpose (and corporate ethos)
• Commitment of resource
• Not a spare time activity, importance of
  maintenance
• Basic models for website management
• Centralised, Decentralised
• Hybrids, static vs dynamic systems, CM systems

35
Centralised management

• Focus on production process
• Specialists for a specialist role

36
Managing the centralised model

• Role of the webmaster (dependent on scale of
  operation)
• management liaison
• production process
• site design
• technical design, standard selection, testing
• scheduling
• liaison with data producers

37
Decentralised management

• Focus on production content
• Production and maintenance in the hands of the
  workforce

38
Managing the distributed model

• Role of the webmaster
• co-ordination
• negotiation
• quality assurance
• Importance of support mechanisms
• process control
• production tools
• training
• specialist support

39
Managing maintenance

• Importance of good maintenance
• Problems of maintenance
• Static vs dynamic sites
• Span of control, updating
• Potential role of CM systems
• Benefits and drawbacks of CM

40
Need for effective management of

• Content
• Structure
• Linkages
• Currency
• Contributors!

41
Promoting your site

• Audience? NB may be more than one!
• Core vs noncore
• Internal vs external
• New vs existing
• Different strategies - different requirements -
  different materials?
• Such considerations should be part of PLANNING
  and DESIGN

42
Why will users come?

• Whats in it for me?
• The Free service syndrome
• The value of carrots
• The importance of word of mouth
• The field of dreams philosophy?
• Content is King (really)

43
Promotion by design

• How do people find your site?
• Importance of searchability (retrievability)
• Requires understanding of
• how people search
• how search engines work

44
Searching on the Internet

• Professionals vs nonprofessionals
• Interfaces and the idiot user
• The stateless nature of Internet searching
• Reliance on natural language
• Problems of natural language

45
Types of search engine

• Machine-indexed
• Human-indexed
• Metasearch/Agent
• The ranking concept
• Precision, recall and the traditional approach to
  ranking
• The rise of citation-based systems
• Keywords and their importance

46
Keyword selection and placement

• 1st paragraph
• Headings
• Titles
• URLs
• ALT entries
• Invisible gifs
• Use of NOFRAMES for frame-based sites

47
Keyword selection and placement

• META tags
• keyword
• description
• Comments
• Keyword frequency
• Avoid
• Keyword spamming
• False keywording

48
Specific search engine requirements

• Problems of optimisation for engines
• They all differ in detail
• They all change from time to time
• They all hide the details
• Keeping on top of differences/changes
• Searchenginewatch

49
Evaluating your designs

• Keyword selection
• Unique keywording
• Manual vs automated testing
• Rankthis (http//www.rankthis.com/)
• Positionagent
• http//paf.bcentral.com/
• http//www.siteowner.com/pafree.cfm
• Webposition (http//www.webposition.com)

50
Establishing (and maintaining) links

• Portals and gateways
• Search sites
• Submission services
• Reciprocal links
• Webrings and Link exchanges
• Making it easy to provide a link
• Importance of monitoring
• Searching for links to your site

51
Other promotional bits and pieces

• Value of standard site file
• URL, Keyword set, Contact info
• Standard length site descriptions
• Use of email to support website promotion
• Permission marketing, current awareness
• Importance of (other) media
• print and online, professional associations
• Importance of professional approach
• Give ample lead time
• Use the journalists checklist
• who, what, where, when, why, how

52
Monitoring access

• Measurement tools
• Public private counters
• Server logs
• Does access mean success?
• Site audit
• Whats working, whats not
• Access paths and dead ends

53
Monitoring access

• Registration as a tool to improve data quality
• Feedback and evaluation
• Comment/feedback mechanisms
• Rating systems
• The importance of continuing monitoring
• Trend evaluation

54
Thats it for today...

• Any questions?
• Practical this afternoon on site evaluation
• Next week GUEST LECTURER so please BE ON TIME!