Increase User-friendliness and
Accessibility by ensuring Clear
Content, Layout and Design to
allow for smooth movement
around your website
Roberto Hortal
Head of eBusiness

Design vs Functionality?
 Design and Functionality
 Websites should be both visually appealing and
functionally powerful
 Don’t decorate, communicate

The Sphere of design
 Natural trade-off.
An excellent high-functionality
application and a great work
of online art falls outside the
sphere of design (1)
Things that have the highest
aesthetic beauty and impact cause you to stop
and look, things that are most functionally
effective help you to do the job you want to
achieve without being looked at
Source: http://www.webdesignfromscratch.com/

The Sphere of design
 The most functional web sites
are information-rich, quick and
obvious to use. They can be
ttractive but focus on function
would be compromised if they
were too visually impacting
 The most beautiful designs are rich in visually-
stimulating elements. They cannot also feature
the weight of highly functional features that
would put them atop the functional quality scale
Source: http://www.webdesignfromscratch.com/

The Sphere of Design
 The most effective
visual designs need some
aesthetic quality. Even the
most functional design (such
as instructions for assembling
furniture, technical manuals,
forms and reports) work better when they
employ a sensitive combination of aesthetic
factors like balance, colour and contrast.
Source: http://www.webdesignfromscratch.com/

The Sphere of Design
 Aesthetically effective visual
designs need to manifest
functional quality. Something
with no functionality is art, not
design. Even the most
beautiful site will impact more
people for longer if it can be used. A visually rich
site that is easy to navigate and comprehend
leaves its visitors more time and mental energy
to appreciate the visuals.
Source: http://www.webdesignfromscratch.com/

The Arch of excellence
 The ideal place for a site to sit
is on the boundary between
2 (most functional) and 3
(most beautiful). A site that
genuinely embodies an
optimum combination of looks
and works (therefore, sits on the boundary
somewhere between 2 and 3) meets the new
standard (4).
Source: http://www.webdesignfromscratch.com/

Apple.com and the Apple store

Skype

easyJet Holidays

The ideal website layout?
 Fresh, appealing and easy to use
 Old rules don’t apply: inverted L, 3-clicks have
gone the way of the Web-safe palette
 Today’s axioms: Jakob’s Law and The Page
Paradigm - Information foraging
 Staying imperative: Don’t make users think!
 Application integration – AJAX and Widgets

Information foraging
 Foraging: 1970s theory that suggested that
animals constantly consider the available food
and the cost of obtaining it, choosing to stay for
a while or move on to the next food patch.
 1990s: Pirolli and Card noticed similarities
between users' information searching patterns
and foraging strategies. Users' actions on the
information landscape (links, descriptions, and
other data) show that information seekers use
the same strategies as food foragers.

Jakob’s law
 Users spend most of their time on other sites
 Anything that is a convention used on the majority of
other sites will be expected, deviating from it will
cause major usability problems
 Applying conventions throughout enables user to
more quickly find and consume your page’s content
 Conventions lower the cost of information by
removing the need to learn the meaning of some
page elements
 Misapplied conventions raise this cost doubly
Jakob Nielsen http://www.useit.com

The Page Paradigm
 On any given Web page, users will either click
something that appears to take them closer to
the fulfilment of their goal, or click the Back
button on their Web browser
 The Goal is very specific, and it's the defining
motivator of that user's experience on the website
 Consistency is NOT necessary (except where this
conflicts with Jakob’s law)
 Users don't care "where they are" in the website
Mark Hurst http://www.goodexperience.com

Current layout trends
 Simple layout (simple ≠ minimalistic)
 1 and 2 column designs
 Pages read in a straightforward way from top to
bottom
 Much calmer, solid browsing experience
 Centred orientation
 Vertical scroll - no need to maximize above the fold
 Symmetric, balanced, more visually pleasing
 Fixed or Zoom-width

Current layout trends
 Design the content, not the page
 Freer, less boxed-in layouts
 Soft, simple, receding page furniture
 Strong colour and 3D draws attention to content
 Nice, big text
 Most important text on the page bigger than other
