Graphic Design and Gestalt Principles

From CS 160 User Interfaces Sp10

Revision as of 01:14, 1 April 2010 by Mattkc7 (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)
Jump to: navigation, search





Mattkc7 - Mar 31, 2010 08:14:15 pm

Kathryn Skorpil - 3/26/2010 18:25:36

Grouping is an important part of why HTML is somewhat easily learned by most people. The opening and close tags group content together that you want displayed a certain way on a webpage. The grouping and arrangements or these tags creates the structure for a webpage.

Richard Mar - 3/26/2010 19:20:12

The part on optical spacing of text reminded me of why I switched to using LaTeX for my CV. In Word, certain letter combinations, like 'ffi' appear to be oddly spaced. LaTeX corrects these with special characters that fix the spacing. As a result, my CV looks better with LaTeX than if I did it with Word.

Alexander Sydell - 3/27/2010 1:17:38

I liked the discussion in this reading about balance. I think that while designing it would be helpful to think of a fulcrum and to try to balance the interface elements around it by their size or visual weight. This would be particularly useful for asymmetric layouts and would give a more objective measure of how well the components have been placed in an interface design. As an example, a designer could place an imaginary fulcrum in the middle of, say, a web page and make all of the various components balanced around it. This could be another useful measure for making the design more pleasing to the human eye.

Daniel Ritchie - 3/27/2010 10:49:18

Most modern UI toolkits include WYSIWYG interface editors that allow developers to quickly build up an interface out of standard widgets--Visual Studio and Interface Builder come to mind. These editors make some limited effort to help their users build Gestalt-principle-conforming interfaces (for instance, they have "snap-to" features that make alignment easier). I wonder, though, if anyone has ever created an interface builder that goes further. For instance, what if your interface builder could alert you when some component you added has caused one of the "Common Errors" in organization and visual structure? Such an application could also be suggestive, offering hints about how to fix such problems or how to proceed with an in-progress design. How about taking this idea to extreme: A fully automatic interface builder. Given a list of necessary components, information about their functions, and some knowledge about how they relate to one another, such an application would automatically construct a Gestalt-conforming interface containing the supplied components. Though ambitious, I could see such a system providing a useful starting point from which designers could then polish an interface. Such systems might also find application in highly customizable, user-generated-content-driven games, where the application cannot predetermine the information it must present to the user.

Mohsen Rezaei - 3/28/2010 19:33:49

To make a design suitable for users' eyes we would have to follow some basic rules. Some rules makes the user experience smooth and some make it easy. The rules that make this experience smooth are things like grouping, hierarchy, relationship, and the balance between different controls. Grouping helps with fast access, hierarchy makes the design better looking and less crowded w/o enforcement, relationship gives a left to right flow as most windows are in most operating systems, and balance makes sure the objects needed to be more visible to pop-out. Moreover, the other rules that make the user experience easier are about how controls and areas are laid out. Things like alignment, control relationships, and non-conflicting symmetries make the user experience easy and with no hassle.

Jeffrey Bair - 3/28/2010 20:09:02

Having unity, integrity, readability, and control seems to be basic things to keep in mind when designing a UI. It was interesting to see how the reading presented these in further detail that I would not have though of originally. For example, for readability, not only do you have to make the text large enough to be able to read, but you also have to make sure the separation or whitespace between the different parts of the UI are enough to signify it's unity. It was also interesting to see how the 4 ideas interact with each other. To make something more readable, you have to create separation that creates unity which in turn creates integrity of the controls as to what people expect.

Learning about the balance of UI's was also interesting in that balancing the perceived "weight" of certain boxes and text is similar to how you would adjust them with a scale. It just shows that users interact with user interfaces as if the objects are real and physical objects and seeing an unbalanced user interface is much like seeing it in real life. Knowing how to balance objects in order to have the users attention drawn to a certain point is something that I feel user interface designers are always paying attention to. The reading gave several examples of this but I look forward to doing the actual user interface designs and see how it works for different designs.

Charlie Hsu - 3/28/2010 22:11:17

This reading emphasized to me the importance of grouping and hierarchical organization of user interface elements. The reading evoked many memories of design choices made in the Individual Programming Assignments. At that point in the course, it was clear that some design placements simply looked "more intuitive" than others, but it was difficult to say exactly why. Now, elements such as symmetry, alignment, and balance make justifying decisions much easier: decisions such as where to put the "Clear Canvas" button on the drawing application, or the choice to centrally and symmetrically align my tip calculator. The reading also emphasized the importance of whitespace and bounding boxes; these are important elements in grouping, and there have been many times when I wish I could have some sort of "bounding box" UI element in the Cocoa Touch library. I instead opted to create some of my own boundaries with images of lines as UIImageViews.

Wei Wu - 3/28/2010 22:14:36

