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.

Yahya assignment 4


Published on

Published in: Technology
  • Be the first to comment

Yahya assignment 4

  1. 1. Gestalt TheoryApplied to InterfaceDesign for WebsitesExplaining the laws of Gestalt inInterface Design and their applicationwith websites interface design.By Yahya MofarrehEDGE903 – Assignment-4
  2. 2. Outline1. Overview2. Laws of Gestalt Theory and their Application to Website Interface Design3. Gestalt Theory in Practice4. References Gestalt Overview In Practice References Theory
  3. 3. Gestalt TheoryGestalt Theory – Introduction – Gestalt Theory Definition  Gestalt loosely translated means “shape” or “form” (Behrens, R. 1984).  “things are affected by where they are and by what surrounds that things are better described as "more than the sum of their parts” – (Behrens 1984).  To explain this it is important when creating something to not only look at how it comes together as a whole but also how each part looks and how it looks within its surroundings, in order to understand how someone will see and perceive your design “The whole is greater than the sum of it’s parts” Gestalt Overview In Practice References Theory
  4. 4. Gestalt TheoryGestalt Theory – Introduction – Interface Definition  Interface is defined as “A boundary across which two independent systems meet and act on or communicate with each other”, (Webopedia, (N.D.).  In this tool, when we refer to interface we refer to the layout and look of a website, how a user (one system) interacts with the website(another system).  In web design it is of vital importance how the website is set out.  how easy it is to use and how easy it is to understand will directly influence if and how the user uses the website.  This tool aims to give guidance to people designing website Interfaces using the Gestalt Theory as guidelines. Gestalt Overview In Practice References Theory
  5. 5. Gestalt TheoryGestalt Theory – Introduction – Why Gestalt Theory  Gestalt Theory can be universally applied to design, for this tool we have broken up the laws into10 different laws that can be individually applied to website interface design.  These laws can be directly applied to any part of interface design and by using them as a guide or tool when designing they allow a designer to create a interface that the user will understand how to use without needing instructions.  This tool will firstly explain the laws in a way that they can be simply applied to website interface design and then give some examples of them.  Finally this tool will provide examples of site where the rules have been applied and where they have been ignored. Gestalt Overview In Practice References Theory
  6. 6. Gestalt TheoryGestalt Theory – The Laws of Gestalt Theory 1. Law of Similarity 2. Law of Common Fate 3. Law of Continuation 4. Law of Unity 5. Law of Proximity 6. Law of Symmetry 7. Law of Closer 8. Law of Figure and Ground 9. Law of Focal Point 10. Law of Simplicity Gestalt Overview In Practice References Theory
  7. 7. Gestalt Laws Law of Similarity Objects that are similar to one another will be grouped together, (Mullet, K. & Sano,1995). Examples of this will be in a website’s buttons that look the same, they will be grouped together. With this a designer is able to create different parts to the interface of the website and convey to the user how different groups of buttons are related to different concepts for example. Gestalt Overview In Practice References Theory
  8. 8. Gestalt Laws Law of Common Fate Objects with a common movement will be grouped together, (Ehrenstein, 2004). An example of this is with text size/direction/flow/alignment on a site. If a title and the content are the same on a site they will be grouped together as the same thing ,this may not work as the title could be missed, if the title was similar, but bold compared to content, it would still flow in the same way give it the ability to stand out whilst be related to the content. Gestalt Overview In Practice References Theory
  9. 9. Gestalt Laws  Law of Continuation Objects that are linear or are in the same direction will be grouped, (Mullet, K. & Sano,1995). Our previous example of a website’s buttons can be used as most sites would make their buttons liner in order to give a clear definition to the group of buttons. This allows the user to understand their similar functions as well as separate them from other parts of the websites interface. Gestalt Overview In Practice References Theory
  10. 10. Gestalt Laws  Law of Unity Is the law of arrangement, where elements and structures that have a visual connection will look like they belong together(Chang, 2002), this is described as being in unity. This can be particularly important as this law can be used to breakdown the different parts of a website’s interface, each part can then be given a particular concept and similar concepts can be grouped together by the way they look. Gestalt Overview In Practice References Theory
  11. 11. Gestalt Laws Law of Proximity Objects are more likely to be grouped together, the closer they are together (Mullet, K. & Sano,1995). An example of this would be when hyperlinks or buttons are grouped closely together, they will be considered related to the same thing possibly the same link if they are close together as well as providing the same function Gestalt Overview In Practice References Theory
  12. 12. Gestalt Laws Law of Symmetry It is important that objects are properly balanced to complete the design presented (Chang, 2002). An example of this will be columns or blocks of text on a site, if they are not symmetrical the design will be less appealing. By making the blocks of text clearly defined it is clear to the user the boundaries of the information as well as how the are separate or how they relate. Gestalt Overview In Practice References Theory
  13. 13. Gestalt Laws Law of Closure People have a tendency to complete objects they can not fully perceive. (Ehrenstein, 2004). This can be used to a web = designer’s advantage, by creating a flow within the site by using partial images that the user will complete, they are able to direct the users attention to the parts of the site desired. Gestalt Overview In Practice References Theory
  14. 14. Gestalt Laws Law of Figure and Ground Similar elements (figure) are contrasted with dissimilar elements (ground) to give the impression of a whole. (Mullet, K. & Sano,1995). This can be important in website interface design in choosing correct background/foreground for the site. If, like in the picture opposite these are confused or swapped in can be unclear to the user what their attention should be focussed on. Figure (Skaalid, B 1999) Gestalt Overview Theory In Practice References
  15. 15. Gestalt Laws Law of Focal Point The law of Focal Point describes things that stand out, that will catch and maintain the users attention(Chang, 2002). It is important to know what draws people’s attention in website ! Interface Design and ensure you are directing them to what you want them to see. An example of this would be to have your main point large, bold and centred in your interface, without to many things around to draw attention away from it.. Gestalt Overview In Practice References Theory
  16. 16. Gestalt Laws Law of Simplicity People will unconsciously try to make sense of complex things by grouping and simplifying them, (Chang, 2002). This is an important law for wed designers to understand as people will automatically want to simplify what they are presented with so it is in both parties interest to have the website interface start simply to begin with. Gestalt Overview In Practice References Theory
  17. 17. Gestalt TheoryIn Practice Overview The laws of Gestalt that can be applied to website Interface Design have all been listed, explained and examples have been provided of how they apply to website interface design. Now this tool will show two separate sites where you can see the affects of applying the guidelines and how that affects the interface and how not applying the guidelines affects it. Gestalt Overview In Practice References Theory
  18. 18. Gestalt TheoryIn PracticeThe Gestalt Laws Where not Applied Gestalt Overview In Practice References Theory
  19. 19. Gestalt TheoryIn PracticeThe Gestalt Laws Where Applied Gestalt Overview In Practice References Theory
  20. 20. References References Behrens, R. (1984). Design in the visual arts. Englewood Cliffs, NJ: Prentice-Hall, Inc. Webopedia, (N.D.), Interface, Accessed on 20/10/2011, Webopdeia (n.d.) Chang, D., Dooley, L., & Tuovinen, J. E. (2002). Gestalt Theory in Visual Screen Design – A New Look at an Old Subject. Paper presented at 7th World Conference on Computers in Education, 29th July – 3rd August, Australian Computer Society, Copenhagen Mullet, K. & Sano, D. (1995). Designing visual interfaces: Communication oriented techniques. Englewood Cliffs, NJ: Prentice Hall. Ehrenstein, W. H. (2004). Perceptual Organization. International Encyclopedia of Social and Behavioural Sciences, pp. 11227-11231 Skaalid, B (1999), Web Design For Instruction – Figure and Ground, Accessed 20/10/2011, Last Name Unkown, M, (2011), The World’s Worst Website, Accessed 20/10/2011, Apple Co., (2011), Official Apple Store, Accessed 20/10/2011,|GOAU&cid=AOS- AP-AU-Google-AA0000018642 Gestalt Overview In Practice References Theory