-
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 van 12 tot 16 Hoger algemeen
voortgezet onderwijs van 12 tot 17 Voorbereidend wetenschappelijk
onderwijs 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 mens-computer 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?
http://en.wikipedia.org/wiki/User_experience�http://uxmatters.com/glossary/�
-
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
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.
http://semanticstudios.com/publications/%20semantics/000029.php%20–%20Morville,%20P.%20on%20Semantic%20S%20tudios,%2006/2004�
-
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)
http://semanticstudios.com/publications/%20semantics/000029.php�
-
“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.
http://userexperienceproject.blogspot.com/2007/02/%20restructuring-user-experience-honeycomb.html�
-
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.
http://www.useit.com/alertbox/mentalmodels.html�http://www.alistapart.com/articles/contrast-is-king/�http://www.uxbooth.com/blog/understanding-conventionswhen-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
http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�
-
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
http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�
-
Sitting down Standing or walking
Have separate phone Phone and web in same device
Focussed on task Multi-tasking
Artificially-lit environment May be in strong sunlight
Afbeelding namaken! En vertalen 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.
http://www.purecaffeine.com/blog/design/the-mobile-experience-is-nothing-like-desktop/�
-
-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.
http://www.systeminetwork.com/article/application-modernization/designing-a-mobile-user-experience-64718�http://punchcut.com/perspectives/mobile-not-device-it%E2%80%99s-lifestyle�
-
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
http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/�
-
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_Should_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
http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�http://mobithinking.com/native-or-web-app�http://mobithinking.com/native-or-web-app�
-
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_Should_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?
http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�http://mobithinking.com/native-or-web-app�http://mobithinking.com/native-or-web-app�
-
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_Should_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://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�http://www.wsol.com/White_Board/Topics/Design_Advice/Mobile_Web_Site_Design__What_You_Should_Know/�http://mobithinking.com/native-or-web-app�
-
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.
http://mobithinking.com/native-or-web-app�
-
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://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/�http://www.alistapart.com/articles/responsive-web-design/�
-
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
http://www.lukew.com/ff/entry.asp?933�http://www.cloudfour.com/where-are-the-mobile-first-responsive-web-designs/�
-
Concept Wireframes Product open dagen app schermen Usability
test Conclusie Bronnen