Whitepaper responsive design voor een betere ux

  • 81 views
Uploaded on

responsive design: content is presented optimally and device specific. Is your screen small? Then a wide main menu from left to right will be useless. A so called 'Hamburger menu' (not related to cows …

responsive design: content is presented optimally and device specific. Is your screen small? Then a wide main menu from left to right will be useless. A so called 'Hamburger menu' (not related to cows in any manner) will be helpful.

More in: Social Media
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
81
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MOBILE Responsive design: een betere user experience Hoe responsive design bijdraagt aan een consistente ervaring die onafhankelijk is van devices
  • 2. I NHOU D Responsive design voor een betere user experience 2 Welkom in het post-PC tijdperk 3 Ontwikkeling van het mobiele web 4 Andere belangrijke aspecten  4 Responsive webdesign 6 Hoe werkt het?  7 Mobile first 9 Voor- en nadelen van responsive design 10 One site fits all 10 Consistente ervaring en cross platform customer journeys 10 Intensiever ontwikkeltraject 11 Conclusie12 Over Estate 1 13
  • 3. R esp o n s i v e d e s i gn voor een betere use r e xp eri e n c e Nu gebruikers steeds meer het internet op gaan via een smartphone of tablet, beginnen steeds meer bedrijven en merken na te denken over een eenduidige merkbeleving op meerdere soorten apparaten. De oude wereld, waarbij we met een gerust hart konden aannemen dat websitebezoekers naar een scherm keken met een minimale resolutie van 1024x768 pixels dat bediend werd met een toetsenbord en een muis, is niet meer. In de werkelijkheid van vandaag de dag worden websites bezocht via uiteenlopende devices met verschillende resoluties, interactiemogelijkheden en functies. Het wordt steeds lastiger om te voorspellen wat de toekomst verder gaat brengen. Maar we kunnen met vrij grote zekerheid stellen dat het aantal verschillende soorten devices niet minder zal worden. Bedrijven die deze trend negeren, lopen het risico dat bij hun doelgroep het beeld ontstaat dat het merk zich niets van haar klanten aantrekt. Het gevolg: hogere bounce rates, minder conversie, gebruikers die hun negatieve ervaringen online delen en vervolgens snel overlopen naar de concurrent. 2
  • 4. Er zijn verschillende methodes om content aan te bieden aan mobiele gebruikers, elk met zijn eigen voor- en nadelen. Een ontwikkeling die steeds meer zijn waarde bewijst is responsive design. Is het de beste oplossing? Dat ligt er aan. Het is vooral belangrijk om goed te luisteren naar bezoekers en klanten. Want uiteindelijk zijn bedrijven die hun klanten een goede customer experience bieden, succesvoller op het web. We l k o m i n h et post-P C tijdperk Gartner, Google, en Forbes voorspellen dat in 2013 of 2014 de meeste mensen primair via een mobile device online zullen gaan. In Nederland is de marktpenetratie van smartphones al meer dan 60%. 1 op de 3 huishoudens heeft een tablet in huis. Ook de cijfers met betrekking tot mobiel datagebruik laten sinds 2008 een gestaag sterke toename zien. (Cijfers van: Marketingfacts) Grofweg 1 op 4 bezoekers van grote e-commerce sites gebruikt al een smartphone of tablet. En met het teruglopen van PC verkopen, met daartegenover de explosieve groei van de mobile markt, beseffen steeds meer mensen dat we op weg zijn naar het post-PC tijdperk. Daarnaast zien we een opkomst van interactieve TV’s en worden de browsers op gameconsoles zoals de Xbox en Playstation steeds beter. Maar denk ook aan nieuwe concepten als Google Glass. Met het steeds krachtiger worden van mobile devices en de adoptie van deze apparaten door het grote publiek, verwachten steeds meer gebruikers dezelfde mogelijkheden die men met de PC ook heeft. Met dit in het achterhoofd is het goed om na te denken hoe we mobiele gebruikers op een voor hen relevante manier bedienen. De Wii U webbrows e r 3
  • 5. O n t w i k k e l i n g van het mobiele w eb Eigenlijk bestaat het mobiele web niet, er is alleen sprake van toegang tot het web via mobile devices. De eerste telefoons waarmee je het internet op kon, hadden primitieve browsers zonder CSS of JavaScript ondersteuning. Net zoals bij iedere nieuwe ontwikkeling op het internet, begon men na te denken over hoe het nieuwe kanaal ingezet kon worden. Al snel ontstonden initiatieven zoals het .mobi domein en de praktijk om mobiele content apart aan te bieden via een subdomein zoals m.site.com. Of men koos voor server-side technieken zoals browser sniffing en device detection. Daardoor creëerde men dubbele content, wat weer extra werk met zich N o ki a 9 0 0 0 C o m m u n i cat o r : een van d e eer st e t el ef o o n s met een w eb b r o w ser meebracht. Sinds de komst van de eerste iPhone is het web een stuk toegankelijker geworden voor mobiele gebruikers. Voor het eerst beschikten mensen over een mobiele webbrowser die normale webpagina’s vrij goed konden weergeven. Snel volgden andere smartphone merken met vergelijkbare webbrowsers, maar met verschillende schermmaten en -verhoudingen. Niet veel later volgden weer de tablets, waardoor het steeds moeilijker en arbeidsintensiever werd om met de hierboven genoemde technieken te achterhalen welk apparaat de bezoeker gebruikt en wat de mogelijkheden van zijn webbrowser zijn. Met de opkomst van moderne mobiele browsers, met dezelfde mogelijkheden als desktopbrowsers, ontstond de wens voor een meer universele aanpak. An d e r e b e l a ngrijke aspecten Niet alleen verschillen de nieuwe soorten devices qua resolutie en mogelijkheden van de webbrowser, ook de interactie met dit soort apparaten begint steeds meer uiteen te lopen. Touch, tap en swipe zijn inmiddels bekende concepten, maar wat te denken van spraakbesturing of besturing met gebaren? 4
  • 6. Daarnaast speelt de setting waarin de klant de website bezoekt een steeds belangrijkere rol. Is de bezoeker onderweg en gebruikt hij een smartphone? Zit hij thuis op de bank met een tablet of gebruikt hij zijn interactieve TV met een wireless keyboard? Dit soort scenario’s zijn van invloed op bv. de leesbaarheid. Bij mobiel gebruik buiten, zijn lichtomstandigheden niet te voorspellen en een tabletgebruiker kijkt op een andere afstand naar een website dan iemand die via zijn game-console het web op gaat. Een ander belangrijk aandachtspunt is de snelheid en beschikbaarheid van de verbinding met het internet. Wat lange tijd geen issue meer was in Nederland vanwege de hoge penetratie van kabelinternet en ADSL, is nu weer aan de orde. Een gebruiker kan onderweg zijn en gebruik maken van een 3G netwerk met een databundel die bijna op is. Of kijk naar het verschil tussen iemand die gebruik maakt van een drukbezet openbaar WiFi netwerk of zijn eigen snelle WiFi thuis. Daarom is het ook goed om na te denken hoe, waar en wanneer klanten een website gebruiken, zodat de ervaring is afgestemd op hun voorkeuren. Is het een site waar mensen vooral taakgericht bezig zijn, zoals het snel opzoeken van openingstijden? Is het meer een magazine waar men graag voor gaat zitten? Hoe meer een website aansluit bij de persoonlijke levenssfeer van de klant, hoe succesvoller. Door goed te kijken naar de bezoeker zal de site uiteindelijk meer conversie opleveren, maar ook bijdragen aan een betere merkbeleving. 5
  • 7. R esp o n s i v e we b desi gn In 2010 schreef Ethan Marcotte op A List Apart, een toonaangevend blog in de internetindustrie, een artikel onder de naam “Responsive Web Design”. Daarin stelde hij een nieuwe zienswijze voor op het gebied van webdesign en -development. In het artikel draaide hij de praktijk van het optimaliseren voor een specifiek device, met specifieke resolutie en met een specifieke browser, 180 graden om. In plaats daarvan stelde hij een methode voor waarbij je juist geen aannames maakt. De layout van websites zou zich aan moeten kunnen passen aan vrijwel ieder willekeurig apparaat. Dit is een fundamentele verandering. Gingen we vroeger uit van aannames over hoe de klant de website bezocht, tegenwoordig kan die aanname eigenlijk niet meer E en kl ei n e sel ect i e m o b i l e d evi ces gemaakt worden. Marcotte stelt dat design voor het web afwijkt van de traditionele designdisciplines, omdat de onderliggende technieken en mogelijkheden in een staat van constante verandering zijn. Wat twee jaar geleden nog gebruikelijk was, is het nu niet meer. Inzichten en technieken die we vandaag inzetten, zijn morgen al waarschijnlijk weer aangescherpt of zelfs achterhaald. Vandaar dat de behoefte ontstond voor een aanpak die dit principe omarmt. Hoewel verandering een constante is in de internetwereld, moet responsive design niet gezien worden als een hype. Het is een visie voor de lange termijn en een vrij grote en fundamentele omslag in hoe designers denken over user experience. Binnen het totale spectrum aan mogelijkheden die er zijn om een consistente user experience te bereiken op meerdere devices, is responsive design een enorm sterk concept dat ondertussen breed gedragen wordt door de community van webprofessionals. Dat het een blijvend concept is, blijkt ook uit het feit dat browserdevelopers en W3C (de mensen die de standaarden voor HTML bedenken) samenwerken aan nieuwe standaarden en technieken die verdere ontwikkeling mogelijk maken. 6
  • 8. H o e w e r k t h et? Met nieuwe mogelijkheden van moderne browsers kan de layout van een webpagina worden geoptimaliseerd voor verschillende scenario’s. Het is bijvoorbeeld mogelijk om elementen te herschikken en zich te laten aanpassen naar een bepaalde breedte. De volgende drie elementen maken dit mogelijk: • Media queries • Flexible grids • Responsive images Media queries Een CSS techniek waarbij men op basis van de schermafmetingen de layout aanpast. Dit maakt het mogelijk om een webpagina geschikt te maken voor verschillende schermresoluties. In wezen zeg je tegen de browser: “als ik de pagina op een smartphone bekijk, toon dan een eenkoloms lay-out, maar op een tablet wil ik graag twee kolommen zien in portrait mode en drie kolommen in landscape mode” Maar het gaat verder. Het is bijvoorbeeld mogelijk om elementen te tonen, te verbergen, te vervangen of te herschikken volgens een bepaalde prioriteit. Bijvoorbeeld: op de desktop variant toon je een mega dropdown menu, maar op een smartphone een eenvoudige variant, die je aanroept met een icoon. Dat maakt het ook mogelijk om gebruik te maken van functies van het device. Vrijwel iedere smartphone beschikt bijvoorbeeld over GPS, wat het mogelijk maakt om bijvoorbeeld de dichtstbijzijnde vestiging 7 M et m ed i a q u er i es w o r d t d e l ayo u t vo o r d e w eb si t e van het Z eeu w s M u seu m g eo p t i m al i seer d p er d evi ce
  • 9. te tonen op basis van je locatiegegevens. Maar ook het vervangen van het telefoonnummer door een button waarmee je direct kunt bellen is een eenvoudige, maar effectieve oplossing. Flexible grids Een goed design kan niet zonder een grid. En hoewel een grid normaal gesproken een gefixeerd stramien is, bij responsive design schikt het grid zich naar de beschikbare ruimte. Bijvoorbeeld: een Samsung Galaxy heeft een andere resolutie dan een iPhone. Ze behoren beide tot dezelfde categorie van small screen devices, maar wijken onderling nog behoorlijk af. Met flexible grids wordt het mogelijk om zo optimaal mogelijk deze ruimte in te vullen door het grid waarop de layout is gebaseerd te laten rekken en strekken. Responsive images Met responsive images bedoelen we de mogelijkheid om afbeeldingen op maat aan te bieden. Snelheid van een website is nog altijd enorm cruciaal. En omdat je eigenlijk geen aannames kan maken over het type verbinding waarover een mobiele gebruiker op dat moment beschikt, is het noodzakelijk dat content zo datavriendelijk mogelijk wordt aangeboden. Daarom bestaan er momenteel een aantal technieken (meestal gebaseerd op JavaScript) die meerdere varianten van dezelfde afbeelding kunnen tonen voor de verschillende schermformaten. Een smartphone krijgt dan een kleine afbeelding te zien, terwijl op een desktop pc de grote variant wordt geladen. Op dit moment werken de browserfabrikanten en W3C hard aan een standaard hiervoor. 8
  • 10. Mobile first Een populaire methode van ontwerpen voor responsive design noemt men mobile first. Het wil niet meer zeggen dan dat je de smartphone variant als uitgangspunt neemt. Door gebruik te maken van technieken als progressive enhancement of gracefull degradation kun je ervoor zorgen dat een website op zoveel mogelijk devices werkt. De site zal niet altijd dezelfde functionaliteit bieden, maar is in ieder geval bruikbaar en ziet er nog goed uit. Mobile first dwingt je goed na te denken over wat belangrijk is voor de klant en hem te helpen met een zo gebruiksvriendelijk mogelijke website. Met deze methode hou je rekening met de beperkte schermruimte, touchnavigatie en langzamere dataverbindingen waarbij je betaalt voor dataverkeer. Daarnaast kun je de ervaring van gebruikers verrijken met de mogelijkheden die moderne smartphones vrijwel allemaal standaard hebben, zoals GPS, de camera, het compas en de acceleratiemeter. Met andere woorden, je legt een sterke focus op de gebruikerservaring. Wat weer leidt tot een efficiënte, compacte site die is ontdaan van allerlei zaken die vaak alleen maar afleiden van waar het werkelijk om gaat. Een site die is ontworpen volgens het mobile first principe, helpt de gebruiker dan ook sneller naar zijn doel en dat is beter voor conversie en de algehele beleving. Maar mobile first is ook lastig, vanwege het feit dat je niet kan voorspellen vanuit welke context of onder welke omstandigheden de bezoeker een website bezoekt. Is hij onderweg of zit hij thuis op de bank? Is mobiel gelijk aan onderweg? Onderzoek toont aan dat dat niet altijd het geval is. 2/3 van mobiele aankopen wordt nl. thuis vanaf de bank gedaan. Responsive design is een prachtige techniek, maar vrij complex om goed te doen vanuit engagement perspectief. Het gaat verder dan alleen schermafmetingen en daarom is het juist bij responsive design belangrijk om je bezoekers en hun behoeften goed te kennen. Daarom is er bij responsive design juist behoefte aan user research en user centered design. 9
  • 11. Voo r- e n n a d e l e n van responsi ve desi g n Een website die gemaakt is volgens het responsive design principe draagt bij aan een betere user experience, maar het biedt geen garantie. Sterker nog: responsive design is een typisch voorbeeld van easy to learn, difficult to master. Maar de voordelen wegen over het algemeen op tegen de nadelen. O n e s i t e f i t s all Omdat je uitgaat van één site voor zowel mobiele als desktopgebruikers, biedt dat een aantal grote voordelen voor beheer en marketing van de site: • Groter bereik met één website. • Geen dubbele content, dus makkelijker onderhoud. • Mobile first houdt content gefocused en daardoor makkelijker te onderhouden • Uniforme URL structuur. Dat maakt het een stuk gebruiksvriendelijker om websites te vermelden in marketing­ itingen. Ook wanneer links gedeeld worden via social media ben je er zeker van dat mensen altijd u een goede experience krijgen. • SEO vriendelijker dan aparte sites. • Geen versnipperde SEA campagnes voor aparte sites. • Geen aparte statistieken en rapportages per site. • Geen noodzaak voor een aparte strategie voor mobiel. • Goede ondersteuning door moderne browsers. En dat wat niet officieel wordt ondersteund, kan vaak opgelost worden met vervangende technieken. Dat alles maakt responsive design vooral efficiënt qua beheer en uiteindelijk kostenbesparend. Er zijn geen extra inspanningen vereist voor een aparte mobiele strategie. Co n s i s t e n t e er varing en cross pla tfor m c us tomer jour ney s Doordat je een consistente ervaring aanbiedt voor alle soorten gebruikers, heeft dat een positieve invloed op conversie. De hedendaagse gebruiker zal een website vaak op meerdere devices bekijken. Doordat je alle devices 10
  • 12. bedient met één website zal hij makkelijk zijn weg kunnen vinden omdat hij bekend is met de structuur en inhoud (ook al wordt die op een wat andere manier gepresenteerd). Dat houdt in dat mensen hun customer journey kunnen voortzetten op een ander device. Dat noemen we ook wel sequential browsing. Neem bijvoorbeeld het volgende scenario. Onderweg scant iemand met zijn smartphone een QR code bij een advertentie. Zijn interesse is gewekt en hij slaat de site op in zijn bookmarks die worden gesynchroniseerd met de browser op zijn tablet of desktop pc. ’s Avonds op de bank pakt hij zijn tablet en gaat zich verder oriënteren. Hij kan dan verder gaan met de pagina waar hij was gebleven. Met een aparte website voor smartphones zou deze ervaring onderbroken worden. Onder z oek naar ge d r a g b ij a a n k o p e n v ia in t e r n e t o n d er A n er i kaan se co n su m en t en . B r o n ; G o o g l e I n t e n s i e v e r ontw ikkeltraject Een responsive site is complexer om te ontwikkelen dan een “normale” website. Er zal extra tijd en aandacht moeten worden besteed aan de strategie, het design en het bouwen van de site. Het ombouwen van een bestaande site is mogelijk, maar vaak een stuk minder effectief. Dit vergt een grotere investering dan men gewend is voor het ontwikkelen van één site. Maar als het wordt afgewogen tegen het ontwikkelen van aparte site voor dekstop computers en daarnaast een losse mobile-only site, dan pakt het over het algemeen voordelig uit. Zeker als je rekening houdt met de kosten voor onderhoud en marketing van aparte sites. 11
  • 13. C o n clu s i e Responsive design is een verzameling technieken waarmee via één website een consistente ervaring kan worden bereikt op meerdere soorten devices. Dit biedt voordelen voor zoekmachines en links die worden gedeeld werken altijd zoals het is bedoeld. Responsive design maakt intelligent gebruik van bestaande technieken die door vrijwel alle moderne browsers worden ondersteund. Daardoor is het mogelijk layouts aan te passen aan het scherm en content op maat aan te bieden. Een responsive design toont afbeeldingen op maat, zodat er geen overhead ontstaat in dataverbruik. Dat draagt bij aan optimale laadtijden. Op het vlak van user experience is er geen noodzaak meer om een apart design te maken voor ieder nieuw apparaat, of voor iedere doelgroep. Dat houdt in dat we geen device-specifieke ervaringen tot in het oneindige moeten blijven creëren. In de plaats daarvan ontwerpen we sites die werken op ieder apparaat. Of iemand de website nu op een desktop pc, tablet of smartphone bekijkt, ze zijn allemaal onderdeel van dezelfde cross platform ervaring. Misschien alleen in een andere context. Maar responsive design is geen oplossing op zich. Onderzoek naar de ervaringen en verwachtingen van gebruikers blijft enorm belangrijk om aan te sluiten bij de wensen en gebruiken van klanten. Een goede online ervaring zorgt voor terugkerende klanten en dat is uiteindelijk goed voor conversie. 12
  • 14. O ver E s t a t e Estate is een full service internetbureau dat online kennis en middelen breed inzet om de doelstellingen van haar klanten te bereiken. Steeds op een manier die de verwachtingen overtreft. Onze expertise • Adviestrajecten van strategie, concept en design tot aan realisatie, beheer en onderhoud • Sitecore CMS implementaties • Sitefinity CMS implementaties • Online marketing • Social media strategie • Social media advertising M e e r w e t e n? Neem gerust contact met ons op, we helpen u graag verder.  www.estate.nl  Estate Internet  info@estate.nl Sportweg 30-32  013 - 535 04 35 5037AC Tilburg 13