Content Follows Context

56
Content follows Context Lammert Postma - www.lammertpostma.com woensdag 20 april 2011 ()

description

De populariteit van smartphones en tablets dwingt ons om beter na te denken over de ontwikkeling en ontwerp van nieuwe websites. In deze presentatie vind je veel feiten en grafieken van actuele ontwikkelingen en de conclusies die we hier als ontwerpers uit moeten halen.

Transcript of Content Follows Context

Page 1: Content Follows Context

Content follows ContextLammert Postma - www.lammertpostma.com

woensdag 20 april 2011 ()

Page 2: Content Follows Context

Hoe zit het nu precies met het gebruik van smartphones en tablets?

woensdag 20 april 2011 ()

Page 3: Content Follows Context

De smartphone is de werkelijke ‘personal computer’. Altijd binnen handbereik en altijd online.

Flicr - yourdon - http://www.flickr.com/photos/yourdon/5398063184/sizes/l/in/photostream/

woensdag 20 april 2011 ()

Page 4: Content Follows Context

50%is een smartphone

GfK Retail and Technology

2010 25%

2011

Verkoop mobiele telefoonsNederland

2015 75%

woensdag 20 april 2011 ()

Page 5: Content Follows Context

3.000.000

GfK Retail and Technology / Strategy Analytics

2010 2.500.000293.000.000 wereldwijd

2011

Verkoop smartphonesNederland

Iedereen heeft straks een smartphone

woensdag 20 april 2011 ()

Page 6: Content Follows Context

“Bij de verkoop van smartphones neemt de helft een mobiel data abonnement”

T-Mobile

T-Mobile

Mobiel data abonnementen

En is altijd online via wifi of via 3G

woensdag 20 april 2011 ()

Page 7: Content Follows Context

117,5

World Bank data, ITU Data

2002 75,3

2007

Mobiele abonnementenPer 100 personen

Men heeft in ieder geval één telefoon.

woensdag 20 april 2011 ()

Page 8: Content Follows Context

“Tablets penetratie gaat 4 keer sneller dan die van de smartphone.”

Flicr - ntr23 - http://www.flickr.com/photos/ntr23/4545975787/sizes/l/in/photostream/

woensdag 20 april 2011 ()

Page 9: Content Follows Context

1.000.000 55.000.000 wereldwijd

GfK Retail and Technology / Gartner

2010 250.00020.000.000 wereldwijd

2011

Verkoop tabletsNederland

Ook de tablet bereikt steeds een groter publiek.

woensdag 20 april 2011 ()

Page 10: Content Follows Context

Apple - http://www.apple.com/pr/library/2010/07/20results.html

Verkoop tabletsWereldwijd

En wordt snel geadopteerd door de consument.

Er zijn in Q3 van 2010 3,27 miljoen iPads verkocht. Slechts 200.000 minder dan er van de Mac zijn verkocht.

woensdag 20 april 2011 ()

Page 11: Content Follows Context

51%

AlphaWise CIO survey

2010 21%

2011

Gebruik van tablets in EnterprisesWereldwijd

Niet alleen privé, maar ook in de zakelijk markt doet de tablet zijn intrede.

woensdag 20 april 2011 ()

Page 12: Content Follows Context

500

400

300

200

100

02010

IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-

Verkoop devices Wereldwijd

200920082007

600

700x 1.000.000

200620052004200320022001200019991998199719961995

Smartphones

Tablets

Netbooks

Notebooks

Desktops

De markt defragmenteert.

woensdag 20 april 2011 ()

Page 13: Content Follows Context

“Men gebruikt devices naast elkaar en aanvullend aan elkaar. Men wisselt ‘seamlessly’ tussen tablet, smartphone en laptop.”

Flicr - istig - http://www.flickr.com/photos/istig/5599004092/sizes/l/in/photostream/

woensdag 20 april 2011 ()

Page 14: Content Follows Context

De gebruiker gebruikt niet één device, maar een verscheidenheid aan devices.

