Gestalt Theory Applied to Interface Design for Websites Explaining the laws of Gestalt in Interface Design and their application with websites interface design. By Yahya Mofarreh EDGE903 – Assignment-4
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Gestalt Theory Applied to Interface Design for Websites
Explaining the laws of Gestalt in Interface Design and their application with websites interface design.
By Yahya Mofarreh
EDGE903 – Assignment-4
Outline
OverviewGestalt Theory
In Practice References
1. Overview2. Laws of Gestalt Theory and their Application to Website Interface Design3. Gestalt Theory in Practice4. References
Gestalt Theory
Gestalt 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 them...so 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”
OverviewGestalt Theory
In Practice References
Gestalt Theory
Gestalt 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.
OverviewGestalt Theory
In Practice References
Gestalt Theory
Gestalt 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.
OverviewGestalt Theory
In Practice References
Gestalt Theory
Gestalt Theory – The Laws of Gestalt Theory
1. Law of Similarity2. Law of Common Fate3. Law of Continuation4. Law of Unity5. Law of Proximity6. Law of Symmetry7. Law of Closer8. Law of Figure and Ground9. Law of Focal Point10. Law of Simplicity
OverviewGestalt Theory
In Practice References
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.
OverviewGestalt Theory
In Practice References
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.
OverviewGestalt Theory
In Practice References
Gestalt Laws Law of
ContinuationObjects 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.
OverviewGestalt Theory
In Practice References
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.
OverviewGestalt Theory
In Practice References
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
OverviewGestalt Theory
In Practice References
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.
OverviewGestalt Theory
In Practice References
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.
=
OverviewGestalt Theory
In Practice References
Gestalt Laws
Overview Gestalt Theory In Practice References
Law of Figure and GroundSimilar 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 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.
.
!
OverviewGestalt Theory
In Practice References
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.
OverviewGestalt Theory
In Practice References
Gestalt Theory In PracticeOverview
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.
OverviewGestalt Theory
In Practice References
Gestalt Theory In PracticeThe Gestalt Laws Where not Applied
Overview Gestalt Theory In Practice References
Gestalt Theory In PracticeThe Gestalt Laws Where Applied
Overview Gestalt Theory In Practice References
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.) http://www.webopedia.com/TERM/I/interface.html
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, http://www.usask.ca/education/coursework/skaalid/theory/gestalt/figround.htm
Last Name Unkown, M, (2011), The World’s Worst Website, Accessed 20/10/2011, http://www.angelfire.com/super/badwebs/
Apple Co., (2011), Official Apple Store, Accessed 20/10/2011, http://store.apple.com/au?afid=p219|GOAU&cid=AOS-AP-AU-Google-AA0000018642
OverviewGestalt Theory
In Practice References
Related Documents
