0
Increase User-friendliness and
Accessibility by ensuring Clear
Content, Layout and Design to
  allow for smooth movement
 ...
Design vs Functionality?

   Design and Functionality


   Websites should be both visually appealing and
    functional...
The Sphere of design

   Natural trade-off.
    An excellent high-functionality
    application and a great work
    of o...
The Sphere of design

   The most functional web sites
    are information-rich, quick and
    obvious to use. They can b...
The Sphere of Design

   The most effective
    visual designs need some
    aesthetic quality. Even the
    most functio...
The Sphere of Design

   Aesthetically effective visual
    designs need to manifest
    functional quality. Something
  ...
The Arch of excellence

   The ideal place for a site to sit
    is on the boundary between
    2 (most functional) and 3...
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
    g...
Information foraging

   Foraging: 1970s theory that suggested that
    animals constantly consider the available food
  ...
Jakob’s law

   Users spend most of their time on other sites
        Anything that is a convention used on the majority...
The Page Paradigm

   On any given Web page, users will either click
    something that appears to take them closer to
  ...
Current layout trends

   Simple layout (simple ≠ minimalistic)
       1 and 2 column designs
       Pages read in a st...
Current layout trends

   Design the content, not the page
       Freer, less boxed-in layouts
       Soft, simple, rec...
Current layout trends

   Plenty of whitespace, strong accent colour
       Design’s taken a deep breath
       Space h...
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 Ru...
Size does matter

   More is always better
        The long tail – the future of business is
         selling less of mo...
Content is not text

   Content categorisation?
       Text – Wikipedia
       Images – Flickr
       Video – YouTube
...
Content as value
A new Golden Rule

   Everything that goes into a website must have a
    purpose
   Every single feature must
       H...
Your content beyond your site

   Buzz monitoring: understanding what people are
    talking about
   Be useful, relevan...
Accessibility – the DDA
   Section III of the DDA, which refers to accessible
    websites, came into force on 1st Octobe...
Accessibility – the DDA
   2.13 - 2.17 (p11-13): “What services are affected by the
    Disability Discrimination Act? An...
DDA - enforcing and complying

   Enforcing: Disability Rights Commission (DRC)
       Launched a formal investigation o...
Accessibility in numbers
   8.6 million registered disabled people in the UK - 14%
    of the population (DRC)
   1/12 m...
The accessibility business case

   Better usability
   Higher SEO ranking – Google is disabled
   Wider reach across p...
Thank you
         Roberto Hortal
     Head of eBusiness

  roberto.hortal@uk.royalsun.com
    Presentation available at w...
Upcoming SlideShare
Loading in...5
×

Roberto Hortal Seamless Website Journey Increase User-friendliness and Accessibility

867

Published on

Published in: Business, Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
867
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Roberto Hortal Seamless Website Journey Increase User-friendliness and Accessibility"

  1. 1. 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
  2. 2. Design vs Functionality?  Design and Functionality  Websites should be both visually appealing and functionally powerful  Don’t decorate, communicate
  3. 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. 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. 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. 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. 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/
  8. 8. Apple.com and the Apple store
  9. 9. Skype
  10. 10. easyJet Holidays
  11. 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. 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. 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. 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. 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. 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. 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
  18. 18. Layout trends – Mozilla
  19. 19. Layout trends - PetHealthcare
  20. 20. Layout trends – Facebook
  21. 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. 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. 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
  24. 24. Content as value
  25. 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. 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. 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. 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. 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. 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. 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. 32. Thank you Roberto Hortal Head of eBusiness roberto.hortal@uk.royalsun.com Presentation available at www.hortal.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×