website
Week 8 – Web usability
1
Web Text
2
How people use the web
Web reading
Web writing
2
3
How people use the Web
- Web Reading
http://media.nngroup.com.s3.amazonaws.com/writing-study-materials/promotional/index.html
http://media.nngroup.com.s3.amazonaws.com/writing-study-materials/combined/index.html
(Note: these are not the same – but they look the same initially)
Full Article: http://www.nngroup.com/articles/concise-scannable-and-objective-how-to-write-for-the-web/
3
Carefully look at these 2 different versions of the same website.
Although the basic content remains essentially the same, the way it is presented differs.
4
Combined
ANSWER THE FOLLOWING
Where do you look on each page?
Which site do you find easier to read?
What makes your preferred site better?
Promotional
4
If you have started to write your text for your web page – which does yours look like: promotional? Or combined?
Krug’s 3 facts of life
5
2. We don’t make optimal choices –
3. We don’t figure out how things work –
We don’t read pages –
we scan them
we muddle through
we satisfice (put in the least effort to achieve a goal)
5
Is this how you use the web?
What is similar?
What is different?
So now… how do users read the web?
6
1.Jakob Nielsen useit.com Alertbox Oct. 1997 Reading on the Web
<http://www.useit.com/alertbox/9710a.html>
In 1997, Nielsen and Morkes found that :
‘people rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences. ‘ 1.
THEY DON’T
79% of test users always scanned any new page they came across
only 16% read word-by-word. 1.
6
7
According to Nielsen, 79% of users scan because:
Reading on screen is tiring for the eyes -
25 percent slower than reading from paper.
User-driven medium
"If I have to sit here and read the whole article,
then I'm not productive."
People want to feel that they are active when they are on the Web.
Users information forage
Users move between many pages and try to pick the most tasty segments of each.
Modern life is hectic and people simply don't have time
7
The best available research suggests:
Longer lines, faster reading (up to 25cms (10 ins)).
If the line lengths are too short (e.g., 6.5cms (2.5 ins) columns), reading is impeded.
Users seem to prefer the middle road (about 10cms (4ins)).
8
Reading Onscreen – Line Length
8
What about you – will you read long lines of text on screen?
What do you prefer?
Web writing – needless words
9
Happy talk must die
Get rid of half the words on each page, then get rid of half of what’s left.
Krug’s 3rd Law of Usability
9
Your assignment
Use this checklist to check your web writing
How?
Get rid of happy talk?
Is the content web friendly?
Have you tried lists and headlines?
Highlight key words?
One idea paragraphs?
Invert the pyramid?
Have you referenced correctly?
10
10
Invert the pyramid – main things first as you go down the page.
Your assignment
11
Idea #1: Trim that Text!
Idea #2: Make Text Scannable!
Idea #3: Cook up Hot Links
Idea #4: Build Chunky Paragraphs
Idea #5: Reduce Cognitive Burdens
Idea #6: Write Meaningful Menus
11
Use-case Study
User-centred design
Unless a web site meets the needs of the intended users it will not meet the needs of the organization providing the web site.
Web site development should be user-centred, evaluating the evolving design against user requirements.
(Bevan, 1999a)
13
Analysis considerations (Bevan)
Who are the important users?
What is their purpose for accessing the site?
How frequently will they visit the site?
What experience and expertize do they have?
What nationality are they? Can they read English?
What type of information are they looking for?
How will they want to use the information: read it on the screen, print it or download it?
What type of browsers will they use? How fast will their communication links be?
How large a screen/window will they use, with how many colours?
14
Usability
An approach to web-site design intended to enable the completion of user tasks
Involves two key project activities:
Expert reviews
Usability testing
15
Figure 11.12 Site structure diagram (blueprint) showing layout and relationship between pages
16
Figure 11.13 Example wireframe for a children’s toy site
17
Site design issues
Style and personality + design
Support the brand
Site organization
Fits audiences information needs
Site navigation
Clear, simple, consistent
Page design
Clear, simple, consistent
Content
Engaging and relevant.
Covered by the ten principles that follow
18
Principle 1: Standards
‘Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know… Think Yahoo and Amazon. Think "shopping cart" and the silly little icon. Think blue text links’.
Jakob Nielsen - www.useit.com
19
Principle 2: Support marketing objectives
Support customer lifecycle
Acquisition – of new or existing customers
Retention – gain repeat visitors
Extension – cross and up-selling
Support communications objectives
Three key tactics
Communicate the online value proposition
Establish credibility
Convert customer to action.
20
Principle 3: Customer orientation
Content + services support a range of audiences and…
Different segments
Four familiarities
With Internet
With company
With products
With web site.
21
Customer orientation
Web users are notoriously fickle
They take one look at a home page and leave after a few seconds if they can't figure it out
The abundance of choice and the ease of going elsewhere puts a huge premium on making it extremely easy to enter a site.
Nielsen www.useit.com
22
Dell.com
23
Figure 11.14 Different types of audience for the web site of The B2B Company
24
Principle 4: Lowest Common Denominator
Access speed
Screen resolution and color depth
Web browser type
Browser configuration
Text size
Plug-ins.
25
Principle 5: Aesthetics fit the brand
Site personality
How would you describe the site if it were a person? E.g. Formal, Fun, Engaging, Entertaining, Professional
Site style
Information vs graphics intensive
Cluttered vs Clean
Are personality and style consistent with brand and customer orientation?
Aesthetics = Graphics + Colour + Style + Layout + Typography
26
Principle 6: Get the structure right
(a)
(b)
(c)
(d)
DTI
Cisco
27
Principle 7 Make navigation easy
According to Nielsen, need to establish:
Where am I?
Where have I been?
Where do I want to go? Context. Consistency. Simplicity. Use accepted standards for navigation
28
Figure 11.15 (a) Narrow and deep and (b) broad and shallow organization schemes
29
Navigation (Continued)
‘Go with the flow’
Visitor in control
An enjoyable experience
‘Think like a client’
Enter by:
user need
product/service
audience type
search
To:
alternate home pages
30
Principle 8: Support user psychology
Hofacker’s five stages of information processing
Exposure – can it be seen?
Attention – does it grab?
Comprehension and perception – is message understood?
Yielding and acceptance : It is credible and believable?
Retention – is the message and experience remembered?
31
Web accessibility
Number of visually impaired people
Number of users of less popular browsers or variation in screen display resolution
More visitors from natural listings of search engines
Legal requirements
Five principles of Good website usability
https://www.crazyegg.com/blog/principles-website-usability/
32
Accessibility compliance for web design
33
References
Chaffey D. (2009) “E-business and e-commerce management - Strategy, Implementation and Practice”, 4th Edition, Pearson Education