USER INTERFACE DESIGN SELWYN



Vergelijkbare documenten
Een eerste applicatie

Stedelijk Museum. Ontwerpspecificatie. VMBO leerlingen interactieve rondleiding. Meesterproef Minor UXD V Jasper Bunschoten

afdruk: 26 november 2015 blz. 1

Tap is the New Click Werkgroep 2

1. Over LEVIY 5. Openen van de activiteit 2. Algemene definities 6. Inloggen op het LEVIY dashboard 3. Inloggen 6.1 Overzichtspagina 3.

Individuele opdracht: Anh Nguyen Embodied Learning

Web Usability. Byte seminar, 23 november Door: Gwyneth Ouwehand

a. Is dit een beschrijving van een concrete use case, een essential use case, een task scenario of een use scenario?

Gebruiksvriendelijkheid. Introductie. Onderwerpen Student Informatiekunde Universiteit Utrecht. Webdesigner Piozum

Installatie van Linux Mint 13 (xfce)

Hoofdstuk 7: Als Excel vastloopt

5. Documenten Wat kan ik met Documenten? 1. Over LEVIY. 5.1 Documenten terugvinden Uitleg over vinden van documenten.

Het maken, plaatsen en beheren van symbolen (blocks) In deze beschrijving zijn de afbeeldingen uit de windows versie van AutoCad 2013

Leerpaden maken. 1. Account en wachtwoord. 2. Maak een nieuw leerpad aan. 3. Inhoud aan een leerpad toe voegen. 4. Structuur aanbrengen op een pagina.

Expert review Reservatiesysteem

Ga naar en log in met de gebruikersnaam en wachtwoord verkregen via mail.

HANDLEIDING Windows XP Deel 1

AAN DE SLAG SYMWRITER INSTALLEREN. Aan de slag met Communicate Symwriter.

iphone app - Rapporten

Shell Card Online e-invoicing Service Gebruikershandleiding. Versie 2.8

Handicom. Symbol for Windows. Image Manager. (Versie 3) Handicom, 2006, Nederland

Card sorting Sitemap Use case. Wireframes Schermontwerpen Stijlgids. Niet in les gedaan! Via je einddocument. Verkennen. Genereren.

4.4 Voeg ruimtes toe Hoe ga jij te werk? 1. Over LEVIY. 4.5 Aanwezigen Zijn er aanwezigen bij de DKS-controle? 2. Algemene definities. 3.

Oriëntatie Kunstmatige Intelligentie. Cognitieve Ergonomie Niels Taatgen

Agenda. Hier kan u het volgende instellen: 1. Afspraak 2. Gebeurtenis 3. Memo 4. Uitvoeren van taak. De volgende schermen zijn beschikbaar:

Databases - Inleiding

ViSoft Premium. Nieuw in Update NIEUWE FUNCTIES. worden dan automatisch alle profielen vervangen en in 3D getoond.

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet EXED CMS UITLEG

Werken met de (Windows7) Verkenner. Maarn, 26 oktober 2010 Harry Moerkerken

Via methodewebsite www w.emma.eisma.nl of de ELO van de school

Introductie Werken met Office 365

Eocortex handleiding voor eindgebruikers

Handleiding voor de update naar TouchSpeak 10 op Windows XP

LegManager Mobile Handleiding

INTERACTIE. In de Appendix vindt u de wireframes.

Web Handleiding. semper vigilant Fall 2014 LOCALBOX 1.1.3

HANDLEIDING EXTERNE TOEGANG CURAMARE

Tips en Trucs voor gebruik website

Quickstart. Browser instellingen

Web Games en het mobiele web. Hoorcollege Webdesign 9 6 juni 2014 Christof van Nimwegen

Deze week: - Bespreken 2 websites - kleur - MBTI - Opdracht wat moet er voor volgende week af zijn?

Inloggen. In samenwerking met Stijn Berben.

SportCTM 2.0 Sporter

Windows 8, Windows 8.1, deel II

MILLEDONI.NL OP MOBIEL. Door: Sijmen Vos, , klas v1-05 Docent: Koop Reynders Datum: 17 februari 2014

MS PowerPoint Les 2. Wanneer we niet te veel tijd willen steken in de opmaak van onze presentatie, kunnen we gebruik maken van sjablonen.

+XLVZHUN:LQGRZV$SDFKHLQVWDOODWLH

