interaction design 1.4: wireframes

Interaction Design 101 Vragen of feedback? @ferrydendopper

Wireframes

De blauwdruk van het systeem


Waarvan maak je wireframes?

Pagina’s en templates

Componenten


Low-fidelity


High-fidelity


Prototype

Oxxio Pakkettest


Wat is de juiste vorm?

It depends!

Wat is het doel?: brainstorm, concept visualiseren of ontwerp documenteren.

Wie is de ontvanger?: jijzelf, developer die iedere dag naast je zit of team van een ander bedrijf.

… oftewel de context!


Verschil wireframes - eindproduct

Klikbaar prototype

Echte content

Functioneel kleurgebruik

Kan huisstijl in grove lijnen

volgen


Voordelen van wireframes

Snelle, gemakkelijke, goedkope manier om interface-concepten te presenteren

Focus op logica, gedrag en functionaliteit Snelle iteraties van ontwerpconcepten


Uitdagingen voor wireframes

Realisme: Past de content wel? Past het wel op het scherm?

Dynamiek: Met HTML / CSS / Javascript kun je pagina’s heel dynamisch maken, maar hoe communiceer je dat op een platte tekening?

Zorgen: Klanten maken zich snel zorgen over van alles en willen dus zo goed mogelijk zien hoe ‘het’ wordt. Maar is het bijna ondoenlijk om al die vragen te beantwoorden.


Wat wel, wat niet?

Wel:• Welke typen informatie komen er op de pagina?• Wat is de relatieve prioriteit van de verschillende

pagina-onderdelen? Niet:

• Hoe komt de content er exact uit te zien?• Waar ligt de ‘vouw’?• Hoeveel tekens mag ieder veld bevatten?• Hoeveel pixels mag dit plaatje worden?• Kunnen we deze blokken mooier uitlijnen?• Kun je die hoeken rond maken?

Proberen deze

vragen te

beantwoorden, leidt

af van het

hoofddoel van

wireframes.


Gereedschapskist

Basis-gereedschap


Software

Ideaal: Axure Balsamiq

Minder ideaal: Visio / Omnigraffle Illustrator / Fireworks / Photoshop

Verre van ideaal: Powerpoint / Word etc.


Anatomie van een wireframe

Lagen:1. Vlakken2. Plaatsing (lay-out) van functionele

elementen3. Invulling van functionele elementen4. Labeling5. Content6. Grid7. Esthetische elementen


Laag 1: Vlakken (website)


Laag 1: Vlakken (KvK.nl homepage)


Laag 1: Vlakken (Android TV-gids app)


Oefening (gezamenlijk)

• Eerst laptops dicht! Pak pen en papier.

• Maak een wireframe van MS Outlook (of een ander e-mailprogramma)• Welke functionele elementen zijn er? • Start met een vlakkenindeling


Laag 1: Vlakken (Outlook)


Oefening (gezamenlijk)

• Maak een wireframe van MS Outlook (of een ander e-mailprogramma)• 2. Geef de vlakken een grove invulling


Stap 2


Stap 3


Stap 4


Wat communiceert een wireframe?

Waar je bent; Wat je kunt doen / waar je naartoe kunt; Liefst ook waar je vandaan komt; Wat belangrijker is dan het andere (visuele

hiërarchie); Wat bij elkaar hoort (clustering); Hoe de elementen zich gedragen.


Visuele hiërarchie


Relatief gewicht

Hoe hoger op de pagina, hoe belangrijker.

Maar ook:Hoe groter het vlak, hoe belangrijker (zelfs als het iets lager staat)

Waar ligt het omslagpunt?


Prioriteren door stijlen gebruiken


Clustering: Gestalt principes

Sommige lay-out eigenschappen zitten ingebakken in onze visuele systemen: Proximity Similarity Continuity Closure


Proximity


Similarity


Continuity


Closure


Gedrag van elementen


Dummy content of echte content?


(960) Grid?


Documenteren met annotaties

1

2

3

4

5

6

1 Ribbon navigatie

7

2 Snel-links naar favoriete mappen

3 Klik op [+] om map open te klikken

4 Switch tussen e-mail, kalender, contacten en taken.

5 Zoek binnen de geselecteerde map

6 Klik vlag aan om e-mail te markeren als actiepunt

7 Foto van afzender (indien beschikbaar in adresboek)


Documenteren met annotaties


Maar hoe je ook eindigt…

Begin met schetsen!


Verder met je opdracht

• Ontwerp wireframes Ter overdracht, dus high fidelity met annotaties, maar start met schetsen!

Complete opdracht inleveren: week 10.(Zorg ervoor dat je volgende week min. 80% klaar bent, want er volgt nog een opdracht!)


Volgende week

• Masterclass Axure RPom (nog) verder te gaan met wireframe’s