2. Design vs Functionality?
Design and Functionality
Websites should be both visually appealing and
functionally powerful
Don’t decorate, communicate
3. 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/
4. 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/
5. 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/
6. 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/
7. 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/
11. 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
12. 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.
13. 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
14. 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
15. 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
16. 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?
17. 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
21. 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
22. 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
23. 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
25. 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
26. 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
27. 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.”
28. 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.”
29. 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
30. 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)
31. 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
32. Thank you
Roberto Hortal
Head of eBusiness
roberto.hortal@uk.royalsun.com
Presentation available at www.hortal.com