Hoofdstuk 9 : Ocad naar je hand zetten

Rob Duits Sander Helling Xander Knol André van de Polder Paco Josée Klas: Rood. Onderzoeksrapport. Medialandschap

BASIS GEBRUIK CTI CLIENT

De multimodale interface van de smartphone. Hester van Slooten

Team 406. Goedkeuring Uitvoering Controle Goedkeuring Ver. Naam Datum Naam Datum Naam Datum

Delmation Products BV Tel: +31 (0)

Point2Share handleiding eindgebruikers Window 8

Analyseverslag. Mobile Concepting 16 maart Rogier Wijnands Jelle Clignet Tom Bessems

Voordat je de software kunt gebruiken, moet je controleren of aan de volgende voorwaarden is voldaan:

Summa Cutter Tools. 1 Cutter tools. Met dit programma kunnen twee dingen geïnstalleerd worden:

Download DIGIPRAAT in de Google playstore! Zoek naar eu.desmidt om DIGIPRAAT en DIGITAAL te vinden!

iphone app - Roll Call

U kan een nummer invoeren via de witte zoekbalk boven de contactpersonenlijst. Door op enter te drukken, belt u uit.

Windows 8.1. Wat brengt Windows 8.1 ons voor nieuws. Hoe zit het nu met de Startknop. En nog iets meer. HCC-Haaglanden Tim Woldring

Aan de slag met L2S. versie 8

Workshop voorbereiden Authentieke instructiemodel

STORYBIRD. Stap 1: account aanmaken

ebir th ebirth Configuraties voor het gebruik van de webtoepassing V1.3

Installeer de C54PSERVU in Windows Vista

Handleiding. KERN enquête systemen

Handleiding Decentrale Validatiemodule istandaarden

DB Alerts vernieuwde app voor Android gebruikers

iphone app - Timesheet

Tips & Tricks: Tip van de maand Mei NX6 User Interface

FAQ (veel gestelde vragen) nieuwe website

Contict Drive Versie 3.0 Laatst herzien: juni 2016

Handleiding Employ UrenOnline Opdrachtgevers

Welkom op de testsite van kunstcms!

Handicom. Symbol for Windows. Image Manager. (Versie 4) Handicom, 2011, Nederland

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR

Instellingen. Instellingen

ZIVVER Gebruikershandleiding

Delen van een Arrangement

Er wordt door veel mensen opgezien tegen de overstap

Scherzando digitaal studeren

Visual interface design

Handleiding Mplus Touch Screen Kassa. Module T Uurregistratie

Aan de slag met Windows 10

Handleiding HBO GO V.2

fotofabriek.nl Handleiding software downloaden & installeren

F U N C T I O N E E L O N T W E R P V O O R F U L L H O U S E M O B I LE ( V I S I O N V E R S I E )

ONSCREENKEYS 5. Windows XP / Windows Vista / Windows 7 / Windows 8

Gebruiksaanwijzing Samsung PV 210 Tablet PC. Inhoudsopgave

Bewerk uw eigen Digibordbij boek

Mitchel Anneveldt V Ontwerpdocument Design pattens - NS - Mitchel Anneveldt V

Release datum: 11 juni 2012

Handleiding (Windows) Instellen Add-ons:

Xiris handleiding Onderhoudsmodule & database onderhoud

Transcriptie:

USER INTERFACE DESIGN SELWYN PDF / SELECTIE Blackboard 15 Universal Design Principles o Affordance Aan de fysieke kenmerken is al af te leiden hoe iets gebruikt kan worden o Chunking Informatie in kleine eenheden of brokken is gemakkelijker te vewerkeen en te onthouden. o Constraints Kans op fouten verkleinen door bepaalde handelingen te bepeken. o Control Mate van controle koppelen aan niveau van kennis en ervaring van gebruiker. o Forgiveness Help fouten vermijden en laat gemaakte fouten eenvoudig herstellen. o Hick s law Beslissingstijd neemt steeds toe met meer alternatieven. o Interference effects: Concurrende mentale processen zorgen voor langzamere en minder accurate verwerking o Mapping Heldere en natuurlijke relatie tussen handeling en gekoppelde respons o Mental model Mensen interpreteren systemen volgens modellen van dingen die ze al kennen o Performance load Hoe groter de inspanning voor een taak, hoe kleiner de kans dat het zal lukken. o Progressive disclosure Noodzakelijke informatie word stapsgewijs aanboden pas wanneer het nodig is. o Proximity Elementen die bij elkaar staan lijken met elkaar te maken te hebben o Recognition over recall Het geheugen is beter in herkennen dan in herinneren o Serial position effect Items aan begin en eind van de lijst worden beter onthouden o Visibility Groter gebruiksgemak als duidelijk te zien is hoe iets werkt. User: voor wie, welke mensen/gebruikers, welke contextuele restricties en mogelijkheden Interface: interactie in brede zin (want niet in alle concepten is bijv. website van strategisch belang) Design: ontwerpen, inzichtelijk maken, oplossen