The reading suggests in its guidelines for use of symmetry in graphical user interface design that symmetry "usually boils down to whether horizontal and/or vertical symmetry." However, while the options in virtually all dialog windows are left-aligned, major buttons that commit the action for the dialog boxes or close the box are placed on the bottom-right corner. This implies an overall symmetry along the diagonal axis for the window. Although the article does not list an overall diagonal symmetry as one of the rules, I feel that this should be a standard for GUI design. Since all elements are generally left-aligned, it is most efficient both visually and physically for the buttons that will close the dialog/save its options to be on the bottom-right. The majority of users read left to right, so once they scan to the end of the dialog box, the major action buttons should be placed where they will be seen the fastest and accessed with the mouse the quickest. The user's eyes will already be near the bottom-right corner of the window, so this is the most natural location for the buttons. Also, in terms of the overall look of the window on first glance, placing the buttons on the right instead of left-aligning them with the rest of the options adds balance to the composition instead of leaving awkward empty space in the bottom-right corner.

Jason Wu - 3/28/2010 22:15:57

I found the Mullet and Sano reading very useful for user interface design, especially the second half which covered the techniques of symmetry, alignment, optical adjustment, and negative space. I liked how the authors went into detail about why using these techniques creates a clean and intuitive interface for users as well as provided numerous examples of well-designed interfaces while pointing out how the designers of those interfaces used the four techniques. One thing I found interesting is the authors' statement that "[a]lignment is the most important means of establishing relationships among elements." I wholeheartedly agree with their assessment since I have found through experience that alignment is a great way to differentiate labels from the labeled elements. This makes me wonder why some development environments don't include graphical tools that make alignment of widgets and other elements easier. One example is Java Swing, which I have found extremely aggravating for building GUIs since it relies on a procedural approach, so a designer often must specify specific coordinates in order to achieve the correct alignment. On the other hand, I really appreciate using XCode for iPhone development, since Interface Builder makes alignment almost trivial by offering overlaid dotted lines to assist the designer with lining up various elements.

The technique of optical adjustment was completely new to me, and in the future, I will definitely have to pay attention to optical effects resulting from using different shapes, letters, etc. Unfortunately, the authors claim there is no guaranteed method for determining the necessary amount of optical adjustment, so I suppose it will just take a lot of trial and error on my part to figure out how best to space and scale various interface elements.

Jonathan Hirschberg - 3/28/2010 22:42:18

The concepts in this article can be analyzed using the concepts discussed in the human cognitive machine readings. Mullet and Sano argue that “the eye craves structure and will impose its own organization onto a design whose structure is not readily apparent. The designer is no longer in control of the message.” When analyzed with the human perception readings, we can see that visual elements that are grouped into chunks can be stored in working memory more easily, allowing users to remember more data than they would if they had to chunk each individual component separately. For example, in a string of 20 letters, users may remember 7 +/- 2 letters, but if they can group them into recognizable chunks of letters, users can remember 7 +/- 2 chunks, which is a significantly greater number of letters than they would remember if looking at them individually. When looking at a user interface that does not obey these gestalt principles, users may have to spend extra mental energy making sense of the patterns on screen than they would if the interface used these principles because these principles create a user interface that allows users to organize the data better as they look at it and understand the important information. These principles would help reduce the perceptual load on the users.

Joe Cadena - 3/28/2010 22:53:17

Upon reading about the techniques used for structuring a display, I am curious to the extent of consideration a design team invests in order to ensure consistency throughout the application. What I am trying to ask is if it is acceptable to utilize different techniques for different views? Additionally, what technique or rule-of-thumb is used to determine if a view has too much data and should be split into smaller, connected views?

Long Do - 3/28/2010 22:58:01

The reading focuses mainly on static menus and windows. I wonder how design concepts such as balance and asymmetry would work when it involves a user interface that can be moved around and touched. The design would have to take into account every possibility, like the static-sized dialogue box that might have short messages, and that would be very troublesome and might be inelegant.

I'd like to know when this reading was published. A lot of these ideas seems to be very common place in modern times. One would not think to place buttons in any manner other than along a major horizontal axis in relation with one another--certainly not in a zig-zag manner. It is interesting to read about optical alignment and consider how it would affect app designs that included shapes. I actually thought that the circles and diamonds seem larger than the square, even before I read the captions in the figure or the article.

Bobbylee - 3/28/2010 23:31:14

The reading talks about the organization and the hierarchy of the visual design . When they talk about grouping the elements, I recall the bart machine example. The bart machine separates the slot that insert the card and the coin. In terms of this essay's principles, it is not good as it doesn't group similar items. I think it is true that if we group them a one place, then it will be less confusing for the user. Also, I think they have a pretty bad logical hierarchy. The first thing that the use will be prompted to check out the fare on the screen instead of inserting money or card. However, the first thing has to do is neither both. The first thing is to check the fares on the price list that is posted on the top left of the bart machine. Then the user would prefer to select the amount instead of inserting money. These are just two example of many errors.

Calvin Lin - 3/29/2010 2:00:16

Today, the internet is all about finding information off of a web page, and it is clear how the Gestalt Principles come into play in pretty much every situation. Modern web sites try to cram as much information as possible onto one page, hoping to get users to click more links – as the web has turned into a fight for who can get the most hits. This has its pros and cons. When I go to websites such as, there is usually one story or item of interest that immediately draws my attention. But once I’ve decided to move on, deciding what to look at next can be a complex and long decision because there is so much clutter and content. Many sites are good at drawing you in to one thing initially using the Gestalt Principles, but what many fail to do is guide you where to go next. Most often, there are a ton of links to choose from and it’s not clear what you should be looking at.