“Focussen op desktop is niet voldoende.”

woensdag 20 april 2011 ()

Page 15: Content Follows Context

Hoe gebruikt men deze devices?

woensdag 20 april 2011 ()

Page 16: Content Follows Context

Smartphones gebruikt men voor directe contentconsumptie in verschillende contexten.

Flicr - johnwilliamsphd - http://www.flickr.com/photos/johnwilliamsphd/5132328951/

woensdag 20 april 2011 ()

Page 17: Content Follows Context

Mobile Metrics - http://www.mobilemetrics.nl/2011/04/ipad-most-used-mobile-device-for-web-surfing/

Mobiel sitebezoekOnder top 20 nl-websites

iPad 34,39%iPhone 33,96%

Android 16,90%Blackberry 5,92%

iPod 4,67%

Symbian 3,52%

Others 0,46%

Windows 0,20%

iOS is de meest gebruikte platform voor browsing

woensdag 20 april 2011 ()

Page 18: Content Follows Context

n = 1246 participants 53% 35% 9%

n = 1246 participants 38% 43% 16%

n = 1246 participants 36% 43% 16%

n = 1246 participants 31% 53% 13%

n = 1246 participants 26% 59% 12%

n = 1246 participants20% 52% 24%

n = 1246 participants16% 50% 26%

Compete.com 2010 - http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

Gebruik van de smartphone

50%40%30%20%10%0 60% 70% 80% 90% 100%

At Home

Misc. Downtime throughout the day

Waiting in line / appointment

While shopping

At Work

While Watching TV

During my commute to work

Not at all

0-1 hour

1-3 hours

3-5 hours

5+ hours

n = 1246 participants

woensdag 20 april 2011 ()

Page 19: Content Follows Context

Tablets vervangen de ‘traditionale PC’ op het gebied van contentconsumptie en zal aanvullend zijn op content creatie.

Flicr - smolianitski - http://www.flickr.com/photos/smolianitski/5008046254/sizes/l/in/photostream/

woensdag 20 april 2011 ()

Page 20: Content Follows Context

50%

40%

30%

20%

10%

0

IDC, Gartner, Morgan Stanley Research - http://www.businessinsider.com/morgan-stanley-tablets-2011-2#were-going-from-a-computing-

Tablets v.s. Traditional PC’s Wereldwijd

Tablets

Traditional PC

60%

70%

Web

Bro

wsing

80%

90%

100%

Socia

l Netw

orkin

g

Readin

g

Playin

g Gam

es

Listen

ing to

Mus

ic

Watc

hing V

ideo

E-mail

Create

/ Edit

files

Gener

al Wor

k Use

Spec

ific W

ork U

se

68%

81%

54%55%

54%

27%

52%

46%

52%

41%

51%48%

62%

82%

21%

54%

14%

44%

17%

29%Tablets vervangen de contentconsumptie niet de content creatie.

woensdag 20 april 2011 ()

Page 21: Content Follows Context

35%

35%

35%

Sanoma Digital - http://www.sanomamedia.nl/nl-web-Nieuws-Persberichten-2010-Meer_dan_een_uur_per_dag_gebruik_van_de_iPad.php

Gebruik van de iPad

50%40%30%20%10%0 60% 70% 80% 90% 100%

Nieuws

Surfen

Zoeken

E-mail

