Usability & Interface Design



Vergelijkbare documenten
Wat is Interaction Design?

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR

Functioneel ontwerp. Navigatie

Usability. Ontwerp processen. Interaction Design Les 1. in relatie tot

DE EERSTE STAP NAAR EEN ONVERGETELIJKE GEBRUIKERSERVARING

USABILITY VOOR HET WEB EN MOBIELE APPARATEN PETER KASSENAAR

Design rationale document. Rabobank.com

WEBSITE USABILITY. white-paper

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

SBO WEBSITES BOUWEN IN 7 STAPPEN

Stagebedrijf: Zwiers communicatiebureau Corporate- en Arbeidsmarktcommunicatie. Opdrachtgever: De RIBW KAM Regionale instelling Beschermt Wonen

Van persona s en scenario s naar wireframes. Lay-out met grid

Pieter Geneugelijk 4H3

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

Nieuws sites hebben een krantachtige vormgeving; de informatie staat voorop.

V2H door Jelmer Achenbach & Berthjan Achterop v 1.0

Van concept naar een klikbaar prototype

Websitecheck. Taak en Tekst voor websites die werken.

Algemene regels. Stappenplan webdesign

Quickscan Webrichtlijnen

Handleiding Weebly. Maken van een nieuwe website. Klik op de + en kies voor Site toevoegen.

Succesvol websites bouwen vanuit een concept

Dennis Wagenaar v 1.0

Checklist voor een knallende website

Iconen. Voordelen van goede iconen. De iconen waar het bij deze opdracht om gaat zijn:

5 manieren om. om jouw landingspagina. te optimaliseren

Nieuwe dimensies in gebruikerservaring en design

Usability. Les 3 jaar 2. Ontwerp doelstellingen en randvoorwaarden

Een gebruiksvriendelijk dashboard voor leerlingen en docenten

Usability & Ontwerp processen. Les 4

Betalen? Met de kaart uiteraard! Stijlgids - 30/05/ V1.0

15 tips voor een goede website. Dieneke Van Eijk

Voorbereiding website

Game Usability. Les 3 jaar 2. Ontwerp doelstellingen en randvoorwaarden

onderzoek ontwerp realisatie implementatie

Quickscan Webrichtlijnen

Inhoud Atik. Instellingen Meer informatie over het instellen van uw Atik thema. Functies Meer informatie over de geintegreerde functionaliteiten.

Maak een vormgeving (geschikt voor meerdere devices), met een duidelijke huisstijl en visual, die aansluit bij jouw doelgroep, waarbij je rekening

A Inhoud. 2. De identiteit van de eigenaar van de website en het doel van de website staan genoemd.

Gedaan: Logo Communicatie middel(en) Inrichtingsplan. Nog te doen: - Website - Balie - Promotie item

DFI Models & Processes Herkansingsklas 1 (V207) Nienke Griffioen [REDESIGN RTL GEMIST.NL DFI OPDRACHT]

HUISSTIJLHANDBOEK. Huisstijlhandboek GGD Brabant-Zuidoost Versie 1.0

Succesvol dankzij het juiste design Ilse Kroes UX-designer van Vevida.

Haal meer uit je website

Xsite - easy content management

Castor. Documentatie

Test-plan 2 Project Portfolio

User Centered Design en CRO. Gastcollege Windesheim Marlies Wilms Floet

Grote Beer TR Rotterdam

Remco Slager Ruben van Uden. Website-usability. Hoe is de usability van een website te optimaliseren?

Project Het Parool. Media, Informatie en Communicatie. Propedeuse. Ontwerpdocument Beeld

Checklist. Een nieuwe website, hoe begin ik er aan?

Trek een kaartje met: 1. Doel 2. Doelgroep 3. Onderwerp (dit is een globaal onderwerp en moet door jezelf nader worden bepaald)

Aan de slag met de verenigingswebsite Beknopte starthandleiding. 1. Inlogscherm en startscherm

Creat4u. COMPLETE WEBSITE. voor ondernemers. 47,50,- per maand zonder opstartkosten. ONZE VOORDELEN! EEN ALL-IN WEBSITE

Project Portfolio Usability Testverslag. Test 1: Portfolio Thomas Meiborg

WHITEPAPER. Wat is een. Responsive website? Voordelen van een. Responsive website? Hoe start je met een. Responsive website? RESPONSIVE WEBSITES

Digitale didactiek. Docentendagen. Diny Ebrecht Marjo Stalmeier Open Universiteit

HOE WORD JE HET EERSTE ZOEKRESULTAAT?

CHECKLIST WENSEN & EISEN

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

Uw website gebruiksvriendelijk, vindbaar en toegankelijk

Botein. Documentatie

VrijdagOnline Leonard Springerlaan KB Groningen t e. w. vrijdagonline.nl

Expert review Werk.nl door Bart van de Biezen en Mila Witjes 27 april 2012

Welkom. Internet Marketing zonder grenzen. door: Daisy Leenders

Hoi, ik ben Bart Snoek, grafisch- en webdesigner. Dit is mijn portfolio.

Wat zijn de doelstellingen van uw. actief zijn? Online marketing: het belang van internet en je website. TenZer niet het eerste idee

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

Ontwerpprincipes grafisch ontwerp. Dit document maakt onderdeel uit van Spoorbeeld, beleid voor de spoorbranche. versie september2012

