Graphic Design and Gestalt Principles

From CS 160 Fall 2010

Jump to: navigation, search

pdf Slides

Readings


Contents


Post Comments Below

Please use == ~~~~ == at the beginning of your entry to sign it (that's two equal signs on each side, not one).

Sean Tai 05:49, 31 October 2010 (CET)

The diagram and explanation of optically-equivalent scaling made an interesting point about a detailed part of design. Having the radius of a circle be equal to the side of a rectangle does not does not produce objects that seem the same size to the human eye; to maintain visual balance in a design, remembering details like this one makes for polished final products.

Benjamin Carpenter 21:28, 31 October 2010 (CET)

It is interesting that this chapter mentions that the use of "negative" space is generally not available to UI designers because there is limited screen real estate. While poster artists may always have much more flexibility in using negative space, our computer screen resolutions have also increased quite a bit since this chapter was written. Many website UIs around nowadays make extensive use of negative space, such as the Google home page (as opposed to Yahoo's home page, for example). It seems that as higher resolutions have become available, the resulting increase in usable screen area has allowed UI designers to more effectively use negative space to separate different pieces of information for the user.

Chris Song 22:52, 31 October 2010 (CET)

It was nice to read and reinforce what we already learned in MHP about recognizing patterns. Gestalt Principles cover in detail what we have already learned. I think grouping is very powerful and important tool in UI design(although I thought Sony MD was a terrible example, considering how poorly they performed in the market). For instance, during design time, we already know that there is a Radio Group that groups Radio Buttons together. What is difficult to realize is that the user doesn't see the grouping! The user also does not see Framelayout or any other layout elements. By the time we are ready release the desgin, we would have seen the interface 1000 times and, therefore, have grown used to the way controls are grouped no matter how arbitrary is. Of course, any flaw would be caught by heustics test, but it would save a lot of time and effort if we can design with Gestalt principle in mind before we get too used to our own design, at which point we can no longer "debug" our own design.

Alex Aberle 00:00, 1 November 2010 (CET)

While it is a little embarrassing to see such old software being used as examples, most of the principles in this chapter still apply. These are closely related to principles of graphic design, so they are still as true now as they are then. The screenshots of dialogue boxes, though...hideously outdated. No software looks like that any more (except maybe on linux...), thank god.

One thing that is no longer true came up in the discussion of negative space. DPI and screen size have grown enormously. There is plenty of room for negative space now. That section also has the only example in the chapter that I disagree with: figure 139. I think (a) looks better than (b), though I'd prefer if the OK/Cancel buttons in (a) were left-aligned, not center-aligned. I think (b) is too wide.

Jonathan Look 01:37, 1 November 2010 (CET)

This reading reminded me of some of the heuristics of evaluation, in particular, the consistency and standards and aesthetic and minimalist design heuristics. The reading provided many examples to show where past UI elements failed in their design and appearance to users, which I found useful, though albeit, outdated.

In regards to the Sony walkman player, I did not actually think that was a great example of a good visual appearance however, because the 0-9 buttons were in an awkward arrangement (not in the normal phone pad organization).

Following the discussion with negative space and screen resolutions, I think that as resolutions increase, there will be a need to increase the use of negative space. This would be to maintain the same on screen density since users will need more 'space' to see groupings of information on larger screens.

Courtney Wang 02:16, 1 November 2010 (CET)

This week's reading was very informative as it explored more technical and concrete aspects of UI design. While working on the IPAs, I often wondered what the best way to organize buttons and other widgets in my interface was. With a rundown of the Gestalt principles and seeing some examples of the common errors, I can see that I made some similar ones, especially the ones involving balancing space and aligning input boxes. One idea I found interesting was the discussion in optical spacing about equalizing area between elements rather than distances. With more abstract shapes and icons, this is a very important principle to follow since distance is sometimes harder to judge than area.

Geobio Boo 20:50, 1 November 2010 (CET)

Will be updated. Had a bug copy pasting.

Raymond Williams 03:16, 1 November 2010 (CET)

I understand that organizational structure is also very important in advertising. Scientists have intensely studied how the eye scans a page and have found the exact sizes and locations to place their ads. It's always interesting to see some local paper that hasn't looked into these studies and have their ads places in horrible positions that are completely ineffective. I think to myself: "Who's going to look there?" but actually I'm glad that the ad is less intrusive. This reminds me of the movie Idiocracy in which there is a television program that has a tiny viewing space in the center with huge ads surrounding it on all sides. A sad vision of the future, to be sure, however it is a very possible (if not likely) future - and that is the saddest thought of all.

Yue Chang Hu 04:34, 1 November 2010 (CET)

Interest to see from this weeks reading that every figure or window widget in the User Screen affects the performanace of the users. Given that we had already learned about Model Human Processing, and From this reading, it said it is important to keep in mind that grouping similar elements together helps the user deal with complex information because it reduces the number of information into managable units. We can easliy realized why because during the Model Human Processing reading, we had learned that our memory has a limit and it can only process so much information at a given time. Another interesting example is figure 103 showing a Adobe photoshop window. It said that the 2nd UI window is better because it aligns the information better for the users to perceive. By making information easier to perceive, it can greately increases users' performance.

Calvin Wang 06:56, 1 November 2010 (CET)

From the readings I feel that graphic/visual design is significantly more "artsy" and not as precise as the previous sections, such as MHP. There's a lot of principles, but no "algorithm" to design a visually pleasing interface. Among the graphic design principles, I found the typography tricks especially fascinating. What appears to us as evenly-spaced font is actually very imbalanced when looked at from a pixel-distance perspective, and vice versa. This reminds me of a related trivia: the three stripes on the France national flag seem to be of equal width, but the actual proportions are 30:33:37 to compensate for the effects different colors have on our perception of size - another clever use of visual design principles.


Andy Lin 06:59, 1 November 2010 (CET)

This reading provides many rules about how to design the visual structure of user interface well. It is much more complicate than I thought. One thing I learned is that things may not look properly spaced even if the space between each element is the same. One good example that this reading points out is the spacing between each letter of word “Typography”, is not the same. This can also be observed from the word that I just typed. This lesson and other example indicate that there are many things that we should take into consideration when we design the user interface, and there are always things that we can improve.

Theron Ji 08:47, 1 November 2010 (CET)

I felt this week's reading was very similar to the heuristic principles we learned about last week. In particular, I thought the ideas on symmetry and alignment were especially useful. It at first seems like very intuitive principles, but upon further reading, it becomes helpful to be able to pinpoint and describe more precisely why it's a good design, instead of just is commonly regarded as common sense. I felt that this was a subjective article still, just like the heuristics, because this is always up for debate. Good examples of this is how new GUI designs are increasingly challenging the norm, with varied results (one example that comes to mind is the new Ubuntu experimenting with putting the window buttons on the upper left side instead of the long-standing upper-right default).

Christine Lu 07:41, 1 November 2010 (CET)

I thought this reading brought up a lot of psychology principles that cause people to associate items together and lead to affordances that we as designers take for granted. However, I don't quite agree with all of the examples that this reading has presented, such as figure 103. I actually prefer design a over b because of the separation of groups. Although it may not be the best design for all purposes, the reading doesn't give a persuasive enough argument for why the groupings should be replaced in favor of this table style. For me, design a made the choices very clear, but I hesitated when I saw design b because I wasn't quite sure where to begin and how to interpret the controls, since it implies that all of the elements are connected together (as in, grouped together, rather than grouped individually, as in design a when this was explicit).


Chao liu 23:45, 1 November 2010 (CET)

This article provides many good example of how to create a clean and well organized UI. Many principles such as Grouping, Hierarchy, and Balance give us guide. Grouping principle gathers similar function buttons together and makes the function group easier to find for the users. It helps the user deal with a complex information display by reducing it to a manageable number of units. Error examples such as fig.114 and fig.115 also let us learn a lot from some real applications. I think this week’s reading is interesting and provide much useful information.

Sui Kun Guan 08:10, 1 November 2010 (CET)

After reading this chapter, I learn that a good technique of graphic design is grouping related elements and creating a hierarchy of importance for elements and groups. Grouping similar elements can help user to understand a complex information interface because of reducing those complex information into manageable units. And, hierarchy requires that important elements are large enough to make users can see the important elements first, then users can know more details if they feel interesting.

Jeremy Sasson 09:27, 1 November 2010 (CET)

I found it interesting that asymmetrical design concepts were only widely accepted in print materials in the 20th century. I am curious as to why they were not widely accepted previously, and which specific styles of asymmetry are now accepted. Surely random asymmetry is not an acceptable form of design, so there must be some sort of standard for asymmetric design. I think it would be worthwhile to study this as well. I also found the squint technique to be a pretty obvious, yet effective method of judging the layout of an interface.

Daniel Yoo 10:04, 1 November 2010 (CET)

The reading was quite interesting where it showed the key benefits of the structure when people design an UI: unity, integrity, readability and control. People had experiences from their past where they had seen different UIs. This would help the users found the locations and functionality. Even I did remember from the past experience when I got to play around with different UIs and apply to the applications. The reading also gave a nice typography tricks which made me want to try that when I do think about the UI design.

Melissa Lim 10:22, 1 November 2010 (CET)

I really enjoyed reading about how Gestalt Psychology applies to user interface design. I had learned about the principles of similarity, continuation, closure, proximity, and figure and ground but had never thought in detail about how they correspond with UI. The section on typography was really interesting because I never considered what sort of design decisions must be made regarding font. Now that I am aware of heuristics such as optical spacing (the tightest spacing between letters is reserved for curved edges or horizontally projecting strokes), I pay more attention to what makes certain fonts more pleasing to me than others. Understanding how we perceive and process information is really important in the design process and this article shared important techniques that allow for successful presentation of UI elements.

Derrick Tao 10:32, 1 November 2010 (CET)

The reading was pretty interesting because it showed they different ways to structure UI into principles. Many UI decisions need to be carefully though over because a pixel off can make a big difference in user experience. One example is the use and choice of fonts. I never thought of it as a big deal but it actually makes a difference when creating an application. Another thing that caught my attention was the use of placement and the spacing between them. This all makes a big difference in user interface designs.

Tiago Bandeira 10:34, 1 November 2010 (CET)

Like much of the reading in this class, this gives reason to many design choices that would otherwise be quasi intuitive. It is quasi intuitive in the sense that it is understandable to do things this way but you would not necessarily create an interface following the Gestalt principals unless you thought about it. For instance, showing relationships between objects through a hierarchy of order allows for the designer to clearly convey the intended message to the user. This is an obvious statement when read however if not prior conceived most likely would have required a bit of thought. One might intuitively be implementing many of the Gestalt principals but be unaware of what they are called.

Brian Maissy 11:17, 1 November 2010 (CET)

People seem to not only recognize structure when they see a design, but when creating one. Even without knowing these principles, I feel like I more or less intuit where things 'should' go when designing a layout, and things like symmetry, balance, and structure come out naturally. I guess that's the proof that these principles are correct and important. It does help to take the time to consciously acknowledge them, because some things, like asymmetrically balanced layouts, are not as intuitive.

Mark Wei 11:25, 1 November 2010 (CET)

I found 2 things very interesting about the reading. First, the balance of a page is derived heavily from physics, which reinforces my belief in the rules given in the chapter as natural extensions of the natural world. We studied torque in physics, and the concept of torque being a relationship between an object's mass (size) and distance from the fulcrum (distance) is reflected in the advice given in the reading. Another interesting thing is the discussion on how to make squares, curves/circles, and angular shapes seem to be the same size typographically. The subject seems related to optical illusions and how our brain perceives reality. I wonder how fonts would be if designers didn't correct for size and margin perception.

Karl He 12:34, 1 November 2010 (CET)

The reading was presenting extremely well, with numerous comparisons between more artistic mediums like posters and logos to UI design problems that help to solidify major concepts.

The ideas presented tie in with previous material such as affordances and the model human processor. However, these new ideas are much more concrete, and I can distinctly feel the difference between the good and bad designs.

I have noticed issues raised in the reading in many different places. The interface of Autodesk Maya is horrendous, and has a huge learning curve, because it is not easy to mentally group together different UI elements. Web design also benefits greatly; Facebook has had numerous redesigns over time, but I've never had a real problem with adapting to the new interface. The sheer amount of information in websites such as Facebook, Twitter, and Wikipedia are enormous, but good UI decisions help to make that information manageable.

Alexander Bolotov 18:08, 1 November 2010 (CET)

I found that this reading ties in nicely many of the things previously described in the class, although rarely in an explicit way. Especially prominent are the model human processor and the idea of affordances. It also struck me that while many of the principles explicitely stated by the reading seem self-evident, they are violated so often. It's also rather nice finally having a concrete set of rules and language to describe designs that I previously could only evaluate with a general sense of aesthetic intuition.

Frank Chew 18:32, 1 November 2010 (CET)

This article points out how making adjustments to a GUI such as paying attention to alignment, symmetry, and white space can make a GUI look great. It is important to make sure that the adges of controls line up on both sides to make you Form look natural to the user. In addition, making the white space (the area with the labels) a consistent width is also important to make the form look good to the user.

Samantha Paras 19:10, 1 November 2010 (CET)

The best part of this reading was the many examples that came with every definition or point. It's one thing to read about different principles such as Gestalt's principles of proximity, similarity, continuity, and symmetry, but it's another thing to see it in action in order to fully understand it. I also like that they include a "how to" for certain parts such as Alignment. As helpful as examples are, it is also nice to get step by step instructions for evaluating and fixing a design. Overall, some of the topics in this chapter may seem like common sense, but I would never have thought of them on my own. Many of the examples given seemed "off" to my eye, and the explanation for why they wrong and broke a principle made a lot of sense.

Terrance Ng 19:47, 1 November 2010 (CET)

The article was interesting to read, even if a bit of a review for me, coming from a web design background. The section about negative space was interesting, since, like other classmates have noted, has become more important. The current trend is towards minimalism, both for UIs and web design. The trend is towards an almost fanatical abstraction of the underlying process from users. In particular, the sections about typography and kerning, as well as the section on negative space, were particularly interesting to me. More than the articles about user experience, this article about graphic design was really the most interesting to me, since it's the most readily applied to, for example, web design, and because the visual component of a design is first thing experienced, even before a user actually uses the product.

Aaron Loessberg-Zahl 20:00, 1 November 2010 (CET)

This was a very interesting reading, and again, like most readings in this class, put into words some things that I had previously known to be true about interface design. The principles mentioned are very important to design, and we will have to make sure to follow them when first designing our UI, so as not to get so used to our design that we miss any glaring design problems with it.

Finally, I just want to mention a particularly inspirational quote from the text. On page 113 (26 in the pdf), Mullet and Sano mention that "Without a clear understanding of the, effective organization is not possible." I feel that this is a very profound statement regarding user interfaces as a whole, and my personal understanding of the will be instrumental in my being able to create user interfaces that are usable and intuitive. Perhaps our understanding of the should be extensively tested on our final.

Adam Vogt 20:06, 1 November 2010 (CET)

There are a few things that I found especially interesting about this reading. The first was from the techniques section that discussed the visual structure of a design and noted how important the different techniques were. What really struck me about these techniques is how artistically driven they were. So much of the design process is focused on the technical aspect of design that seeing terms like symmetry and negative space was kind of a surprise. It’s interesting to think that the same concepts that can make good art can also be responsible for making a good user interface design.

Alan.choi 20:13, 1 November 2010 (CET)

I really liked this reading because it was basically the common sense of the unconcious eye. A lot of these things are taken for granted and aren't even thought about when looking at something, but they all still always in consideration in our brains and eyes when we look at things. It when we can tell something looks off or ugly, but we can't tell why. It's usually because of the more subtle traits and characteristics that were mentioned have been neglected or missed. It was particularly eye-opening when they showed conflicting symmetries and false structures as common errors, and the reasoning makes a lot of sense for both. Also the concept of negative space and that white space is not wasted space is also something that I had never thought about.

Robert Connick 20:26, 1 November 2010 (CET)

I really enjoyed this reading. I have often found myself wondering where to place buttons, finally choosing a location almost arbitrarily. It is very helpful finally to have some concrete guidelines for how to communicate via a UI. I found the concept of negative space to be the most counter intuitive, but looking back on how I laid out text before, it explains why some layouts just looked “wrong.”

Richard Nguyen 20:27, 1 November 2010 (CET)

I really enjoyed this article and how much it talked about the factors that go into a good design layout. I always had trouble trying to figure out where to place widgets to make it the most appealing to the user, and I really like how they brought in the idea of balance into the design and the idea of a location and size of different widgets being able to offset other widgets on the screen. Gestalt's principles of proximity, similarity, continuity and symmetry are also good guides for the layouts of widgets, and keeping these four in mind, it becomes easier to design layouts with a checklist of what to cover and consider. Before, when I was designing layout, it was a lot of trial and error to see what "felt right," but hopefully with these principles laid out, the process will be able to go much faster than before

Edmundo 20:28, 1 November 2010 (CET)

Most of the principles introduced in this reading seem really intuitive and despite the fact that the examples provided are very outdated, they do a good job of illustrating the significance of the principles. This reading will probably be helpful in our implementation of the UI since it will allow us to think the way our users might think and hopefully see some of the structure that will be applied by the users.It was also helpful to see what kinds of UI design flaws contributed to confusion and or distraction for the users.

Albert Tseng 20:43, 1 November 2010 (CET)

This article is an insightful treatment on the foundational principles of the theories of good design and structure. It demonstrates the various aspects involved in constructing well-supported organizations, and gives a distillation of the essential criteria to follow while designing. I found the section on the assumptive tendencies of the human mind (which form the basis for optical illusions) to be fascinating, and enjoyed the optical illusions themselves as well. One thing I found to be particularly helpful was the section on common errors; for me, knowing what not to do is an important factor in learning something new effectively.

Seng Heng 20:48, 1 November 2010 (CET)

It was interesting seeing all of these design principles laid out in concrete detail. I had a sense of 'symmetry good, balance good, garbled mess bad' but seeing examples of each of these (and violations of such) really helped me understand why these principles exist. Before, making placement choices seemed somewhat arbitrary based on what 'looked good' and what felt weird, but having these sort of intuitive details explained makes it less arbitrary.

Sung Ma 20:59, 1 November 2010 (CET)

The reading shows many failures of previous design, guiding us to better design. I was impressed about the placement of advertisement where scientists would study how people's eye scan the page to find a best place for advertisement. It is similar to house interiors. For example, placing your queen sized bed on one side of the wall, or putting your desk and piano near the window but not too close to your bed, etc. Although you might have similar furnitures, it can create a whole new feeling after placing them in different positions. Although designing does not have a straight foward rule or principles, it is good to have experience and idea on how things compose.

Arthur Huang 21:01, 1 November 2010 (CET)

The graphic approach is similar to the Model Human Processor, but less precise/concrete, yet is easier to follow. The example that points to the spacing between letters is interesting; such subtle things that we usually don't observe actually make an impact on the final product. It seems like there are always more things to consider when designing a product. Another good point the article brought up was grouping related elements and creating a hierarchy of importance for those elements. This helps shrink complex systems into more manageable groups.

Bichen Wang 21:08, 1 November 2010 (CET)

This stuff about relative positioning and how the human brain interprets shapes is quite interesting. Even the design of everyday things like web browsers and this word processor follows this incredibly well, and perhaps the designers of these knew about this. See these toolbars everywhere? Even though there are absolutely no markings that they are horizontal, our brains just automatically see the related buttons in a row as opposed to things being in columns. The “File, Edit, View,” etc bar has no line underneath it separating it from the address bar, yet there is clearly a horizontal relationship between the menu items and what that bar is. Also, the grouped back/forward buttons of Firefox, among other UI elements of Firefox, follow this trend.

Avery Gee 21:28, 1 November 2010 (CET)

I think principles of grouping, aligning, symmetry, etc are small changes that can make a big difference in your interface. Since it is really easy to make all of these things happen in XML, someone should definitely go through and make sure that the design is consistent and logical. Harder tasks would be making sure that the right amount of information is displayed and that things are in the most advantageous positions. I also think that white space is important as mentioned in the article. This is because it really helps directing the eye to where you want it in the page.

Karthik Jagadeesh 22:05, 1 November 2010 (CET)

This reading was extremely interesting and I feel like it related many basic but very important concepts. For example, the interface that you should create should be approachable and simple. That means that even if you don't understand how something works before hand, it shouldn't take a lot of effort to learn it. This concept ties in with many of the things from the previous readings. One of the major Heuristics that you should take into account is how efficient the system is to use. If the user doesn't understand how the system works it would be very inefficient.

Another thing to take into account is that it should have a central concept that attracts the users attention. The best example of this is the Google website that only has a search engine at the center of the google homepage. This makes it clear to the user that the search is only point of the website. It leads to no confusion.

James Yu 22:52, 1 November 2010 (CET)

Since I do part time in web development a lot of these techniques I have read about and is relevant to my work. For example using alignment, symmetry, and spaces for grouping is something commonly done in webpages, and a difficult technique to master. For example, using negative space is a very effective technique and done in most modern websites, but becomes difficult when developing websites that need to support smaller screens, which allows more limited whitespace. A lot of the errors discussed (like aligning labels but not buttons, using bounding boxes excessively) I have see and committed before in webpage designs. Optical adjustment however was a new idea and given the illustrations fairly convincing (the scaling of the diamond and circle really looked better after adjustment).

Alexander Wong 23:55, 1 November 2010 (CET)

This was a refreshing reading as it was the firs treading really dealing with graphic design. The book did an excellent job of presenting the Gestalt principles and then illustrating them with concrete examples. The side by side comparison of interface elements were also great concise ways of illustrating principles.

Tying back into what we learned before about affordances. I wonder how much of now everyday graphic and interface design is learned or natural. Certain design elements certainly communicate affordances. Raise buttons, for instance, suggest that they should be depressed. However, underlining a string of text now has the affordance of being clickable. This is an affordance that we now take for granted but it probably had to be learned.

Retrieved from "http://bid.berkeley.edu/cs160-fall10/index.php/Graphic_Design_and_Gestalt_Principles"
Personal tools