SlideShare a Scribd company logo
1 of 104
Usable Language


       How content shapes the
       user experience


                      Randall Snare
                 Elizabeth McGuane
What in God’s name are
we talking about?

1  How content is essential
  to user experience design

2   How to improve your site
      using content alone
What is user
experience design?
says . . .

   “User experience is a
 person's perceptions and
responses that result from
the use or anticipated use
  of a product, system or
          service.”
So what is content
    strategy?
says . . .

 “Content strategy is the
  practice of planning for
content creation, delivery,
 and governance, and is a
  repeatable system that
defines the entire editorial
   content development
  process for a website.”
Wikipedia is missing
something (shocking, I
       know)
Let’s get specific, shall
we?
The 4 major UX elements




             Information
             architecture

                 Design

               Analytics

                Usability
Information Architecture
Information architecture

Sounds important, right?

The term was actually invented by an architect-
turned-graphic designer, Richard Saul Wurman
Information architecture
           “Information architecture is
           really about what's not obvious.
           Users don't notice the
           information architecture of a site
           unless it isn't working.”


         - Rosenfeld and Morville, Information Architecture
            for the World Wide Web
“Instruction for organized space”


               Gathering, organizing and
               presenting information to
               suit your user’s needs is
               analogous to designing a
               building that will serve the
               needs of its occupants.

                  From INFORMATION TECHNOLOGIES AND THE
                  INFORMATION PROFESSIONS,
                  R. E. Wyllys, University of Texas at Austin
Wurman’s Tokyo subway map
Who cares about the
geography of the system?

All you need to know is the
 sequence of the stations.
Great Wurman IA quotes
                   “Most
           of the word information
       contains the word inform, so
       I call things information only
       if they inform me, not if they
         are just collections of
               data…


                       “If I
              throw 140,000 words on
          the floor and connect those
         words with a sentence or two, we
         wouldn't call that a dictionary...
         The ability to find something
           goes hand-in-hand with how
                well it's organized.”
So what’s the point?




            Make the complex clear
There are lots of ways to
organise information

      •L - by location
      •A - by alphabet
      •T - by time (chronology)
      •C - by category
      •H - by hierarchy
The web organises by the last 2


Category - putting relevant information together


Hierarchy - deciding what is least and most
important
Even if it’s organised perfectly,
if it isn’t labelled right, you’ve
lost.
Labels and information
architecture - some good and
bad examples
Usable Language | How Content Shapes The User Experience
4 major categories
Usable Language | How Content Shapes The User Experience
18 major categories



    over 30 sub-
     categories
Usable Language | How Content Shapes The User Experience
Chronological
organisation
Usable Language | How Content Shapes The User Experience
2 tiered navigation
Usable Language | How Content Shapes The User Experience
What?
Usable Language | How Content Shapes The User Experience
Everything is navigation
Expanded navigation
Pop quiz:
what do the following
   labels mean?
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
information architecture . . .

          How well you organise your
       information depends on how well
        you know your information (i.e.
                  content).


      If it’s not labelled well, it doesn’t
      matter how you organised it, no
                 one will find it.
Design
In the olden days,
wireframes came first
What’s a wireframe?
Wireframes can be simple
or complex depending on
how well you know your
content.
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
The best wireframes
anticipate the amount and
type of content they’ll need
         to include
What comes after wireframes?

 A polished, finished site - that’s
 hard to change

 That means the design decisions
 you make in your wireframes will
 directly affect the volume and
 type of content you’ll be able to add
 in the future
That means, content first,
wireframes and design
second
                 Text
How design affects content:
Boxes
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
What to do with boxes

  They work best for image-heavy
  pages with minimal text

  They need to be fluid

  The content should dictate the
  length and arrangement of the
  boxes (and that’s hard to do)
Better boxes
How content affects design:
   expanding menus
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
Expanding menu guidelines:

   Pack a punch: your content has to
   fit in a small area, so it needs to be
   succinct.

   Use white space around your
   content

   Don’t use expanding menus as
   your main navigation
How content affects design:
  help text and teasers
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
Usable Language | How Content Shapes The User Experience
Tips for teasers and help text

  Keep it short (sound familiar?) - people
  won’t read a long teaser.

  Make it meaningful: all the reader needs
  to know is
   •What they should do (help text)
   •What they’ll see on the next page
   (teasers)
