5 planes by J.J Garrett
Surface: fotos & tekst
Skeleton: plaatsing van buttons, controls, fotos en blokken tekst
structure: hoe gebruikers naar die ene pagina gaan
scope: features & functions (v.b. opgeslagen shipping adress)
strategy: wat moderators en gebruikers uit de site willen halen
Elke van deze plane is dependent aan diegen onder hem.
content is koning
technologie kan net zo belangrijk zijn als content als je een succesvolle expirerence wilt
creëren.
Design Patterns:
Pattern: een probleem wat telkens terug komt en dan beschrijft de essentie van de oplossing
voor dat probleem.
in een design process zijn er field research, goals and task analysis, design models, empericial
testing, enough time.
je kan design patterns gebruiken bij het leren, voorbeelden, terminologie en als inspiratie.
Great user interface:
User interface: de manier waarop je taken volbrengt met een product, wat je er mee doet en
hoe het reageert daarop. Dus UI is niet hoe een product er uit ziet maar hoe het werkt.
een goede UI heeft: Clarity, concision, responsiveness, familiarity, consitency, aesthetics,
effiency en forgiveness (helderheid, beknoptheid, responsiviteit, vertrouwheid, consistentie,
schoonheidsleer, effiecient, vergiffenis)
, Clarity: een duidelijk interface
Concision: niet te veel informatie op een scherm.
Responsiveness: Snelheid, en of de gebruikers input goed wordt verwerkt door het systeem
familiarity: door bvb. Gebruik te maken van metaforen kunnen gebruikers objecten herkennen
consistency: het zorgt ervoor dat gebruikers het gebruik van patterns herkennen
aesthetics: als een interface er goed uit ziet is het meer fun om langer met de app bezig te zijn
efficiency: gebruikers kunnen productiever en sneller zijn door gebruik van shortcuts
forgiveness: help de gebruiker met een oplossing i.p.v. hem/haar te straffen voor de fout
1: Helderheid is de eerste en meest belangrijkste punt van elk interface. Interfaces bestaan om
interactie tussen mens en onze wereld.
5: beste interface is een die er niet is, d.m.v. directie manipulatie met objecten in de echte
wereld.
9: consistency matters: elementen die hetzelfde doen (blauwe tekst als link) moeten hetzelfde
eruit zien
14: progressive disclosure: laat alleen zien wat noodzakelijk is op elk scherm
16: zero state: het stadium waar nog niks in is gebeurd (the first time)
17: goed design is onzichtbaar
Hoe maak je een meer toegankelijk design voor mensen met een handicap:
screen readers: document taal in de html tag instellen, alt-tekst voor plaatjes, headings voor
tabellen, een link moet out-of-context nog steeds te begrijpen zijn, content moet makkelijk te
lezen zijn, knoppen met “skip to main”.
Keyboard only: Skip links, shortcutes/hotkey menus,
Hoofdstuk 2
CLi (Command Line Interface) alleen tekst-gebasseerd (command prompt)
GUI(Graphical User Interface) maakt gebruik van graphics voor vertoning van
informatie(WYSIWYG) (de opties bovenaan in word of de opties links in illustrator/photoshop)
NUI(Natural User Interface) NUI vertrouwt op aangeboren verstand uit de fysieke wereld
(WYDIWYG) (angry birds, wordfeud, pizza app en je toppings op de pizza slepen)
OUI(Organic User Interface)
Interactie stijlen:
Commandotaal: een commando bestaat over het algemeen uit een werkwoord, een onderwerp
en optioneel een of meer parameters. (command promt, tomtom)
Formulieren: een formulier bestaat uit vragen waarop de gebruiker antwoord moet geven
(pathe kaartje bestellen)
menu’s en dialogen: na het kiezen van een actie volt vaak een dialoog om detailinformatie op
te geven. Een menu mag max 7 keuzes hebben (menubalk, toolbalk).
Directie manipulatie: bij directe manipulatie voert de gebruiker acties direct op de informatie
uit. Directe visuele feedback van het resultaat van de acties. (dit vind je op touchscreens)
vraag en antwoord: het systeem stelt een vraag, gebruiker geeft antwoord, systeem stelt
volgende vraag etc. (trainkaart bestellen bij een NS apparaat op het station)
Natuurlijke taal: de meest natuurlijke vorm van natuurlijke taal is een “echt” gesprek voeren
met het systeem.
Surface: fotos & tekst
Skeleton: plaatsing van buttons, controls, fotos en blokken tekst
structure: hoe gebruikers naar die ene pagina gaan
scope: features & functions (v.b. opgeslagen shipping adress)
strategy: wat moderators en gebruikers uit de site willen halen
Elke van deze plane is dependent aan diegen onder hem.
content is koning
technologie kan net zo belangrijk zijn als content als je een succesvolle expirerence wilt
creëren.
Design Patterns:
Pattern: een probleem wat telkens terug komt en dan beschrijft de essentie van de oplossing
voor dat probleem.
in een design process zijn er field research, goals and task analysis, design models, empericial
testing, enough time.
je kan design patterns gebruiken bij het leren, voorbeelden, terminologie en als inspiratie.
Great user interface:
User interface: de manier waarop je taken volbrengt met een product, wat je er mee doet en
hoe het reageert daarop. Dus UI is niet hoe een product er uit ziet maar hoe het werkt.
een goede UI heeft: Clarity, concision, responsiveness, familiarity, consitency, aesthetics,
effiency en forgiveness (helderheid, beknoptheid, responsiviteit, vertrouwheid, consistentie,
schoonheidsleer, effiecient, vergiffenis)
, Clarity: een duidelijk interface
Concision: niet te veel informatie op een scherm.
Responsiveness: Snelheid, en of de gebruikers input goed wordt verwerkt door het systeem
familiarity: door bvb. Gebruik te maken van metaforen kunnen gebruikers objecten herkennen
consistency: het zorgt ervoor dat gebruikers het gebruik van patterns herkennen
aesthetics: als een interface er goed uit ziet is het meer fun om langer met de app bezig te zijn
efficiency: gebruikers kunnen productiever en sneller zijn door gebruik van shortcuts
forgiveness: help de gebruiker met een oplossing i.p.v. hem/haar te straffen voor de fout
1: Helderheid is de eerste en meest belangrijkste punt van elk interface. Interfaces bestaan om
interactie tussen mens en onze wereld.
5: beste interface is een die er niet is, d.m.v. directie manipulatie met objecten in de echte
wereld.
9: consistency matters: elementen die hetzelfde doen (blauwe tekst als link) moeten hetzelfde
eruit zien
14: progressive disclosure: laat alleen zien wat noodzakelijk is op elk scherm
16: zero state: het stadium waar nog niks in is gebeurd (the first time)
17: goed design is onzichtbaar
Hoe maak je een meer toegankelijk design voor mensen met een handicap:
screen readers: document taal in de html tag instellen, alt-tekst voor plaatjes, headings voor
tabellen, een link moet out-of-context nog steeds te begrijpen zijn, content moet makkelijk te
lezen zijn, knoppen met “skip to main”.
Keyboard only: Skip links, shortcutes/hotkey menus,
Hoofdstuk 2
CLi (Command Line Interface) alleen tekst-gebasseerd (command prompt)
GUI(Graphical User Interface) maakt gebruik van graphics voor vertoning van
informatie(WYSIWYG) (de opties bovenaan in word of de opties links in illustrator/photoshop)
NUI(Natural User Interface) NUI vertrouwt op aangeboren verstand uit de fysieke wereld
(WYDIWYG) (angry birds, wordfeud, pizza app en je toppings op de pizza slepen)
OUI(Organic User Interface)
Interactie stijlen:
Commandotaal: een commando bestaat over het algemeen uit een werkwoord, een onderwerp
en optioneel een of meer parameters. (command promt, tomtom)
Formulieren: een formulier bestaat uit vragen waarop de gebruiker antwoord moet geven
(pathe kaartje bestellen)
menu’s en dialogen: na het kiezen van een actie volt vaak een dialoog om detailinformatie op
te geven. Een menu mag max 7 keuzes hebben (menubalk, toolbalk).
Directie manipulatie: bij directe manipulatie voert de gebruiker acties direct op de informatie
uit. Directe visuele feedback van het resultaat van de acties. (dit vind je op touchscreens)
vraag en antwoord: het systeem stelt een vraag, gebruiker geeft antwoord, systeem stelt
volgende vraag etc. (trainkaart bestellen bij een NS apparaat op het station)
Natuurlijke taal: de meest natuurlijke vorm van natuurlijke taal is een “echt” gesprek voeren
met het systeem.
