0
Vi hedder Klean fordi vielsker at rydde op og forny
Jens Winther KristensenPartner i Kleanwww.klean.dkjens@klean.dk(+45) 2275 9023
Arbejder til dagligt med     - Informationsarkitektur     - Interaktionsdesign     - Usabilitytest     - In short: User Ex...
Best Practice?    - Der findes inden facitliste. Men forskellige former      for belæg:       -   direkte (f.eks. placerin...
Best Practice?    - Der findes inden facitliste. Men forskellige former      for belæg:       -   direkte (f.eks. placerin...
Gestaltprincipper for visuel perception
Hvad er det?    - Et framework som beskriver, hvordan vi opfatter de      ting vi ser på.    - Hovedpointe: Menneskets vis...
Hvor kommer de fra?    - Tyske psykologer i det tyvende århundrede, som ville      beskrive hvordan visuel perception virk...
Hvad kan vi med dem?    - Hæve barrieren for hvor diskussionen om design      begynder.    - “Objektivt” vurdere anvendeli...
Hvorfor har vi brug for at tænke i mønstre?
Hvor mange bidder data processerer vores hjerne i sekundet?
11.000.000
Hvor mange af dem behandlesmed noget, der kan forvekslesmed bevidsthed?
40
Og pointen i det?
Hvis vi ikke tager de ubevidsteprocesser med i betragtning, når videsigner og snakker om design, såoverlader vi (for meget...
Principperne og eksempler
1. Nærhed (Proximity)  - Elementer som er tæt på hinanden opfattes som    grupperede.
Skema - en gruppe
Skema - tre grupper
Skema - tre grupper
Nærhed - eksempel                    En gruppe
Nærhed - eksempel                    To grupper
Nærhed - bad practice                                      Fordi de står tæt,                                      tror ma...
2. Ensartethed (Similarity)  - Elementer som ser ens ud opfattes som grupperede.
Skema - en gruppe
Skema - Tre grupper (måske to)
Ensartethed - bad practice                             Fordi de har stor                             lighed,              ...
Ensartethed - best practice         Ensartet markering = gruppe                                       De markerede        ...
3. Common Fate    - Elementer der sættes i bevægelse sammen opfattes     som en gruppe.    - Web: avancerede web apps
www.vw.co.uk          Ghostede biler på vej ud...
4. Kontinuitet (Continuity)  - Vi ser i kontinuerte former frem for afkoblede elementer.
Skema - kontinuitet                      Det her er ikke to                      separate orange                      og t...
Kontinuitet - Over/ under folden         Folden er dér, hvor siden “stopper”.
Kontinuitet - Over/ under folden           Der er mere under folden her.
5. Afsluttethed (Closure)  - Tomme områder opfattes som en del af elementet.
Skema - Afsluttethed (Closure)                                 Dette er ikke en                                 cirkel.
Skema - Afsluttethed (Closure)                                 Her er ingen                                 trekant.
Linjer uden streg...Her er ingenlinje.
Linjer uden streg...Her er helleringen linje.
6. Symmetri  - Hvis symmetri er en mulighed, så er det det, vi ser.
Skema - Symmetri                   Kan denne figur                   beskrives mere                   enkelt en “to ens   ...
Eksempel - Symmetri i footer        To spalter med to forskellige grupper
Eksempel - Symmetri i footer        Fem spalter med to forskellige grupper
7. Forgrund/baggrund  - Adskillelse i forgrund med objektet, som har fokus,    og så baggrund, som så er alt det andet.
Skema - Forgrund/baggrund
Eksempel - Åbne overlay           Siden bliver til baggrund
Eksempel - Lukke overlay         Siden kommer i forgrund igen
Og hvor bringer alt det her os hen?
Væk fra...  Jeg føler at...                    Jeg tror at...                                     Jeg fornemmer at...
Over til...  Når noget følger det her mønster...        Så ved, vi at det bliver opfattet sådan her...                    ...
Spørgsmål...
Hvis du vil vide mere....
Designing with the Mind in Mind                           - Jeff Johnson                           - 2010                 ...
Neuro Web Design                   - Susan M. Weinschenk                   - 2010                   - Lidt tendens til det...
Principles of Beautiful Web Design                           - Jason Beaird                           - 2010 (2. ed.)     ...
Don’t Make Me Think                      - Steve Krug                      - 2006 (2. ed.)                      - Stadig d...
Gestaltprincipper for visuel perception oplæg 30.06.2011
Gestaltprincipper for visuel perception oplæg 30.06.2011
Upcoming SlideShare
Loading in...5
×

Gestaltprincipper for visuel perception oplæg 30.06.2011

620

Published on

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
620
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Gestaltprincipper for visuel perception oplæg 30.06.2011"

  1. 1. Vi hedder Klean fordi vielsker at rydde op og forny
  2. 2. Jens Winther KristensenPartner i Kleanwww.klean.dkjens@klean.dk(+45) 2275 9023
  3. 3. Arbejder til dagligt med - Informationsarkitektur - Interaktionsdesign - Usabilitytest - In short: User Experience (UX) - Baseret på best practice
  4. 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. 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. 6. Gestaltprincipper for visuel perception
  7. 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. 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. 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. 10. Hvorfor har vi brug for at tænke i mønstre?
  11. 11. Hvor mange bidder data processerer vores hjerne i sekundet?
  12. 12. 11.000.000
  13. 13. Hvor mange af dem behandlesmed noget, der kan forvekslesmed bevidsthed?
  14. 14. 40
  15. 15. Og pointen i det?
  16. 16. Hvis vi ikke tager de ubevidsteprocesser med i betragtning, når videsigner og snakker om design, såoverlader vi (for meget) kontrol tiltilfældighederne.
  17. 17. Principperne og eksempler
  18. 18. 1. Nærhed (Proximity) - Elementer som er tæt på hinanden opfattes som grupperede.
  19. 19. Skema - en gruppe
  20. 20. Skema - tre grupper
  21. 21. Skema - tre grupper
  22. 22. Nærhed - eksempel En gruppe
  23. 23. Nærhed - eksempel To grupper
  24. 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. 25. 2. Ensartethed (Similarity) - Elementer som ser ens ud opfattes som grupperede.
  26. 26. Skema - en gruppe
  27. 27. Skema - Tre grupper (måske to)
  28. 28. Ensartethed - bad practice Fordi de har stor lighed, tror man, de hører sammen. Men det gør de bare ikke...
  29. 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. 30. 3. Common Fate - Elementer der sættes i bevægelse sammen opfattes som en gruppe. - Web: avancerede web apps
  31. 31. www.vw.co.uk Ghostede biler på vej ud...
  32. 32. 4. Kontinuitet (Continuity) - Vi ser i kontinuerte former frem for afkoblede elementer.
  33. 33. Skema - kontinuitet Det her er ikke to separate orange og to separate blå elementer.
  34. 34. Kontinuitet - Over/ under folden Folden er dér, hvor siden “stopper”.
  35. 35. Kontinuitet - Over/ under folden Der er mere under folden her.
  36. 36. 5. Afsluttethed (Closure) - Tomme områder opfattes som en del af elementet.
  37. 37. Skema - Afsluttethed (Closure) Dette er ikke en cirkel.
  38. 38. Skema - Afsluttethed (Closure) Her er ingen trekant.
  39. 39. Linjer uden streg...Her er ingenlinje.
  40. 40. Linjer uden streg...Her er helleringen linje.
  41. 41. 6. Symmetri - Hvis symmetri er en mulighed, så er det det, vi ser.
  42. 42. Skema - Symmetri Kan denne figur beskrives mere enkelt en “to ens kvadrater, som overlapper hinanden”?
  43. 43. Eksempel - Symmetri i footer To spalter med to forskellige grupper
  44. 44. Eksempel - Symmetri i footer Fem spalter med to forskellige grupper
  45. 45. 7. Forgrund/baggrund - Adskillelse i forgrund med objektet, som har fokus, og så baggrund, som så er alt det andet.
  46. 46. Skema - Forgrund/baggrund
  47. 47. Eksempel - Åbne overlay Siden bliver til baggrund
  48. 48. Eksempel - Lukke overlay Siden kommer i forgrund igen
  49. 49. Og hvor bringer alt det her os hen?
  50. 50. Væk fra... Jeg føler at... Jeg tror at... Jeg fornemmer at...
  51. 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. 52. Spørgsmål...
  53. 53. Hvis du vil vide mere....
  54. 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. 55. Neuro Web Design - Susan M. Weinschenk - 2010 - Lidt tendens til det letkøbte, men det basale neuro-stuff er ret godt.
  56. 56. Principles of Beautiful Web Design - Jason Beaird - 2010 (2. ed.) - Mange gode detaljer om farver og struktur. mange eksempler.
  57. 57. Don’t Make Me Think - Steve Krug - 2006 (2. ed.) - Stadig den bedste bog på markedet om usability. - Det meste af det vigtigste.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×