TV / Video kijken (youtube, uitzendinggemist

Foto’s bekijken

Gamen

Nooit

Soms

Vaak

Tijdschrift lezen

Muziek luisteren

Aankopen doen

Boeken lezen

Tekstverwerking

Sociale netwerken / bloggen

Zakelijke presentaties

Beeldbewerking

Chatten

De resultaten worden gestaafd door onderzoek onder gebruik van

de iPad.

woensdag 20 april 2011 ()

Page 22: Content Follows Context

54%

Sanoma Digital

Hoe lang wordt de iPad gebruikt

In tegenstelling tot de smartphone gebruikt men langer een tablet.

84%30 - 60minuten

+ 60minuten

woensdag 20 april 2011 ()

Page 23: Content Follows Context

Hoe zit het met de browsers?

woensdag 20 april 2011 ()

Page 24: Content Follows Context

Iphone en Android zijn de meest gebruikte mobiele platformen

Flicr - arkland_swe - http://www.flickr.com/photos/arkland_swe/5515420422/sizes/l/in/photostream/

woensdag 20 april 2011 ()

Page 25: Content Follows Context

70%

56%

42%

28%

14%

0%maart 2010

maart 2011

iOS52,24%

Blackberry OS - 4,37%Samsung (2,13%), Sony Ericsson (0,96%), Windows (0,49%)

Top 8 Mobiele OS Nederland

Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103

Android28,85%

Symbian OS - 8,85%

iOS (iPhone,iPod,iPad) is in Nederland nog populair, maar android maakt een opmars.

woensdag 20 april 2011 ()

Page 26: Content Follows Context

50%

40%

30%

20%

10%

0%maart 2010

maart 2011

Statcounter - http://gs.statcounter.com/#mobile_os-eu-monthly-201003-201103

Top 8 Mobiele OS Europa

iOS44,53%

Android - 17,97%Blackberry - 17,17%

Symbian - 11,76%

Sony Ericsson (2,93%), Samsung (2,27%), Playstation and others

In Europa vechten Android en Blackberry om de tweede plek, maar geen windows?!

woensdag 20 april 2011 ()

Page 27: Content Follows Context

IE als browser is misschien groot op de desktop maar op mobiel stelt het niks voor.iPhone en Android (Webkit) zijn op mobiel de spelers.

woensdag 20 april 2011 ()

Page 28: Content Follows Context

70%

56%

42%

28%

14%

0%maart 2010

maart 2011

IE58,22%

Chrome - 14,39%

Top 8 Desktop Browsers Nederland

Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103

Firefox20,15%

In de desktop browser markt is IE populair, maar toont een dalende lijn.

Safari - 5,89%

Opera - 0,99%

woensdag 20 april 2011 ()

Page 29: Content Follows Context

50%

40%

30%

20%

10%

0%maart 2010

maart 2011

iPhone38,76%

Nokia - 7,73%

Top 8 Mobile Browsers Nederland

Statcounter - http://gs.statcounter.com/#mobile_os-NL-monthly-201003-201103

iPod Touch - 13,27%

Blackberry - 4,27%

Op de mobile platforms speelt IE geen rol. Daar domineren iPhone en Android.

Android28,18%

Opera - 3,37%

Samsung (1,68%), Sony PSP (0,48%)

woensdag 20 april 2011 ()

Page 30: Content Follows Context

En hoe zit het dan met de webstandaarden?

woensdag 20 april 2011 ()

Page 31: Content Follows Context

Alle browsers voor zowel Desktop als Mobiel adopteren redelijk goed de nieuwe HTML 5 webstandaarden.

http://www.findmebyip.com/litmus

woensdag 20 april 2011 ()

Page 32: Content Follows Context

Nou ja, bijna alle browsers....

http://www.findmebyip.com/litmus

woensdag 20 april 2011 ()

Page 33: Content Follows Context

50%

40%

30%

20%

10%

0

http://caniuse.com/

HTML 5 support door browsers

HTML

CSS

60%

70%

Inter

net E

xplor

er 9

80%

90%

100%

Firefo

x 4

Safar

i 5

Chrom

e 10

Ope

ra 11

.+

iOS S

afari

4.+

Ope

ra M

ini 5

Ope

ra M

obile

11

Andro

id Br

owse

r 2.3

55%

67%

79%

83%

67%

85% 85% 84%

67%

81%

50%

79%

15%

49%

61%

75%

51%

75%

woensdag 20 april 2011 ()

Page 34: Content Follows Context

Recap

woensdag 20 april 2011 ()

Page 35: Content Follows Context

De gebruiker neemt content op verschillende devices tot zich.

Flicr - yagankiely - http://www.flickr.com/photos/yagankiely/5270152477

woensdag 20 april 2011 ()

Page 36: Content Follows Context

...op het werk, terras, wachtend in de rij voor de kassa of thuis op de bank...

Flicr - Ed Yourdon - http://www.flickr.com/photos/yourdon/5518739750/

woensdag 20 april 2011 ()

Page 37: Content Follows Context

...middels touch of muis.

Flicr - patrickgage - http://www.flickr.com/photos/patrickgage/3321120314/

woensdag 20 april 2011 ()

Page 38: Content Follows Context

Maar één element is overal hetzelfde.

woensdag 20 april 2011 ()

Page 39: Content Follows Context

De content

woensdag 20 april 2011 ()

Page 40: Content Follows Context

De content en manier waarop je gebruiker met deze content interacteert moet zich aanpassen aan zijn context.

woensdag 20 april 2011 ()

Page 41: Content Follows Context

Maar doen we dit niet al jaren?

woensdag 20 april 2011 ()

Page 42: Content Follows Context

Misschien wel, maar de mobiele devices brengen een aantal extra features met zich mee die nieuw of actueler zijn geworden.

woensdag 20 april 2011 ()

Page 43: Content Follows Context

Speed is key, niet iedereen heeft WiFi

Flicr - thomashawk - http://www.flickr.com/photos/thomashawk/2567945057

woensdag 20 april 2011 ()

Page 44: Content Follows Context

Location awareness

Flicr - rnikko - http://www.flickr.com/photos/rnikko/5503321261

woensdag 20 april 2011 ()

Page 45: Content Follows Context

Touch

Flicr - patrickgage - http://www.flickr.com/photos/patrickgage/3321120314/

woensdag 20 april 2011 ()

Page 46: Content Follows Context

Veel variatie in pixels en pixels per inch

http://www.intomobile.com/2010/09/07/idc-smartphone-shipments-grew-55-5-android-the-wild-card/

woensdag 20 april 2011 ()

Page 47: Content Follows Context

In continu wisselende contexten

Flicr - mr_quan_nguyen - http://www.flickr.com/photos/mr_quan_nguyen/4672471227

woensdag 20 april 2011 ()

Page 48: Content Follows Context

Wat betekent dit voor ons als ontwerpers?!

woensdag 20 april 2011 ()

Page 49: Content Follows Context

Zorg voor een adaptief/responsief ontwerp dat naadloos aansluit op de gebruikscontext.

Wees niet pixel-perfect, maar context-perfect.

woensdag 20 april 2011 ()

Page 50: Content Follows Context

Met alle mogelijk en onmogelijkheden van het platform waarop dit plaats vindt in ogenschouw genomen.

woensdag 20 april 2011 ()

Page 51: Content Follows Context

Het ontwerp hoeft niet over alle browsers pixel perfect te zijn!

woensdag 20 april 2011 ()

Page 52: Content Follows Context

Ontwerp met behulp van de laatste webstandaarden, maar zorg voor een alternatief.

Het is echt niet erg dat men op IE 7 geen ronde hoekjes ziet!

woensdag 20 april 2011 ()

Page 53: Content Follows Context

Focus in je ontwerp op de key-features. De rest is clutter.

“Mobile forces you to focus” - LukeW

woensdag 20 april 2011 ()

Page 54: Content Follows Context

Ontwerp voor herbruikbaarheid en consistentie.

woensdag 20 april 2011 ()

Page 55: Content Follows Context

Nog niet genoeg gehad?Mobile First - LukeW (and a lot more of lukeW)http://www.lukew.com/ff/entry.asp?1249

Responsive Design - Ethan Marcottehttp://www.alistapart.com/articles/responsive-web-design/

Rethinking the web - Bryan Riegerhttp://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu

Not a mobile web, merely a 320px-wide one - James Pearcehttp://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one

woensdag 20 april 2011 ()

Page 56: Content Follows Context

Dank voor het lezenLammert Postma - www.lammertpostma.com

woensdag 20 april 2011 ()