Usability voor het web en mobiele apparaten

Presentatie over: "Usability voor het web en mobiele apparaten"— Transcript van de presentatie:

1 Usability voor het web en mobiele apparaten
Peter Kassenaar

2 Welkom – Agenda Introductie Korte algemene inleiding Usability Usability voor mobiele apparaten Vragen - afsluiting

3 Introductie Peter Kassenaar; Auteur, programmeur, docent,
ALO (1991), Bewegingswetenschappen (1993), Eigen bedrijf (1996)

4 Waarom usability? Vroeger: Techniek stond te veel centraal 9/17/2018

5 Waarom usability? Web = communicatie 9/17/2018

6 Waarom usability? Betere websites = betere communicatie = betere business * * = In de breedste zin van het woord 9/17/2018

7 Communicatie - Verschuiving
“Vroeger” “nu” Credits: foto ‘vroeger’ : Foto ‘nu’ :

8 For starters: een kleine quiz…
Hoe oud is de eerste mobiele telefoon? Hoe lang bestaat internet op je mobiel? Hoeveel Nederlanders hebben een iPad? Wat is het verschil tussen een website en een app? Het web: 20 jaar. Gestart in 1991 – Tim Berners Lee Een browser: programma om websites te bezoeken. Vroeger – relatief statisch programma: websites bekijken, zoekvragen uitvoeren. Nu – steeds meer een actieve applicatie: e-commerce, gMail/Hotmail, internet bankieren. Internet op je mobiel: NL op iPad: Zie grafiek Automatiseringgids

9 Eerste mobiele (auto) telefoon
1924

10 Mobiel - mainstream 1980 9/17/2018

11 1997 Live verslag vanuit de tocht via mobieltjes 9/17/2018

12 ‘classic’ (pre-2007) 9/17/2018

13 Touch: 2007- 9/17/2018

14 For starters: een kleine quiz…
Hoe oud is de eerste mobiele telefoon? Hoe lang bestaat internet op je mobiel? Hoeveel Nederlanders hebben een iPad? Wat is het verschil tussen een website en een app? Het web: 20 jaar. Gestart in 1991 – Tim Berners Lee Een browser: programma om websites te bezoeken. Vroeger – relatief statisch programma: websites bekijken, zoekvragen uitvoeren. Nu – steeds meer een actieve applicatie: e-commerce, gMail/Hotmail, internet bankieren. Internet op je mobiel: NL op iPad: Zie grafiek Automatiseringgids

15 Mobiel internet Bron: wikipedia

16 For starters: een kleine quiz…
Hoe oud is de eerste mobiele telefoon? Hoe lang bestaat internet op je mobiel? Hoeveel Nederlanders hebben een iPad? Wat is het verschil tussen een website en een app? Het web: 20 jaar. Gestart in 1991 – Tim Berners Lee Een browser: programma om websites te bezoeken. Vroeger – relatief statisch programma: websites bekijken, zoekvragen uitvoeren. Nu – steeds meer een actieve applicatie: e-commerce, gMail/Hotmail, internet bankieren. Internet op je mobiel: NL op iPad: Zie grafiek Automatiseringgids

17 iPad/tablet gebruik in NL

18 For starters: een kleine quiz…
Hoe oud is de eerste mobiele telefoon? Hoe lang bestaat internet op je mobiel? Hoeveel Nederlanders hebben een iPad? Wat is het verschil tussen een website en een app? Het web: 20 jaar. Gestart in 1991 – Tim Berners Lee Een browser: programma om websites te bezoeken. Vroeger – relatief statisch programma: websites bekijken, zoekvragen uitvoeren. Nu – steeds meer een actieve applicatie: e-commerce, gMail/Hotmail, internet bankieren. Internet op je mobiel: NL op iPad: Zie grafiek Automatiseringgids

19 Website vs. app VaN: Naar: 9/17/2018

20 Websites vs. apps Generiek Specifiek Platform- onafhankelijk
1x code-base “goedkoop” Specifiek Platform- afhankelijk Meerdere code- bases “duur” 9/17/2018

21 En…. Wat betekent dit voor usability?
9/17/2018

22 Inleiding: Techniek vs Usability
Techniek – is de site technisch correct Structuur, navigatie, zoeken Hyperlinks, afbeeldingen, formulieren, etc. Programmeertalen: HTML, CSS, JavaScript, PHP, etc.

23 Usability Usability: ‘de mate van gebruiksvriendelijkheid van een site’ Eenvoud? Efficiënt? Informatief? Fun?

24 Usability-onderzoek Usability meet de kwaliteit van gebruikersinterfaces (User Interface, UI): Hoe makkelijk is een (web-) applicatie te gebruiken door een eindgebruiker? Verschillende aspecten: effectiviteit, efficiency, tevredenheid

25 vs

26 Is usability wetenschap?
Geen ‘harde wetenschap’ Wel: groot aantal richtlijnen waaraan een UI getoetst kan worden  theoretische analyse ‘Live’ kijken hoe gebruikers de applicatie doorlopen  praktijktesten

27 10 Concrete usability-richtlijnen
Herkenbaarheid: Laat bezoekers niet nadenken Snelheid: Bezoekers hebben haast Laat gebruikers zoeken Effectief tekstgebruik Navigatie – consistent en eenvoudig Lay-out: eenvoudig en duidelijk Hyperlinks: onderscheidend Interactie: web als social tool Accessibility Afbeeldingen en multimedia

28 1. Mobile usability - schermafmeting
vs.

29

30 Dus…. Hoeveelheid inhoud reduceren
Advertenties, kolommen, social media koppelingen, etc. Andere layout, liefst single-column Voorkom continu pinch – zoom – pan Advies: aparte, geoptimaliseerde mobiele versie Bijvoorbeeld en m.hva.nl

31

32 2. Bediening

33 Mouse vs. touch Nauwkeurig Mouseover Multifunction
(linker- & rechtermuisknop) Onnauwkeurig Touch-only! Single-function

34 Dus… Grote knoppen Meer tussenruimte tussen knoppen
Touch-friendly Meer tussenruimte tussen knoppen witruimte (Veel) minder interactie-items op het scherm Maak keuzes!

35 3. Belangrijkste doel van site?
Maak keuzes! Beperk mobiele site tot belangrijkste functies Onderzoek het primaire doel van je site en verwerk dat in mobiele versie Wees niet bang onderdelen te laten sneuvelen!

36 Dus… vs

37 En… vs

38 Meer mobiele richtlijnen
Minimaliseer tekstinvoer Maak gebruik van HTML-controls voor , website, datum Gebruik ingebouwde functionaliteit Telefoonnummers adressen/kaarten op map projecteren Gebruik gestandaardiseerde frameworks jQuery Mobile, Sencha Touch, WordPress-plugins Alleen webstandaarden (HTML, CSS, JavaScript) Nog meer richtlijnen: Geen Flash, geen Silverlight, geen andere plug-ins (PDF-reader, 360-graden fotografie) Ontwerp voor touch en non-touch (Stylus) Maak gebruik van CSS Media Queries (ingebouwd in Dreamweaver CS 5.5) om verschillende schermafmetingen te targetten. Ontwerp voor beperkte bandbreedte (weinig graphics, minimaliseer/gzip script en CSS)

39 Een kleine test…

40

41

42

43

44

45 Bedankt voor jullie aandacht
Vragen & discussie Vragen? Bedankt voor jullie aandacht @PeterKassenaar