Graphic Design and Gestalt Principles

From Cs160-sp08

Jump to: navigation, search

Lecture on Mar 11, 2008

Slides

Lecture Video:

Contents

Readings

Nir Ackner - Mar 08, 2008 10:27:08 pm

I found Mullet and Sano's example 103 to be particularly instructive. It shows how one often-recommended technique, explicit grouping, can actually be counter-productive, when it competes with another heuristic for good design, in this case spatial logic. I would argue that the original design in this case, though not as good as the design taking advantage of spatial logic, is still a reasonable approach -- if we didn't see anything better, we wouldn't necessarily label it as a bad design. I would be curious to see how often designers make mistakes of this nature, and how much of the time the errors are excusable versus critical.

Eric Cheung - Mar 09, 2008 03:46:46 pm

Considering that the Mullet/Sano book was apparently written in 1994 (at least according to Amazon), I'd be interested to see if an update to the book would address more contemporary UI designs. It seems that many of the examples featured in the book were quite old. I think it would be useful to compare and contrast some of the more recent interfaces with the ones described in the book to see which ones have taken the authors' advice to heart and which ones still have the same problems. I found it interesting that many of the principles the authors mentioned were quite subtle like how to manage balance and symmetry. One would think that an asymmetric design would be inherently unbalanced, but there is still a way to make it aesthetically pleasing.

I think the other reading (Martin) may have been more helpful had it been grouped together with the other Martin readings about psychological experiments. It didn't seem to go well with the Mullet/Sano reading as the Mullet/Sano advocated a more qualitative approach than the Martin reading's quantitative focus.

Ilya Landa - Mar 09, 2008 05:12:14 pm

Every time I am looking up readings for the next class, I think: “Maybe it is something good, this time.” Often I am wrong; this time is no different – another 65 pages of a seemingly obvious material. Reading 1: Interpreting statistics in experiments. This may be a good reference material, but do we really need to read something that has a footnote for “square” saying “multiply by itself.” I do hope that was a joke. Also, I’m quite sure I have heard words “abscissa” and “ordinate” before. The examples of misinterpreting the data were nice, but again – nothing new. Even the quote “lies, damn lies, and statistics” has been my favorite quote on the subject for several years now. Don’t test me on this, but I got nothing new out of this article. Reading 2: 60 pages on creating nice looking interfaces. How many more identical readings do we have to read on the subjects. Even though we are the computer geeks, we do understand how to make interfaces accessible to general users: don’t clutter, don’t have buttons overlapping each other (I find that one useful myself), symmetries are nice as long as they are not pointless. Pages and pages of examples. I know that all this is a useful knowledge for the future, but right now our group project doesn’t even have enough options to make a cluttered interface. Unless we start covering new topics, I don’t know if there is anything useful we can get for the readings anymore. (I’m sure that even if there is a secret formula for the perfect interface, Microsoft has already bought all rights to it, but decided not to implement it anyways)

Chris Myers - Mar 09, 2008 08:38:16 pm

After reading what Eric said, that sounds like a great idea. Now I don't have access to high priced desktop environments like Windows Vista and Mac OSX so I can't see the latest and greatest, so I'll have to settle for KDE, winxp and gnome. Of course the most striking difference between now and 1994 is the increase in color density and pixel resolution. But have the designers taken account of proximity, symmetry, alignment, adjustment, and negative space?

I'm looking at System Settings for KDE 3.5.8 right now. Various icons for each setting are grouped by type and spanning horizontal lines make the display appear symmetrical and aligned. However, there is poor use of negative space. The window is much larger than it needs to be, but it is only so big because when one of system setting modules is opened, the window is enlarged to fit a very busy dialog. All the modules are displayed in this one window, but each one with a varying amount of info to display. This is a much different approach from the gnome approach, were system settings are placed in a drop down menu. Each dialog is designed using a simplified model, similar to OSX. These simple dialogs typically make better use of alignment and negative space than their KDE counterparts.

