HAN - ReDesign -Introductie The Elements of User Experience Design

ICA

Re-design

Lammert [email protected]

Re-design

2Opdracht

• Maak een magazine over het merk- ik.

• Maak een website ontwerp om je magazine te promoten

3Ontwerp een website

Ontwerp de homepage en een pagina waar men jouw magazine kan bestellen.

4Ontwerpen van een website

Hoe ontwerp je een website?

5Hoe ontwerp ik een website

Jesse James Garrett

6Hoe ontwerp ik een website

7AJAX?

8Ajax!

AJAX Asynchronous

JavaScript and XHTML

9The Elements of UX-Design

10The Elements of UX-Design

11Ontwikkeling van het web

Web 1.0Get noise

Web 2.0Make noise

Web 3.0Filter the noise

Web 4.0…

12Ontwikkeling van het web

De interactie op het web is steeds rijker

13Ontwikkeling van het web

Niet meer gebonden aan een computer

14Ontwikkeling van het web

Locatie onafhankelijk

15The Elements of UX-Design

16Strategie

Bepaal de strategie

17Strategie

• Wat is het doel• Wat zijn de succesfactoren• Wat zijn de

gebruikersbehoeften

18Strategie

Wat is het doel

• Het verhogen van de conversie van onze producten

• Bezoekers informeren over onze nieuwe diensten

19Strategie

Bepaal de succesfactoren

• Verhoging van de conversie met 2%

• Bij een steekproef onder onze bezoekers is 25% op de hoogte van onze nieuwe dienst

20Strategie

Wat wil de gebruiker

Doel afstemmen op de behoefte van je doelgroep / gebruiker

21Strategie

PersonaDeze persoon staat

representatief voor een gebruikersgroep

22Scope

Bepaal de scope

23Scope

“The work that needs to be accomplished to deliver a product service or result with the specified features and functions."

24Waarom een scope

Zodat je weet wat je wel bouwt maar ook wat je

niet bouwt

25Scope

Definieer de functionaliteiten

26Scope

Definieer de content elementen

27Structuur

Bepaal de structuur

28Structuur

•Interactie model•Informatie architectuur•Team structuur en rollen

29Structuur

Interactie modelHoe reageert het systeem op de gebruiker.

30Structuur

31Structuur

Informatie architectuurHet rangschikken van de content in het ‘informatie domein’

32Structuur

Team structuur en rollenBepaal wie welke rol heeft binnen het project.

33Structuur

34Skeleton

Bepaal het raamwerk

35Skeleton

•Information Design•Interface Design•Navigation Design

36Skeleton

Information DesignPresenteren van informatie zodat het de gebruiker ondersteund bij het begrijpen de informatie/systeem.

37Skeleton

Information Design

38Skeleton

Information Design

39Skeleton

Interface DesignHet rangschikken van interface elementen zodat de gebruiker met het systeem kan interacteren.

40Skeleton

Interface Design

41Skeleton

Interface Design

42Skeleton

Navigation DesignOntwerp van de navigatie over meerdere schermen binnen de informatie architectuur

43Skeleton

44Skeleton

Bepaal het design

45Design

•Eye tracking•Contrast en uniformiteit•Consistentie•Kleur en Typografie•Styleguides

46Design

47Design

48Design

49Design