Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
WHERE SHOULD YOU
      PUT THE “SUBMIT”
      BUTTON?

      How Gestalt Laws inform
      interface design.




         ...
Tuesday, March 24, 2009
MY GOAL: TONIGHT AT
             HAPPY HOUR
                      (AND NEXT WEEK
             IN
                      FRO...
GESTALT =
                           DESIGN


Tuesday, March 24, 2009
GESTALT =
                                 DESIGN
                          FORM SHAPE FRAME BUILD FIGURE




Tuesday, Mar...
SYNOPSIS: HUMANS LIKE
              ORDER AND
                        ARE REALLY,
              REALLY,
                  ...
Tuesday, March 24, 2009
le is
                  ho
              e w an the
                 e th parts.
               or its
             m
    ...
.edquot;quot;quot;quot; quot;quot;quot;$$$$be.
                                                       -quot;              ...
PRÄGNANZ: WE TEND TO
               ORDER OUR
                         EXPERIENCE IN A
               MANNER
             ...
PROPERTIES
                                   OF
                          PERCEPTION:




Tuesday, March 24, 2009
PROPERTIES EMERGENCE
                                   OF REIFICATION
                          PERCEPTION: MULTISTABILI
...
EMERGENCE
Example from: Wikipedia
Tuesday, March 24, 2009
A       B




                  C       D


                              REIFICATION
Example from: Wikipedia
Tuesday, Mar...
MULTISTABILITY
Example from: Wikipedia
Tuesday, March 24, 2009
A          B




               C          D
                          INVARIANCE
Example from: Wikipedia
Tuesday, March 2...
GESTA
                             LT
                          LAWS:




Tuesday, March 24, 2009
GESTA PROXIMITY
                             LT SIMILARITY
                          LAWS: SYMMETRY
                      ...
PROXIMITY
Example from: Information Dashboard
Design
Tuesday, March 24, 2009
PROXIMITY
Example from: Information Dashboard
Design
Tuesday, March 24, 2009
SIMILARITY
Example from: Information Dashboard
Design
Tuesday, March 24, 2009
1             2   3   4   5


                                                       SYMMETRY
Example from: Perception and...
PEOPLE OF ILL REPUTE
                  DEADCOUNT
                      BLACKBEARD THE PIRATE
                      3000
  ...
CLOSURE
Example from: Information Dashboard
Design
Tuesday, March 24, 2009
ENCLOSURE
Example from: Information Dashboard
Design
Tuesday, March 24, 2009
COMMON FATE
Tuesday, March 24, 2009
COMMON FATE
Tuesday, March 24, 2009
COMMON FATE
Tuesday, March 24, 2009
COMMON FATE
Tuesday, March 24, 2009
Tuesday, March 24, 2009
SO WHERE SHOULD I
                           PUT THE “SUBMIT”
                               BUTTON?




Tuesday, March 24...
BEST
            PRACTIC
                 ES:




Tuesday, March 24, 2009
BEST 1. BE SMART WHEN
            PRACTIC    PLACING AND
                 ES: GROUPING
                       DESIGN ELEME...
BEST 1. BE SMART WHEN
            PRACTIC     PLACING AND
                 ES: GROUPING
                        DESIGN ELE...
BEST 1. BE SMART WHEN
            PRACTIC     PLACING AND
                 ES: GROUPING
                        DESIGN ELE...
BEST 1. BE SMART WHEN
            PRACTIC     PLACING AND
                 ES: GROUPING
                        DESIGN ELE...
BEST 1. BE SMART WHEN
            PRACTIC     PLACING AND
                 ES: GROUPING
                        DESIGN ELE...
REVIEW: HUMANS LIKE
                ORDER AND
                         ARE REALLY,
                REALLY,
               ...
ANY QUESTIONS?




Tuesday, March 24, 2009
KTHXBY
                          E!

Tuesday, March 24, 2009
REV: v02 | 2009




      YOU CAN DOWNLOAD THIS
      PRESENTATION TO SOUND
      SMART IN FRONT OF YOUR BOSS
      AND TH...
Upcoming SlideShare
Loading in …5
×

Where should you put the Submit button?

551 views

Published on

How Gestalt Laws inform interface design.
Presented by Michael Salamon at the IxDA '09 | Vancouver conference.

  • Be the first to comment

Where should you put the Submit button?

  1. 1. WHERE SHOULD YOU PUT THE “SUBMIT” BUTTON? How Gestalt Laws inform interface design. Michael Salamon User Experience Designer michael.salamon@eectiveui.co m www.michaelsalamon.com Tuesday, March 24, 2009
  2. 2. Tuesday, March 24, 2009
  3. 3. MY GOAL: TONIGHT AT HAPPY HOUR (AND NEXT WEEK IN FRONT OF YOUR BIGGEST CLIENT) YOU WILL SOUND LIKE THE Tuesday, March 24, 2009
  4. 4. GESTALT = DESIGN Tuesday, March 24, 2009
  5. 5. GESTALT = DESIGN FORM SHAPE FRAME BUILD FIGURE Tuesday, March 24, 2009
  6. 6. SYNOPSIS: HUMANS LIKE ORDER AND ARE REALLY, REALLY, GOOD AT PATTERN RECOGNITION. Tuesday, March 24, 2009
  7. 7. Tuesday, March 24, 2009
  8. 8. le is ho e w an the e th parts. or its m of su m Tuesday, March 24, 2009
  9. 9. .edquot;quot;quot;quot; quot;quot;quot;$$$$be. -quot; ^quot;quot;**$$$e. .quot; '$$$c / quot;4$$b d3 $$$$ $* .$$$$$$ .$ ^c $$$$$e$$$$$$$$. d$L 4. 4$$$$$$$$$$$$$$b $$$$b ^ceeeee. 4$$ECL.F*$$$$$$$ e$quot;quot;=. $$$$P d$$$$F $ $$$$$$$$$- $$$$$$ z$$b. ^c 3$$$F quot;$$$$b $quot;$$$$$$$ $$$$*quot; .=quot;quot;$c 4$$$$L $$Pquot; quot;$$b .$ $$$$$...e$$ .= e$$$. ^*$$$$$c %.. *c .. $$ 3$$$$$$$$$$eF zP d$$$$$ quot;**$$$ec quot; %cequot;quot; $$$ $$$$$$$$$$* .rquot; =$$$$Pquot;quot; quot;*$b. quot;c *$e. *** d$$$$$quot;L$$ .dquot; e$$***quot; ^*$$c ^$c $$$ 4J$$$$$% $$$ .e*quot;.eePquot; quot;$$$$$$quot;'$=e....$*$$**$cz$$quot; quot;..d$*quot; quot;*$$$ *=%4.$ L L$ P3$$$F $$$Pquot; quot;$ quot;%*ebJLzb$e$$$$$b $Pquot; %.. 4$$$$$$$$$$ quot; $$$e z$$$$$$$$$$% quot;*$c quot;$$$$$$$Pquot; .quot;quot;quot;*$$$$$$$$bc .-quot; .$***$$$quot;quot;quot;*e. .-quot; .e$quot; quot;*$c ^*b. .=*quot;quot;quot;quot; .e$*quot; quot;*bc quot;*$e.. .$quot; .z*quot; ^*$e. quot;*****e. $$ee$c .dquot; quot;*$. 3. ^*$Equot;)$..$quot; * .ee==d% $.d$$$* * J$$$e* quot;quot;quot;quot;quot; quot;$$$quot; Example from: Perception and Imaging Tuesday, March 24, 2009
  10. 10. PRÄGNANZ: WE TEND TO ORDER OUR EXPERIENCE IN A MANNER THAT IS REGULAR, ORDERLY, SYMMETRIC, AND SIMPLE. Tuesday, March 24, 2009
  11. 11. PROPERTIES OF PERCEPTION: Tuesday, March 24, 2009
  12. 12. PROPERTIES EMERGENCE OF REIFICATION PERCEPTION: MULTISTABILI TY INVARIANCE Tuesday, March 24, 2009
  13. 13. EMERGENCE Example from: Wikipedia Tuesday, March 24, 2009
  14. 14. A B C D REIFICATION Example from: Wikipedia Tuesday, March 24, 2009
  15. 15. MULTISTABILITY Example from: Wikipedia Tuesday, March 24, 2009
  16. 16. A B C D INVARIANCE Example from: Wikipedia Tuesday, March 24, 2009
  17. 17. GESTA LT LAWS: Tuesday, March 24, 2009
  18. 18. GESTA PROXIMITY LT SIMILARITY LAWS: SYMMETRY CONTINUITY CLOSURE (ENCLOSURE) COMMON FATE Tuesday, March 24, 2009
  19. 19. PROXIMITY Example from: Information Dashboard Design Tuesday, March 24, 2009
  20. 20. PROXIMITY Example from: Information Dashboard Design Tuesday, March 24, 2009
  21. 21. SIMILARITY Example from: Information Dashboard Design Tuesday, March 24, 2009
  22. 22. 1 2 3 4 5 SYMMETRY Example from: Perception and Imaging Tuesday, March 24, 2009
  23. 23. PEOPLE OF ILL REPUTE DEADCOUNT BLACKBEARD THE PIRATE 3000 VLAD THE IMPALER 267 JACK THE RIPPER 11 CONTINUITY Example from: Information Dashboard Design Tuesday, March 24, 2009
  24. 24. CLOSURE Example from: Information Dashboard Design Tuesday, March 24, 2009
  25. 25. ENCLOSURE Example from: Information Dashboard Design Tuesday, March 24, 2009
  26. 26. COMMON FATE Tuesday, March 24, 2009
  27. 27. COMMON FATE Tuesday, March 24, 2009
  28. 28. COMMON FATE Tuesday, March 24, 2009
  29. 29. COMMON FATE Tuesday, March 24, 2009
  30. 30. Tuesday, March 24, 2009
  31. 31. SO WHERE SHOULD I PUT THE “SUBMIT” BUTTON? Tuesday, March 24, 2009
  32. 32. BEST PRACTIC ES: Tuesday, March 24, 2009
  33. 33. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. Tuesday, March 24, 2009
  34. 34. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. Tuesday, March 24, 2009
  35. 35. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. 3. RETAIN DATA COHERENCE WITH PROPER TEXT FORMATTING. Tuesday, March 24, 2009
  36. 36. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. 3. RETAIN DATA COHERENCE WITH PROPER TEXT FORMATTING. Tuesday, March 24, 2009
  37. 37. BEST 1. BE SMART WHEN PRACTIC PLACING AND ES: GROUPING DESIGN ELEMENTS. 2. BE AWARE OF ASYMMETRICAL BALANCE. 3. RETAIN DATA COHERENCE WITH PROPER TEXT FORMATTING. Tuesday, March 24, 2009
  38. 38. REVIEW: HUMANS LIKE ORDER AND ARE REALLY, REALLY, GOOD AT PATTERN RECOGNITION. Tuesday, March 24, 2009
  39. 39. ANY QUESTIONS? Tuesday, March 24, 2009
  40. 40. KTHXBY E! Tuesday, March 24, 2009
  41. 41. REV: v02 | 2009 YOU CAN DOWNLOAD THIS PRESENTATION TO SOUND SMART IN FRONT OF YOUR BOSS AND THAT ONE CUTIE FROM ACCOUNTING AT: www.michaelsalamon.com/ixd09 All of my examples were stolen from the following fantastic books: A Source Book of Gestalt Psychology Summaries of thirty-four articles and one book published in Germany by the leading exponents between 1915 and 1929 of Information Dashboard Design Gestalt Psychology The Eective Visual Communication of Data Willis D. Ellis Stephen Few ISBN: 0 7100 6115 3 ISBN: 0 596 10016 7 Principals of Gestalt Psychology K. Koka To the Resuce of Art: Twenty-six Essays Rudolf Arnheim Gestalt Psychology ISBN: 0 520 07458 0 The definitive statement of the Gestalt Theory Dr. Wolfgang Kohler Perception and Imaging ISBN: 0 87140 218 1 Richard Zakia Michael Salamon ISBN: 0 240 80201 2 User Experience Designer michael.salamon@eectiveui.co m www.michaelsalamon.com Tuesday, March 24, 2009

×