It seems that a few of these ideas from `94 have at least been considered by designers. The trend appears towards elegance and simplistic interfaces with larger icons and buttons.

Harendra Guturu - Mar 09, 2008 11:39:04 pm

I think the material presented in the Mullet-Sano chapter is pretty informative despite being a little outdated. The information probably appears extremely common sense due to the fact that we have been surrounding by GUIs for many years and more importantly we have been surrounded by GUIs that are constantly improving to fit users. The existence of some of the bad or faulty interfaces referenced in the suggests that the material may not have been obvious when interfaces were newly being developed for personal computer based applications. Although, the information in the chapter is informative it would probably be a lot better if it was updated with the latest interfaces and the less obvious problems some of them have.

The Martin chapter provided lots of information on how to analyze our experimental data but does not seem to fit with the title og "Graphic Design and Gestalt Principles". Was it provided more as information since we are currently working on the low fidelity prototype assignment?

Edward Chen - Mar 10, 2008 01:40:24 am

I found the Martin reading to be completely unrelated to the topic or even helpful for the project as whole. The material seemed also fairly simple, something you would learn in elementary statistics. Nonetheless, it was still a very cohesive read that explained its point very well through the use of examples and diagrams.

The second reading was very interesting. A lot of its examples were very good illustrations of what was wrong, and they explained design concepts in terms of how humans think, which was very interesting how humans have certain tendencies towards certain design aspects. What was especially helpful were the design techniques where the authors listed out each aspect that should be carefully looked at when designing an interface. However, I don't think it likely for designers to be able to recall the avoidances in design and the suggestions in design. People tend to design by just doing it and then taking a step back to re-examine what they have designed, seeing if it is aesthetically pleasing. Clearly, the examples they gave were confusing and not aesthetically pleasing so one could probably design a fairly good interface as long as they examine it to ensure that it is not confusing and aesthetically pleasing without even having to recall any of the rules of good design that the read talked about.

Gerard Sunga - Mar 10, 2008 11:07:23 am

The Martin reading seemed to be in the same vein of the readings from last week. It was informative and could be applicable to interface design, especially in the testing stages with human participants. Nevertheless, the items discussed seem so elementary, it bordered useless.

The Mullet and Sano reading, on the other hand, seemed to be very interesting and applicable to the class as whole, albeit outdated. I found it particularly interesting of the large number of applications the subtleties of the human mind had on what can be considered to be good interface design. In particular, I found the application of the Gestalt principles to be quite interesting, especially the concepts of proximity and continuity and the effects on layouts.

Jonathan Chow - Mar 10, 2008 12:27:48 pm

The Mullet and Sano chapter was a very interesting read. Unlike most of the readings recently, it had a lot of suggestions that we could use when designing our interfaces. I think some of those suggestions might have actually be helpful for the Flickr project. Anyhow, I was very interested with the descriptions of the different techniques for creating an effective interface. The comment that the "goal of effective interface design is not to entertain or excite, but to present information efficiently and nonintrusively" is a well made point. I found the section on optical adjustment to be very interesting, as it was not something that seemed common nonsensical (like symmetry and alignment). I was a bit confused about using negative space as it almost seems that negative space is a result of using alignment. I'm glad that the Mullet and Sano chapter had a lot of examples that helped show their points since it is much easier to think about interfaces when you can see them.

As for the Martin chapter, I think most of it was pretty basic. Most of us probably should know enough about statistics that nothing new was presented.

Brian Taylor - Mar 10, 2008 12:08:00 pm

Learning about extremely basic statistics again was relatively mundane for the most part. Although it was nice that it was succinct and easy to read, it did not really help much overall. Although I guess I may have forgotten what the mode was, I found the reading to be rather similar to few previous ones in that they give a few quick tips and strategies within the few pages available. The second reading contained a lot more about a large focus of our class, designing the user space. It contained many small comical examples of large errors in the past, and even included examples spanning the two ends of the spectrum as in example 121. Image a is too dense, but image b is championed as being more readable and useful by using tabs. I would hope, however, that these tabs actually worked as tabs and did not pop-up new screens or dialog boxes as the image suggests. Overall, the Mullet and Sano reading contains quite a bit of useful design details that related much better to the class than the first reading.

Khoa Phung - Mar 10, 2008 04:50:08 pm

The first reading was a nice review of statistical terms as well as some clarification. Most students have probably done this manually few times already for other classes, but I have forgotten some of the lesser used expressions and calculations. I liked that the text not only focussed on the formal definitions, but also explained why sometimes statistics can be interpreted wrong and therefore result in wrong misinformation. This was reflected by the simple statement "Garbage In, Garbage Out". These are the two main dangers of statistics, yet some can provide powerful details.

The second reading compiled the 4x biggest insights into creating a nice user interface; that is symmetry, alignment, adjustments, and shaping. Seeing how cluttered the interfaces were from a decade ago is very surprising. These days, the GUI has been standardized by most software companies, so it is hard to find a real a bad user interface for popular software, even though it happens. The text describes the steps one can take to improve user interfaces and shows some example, which are pretty useful.

Katy Tsai - Mar 10, 2008 05:33:01 pm

I think the first reading served its purpose of reviewing terms we are probably all familiar with. A good refresher, but it definitely could have been condensed to just a few pages. What I particularly liked about the Mullet and Sano reading was that the authors layed out the design principles in a very practical way. They focused on what aspects of visual design are important to communicate thougths and prioritize the flow of your visual presentation. They didn't spend their time emphasizing different aesthetic elements that a graphic design course would teach. I also thought it was interesting because a lot of the points they brought up are things we all notice when there's something wrong with a layout, but it's hard to identify these issues when we are designing things from scratch. They definitely pointed out a lot of important points that should be kept in mind when designing our UI's for our mobile apps.

Bo Niu - Mar 10, 2008 05:01:53 pm

I liked the second reading a lot more, maybe because it's the first reading that actually go into detail of making UI design decisions rather than talking about theoretical stuff that's seemingly useful. The examples given in the reading really connected the theory to the actual practice. Before this reading, the theory and practice is pretty much separated. When I try to design an UI before, common sense and convention was more helpful than thinking about those theories of human perception. This reading actually pointed out why the conventional UI design makes sense and what idea is behind the design.

Hannah Hu - Mar 10, 2008 08:39:15 pm

As some have pointed out, the Martin reading felt more appropriately assigned to the previous readings than this one, especially since the second reading is dense and more relevant to UI design. I found the first reading a bit mundane, for it was simply a statistics course for dummies, and I had already dealt with statistics in high school and CS70. The second reading was many degrees more useful and provided great insight in effective UI design. It will be interesting to see it applied to small screen spaces like the ones we have to deal with; desktop viewports and print media provide so much space for creative UI design. Apple has already jumped ahead of other cell-phone makers in their UI design:

Image:iphone.jpg

Although seriously, how many features do we really need in a mobile device?

By the way, the image is a spoof on possible iPhone designs in the vein of iPod designs.

Gary Miguel - Mar 10, 2008 07:12:45 pm

The Mullet & Sano reading on graphic design scared me at first. It tore apart window layouts that seemed fine to me using jargon I didn't understand at all. However, by the end I was reassured by the simple steps for following good design principles. My favorite quote:

Fortunately, the goal of effective interface design is not to entertain or excite, but to present information efficiently and non-intrusively.

I'm pretty sure a lot of very commercially successful designs have entertainment and excitement as explicit goals. Recent example: The Mac OS 10.5 Dock. If you put it on the bottom, it looks like a tilted 3d glass slate with all sorts of crazy graphics. It replaced the very easy to use dock folders with the visually stunning but confusing stacks, which change their icons every time you put something in them, and come out in a curve which makes it harder to move the cursor to click on the top one. I must admit my observations are not very original, as many other people complained about these changes.

I hope to make an interface that is visually harmonious in according with the reading.

Benjamin Sussman - Mar 10, 2008 08:09:34 pm

I honestly felt a bit insulted while reading the Martin chapter. There were footnotes for the words "squared" and "square root" and descriptions of what mean, median and mode are. There are new words for the x and y axis, and a cute way of remembering them, but these useless new re-definitions are pretty trivial to anyone who even remotely considers themselves a scientist. There were even pros and cons of line graphs vs bar graphs, information so simple I am baffled by the large words like "continuum" and "inferred" which describe the details.

The Mullet and Sano article (despite having one silly named author) was much more informative and enjoyable. Despite mentioning sometimes obvious congnitive effects, it discusses them in a very serious way and generates valuable suggestions for designers to keep in mind. While I have read about gestalt effects before, I had never been exposed to them in a context where the behavior they assert is applied effectively to end users. The REUTERS logo was a great example of this, and it is in many ways a more interesting way to display the name because it requires subconcious grouping in order to be completely legible. I also appreciated the balance of examples in posters and booklets with computer examples because they showed how important design principles apply to both, and also taught how to transfer good designs from larger, more generous venues to more functional ones like the computer.

Alex Choy - Mar 10, 2008 10:10:25 pm

The Martin reading presented a good review of statistics. I agree with Martin that computers are "stupid." They will do exactly as we tell them to, but will not correct errors with the input data (because they cannot do so). The Mullet and Sano reading included many diagrams and examples. Although some examples were a bit unclear, they helped to understand the material. I feel that this reading would have helped more if read before we designed our low fidelity prototypes. That way, we could incorporate some of the presented ideas in our design. I enjoyed the discussion on symmetry and balance. I can see that it is a good basis for designing effective interfaces because it gives a sense of organization to the screen. Also, it was interesting to learn why some book covers have a large image on one half of the cover and only the title on the other half.

Glen Wong - Mar 11, 2008 12:14:48 am

I felt that the Martin reading was a bit repetitive for me. Most of the statistical techniques he presented I have seen and used before. I also felt his emphasis on the use of these tools in the psychologist line of work made it hard for me to relate with some of the points he was trying to get across. It is a nice a refresher but not one I felt I particularly needed. However, the Mullet and Sano reading was quite interesting. This is the type of reading I was expecting to read when I decided to take a class called user interfaces. The examples were plentiful and helpful in understanding the ideas the authors wanted to convey. I really liked how they gave four practical techniques (symmetry, alignment, optical adjustment, and effective use of white space) for creating good designs. It was odd because I found myself amazed at how such simple rules could go a long way towards improving an interface.

Max Preston - Mar 11, 2008 02:57:21 am

The second article makes some really good points, especially regarding the dangers of misplaced symmetry. It's not immediately obvious that having boundaries around groups of buttons can make it harder to scan an interface. The fact that there were pictures helped a lot to understand this. Although a number of the interfaces they show are antiquated, many of the same principles still apply. Making an easy-to-understand interface is just as important as minimizing the number of mouse clicks and keystrokes.

In regards to the first article, it doesn't seem very practical, especially since we are testing our interfaces on an extremely small sampling of people. I don't see how this information about statistics could be useful for our projects.

Benjamin Lau - Mar 32, 2108 12:11:62 am

The Martin chapter contained lots of information on determining the strength of a relationship and the levels of significance. I guess they were useful since it's important to take them into account during data analysis. In general I haven't really been so interested in the Martin stuff though. Most of it except the meta-analysis is old hat to most people taking this class, who presumably have taken CS 70 or maybe Psych 101 or Stats 20 or something. I thought the Martin chapter had a practical edge in that it discussed the effects individual differences (eg shyness) could have on your results but other than that ugh please no more. Can't we just make CS 70 a prerequisite for this class and then only talk about statistics once in class and then not touch it again? It seems like such a waste of our time to be reviewing all this stuff.

Richard Lo - Mar 11, 2008 10:10:59 am

The first reading was a bit boring. Fortunately, I'm guessing most of us have taken math courses that have some or all of these concepts, so it was review for most of us. Definitely a bit long for what it was. The second reading was cool, completely unrelated to the first. Very intuitive ideas and concepts, many of which may not be completely obvious to the designer right off the bat. And yet theres so much that it would be brutal to have a list next to you to go through each time you're designing. Examples provided were really great and it made the ideas very practical to me.

Jonathan Wu Liu - Mar 11, 2008 10:08:50 am

In the first article, I was hoping they could inform us on how to approach qualitative interpretations. Given the nature of our prototype when we did not measure many numbers, qualitative inferences will be a large part of our report as well as its effects on our future application. I appreciate the argument to keep the windows symmetrical. It's hard to maintain this symmetry especially when we apply this principle to dialog boxes that pop up, but I do think that by maintaining symmetry, the application will seem cleaner and even simpler than if symmetry was lacking.

Andry Jong - Mar 11, 2008 10:32:49 am

I find the first reading by Martin not very interesting or useful; plus it is way too long. He was talking about how to interpret data that we get from experiment by explaining in extent how to get mean, median, and standard deviation among other things that, I believe, all of us in class have used already. I think this article could have been condensed by a lot; giving us less pain.

However, I find the article by Mullet and Sano to be a lot better in a lot of sense. The article discusses a lot about how to design a good user interface using a lot of technique that I find to be new to me. The most interesting an counter intuitive for me was the good use of white space within an interface that seem to get the viewer's attention to the important region that we want them to see. Although it is a quiet simple technique, I couldn't think of it before I finished this reading. That's why I think this is a very good reading.

Kai Man Jim - Mar 11, 2008 11:49:25 am

The first article was more statistic than CS, most of the terms like mean, median and standard deviation we have already learned in high school or here at Cal if we have taken any statistic courses. True, the technique helps us to analyze our data from test, but I personally don't think it will give a big help; moreover, the result may not be very accurate if someone who doesn't really sure how to analyze the data in statistical way. The second article is more useful and it is totally a different topic. It gives us new idea or to remind us some mirror things that we may not get our attention to. For example, the Gestalt principles is very interesting to me. And how to use the white space in our UI design is very useful and exciting. Anyway, this is a good reading.

Robert Glickman - Mar 11, 2008 10:57:00 am

The first reading on introductory statistics was a repeat of things I have learned in the past, having taken numerous statistics and psychology courses. Just like last week, this reading was very much review. However, the second reading at least had some interesting tidbits. While much of the material presented was redundant with regards to previous readings on the subject, it did present some interesting examples of dos and donts of interface design. In addition, it tied in these concepts with psychological principles such as the Geshtalt Principle, which is also review from the psychology courses I have taken. It offered many useful pointers such as alignment, use of whitespace, and symmetry which I also found pretty interesting.

Zhihui Zhang - Mar 11, 2008 10:09:05 am

rather then complaining about having to learn statistics, I'll just say that the Mullet and Sano reading was pretty interesting. We learned about the gestalt principles in psychology, but it's intriguing to see it from a computer interface perspective. It would seem that organizing data into visual groups allow users to process more information in one screen. If I remember correctly from psych, the typical human can only maintain up to 7 'groups' in their short term memory at any given time.

Diane Ko - Mar 11, 2008 12:02:04 pm

The Mullet and Sano reading makes a lot of sense and has a lot of very useful principles for design. It seems like the factors that make a design look cluttered are more a matter of poor grouping and visual layout rather than the shear number of items in a design. That's not to say, however, that having many items is necessary. There definitely appears to be a focus on the whole less is more idea. Much of what makes a good design is a good understanding of the way people naturally see information. Text is very much read from top to bottom, from left to right, in English speaking countries. Therefore, a good interface takes this into account when ordering elements in a design. A design can come across as very confusing when the user's eyes need to dart across the page in an unnatural fashion.

Hsiu-Fan Wang - Mar 11, 2008 12:00:29 pm

The first text was pretty bleh.

I read the second chapter fairly zoomed out (with two pages a screen) and discovered that usually effective presentations were the ones that were actually guessable when viewed as a thumbnail. I also really enjoyed the parallels drawn between print and computer interfaces, as many classes present CS as too new and too different to have other disciplines inform software development practices. That being said, I dislike the criticism in 114, as poster designs can live in a vacuum more so than the dialog boxes in an operating system, and I feel like consistency is being conveniently swept aside for an aesthetic concern.

Brian Trong Tran - Mar 11, 2008 12:28:54 pm

The Martin readings were very much in theme with previous readings about statistics and understanding user responses. I found the Mullet, Sano reading as a breath of fresh air and back into actually designing the user interface. I liked how the article wrote about how more is not better in terms of interface design. I always knew that white space was important, but the readings helped provide greater direction for designing with white space to direct the viewer's attention to specific regions. I like the idea of designing in chunks to emphasize different ideas. It helps the designer visualize which parts need more detail and what that detail would be.

Ravi Dharawat - Mar 11, 2008 12:28:19 pm

The first reading was unnecessary for me, but I imagine that some people who haven't engaged in statistics in a long time may have found it useful. But I'd rather not have more readings like that personally. The second reading was pretty useful, but it did raise a question for me: Why is it that equalizing area between objects makes things look more natural, as opposed to distance? I know this isn't really a U.I. question, but the answer could shed some light on other things.

Yang Wang - Mar 11, 2008 12:33:58 pm

I will leave my negative opinions for the first reading. After all, it is an informative reading to those who is not so familiar to statistics. It is a good reminder despite how basic they are. I would probably suggest someone read this before they take any statistic related course to get a overall understanding of it. The second reading about GUI was much better in relating with course materials. Though the examples given are out of date, the idea to learn from past still applies. It is quite interesting to see some of this reading's ideas apply to real interface design. The general guild lines about the GUI design looks great. I'd say these techniques are much more helpful than perceptual theories given by some previous pieces.

Michelle Au - Mar 11, 2008 12:56:32 pm

The Mullet and Sano reading was very informative about designing good user interfaces. I agree with Gary that the following statement struck out at me: "Fortunately, the goal of effective interface design is not to entertain or excite, but to present information efficiently and non-intrusively." I have encountered lots of flashy interfaces with impressive animations and graphics, but were unorganized in terms of the layouts and were difficult to use. Before this class, I was under the misconception that designing good user interfaces would require using fancy graphics and effects to capture users' interests. However, I can see now that there is much more to it, especially after this reading. The picture examples in the reading were very illustrative of the core techniques for designing good interfaces: symmetry, alignment, optical adjustment, and negative space. The pictures that compare the interface before the technique is applied and after the technique is applied were very helpful to see how much the technique improves the interface.

Daniel Gallagher - Mar 11, 2008 12:59:13 pm

It seems that I'm the odd one out in regards to the Martin reading... I actually thought part of it were interesting in areas I've always been a bit shaky on. Okay, so explaining what a "median" is seems a bit ridiculous, but for example I'd never heard the names of some distributions they mentioned besides the normal one. The Mullet (sweet name) and Sano reading was kinda awesome- I've seen "gestalt" used before and now I not only know what it means but they squeeze a whole bunch of design concepts under it. Example 116 about conflicting symmetry was especially interesting, because it is not always the best idea to try and solve design problems just by tidying up and centering elements. This seems more serious to me because it is an easier trap to fall into than many of the other design flaws described in the reading.

Cole Lodge - Mar 11, 2008 01:06:49 pm

The second reading seemed far more relevant to the course than the first article. The number of examples the author brought in to show their point was very helpful; it really helped me to understand what was meant by weight and symmetry. These two terms were the ones that seemed the most relevant, and I am going to try to keep these at the front of my mind while designing interfaces. After reading the article, I went back to look at some of my interfaces I have designed in the past. Up until now I had thought something was wrong with them but could never put my finger on exactly what it was. After this article, I can easily see that most of my interfaces are heavily weighted to the left, leaving a lot of whitespace on the right of the screen. Moving a few elements to the left of the screen would have easily fixed the problem.

Gordon Mei - Mar 11, 2008 01:21:48 pm

Mullet and Sano cover a variety of areas of the UI, from positioning to typography, that play key parts towards an intuitive interface, poster, or any one of a range of media, that are too often overlooked.

If you look at the first immediate example before your eyes (the article itself), you can see that the page numbers are aligned on the lower right corner of the page for the right-side pages, and the lower left corner of the page for the left-side pages. This allows the eyes to naturally flow from the page number in the lower right corner, and gives a visual cue that behind that corner is a page flip that will bring the reader to the next page. This is very much like the road sign that shows a branching arrow pointing left leading into the adjacent text positioned on that same left side, so that drivers' eyes will naturally flow to the crucial information in the short amount of time they have to read the information.

It's the same reason why UI buttons in dialogue boxes are generally centered lower right when there's an icon on the left. The human eye in our culture reads left to right, so the effective 'end of the sentence' stops at the buttons, which prompt the user for further action.

The more intuitive designs utilize grouping with bounding boxes based on category, much in the same way that we read books - in paragraphs, in sections, in chapters. Additionally, those designs also effectively align both form controls and labels, and not just one or the other. Just look at any well laid out multiple choice or short answer exam sheet - the A-B-C-D-E choices and the sentence answer options are each lined so that the eye follows each lined grouping quickly during the exam. Contrast this with some of the Physics 7 series course exams I've seen, where everything was haphazardly clumped in large blocks of text and packed one-liners with no indenting or spacing. A significant number of students griped about the readability about that, and I have no doubts that these had at least some level of negative impact on speed of interpretation.

Much of this relates to the symmetry argument, where a solid symmetrical arrangement of, say, add-button and remove-button category functions across an axis makes their complementary role obvious without a heavy reliance on labels, thus allowing users to identify areas quickly with recognition. The article also mentions that symmetry across a vertical axis is more prevalent in human perception, which sounds logical, considering that humans seem to react positively to vertical symmetry in the natural world. Furthermore, an interface's balance needs to be maintained by considering the relative visual weights of elements, the larger of which would sit farther from the compositional center, for example. Having the widgets cluster dominantly on one side makes even a centered window appear lopsided, and consequently disruptive to the flow of the eyes.

Ultimately, much of the clutter seems to come from trying to cram too many widgets into an interface area, but the roles of factors to which we naturally react as humans, such as symmetry and negative space, are crucial elements to consider.

Yunfei Zong - Mar 11, 2008 01:16:13 pm

Go ahead, mark me down for not having a decent comment. This was, by far, the most boring, driest, and largest [100 megs? COME ON!] set of readings, ever. The Mullet/Sano reading stated the obvious, and the Martin reading started the obvious2 [this means to multiply by itself].

I hereby start my protest of crappy readings by posting lolcats. Image:lolkitty.jpg

Reid Hironaga - Mar 11, 2008 01:05:11 pm

The Mullet and Sano text was an interesting view on user interface design. Martin's chapter on designing psychological experiments was also interesting, but more because of the pun images than the extremely wordy explanation of statistical terms, graphical explanations, and other knowledge that is probably review for many students. It wasn't a particularly useful information source, but if I hadn't taken classes in statistics and many years of science classes, it would definitely be a useful resource for determining data from experiments and analyzing it graphically/statistically. Mullet and Sano probably lost a little bit of the flow of information due to the way we read it, in scanned form on a 1page-view at a time view. I enjoyed the talk on visual design, bringing together elements of symmetry and alignment, similar to the particular element of photography or any other art. This is a very scientific breakdown of the artistic elements of user interface

Joe Cancilla - Mar 11, 2008 01:15:45 pm

In the example on pg. 101, I have to dissagree with the author. I don't think there is that much of a difference between the Windows file selector and the Mac equivalent. The main difference is that they are reverse the order of the standard information heirarchy, but I don't see how this makes it less spatially analog. It could make more sense to visualize a heirarchy as an upsidown tree with the files sitting on top of the folders. Either way the layout is visually analog.

I like the idea of utilizing white space to draw attention to important areas. I don't think that white space is thought of that much in the design of user interfaces.

Zhou Li - Mar 11, 2008 01:34:05 pm

Although the "How to Interpret Experimental Results" presented a lot of basic statistic terms with graphical interpretations (mean, mode, standard deviation, frequency distribution etc), I thought it brought up some good points about main effects vs. interactions. Namely, when there are main effects with crossover interaction, the effects on dependent variables can be difficult to interpret. Most experiments, such as the lofi-prototype test we just did, had multiple independent variables. If they were not well chosen, the results can be inconsistent and create more confusion. I guess another point, which becomes even more relevant these days, was: don't always trust your computer, do some simple sanity checking.

Mullet and Sano's reading was much more relevant to interface design of course, they gave out and compared many interface design examples, I thought that was good and made it easier to understand the ideas and principles they presented. However, I wished we could have had a more recent reading, so the interface examples would have been more up to date.

Maxwell Pretzlav - Mar 11, 2008 01:55:24 pm

While I found the Martin reading rather tedious and a repetition of things I believe nearly everyone in this class has been required to learn at some point, I did like the quick review of standard statistical terminology as well as the warnings and discussion of misinterpretation and misunderstanding. I wish I had been able to take more time to read the Mullet and Sano reading more carefully, but I did find the discussion of optical and geometric size and interpretation very interesting.

Raymond Planthold - Mar 11, 2008 01:28:35 pm

I am genuinely mystified as to the purpose of today's statistics reading (and to a lesser extent, last week's reading on experiments) since they're clearly designed for obtaining and interpreting data from a large sample set. In contrast, the interface evaluation techniques we have seen repeatedly stress working with small sets of people, due to diminishing returns. Maybe I'm missing something, but I don't see any way to translate concepts from the former to the latter.

The second reading looks at a glance to be both interesting and relevant, but unfortunately is essentially unreadable. In what universe is 56 megs of images crammed into a PDF an acceptable standard for readability? Even on a relatively fast machine, scrolling through the document is a hellish experience. The text is frequently blurred, but since it's an image and not actual text, we can't do anything about it. All but the simplest example images are unintelligible. And this is for a class on human-computer interactions. If you can't be bothered, why should we?

Randy Pang - Mar 11, 2008 01:39:17 pm

@Yunfei:

I only wish that Jesus had the powa to make these readings better and heal the pain they've caused us all. I really fail to see why we're still getting readings like the Martin one, as I feel the class has been pretty clear about what readings are interesting (real-world examples, things actually relevant to UI, MODERN readings, CONCISE readings, etc.) and what we don't (insults to our intelligence, ancient relics of UI design, articles filled by Cruft McCrufterson the Crufty, etc.). Seriously, if you guys actually read these comments during the semester, please please please adjust the readings accordingly. Interesting readings will spark interesting discussions and promote actual learning. We can't exactly get too many viewpoints on how to square things, now can we? If you're taking suggestions, we could also cover a topic that's relevant to UI and that most people don't know anything about, like typography or something. (I don't know anything about it personally, but I have a good friend who is insanely zealous about it)

Anyways favorite part of the Martin reading was how the page where they footnote squaring is right next to the page where they emphasizing the abscissa and ordinate (and subsequently leave the x and y-axis out of the summary) while juxtaposing them with those ridiculous drawings (yes sir, we know what horizontal and vertical mean, I know you're surprised). I agree with Benjamin Lau that CS70 should be made a pre-requisite, we should take about statistics (WITH relation to UI) for a day, and then never look back. Although, to be fair, for much of this reading CS70 might as well be replaced with grade-school. Anyways, I guess if you didn't know the material it could have been useful, but there's absolutely no excuse for it being that long.

I did like the second article though. It's use of real-world examples was really refreshing, though I didn't agree with all their assessments (e.g. my eyes are immediately drawn to the road fork rather then the city or the highway number, and that walkman interface doesn't look fun to use).

William tseng - Mar 11, 2008 02:17:45 pm

The Martin reading did not convey much new information however I found the Mullet readings to be much more useful in the context of this course. Specifically there were several examples int he Mullet reading which I think would be useful for our group project. There was one example of a highway sign which we could use to emphasize the user name, distance, and location they are at similar to the city, distance, route number. The concept of symmetry is already taken care for us in the android sdk as it divides the menu bar equally as you add more and more buttons. Where we might want to pay attention is how to balance the size of our "user" icon vs the size of the icons of buddy's in our application. All in all however a lot of the points mentioned in the Mullet reading seem to be more focused on the aesthetic appearances of our interface moreso than actual functional usability. Maybe these are tied hand in hand but I personally feel the techniques and concepts covered in previous readings such as reducing number of key presses are much more practical in creating a good UI.

Jeffrey Wang - Mar 11, 2008 02:10:51 pm

Although I agree with everyone else that the reading was tedious, they bring some very practical points about the principals of design. I like the information about statistics because it allows u to confirm some of the concepts we mentioned in class and lecture with evidence. It was also good reviewing some statistical terms, such as monotonic. Another point in the readings was about the importance of symmetry in windows. It reminds of the windowing system in Mac where you can only resize from the bottom-right hand corner. Coming from being a Windows user, this is really annoying and doesn't provide me the flexibility I want. I hope Mac finds some way to make this idea more symmetrical and practical.

Johnny Tran - Mar 11, 2008 02:17:44 pm

I found the second reading to be very interesting, and highly relevant for our project. I've done many programming projects before, and while I have had a general idea for what makes a "good" UI, it was great to see concrete design principles explained and illustrated.

One point, however, is that the examples were heavily geared towards "standard" UI environments, with windows, widgets, etc. I would have liked to see examples of non-standard UI designs which were still useful and still exemplified principles such as symmetry and balance, but with an innovative interface. Perhaps this is much rarer due to the advantages of consistency and familiarity of standard UIs, but I can certainly envision applications or systems in which standard UI elements would be awkward to use.

I also wonder whether layout managers which are present in UI libraries such as Java Swing or Android could automatically enforce certain principles, and how effective that would be. For instance, Swing has layout managers which will automatically cause controls to fill an entire screen (which looks symmetrical, but also exceedingly ugly). It certainly could not help, and could lead to much more usable interfaces by default.

Timothy Edgar - Mar 11, 2008 02:07:42 pm

The first article about statistics was completely pointless in my opinion. It did give us a review on many concepts we should be familiar with by even high school mathematics, however I don't see any applications in our project. We are using qualitative testing mostly as our sample size for quant is extremely low. I doubt with 3 users, we can make any trend with 3 data points. Additionally, I was under the assumption that the diminishing returns on the problems found in usability testing was not a quantitative metric but rather finding them qualitatively.

The second article was quite interesting due to the amount of examples involved. It was a lot easier to skim the pictures and captions first and then read the article to get the major points. Granted they were relatively old examples, they were still quite useful in conveying the major principles. I'm a bit curious if there is any new concepts in regards to the failure of modern UI design as we seem to embrace those 4 principles of symmetry, white space, alignment and adjustment as a common standard.

David Jacobs - Mar 11, 2008 02:29:13 pm

Despite the objections of some other students, I actually really enjoyed Mullet and Sano's chapter. Gestalt is a word that seems to be tossed around a lot as if everyone knew what it meant... I didn't. Since Gestalt principles are based on human perception and most of us in the class are human, of course said principles seem obvious. That doesn't mean writing them out in text is a bad idea though. Being able to enumerate design principles gives us an objective set of benchmarks to design by. It reminds me a lot of the design heuristics from last week's reading.

I do have to say I really wish this text were scanned in color, though. Much of the text makes reference to use of color in design, but it's hard to get a clear picture of the intentions without a color copy of the reading. If it's not too difficult, could future readings involving color be reproduced in color on the wiki? ... color.

Brandon Lewis - Mar 11, 2008 02:31:55 pm

I skimmed through the article on statistics. I was more interested in the reading on design. I've been interested in that ever since I started creating graphical interfaces. I've noticed that some times i get it right, and some times i get it wrong. Particularly frustrating, though, is when the tooklits you are using don't support the creation of pleasing layouts. I think the examples of good layout and poor layout were helpful in illustrating some of the design concepts they were talking about. I also understand their point about making large use of negative spaces. The point in their reading is that graphical user interfaces, in particular, have to be crafted so as to be aesthetically pleasing, in addition to all of the other usability concerns you have to manage.

I also want to comment on the large number of seemingly insolent responses from the class. Show some manners! Just because you don't like it doesn't mean you don't have to read it. Here's a hint: if you wouldn't say something to the teacher's face, don't put it in your comments.

Andrew Wan - Mar 11, 2008 02:23:33 pm

I found the first reading generally interesting, but off-point for small projects. Given a much larger set of experimental data, graphs or other data representations seem like they'd be an obvious choice (after being adjusted for accuracy and bias, of course). As for the seconds reading, it did a reasonable job of highlighting some UI considerations. Implied boundaries and hierarchical organization of controls/data give structure to a screen's content, while smaller details like alignment and symmetry help the clarity/feel of the interface. While the authors touch on Gestalt principles like continuity and proximity, most of the article followed the typical pattern of "identify/justify a few important design considerations, then elaborate on each with numerous examples".

Megan Marquardt - Mar 11, 2008 02:33:40 pm

Seeing the previous posts about how mundane and insultingly simplistic the articles were , I was hoping that my lack of experience with statistics would make the Martin article somewhat more interesting, but it was still so basic that it wasn't useful at all. The Mullet and Sano article was also very basic and outdated, mostly talking about very intuitive things, and didn't really draw in any new insight.

Jiahan Jiang - Mar 11, 2008 02:38:52 pm

The discussions on Gestalt principles were interesting, but it wasn't new stuff so it got a little boring at the end. I am also concerned in the real applications of these theories because I think UI design is strongly influenced by what UI designs have been; what I mean is that beyond the rules of human perceptions, people have trained themselves to become familiar with and have an expectation of what an interface should look like and include; if there's a new innovative design that is completely unconventional but extremely efficient and well-planned, would people find it difficult to use because it is not what they have been accustomed to? Also I found the common errors section very interesting and useful.

Lita Cho - Mar 11, 2008 02:30:25 pm

Designing Visual Interfaces by Mullet and Sano was a very interesting read compared to Martin's chapter. Learning about Gestalt principles would have been very helpful with the lo-fi prototype design, such as grouping elements that share visual characteristics. Reading about the how the brain likes visual organization and groupings were very fascinating. The examples that were provided, such as the Sony Mini Disc Player and the REUTERS, showed great examples of the various Gestalt design principles. I do believe that a UI needs to be aesthetically pleasing, however, that should be a secondary goal. The main goal is to show the information in an organize matter with proper groupings so the user can easily access the information. Mullet and Sano's design principles really focused on that, and I found that really useful for the UI design process.

Adam Singer - Mar 11, 2008 02:46:18 pm

I found the reading by Mullet quite interesting, especially his discussion of poster design. While I am not much of a graphic designer, I've always wondered what exactly it is about particular layouts that really do a good job of guiding the eye. I'd be interested to see if there are any further readings Mullet has on this subject. Graphic design has always been an interest to me, and I would love to learn how to "anchor" the eye the way Mullet describes.

It was also interesting when he discussed the "do nots" of the gestalt principles. His example of the interface violating most of these principles doesn't even seem as dated as it should be. Certain modern applications (e.g. some printer software or even, to a lesser extent, Eclipse) appear to just be a jumble of icons and dialogs with no apparent flow. This discussion I found particularly useful since we will be avoiding most of these design pitfalls in our projects.

Mike Ross - Mar 11, 2008 02:25:07 pm

I found the second reading particularly useful as a reference of things not to do. The wealth of examples should provide a good reference for common problems and tactics for solving them when we actually run into them. While a lot of it sounds like common sense, it's somewhat helpful to see the underlying problems examined and explained. Apart from the examples, I found the section on compensating for human vision interesting, specifically the ways in which we actually judge alignment and spacing. You generally cover these sorts of things in psychology and cognitive science classes, but I hadn't seen the typography examples before, I actually find that rather useful to know.

JessicaFitzgerald - Mar 11, 2008 02:48:39 pm

A line in the Designing Interfaces chapter particularly stuck out at me, which was the idea that when things are put in the right spot relative to others the need for labeling is reduced. I think this is an interesting way to think about it. If your design is intuitive in the sense that all the elements flow together and go correctly together, then you need to label things less. But I feel that things should always be labeled to make the interface more intuitive for users that aren't as familiar with technology so that they will be able to understand what to do. I liked the direction of this chapter, because it focuses on the aesthetics of the design, which I think is very important. When a design is aesthetically pleasing, in general it is a lot easier for the user to maneuver it. The whole reason for designing a user interface is so that a user with only some technical experience will be able to use the interface with ease and not be too confused. Thus, I thought this chapter was quite relevant when spacing things out and deciding on where to put things in an interface.

Daniel Markovich - Mar 11, 2008 02:56:58 pm

Although its not the most interesting material we have covered so far in the course, I really enjoyed the Designing Visual Interfaces reading and felt that I got quite a bit out of it. Kudos to Mullet and Sano for including examples for every concept they introduced. It made the otherwise quite boring material into an easy read, and I felt that I learned much more from this style of article rather than some of the others that we have read this semester.


Although I enjoyed the article, it would be nice to seem some update examples for mobile devices specifically. The screen size is considerably smaller on mobile devices and a more productive use of space is required because of this. Therefore mobile devices might either have to ignore some of the organizational techniques presented in the reading to account for a smaller UI, or other techniques may have to be adopted. Regardless, this article will definitely help with the fine tuning our mobile application, and give insight into how to make our applications more productive for the users.

Jeremy Syn - Mar 11, 2008 01:29:41 pm

I liked the Mullet and Sano reading as it covered some good user interface design techniques and information that would be useful to us as interface developers. They start with showing us what the benefits are of having a good structure for the interface. I thought that all of these benefits were definitely what we want our interfaces to possess in order to be a good usable application, particularly readability and control. I also thought that the idea of spatial logic was particularly interesting and useful as well. The user can have a much easier time interacting with the interface if we just move things around making it more easier to navigate through.

Jeff Bowman - Mar 11, 2008 03:08:11 pm

The readings this week seemed to switch schizophrenically between "high-level" and "low-level"; I couldn't find a happy medium of relevant, generalizable information. It's good to get a sense of visual style, as this is one of the reasons I'm in the course this semester.

One of the things I noticed about the Mullet reading (tee hee) is that he seems to overemphasize the use of visual symmetry and other such patters. I do agree that these are very appropriate observations about how the visual cortex works, and how to make aesthetically pleasing interfaces, but I would be interested in seeing the use of symmetry versus the use of preattentive variables: Making one element off-kilter violates the Gestalt principles, but it makes it easier to find certain aspects of the layout. Maybe there's a happy medium to find....

EricChung - Mar 11, 2008 03:11:42 pm

As far as the first reading is concerned, it was just more of the same. Maybe it's because I've already taken statistics and psychology, but I didn't actually learn all that much. It was nice to be reminded, though that we are trying to read the minds of our users, or at least figure out how their gears turn, so we do need to be concerned about how to analyze our data, like psychologist do.

The second reading seemed to be more "pure cs160" than the other one. This is the first time (that I can think of) in this class that I've gotten really concrete examples of how to lay out things on the screen and what works and what doesn't. So far in our projects, I've just been sort of lost and have been basing my decisions somewhat on what has already been out there, since we've been being taught how to criticize designs but we haven't really be taught specific techniques to make our designs, at least until this reading.

Siyu Song - Mar 11, 2008 03:26:22 pm

The second article was really interesting. What I liked most about it was that there were so many examples and discussion of the examples like we had in class. The article really helped to articulate aspects of design that are hard to put into words. For instance the conflicting symmetries example showed how boundaries can distract from actual content if they are organized symmetrically. Many of the examples in this article are things I feel like I've seen before but could not quantify how or why I liked or did not like them. This article really helped clarify those things and provided a great foundation for some explicit guides when designing our interfaces.

Scott Crawford - Mar 11, 2008 03:13:41 pm

The first article was somewhat pedantic and I knew it from before enough that I basically skimmed the material. The second article was more interesting and brought up some very interesting common problems/solutions/general UI concepts. I didn't care for the Reuters example, because at first glance I don't see the company's name, just the dots, and decoding the letters and then the name is quite arduous. Either the logo fails to be an adequate example of the gesalt effects, or the example is poor at instructing how to create a good UI effect. I particularly liked the idea of 'balancing' your feel/layout as it makes sense that all of the display region should be utilized is equal proportion (not necessarily pixel by pixel, but rather contiguous region by contiguous region), and is definitely important in utilizing all of a mobile phone display effectively (since display real estate is at a premium on that form factor).

Henry Su - Mar 11, 2008 03:27:08 pm

I found chapter 12 to be mainly review, and I also question the necessity of learning this material for this class. Although I agree that statistical tests are important for large-scale user interface studies, for smaller studies such as the ones we conduct in this class (~3 participants), hard core statistical analysis is probably unnecessary. There were, however, a couple of interesting ideas that were presented in this chapter. First, though the idea of factorial experiments was not new, they way they were analyzed here was. Although I still don't understand factorial experiments really well, the idea I got was that they are kind of a way of presenting information where there are 2 or more (possibly interacting) experimental variables. Second, the idea of meta-analysis was also new to me. It certainly seems logical, though, that combining the results of several studies into one statistic is a nice, inexpensive, way to come up with new statistics that neatly sum up the results.

The second reading discussed some concepts that I learned in Psychology class before. It is striking to me how nicely user interface design straddles between psychology and computer science. Anyway, some of the material covered in this reading certainly has uses in interface design. For example, the principle of grouping elements without the use of cluttering bounding boxes is certainly applicable when, say, you want to design a Settings page. The use of different font sizes for hierarchies is pretty obvious, but sometimes overlooked. So is the use of contrasts, to make something stand out. Overall, a few of the ideas from this chapter will probably find their way into our interface design.

Michael So - Mar 11, 2008 03:24:35 pm

The first reading was pretty dull. It was just about things that I learned in a statistics class. I guess it's useful if you need to look up definitions of statistical words like standard deviation or mean. But I don't find it really useful myself.

The second reading is more useful since it talks about techniques to make an effective layout for a user interface. The talks about symmetry and alignment and white space are good things to keep in mind. The whole understanding and study of human perception makes sense to research since a user interface is a visual thing and the user is human. So knowing how humans vision system works helps in making an effective layout for an interface for a human user.

Paul Mans - Mar 11, 2008 03:14:16 pm

Similar to the other readings by Martin, I enjoyed his ability to present techniques in an easy to read style that is heavy on examples and a lot less dry then much of the text out there on statistical techniques. I definitely appreciated the statistical refresher because many of those techniques I have not thought of for a long time. In general I have enjoyed this entire unit on designing and interpreting experiments with UI designs because I find the idea of obtaining hard data on interface designs kind of exciting--sure that sounds pretty weird, but I really like the idea of making a science out of something I have thought of for so long as a more qualitative endeavor.

I haven't had the chance to give the second article more then a surface reading as of yet, so I will postpone my comments on that for now.

Tam La - Mar 11, 2008 03:29:00 pm

like the section the author talks about mistakes in interpreting statistical tests. It's so true in the world of statistics, there is no absolute yes or no. It's all about probability. If the result is not significant for a given significant level, we cannot really totally reject or accept the hypothesis. What we should do is to understand that it has some probability that this is true, and some probability that this is false. You may say, what's the point of statistics if it just tells me certain thing "has a chance to happen"? Well, it helps in making decision. For example, if there is 99% chance that you will lose for doing certain thing, you should not do it. There is no absolute true decision in this world anyway, so a decision that base on rational statistical analysis is a good enough decision.

Jason Wu - Mar 11, 2008 03:34:25 pm

Martin's statistics were by far the longest and craziest thing ever. I honestly started skimming after 30 minutes into this thing. While impressive, I wasn't sure what the value of the mass statistics were. In general, statistics are only as good as the method gathering them, the biases of where they were, and the sheer NUMBER. At least he had a lot...

Pavel Borokhov - Mar 11, 2008 03:32:40 pm

The second reading provided some interesting insights on the role of spatial proximity, grouping/hierarchy, symmetry/balance, and negative space. Most of this stuff seems fairly obvious yet it is interesting to see the many real-life examples of where these principles are not obeyed. In some cases, I thought the examples were a bit iffy - for example, the case of the NeXTSTEP open dialog box in which a non-functional icon "counterbalanced" the ok/cancel buttons in the lower right. As a user, I'd feel like the icon was superfluous and didn't serve much of a functional (or even aesthetic) purpose. I'm also somewhat happy about the fact that Apple publishes UI guidelines and provides automatic guides in their interface design tool to take into account a lot of the principles mentioned in the reading. It is worth noting that since developers generally abide by these guidelines, the user's overall Mac experience is much better than, say, Windows, where every application has its own set of UI "paradigms" and layouts without any sort of consistent structure. What's more, when an app doesn't follow these guidelines, it immediately jumps out at the user and often creates annoyance and frustration at the the interface.



[add comment]
Personal tools