text
 Text size as label: what is this about, where do I go
next?

Current layout trends
 Plenty of whitespace, strong accent colour
 Design’s taken a deep breath
 Space helps the eye understand cleanly and clearly
identify elements
 Extra line height helps read on screen
 Inline links
 Navigation in the content, not around it
 Supporting the Page Paradigm
 Clearly labelled and highly visible

Layout trends – Mozilla

Layout trends - PetHealthcare

Layout trends – Facebook

Quality of content
 Size does matter, and bigger is better
 User-centric content, not just text
 A new Golden Rule
 Your content beyond your site:
Social media, company blogs,
RSS…
 Breaking out of the sitemap

Size does matter
 More is always better
 The long tail – the future of business is
selling less of more
 Search engines
 Navigation to fit it all
 Calendars and timelines
 The search box
“Less of more” quote: Chris Anderson

Content is not text
 Content categorisation?
 Text – Wikipedia
 Images – Flickr
 Video – YouTube
 Text and pictures – Amazon, Imdb
 User-centric view of content
 Amusements, instructions – Flickr, YouTube
 Information – Wikipedia, Imdb
 Convenience – Tesco, Amazon

Content as value

A new Golden Rule
 Everything that goes into a website must have a
purpose
 Every single feature must
 Help your visitors achieve their goals, or
 Support the site’s goals without obstructing the
visitors’ goals
 Wasn’t bigger better?
 Put the user at the centre and ask what they need
 Expand the site’s goals/launch complementary sites

Your content beyond your site
 Buzz monitoring: understanding what people are
talking about
 Be useful, relevant, generous: encourage
sharing – RSS, podcasts, articles, blogs, PR
 Participate, don’t infiltrate.
It’s not about control
 Google is a Reputation
Management Engine
Google quote: Wired’s Clive Thompson

Accessibility – the DDA
 Section III of the DDA, which refers to accessible
websites, came into force on 1st October 1999. The
Code of Practice was published on 27th May 2002.
Excerpts include:
 2.2 (p7): “The Disability Discrimination Act makes it
unlawful for a service provider to discriminate against a
disabled person by refusing to provide any service
which it provides to members of the public.”
 4.7 (p39): “From 1st October 1999 a service provider
has to take reasonable steps to change a practice
which makes it unreasonably difficult for disabled
people to make use of its services.”

Accessibility – the DDA
 2.13 - 2.17 (p11-13): “What services are affected by the
Disability Discrimination Act? An airline company
provides a flight reservation and booking service to the
public on its website. This is a provision of a service”
 5.23 (p71): “For people with visual impairments, the
range of auxiliary aids or services which it might be
reasonable to provide to ensure that services are
accessible might include ... accessible websites.”
 5.26 (p68): “For people with hearing disabilities, the
range of auxiliary aids or services which it might be
reasonable to provide to ensure that services are
accessible might include ... accessible websites.”

DDA - enforcing and complying
 Enforcing: Disability Rights Commission (DRC)
 Launched a formal investigation of over 1000
websites in 2004
 Organisations will face legal action under the DDA
and the threat of unlimited compensation payments.
 Complying: W3C accessibility guidelines
 Priority 1 (A) must be adhered to
 Priority 2 (AA) should be adhered to and are the EU
recommended level of compliance
 http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html

Accessibility in numbers
 8.6 million registered disabled people in the UK - 14%
of the population (DRC)
 1/12 men & 1/200 women have colour blindness - 9%
of UK population (Institution of Electrical Engineers2)
 2M UK residents have a sight problem - 4% of the
population (RNIB)
 12M people 60 or over - 21% of the UK population (UK
government statistics service)
 Adding up: 48% of the UK population
(overlap not accounted for)

The accessibility business case
 Better usability
 Higher SEO ranking – Google is disabled
 Wider reach across platforms, devices, browsers
 Future-proof services and pages
 Faster download speeds
 Easier, lower cost maintenance
 No fear of legal action

Thank you
Roberto Hortal
Head of eBusiness
roberto.hortal@uk.royalsun.com
Presentation available at www.hortal.com