Online Information Design

36
Communication, Connection and Context Serena Carpenter http:// scarpenter.personal.asu.edu/ wordpress

Transcript of Online Information Design

Page 1: Online Information Design

Communication, Connection and Context

Serena Carpenterhttp://scarpenter.personal.asu.edu/wordpress

Page 2: Online Information Design

Poynter Eyetrack Research• 2003

– Difficult to read on screen, so they read less– Scan for interests– Text, then graphics

• 75% read all of text (online) vs. 20-25% (print)

• 2007– 77% of online text read and 63% finish– Maps & graphics (88%)

Page 5: Online Information Design

Make it easy to scanWash fruits an

vegetables only before eating. If you wash the item before storage, it will spoil more quickly. The best way to wash the fruit or vegetable thoroughly is by gently rubbing the produce item under clean running tap water. If the fruit or vegetable is firm enough (like potatoes and squash) and the skill will be be eaten, then a scrub brush should be used to clean the surface

• Wash fruits and vegetables only before eating. If you wash the item before storage, it will spoil more quickly.

• The best way to wash the fruit and vegetable is by gently rubbing the produce item under tap water.

• If the fruit or vegetable is firm enough (like potatoes or squash) and the skin will be eaten, then a scrub brush should be used to the clean the surface.

Page 6: Online Information Design

Shorten with bullets and highlightsWash fruits an

vegetables only before eating. If you wash the item before storage, it will spoil more quickly. The best way to wash the fruit or vegetable thoroughly is by gently rubbing the produce item under clean running tap water. If the fruit or vegetable is firm enough (like potatoes and squash) and the skill will be be eaten, then a scrub brush should be used to clean the surface

• Wash fruits and vegetables only before eating. If you wash the item before storage, it will spoil more quickly.

• The thorough way to wash the fruit and vegetable is by gently rubbing the produce item under tap water.

• If you’re going to eat the skin and the item is firm (like potatoes or squash), then a scrub brush should be used to the clean the surface.

Page 7: Online Information Design

User don’t read. They scan.

Page 8: Online Information Design

Write for Human Searchers

• Rule of 2– Two words of headlines– Two words of sentence– Two paragraphs

Page 9: Online Information Design

Searchable Headlines

• Don't use puns, metaphors or wordplay• Use keywords• Google pays greatest attention to the first 60

characters– Many RSS feeds cut the headline off after 60– AP – 40 characters– Unique, urgent, short, rewarding– www.cnn.com

Page 10: Online Information Design

Headline: Good or Bad?

Page 11: Online Information Design

Summary Deck

• Major online stories must be accompanied by a headline and summary deck

• Brief summary under headline– After the headline this paragraph can be the next

section of text search engines read, so include keywords.

– http://www.roanoke.com/news/breaking/wb/113294

– http://www.cnn.com/2009/HEALTH/02/02/kroger.recall.salmonella/index.html

Page 12: Online Information Design

Structure• Shorter stories

– 300-400 words– 600-800 words

• Short sentences– Subject-Verb-Object– One idea per sentence (which, and)

• Two sentences or eliminate words– A combo of broadcast & print

• Single-spaced• Spaces between paragraphs

– http://www.venturacountystar.com/news/2008/mar/13/oaks-christian-asked-to-find-new-league/

Page 13: Online Information Design

Write concise• Go back and edit• Don’t start with “There are/is”• Delete “very”• Delete “of the”• Delete “always” “existing”• Just “to” and not “if you want to” or “in order to”• ACTIVE voice – Home prices fall. Home prices

crash.• Periods and commas inside quotation marks• No punctuation in headlines

Page 14: Online Information Design

Text Formatting• Paragraph chunks (1 – 3 sentences, no more than 5)

– Don’t indent• Headings within text (boldface)

– Informational, not clever subheadings• If text exceeds 300 words or more

• Pull quotes– Make your article as 'scannable' as possible– http://cronkitezine.asu.edu/spring2008/hats.html

• Lists– Keep short– http://www.denverpost.com/ci_4872351

Page 15: Online Information Design

Lists

• Providing a Service– Contact info

• Stats• Background Information

– History

• Instructions

Page 16: Online Information Design

Linking• 1 – 2 words• Clickworthy - Link with purpose

– Lose their trust• Link outbound

– Act as a guide– http://www.nytimes.com/2007/09/27/world/

middleeast/27contractor.html?_r=1&hp&oref=slogin

• No “click here” or full URLs

Page 18: Online Information Design

Finding Keywords

• Google Trends• Google Insights for Search• Google Adwords• Twitter Streamgraphs

– Streams last 1000 words related to search

• Slacker Keyword Search

Page 19: Online Information Design

Photos

Page 20: Online Information Design

Video

Page 21: Online Information Design

Enhance screening

• Photos delay access to information

• Sum up the story with a summary deck

• Divide the story into sections

• Put tools related to content above the fold

• Add word “Watch:”

• Use numbers “3 vs Three”

Page 22: Online Information Design

Content must answer questions

• Site design, then…..

• If useful, they will share it• Don’t assume a foundation of knowledge

– Info box with “background .history .facts”

Page 23: Online Information Design

News as a hook for context

• About BackgroundResources Involvement

Context

Page 24: Online Information Design

Quality

1. Are we making our community feel better-informed or merely distracted?

2. Are we chasing the larger story, or just the latest story?

3. Are we synthesizing information, or merely aggregating it?

4. How are we serving those who know [nothing | a lot] about the topic?

5. How are we managing our own info overload?

Page 25: Online Information Design

What is SEO?

Page 26: Online Information Design

Search Engine Optimization (SEO)

• Optimizing a Web site for search engines so people can find your content

• Google dominates• 25/75 rule or 20/80 rule

– On-page elements and marketing

Page 27: Online Information Design

Everybody Searches!

Page 28: Online Information Design

Speaking the Language of Your Customer

Page 29: Online Information Design

25% of SEO (page) (Hubspot)

Page Title

Headings

Page text Bold

First few sentences

First few words (50-100, but hopefully even sooner) of a page's text content.

Page 30: Online Information Design

25% of SEO = (code)

• Meta tags– http://www.public.asu.edu/~jjcooper/journ/

index.html

• URL• Alt text on images/video (img file name & alt

tags)

Page 31: Online Information Design

• No HTML• Search engines can’t read text in images, Flash, video• Need description tag

Attach text to multimedia/animation

Page 32: Online Information Design

75% of SEO = Marketing(Hubspot)

• Social media can help your brand’s overall search presence

• Recommendation from friends– “I know Mike Smith.”– “Mike Smith is a marketing expert.”

• Links to your site are online recommendations• Use social media and comments to encourage people

link to you

Page 33: Online Information Design

SEO Tips

• Use the language of your customer/reader• Make sure your text is extractable

– Thoughtful use of multimedia (Flash, JavaScript, video)

• Provide the most relevant, useful info• Spread awareness (and gain links)

Page 34: Online Information Design

Blogs

• About page• Link• Writing• Research

– Stats– Informational or entertainment value

Page 35: Online Information Design

Class

• Lecture: 1) promoting your blog, 2) e-branding and 3) using social media

• Second blog post and 2 comment are due

• Buy your hard drives!!!!•

Page 36: Online Information Design

Resources• People:

– Jakob Nielsen's http://www.useit.com/– Matt Thompson - http://www.newsless.org/– Boxes and Arrows - http://www.boxesandarrows.com/

• Example:– http://www.columbiatomorrow.com/

• Books:– The Design of Everyday Things by Donald Norman– Designing Web Usability: The Practice of Simplicity by

Jakob Nielsen