Regeling Verzekeringskaarten. Regeling. Verzekeringskaarten. Vertrouwelijk 1 Alleen voor intern gebruik

Usability Testrapport

Haal meer boekingen uit uw website! Meer bezoekers, meer boekingen, meer gasten Tommy Bookingsupport & TenZer

Template instellingen

Voorbeeld communicatiemiddelenanalyse. Basisschool anoniem

Radboudumc online: Hoe stel je de patiënt centraal in een omnichannel oplossing? Mobile Healthcare Event 24 november 2017 Yno Papen

Checklist nieuwe website

Huisstijlhandboek. Richtlijnen voor het gebruik van het logo. Dienst Communicatie. Tel v 1.

BRANDBOOK K E S KIES 2017

Zoekmachine Optimalisatie (SEO)

make things ETA by Boudewijn Naaijkens

Transcriptie:

Usability & Interface Design Marco Corrò

Usability & Interface Design Interface Design = de vormgeving van de grafische gebruikersinterface van een website Usability = Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context. Usability = De mate waarin een product gebruikt kan worden door specifieke gebruikers om specifieke doelen te bereiken in een specifieke gebruikerscontext, tegen optimale effectiviteit, efficiëntie en tevredenheid.

Usability Tevredenheid Gebruikerscontext Usability Efficiëntie Effectiviteit

Kernbegrippen Effectiviteit: nauwkeurigheid en volledigheid waarmee gebruikers gespecificeerde doelen bereiken. Efficiëntie: middelen die worden verbruikt in relatie tot de nauwkeurigheid en volledigheid waarmee gebruikers doelen bereiken. Tevredenheid: vrijwaring van ongemak en positieve houdingen ten opzichte van het gebruik van het product.

Voorbeeld

Maar waar draait het nu echt om? Functionaliteit Doet de site datgene wat de gebruiker ervan verwacht? Gebruiksvriendelijkheid Kan de gebruiker op eenvoudige wijze de door hem gezocht informatie tot zich krijgen? Gebruikerservaring of gebruikersbeleving Hoe ervaart de gebruiker zijn bezoek aan de site? (User experience)

Afstemming Marketing Techniek Interface ontwerp Grafisch ontwerp

Marketing en design - keuzes Gebruiker = Middelpunt User centered design De gebruiker wordt centraal gesteld. Zeer diepgaande kennis van de gebruiker/mens/doelgroep is in deze van essentieel belang. Vrij vertaald: de menselijke benadering. Activiteiten van de gebruiker = middelpunt Activity centered design Wat doet een gebruiker op de betreffende doelgroep? Wat zijn zijn/haar activiteiten en hoe moet de interface daarop afgestemd worden? Vrij vertaald: de functionele benadering.

Nederlandse statistieken Bezit personal computer thuis BRON: Centraal Bureau voor de Statistiek http://statline.cbs.nl/

Nederlandse statistieken (2) Internet toegang BRON: Centraal Bureau voor de Statistiek http://statline.cbs.nl/

Nederlandse statistieken (3) Frequentie internetgebruik BRON: Centraal Bureau voor de Statistiek http://statline.cbs.nl/

Nederlandse statistieken (4) Type internetaansluiting, naar achtergrondkenmerken, 2005 BRON: 1) Centraal Bureau voor de Statistiek http://statline.cbs.nl/

Nederlandse statistieken (5) Type internetaansluiting, naar achtergrondkenmerken, 2005 BRON: 1) Centraal Bureau voor de Statistiek http://statline.cbs.nl/

De eerste indruk Domeinnamen, subdomeinen Paginatitels zijn ze logisch en relevant? Favicon adresbalk icoon Herkenbaarheid logo, slogan, etc? Hoofd- en subnavigatie

Domeinen en subdomeinen

Herkenbaarheid Subdomein.domein.toplevel domein Favicon Titel Hoofdnavigatie Logo en slogan

Herkenbaarheid - Logo

Herkenbaarheid - Logo

Navigatiestructuren

Navigatie en meer

Hyperlinks Zorg dat de bezoeker te allen tijde weet waar hij zich in de site bevindt. Gebruik broodkruimels of tabbladen. Zorg indien visueel verantwoord dat de bezoeker kan zien waar hij al is geweest. Gebruik visited links. Hyperlinks moeten herkenbaar zijn. Hyperlinks hebben het alleenrecht op underlines.

Voorbeelden

Kleurgebruik Huisstijl(kleuren) vaak uitgangspunt. Laat de huisstijl niet prevaleren boven leesbaarheid (zie voorbeeld 538). Denk aan voldoende contrast. Denk na over de betekenis van kleuren Houd rekening met kleurenblindheid Kleuren spreken soms boekdelen Gebruik teksten of symbolen in aanvulling op kleuren

Voorbeelden

Overige belangrijke zaken Tekstgebruik Keuze voor lettertypen Lettergrootte Tekstkleuren Gebruik van multimediatoepassingen Welke plugins zijn nodig (flash, java, etc.) Geluid Video Documenten (PDF, Flashpaper, etc.) Accessability/Toegankelijkheid Hoe toegankelijk is de site voor mensen met en zonder handicap? www.drempelvrij.nl De logica is de basis van usability

Vragen? Marco Corrò marco@zoccolo.nl