BOEK Universal Principles of Design 80/20 rule : Wilt zeggen dat 20% van de variablenen voor 80% word gebruikt. Voorbeeld : 80 procent van de stoplichten van de stad is maar op 20 procent van de wegen. 80 procent van het process komt met 20 procent inzet. Affordance: Een affordance zegt iets over de interactie tussen een ding en een mens (of dier of naar mijn mening zelfs plant). Een ding heeft bepaalde eigenschappen en een mens reageert daarop. Bijvoorbeeld: een trap biedt een affordance om erop te klimmen (een klimaffordance ) Chunking: Informatie opdelen in kleine onderdelen en deze te onthouden is makkelijk dan de gehele brok informatie. Bijvoorbeeld : Inplaats van een geheel telefoonnummer in een keer op te slaan maak je eerste kleine groepjes (chunks) 06123456 > 06 12 34 56 Consistency: De usability van een systeem wordt beter als gelijkende delen op dezelfde manier wordt getoond. Er zijn vier soorten: o Aestethic (Esthetisch): bv. Het Mercedes logo, altijd voorop de auto o Functioneel: een geel licht, voor een rood licht en de knoppen op een videospeler en een blu-ray spelen. o Intern: binnen een bepaalde context (vb. borden in een park) o Extern: noodgevalsirenes zijn hetzelfde bij alle systemen in een kamer (systemen = extern) Control: Het controle-niveau zou gerelateerd moeten zijn aan de ervaring en de kunde van een gebruiker.het saven van documenten kan iedereen (laag controle-niveau), maar alle sneltoetsen gebruiken niet. Bij het designen van een systeem moet je daar rekening mee houden. Forgiveness: Designs zouden ervoor moeten zorgen dat mensen minder fouten maken en het aantal negatieve consequenties te minimaliseren. Key functions: o Good affordance: zorg ervoor dat iets eruit ziet als zijn correct use o Reversibility of actions: laat mensen iets overnieuw doen o Safety nets: zorg voor een vangnet als er iets misgaat o Confirmation: laat mensen iets verifiëren o Warnings: geef gebruikers een waarschuwing o Help: bouw een help-functie Hick s law: Hoe meer keuzes je hebt, hoe langer je erover doet om een beslissing te nemen Er zijn vier stappen in het beslissingsproces: o 1. Identificeer het probleem of het doel o 2. Bekijk de opties die je kunt om het doel te bereiken ( bij meer opties duur het langer ) o 3. Kies een optie o 4. Voer de optie uit

