Graphic Design and Gestalt Principles
From CS160 User Interfaces Sp09
Lecture on Mar 30, 2009
Readings
- Organization and Visual Structure. Designing Visual Interfaces. Chap 4. Mullet and Sano.
Jeffrey Patzer - Mar 29, 2009 05:36:53 pm
This particular article in my opinion was extremely good. It provided some very good pointers on how to organize elements. The elements that it discussed reminded me of a photography class and how one employs certain elements that one uses to make their picture visually attractive. The distinction that the article draws however is making an interface that is visually attractive and informational. That's where the second part of the article was great. It gave a concrete set of rules that have been developed through observation and experimentation that we can directly employ into our own interfaces. I think that as beginning user interface designers having a small set of rules to follow is very instructive. As we get more comfortable with these sort of tasks we can begin to change the rules and make them work more appropriately for us. I think this article emphasizes understanding how to effectively communicate information to a user and then how to do it in an artful manner.
One particular thought that I had over the course of this article though was that by giving us a list of rules to make interfaces 'work well visually' that we are limiting ourselves. We are only serving the majority of the population and are not serving the entire population. But I guess the point is that we want thinks to work well for 95% of people rather than mediocrely for 100% of people.
Jason Lo - Mar 29, 2009 06:17:38 pm
I thought this reading was also very helpful. It got straight to the point about the concepts and ideas of how to design GUIs. I thought another very good point of the article was the separation of all the concepts into examples that were practical and real world, at a later time they would go into a summary of the concept. I thought the concept of alignment was interesting, how circle characters had to actually be larger than they seemed to compensate for the way we viewed objects. It seemed like many of the concepts were in fact very similar could be generalized into larger rules and coalesced into one rule.
I thought for an article on how to use space, the use of space in the practical examples was not effective. The splitting of the text into two columns was a pain to read especially on the computer and the length of the two columns was not symmetrical either. It would have been nice to have concept and practical examples interleaved.
Denise Ngai - Mar 29, 2009 07:49:05 pm
On the surface, I like how the article separates the contents covered in individual categories. In addition, the real-life examples (figures) are helpful as well.
This article stresses the importance of organization, placement, visual aspects of the UI in terms of its functionality. I find this of foremost importance. One key thing that struck me is the idea of "proximity." Associating individual elements with nearby elements is definitely a concept that I know I practice. For example, I know that in my browser window, I can find the "Edit" tab beside the "File" tab, or I can easily find the "Back" button beside the "Forward" button. Similarly, this goes along with the idea of "similarity," since things that are visually similar are grouped together (the "back" and "forward" buttons).
Overall, this article gives good rules of thumb to consider when designing a UI. It is important to consider where items are placed on the UI, ensuring that they work well with the human perception and that their placement is key to their functionality.
Matthew Can - Mar 29, 2009 09:04:10 pm
This article contains many useful guidelines for user interface design. I'll admit, I was a bit worried it would be another psychology reading when they started to mention Gestalt psychology, but the content is actually fundamental and highly applicable to design, in our case UI design.
As I was reading, I noticed that I use a lot of these principles of organization and visual structure when I make designs but without realizing that I'm doing so. This is because it is so easy to perceive asymmetry, incongruence, and misalignment. In fact, the human eye finds these things annoying. Although these principles are taken for granted, I still found this reading useful because the authors formalized them. For example, the equal-area-spacing rule of thumb is much more useful than my old method of "move things around 'til the spacing looks right." The notion of balancing items on an asymmetrical interface as one would balance weights on a lever was interesting. Again, I think this is something I try to do without giving much conscious though to it.
It was immensely helpful that the authors provided many examples to illustrate each principle. In particular, it was helpful that they incorporated examples from print and from user interfaces. It shows that their design principles can be generalized to any kind of layout design. With the UI examples, the reading analyzes interfaces that adhere to the design principles and interfaces that violate them, often side by side. This made it quite clear that it is extremely important to follow the principles when designing an interface. To make things even better, the authors give clear instructions on how the reader can put these principles to use.
Dwij Garg - Mar 29, 2009 11:51:32 pm
I liked this reading. It gives designers a good basic and to-the-point overview about how to design user interfaces for the customers. I really liked the overview of control of structure. As the readings say, this allows the designer "to influence the process of exploration and ensure that the information is delivered effectively." I think that this is really important because in my opinion a good design comes out of two main ideas: first, effective and ideal research of what needs to be shown to the end users, and what the end users want and need. The second is to make sure that the interface is sound and delivers all that simplify the end users' tasks, and effectively solve the problems that the interface is designed for. The control of structure part of this readings really hit these points, and relate to all designers what is important while designing good user interfaces.
Alan Young - Mar 29, 2009 11:39:48 pm
This article was interesting to me and elaborated on the benefits of organization and visual structure. Benefits include unity, readability, and control. I found the principles of perceptual organization to be interesting because they are psychology principles that make sense and can be readily applied to user interface design. In describing these principles, gestalt effects, including proximity and continuity, are introduced. For example, an important aspect of structure of a news site may be the grouping of the headlines. Designers would want to group headlines that are similar in topic together so that a visitor to the news site could deal with the wealth of displayed information. Many of these ideas, especially the idea of negative space, reminded me of principles that artists employ to create the best presentation for the viewer. By leveraging the users’ preconceptions, knowledge, and disposition towards symmetry and groupings, interface designers can effectively create visual cues that are easy to get a hang of, thus being more aesthetically pleasing. What I like most about this article is the many visual examples that were given to illustrate the ideas. Although most of the screenshots are of display boxes from an old Mac OS, I can see how a lot of those old designs have carried on to the current designs we see in modern OS.
Mark Dhillon - Mar 30, 2009 12:54:56 am
This article is very clear and precise in what it presents, which I appreciate. I also found the principles put forth to be very intuitive. I enjoyed the example of the Photoshop dialog box, as it really served to demonstrate the importance of spatial logic in design. I would venture to say that a lot of the slowdown in that occurs when a user is interacting with a system is due to a poor sense of spatial logic by the designers. I did think it was funny that the author took the time to compare some Mac and Windows stuff, and sided with Mac. I found the section on False structure pretty interesting. I have certainly encountered applications that had numerous popups and control panels to deal with and used bounding boxes in order to express some retarded hierarchy. In my experience it usually doesn't facilitate good interaction with the system, and it was nice to see the author define this problem.
Moonway Lin - Mar 30, 2009 12:55:30 am
I first learned about Gestalt and perceptual organization in Intro to Psychology, but I never expected that this knowledge would come in handy in UI design one day. Even though a lot of principles are common sense, I think this is a good and useful reading, with lots of detailed examples and discussions. While it's true that many example interfaces given in the book are old, we can see that the same design mistakes are being made in modern applications, just as they were in the early days of the Mac OS.
Shoeb Omar - Mar 30, 2009 01:17:56 am
I liked this chapter, and thought the examples were amazing at explaining the material. The principles of proximity and continuation and their exploitation by the reuter's logo, or the way they changed the UI of the dialog box in Figure 103 were extremely effective at both teaching me what the concepts were AND how to apply them to UI design. For some reason a lot of the ways things applied reminded me of things to be caught with heuristic analysis. For example, the Windows file saving dialog--surely some of the ambiguities in its design could be corrected by applying the heuristic "speak the user's language"? Then again, perhaps not, as they were speaking the language, just not in the right order or logical sequence. Also a lot of things about symmetry and alignment seemed obvious, not super insightful concepts. But perhaps back in the day this sort of overview was more groundbreaking. For us, students who have grown up with UIs that work, maybe they aren't as revolutionary because we are more able to identify bad UI than they were back then having seen mostly good UIs for many of the concepts presented?
Sum Sum Wong - Mar 30, 2009 12:54:50 am
This is a very nice and interesting reading and it contains the information I am looking for. I can say this is one of the best readings I've read in this class. And I found some parts of the reading (gestalt, visual balance, etc) talked about something I've leart in a visual communication class long time ago
The reading started with talking about the benefits of well-organized visual structure, which are unity, integrity, readability and control. The idea of gestalt is then introduced along with several gestalt principles, including,
1. proximity - a component is more strongly associated with nearby components than with further ones.
2. similarity - a component is more strongly associated with more visually similar components than visually unsimilar ones.
3. continuity - people tend to interpret a visual object as combination of most continuous and simple figures.
4. closure - people tend to interpret a visual object as complete and closed figures.
5. area - people tend to see a larger object as background and a smaller object in it as foreground.
6. symmetry - "grouping based on the emergent properties of the form instead of the characteristics of its constituent parts" (pg 93.) (I found it hard to reorganize)
Later, the book also mentioned four terms, Grouping (group components into higher-order units), Hierarchy (different importance of different units), Relationship (relationsip between different elements/units), and Balance (balance of visual weights of components).
I found the "Common Error" part of the reading (pg 105 - 112) particularly useful since it provided a lot of examples for us to think about so that we can prevent committing those during our own design.
Carolchen - Mar 30, 2009 01:38:31 am
I liked how the reading immediately related each graphical design concept back to user interface design and how the concept might apply to windows, dialog boxes, and pixels. I felt that the second half of the reading was more engaging and better organized than the first. In particular, I read with great interest the four techniques for structuring a display: symmetry, alignment, optical adjustment for human vision, and negative space. I was familiar with the first two and the final one, but had not come across any other reading about optical adjustment. I found that to be very interesting; while it may be just a small detail that shapes with acute angles look smaller, being able to spot the discrepancy and fix it makes a big difference.
In the earlier part of the reading, a couple points stood out to me: first that we interpret a figure as its gestalt when it is symmetric, and assign it a higher degree of "figural goodness", and that grouping without heavy boxes and borders by applying gestalt principles is encouraged, it being very possible to do without the heavy boxes and borders in most cases.
Sean Ahrens - Mar 30, 2009 01:40:21 am
I found this reading quite enjoyable and valuable. I think it's a considerable change of gears from the readings/learnings we have had prior, which focused on cognitive psychology and user interface theory at a higher level. This reading concentrating on visual layout at the practical level -- dealing with the layout of text, graphics, and form fields. A number of significant principles popped up: unity, integrity, readability, and control; proximity, similarity, continuity, closure, figure-ground reversal, area, symmetry; and position, size, and value. My favorite lesson from this reading was how the designer must compensate for alignment features perceived by the eye: that to make a circle or pointed shape appear to be in-line with a box shape, you must overcompensate the size of these. I found this to be extremely intriguiging and useful in my practice of visual design.
Gregory leshner - Mar 30, 2009 02:05:56 am
The reading did a good job of providing a lot of visual examples of the concepts they were trying to hammer home. One would expect a lot of visual examples, especially for a chapter on graphic design principals ... so it didn't disappoint. I found the second half of the paper more useful than the first. Here 4 concepts were handled, that of symmetry, alignment, optical adjustment and negative space. These principals offer a basic toolkit for creating and editing graphic designs that are pretty intuitive once you are aware of them.
Chunwei Lai - Mar 30, 2009 01:49:42 am
This reading was like a step-by-step guide to GUI design which is very practical. I definitely also enjoyed the many examples that they have provided. Another refreshing concept is the use of white space (or negative space) to align elements rather than positioning the elements themselves which allows the designer to direct the user's focus and organize layouts. I personally prefer complexity in an interface because I like options but the way they presented the use of white space but not everyone can appreciate the complexity and the argument the reading provided was very good for more judicial use of white space.
Prahalika Reddy - Mar 30, 2009 01:57:23 am
The article today was pretty interesting. The information all seems very useful. While I was reading it, it felt like the concepts described were obvious, but I realized that I don't actually put that much thought into making sure to follow the principles described, so it was good to read about them.
I especially liked the Gestalt principles that are described early in the reading. These seem very useful when designing UIs. The one that I liked the most was the principle of continuity. The images in the reading as examples for that principle really helped explain the concept. The figure-ground reversal concept is another concept that I thought was pretty cool. I also think that it would have been nice if the article had some information as to why we view the images the way we do.
I also liked the section on alignment. It's interesting how things like that can really make such a difference in the overall clarity of the design. I can imagine how unappealing it would be to look at misaligned edges and lines in a UI and how much better it would be if the edges were all simply lined up with each other.
Timofey Titov - Mar 30, 2009 02:20:15 am
It's always fascinating to see how simple elements form a big whole. This got me interested to look closer into Gestalt psychology :) This article addresses the problem of articulatory distance. However, we can see that it's not completely separate from semantics.
This article provides clear guidelines on how to lay out each screen with widgets and controls. I wish that developer tools were more user-friendly, so that it'd be as easy as paper prototyping. A small visual change can sometimes mean a huge coding effort. Painters have a much better interface at their disposal. I see communication-oriented design as a subordinate technique. You cannot sacrifice usability for aesthetics, even if they are related. Why is the axis of symmetry diagonal in the example on p.16 (pdf) ?
Saung Li - Mar 30, 2009 02:33:12 am
I thought this was a really useful reading, as it gave a lot of examples showing the importance of organization and visual structure. Grouping similar elements together, establishing a hierarchy according to the importance of the elements, relating the elements using size, position, and shapes, and balancing the elements make the display aesthetically pleasing and allow the user to process what is going on faster. Emphasizing these principles reduces the amount of cognitive processing and mental preparation required to understand and perform tasks. The screen looks cleaner and more pleasing if its elements are symmetric and like elements are aligned either horizontally or vertically. I found the optical adjustment for human vision section very interesting. A circle and diamond look smaller than a rectangle so they should be enlarged to all appear the same, and characters with curved edges should be spaced more closely together so that the spacing of all characters look the same. Optical spacing emphasizes not the distance between characters but the area between them. Also important was the importance of negative space. Often people may think that blank space is a waste of space and should be filled up, but spacing helps reduce clutter and help organize groups of related elements. Balanced elements with negative space seems to be a more complex but creative way to display elements and capture the user's attention. The mentioned techniques are a response to the gestalt principles, which include proximity, continuity, similarity, symmetry, area, and closure, the ways that people perceive the elements of the display. This reminds us of how important it is to understand how the user thinks and making designs that take advantage of that thinking processes so that users can perceive and do things the most efficiently.
Anjana Dasu - Mar 30, 2009 02:13:16 am
Whenever I tell hardcore programmers that I'm interested in user interface design, they look at me like I'm completely ridiculous and ask me if I really care about the placement of a button or the alignment of a bunch of fields. I'd like to show them this article, which (imo) effectively underscores the importance of a streamlined GUI and provides ample advice on how to obtain such a sleek look and feel. Having an clean visual structure is simply an extension of information management-- it's a way to best organize information for a user to process effortlessly. For example, simply aligning and/or grouping related fields or placing comparable elements side by side can greatly ease the user's experience. I thought Figure 139 was a particularly good example. In the first Image Preferences dialogue, the bolded labels are aligned and alternately interspersed with the controls, while in the second the labels are aligned to the left of the controls (making use of negative whitespace), which, as the writers point out, greatly simplifies the scanning of labels.
Overall, I think the writers gave a lot of useful tips. Although some seem obvious (like "using symmetry to ensure balance" or "using alignment to establish visual relationshis"), some were things I wouldn't have thought about on my own (for ex. "optical adjustment for human vision" or how to take advantage of asymmetry).
Rohan Dhaimade - Mar 30, 2009 02:58:08 am
I think this is the article taht I've always been wanting to read in this class. An analysis on how you should look at UI designs and what to consider when making a UI. Particularly parts of the internal representation, patterns, symmetry and other principles. I think the one issue that they haven't covered though is customization of UI and how you should handle that when you want a user to move things around. Also the interactions between buttons, but I guess the paper was mostly covering very static UI with forms and objects.
There were a lot of things that were pretty obvious (having things next to each other means they're related) vs things but I was interested about the fact that the things inside other things are related. So when you create a UI your laying a ground and object that the ground is in. I started analyzing and looking at things in terms of these concepts and noticing that many things do follow these principles.
Cuong Ngo - Mar 30, 2009 03:22:56 am
The chapter discusses the importance of structure in user interfaces. I couldn't agree more with the author that "structure affects the visual experience at its most primitive level because it is the first aspect of the display to be perceived as information is extracted and used to guide subsequent interaction." For example, drivers can quickly apprehend the meaning of a road sign thanks to its coherent structure. Mullet and Sano also pointed out four techniques for structuring an interface, which are are symmetry to ensure balance, alignment to establish visual relationships, optical adjustment for human visions, and negative space. It is also suggested that designers apply these methods to their design wherever applicable. The next project may be a good candidate.
Nalditya Kusuma - Mar 30, 2009 03:19:47 am
What an awesome reading! this one has lots of good pictures that are very useful in understanding the concept of organization and visual structures. I think the main important points to remember are: Symmetry, Alignment, Optical Adjustments, and Negative Space; they are important in ensuring that your UI design looks well. What thrilled me the most is the Optical Adjustment part; it shows that there have to be inequal spaces in between letters in a word to make good alignments. The picture that shows objects with sharp edges have to be drawn bigger than others in a line to make them all aligned also shocked me. Overall, this is a very good ready and I would strongly recommend it for the next class!
Sean Kim - Mar 30, 2009 03:10:12 am
Since there can be multiple interfaces to be displayed in a view such as a window when we develop an interface system, we have to consider how they are organized for better result. From this article, I can see several principles to help us for solving this kind of issue. Its background can be utilized more beneficially. By grouping interfaces with a hierarchy relationship, it can be also efficient. The author also claimed the importance of its balance each interfaces. For these kind of reasons, he suggested using symmetry, alignment, and optical adjustment for human vision, and shaping with negative space. This article can be very helpful to combine multiple interfaces in one of window.
Ian Hildreth - Mar 30, 2009 03:25:50 am
This reading gave a very simple and thorough explanation of design principles that are very intuitive in nature but often overlooked. I had never thought that the school of Gestalt psychology could be related to interface design, but the article made a lot of sense. I think the two most important parts of the design are symmetry and spacing. Too many interfaces have gone astray from too many buttons grouped together in one category and a lack of alignment of both labels and fields, which the article points out as being crucial. The worst examples are database frontends, which like the article points out, are very cluttered with unrelated fields. Some of the most interesting concepts I found were the alignment of text and shapes. Often overlooked, letters have to be aligned on smaller axis, and then extended over them slightly to give the appearance of being the same size and aligned, due to curved edges. Also, spacing between different letters applies, because straight edges need more space for the eye to distinguish them than round edges. For shapes, circles and diamonds need to be enlarged to seem the same size as similarly drawn rectangles. Overall, I appreciated the myriad of examples to aid this reading.
Kevin Huey - Mar 30, 2009 03:37:27 am
This reading outlined just why so many programs fail miserably. Users are so picky and adverse to many different interface ideas that we as designers must pay careful attention to detail for every little thing. The one example I would like to go into is the relative symmetry of shape sizes. The reading described the reasons for needing special treatment for curved shaped over straight lines. Because of the curvature, spacing must change to reflect differences in proximity. Squares must be smaller than circles, which in turn must be smaller than diamonds if you want to keep the shapes symmetrical in size. The problem of negative space probably plays a factor in this property as well. With more random negative space due to differences in shape, we have to change the shape sizes relative to each other. In the end, we build stronger symmetry and help ease the pain of users when they try to use the program.
Shendy Kurnia - Mar 30, 2009 04:22:55 am
Roughly summarizing this reading, human eye at the lower level is essentially governed by visual structure. Hence, in user interface design, visual design is a serious game to be thought trough. The reading lists criteria of a good visual design, and then it suggests principles of a good visual design such as proximity, similarity, etc.
Kevin Nakahara - Mar 30, 2009 04:15:12 am
The Gestalt attributes identified in the reading certainly seem like something important to keep in mind while designing graphically. The breakdown of grouping into proximity, similarity and continuity gives us three basic building blocks by which we better know how to design. In fact, it seems to me several effective layouts implement of combination of these attributes. The breakdown of form perception was similarly helpful. By better understanding the way the mind identifies visual objects, we can better develop graphical attributes, such as buttons, that are able to avoid confusion. For example, you wouldn't necessarily want to make a button with a small red square in a big green square because it could confuse the user into thinking there are 2 buttons.
David Jiang - Mar 30, 2009 04:39:22 am
This is overall a very informative article, some of the examples that were used confirmed some of my initial predictions about what I felt were poor design decisions. Other ones surprised me and lead me to be more aware about what NOT to do when designing my own things. I like how this article used a lot of examples pertaining to what we see almost everyday. Some of the examples were a little bit older than others, but they still got the message across. I learned about grouping similar things together, how size is the best way to differentiate between hierarchies, and how to divide things up so that the interface is symmetrical.
Adit Dalvi - Mar 30, 2009 03:05:59 am
This reading was one of the most interesting articles I’ve read this semester, not only because it’s a different from the psychology based readings that we’ve read before, but also because I prefer to code backend stuff usually and I leave the frontend UI stuff to others. I liked how this reading gave clear and simple design principles to keep in mind while designing interfaces and backed these principles with a lot of visual aids. The gestalt principles were the most interesting to read about, because I think they’re some things that a designer should always keep in mind and we often tend to forget or go against in some situations (for example, if the code doesn’t allow us to do so easily). This reading is definitely going to be useful for the upcoming assignments.
Phiroath Chan - Mar 30, 2009 03:02:40 am
Organizing anything can be a tough job at first since one doesn't usually have like a concrete path to go for. That's why i think this article is very helpful. It provides a list of benefits to having structure to motivate the designer to develop effective structures. Unity is a key since it deals with connecting the pieces of your design together so it flows as one. Another benefit was readability. I thought this is important because like me I feel there are other people out there that are visual people. They like more pictures than words when they are forced to read something. So having the content divided up into smaller more manageable chunks is a big plus in my opinion. The rest of the article was overall useful since it provided details on alignment and such.
Chang Su - Mar 30, 2009 04:59:31 am
We come across both good and bad graphic designs everyday. Just pick any magazine off the rack and flip through it: why is that some advertisement create such a sense of aesthetics, while some just look like they were created on a very tight budget? Reputed advertising agencies charge a premium for their service not without a reason — it is hard to get it right. But this reading is a good place to start. Most commercial software, as well as many open-source ones, nowadays have excellent interface design. Nothing is perfect, of course, but none of them makes the very low level kind of mistakes quite commonly made 20 years ago (such as the Apple ImageWriter LQ cited on page 109). This is why we are all so used to well-thought and well-executed designs that we hardly spare them a thought. Only when I got down to designing my own interface in the individual coding project did I realize that the task is really not that simple. In retrospect, many tips given in the reading are extremely useful. For example, allowing the scroll bar to project beyond the margin ironically creates a sense of alignment. I will surely pay more attention to these details in future designs.
Ling Chen - Mar 30, 2009 05:37:09 am
Like what everyone has been saying, this has been a helpful article, especially with all the illustrated examples. The arrangements of different elements can make big impacts on a GUI. Visual guides and emphasizes can be as powerful as actual physical elements. Symmetry, alignment, adjustments, and negative spaces are important techniques for structuring displays. As the article pointed out: symmetry ensures blance; alignment establishes visual relationships, optical adjustment is for human vision, and negative space for shaping the display. I enjoyed how much power white space has for desinging interfaces. White space can provide a spatial separation of independent units, and draw attention to important display elements when other choices are not available. "White space is not wasted space!"
Bernardo de Seabra - Mar 30, 2009 03:55:45 am
This reading presents us with concepts of organization and visual structure. The authors start by making the case why these concepts are important for interfaces and then go into more details about some principles of structure. The authors discuss unity, integrity, readability, and control. The unity aspect of an interface defines the harmony of each element in the interface and how they mesh together. Integrity represents how well and succinctly the interface communicates the information. Then readability is about how to slide and dice the information/data in order to not overflow the user with too much data at once. Finally, control makes sure the user's attention is where it should be and the right information is delivered at the right time through the right medium. The authors then discuss a few principles of perceptual organization such as proximity that says that individual elements are more easily related to other individual elements close by rather than farther away; similarity that describes that elements that share the same basic visual characteristics are more easily associated with each other; continuity which states the preference for contours that are continuous even if are not close to reality; area which states that the larger figure of two overlapping figures will be seen as the main figure while the smaller one as the background; and symmetry which states that humans have the tendency to like symmetric shapes rather than asymmetric ones. The authors then go into more detail about each one of the principles above by elaborating the definitions with practical examples.
Siddharth Shah - Mar 30, 2009 09:32:17 am
I thought this article was pretty interesting and really laid down some good solid groundrules for UI design. All of the examples also helped to really nail down what this article was trying to say. I had never heard of Gestalt Principles before, so it was really interesting to learn how psychology can play such a big role in UI design. I have found that routineness is a really big factor in determining the usability of an interface; for example, the back button in ALL major browsers is in the same place, and keyboard connectors are ALWAYS purple, regardless of manufacturer. This sort of familiarity helps the user adapt to the user interface effortlessly.
Meiying Li - Mar 30, 2009 09:53:35 am
This reading talks about the Gestalt principles of visual design:
- Principle of Proximity: tendency in grouping nearby elements
- Principle of Similarity: tendency in grouping elements with the same basic visual characteristics (shape, size, color, texture, value, orientation) Proximity < Similarity
- Principle of Continuity: preference for continuous, unbroken contours with the simplest possible physical explanation
- Principle of Area: a smaller of two overlapping figures will tend to be interpreted as figure while the larger is interpreted as ground
- Principle of Symmetry: grouping based on the emergent properties of the form instead of the characteristics of its constituent parts
I really like the examples showing failures in taking these principles into account while designing the interfaces. They become more practical and easier to apply when the book analyze the common error examples. It's fun to see the example violating all the principles on page 25.
Other useful tips in this chapter are:
- Negative space can be used as a tool to help groupings in a "labels above" design. "White space is not wasted space".
- The principle of balance in UI design, assigning weights according to the sizes of the objects in a UI
I think the reading covers the basic principles in UI design pretty well, though, I would love to read more about colors, which has no less effect than object arrangement in UI design.
Alexei Baboulevitch - Mar 30, 2009 09:51:25 am
As with many other UI design principles, graphic design is interesting because we don't notice it unless it's not present. The Gestalt principles in particular were enlightening to read about. We don't often think about how our brains group graphic elements together, but seeing proximity, similarity, continuity, and form perception in action is very revealing of how our brains work.
It's also very useful to have a common language when talking about graphic design. I find that when I'm designing an interface, I automatically try to make it symmetrical and aligned, and having this spelled out explicitly is useful for figuring out if an interface design is good. Computers have made optical adjustment almost invisible in fonts, so it's important to remember it when dealing with curves. I've never thought about negative space much, but it's clearly very important for grouping and should also be considered. The designer's job is to take these subconscious behaviors and manipulate the brain into perceiving the interface more efficiently.
The discussion of how good design makes the user intuitively group elements together reminds me a lot of direct manipulation: if it's present, the user can work on a higher level of interaction with the program instead of worrying about low-level details.
Andrew Chen - Mar 30, 2009 10:14:55 am
Just like most of my classmates have mentioned, this article has many useful principles that are excellent aids to the designer; however, I do have some questions about the reading. The first question is, which principle or technique do we look at first? When I reached the "All of the Above" example of common errors, I found it funny, but I also found myself a bit at a loss how to proceed "fixing" it. For the four techniques addressed near the end, the article provides steps to apply them, but just the same, I do not know which technique to apply first. Do we simply tackle the principle that comes to mind first, and add others as we go? Secondly - this is more of a comment than a question - the article employs the use of the "squint test," and acknowledges that for techniques such as optical adjustment, no hard and fast rule applies, but it depends on designer testing and experience. Seems like "eye-balling," the most primitive form of analyzing a design, still has its place in more advanced designing, doesn't it?
Victor Lum - Mar 30, 2009 10:22:37 am
While reading this article I realized that I subconsciously already make some of these choices when designing anything. I guess it's nice that the article specifically details some aspects, like symmetry and alignment, that makes certain visual designs appealing. I always thought certain things looked better than other things, but didn't realize that it could help convey information better if data is organized in a certain way with certain visual cues. I also liked the real-life examples they used, because looking at the images I would think they looked kind of off and didn't know why, but after reading explanation would agree with it.
Chris Thompson - Mar 30, 2009 10:43:01 am
"The eye craves structure and will seek to impose its own organization onto a design whose structure is not readily apparent." This quote really rings true with me, as I'm a fan of symmetry and always slightly bothered when something could easily be symmetrical but isn't. The article then immediately and briefly outlines some of the core principles of the Gestalt school of psychology: Proximity is the principle that elements closer together will be more likely perceived as related. Similarity states that the more closely an object visually appears to another, the more strongly they will be associated with each other. Continuity claims that the eye seeks the simplest combination of unbroken shapes that can explain an image. Figure-ground reversal is the confusion between two overlapping objects in which focus keeps flipping between them. The principle of area says that if two figures are overlapping (or can be perceived as such), the smaller of the two will be perceived as being on top. Also, the more symmetry there is, the more likely an object is to be used. Grouping can allow us to deal with large amounts of visual information more easily by allowing ourselves to chunk more into each unit of cognition. Hierarchy is the perception of dominance of objects based on their ordering (items on top are generally considered prominent). Relationship in this sense is the good, consistent, regular ordering of objects on the visual cartesian grid. Balance is a more subtle property in which smaller elements can offset the visual effect of opposing larger ones by being placed higher up on the screen. The rest of the article goes on about how to spot (and avoid) violations of these principles, then how to properly design things using them, but most of these ideas follow if the basic principles are understood.
Szu-Chun Mao - Mar 30, 2009 10:57:22 am
Since this chapter is written back in 1994, some of the examples shown are quite outdated. I feel that most the information provided in the reading are common sense; however, it is well structured and clearly explains the concepts through the use of lots of examples. It explains how humans think when interacting with certain UI design. It goes into detail of how to make UI design decisions and provides practical guidelines on UI design. A lot of good practical techniques are demonstrated with picture examples in this article. It shows how to use alignment, symmetry, white spaces and optical adjustment in good UI design which is very useful. I especially like the idea of how to use white space in order to draw the user’s attention to certain areas of the design.
Alexander Cho - Mar 30, 2009 11:10:27 am
This article pointed out many issues of layout that are agreeable. The examples of faults and errors immediately produced uneasy feelings because of their poor layout choices and it was quite interesting to analyze and see the exact reasons for these feelings of uneasiness. They make an important point when they say that display and layout are the first things that the users sees and unconsciously (or consciously) critiques. White space, continuity, integrity, hierarchy, alignment, etc. are all things to consider when creating our displays for our user interface.
Aaron Hong - Mar 31, 2009 04:30:55 am
I've got to admit there is a lot of interesting and important stuff in this reading. Everything from organization, white space, alignment, symmetry, it all helps the user accomplish something while looking good as a plus. Sometimes you have to thing how will a use take in the interface at first glance, which is very try how we should design things, that's why color, shape, and other things come into play. One of the most interesting design things I learned from the articles is placement of labels for controls. If you put them on top, the user has to still "skip over" interviewing elements, while the other placement of the labels, you can just read down vertically and scan in all the titles. The book uses such a method in the margins for it's titles. However, the size is smaller, so it runs into another design issue and can also be easily missed.
