Usable Audio—Best Practices for Auditory Content

December 5th 2008

Foto

: abo

utpi

xel.d

e ©

Tho

mas

Pie

rusc

hek

About Your Speaker

• Jens Jacobsen• Information Architekt, Usability

Consultant• Created podcasts, websites & POIs/

games for museums• Founder, CEO Content Crew GmbH

2

Example:

• Product activation via phone

3

Foto

: abo

utpi

xel.d

e ©

Dom

inik

Sel

lman

n

Audio Example—what went wrong?

Key Feature Audio:

• Audio is linear.• Other than text and images:

6

7

Design

NewsMoneymaker

Community

Social News

TechnologyMusic

Sharing

KnowhowChinese Line

Tools

Political BlogsConnections

MoviesInsidersMain Sites

Junctions

Stations

Information Architects Inc. Japan www.informationarchitects.jp © 2007.6 V1.6

Web Trend Map 2007/V2INFORMATION ARCHITECTS JAPANANALYTIC DESIGN AND CONSULTING

Web X.X

Forecast

Nice

Unreal

Changing

TroubleInsecure

Storm

Line Color

News

Design

Yahoo

9 Rules

Yahoo Mail

Yahoo Answers

Getty

Yahoo MapsDelicious

Yahoo News

Adobe

Monster

CSS ZEN Garden

AIGA

Adaptive Path

Slashdot.org

MSN

Dell

Sohu163

Taobao

Soso

TomEastMoneyVnetPChome

Wretch.cc

Cisco

IBM

Sony

Microsoft

StumbleUpon

AIM

Hotmail LiveImagevenue

Xanga

Livejournal

Geocities

Statcounter XBox Live

Passport

Go.com

Livejournal

LastFM

Torrentspy

W3C

Firefox

Wordpress

IMDB.com

Twitter

Craigslist

WiredOrkut

ThePirateBay

Flickr

Wikipedia

Wikipedia (D)

Wikipedia (Pl)

Wikipedia (Nl)

Wikipedia (SV)

Wikipedia (It)

Wikipedia (Es)

Wikipedia (Fr)

Wikipedia (Pt)

Sapo

Orange

Wikipedia (J)

OpenID

EBayApple

.Mac

Rakuten

LiveDoor

Hatena

Amazon

2ch.net

QQ

BaiduSina

Uwants

Myspace

SecondLife Mixi

Linkedin

Xing

Meebo

Trillian

Studiverzeichnis

Yahoo Messenger

Bebo

Nicovideo

CNet

About.com

ICQ

Seth Godin

Zeldman

Fake Steve Jobs

Daring Fireball

Guy Kawasaki

Jeff Croft

Swissmiss

Cameron Moll

Mark Boulton

Coudal

Edward Tufte

iA

Netvibes

iTunesOfficial Google Blog

Subtraction

OhMyNews

Useit

Boxes&Arrows

FaceBook

BoingBoingDesignobserver

Youtube (Jp)

A List Apart

CNN

USA Today

Der Spiegel

T-Online

Yigg

Heise

Spreeblick

Prägnanz

Bild

GMXWeb.de

Leo

MyVideo

NYTimes

Reddit

Netscape

Memeorandum

Techmeme

Newsvine

Digg

PhotoBucket

Imageshack

Photolog.com

AOL

Terra

37 Signals

Wallmart

Washington Post

Metacafé

TheGuardian

Repubblica

Google.de Google.itGoogle.fr

Google.ukGoogle.br.com

Google.co.jp

Federated Media

Feedburner

Skype

LeMonde

ElPais

FAZ

Sueddeutsche

Media Matters

Huffington Post

C&L

Daily Kos

Beppe Grillo

Red State Malkin

NZZ

Google

YouTube

Daily Motion

Google Video

Google News

Google Docs

Google Calendar

VOX

Tagged

Answers.com

WebMD

BitTorrent

Google Analytics

Google Maps

Google Checkout

GMail

Blogger

Adwords

Adsense

Technorati

MyBlogLog

Pandora

NetFlix

Comedy Central

ZeFrank

Office Live

PayPal

AdBrite

MegaUpload Sendspace RapidshareBadongo

Friendster

DeviantArt

Skyblog

Torrentz.com

Expedia.com

Edelman

Messenger

Wall Street Journal

The Economist

Micro Persuasion

Alibaba

UPS

Sourceforge

Versiontracker

Google Blogsearch

Yahoo.co.jp

Valleywag

Jeff Jarvis

Doc Searls

Dave Winer

Kotaku

Engadget

TechcrunchScoblizer

OM Malik

John Batelle FOX

Slate

Yahoo.com.cn

IXDA

You

BaLa Music!

BBC

Hi5

Money

Money

Money

Money

Webtoo

ls

Sharing

Movies

Technology

