Content Follows Context

Post on 18-Dec-2014

2.718 views 4 download

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

Content follows ContextLammert Postma - www.lammertpostma.com

woensdag 20 april 2011 ()

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

woensdag 20 april 2011 ()

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 ()

50%is een smartphone

GfK Retail and Technology

2010 25%

2011

Verkoop mobiele telefoonsNederland

2015 75%

woensdag 20 april 2011 ()

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 ()

“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 ()

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 ()

“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 ()

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 ()

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 ()

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 ()

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 ()

“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 ()

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

“Focussen op desktop is niet voldoende.”

woensdag 20 april 2011 ()

Hoe gebruikt men deze devices?

woensdag 20 april 2011 ()

Smartphones gebruikt men voor directe contentconsumptie in verschillende contexten.

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

woensdag 20 april 2011 ()

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 ()

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 ()

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 ()

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 ()

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 ()

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 ()

Hoe zit het met de browsers?

woensdag 20 april 2011 ()

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 ()

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 ()

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 ()

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 ()

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 ()

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 ()

En hoe zit het dan met de webstandaarden?

woensdag 20 april 2011 ()

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

http://www.findmebyip.com/litmus

woensdag 20 april 2011 ()

Nou ja, bijna alle browsers....

http://www.findmebyip.com/litmus

woensdag 20 april 2011 ()

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 ()

Recap

woensdag 20 april 2011 ()

De gebruiker neemt content op verschillende devices tot zich.

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

woensdag 20 april 2011 ()

...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 ()

...middels touch of muis.

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

woensdag 20 april 2011 ()

Maar één element is overal hetzelfde.

woensdag 20 april 2011 ()

De content

woensdag 20 april 2011 ()

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

woensdag 20 april 2011 ()

Maar doen we dit niet al jaren?

woensdag 20 april 2011 ()

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

woensdag 20 april 2011 ()

Speed is key, niet iedereen heeft WiFi

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

woensdag 20 april 2011 ()

Location awareness

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

woensdag 20 april 2011 ()

Touch

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

woensdag 20 april 2011 ()

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 ()

In continu wisselende contexten

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

woensdag 20 april 2011 ()

Wat betekent dit voor ons als ontwerpers?!

woensdag 20 april 2011 ()

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

Wees niet pixel-perfect, maar context-perfect.

woensdag 20 april 2011 ()

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

woensdag 20 april 2011 ()

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

woensdag 20 april 2011 ()

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 ()

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

“Mobile forces you to focus” - LukeW

woensdag 20 april 2011 ()

Ontwerp voor herbruikbaarheid en consistentie.

woensdag 20 april 2011 ()

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 ()

Dank voor het lezenLammert Postma - www.lammertpostma.com

woensdag 20 april 2011 ()