Design


     You can’t design in a vacuum, the
      content makes the design real
      and functional (and grow-able)
Analytics
What is analytics?
Data. Lots and lots of data
What does content have to do
with analytics?

             A lot
Keywords
Often people will find your site through
a search engine.

Analytics will tell you which words
they used to find you (keywords)
You can’t cheat with keywords
 Analytics tells you more . . .




Meaningless, jargon-y keywords won’t
do your site any good -- because people
won’t use your site once they’ve found
it
What does SEO mean?
 Search
 Engine
 Optimisation
Effective SEO means relevant content
                “Optimise for the searcher, not
                the search engine. Focus on
                your customers, not the
                technology.”
                - Gerry McGovern (Jan 20,
                2009
Traffic sources
Analytics shows you the context for your
visitors: i.e. where they came from.
           • Search engines

           • Referring sites

           • Direct traffic



                All of these details help you get a
                clearer picture of the humans
                using your site
Funnels: this is a sales funnel for an
event. You can buy tickets online:
                                     248 people start this funnel




                                     Only 20 people check out

  That sucks. We see that most people dropped out
  between step 1 and step 2, so there is obviously a
  problem with the first page:
How would we fix this?
When you pick a day, a morning and afternoon
session is automatically ticked, which may be
the reason people left the page.


                                     Automatically
                                     ticked



                 To fix it, add some help text
                 that says something like,
                 “When you select a day, you
                 pay for a morning and
                 afternoon session. If you’d
                 like to mix and match, give us
                 a call on 555-5555.”
Internal site search
Look at what people are searching for on
 which pages.




If there’s a pattern, move that content to
where you users expect it to be.
Internal site search report
Analysing content



    Where are your users going?
     What are your users doing?
    How did your users get there?
Top content


     Top content shows you your most popular
     pages.



              It also tells you:

              • The bounce rate

              • The percentage exit
Top content by title
Top content by title shows you your most popular
page titles.



                  The difference?
                    Specificity


The bounce rates are definitive proof that your page
titles and links that got them there work (or don’t).
Top content by section
“Content drilldown” shows you your most popular
sections.




You can use this information to tweak your information
architecture.
Map overlay

Shows you which countries your users are coming from.
Navigation summary

Shows you how your users move through your site.
Pop quiz
The intro text on one of your pages looks like this:


                              Your analytics tells you
                              that you have a
                              significant traffic
                              coming from non-
                              English speaking
                              countries.

                              Would you change your
                              blurb text? How?
Pop quiz
Your analytics tells you that one of your most viewed
pages is a recipe for grilled chicken.



                       You know that most
                       people get to this page
                       from external search
                       engines, and that most
                       people leave the page
                       once they get there.

                       How would you fix it?
Analytics


      Analytics shows you how people
       respond to your content -- and
     how they don’t. It should be a tool
     that helps you constantly update
                 your site.
Usability
User testing transport websites

Last year we ran an “off the street” usability test
for World Usability Day




The theme of the day was transportation, so we
tested a series of airline, rail and public transport
sites.
Looking for the right word



These videos show people struggling to find a
navigation label
This video shows a guy struggling to find
the word ‘destinations.’ It takes him a long
time.
What about design?



The next test shows how too much content on a page -
the result of poor layout and content planning - can
discourage a user from reading
This video shows a woman saying she only
wants ‘relevant content.’ We love her.




                        I want less
                    information and I
                       want it to be
                          relevant
These are “quick and dirty” user
tests


   All you need for your own user test:

   •Impartial users (not coworkers)
   •User testing software (we use Silverback)
Usable Language | How Content Shapes The User Experience
But there are lots of others


                   Remote online
                    user testing




                         Desktop software
                         (we use this too)
Most basic user testing is
linguistic, or interview-based


 It’s an ‘ask and listen’ solution to problems in your
 website’s design

 But sometimes the interviewer has to be almost
 invisible - to get the answers the user isn’t aware of
What about sample size?


      We tested sites with over 80
      people for World Usability Day

      But you can get reliable results
      with as few as 5 users
Usable Language | How Content Shapes The User Experience
But first , know your user base
Let’s wrap
it up
User experience design
demands us to understand how
people use, observe and even
feel about words and language
We can improve web
usability using language
skills alone
Randall Snare @randallsnare

Elizabeth McGuane @emcguane


             iqcontent.com



             mappedblog.com

More Related Content

Similar to Usable Language | How Content Shapes The User Experience

Information Architecture Intro
Information Architecture IntroInformation Architecture Intro
Information Architecture Introhapy
 
Understanding Information Architecture
Understanding Information ArchitectureUnderstanding Information Architecture
Understanding Information ArchitectureTejinder Singh
 
Information Architecture for Drupal
Information Architecture for DrupalInformation Architecture for Drupal
Information Architecture for DrupalVanessa Turke
 
Taking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersTaking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersMark O'English
 
Questions On Web Information System Essay
Questions On Web Information System EssayQuestions On Web Information System Essay
Questions On Web Information System EssayTonya Strongheart
 
Searchland: Search quality for Beginners
Searchland: Search quality for BeginnersSearchland: Search quality for Beginners
Searchland: Search quality for BeginnersValeria de Paiva
 
Web technology: Web search
Web technology: Web searchWeb technology: Web search
Web technology: Web searchVictor de Boer
 
Bearish SEO: Defining the User Experience for Google’s Panda Search Landscape
Bearish SEO: Defining the User Experience for Google’s Panda Search LandscapeBearish SEO: Defining the User Experience for Google’s Panda Search Landscape
Bearish SEO: Defining the User Experience for Google’s Panda Search LandscapeMarianne Sweeny
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For UseChristina Wodtke
 
Charting Searchland, ACM SIG Data Mining
Charting Searchland, ACM SIG Data MiningCharting Searchland, ACM SIG Data Mining
Charting Searchland, ACM SIG Data MiningValeria de Paiva
 
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15Robert Stribley
 
Search Analytics for Fun and Profit
Search Analytics for Fun and ProfitSearch Analytics for Fun and Profit
Search Analytics for Fun and ProfitLouis Rosenfeld
 
Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Robert Stribley
 
Introduction to Information Architecture & Design - 3/21/15
Introduction to Information Architecture & Design - 3/21/15Introduction to Information Architecture & Design - 3/21/15
Introduction to Information Architecture & Design - 3/21/15Robert Stribley
 
Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Robert Stribley
 
Introduction to Information Architecture & Design - 10/03/15
Introduction to Information Architecture & Design - 10/03/15Introduction to Information Architecture & Design - 10/03/15
Introduction to Information Architecture & Design - 10/03/15Robert Stribley
 
Sweeny group think-ias2015
Sweeny group think-ias2015Sweeny group think-ias2015
Sweeny group think-ias2015Marianne Sweeny
 

Similar to Usable Language | How Content Shapes The User Experience (20)

Information Architecture Intro
Information Architecture IntroInformation Architecture Intro
Information Architecture Intro
 
Search V Next Final
Search V Next FinalSearch V Next Final
Search V Next Final
 
Understanding Information Architecture
Understanding Information ArchitectureUnderstanding Information Architecture
Understanding Information Architecture
 
Information Architecture for Drupal
Information Architecture for DrupalInformation Architecture for Drupal
Information Architecture for Drupal
 
Taking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the UsersTaking the Reins: Website Redesign by the Librarians, for the Users
Taking the Reins: Website Redesign by the Librarians, for the Users
 
Questions On Web Information System Essay
Questions On Web Information System EssayQuestions On Web Information System Essay
Questions On Web Information System Essay
 
Searchland: Search quality for Beginners
Searchland: Search quality for BeginnersSearchland: Search quality for Beginners
Searchland: Search quality for Beginners
 
Auditing Your Website for Usability Issues
Auditing Your Website for Usability IssuesAuditing Your Website for Usability Issues
Auditing Your Website for Usability Issues
 
Web technology: Web search
Web technology: Web searchWeb technology: Web search
Web technology: Web search
 
Bearish SEO: Defining the User Experience for Google’s Panda Search Landscape
Bearish SEO: Defining the User Experience for Google’s Panda Search LandscapeBearish SEO: Defining the User Experience for Google’s Panda Search Landscape
Bearish SEO: Defining the User Experience for Google’s Panda Search Landscape
 
Designing The Interface For Use
Designing The Interface For UseDesigning The Interface For Use
Designing The Interface For Use
 
Charting Searchland, ACM SIG Data Mining
Charting Searchland, ACM SIG Data MiningCharting Searchland, ACM SIG Data Mining
Charting Searchland, ACM SIG Data Mining
 
Searchland2
Searchland2Searchland2
Searchland2
 
Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15Introduction to Information Architecture & Design - 2/14/15
Introduction to Information Architecture & Design - 2/14/15
 
Search Analytics for Fun and Profit
Search Analytics for Fun and ProfitSearch Analytics for Fun and Profit
Search Analytics for Fun and Profit
 
Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15Basics of Interaction Design & Strategy - 4/11/15
Basics of Interaction Design & Strategy - 4/11/15
 
Introduction to Information Architecture & Design - 3/21/15
Introduction to Information Architecture & Design - 3/21/15Introduction to Information Architecture & Design - 3/21/15
Introduction to Information Architecture & Design - 3/21/15
 
Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17Introduction to User Experience Design 10/07/17
Introduction to User Experience Design 10/07/17
 
Introduction to Information Architecture & Design - 10/03/15
Introduction to Information Architecture & Design - 10/03/15Introduction to Information Architecture & Design - 10/03/15
Introduction to Information Architecture & Design - 10/03/15
 
Sweeny group think-ias2015
Sweeny group think-ias2015Sweeny group think-ias2015
Sweeny group think-ias2015
 

Recently uploaded

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 

Recently uploaded (19)

Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 

Usable Language | How Content Shapes The User Experience

  • 1. Usable Language How content shapes the user experience Randall Snare Elizabeth McGuane
  • 2. What in God’s name are we talking about? 1 How content is essential to user experience design 2 How to improve your site using content alone
  • 4. says . . . “User experience is a person's perceptions and responses that result from the use or anticipated use of a product, system or service.”
  • 5. So what is content strategy?
  • 6. says . . . “Content strategy is the practice of planning for content creation, delivery, and governance, and is a repeatable system that defines the entire editorial content development process for a website.”
  • 7. Wikipedia is missing something (shocking, I know)
  • 9. The 4 major UX elements Information architecture Design Analytics Usability
  • 11. Information architecture Sounds important, right? The term was actually invented by an architect- turned-graphic designer, Richard Saul Wurman
  • 12. Information architecture “Information architecture is really about what's not obvious. Users don't notice the information architecture of a site unless it isn't working.” - Rosenfeld and Morville, Information Architecture for the World Wide Web
  • 13. “Instruction for organized space” Gathering, organizing and presenting information to suit your user’s needs is analogous to designing a building that will serve the needs of its occupants. From INFORMATION TECHNOLOGIES AND THE INFORMATION PROFESSIONS, R. E. Wyllys, University of Texas at Austin
  • 15. Who cares about the geography of the system? All you need to know is the sequence of the stations.
  • 16. Great Wurman IA quotes “Most of the word information contains the word inform, so I call things information only if they inform me, not if they are just collections of data… “If I throw 140,000 words on the floor and connect those words with a sentence or two, we wouldn't call that a dictionary... The ability to find something goes hand-in-hand with how well it's organized.”
  • 17. So what’s the point? Make the complex clear
  • 18. There are lots of ways to organise information •L - by location •A - by alphabet •T - by time (chronology) •C - by category •H - by hierarchy
  • 19. The web organises by the last 2 Category - putting relevant information together Hierarchy - deciding what is least and most important
  • 20. Even if it’s organised perfectly, if it isn’t labelled right, you’ve lost.
  • 21. Labels and information architecture - some good and bad examples
  • 25. 18 major categories over 30 sub- categories
  • 31. What?
  • 35. Pop quiz: what do the following labels mean?
  • 38. information architecture . . . How well you organise your information depends on how well you know your information (i.e. content). If it’s not labelled well, it doesn’t matter how you organised it, no one will find it.
  • 40. In the olden days, wireframes came first
  • 42. Wireframes can be simple or complex depending on how well you know your content.
  • 48. The best wireframes anticipate the amount and type of content they’ll need to include
  • 49. What comes after wireframes? A polished, finished site - that’s hard to change That means the design decisions you make in your wireframes will directly affect the volume and type of content you’ll be able to add in the future
  • 50. That means, content first, wireframes and design second Text
  • 51. How design affects content: Boxes
  • 55. What to do with boxes They work best for image-heavy pages with minimal text They need to be fluid The content should dictate the length and arrangement of the boxes (and that’s hard to do)
  • 57. How content affects design: expanding menus
  • 60. Expanding menu guidelines: Pack a punch: your content has to fit in a small area, so it needs to be succinct. Use white space around your content Don’t use expanding menus as your main navigation
  • 61. How content affects design: help text and teasers
  • 65. Tips for teasers and help text Keep it short (sound familiar?) - people won’t read a long teaser. Make it meaningful: all the reader needs to know is •What they should do (help text) •What they’ll see on the next page (teasers)
  • 66. Design You can’t design in a vacuum, the content makes the design real and functional (and grow-able)
  • 68. What is analytics? Data. Lots and lots of data
  • 69. What does content have to do with analytics? A lot
  • 70. Keywords Often people will find your site through a search engine. Analytics will tell you which words they used to find you (keywords)
  • 71. You can’t cheat with keywords Analytics tells you more . . . Meaningless, jargon-y keywords won’t do your site any good -- because people won’t use your site once they’ve found it
  • 72. What does SEO mean? Search Engine Optimisation Effective SEO means relevant content “Optimise for the searcher, not the search engine. Focus on your customers, not the technology.” - Gerry McGovern (Jan 20, 2009
  • 73. Traffic sources Analytics shows you the context for your visitors: i.e. where they came from. • Search engines • Referring sites • Direct traffic All of these details help you get a clearer picture of the humans using your site
  • 74. Funnels: this is a sales funnel for an event. You can buy tickets online: 248 people start this funnel Only 20 people check out That sucks. We see that most people dropped out between step 1 and step 2, so there is obviously a problem with the first page:
  • 75. How would we fix this?
  • 76. When you pick a day, a morning and afternoon session is automatically ticked, which may be the reason people left the page. Automatically ticked To fix it, add some help text that says something like, “When you select a day, you pay for a morning and afternoon session. If you’d like to mix and match, give us a call on 555-5555.”
  • 77. Internal site search Look at what people are searching for on which pages. If there’s a pattern, move that content to where you users expect it to be.
  • 79. Analysing content Where are your users going? What are your users doing? How did your users get there?
  • 80. Top content Top content shows you your most popular pages. It also tells you: • The bounce rate • The percentage exit
  • 81. Top content by title Top content by title shows you your most popular page titles. The difference? Specificity The bounce rates are definitive proof that your page titles and links that got them there work (or don’t).
  • 82. Top content by section “Content drilldown” shows you your most popular sections. You can use this information to tweak your information architecture.
  • 83. Map overlay Shows you which countries your users are coming from.
  • 84. Navigation summary Shows you how your users move through your site.
  • 85. Pop quiz The intro text on one of your pages looks like this: Your analytics tells you that you have a significant traffic coming from non- English speaking countries. Would you change your blurb text? How?
  • 86. Pop quiz Your analytics tells you that one of your most viewed pages is a recipe for grilled chicken. You know that most people get to this page from external search engines, and that most people leave the page once they get there. How would you fix it?
  • 87. Analytics Analytics shows you how people respond to your content -- and how they don’t. It should be a tool that helps you constantly update your site.
  • 89. User testing transport websites Last year we ran an “off the street” usability test for World Usability Day The theme of the day was transportation, so we tested a series of airline, rail and public transport sites.
  • 90. Looking for the right word These videos show people struggling to find a navigation label
  • 91. This video shows a guy struggling to find the word ‘destinations.’ It takes him a long time.
  • 92. What about design? The next test shows how too much content on a page - the result of poor layout and content planning - can discourage a user from reading
  • 93. This video shows a woman saying she only wants ‘relevant content.’ We love her. I want less information and I want it to be relevant
  • 94. These are “quick and dirty” user tests All you need for your own user test: •Impartial users (not coworkers) •User testing software (we use Silverback)
  • 96. But there are lots of others Remote online user testing Desktop software (we use this too)
  • 97. Most basic user testing is linguistic, or interview-based It’s an ‘ask and listen’ solution to problems in your website’s design But sometimes the interviewer has to be almost invisible - to get the answers the user isn’t aware of
  • 98. What about sample size? We tested sites with over 80 people for World Usability Day But you can get reliable results with as few as 5 users
  • 100. But first , know your user base
  • 102. User experience design demands us to understand how people use, observe and even feel about words and language
  • 103. We can improve web usability using language skills alone
  • 104. Randall Snare @randallsnare Elizabeth McGuane @emcguane iqcontent.com mappedblog.com