I think a challenge for the future is improving web design so that high-content sites such as NYTimes and CNN can maximize content and space, but avoid clutter and lack of a clear reading path at the same time.  I really like what Google did with their homepage – which was simple enough to begin with. Obviously Google’s biggest service is search, and so they decided to minimize ALL the clutter on their homepage by displaying nothing but the logo, search bar, and search buttons upon initial loading of the site. When you move the mouse, you can see several other links, but these can be a distraction from the main function Google wants you to perform. 

Eric Fung - 3/29/2010 10:45:35

"There is, unfortunately, no sure method for determining the necessary degree of adjustment mechanically. Careful observation and extended practice are the only routes to developing the necessary skills." This line in the reading captures the essence of the reading. Though it may be easy to describe the properties of aesthetically pleasing interfaces--symmetry, balance, optical adjustment--it is harder to apply the concepts in practice without examining successes and failures.

The interface should achieve balance and lead the person to easily break down the hierarchy of display elements. Though intuitively you believe that a person reads from left to right, you can still break that tendency by use of negative space and the positioning of bigger elements (attention grabbers) to their smaller, informative counterparts.

I have been using several career websites for the past few weeks, and their difficulties stand out clearer after reading this article. Some try to force organization of elements with boxes drawn around them, others cluster all possible actions into a row of buttons, with no real ordering to them. One site in particular used only the right half of the page for content, and the left half was filled with pictures of the staff--defying all rules of negative space. It was seriously hard to look at, and it was very apparent that well-designed layouts go unnoticed because they feel so natural, whereas the flawed ones stick out like a sore thumb.

Dan Lynch - 3/29/2010 11:37:36

The article for this week discusses the importance of visual structure, and the psychology of how perceived structures and associations provides a user with information about how to use a system. This is of paramount important in human-computer interaction, as if a designer can provide intuition for a user through a graphical communication system, then productivity is enhanced. An important psychology principle is discussed into some detail, known as the Gestault principle. These principles can be used to describe why particular interfaces are successful, and others may not be. Associations are also discussed, and in particular, how the human mind forms associations. Proximity and similarity are key factors that play into this, and overall, associations then provide structure for an overall design. The Gestault theory goes into this idea, and in this context is known as the Gestault grouping phenomena. The forms of this phenomena are closure, area, and symmetry. The concept of balance is also described in this article, and an interesting analogy is used associating balance in composition to balance in the physical world with physical quantities. Common errors that the author wanted to make note of were Haphazard layout, conflicting symmetries, ambiguous internal relationships, aligning labels but not controls, alignment within but not across controls, false structure, and excessive display density. Many of these issues can be avoided by sticking to the Gestault theory when designing an interface. The author then demonstrates techniques to improve designs, for example, using symmetry to ensure balance, or alignment to show visual relations, and so forth. A very interesting article.

Nathaniel Baldwin - 3/29/2010 12:08:39

First off, and this isn't directly relevant, this chapter needed a proof-reader. I counted at least 4 times when a sentence clearly had a word missing. It was decipherable using context, but still, c'mon.

I liked this article from the start - the sentence "The eye craves structure and will seek to impose its own organization onto a design whose structure is not readily apparent" was an "oh yeah!" moment of recognition for me. That is, I know I've been frustrated by confusing designs before, but I hadn't really given thought as to why.