Interference effects: Een fenomeen waarbij mentale processen langzamer en minder accuraat gebeuren doordat er meerdere conflicten zijn in het mentale geheugen o Stroop interference: als de stimulus (psy) conflict met wat we waarnemen, zoals deze tekst is wit o Garner interference: bijvoorbeeld als er een vorm een naam moet krijgen, maar naast vormen staan die veranderen o Proactive interference: bestaande memories geven conflicten als je aan het leren bent o Retroactive interference: leren geeft conflicten met bestaande memories, zoals bij het aanleren van een nieuw mobiel nummer. Mapping: Een relatie tussen controls en hun beweging of effecten. Betere mapping resulteert in gemakkelijker gebruik Vb. zoals als je een wiel draait, verwacht je ook dat je auto stuurt. Mental Model: Gebruikers begrijpen en interacten meer met een systeem en een omgeving als ze zijn gebaseerd op een mentaal model, geleerd door ervaring. o System models (zo werkt een systeem) o Interaction models (zo interacteren mensen met een systeem) Performance Load: Hoe groter de moeite om een taak te volbrengen, des te kleiner de kans dat deze succesvol wordt volbracht. o Cognitive load: de mentale activiteit die vereist is om een doel te bereiken o Kinematic load: de fysieke activiteit die vereist is om een doel te berieken Progressive Disclosure: Een strategie om complexheid van informatie te managen door alleen nodige of opgevraagde informatie weer te geven. ( read more button ) Dit wordt gebruikt om de gebruiker niet met informatie dood te gooien, maar ze langzaam door een systeem heen te leiden. (bijvoorbeeld ook door een more button in een website). Vooral als gebruikers nieuw zijn of niet de gewenste ervaring hebben kan dit helpen. Ook worden ze minder snel gefrustreerd. Proximity: Objecten of gebeurtenissen die in de buurt te een ander (in ruimte of tijd) worden beschouwd als behorend amen als een eenheid Recognition over Recall: Het geheugen om dingen te herkennen is beter dan het geheugendeel om dingen te herinneren. Bijvoorbeeld: Zo is het makkelijker om multiple-choice vragen te beantwoorden omdat je dan ziet wat je moet zien en daaruit kan kiezen, dan als je een open vraag moet beantwoorden en je je iets moet herinneren. Serial Position Effects: Een geheugen-fenomeen waarbij items of informatie die aan het begin en het eind van een lijst worden getoond, makkelijker terug te roepen zijn dan dat wat er in het midden van een lijst is getoond.

o o Primacy (aan het begin) effects gebeuren omdat deze efficiënter worden opgeslagen in het lange-termijn geheugen. Recency (aan het eind) effects geberuen omdat je deze dingen als laatste hebt gehoord en dit werkt alleen vlak na het zien van een lijst. Als je aan iets anders denkt, nemen deze de plaats in van de lijst. Visibility: De usability van een systeem wordt verbeterd wanneer duidelijk zichtbaar is wat de status is van een systeem en de methode die het gebruikt. Vb. een dowload balkje met percentage en resterende tijd.

SHEETS User Interface Design Command-line interfaces: Wil dat zeggen dat de gebruiker het aanspreekt aan de hand van regels tekst die een of meerdere opdrachten bevatten ( DOS ) Menu: Dat je een commando geeft doormiddel van menu s denk hierbij aan Start balk van windows. Of opdrachten balk van mac. WIMP interface: Staat voor Windows Icons Menus en Pointer. Hierbij moet je denken aan he totaal beeld van je bureaublad. Direct manipulation: Het invoeren van een opdracht zonder een bediengspaneel of object. Bijvoorbeeld een smartphone met touch screen dat je direct kan besturen zonder een muis of toetsenbord Natural language interaction: Interactie doormiddel van stem herkenning. Denk hierbij aan SIRI van iphone. Waardoor je door je stem opdrachten kan laten uitvoeren. Non-command interaction: Hierbij moet je denken aan middelen om iets te besturen zonder een opdracht. Bijvoorbeeld het kijken met je ogen als dat getraceert word en zo door een pagina heen bladert zonder iets te doen of zeggen. interface idiomen: diverse typen of stijlen van interactie, ieder met zijn eigen vocabulair van objecten, handelingen en visuals. Bijvoorbeeld dat je per verschillende programme een andere interface krijgt. GUI: graphical user interface: Een grafische gebruikersomgeving (ook wel aangeduid met het Engelse Graphical User Interface, afgekort GUI, vaak uitgesproken als "goewie") is een manier van interactie met een computer waarbij grafische beelden, widgets en tekst gebruikt worden. In computerjargon wordt ook wel gesproken van een frontend. o Objecten Eigenschappen = uiterlijk, zichtbaardheid Gedrag = wat doet ie en waarom? Verwachting van het object / het openspringen van een applicatie ziet er tegenwoordig anders uit dan Relaties = vorm en gedrag van scroll balk afhankelijk van o.a. lengte van pagina/inhoud en breedte/lengte van geul waarin deze bewogen moet kunnen worden ook pagina-object met tekst-objecten links zal verplaatsen door positie-verandering van blauwe knop GUI = graphical user interface TUI = tangible user interface NUI = natural user interface XUI = extensible user interface Eerst kon je opdrachten invoeren doormiddel van command line s toen via invoer apparaten zoals muis en toetsenbord. Nu is het tegenwoordig 3D en touch / Spraak opdrachten uitvoeren maar wat is de toekomst?