HAN - ReDesign -Introductie The Elements of User Experience Design

49
ICA Re-design Lammert Postma [email protected] Re-design

description

Presentatie voor de studenten van de HAN voor het vak ReDesign

Transcript of HAN - ReDesign -Introductie The Elements of User Experience Design

Page 1: HAN - ReDesign -Introductie The Elements of User Experience Design

ICA

Re-design

Lammert [email protected]

Re-design

Page 2: HAN - ReDesign -Introductie The Elements of User Experience Design

2Opdracht

• Maak een magazine over het merk- ik.

• Maak een website ontwerp om je magazine te promoten

Page 3: HAN - ReDesign -Introductie The Elements of User Experience Design

3Ontwerp een website

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

Page 4: HAN - ReDesign -Introductie The Elements of User Experience Design

4Ontwerpen van een website

Hoe ontwerp je een website?

Page 5: HAN - ReDesign -Introductie The Elements of User Experience Design

5Hoe ontwerp ik een website

Jesse James Garrett

Page 6: HAN - ReDesign -Introductie The Elements of User Experience Design

6Hoe ontwerp ik een website

Page 7: HAN - ReDesign -Introductie The Elements of User Experience Design

7AJAX?

Page 8: HAN - ReDesign -Introductie The Elements of User Experience Design

8Ajax!

AJAX Asynchronous

JavaScript and XHTML

Page 9: HAN - ReDesign -Introductie The Elements of User Experience Design

9The Elements of UX-Design

Page 10: HAN - ReDesign -Introductie The Elements of User Experience Design

10The Elements of UX-Design

Page 11: HAN - ReDesign -Introductie The Elements of User Experience Design

11Ontwikkeling van het web

Web 1.0Get noise

Web 2.0Make noise

Web 3.0Filter the noise

Web 4.0…

Page 12: HAN - ReDesign -Introductie The Elements of User Experience Design

12Ontwikkeling van het web

De interactie op het web is steeds rijker

Page 13: HAN - ReDesign -Introductie The Elements of User Experience Design

13Ontwikkeling van het web

Niet meer gebonden aan een computer

Page 14: HAN - ReDesign -Introductie The Elements of User Experience Design

14Ontwikkeling van het web

Locatie onafhankelijk

Page 15: HAN - ReDesign -Introductie The Elements of User Experience Design

15The Elements of UX-Design

Page 16: HAN - ReDesign -Introductie The Elements of User Experience Design

16Strategie

Bepaal de strategie

Page 17: HAN - ReDesign -Introductie The Elements of User Experience Design

17Strategie

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

gebruikersbehoeften

Page 18: HAN - ReDesign -Introductie The Elements of User Experience Design

18Strategie

Wat is het doel

• Het verhogen van de conversie van onze producten

• Bezoekers informeren over onze nieuwe diensten

Page 19: HAN - ReDesign -Introductie The Elements of User Experience Design

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

Page 20: HAN - ReDesign -Introductie The Elements of User Experience Design

20Strategie

Wat wil de gebruiker

Doel afstemmen op de behoefte van je doelgroep / gebruiker

Page 21: HAN - ReDesign -Introductie The Elements of User Experience Design

21Strategie

PersonaDeze persoon staat

representatief voor een gebruikersgroep

Page 22: HAN - ReDesign -Introductie The Elements of User Experience Design

22Scope

Bepaal de scope

Page 23: HAN - ReDesign -Introductie The Elements of User Experience Design

23Scope

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

Page 24: HAN - ReDesign -Introductie The Elements of User Experience Design

24Waarom een scope

Zodat je weet wat je wel bouwt maar ook wat je

niet bouwt

Page 25: HAN - ReDesign -Introductie The Elements of User Experience Design

25Scope

Definieer de functionaliteiten

Page 26: HAN - ReDesign -Introductie The Elements of User Experience Design

26Scope

Definieer de content elementen

Page 27: HAN - ReDesign -Introductie The Elements of User Experience Design

27Structuur

Bepaal de structuur

Page 28: HAN - ReDesign -Introductie The Elements of User Experience Design

28Structuur

•Interactie model•Informatie architectuur•Team structuur en rollen

Page 29: HAN - ReDesign -Introductie The Elements of User Experience Design

29Structuur

Interactie modelHoe reageert het systeem op de gebruiker.

Page 30: HAN - ReDesign -Introductie The Elements of User Experience Design

30Structuur

Page 31: HAN - ReDesign -Introductie The Elements of User Experience Design

31Structuur

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

Page 32: HAN - ReDesign -Introductie The Elements of User Experience Design

32Structuur

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

Page 33: HAN - ReDesign -Introductie The Elements of User Experience Design

33Structuur

Page 34: HAN - ReDesign -Introductie The Elements of User Experience Design

34Skeleton

Bepaal het raamwerk

Page 35: HAN - ReDesign -Introductie The Elements of User Experience Design

35Skeleton

•Information Design•Interface Design•Navigation Design

Page 36: HAN - ReDesign -Introductie The Elements of User Experience Design

36Skeleton

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

Page 37: HAN - ReDesign -Introductie The Elements of User Experience Design

37Skeleton

Information Design

Page 38: HAN - ReDesign -Introductie The Elements of User Experience Design

38Skeleton

Information Design

Page 39: HAN - ReDesign -Introductie The Elements of User Experience Design

39Skeleton

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

Page 40: HAN - ReDesign -Introductie The Elements of User Experience Design

40Skeleton

Interface Design

Page 41: HAN - ReDesign -Introductie The Elements of User Experience Design

41Skeleton

Interface Design

Page 42: HAN - ReDesign -Introductie The Elements of User Experience Design

42Skeleton

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

Page 43: HAN - ReDesign -Introductie The Elements of User Experience Design

43Skeleton

Page 44: HAN - ReDesign -Introductie The Elements of User Experience Design

44Skeleton

Bepaal het design

Page 45: HAN - ReDesign -Introductie The Elements of User Experience Design

45Design

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

Page 46: HAN - ReDesign -Introductie The Elements of User Experience Design

46Design

Page 47: HAN - ReDesign -Introductie The Elements of User Experience Design

47Design

Page 48: HAN - ReDesign -Introductie The Elements of User Experience Design

48Design

Page 49: HAN - ReDesign -Introductie The Elements of User Experience Design

49Design