I recognized the gestalt principles from a class on visual perception I took here at Cal, and it was interesting to see them used in a practical application instead of simply describing human visual perception. I also thought it was neat, but unsurprising (given what I've learned about visual illusions) that one of the things designers need to do is to "cheat" in a sense, when adjusting things so that they look aligned or equally-sized to us, even when that isn't physically the case. Overall, the article was clear and fairly easy to understand, and I found the abundance of real-life examples very helpful.

Jessica Cen - 3/29/2010 12:11:05

I agree with what Mullet and Sano say about negative space. In addition, negative space is important in graphical design since it keeps a balance with other heavy objects and makes them stand out. Without white space, the design would be too cluttered and the focus of the eye on the important things will get lost. Negative space is also needed to prevent the eye of getting confused or tired. In my opinion, I believe negative space is the element that can guide the design of a user interface because by choosing the right amount and placement of negative space, one can obtain a pleasant asymmetric design or a satisfying alignment.

Hugh Oh - 3/29/2010 12:23:05

Previous readings emphasized exposing the user to small, manageable doses of data in hopes that the user can understand the data thoroughly. Mullet and Sano address the issue that sometimes a large amount of data must be given at a time. Mullet and Sano write that, with the proper structure, a user can easily navigate to specific information despite having a large amount of data. In conclusion, Mullet and Sano argue that structure of data has a greater importance than amount of data.

Divya Banesh - 3/29/2010 13:14:41

In the book "Designing Visual Interfaces", the authors describe the importance of many aspects of design. For example, they describe the importance of unity as well as separation (a table unifies information but different colors of rows of columns allow for separation of data and readability), the importance of similarity, balance, realism and more. However, the one aspect of their argument that was lacking was the importance of color. Color is also very important in design because bright colors can draw the user to specific parts of a page, shadows can show the reader the widget is a button and dark borders can separate parts of a page. Using different values from the RGB or HSV color schemes can be the deciding factor between a ui that is easy to use and one that has no flow. I agree that it is important to have the proper spacing, the correct placement of information and to make sure the readability of the product is easy but it is also importance to have the proper color scheme.

Aneesh Goel - 3/29/2010 13:22:37

The reading started off interesting, and the analysis of groupings should be useful for our projects; choosing positions and shapes that encourage correct groupings and selecting consistent appearances and locations across views for key elements are not immediately obvious without actively considering the issue, and will no doubt help us in both the project and later work.

However, once the reading started to analyze artwork with these means, I got rather lost; Mondrian's use of 'explicit lines' confused me, as I have no idea what implicit lines could be and wasn't able to find a useful definition; the Muller-Brockmann concert poster did not suggest to me anything about the order of music or its freedom, it was just morse code presented at an angle.

The reading also seemed to present a design conflict that doesn't exist when analyzing the Windows and Machintosh file selectors; the poor layout of the Windows design is clear, but the Machintosh layout presents significantly less information to gain its compactness, which hardly seems to earn the praise it gets; a better design would contain the information from the Windows selector laid out better, but nothing like that is presented here, though the NeXTStep open screen, later presented to show symmetry, does seem like a better choice to include in this grouping.

David Zeng - 3/29/2010 13:48:15

One important aspect when designing the organizational structure and visual display is to take into consideration what type of user you are designing it for. One example is the density of the display. While this may be a problem if the window is too small, this may not necessarily be bad if you know all/most your users will have large displays because they will all be doing art/graphics design. Topics such as alignment and symmetry also must be considered. While the west reads from left to right, a lot of asian countries read right to left. Thus, when designing displays, it might be easier to have the more prominent choices or alignment be on the right.

Vidya Ramesh - 3/29/2010 14:16:54

A design loses power and the ability to communicate effectively if there is no coherent visual structure, therefore the chapter by Mullet and Sano focuses on this topic of organization and visual structure. They start off by stating that unity, readability, and control are necessary parts of the structure and need to carefully observed in the design. One of the most interesting principles that they discussed was the principle of grouping. Similar to the concept of taking advantage of spatial locality in memory management, the principle of proximity is the tendency to associate elements more strongly with nearby elements compared to farther away elements. Mullet and Sano recommend taking advantage of this principle since it is typically used to determine functional units in interface design and is used to distinguish these units from the surrounding controls. The need for explicit labeling of elements is reduced when elements are grouped together in functional units and when areas of the display are obviously devoted to certain tasks. While this concept seems extremely clear in theory, I wish that they provided a couple more examples of how to use this to design well organized user interfaces.

Yu Li - 3/29/2010 14:48:42

It was very interesting to see that designing a good UI requires both good programming skills and artistic skills. In order to make the application visually pleasing for the user, the designer should follow the Gestalt Principles, which include: similarity, continuation, closure, proximity, and figure and ground. Similarity refers to how all objects, for example buttons, look similar to one another in an application. Continuation is when the eye is compelled to move through one object and continue into another object, or that the application has good flow. Closure is when image is incomplete, but the user still perceives the whole by filling in the missing information. Proximity is when objects that are placed close together in an app appear to form a group. Finally figure and ground refers to the when the human eye differentiates an object or image from its surrounding area.

Alexis He - 3/29/2010 14:54:25

On Negative Space: At first glance, it's surprising to me that white-space can be deliberately used to direct a user's attention. But given more thought, I can see many examples where this is the case: Google's homepage is extremely blank to emphasize the search bar; the submit button at the bottom of this reading response form is on its own line to emphasize its importance; etc. Because white-space is so often ignored, it's not until I think about it consciously do I see its value in directing attention.

Angela Juang - 3/29/2010 15:12:57

The space that a user gets to use to work with a system is often limited to a single flat surface, such as a touchscreen or screen and mouse. However, people are used to interacting with three-dimensional objects, so it's important to use optical illusions effectively to simulate the feeling of a three-dimensional object with a flat screen. Giving graphics a "layered" look and letting users interact with separate layers and move them up and down gives a feeling of depth and serves to emphasize what is on the top layer. Because users are also used to interacting with 3D objects in their everyday lives, the user doesn't need to be taught how to use this kind of interface. The layering effect also saves space in allowing more information to be "stored" on a single screen, while also allowing the layer the user is focused on to occupy the entire surface area.

Boaz Avital - 3/29/2010 15:38:48

The readings talks briefly about posters and poster design, and also goes into a lot of common problems and guidelines in UI design. While there are not a lot of good UIs in the world, there are definitely a lot of good posters. I truly believe that if computers moved away from the current window-based user interfaces and the interface elements that come with it and moved towards a more poster-like interface for programs and even for operating systems, everything would be more pleasant to see and easier to use. Actually, something close this is already happening. I've never used the Zune HD but apparently people really like the interface it provides and Microsoft is putting that same kind of interface into their newest phones. The interface is basically superflat, 2d, and laid out more or less like a kind of poster. Bringing something like this to the desktop would be a good thing.

Weizhi Li - 3/29/2010 15:47:23

The chapter written by Mullet and Sano was very interesting to me. Unlike most of the readings recently, it points out lots of suggestions that we could use when designing our interfaces. Some of those suggestions, in my opinion, may be very helpful for the some photo sharing project such as flicr. I was also very interested with the descriptions of the different techniques for creating an effective interface, as it was not something that seemed common nonsensical, like symmetry and alignment. However, I was a little confused about the concept of using negative space as it almost seems that negative space is a result of using alignment.

Sally Ahn - 3/29/2010 15:50:16

This reading covered a lot of interesting examples to explain the Gestalt principles. The key point I gathered from the reading was that alignment and spatial positioning is far more important than "graphical embellishment" in UI design. This suggests that it is important to consider the logical groupings of the contents of an interface before designing its layout, since spatial positioning of those elements should reflect the logical groupings and thus minimize the need for bounding boxes and labels. These principles suggest that we are especially perceptive to alignment, and that it is important to align all elements (not just their external boundaries or labels). I also found the discussion about squares, circles, and acute angles very interesting; I had not realized that optical illusions must also be taken into consideration in UI design.

Saba Khalilnaji - 3/29/2010 15:54:50

aesthetic design is always an important factor in relation to a user's interaction with an interface. Balancing an interface window can seem like a simple and logical start; however it may be difficult with different interpretations of balanced. There are several factors including how well the symmetry is maintained, alignment, grouping similar functions within a locality and more. A lot of these things are based on human perceptions with generally tend to be the same among individuals however there are always variances in subjective analysis of these interfaces which may result in changes some user may not prefer. For example the spacing in letter is based on the letter's shape because spacing all the characters equally would result in a seemingly misaligned word, however this is just a based on one's perception

Linsey Hansen - 3/29/2010 15:57:25

I really enjoyed how good interface design was explained in terms of Gestalt principles, however I am rather confused about how the whole figure-ground reversal quality is that helpful in an interface. I mean, I feel like a quality such as being able to easily tell the difference between the figure and ground (maybe that is what they meant?) would definitely make an interface simpler to understand, but if the two are interchangeable that just seems distracting and unclear. Maybe if you think of a figure as being a window and a ground as being the screen behind a window, that could make sense, then you can view either one as your current figure, maybe giving it a figure-ground reversal quality, but that still seems kind of iffy to me.

Jungmin Yun - 3/29/2010 16:17:08

I found this reading interesting and useful. It also contains a lot of visual examples of the concepts. It gives UI designers a good basic and overview about how to design UI for customers. I liked the four techniques for structuring a display: symmetry, alignment, optical adjustment for human vision, and negative space. These techniques offer a basic toolkit for creating and editing graphic designs that are pretty intuitive once you are aware of. And 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.

Esther Cho - 3/29/2010 16:23:54

The idea of grouping and balancing seems very natural. With tools such as the interface builder we've been using for the iPhone developing that gives us free range on how to organize buttons and whatnot, as people, I think there is a natural way of ordering so as to a group of said buttons would be associated together. I think it's the implicit reinforcement that takes conscious actions to eliminate unnecessary ways to associate a grouping. On another note, the critiques on the examples of gestalt principles seem too perfect -- as if there are no flaws in the design choice. The Reuters example, albeit an example of Gestalt style grouping, may not be effective from afar. Even close up, the dots around the "UTE" in "REUTER" was hard to distinguish because they were close together. This is where I think the effectiveness starts to wane.

Daniel Nguyen - 3/29/2010 16:32:49

Of the four technique presented in the latter half of the chapter, I think that alignment is the most important technique. In terms of symmetry, some of the best looking designs today are modern asymmetric layouts that manage to keep the content balanced, and even the literature admits that asymmetry in design is becoming more and more popular. For optical adjustment, most fundamental adjustments (i.e. text) are automatically made these days, so any adjustments that a designer would have to make may be very minor. Negative space comes close in terms of importance. Avoiding clutter and utilizing empty space to guide the eye are very important, but, even with a good use of negative space, bad alignment could ruin an entire design. I feel like the information they provided on alignment was very true and useful, but I still feel like there is something in the literature that is missing, preventing the reading from really emphasizing the importance of alignment.

Raymond Lee - 3/29/2010 16:33:43

The discussion of how humans process patterns in gestalt reminds me of CAPTCHA system images. The arbitrary patterns of pixels, sometimes with gaps and other artifacts, distort individual characters in order to evade automatic recognition by computers. However, humans easily recognize the pattern in gestalt so they have an edge over less advanced captcha bots that do might not have this type of processing.

Wei Yeh - 3/29/2010 16:39:25

I discovered many of the principles discussed in the reading this semester while working on the individual iPhone projects. When I created custom tab bar icons for my finger painting app, I used a square icon for the "canvas" tab and a round paint palette icon for options. Although the diameter of the palette was the same as the square's width, the palette felt much smaller. Thus, I had to make the palette slightly larger than the square. Also, I found it nice that Interface Builder provides snap-alignment to help align widgets.

Darren Kwong - 3/29/2010 16:48:51

The use of the various posters as examples for making arguments initially made the arguments seem less credible. It would seem that poster design principles are not the same as user interface design principles. However, the main concepts of organization and visual structure do contribute to both applications. To expand further, the concepts seem to apply universally to any human-designed product that conveys information. It would appear that bad designs would only come about due to a lack of effort in design, as the principles and techniques employed in good designs are seen all around.

Brandon Liu - 3/29/2010 16:57:32

The discussion of whitespace described how the main constraint in user interface design is screen real estate.I was curious about this in the sense that much of user interface design is working within the 4:3 or more recently 16:9 aspect ratio (for full screen computer applications) Specifically, in the history of personal computers, most of them had aspect ratios of 4/3 and there's only a few deviations: For example, the Xerox Alto had a display in "portrait" mode. Earlier computers had circular display outputs, but that was a constraint of the ray-tube technology. I learned that the Alto's display was oriented the way it was for its use: that is, documents made more sense in this orientation. However, the origins of the 4:3 ratio generally lead back to cinema display formats, which themselves lead back to photographic film. Thus there is little rationale for the 4:3 format other than historical precedence: it is interesting to me that 16:9 has become more prevalent, and I even wonder what research has been done on the perceptually "optimal" aspect ratio.

Geoffrey Wing - 3/29/2010 17:04:17

I found this class's reading to be very manageable and straight forward. This reading will definitely help in our Interactive Prototype. In the examples for haphazard layout and excessive display density, I noticed that a lot of paper forms are like this. Paper forms often confuse people, especially if there is a lot of information to process and input. When listing out options on computer interfaces, it's best to keep the choices in some sort of a menu, rather than list them all out. On paper, you can't help but do this, but on the computer, you definitely have other options.

Also, I found the section about optically equivalent shapes to be interesting. I never thought about having to make circles and diamonds larger than squares to make them seem equal to the square. Perhaps, it'll be something to look for in the interface builder for our iPhone development. Another aspect of design that I had not thought about before is negative space. I definitely agree with the author in that today, we often try to cram as much information as possible into our available space. However, this can get way too cluttered, and wisely using negative space can really help with readability.

Andrew Finch - 3/29/2010 17:05:07

The article mentioned excessive display density--the practice of packing too many elemnts onto the interface at once without sufficient organizational separation--as one of the commonly made errors in user interfaces. This reminded me of the interfaces in Newtek's Lightwave 3D and Autodesk's Maya, which are perfect examples of this problem. Upon opening either one of these applications, the user is immediately presented with an ocean of cryptic UI widgets, which feels rather inteimidating, even for experienced users. Though these applications do have an immense amount of features, I feel that the designers could have done a better job of cleaning up the interface and making it more presentable and less chaotic. Also, when the user utilizes a tool in one of these programs, he often has to travel to areas of the program that aren't visually connected to the tool, which can be very confusing.

Andrey Lukatsky - 3/29/2010 17:16:49

I was surprised to see the technique of symmetry given such importance in UI design. Symmetry is always something I've related to art work - I remember my fine arts teachers in high school emphasizing it. Although this particular technique can be achieved by someone with minimal artistic skills, it seems that good UI is very similar to other artistic works such as drawing and the like - it requires a good eye, creativity, etc.

Bryan Trinh - 3/29/2010 17:18:32

The gestalt refers to the ability of the human mind to decode and interpret forms from a collection of visual stimuli. These papers distill another central idea of human cognition that will aid designers in creating interfaces that are easier to use for humans. It would be interesting to evaluate the effectiveness of a gestalt principle using an experimental quantitative method--especially those principles that bring about small changes in UI design. For example, alignment of certain UI elements and text based on human perceptions. It is evident that these changes perceptually create a stronger sense of alignment, but does this change amount to faster UI navigation. My guess is that, in the grand scheme of things the change won't amount to faster navigation, but at the same time, there's nothing wrong with making the UI simply look better. This may also result in a greater amount of people who are willing to use the interface, according to the aesthetic usability effect.

Overall I like how these papers provide easily implementable methods of creating user interfaces that are aesthetically pleasing.

Richard Heng - 3/29/2010 17:22:19

White space is definitely an important tool to help group information, but I am curious whether it is worth sacrificing the space if there is a limited amount of room. For instance, if there were a web page, when does it become worth it to overflow the interface and make the page scrollable when all the information can be fit on a page that had very little white space. There is a tradeoff between the convenience of having information visible, and having information organized clearly.

Brian Chin - 3/29/2010 17:24:02

I thought this week's reading was very useful in the design of interfaces. The principles of alignment, symmetry, and white space are all essential to design uniform, balanced interfaces that users will like. I thought the reading did a great job in showing many interfaces that were good and bad, and explaining what was good and bad about them. I am a bit worried, though, that this reading encourages the design of interfaces that are boring and uniform. If all designers were to follow these guidelines in designing interfaces, then they would all look pretty much the same. Everything would be aligned and symmetric, and would judiciously use white space. However, some of the best designs have broken these rules. An example from class would be the mercedes benz seat adjuster. In that example, the buttons weren't symmetric nor aligned in any way. Instead they were ingeniously put in the same shape as a seat. The guidelines presented in this reading seem great for designing standardized good interfaces, but for a truly great interface, it seems you would need to creatively break these rules to create something new and unique.

Conor McLaughlin - 3/29/2010 17:26:00

We've learned that simple and clean user interfaces are best for communicating structure and use, where the user follows the control flow planned by the designer, so it's nice to see definitive principles laid out that emphasize how this actually is so through the use of white space, which is not wasted space - and how simplified user interfaces actually make use of that white space, or negative space, to cleanly organize data, groupings, and functionality. In my drawing application, I actually failed to uphold some of the tenants of symmetry to delineate similar drawing functions. My button sizes were different from each other and it threw off the reader's understanding of the button's use initially; it didn't seem like there was a contiguous connection between the buttons, when each performed a similar change of the brush. I pretty much support everything the article had to say through my own experience, but I think the most important point is good, clean design ensures the user follows the control path you as the designer has laid out versus following what he or she thinks they should do, which can be disastrous in more complicated applications.

Kyle Conroy - 3/29/2010 17:30:48

Spatial relationships, especially those relating to overall application layout, figure prominently in the design of today's websites and web applications. However, in today's internet application ecosystem, these layout choices become even more important. Conversion of visitors into customers is an area of website performance under constant evaluation by designers. Conversion rates depend heavily on the proper layout of sign up forms, prominent buttons, and a clear call to action. All three of these metrics fall under the criteria of spatial relationships, and are often designed poorly, which adversely affects conversion rates. To combat this rate drop-off, web designers should do simple heuristic evaluations focusing on spatial relationships.

Richard Lan - 3/29/2010 17:33:41

The organization and visual structure of a user interface are very important aspects to consider when designing an interface. This is so because even though the structure is not consciously noticed, it is nonetheless a crucial channel of communication that users tap into in order to interpret the interface. The rational for coherent structures in user interfaces is based on the Gestalt school of thinking, which has to do with how people place elements into groups. This line of thinking emphasizes aspects such as similarity, proximity, symmetry, and continuity when examining the ways people relate separate elements. The Gestalt school is relevant to user interface design because good user interfaces are able to organize and present data effectively. Proper structuring can reduce the need for explicit labels, which reduces screen clutter and draws attention to the most important elements of the interface. This kind of organization can be accomplished through the establishment of information hierarchies. The designer first needs to understand the conceptual structure of the data to be presented, and then organize the data into logical groups before placing them into a hierarchical relationship.

From the article, the author made the point that negative space is not wasted space, but is important for user interface design. This statement is easy to understand, as using white space aids in the grouping of elements, draws attention to important information, and reduces screen clutter. What is less clear is exactly how much white space is appropriate for a particular interface design. One factor to consider when deciding how much white space to use would be the amount of content that needs to be displayed, and how it will be organized hierarchically. Intuitively, I would think that as the amount of white space used increases, the number of hierarchical levels must increases to accommodate the fact that there is less information being presented on each page. There are a wide range of possibilities, and the designer needs to balance these two parameters when designing the interface.

Wilson Chau - 3/29/2010 17:36:59

This reading was a little different from the other readings in that it looked more at the whole interface, instead of focusing on different parts of the interface like the other readings. It talked a lot about the structure of interfaces and how it should help to guide the user.

Jordan Klink - 3/29/2010 17:43:07

I'm definitely happy to see that the class is finally getting into actual user-interface design, and was very excited by the reading. There were several good principles to follow in user-interface design, and highlighted the importance of actual geaving meaning to the design. It is parallel to having the form follow the function, so to speak. One should not mindlessly display the information, but should take into account the overal structure and layout in order to adhere to the principles presented in the reading. Failure to do so, will of course cause the developer to produce a design that will end up in the "all of the above" error section of the reading.

Spencer Fang - 3/29/2010 17:46:32

The reading placed a lot of emphasis on grouping and symmetry. Things that have logical proximity should be spatially close to one another. The goal is to organize the interface into related subregions so the user can understand it more easily. The purpose of symmetry and balance is to make the GUI stay out of the user's way, so that the user can focus on the functionality of the interface and not be distracted the visual layout itself.

Perhaps the most dramatic example in the reading was the front end interface to a database application on p105. Before applying these principles, the interface was not very organized and a user would probably have to closely study every widget before understanding the GUI. After applying these design principles, the GUI has a natural flow that suggests to go from top to bottom, with important things placed near the top. A user can probably go fill out this GUI form 'on the fly' without having to study it first.

Long Chen - 3/29/2010 17:48:57

Today's reading reminded me of the professor's demonstrations with the colored and non-colored dots. The goal of any graphics designer is to make the images appeasing and easy to understand without too much effort. Although xCode is difficult to use in a number of ways, one of the strengths is the design of the interfaces. The symmetry lines along with well formulated buttons and boxes actually make it difficult for the designer to make terribly bad designs. I especially liked the reading's suggestion of using the "squint test to verify the result". I already do after completing each nib file, but never thought of it as doing the "squint test".

If an interface is well laid out according to previous user experience and conventional models, then labels can even be made redundant since the layout is so clear. This is something that can be accomplished even easier with simplistic models rather than too many complex pages. A great interface is Google Maps where the entire program is built on top of the most crucial element, the map itself. The options and extra layout requirements are hidden away and can be easily accessed with unobtrusive methods.

Victoria Chiu - 3/29/2010 17:49:26

Humans seek structures and organizations of what we see. Structures provides readability. When elements are closer to each other, users tend to think that they associated with each other more. This is called proximity. When elements are more similar in either their shapes, colors, textures or orientation, they are also more likely to be associated to each other more. It is interesting that in figure 98b, we tend to think that it is a smaller square in front of a bigger one instead of thinking there is a little hole on the bigger square.

Arpad Kovacs - 3/29/2010 17:52:35

This was an excellent article, since it provides pragmatic, actionable advice for creating organization and visual structure. We can apply the following gestal principles to create unity, readability, and control:

  • proximity - nearby components are more strongly associated
  • similarity - visually similar components are more strongly associated
  • continuity - we prefer continuous, unbroken contours, and simple physical explanations
  • closure - people can infer closed figures, even with insufficient contour information
  • area - we perceive the larger object as the background, and the smaller as the figure or object of interest
  • symmetry - we consider the form of the whole group, rather than the individual parts

I found the examples to be very illustrative, since they show how to apply these design principles. It was enlightening to find that bounding boxes and labels can be discarded by building layouts that inherently show the relationship between the various components. However, it seems that many of these mistakes, particularly those relating to symmetry and alignment, could be avoided by using sane window layout managers (OpenLook appears to be the prime example here). Ideally, the human designer should solely need to specify the logic flow of the interface and some constraints, and the computer should be able to apply the Grouping, Hierarchy, Relationship, and Balance heuristics to create an aesthetically pleasing and efficient result. There have been some research efforts to achieve this such as those mentioned in but unfortunately it seems that they have not come into common use.

Peter So - 3/29/2010 17:53:26

Gestalt's principles provide a means of breaking down the design of an interface but also provide a guide to designing them. Symmetry has been cited as an efficient way to present information in an easy-to-navigate manner that provides a logical flow and aesthetic appeal by taking advantage of human's natural recognition of the 1:1 ratio. Falling into Gestalt's similarity principle, symmetry helps the viewer group sections of a window to organize data into helpful chunks which are then easier to remember as we discussed in the cognitive model.

Vinson Chuong - 3/29/2010 17:54:48

Described by Josef Muller-Brockman in "Grid Systems in graphic design", typographic grids are a powerful framework that essentially give designers alignment, balance, and effective use of negative space all for free. I would suggest that anyone who is interested in the topic of this reading look into this book. Typographic grids are used extensively in print and web design, giving designers a strong foundation on which to lay out their designs.

Owen Lin - 3/29/2010 17:59:49

The principles behind creating an intuitive layout for displaying information are really good guidelines for designing our interfaces. All of these principles (using symmetry to ensure balance, using alignment to establish visual relationships, optical adjustment to human vision, and shaping the display with negative space) are all somewhat intuitive, yet when fully fleshed out and described, makes sure that the designer of these interfaces really hone in on the most effective display. I think that these guidelines are definitely a must to keep in mind when our group designs our application.

Mikhail Shashkov - 3/29/2010 18:07:26

Alot of these concepts I've seen covered in other classes, like Sensation and Perception. In fact, the triangle in the pacmen's mouths is more accurately explained with modal and amodal completion, which is caused by the presence or lack of closure on the pacmen.

Anyway, I'm wondering how many of the principles I've learned in that class can carry over usefully to this one, and if some are not relevant, why?

Tomomasa Terazaki - 3/29/2010 18:11:49

This article was probably one of the most useful articles I have read for this class. It focused on the visuality of the Interface design and how much of a difference it makes (with bad organization and visual structure the user can get really confused). For my projects, I usually make the background different for each page to make it seem like I put more effort into my projects, but after reading this article about unity and similarity, I noticed that my design was very bad. I should just choose like a theme for the project and use one or similar backgrounds for every page rather than different one each page. Most of the things it talked about in the packet is something that is obvious such as grouping, hierarchy, relationship, and balance that we see everyday on our computer screens but I did not notice how much thought all these interfaces have put it by the programmer and designers. When I show my projects to my friends outside of my class, they all say that my iPhone application is ugly but that is probably why because I do not think about these things. My favorite part of the whole reading was about optical adjustments and human vision because it is true. When I see something that is not in line it really annoys me. Also the example with Typography really helped me because when I use multiple UI Texts on my projects, sometimes it does not look right but it is probably because some letters are supposed to be closer than others in order to look nice for human eyes. I also liked the part about negative space because I think negative space makes it so much easier for the user to read and understand what the interface is trying to tell him/her how to use whatever the user is using.

[add comment]
Personal tools