Inhoudsopgave Hoofdstuk #1 1.1 Inleiding
–
nog schrijven wanneer de rest af is!
1.2 Achtergrond informatie 1.3 Probleemstelling 1.4 Doelgroep 1.5 Onderzoeksmethode 1.6 Doelstelling 1.7 Onderzoeksvraag en deelvraag Hoofdstuk #2 User experience en context 2.1 Wat is User experience design? 2.2 User experience design disciplines - Information Architecture - Interaction Design - Usability Engineering - Visual Design - Prototype Engineering 2.3 User Experience modellen -De drie cirkels van informatie architectuur -The User experience Honeycomb - Restructuring the User Experience Honeycomb 2.4 Elementen van User Experience Design - De elementen 2.5 User experience heuristics 2.6 Mobiele user experience en user context - Mobiel - Context -Beperkingen -Voordelen tegenover desktop -Nadelen tegenover desktop -Ontwerpen voor mobiel 2.7 Gebruik van mobiele apparaten Conclusie
Hoofdstuk #3 Native apps, web apps en responsive design 3.1 Voordelen en nadelen van Native applicaties
3.2 Voordelen en nadelen van Webapplicaties 3.3 Mobiele web app frameworks 3.4 Responsive design 3.5 Mobile First responsive web design Conclusie
Hfdst#1 Achtergrond informatie EDG Media is opgericht in 1992 om knelpunten in de informatievoorziening in het onderwijs op te lossen. Het doel is alle schakels uit de onderwijsketen te verbinden: professionals, ouders en scholieren. Niet alleen met relevante informatie, maar ook ervaringen, projecten en meningen uitwisselen. Op elke school in het voortgezet onderwijs en op alle basisscholen en kinderdagverblijven in Nederland is er een magazine van EDG Media te vinden. Naast de magazines bestaan er ook websites, webshops en lespakketten, ook tijdens evenementen. EDG Media is een gesprekspartner voor beleidsontwikkeling en communicatie in het onderwijs. Dit doet EDG Media voor opdrachtgevers zoals ministeries, universiteiten, taakorganisaties, cito, kennisnet en NTR. Voor ouders is er het tijdschrift PrimaOuders.nl en de bijbehorende website. Hier worden de ouders geïnformeerd over ontwikkeling, opvoeding, onderwijs, ontspanning en opvang van hun kinderen. Het fysieke magazine wordt verspreid via diverse kanalen: kinderdagverblijven buitenschoolse opvang, basisscholen en huiswerkinstituten. Probleemstelling EDG Media is een bedrijf dat magazines aanbied en websites beheerd die studie gerelateerd zijn. Door de ontwikkeling van de smartphone zien zij kansen om studie gerelateerde zaken ook als mobiele applicatie aan te bieden. EDG Media heeft ervaring met het maken en onderhouden van magazines en websites maar mobiel is een nieuwe tak die het bedrijf graag wil verkennen. Op de website is het mogelijk om informatie over een opleidingen/opendag te vinden en de opleiding te beoordelen om studenten te helpen bij een studiekeuze. Er zijn ook lesideeën op de website en in het magazine die de docent of leerling kan gebruiken om een les over studiekeuze te geven of aan te vragen. Het idee is om een print versie van een hulp formulier te maken voor leerlingen die opendagen bezoeken. De mogelijkheden van papier zijn niets vergeleken met die van een mobiele telefoon. Daarom wil EDG Media graag weten wat een mobiel kan toevoegen en waar de mogelijkheden liggen om in de toekomst verder te gaan in het aanbieden van mobiele diensten. Voor onderwijsprofessionals is er het magazine PrimaOnderwijs.nl en de bijbehorende website met onderwijsnieuws. Scholieren worden zowel op school als thuis geholpen met loopbaanoriëntatie, examens en huiswerk. Scholieren kunnen terecht bij de offline en online media, zoals de website examens.nl, collegent.nl en TKMST.nl en het daaraan verwante magazine, de gids en de test. Doelgroep TKMST.nl en het bijbehorende magazine zijn gericht op de doelgroep vo-scholieren. Voortgezet onderwijs scholieren variëren in leeftijd van 12 jaar tot 20 jaar. In Nederland ga je na de basisschool naar het voortgezet onderwijs. Het voortgezet onderwijs kent vier opleidingen: Praktijkonderwijs
tussen 12 en 20
Voorbereidend beroepsonderwijs Hoger algemeen voortgezet onderwijs Voorbereidend wetenschappelijk onderwijs
van 12 tot 16 van 12 tot 17 van 12 tot 18
De doelgroep waar de applicatie op gericht is zijn de voortgezet onderwijs scholieren die een vervolg opleiding gaan kiezen. Dit zijn de leerlingen in de laatste klassen van het voortgezet onderwijs op elk niveau. Onderzoeksmethode Ik begin mijn afstudeeropdracht met het doen van onderzoek. Ik wil erachter komen hoe de open dagen worden aangeboden op de website van TKMST en of er ideeën, kansen en concurrentie is met betrekking tot open dagen. Om nog meer kennis te vergaren over User Experience Design zal ik ook literatuuronderzoek doen, dit zal voortkomen uit het lezen en verzamelen van gerelateerde boeken, artikelen, websites, blogs en fora. Ook ga ik onderzoeken wat de verschillende opties en platformen zijn om een applicatie voor de mobiele telefoon te maken. Daarna wil ik mijn concept uitwerken in een prototype. Doelstelling Mijn scriptie is bedoeld om als om als richtlijn te gebruiken bij het bedenken en uitwerken van een applicatie voor een smartphone of andere touch devices. Het uitgangspunt is dat de lezer geen amateur is maar bekend is met het vakgebied van webdesigner en de overstap wil maken naar applicaties voor touch devices net zoals het bedrijf waar ik mijn afstudeeropdracht mag doen. De focus van de opdracht zal vooral liggen op de user experience en het ontwerp van de mobiele applicatie. Nadat ik onderzocht heb wat de mogelijkheden zijn wil ik me richten op het functioneel ontwerp van de mobiele applicatie. Met het onderzoek wil ik advies geven aan EDG Media, een concept neerzetten en uitwerken in een interactief prototype. Er moet rekening gehouden worden met de gebruikers maar ook met de stakeholders. Onderzoeksvraag en deelvraag
Hoofdvraag Hoe kan ik een mobiele open dagen applicatie maken voor EDG en de lezers van TKMST?
Deelvragen -
Wat is de user context en user experience op een pc en een mobiele telefoon?
-
Voor en nadeel native apps, web apps en responsive design?
-
Needs en wants gebruikers van het product?
#2 User experience en user context
Wat is User experience design? Om te beginnen wil ik uitleggen wat User Experience Design (UX) is. User Experience is de manier waarop een persoon zich voelt over het gebruik van een product, systeem of service. User Experience benadrukt de ervaringsgerichte, affectieve, zinvolle en waardevolle aspecten van menscomputer interactie en product eigendom. Het bevat ook een persoonlijke waarneming van de praktische aspecten zoals nut, gebruiksgemak en de efficiëntie van het systeem. User Experience is subjectief, omdat het gaat over een individuele gevoelens en gedachten over het systeem. http://en.wikipedia.org/wiki/User_experience Er zijn een hoop personen en theorieën over wat User Experience Design is en hoe het werkt. User Experience Design wordt vaak gebruikt in combinatie met termen als Interaction Design, User Centered Design, Information Architecture en Visual Interface Design. Dit klopt gedeeltelijk, er zijn raakvlakken met andere vakgebieden. User Experience Design is een overkoepelend, holistisch vakgebied waarbinnen de verschillende disciplines samenkomen. User experience design is een holistische, multidisciplinaire aanpak voor het ontwerpen van gebruikersinterfaces voor digitale producten, het definiëren van de vorm, gedrag en content. User experience design integreert, interaction design, industrial design, information architecture, information design, visual interface design, user assistance design en user-centered design en zorgt voor samenhang en consistentie in al deze ontwerp dimensies. Pabini Gabriel-Petit http://uxmatters.com/glossary/ What is User Experience?
User experience design diciplines De afbeelding laat de verschillende vakgebieden zien die samen de User Experience Design vormen. Een User Experience Designer is iemand die meerdere diciplines beheerst en deze weet samen te voegen om de User Experience te vormen.
Disciplines of User Experience Design. Saffer, D.
Information Architecture Information architecture gaat over hoe mensen cognitieve informatie verwerken, het vakgebied kan van toegevoegde waarde zijn bij elk product waarbij het vereist is dat de gebruiker de gepresenteerde informatie begrijpt. Dit geld voor informatie georiënteerde sites zoals informatie websites voor bedrijven maar kan een nog grotere impact hebben bij functionaliteit georiënteerde producten zoals een mobiele telefoon. Information architecture problemen vereisen het creëren van gecategoriseerde schema’s die overeenstemmen met de eigen doelstellingen voor de site, de gebruikers eisen en de content die word opgenomen in de site. Gecategoriseerde schema’s kunnen op twee manieren gecreëerd worden van top down of van bottom up. Interaction Design Interaction design houdt zich bezig met het beschrijven van mogelijke gebruikers gedrag en het definiëren hoe het systeem zich zal aanpassen en reageren. Programmeerders hebben zich voorheen gericht op twee aspecten van software: Wat doet het? En hoe het dat doet? De aanpak was toen
gericht op wat werkt het best met de techniek die beschikbaar is. Tegenwoordig wordt er gekeken naar hoe mensen de techniek gebruiken en word software ontworpen zodat het, het best werkt voor mensen en niet wat het best werkt voor de beschikbare techniek. Met behulp van persona’s, flowcharts en wireframes kan een Interaction Designer ontwerpkeuzes beargumenteren en vastleggen. Een interaction designer houd zich vooral bezig met de details van pagina-elementen, presentatie, en page-flows. Usability Engineering Usability is een belangrijk onderdeel van user experience design. Wanneer iets gebruiksvriendelijk is zorgt het voor een intuitieve manier om zonder problemen een doel te kunnen bereiken. Een usability engineer houdt zich bezig met het beoordelen van de bruikbaarheid van een site of product met behulp van de testmethodieken. Aan de hand van deze beoordelingen en testen kan er een aanbeveling worden gedaan waarop bepaalde onderdelen verbeterd kunnen worden. Visual Design Visual design draait om de communicatie. Een visual designer is in staat een site of product vorm te geven zodat de merkwaarden van het bedrijf word overgebracht en de juiste emotie word opgeroepen. Het belangrijkste is dat de boodschap visueel vertaald word. User Experience design gaat over hoe het product overkomt op de gebruiker daarin is visual design een onmisbare competentie in het ontwerpproces. Prototype Engineering Een prototype engineer levert het prototype. Met het prototype kunnen gebruikerstest afgenomen worden die voor waardevolle inzichten kunnen zorgen. De competentie zegt dat je in staat moet zijn een prototype op te leveren die voldoet aan de eisen. Als prototype engineer moet je op de hoogte zijn van bestaande en gebruikte UI frameworks, UI patterns en UI components. http://www.uxmatters.com/mt/archives/2007/11/the-five-competencies-of-user-experience-design.php
User Experience modellen De drie cirkels van informatie architectuur Het belangrijkste wat in alle theorieën terug komt is de gebruiker staat centraal. Het diagram van de drie cirkels laat de balans zien tussen business goals en context, user needs en gedrag en de mix van content Elke gebruiker is anders. Denk daarbij aan leeftijd, interesses en kennis. Ook de context waarin de gebruiker interacteert met de content kan constant veranderen. Zit de gebruiker binnen aan een bureau in een donkere ruimte of zit de gebruiker in de bus terwijl de zon naar binnen schijnt. Ook de content kan variëren en kan vragen om interactie. http://semanticstudios.com/publications/ semantics/000029.php – Morville, P. on Semantic S tudios, 06/2004
Peter Morville’s - The Three Circles of Information Architecture
Het diagram is gecreëerd met Information Architecture in gedachten maar is net zo toepasbaar op het uitleggen van User Experience Design. The User Experience Honeycomb The User Experience Honeycomb illustreert de facetten van User Experience. Dit helpt anderen begrijpen waarom er verder gekeken moet worden dan usability en de noodzaak om prioriteiten te stellen. Is het belangrijk om desirable of accessible te zijn. De waarheid is, het hangt af van een unieke balans van context, content en gebruikers, en de afweging beter expliciet dan onbewust te maken. The User Experience Honeycomb ondersteunt een modulaire benadering van webdesign. Er moet een site verbeterd worden, maar er is geen budget en tijd voor een complete revisie. Waarom niet proberen een gericht redesign te maken aan de hand van de Stanford Guidelines for Web Credibility als bron voor het evalueren en verbeteren van de geloofwaardigheid van de website.
Elk facet van The User Experience Honeycomb dient als spiegel, het transformeren van hoe we zien en wat we doen, en stelt ons in staat om te verkennen buiten de conventionele grenzen.
Peter Morville - The User Experience Honeycomb
Useful (Nuttig) Als beoefenaars, kunnen we niet tevreden zijn om te schilderen binnen de lijnen, getrokken door managers. We moeten creatief zijn om producten en systemen nuttiger te maken. En onze diepgaande kennis toepassen om innovatieve oplossingen te definiëren die nuttiger zijn. Usable (Bruikbaar) Gebruiksgemak blijft van essentieel belang, en toch hebben de interface centered methoden en perspectieven van mens-computer interactie geen betrekking op alle dimensies van webdesign. Usability is noodzakelijk maar niet voldoende. Desirable (Wenselijk) De zoektocht naar efficiëntie moet worden getemperd door een waardering voor de kracht van waarde van het beeld, identiteit, merk en andere elementen van Emotional Design. Findable (Vindbaar) Er moet worden gestreefd naar het ontwerpen van bestuurbare websites en lokaliseerbare objecten, zodat gebruikers kunnen vinden wat ze nodig hebben. Accesible (Toegankelijk)
Net als gebouwen, liften en hellingbanen hebben, moeten websites toegankelijk zijn voor mensen met een handicap. Vandaag de dag is het een goede zaak en ethisch verantwoord om te doen. Uiteindelijk zal het een wet worden. Credible (Geloofwaardig) Gebruikers moeten geloven wat we ze vertellen en wat we ze aanbieden. We kunnen dit besturen door de juiste design elementen te gebruiken die van invloed zijn op de gebruikers vertrouwen. Valuable (Waardevol) De site moet toegevoegde waarde leveren aan onze sponsors. Voor non-profit organisaties, de user experience moet de missie bevorderen. Voor for-profit, moet het bijdragen aan de onderste regel en het bevorderen van de klanttevredenheid. http://semanticstudios.com/publications/ semantics/000029.php – Morville, P. on Semantic S tudios, 06/2004
Restructuring the User Experience Honeycomb The User Experience Honeycomb is al redelijk oud en niet gestructureerd. Magnus Revang heeft daarom de Honeycomb geherstructueerd en de uitleg bij de verschillende facetten simpel en makkelijk te begrijpen gemaakt.
Findability (Vindbaarheid) “Je kunt niet gebruiken wat je niet kan vinden” Accesibility (Toegankelijkheid)
“Je kunt niets gebruiken waar je geen toegang tot hebt” Desirability (Wenselijk) Je ziet de interface voor je het gebruikt. Usability (Bruikbaarheid) Het moet mogelijk zijn iets te gebruiken om er iets mee te doen. Crediblity (Geloofwaardigheid) Je moet iets vertouwen voor je je verbindt tot het oplossen van een taak met de dienst. Usefulness (Nuttigheid) Een gebruiker vormt een mening over de nuttigheid wanneer de site wordt verlaten, hopelijk na het afronden van de taak. Value (Waarde) Waarde is een resultaat van User Experience en niet een facet. De modellen kunnen gebruikt worden tijdens het ontwerp proces. De modellen zijn vooral bedoeld als bron tijdens het proces. Zit je vast of weet je het even niet meer kun je altijd de modellen erbij pakken om te zien of je op de juiste weg bent. http://userexperienceproject.blogspot.com/2007/02/ restructuring-user-experience-honeycomb.html – Revang, M. on User Experience Project
Elementen van User Experience Design Het User Experience design-proces gaat over het zorgen dat er geen aspect van de ervaring van de gebruiker met het product gebeurt zonder je bewuste intentie. Dit betekent dat er rekening gehouden moet worden met alle mogelijkheden van elke actie die de gebruiker waarschijnlijk neemt en te begrijpen verwachtingen van de gebruiker bij elke stap door het proces. Dit klinkt als een hoop werk en in sommige opzichten is dat het ook. Door het verdelen van de taak in verschillende elementen begrijpen we het geheel ook beter. Alle beslissingen over hoe een site (product) eruit ziet, zich gedraagt en wat je met het resultaat kunt doen resulteert in de User Experience. The Elements of User Experience model is vooral bedoeld voor User Experience op het web. Wanneer we praten over User Experience, hebben we het over deze vijf vlakken van het model The Elements of User Experience van Jesse James Garrett. Het doel is om elk onderdeel van de User Experience op te delen in vijf vlakken zodat er per vlak gewerkt kan worden. Wanneer de strategie bepaald word hoef je nog niet over het uiterlijk na te denken.
Surface plane Op het oppervlak zie je een aantal series van website pagina’s, gemaakt van afbeeldingen en tekst. Een aantal van de afbeeldingen kun je op klikken en voeren een bepaalde functie uit. Een aantal van de afbeeldingen zijn illustraties zoals fotografie van een product dat te koop is of het logo van het bedrijf of website.
Skeleton plane Onder het oppervlak zit het skeleton van de site. De plek met knoppen, controles, foto’s en blokken tekst. Het skeleton is ontworpen om de indeling van een aantal elementen te optimaliseren voor maximaal effect en efficiëntie. Zodat je het logo en de knoppen en functies altijd kan vinden als je deze nodig hebt.
Structure plane Het skeleton is de uitdrukking van de meer abstracte structuur van de site. Het skeleton definieert de plaatsing van de interface elementen. De structuur definieert hoe gebruikers naar die pagina zijn gekomen en waar ze heen kunnen gaan als ze klaar zijn op de bezochte pagina. Het skeleton mag dan de plaatsing van navigatie elementen definiëren waarmee de gebruiker door de categorieën kan browsen . De structuur definieert wat die categorieën zijn.
Scope plane De structuur definieert de manier waarop de verschillende kenmerken en functies van de site gezamenlijk passen. Wat die kenmerken en functies zijn vormt de scope van de site.Bijvoorbeeld veel sites onthouden na een bestelling het afleveradres zonder dat deze opnieuw ingevoerd hoeft te worden. Of dat of elk ander kenmerk erin zit is een kwestie van scope.
Strategy plane De scope word fundamenteel beslist door de strategie van de site. Deze strategie bevat niet alleen wat de mensen die de site bezitten met de site willen maar ook wat de gebruikers met de site willen doen. De strategie doelstelling voor een webshop is simpel: gebruikers willen producten kopen en de webshop wil producten verkopen. Andere doelstellingen zoals de rol van adverteren en content die de gebruikers op de site plaatsen en hoe dat inspeelt op het businessmodel zijn moeilijker te verwoorden. Book: The Elements of User Experience by Jesse James Garrett 2011
The Elements of User Experience by Jesse James Garrett
The Elements of User Experience by Jesse James Garrett
In dit model zijn alle verwarrende termen in de elementen geplaatst. Door elk element op te delen in component elementen, is het eenvoudiger te zien hoe alle stukjes in elkaar passen die uiteindelijk de volledige User Experience vormen.
Strategy plane (Strategie) product objectives and user needs De User Needs zijn de doelen voor het product die afkomstig zijn van buiten de organisatie. Specifiek zijn dat de mensen die het product gebruiken. De User Needs is het begrijpen van de gebruikers wat ze van ons product willen en hoe dat aansluit bij andere doelen die ze hebben. Tegenover de behoefte van de gebruikers staan de organisaties eigen doelstellingen. Deze Product Objectives kunnen Business Goals zijn zoals meer verkopen dit jaar of andere soort doelen zoals kiezers informeren over kandidaten bij de volgende verkiezing.
Scope plane (Toepassingsgebied) Functional specifications and content requirments Aan de functionele kant is de Strategy vertaald naar Scope door het creëren van Functional Specifications van het product.. Dit zijn de functionaliteiten en features die terug komen in het product. Aan de informatie kant van het product neemt Scope de vorm aan van Content Requirements. Dit is een beschrijving van de verschillende elementen die nodig zijn.
Structure plane (Structuur) Interaction design and information architecture De Structure geeft de structuur aan van de functionele kant doormiddel van Interaction Design, waarin bepaald word hoe het system zich gedraagt als reactie op de gebruiker. Aan de informatie kant is de Information Architecture de inrichting van content elementen om het menselijke begrip te vergemakkelijken.
Skeleton plane (Skelet) Interface design, navigation design and information design Het Skeleton is opgedeeld in drie onderdelen. Aan beide kanten is Information Design van toepassing. Dit is het presenteren van informatie op een manier die eenvoudig te begrijpen is. Aan de functionele kant bevat het Skeleton ook Interface Design, het inrichten van interface elementen om gebruikers in staat te stellen interactie met de functionaliteiten van het systeem te hebben. Aan de informatie kant staat het Navigation Design een set van schermelementen die de gebruiker in staat stellen om zich door de informatie architectuur te verplaatsen.
Surface plane (Oppervlakte) Sensory design Als laatste onderdeel komt Sensory Design. Ongeacht de functionele of informatie zijde het doel blijft hetzelfde de zintuigelijke ervaring creëren door het eindproduct. De laatste stap in het proces draait pas om de uiterlijke kenmerken van het product. Book: The Elements of User Experience by Jesse James Garrett 2011
De elementen Het model is opgedeeld in vlakken die ook weer onderverdeeld zijn in verschillende lagen. Dit is een handige manier van denken over het User Experience probleem. In de werkelijkheid zijn de lijnen tussen deze gebieden niet zo duidelijk getrokken als in het model. Het kan moeilijk te identificeren zijn of een probleem te verhelpen is door de plaatsing van een element of het te vervangen voor een ander element. Kan een aanwijzing in het visuele ontwerp het probleem verhelpen of moet het onderliggende navigation design aangepast worden? Sommige problemen hebben aandacht op verschillende gebieden tegelijk nodig terwijl andere problemen buiten de lijnen van het model vallen. Het is daarom een richtlijn voor het werken aan een User Experience probleem niet per se de enige vorm of volgorde voor het verhelpen van een probleem. Er zijn maar weinig producten of diensten die aan één kant van het model vallen. Binnen elk vlak moeten de elementen samenwerken om het uiteindelijke doel van dat vlak te bereiken. Het onderscheid maken van het effect van één element en wat voor invloed dat heeft op de andere elementen op het vlak is erg moeilijk. Er zijn nog een aantal onderwerpen die niet in het model voorkomen maar wel net zo belangrijk zijn. Content is de reden dat iemand op een site of ander product komt, deze content moeten de gebruikers als waardevol ervaren. Technologie is net zo belangrijk, de afgelopen jaren is technologie en de mogelijkheden die het bied enorm vooruit gegaan. De manier waarop en waar iemand het technologisch product gebruikt is ook van toepassing op de User Experience. Hoewel het model in eerste instantie is gemaakt voor websites is het toe te passen op een breed scala aan producten en diensten. Als het wordt toegepast op andere vormen van technologische producten zijn er veel overeenkomsten. Zelfs wanneer het een product of dienst is dat verder niets met technologie te maken heeft, is het model toe te passen maar kunnen er bepaalde elementen afvallen of toegevoegd worden. Book: The Elements of User Experience by Jesse James Garrett, 2011
User experience heuristics User Experience problemen vinden is niet eenvoudig, het kan van een hoop verschillende factoren afhangen. Om een hulpmiddel te bieden zijn heuristics ontstaan. De evaluatie van de heuristics
geven een goed beeld van de User Experience en de problemen van een site of product. De evaluatie wordt ook een site site review of expert review genoemd. Made for humans (Gemaakt voor mensen) Is de site of product relevant en bruikbaar en komt het overeen met de gebruikers “mental model”. Een metal model is het beeld wat een gebruiker heeft over de taak of doelstelling die zij willen behalen met de interface. Dit moet altijd het uitgangspunt zijn bij de keuzes wanneer je een site of product ontwerpt. Het moet voor de gebruiker die het product voor het eerst gebruikt logisch zijn en niet voor de ontwerper die er al een tijd aan werkt en de site of product van binnen en buiten kent. http://www.useit.com/alertbox/mentalmodels.html - Nielsen, J. (2010). Mental Models.
Forgiving (Vergeven) Errors moeten zo veel mogelijk gereduceerd worden. Fouten belemmeren de gebruikers flow op de site of product. Wanneer er een fout voorkomt moet het systeem de gebruiker inlichten wat er fout is gegaan en hoe dit hersteld kan worden. Accessible (Toegankelijk) Het product moet toegankelijk zijn voor de gebruikers. Ook voor de gebruikers met een beperking. 10 % van de bevolking heeft een beperking. Door veel contrast te gebruiken kunnen de gebruikers die kleurenblind zijn het product ook gebruiken. Wanneer dit niet gebeurd betekent het dat 1 op de 10 gebruikers het product niet kan gebruiken. http://www.alistapart.com/articles/contrast-is-king/ - Jensen-Inman, L. (2010). Contrast is King.
Self-evident (Vanzelfsprekend) Het moet duidelijk zijn waarvoor en voor wie de site is. Is het eenvoudig om te navigeren en is de belangrijkste content prominent aanwezig zijn de layout, iconen en afbeeldingen logisch en intuïtief te gebruiken. Er moeten zo min mogelijk vraagtekens bij gebruikers opkomen tijdens het gebruik van de site of product. Een handleiding of uitleg moet zo min mogelijk tot helemaal niet nodig zijn. Een gebruiker moet in één oogopslag zien wat het product is en hoe het werkt. Predictable (Voorspelbaar) Het product of de site moet een consistente lijn doortrekken en niet afwijken van welbekende conventies die voor de gebruiker voorspelbaar zijn omdat deze worden herkend. Uniek zijn is niet altijd goed voor de User Experience. Sommige dingen worden nou eenmaal makkelijker begrepen. Je kunt ervanuit gaan dat iedereen weet dat de S op een label van een kledingstuk small betekend. Iconen, winkelwagens en formulieren zijn zo universeel geworden dat iedereen deze in één oogopslag begrijpt. Ook het onthouden van de voorkeur van de gebruiker is belangrijk, niemand wil op elk formulier zijn gegevens opnieuw invoeren of iets in een winkelwagen hebben en per ongeluk weg gaan van de site en de hele inhoud verliezen. Afwijken van deze conventies of de betekenis of manier van interactie veranderen is onduidelijk voor de gebruiker en zal de User Experience niet verbeteren. http://www.uxbooth.com/blog/understanding-conventionswhen-being-unique-is-a-bad-thing/ - Horrocks, R. (2008). Keeping Conventions: When Being Unique is a Bad Thing.
Efficient (Efficiënt) Een site of product moet efficiënt zijn. Een gebruiker wil een zo kort mogelijke route afleggen om bij zijn doel te bereiken. Wanneer tekst, plaatjes en de structuur beknopt gehouden worden en de gebruiker terugkoppeling krijgt wanneer hij een taak uitvoert draagt dit bij aan de efficiëntie van de User Experience. De prioriteit van een site of product ligt bij de belangrijkste taak. Gebruikers blijken een site te scannen en niet eerst te lezen. Daarom moet de belangrijkste taak in beeld staan zodat deze opgemerkt kan worden en er ook gebruik van gemaakt wordt. Trustworthy (Betrouwbaar) Om vertrouwd te worden moet het product geloofwaardig overkomen. Een niks zeggende tekst op een site helpt niet bij het winnen van vertrouwen en komt niet geloofwaardig over. Wanneer de content up-to-date is draagt dit ook bij aan het vertrouwen omdat de site of product constant verbeterd, uitgebreid of aangepast word. Book: Undercover User Experience Design, Bowles, C., & Box, J. (2011).
Mobiele user experience en user context Mobiel Mobiel refereert naar de gebruikers situatie niet die van het apparaat. Ontwerpen voor mobiel is anders dan voor een desktop, bij mobiel is het begrijpen van de context belangrijk. Het begrijpen van de context betekent HOE, WAAR, WANNEER en WAAROM een gebruiker zijn mobiel gebruikt. Het ontwerpen voor mobiel betekent dat de context waarin de applicatie gebruikt word ook kan veranderen. Alle aspecten, mogelijkheden en beperkingen moeten verkend worden. Een mobiel word voornamelijk gebruikt tijdens die momenten dat je even tijd hebt tussendoor. Wanneer je in het openbaar vervoer zit of even naar de winkel loopt om boodschappen te doen. Dit brengt ook weer beperkingen met zich mee zoals het gebruik van de mobiel met één hand, door het dragen van een boodschappen tas. Maar ook de omgeving is van belang zoals de zon die de trein in schijnt terwijl je even op je mobiel bezig ben. De mobiele telefoon word tijdens korte momenten gebruikt en ook tijdens het gebruik word er veel gewisseld tussen applicaties zoals even kijken hoe laat het is of even een berichtje versturen. De technologie zorgt ook voor verschillen, sommige gebruikers hebben een oudere mobiel terwijl anderen de nieuwste smartphones bezitten waar meer functies op zitten. http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/
Context In het boek Mobile Design and Development geschreven door Brian Fling wordt context opgedeeld in verschillende soorten van context. Context met de Hoofdletter C is hoe de gebruikers waarde geven aan iets dat ze aan het doen zijn. Zoals een gebouw zien en het opzoeken op internet op je telefoon voegt Context toe aan je taak. Deze Context met hoofdletter C word ook wel “het verstrekken van Context” genoemd, omdat de verstrekte informatie je Context geeft oftewel het beter begrijpen van wat dit moment in tijd voor de
gebruiker betekend. Context zorgt voor een beter begrip van een persoon, plek, ding, situatie of een idee door er informatie aan toe te voegen. Context met een kleine c is de mode, medium of omgeving en omstandigheden waarin we een taak proberen uit te voeren. De context met een kleine c bestaat uit drie type context. Fysieke context (locatie), media context (apparaat en toegang online) en modale context (gemoedstoestand). Fysieke context (locatie) Waar de gebruiker zich bevind heeft vaak invloed op het gebruik. Wanneer je in de auto rijd, heb je veel privacy er is niemand die mee kijkt op je scherm maar ben je bezig een voertuig te besturen en op de weg te blijven rijden. In de bus is er minder privacy iedereen kan meekijken maar heb je handen en ogen vrij om op je mobiel te concentreren. media context (apparaat en toegang online) Mobiele apparaten zijn niet zo rijk in content als een krant, maar kunnen informatie in het heden geven. De mobiele context voegt waarde toe die de geprinte krant niet kan geven. Het gaat niet alleen om informatie die we ontvangen het kan ook gaan over betrokken publiek in real time. In 2009 werd 178 miljoen keer gestemd via berichtjes op American Idol terwijl er in 2008 maar 131 miljoen keer gestemd is bij de presidentiële verkiezing. modale context (gemoedstoestand) Gedreven door willen, iets nodig hebben of verlangen maken we keuzes waardoor we hopelijk ons doel behalen. Soms onderscheidende maar vaker wel dan niet triviale keuzes zoals wanneer je hand boven een vlam hangt, als het te warm word trek je automatisch je hand weg zonder daar echt over na te denken. Modale context is de kern van een opzettelijke handeling of inactiviteit. Blz 47
Book: Mobile Design and Development Brian Fling 2009
Beperkingen -Klein scherm -Laag of onderbroken netwerk verbinding -Lang laden van pagina’s -Beperkte ondersteuning voor web functionaliteiten -Beperkte batterij -Groot verschillen in mobiele apparatuur en apparaat capaciteit in de markt De meerderheid van mobiele apparaten heeft een klein scherm. De mobiele schermen verschillen in lengte, hoogte en pixel dichtheid. De netwerkverbinding op een mobiel kan laag zijn en wordt onderbroken. Sommige gebruikers hebben een lage internetverbinding waar je per megabyte voor moet betalen. Anderen hebben een onbeperkte connectie waarmee men redelijk snel kan browsen. Elke mobiel heeft een browser maar de beperkte ondersteuning voor web functionaliteiten kan per
mobiel verschillen. Een mobiel heeft ook minder werkgeheugen en zal daarom langer moeten laden om pagina’s of applicatie te openen. De batterij in een mobiel gaat redelijk snel leeg. Er zijn smartphones die je dagelijks moet opladen, vooral als deze mobiele apparaten veel worden gebruikt. Het gebruik van internet en locatie bepalende applicaties hebben een grote impact op de batterij duur van een mobiel. http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/ - Mobile website design, what you should know.
Voordelen tegenover desktop -Locatie Mobiele apparaten kunnen locatie bewust zijn, wat de mogelijkheid geeft om content te leveren die direct relevant is voor de gebruikers context. -Massa communicatie Meer mensen in de wereld hebben internet beschikbaar op hun mobiele telefoon dan op desktop computers waardoor het een belangrijk middel van massacommunicatie is. -Persoonlijk Mensen hebben een intieme relatie met hun telefoon. Een mobiel wordt niet gedeeld zoals een desktop computer word gedeeld in een gezin. Omdat het vooral persoonlijk gebruikt word is er veel potentie op de markt in de richting van het verlangen van een individu om hun telefoon te personaliseren en eigen te maken. -Staat altijd aan De meeste mobiele telefoons hebben toegang tot internet, het zenden en ontvangen van e-mails en berichten ook wanneer het apparaat niet actief word gebruikt. -Draagbaar (makkelijk te vervoeren) Mensen dragen hun mobiel overal mee naartoe. Naar het werk, tijdens de pauze, even boodschappen doen en zelfs als men zich in huis naar een andere kamer verplaatst moet de mobiel mee. http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/
Desktop
Mobile
Large screen
Small screen
Desk-mounted monitor
Screen jolting around (while walking)
Fast internet
Slow internet
Have time to browse
Don’t have time
Quiet environment
Noisy, distracting environment
Have pen & paper to take notes
Hard to take notes
Sitting down
Standing or walking
Have separate phone
Phone and web in same device
Focussed on task
Multi-tasking
Artificially-lit environment Afbeelding namaken! En vertalen
May be in strong sunlight
Nadelen tegen over desktop Naast de voordelen zijn er ook nadelen aan een mobiel apparaat ten opzicht van een desktop computer. -Klein scherm Een mobiel apparaat heeft een klein scherm. Dit is direct één van de grootste zichtbare verschillen ten opzichte van een desktop computer. Het kleine scherm biedt geen plaats voor onrelevante content en te grote afbeeldingen. Ontwerpers moeten veel keuzes maken en creatief met de kleine ruimte om gaan. Ook omdat er op een mobiel apparaat maar één scherm tegelijk bekeken kan worden en daar direct de meest relevante informatie op te zien moet zijn. -Onstabiel oppervlak Een mobiel wordt niet gebruikt zoals een desktop op een stabiele ondergrond zoals een tafel die afgesteld staat op de juiste kijkhoek. Een mobiel houd je in je hand terwijl je loopt, zit of staat misschien wel in de bus waardoor je mobiel in je hand heen en weer schud. -Langzaam internet Een mobiel maakt gebruik van mobiele data-connectiviteit of een WiFi verbinding. Zelfs de nieuwste en snelste mobiele telefoons en de browsers die erop staan zijn niet zo snel als op een desktop. De pagina duurt langer om te verwerken en renderen. -Weinig tijd Wanneer je in het verkeer deelneemt en in de file staat of moet overstappen op de trein heb je minder tijd voor andere dingen. Je staat wel stil en hebt wat tijd om informatie op te zoeken maar je blijft met je hoofdtaak bezig. Op een desktop concentreer je meer op de getoonde informatie en heb je meer tijd om achterover te leunen en te vinden wat je aan het zoeken was. -Omgeving veranderd Een mobiel gebruik je zoals de naam al zegt mobiel. Wanneer je in een drukke ruimte ben is er meer geluid om je heen. Hierdoor kun je afgeleid worden terwijl je op je mobiel bezig ben maar ook andersom komt het voor. Mensen lopen over straat terwijl ze een mobiel gebruiken, en kunnen zo opgaan waarmee ze bezig zijn op een mobiel dat de omgeving wordt vergeten. -Invoer (typen)
Een desktop computer of laptop heeft de beschikking over een volledig toetsenbord met 104 toetsen of meer. Een mobiel heeft vaak 2 of 3 letters op een enkele toets of in sommige gevallen een volledig on-screen toetsenbord met elke letter onder een enkele toets. Naast dat deze on-screen toetsenborden alsnog beperkt zijn met vaak op één pagina het alfabet en de andere toetsen verborgen onder een toets die een nieuw scherm laat zien met bijvoorbeeld aparte tekens. Maar misschien wel het belangrijkste nadeel is de tastbaarheid, het on-screen toetsenborsd is niet tastbaar waardoor typen niet zo natuurlijk en snel gaat als op een tastbaar toetsenbord van bijvoorbeeld een laptop. -Mobiel en web in één apparaat Iedereen kent het wel je bent aan het bellen en moet ondertussen wat op internet opzoeken. Op een desktop computer is dit geen probleem wanneer je met de huistelefoon of mobiel aan het bellen bent. Op een mobiele telefoon zit het web en de mobiele functies in één apparaat. Dit kan een nadeel zijn wanneer je iemand belt op je mobiel en ook wat op de browser op je mobiel wilt opzoeken. -Multi-tasking Moderne smartphones kunnen Multi-tasken maar niet zoals bij een desktop computer waar je vier schermen kleiner kan maken zodat ze allemaal in beeld passen. Op een smartphone kan er maar één scherm tegelijkertijd open staan waardoor de gebruiker tussen applicatie moet wisselen en zijn focus kan verliezen. -Reflecterend scherm Wanneer het zonnig is en je gebruik maakt van je mobiel kan het zonlicht op je scherm reflecteren. Op een desktop computer wordt er vaak gebruik gemaakt van kunstmatig licht om de ruimte te belichten en schijnt de zon niet direct op je scherm. Niet in alle gevallen zijn dit nadelen van een mobiele telefoon. Het gaat niet altijd op, maar zijn een soort richtlijnen van User Experience die over het algemeen van toepassing zijn op mobiele apparaten. Het kan zo zijn dat iemand achter een desktop computer enorme haast heeft en iemand die gebruikt maakt van zijn mobiel in het ziekenhuis op een stoel zit en uren te spenderen heeft voor diegene aan de beurt is. Book: Mobile Design and Development Brian Fling 2009 http://www.purecaffeine.com/blog/design/the-mobile-experience-is-nothing-like-desktop/
Ontwerpen voor mobiel -Focus op het belangrijkste. Er kan slechts één pagina getoond worden, zorg ervoor dat het belangrijkste stukje informatie dat overgebracht moet worden in het zicht staat. -Beperk navigatie tot een minimum. Geef zoveel informatie als mogelijk is, maar niet meer dan dat. -Gebruik witruimte als ontwerp tool, het toont simpelheid en geordendheid.
-Volg niet altijd een richtlijn. In bepaalde mobiele applicaties wordt er afgeweken van de richtlijnen maar er moet een logische reden voor zijn dit te doen. -Ontwerp met gelimiteerde maar bruikbare afbeeldingen en gelimiteerde woorden. http://www.systeminetwork.com/article/application-modernization/designing-a-mobile-user-experience-64718 - Greg Hintermeister, Designing a Mobile User Experience
Gebruik van mobiele apparaten -Mobiel is een levensstijl Mobiel is een levensstijl niet een apparaat. De waarheid hierachter is dat mensen mobiel zijn en niet hun apparaat. Mobiele telefoons zijn kleiner en lichter geworden om mee te bewegen met het tempo van het leven. Maar de mobiele telefoon heeft geen kracht, waarde of betekenis zonder mensen. Hoe beter er begrepen word over mensen hun levensstijl en doelen waardoor ze worden gedreven, hoe beter er een natuurlijke mobiele ervaring gecreëerd kan worden. -Mobiel een constante natuurlijke staat De staat van het flexibel, dynamisch, onafhankelijk, open, vrij, opportunistisch en aanpasbaar zijn is de kern van alle menselijke wezens. Wanneer we deze ideeën overnemen als een set van ontwerp principes behouden we de ervaring op verschillende apparaten, kleine schermen en verdere technologie zijn ontworpen om te passen in een mobiele gebruiker levensstijl. -Het gaat over mensen. En hun mensen. Er is geen aanhoudender wens van mensen dan aan te sluiten en verband met elkaar te leggen. Deze intentie helpt bij het verklaren van een groot aantal mobiele activiteiten en ervaringen. Het verandert het landschap voor hoe we mobiele producten en diensten ontwerpen. Als specialisten in het begrijpen van de context van menselijke interactie, moeten we de waarde van de nieuwe mobiliteit meten en kijken hoe goed het gebruikers in staat stelt om manieren te vinden om samen te komen. http://punchcut.com/perspectives/mobile-not-device-it%E2%80%99s-lifestyle
Waar en wanneer Jaren terug, toen smartphones geïntroduceerd werden. Werden smartphones gepromoot als een apparaat dat de drukke, reizende zakelijke professional helpt. Het apparaat werd voornamelijk ter beschikking gesteld om toegang te hebben tot email de kalender en contacten wanneer iemand niet achter zijn bureau zit of aan het reizen was. Tegenwoordig is dit verreweg van de realiteit, de smartphone heeft zich geïntegreerd in het dagelijkse leven van alle typen gebruikers. Smartphone gebruikers geven aan de smartphone te gebruiken voor persoonlijke productiviteit en entertainment minder voor werkgerelateerde zaken. Het ontstaan van de smartphone was vooral voor zakelijke doeleinden bedoeld terwijl driekwart van de gebruikers tegenwoordig aangeeft het alleen voor persoonlijk gebruik te gebruiken.
Compete’s quarterly smartphone intelligence, Jan-Feb 2010
NAMAKEN
Uit het onderzoek van compete.com blijkt dat een smartphone “het apparaat dat nooit verder dan een armlengte verwijderd is” gebruikt wordt tijdens elk moment van de dag, van de treinreis naar je werk, tot het wachten bij de dokter, tot het versturen van berichten tijdens je favorieten soap. Deze bevindingen zijn ideaal voor adverteerders en merken, het apparaat dat de gehele dag gebruikt wordt, dicht bij de eigenaar is en zelfs persoonsgebonden is levert de gebruiker allerlei types van informatie waar de adverteerders en merken op in kunnen spelen. http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/
Conclusie !Schrijven na aanvulling Hoofdstuk 2!
#3 Native apps, web apps en responsive design
Voordelen en nadelen van native applicaties Wanneer je ervaring hebt in web ontwikkeling kun je geïntimideerd worden door native apps. De twee vakgebieden hebben veel overeenkomsten, vooral als het gaat om de ontwikkeling van de gebruikersinterface. Wanneer de keuze valt op een mobiele web app, doe het dan omdat dit het beste is voor de gebruikers, niet omdat het makkelijk is en meer vertrouwd voor de ontwikkelaar. Voordelen
1. Gemakkelijk te gebruiken publiek – Uw apps zijn makkelijk te vinden in de ingebouwde applicaties winkel. Gebruikers kunnen zoeken en filteren op categorieën, populariteit, top toepassingen etc. 2. Eerste indruk – In de toepassingen winkel van het platform kunnen gebruikers een indruk krijgen van de toepassing door screenshots te bekijken en de beschrijving en gebruikers reviews te lezen. 3. Download direct – Wanneer je een app wil proberen of aanschaffen, kun je de app direct downloaden via de ingebouwde applicatie winkel. 4. Gemakkelijk te verkopen – Omdat de applicatie direct te downloaden is op een smartphone, is het makkelijker om een applicatie te verkopen. 5. Prestatie – Native apps verslaan web apps wanneer het gaat om prestatie. Native apps zijn meer geheugen efficiënt en maken gebruik van standaard gebruikers interfacecomponenten. Nadelen 1. Programmeertalen – Mobiele apps zijn niet eenvoudig te bouwen, ze zijn gemaakt met complexe programmeertalen en API’s. 2. Het leren van een volledige taal duurt veel te lang – Ontwikkelaars van een platform kunnen meestal de taal van een ander platform lezen en begrijpen, maar de volledige taal leren kan lang duren. 3. Uploaden naar de applicatie winkel van het platform –Wanneer de ontwikkeling van een app is afgerond moet deze in de online toepassing winkel van het platform worden geplaatst. Voor sommige app winkels moet je een geregistreerde ontwikkelaar zijn. Je zal worden gevraagd om een jaarlijkse of maandelijkse betaling. Na de betaling krijg je het gereedschap om apps te ontwikkelen, dan ben je ook in staat om apps in de winkel te uploaden. 4. Goedkeuring proces – Google heeft minde strenge regels om apps goed te keuren dan Apple en keurt bijna alles goed wat niet illegaal is. Ook kunnen gebruikers apps downloaden van andere plaatsen dan de android market. Er zijn ook veel meer gratis Android apps dan gratis iOs-apps, bijna het dubbele. http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_S hould_Know/ - Dennis Kardys, User Experience Designer at WSOL, 11/2009 Book: The
Smashing Book #2 - Designing Mobile User Experiences, 2011
http://mobithinking.com/native-or-web-app - Ericka Chickowski, pros & cons of html5 vs. native mobile apps http://mobithinking.com/native-or-web-app - Mobile applications: native v web apps – what are the pros and cons?
De voordelen en nadelen van webapplicaties Het maken van een app die er goed uit ziet en goed werkt is niet eenvoudig. Het is niet alleen het maken van een mooie iconen en een sexy design. Het maken van een mobiele applicatie verreist vaardigheden van verschillende disciplines: interaction design, visual design, information architecture en ergonomie om er een aantal te noemen. Gebruiker ervaring is een combinatie van disciplines, het
ontwerp van een fantastische mobiele app vraagt om een combinatie van perspectief en vaardigheden. Alle webontwikkelaars hebben kennis van HTML, CSS en Javascript en wanneer ze starten met het bouwen van een mobiele app willen ze niet alle opgedane vaardigheden links laten liggen. Waarom jaren van ervaring weggooien als alleen het platform is veranderd? Ontwikkelaars kunnen nu kiezen tussen een Native specifiek platform applicatie of een web-based frameworks om apps mee te te creëren. Maar er zijn een aantal onmiskenbare nadelen waaraan gedacht moet worden. Voordelen 1. Vertrouwde programmeertaal – Ontwikkelaars kunnen gebruik maken van bekende web technologieën. Ontwikkelaars hoeven hun vertrouwde programmeer vaardigheden niet weg te gooien. Ze kunnen werken met web technologieën zoals HTML, CSS en JavaScript. 2. Ondersteuning voor meerdere platforms – De mobiele toepassing draait op meerdere platformen zonder aanpassing. IOS, Android en andere platforms die gebruik maken van WebKitpowered browsers. Daarom werken HTML5, CSS3 en andere web technologieën goed in Webapplicaties. 3. Web apps zijn altijd up-to-date – Gebruikers hoeven niet handmatig de applicatie bij te werken. Distribueren en updaten kan met onmiddellijk ingang gebruikt worden door de gebruiker, door de applicatie eenvoudig opnieuw op het web te publiceren. 4. Makkelijker te meten – Mobiele sites zijn makkelijker te meten en onderhouden door content management en analytics. Omdat het als het ware een site blijft is het makkelijker om het gebruikers gedrag te meten via bijvoorbeeld Google Analytics. Nadelen 1. Moeilijk te verkopen – Google (Android Market) en Apple (App Store) zorgen voor een eenvoudige manier voor het verkoop van applicaties doormiddel van hun winkels. 2. Moeilijk om publiek te bereiken – Gebruikers kunnen meer apps vinden en downloaden op hun mobiele telefoon, door de ingebouwde applicatie winkel te openen. Daar hebben ze toegang tot duizende apps die gefilterd kunnen worden voor betere zoekresultaten en populariteit. Er is geen winkel voor toegang tot beschikbare web apps. 3. Prestatieproblemen –Native apps hebben snellere prestaties dan web apps. Het openen van HTML pagina’s in een browser kost meer laad tijd en is minder geheugen efficiënt als samengestelde Native code. 4. Gebrek aan widgets – iOS en Android frameworks hebben tientallen standaard gebruikersinterface componenten. Wanneer je een web app maakt kun je geen gebruik maken van deze standaard componenten. Er zijn een aantal goede frameworks voor mobiele apps, maar deze zijn minder gepolijst dan bij de native apps. http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_S hould_Know/ - Dennis Kardys, User Experience Designer at WSOL, 11/2009 Book: The
Smashing Book #2 - Designing Mobile User Experiences, 2011
http://mobithinking.com/native-or-web-app - Ericka Chickowski, pros & cons of html5 vs. native mobile apps http://mobithinking.com/native-or-web-app - Mobile applications: native v web apps – what are the pros and cons?
Mobiele Web app frameworks Ontwikkel apps met web technologie De smartphone markt groeit zeer snel en word steeds complexer. Dat is niet alleen verwarrend voor de kopers, maar ook voor de aanbieders van mobiele apps. Hoe kan je efficiënt een webapplicatie ontwikkelen voor alle platformen, wanneer elk platform gebruik maakt van zijn eigen programmeertaal? Dit probleem kan opgelost worden door web technologieën te gebruiken die van toepassing zijn op veel platformen. Web technologieën Op elke smartphone is een native browser geïnstalleerd. Dat maakt webapplicaties die geoptimaliseerd zijn voor smartphone platforms een interessant alternatief voor Native apps. Dankzij de offline gegevensopslag kunnen moderne smartphone browsers alle benodigde middelen in het cache opslaan, zodat zij in staat zijn om de pagina te openen zonder mobiele data verbinding. Moderne webtechnologieën en smartphones hebben toegang tot je huidige locatie voor meer relevante inhoud. Je kunt ook uniek zijn door met eigen aangepaste HTML en CSS. Aanpassingen voor verschillende schermresoluties zijn mogelijk. Sommige platforms bieden ook een functie om de webapplicatie als een snelkoppeling item op het startscherm geplaatst te worden. Ook is er een optie om web apps te laten zien in volledig scherm grote, net als een Native app. Hardware Gebruiker gegevens kunnen worden opgeslagen op apparaten met verschillende technologieën. Bijvoorbeeld, om persoonlijke instellingen op te slaan. Dit kan door lokale opslag of browser SQL databases. Wanneer de gebruiker het apparaat herstart zijn de opgeslagen gegevens nog steeds offline beschikbaar. Veel apparaten ondersteunen het openen van de huidige locatie toegang. Smartphones berekenen de huidige locatie door het verkrijgen van gegevens van de ingebouwde assisterende GPS. Dit is een combinatie van GPS-positie, W-LAN informatie en de huidig gebruikte netwerkaanbieder locatie. De huidige locatie gegevens samen met de lokaal opgeslagen gegevens kunnen leiden tot voldoende scenario’s en ideeën voor Web apps. Voor het ontwikkelen van mobiele Webapplicaties kunnen verschillende frameworks gebruikt worden. De frameworks zijn momenteel beperkt tot Webkit gebaseerde browsers. BlackBerry smartphones worden ondersteund vanaf versie 6 en Windows smartphones worden ondersteund vanaf Internet Explorer mobile 9. De belangrijkste frameworks zijn jQTouch and Sencha Touch, beide frameworks bieden verschillende ontwikkelingsmodellen. Ook jQuery Mobile maakt een goede impressie, het is ontstaan uit de JavaScript-bibliotheek. http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_S hould_Know/ - Dennis Kardys, User Experience Designer at WSOL, 11/2009 Book: The
Smashing Book #2 - Designing Mobile User Experiences, 2011
http://mobithinking.com/native-or-web-app - Ericka Chickowski, pros & cons of html5 vs. native mobile apps
http://mobithinking.com/native-or-web-app - Mobile applications: native v web apps – what are the pros and cons?
Responsive design Responsive webdesign is de benadering die suggereert dat ontwerp en ontwikkeling moet reageren op het gebruikers gedrag en omgeving op schermgrootte, platform en oriëntatie. Responsive web design bestaat uit een mix van flexibele roosters en lay-outs, afbeeldingen en een intelligent gebruik van CSS media queries. Wanneer de gebruiker van apparaat of schermresolutie wisselt, moet de website automatisch de resolutie, beeldgrootte en script vaardigheden aanpassen. Met andere woorden, de website moet over de technologie beschikken om automatisch te reageren op de voorkeur van de gebruiker. Dit elimineert de noodzaak om te ontwerpen en ontwikkelen voor verschillende platformen voor elke nieuwe gadget op de markt. Waarom zouden we een aangepast web ontwerp voor elke soort platform maken? Web ontwerp moet zich automatisch aanpassen. Het mag geen verschillende op maat gemaakte ontwerp varianten bevatten voor elke categorie van gebruikers en platformen. Responsive web design vereist een meer abstracte manier van denken. We maken gebruik van vloeiende lay-outs, media queries en scripts die automatisch webpagina's kunnen schalen.
Meer dan vloeiend en flexibel responsieve web design gaat niet alleen over verstelbare schermresoluties en automatisch schaalbare afbeeldingen, maar eerder over een hele nieuwe manier van denken over ontwerp. Met meer apparaten komen meer schermresoluties, definities en oriëntaties. Nieuwe apparaten met nieuwe schermformaten worden dagelijks ontwikkeld. Elk van deze apparaten kan variëren van schermresolutie, functionaliteit en zelfs kleur. Smartphones kunnen ook overschakelen van portret naar landschapmodus, wanneer de gebruiker zijn toestel draait. Hoe te ontwerpen voor deze situaties? En meer compliceert, wat als een gebruiker overschakelt van oriëntatie tijdens het laden van een nieuwe pagina? Het is mogelijk te ontwerpen voor diverse belangrijke schermresolutie groepen en ontwerp voor elk van hen zo flexibel nodig. Maar dat kan een enorme klus zijn schakelen tussen al die verschillende programmeer en style sheets
Alles flexibel Een paar jaar geleden waren flexibele lay-outs bijna een luxe voor websites. Alleen dingen die flexibel waren in een ontwerp waren de lay-out kolommen en tekst. Afbeeldingen kunnen de hele lay-out breken. De afbeeldingenwaren niet echt flexibel. Ze konden zich niet aanpassen van een groot computer scherm naar een kleine netbook scherm.
Nu kunnen we alles meer flexibel maken. We kunnen de grootte van de beelden automatisch laten aanpassen, er zijn een aantal tijdelijke oplossingen zodat de lay-outs nooit breken. Het is niet een complete oplossing, maar de oplossing geeft ons wat meer mogelijkheden. Het is ideaal voormensen die overschakelen van portretoriëntatie op landschap of voor mensen die overstappen van een groot computerscherm naar een iPad. Maar de grootste fout die ontwerpers kunnen maken, is alles flexibel maken. Dat is helemaal fout! Wat gebeurt er als je de website schaalt en alle groottes wijzigt in een kleinere verhouding? Je kunt het niet meer lezen, afbeeldingen lijken te klein zodat je ze niet meer kunt herkennen, en je moet naar beneden blijven scrollen om inhoud te vinden. Een lay-out kan te smal of te kort lijken om er goed uit te zien.
Media Queries en Style Sheets Meeste van de tijd werkt het niet wanneer alles flexibel is. Een website hoeft geen extreme wijzigen van de grootte te krijgen. Misschien wil je de lay-out in zijn geheel veranderen, hetzij door een aparte style sheet of efficiënter, door middel van een CSS-media-query. Dit hoeft niet moeilijk te zijn de meeste stijlen blijven hetzelfde, terwijl specifieke style sheets deze stijlen kunnen erven en elementen laten bewegen door floats, breedtes en hoogtes etc Wanneer een style sheet de lay-out te smal, kort, breed of lang maakt, konden we dat detecteren en schakelen naar een nieuwe gekoppelde style sheet. Deze nieuwe kind stijlsheet zou alles van de standaard style sheet overnemen en dan gewoon opnieuw te definiërende structuur inrichten. Spelen met Content Je kunt proberen om dingen proportioneel te krimpen en te veranderen wanneer dat nodig is, om alles te laten passen wanneer een scherm kleiner wordt. Het beschikbaar maken van elk stuk content van een groot scherm op een kleinere het scherm is niet altijd de beste oplossing. Er zijn een aantal richtlijnen voor de mobiele omgeving: eenvoudigere navigatie, meer gerichte content, lijsten of rijen in plaats van meerdere kolommen. Responsive Web design moet niet alleen gaan over het maken van een te creëren flexibele lay-out op een breed scala aan platforms en schermformaten. Ook moet het over de gebruiker gaan die kan content kan kiezen. Gelukkig zijn wij in staat om aan te tonen en verbergen inhoud met CSS. Maar.. Als we de inhoud verbergen, moet de browser nog steeds de verborgen inhoud laden, dat is niet efficiënt voor uw mobiele telefoon gegevensgebruik. Je wilt niet onzichtbare content laden en daarop wachten terwijl je die content nooit te zien krijgt, niet op je smartphone maar ook niet op je computer. Daarom is het verbergen van content een negatief punt. Tap versus click Een ander belangrijk feit is dat touchscreen apparaten steeds populairder worden. Op dit moment zijn voornamelijk touchscreens op kleinere apparaten, maar veel laptops en desktops op de markt hebben ook touchscreen mogelijkheden. Ook de tablets worde zeer populair deze dagen. Touchscreens komen met andere ontwerprichtlijnen dan louter de op cursor gebaseerde interactie.
Beide hebben verschillende mogelijkheden. Helaas, een ontwerp voor beide kost niet veel inspanning. Maar vergeet niet dat touchscreens geen mogelijkheden hebben voor het weergeven van CSS hovers/mouse-overs. Zodra de gebruiker het scherm raakt, wordt er geklikt. Dus, ontwerpen van interactieve elementen moet zeer goed gedaan worden, om de aantrekkingskracht van de gebruiker op een knop te krijgen zodat duidelijk word dat erop geklikt kan worden. Bijvoorbeeld sommige ontwerpers gebruiken metaforen voor het maken van knoppen. De knop moet eruit zien alsof je erop kan drukken. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ - Kayla Knight onSmashing Magazine Book: The
Smashing Book #2 - Designing Mobile User Experiences, 2011
http://www.alistapart.com/articles/responsive-web-design/ - Ethan Marcotte op alistapart
Mobile First Responsive web design Misbruik van responsive design heeft een enorm nadeel voor de user experience. Kleine apparaten zoals smartphones laden dezelfde inhoud als de grote scherm varianten zoals desktopcomputers. De mobiele webapplicatie of site is ontworpen en gebouwd nadat de desktop-versie is voltooid. Dat is tegen de theorie van de mobiele user experience. We moeten ervoor zorgen dat de kleinere apparaten minder gegevens hebben om te laden. Daarom kunnen we gebruik maken van een andere techniek, de mobiele first benadering. Begin opnieuw te ontwerpen voor de kleinere, meer beperkt apparaten. Op deze manier creëer je de basis voor alle andere design varianten. Je begint met kleine resolutie beelden en pictogrammen, zodat de mobiele telefoons deze sneller kunnen laden. Voor de grotere schermen kun je deze beelden vervangen voor beelden met een hogere resolutie als de schermafmeting groter wordt. Het niet gebruiken van JavaScript is een optie op kleinere beperkt apparaten. Je kunt JavaScript wel gebruiken in de andere varianten. JavaScript zal langzaam werken op je kleine beperkte mobiele apparaat en dat zal de gebruikers teleurstellen en misschien wel afschikken. Daarom begin je met de lay-out van de kleine apparaten. Je kunt daarmee verder uitbouwen voor de grotere schermen en de lay-out wijzigen, zodat het beter past in het grotere schermen. Zorg ervoor als je begint te ontwerpen met een mobile first aanpak, het eindproduct voor mobiel moet kleiner zijn dan het bureaublad equivalent. Focus op alleen de belangrijkste gegevens en acties in een toepassing. Dus bij het ontwerpen van mobile First aanpak is het eindresultaat een belevenis gericht op de essentiële taken die gebruikers willen bereiken zonder vreemde omwegen en het zien van onnodige interface elementen. Dat is goed voor de user experience en goed voor het bedrijfsleven. Nieuwe mobiele applicatie platformen met opwindende mogelijkheden laten veel desktop computer browsers achter zich. Denk na over precieze locatie van GPS, het gebruik van een kompas voor het oriënteren van de gebruiker, meervoudige aanraking invoer van een of meer gebaren, apparaat positionering van een accelerometer.
http://www.lukew.com/ff/entry.asp?933 – Jason Grigsby on the Cloud Four Blog http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/ – Luke Wroblewski
Conclusie We gaan een nieuw tijdperk van web design en ontwikkeling. Er zijn nu te veel mogelijkheden beschikbaar, en dit zal blijven in de toekomst. We moeten beginnen met het maken en aanpassen van onze websites en applicaties voor de toekomst. We kunnen niet blijven doorgaan met het maken van custom-build producten voor al die schermafmetingen, verschillende browsers en zelfs verschillende besturingssystemen. Daarom is Responsive webdesign is een geweldige manier om uw ontwerp te optimaliseren. U kunt de lay-out in een flexibele manier veranderen om uw website er geweldig uit te laten zien op elke scherm grootte. Responsive webdesign is een heel coole oplossing, maar het heeft een aantal nadelen. Responsive Web design kan de omvang en de structuur negeren van de gebruiker experience design (J.J. Garrett model). We kunnen de lay-out van ons ontwerpelementen aanpassen, en we kunnen elementen verbergen of laten zien , maar dit is alleen het oppervlak van wat we zien. Dit betekent niet dat we klaar zijn. Om een goede user experience te creëren moet je veel meer doe dan alleen de inhoud automatisch laten aanpassen aan de grootte van het scherm en oriëntatie. Bijvoorbeeld, de gebruikers doelstellingen voor uw mobiele website zijn anders dan de desktop-variant, dan is het aanbieden van verschillende content voor elk apparaat misschien de beste oplossing. Dus, denk aan uw productomvang en de kenmerken van uw product. Een smartphone kan een aantal andere waardevolle eigenschappen hebben tegenover een desktopcomputer. Misschien zou je daarvan gebruik willen maken, omdat het uw product een meer persoonlijke benadering geeft aan uw gebruikers. Kleinere apparaten hebben vaak een lagere en langzamer dataverbinding. Wanneer u besluit elementen te verbergen, weet je dat ze zijn er nog steeds zijn. Uw smartphone weet dat ook, het moet nog steeds de onzichtbare design elementen laden. Dit zal resulteren in langere laadtijden die uw gebruiker ervaring zullen beïnvloeden op een negatieve manier.
#4 Case Open dagen app
Concept Wireframes Product open dagen app schermen Usability test Conclusie Bronnen
