1. Vi hedder Klean fordi vi
elsker at rydde op og forny

2. Jens Winther Kristensen
Partner i Klean
www.klean.dk
jens@klean.dk
(+45) 2275 9023

3. Arbejder til dagligt med
- Informationsarkitektur
- Interaktionsdesign
- Usabilitytest
- In short: User Experience (UX)
- Baseret på best practice

4. Best Practice?
- Der findes inden facitliste. Men forskellige former
for belæg:
- direkte (f.eks. placering af søgefelt)
- indirekte (principper)
- erfaring fra implementering
- erfaring fra testarbejde.

5. Best Practice?
- Der findes inden facitliste. Men forskellige former
for belæg:
- direkte (f.eks. placering af søgefelt)
- indirekte (principper)
- erfaring fra implementering
- erfaring fra testarbejde.

6. Gestaltprincipper for visuel perception

7. Hvad er det?
- Et framework som beskriver, hvordan vi opfatter de
ting vi ser på.
- Hovedpointe: Menneskets visuelle perception er
holistisk. Dvs.:
- Det vi ser, opfatter vi som strukturer og hele figurer;
ikke fragmenter af linjer, flader og kanter.

8. Hvor kommer de fra?
- Tyske psykologer i det tyvende århundrede, som ville
beskrive hvordan visuel perception virker.
- Siden da underbygget af resultater fra moderne
cognitiv psykologi og neuroscience.

9. Hvad kan vi med dem?
- Hæve barrieren for hvor diskussionen om design
begynder.
- “Objektivt” vurdere anvendeligheden af en løsning
frem for en anden.
- Komme videre fra “jeg føler”, “jeg synes”, “jeg
fornemmer” (erkendt eller uerkendt).

10. Hvorfor har vi brug for at tænke i mønstre?

11. Hvor mange bidder data processerer vores hjerne i sekundet?

12. 11.000.000

13. Hvor mange af dem behandles
med noget, der kan forveksles
med bevidsthed?

14. 40

15. Og pointen i det?

16. Hvis vi ikke tager de ubevidste
processer med i betragtning, når vi
designer og snakker om design, så
overlader vi (for meget) kontrol til
tilfældighederne.

17. Principperne og eksempler

18. 1. Nærhed (Proximity)
- Elementer som er tæt på hinanden opfattes som
grupperede.

19. Skema - en gruppe

20. Skema - tre grupper

21. Skema - tre grupper

22. Nærhed - eksempel
En gruppe

23. Nærhed - eksempel
To grupper

24. Nærhed - bad practice
Fordi de står tæt,
tror man, de
hører sammen.
Men det gør de
bare ikke...
Det næste princip er også på spil her...

25. 2. Ensartethed (Similarity)
- Elementer som ser ens ud opfattes som grupperede.

26. Skema - en gruppe

27. Skema - Tre grupper (måske to)

28. Ensartethed - bad practice
Fordi de har stor
lighed,
tror man, de
hører sammen.
Men det gør de
bare ikke...

29. Ensartethed - best practice
Ensartet markering = gruppe
De markerede
elementer er
valgt ud som en
undergruppe på
listen, og nu kan
jeg “gøre noget”
med dem, som
ikke sker for de
andre.

30. 3. Common Fate
- Elementer der sættes i bevægelse sammen opfattes
som en gruppe.
- Web: avancerede web apps

31. www.vw.co.uk
Ghostede biler på vej ud...

32. 4. Kontinuitet (Continuity)
- Vi ser i kontinuerte former frem for afkoblede elementer.

33. Skema - kontinuitet
Det her er ikke to
separate orange
og to separate
blå elementer.

34. Kontinuitet - Over/ under folden
Folden er dér, hvor siden “stopper”.

35. Kontinuitet - Over/ under folden
Der er mere under folden her.

36. 5. Afsluttethed (Closure)
- Tomme områder opfattes som en del af elementet.

37. Skema - Afsluttethed (Closure)
Dette er ikke en
cirkel.

38. Skema - Afsluttethed (Closure)
Her er ingen
trekant.

39. Linjer uden streg...
Her er ingen
linje.

40. Linjer uden streg...
Her er heller
ingen linje.

41. 6. Symmetri
- Hvis symmetri er en mulighed, så er det det, vi ser.

42. Skema - Symmetri
Kan denne figur
beskrives mere
enkelt en “to ens
kvadrater, som
overlapper
hinanden”?

43. Eksempel - Symmetri i footer
To spalter med to forskellige grupper

44. Eksempel - Symmetri i footer
Fem spalter med to forskellige grupper

45. 7. Forgrund/baggrund
- Adskillelse i forgrund med objektet, som har fokus,
og så baggrund, som så er alt det andet.

46. Skema - Forgrund/baggrund

47. Eksempel - Åbne overlay
Siden bliver til baggrund

48. Eksempel - Lukke overlay
Siden kommer i forgrund igen

49. Og hvor bringer alt det her os hen?

50. Væk fra...
Jeg føler at...
Jeg tror at...
Jeg fornemmer at...

51. Over til...
Når noget følger det her mønster...
Så ved, vi at det bliver opfattet sådan her...
Derfor vælger vi...

52. Spørgsmål...

53. Hvis du vil vide mere....

54. Designing with the Mind in Mind
- Jeff Johnson
- 2010
- Endeløse rækker af
anvendelige facts
om perception og
deres relevans for
design.

55. Neuro Web Design
- Susan M. Weinschenk
- 2010
- Lidt tendens til det
letkøbte, men det
basale neuro-stuff er
ret godt.

56. Principles of Beautiful Web Design
- Jason Beaird
- 2010 (2. ed.)
- Mange gode detaljer
om farver og struktur.
mange eksempler.

57. Don’t Make Me Think
- Steve Krug
- 2006 (2. ed.)
- Stadig den bedste
bog på markedet om
usability.
- Det meste af det
vigtigste.