Tools

Know

how

Music

Social News

News

Shari

ng

Tools

Tools

Social News

Social News

Technology

Music

Know

how

Know

how

Knowhow

Chinese Line

Chinese Line

Chinese Line

Mus

ic

Murdoch

Edelm

an

News

Design

Design

Social Networks

Socia

l Netw

orks

2.0

2.02.0

1.5

1.5

1.5

1.5

1.0

0.5

1.01.0

1.0

1.5

1.0

1.5

1.5

1.0

1.0

1.0

1.0

1.5

1.0

1.0

1.0

1.0 2.02.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.02.0

2.0

2.5

2.5

2.0

2.0

2.02.0

1.5

1.5

1.0

1.0

1.0

1.5

1.0

1.5

1.5

1.5

2.5

2.5

2.5

2.0

2.0

2.0

1.0

1.5

2.0

1.5

1.5

1.5

1.5

1.0

2.02.0

2.02.0

2.0

2.0

2.0

1.02.02.0 1.5

1.5

2.5

2.0

1.0

0.5

2.0

2.0

1.5

1.01.0

2.0

1.0 1.0

1.5

1.51.0

1.5

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

2.0

1.5

2.0

2.5

2.0

1.0

1.0

Key Feature Audio:

• Audio is linear.⇒• Overview difficult• Short term memory needed a lot• Rewind / fast forward awkward or even impossible

8

So:

• We need a special information architecture for audio.

9

Use of IA for Audio?

• Radio• Audio books• Voice control• Phone / hotlines• Navigation / car assistance systems

• Podcasts• On the Web

10

Information Architecture

11

Foundation for Audio IA…

12

User Scenarios

13 Foto

: abo

utpi

xel.d

e ©

Svai

r

• How will audio be used? • Just listen: Radio• Listen, maybe rewind: audio book• Listen parts, skip, maybe rewind: Podcast• Listen, talk: voice recognition• Listen, use keys: voice recognition• Listen interactively: Web

User Scenarios 1/3

14

increasingly interactive

• How are the surroundings?• Headphones / phone receiver / loudspeaker• At home• In the office• On the go

• How much experience do users have?

User Scenarios 2/3

15

• What do the users want?• Entertainment

• Information

• Problem solving

User Scenarios 3/3

16

increasingly goal-oriented

Metadata

17

18

Journalism

Foto

: abo

utpi

xel.d

e ©

Nig

gl

Writing to Be Heard

• Be short• Write easy sentences• Use present tense, name the doer• Avoid jargon & complicated words• Repeat, repeat, repeat

19

Answer the „Seven Ws“:

• Who?• What?• Where?• When?• How?• Why?• Where from?

20

Make Information Digestable

• One new information per sentence• Provide time for information processing• Relate to personal experience• Instead of

The new time management solution IS EasyPlan makes it possible to access all e-mail in order and answer them in a way…

• Write:You know it: you enter the office in good spirit. But turning on your PC you find 73 unread e-mails. IS EasyPlan helps you…

21

Psychology of Learning

22 Foto

: abo

utpi

xel.d

e ©

Tho

rwal

d H

offm

ann

Writing for the Brain

23

• Mind short-term memory• Think of previous user experience• Adjust reading speed

User Centered Design

24 Foto

: © B

arba

ra E

ckho

ldt /

Pix

elio

Our Usability Study

25

Our Hypothesis:

“Audio created which follows the rules of Audio Information Architecture is better.”

26

27

Our Setup

Text Comparison

At the end of the 19th century, scientists were in agreement: All of nature's laws were known to man and fully understood, every observable phenomenon could be explained and described with a formula, only a few minor details would be left to discover.

Not until decades later most of them realized how wrong they were...

30

The end of research [ethereal sound]

At the end of the 19th century, scientists agreed: All of nature's laws were known to man and fully understood. Every observable phenomenon could be explained and described with a formula. Only a few minor details would be left to discover.

Not until decades later most of them realized how wrong they were... [wobbling sound]

AP

Print text Audio text

General Problem: Audio on Webpage

32

38%: ”Video would be nice“

18%: ”Dificult to concentrate“

38% aborted playback

Audio is difficult—so:

• Consider using video• Provide link for download• Provide RSS-feed (podcast)• Treat it as appetizer

36

What about the Audio Players?

37

Player 1

Player 2

Player 1 Player 2

Our Plans

• Produce video with same text.• Conduct study with ~100 participants.

• Develop audio player that • meets usability requirements• tracks audio abort

39

1:31 5:43

Conclusion

• Create text with Audio Information Architecure in mind• Use a usable player• Don‘t think anyone listens a longer audio on the

web—but maybe he/she downloads it

41

Your Turn

• For more info please visitwww.content-crew.de/audioIA.

Questions, comments, thoughts, please!