Graphic and Experience Design
From CS 160 Fall 2008
Lecture on Nov 5, 2008
Readings
- CH 2 Proximity and
- CH 3 Alignment from "The Non-Designers Design Book", Robin Williams, Peachpit Press 2008
Recommended:
- CH 2 Elegance and Simplicity and
- CH 5 Module and Program from "designing Visual Interfaces", Kevin Mullet and Darrel Sano, Prentice Hall PTR, 1994
Discussions
Please post your critiques/commments on the required readings below. To do that, first login by using your user name and password, then click the "edit" tab on the top part of this page (between the "discussion" page and the "history" page), New to wikis? Read the Wiki editing guide. . Hint - Please put a whole line == ~~~~ == (literally) at the beginning of your submitted critique, so the wiki system will index, sign and date your submission automatically.
Mikeboulos 01:16, 5 November 2008 (UTC)
This was very interesting! I have always used alignments and proximity, but never really thought about them. I think that these two chapters are essential in our game design because we tend to through at the user buttons and information without any alignment or grouping, assuming that they have went through the tutorial, but proximity makes a huge difference because their eyes will land on multiple places on the screen, so a smart designer will drew the attention on the pieces of the game which needs more focus. So that the user can get the message. This will also help the user to concentrate on the game rather than trying to gather information on the screen. On thing I didn't get in the article: "The Invisible line". I think it would be nice if this is covered more in the lecture and the point behind it.
The last thing I liked about these chapters is when he said:
"I am giving you a number of rules here, but it is true that rules are made to be broken"
Well I am glad he said that because I don't think that it will always work the way he aligned the text or the objects, or how he put them close in proximity, but overall I think this is a great way to help on developing a more user centered games.
Trinhvo 02:06, 5 November 2008 (UTC)
wow..these are interesting articles. Proximity & Alignment techniques are used everywhere, but I've never really paid much attention to them before. After reading these articles, I started to look around to see if my books and games are really designed with these techniques in mind. And I realized they were very carefully designed; therefore users can quickly grab important information at first glance.
Vedran Pogacnik 02:56, 5 November 2008 (UTC)
The principles of proximity and alignment seem essential for graphic designers. They are the rules that look trivial and straightforward- in a large sense they are- but as the texts say, if one is not conscious about them, bad things can happen. Bad in the same sense as the first example on the Proximity readings page- the flowers are separated by some criterion, and that is instantly obvious without even reading the flowers’ names. Likewise, if the page is not aligned, like one of the examples of a newspaper page, one will instantly feel that something is off, or be confused about what line of text is a description of something else. I think that there are some exceptions to the principle of proximity and alignment. For example, whatever we want to stand out we might deliberately misalign. Also, suppose the program control functions are listed close to each other, one of them might be on the other side of the screen for example. A direct link to the exit function might be a good example for both exception cases.
Perry Lee 04:29, 5 November 2008 (UTC)
I found these chapters very useful and informative. Using simple examples, Williams does a good job in (1) demonstrating the importance of proximity and alignment and in (2) pointing out the common pitfalls to watch out for. He provides simple rules (e.g., if there are more than three to five items on the page, try to group related elements to create a single visual unit) and clearly explains the rationale behind them. The biggest point that I think he gets across is you do not have to be a professional designer to create an appeasing and effective layout. You just need to be more conscious of your placement (e.g., every element should have some visual connection with another element) and keep a few basic rules in mind.
KevinFriedheim 06:56, 5 November 2008 (UTC)
So after reading through Williams Chapter 2 on the importance of proximity, I can't help but wonder if the advice that is given on proximity is merely opinion or if its a proven fact. In either case, I can't argue since in his examples he more than clearly proves his case as to the importance of placing related things in close proximity, and using white space to separate unrelated things (or less related things).
Also, going through a lot of the alignment examples -- I'm not going to lie -- I tened to look at many of them and didn't see anything particularly wrong with them. I realize my mistake (or the mistake that the author sees) after reading. I guess I don't have a knack for design.
Buda Chiou 07:31, 5 November 2008 (UTC)
Actually I think these two chapters talk about the same thing but in different ways. Putting things related together is aligning things. I don't know what's the difference between them. Anyway, although the principle of proximity and alignment seems simple, they might be the most important elements for an interface, and it's hard to implement them perfectly. The reason is that the definition of "related" is very ambiguous becasue we can always relate things in some ways, and the relations between objects are usually not transitive like A is related to B and B is related to C, but A and C doesn't seems to be related, so we might get confused about whether we put A and B together or B and C togehter.
Kumar Garapaty 07:38, 5 November 2008 (UTC)
I think the most important lesson I learned from the proximity and alignment is the proper grouping of items based on relation whether its in terms of proximity or alignment. Understanding how things are organized when designing a particular item allows the user to organize it in the same way in their own mind. This clarity in design creates a clarity in mind allowing the user to interact better with the actual project. This lesson can be applied all types of software including serious learning games where proper grouping of learning topics allows for more productive teaching.
Jordan Berk 07:43, 5 November 2008 (UTC)
I thought both of these articles were very interesting and made a good read. Text proximity and alignment is perhaps is less important to games than to other UI applications, but still very important. Menu and options screens often have a myriad of possible choices, and as the chapters state, carefully thought-out placement can make the difference between an effective layout and one that confuses/slows down the user. Not to mention the existence of text-based games, perhaps a language learning. All these systems benefit from having a user that can mentally map out the intented significance of different buttons, icons, and text. I also thought the articles were interesting because they covered something which normally is not even thought about in design or in every day life; we just kind of take these things for granted. I certainly don't think I've ever looked at a business card or menu and thought to myself "this would benefit from rethinking the text proximity and alignment," even as I struggle to make sense of it.
Kai Lin Huang 07:44, 5 November 2008 (UTC)
It is surprising this type of details on proximity and alignment. Based on my past working experience of making business cards and restaurant menus using software, there rules (proximity and alignment) came as given and the designers just followed them. I had to turn on the side ruler in the software to make sure that all lines are aligned. Most of the time there were not much creativity involved because there are always old design as reference. I guess the presence of these formatting problems is due to different levels and experiences of the designers. The science behind why experienced designers would want to align texts and care about the fonts is carefully explained in these chapters of Williams’ book. Designers usually cannot tell the usability problems of their own designs because they usually create the ways in which they are accustomed to. The fact that there are a lot of these design issues can be due to that most people will not take these problems as much a critical issue as a typo. A typo may result in conveying very different meanings that the original, but a layout design problem usually does not seem to cause misunderstanding easily, unless it is very extreme. Readers of these designs usually unconsciously skim through the document one or more times to make sure they get the correct information.
Gary Wu 07:52, 5 November 2008 (UTC)
In a big software package, such as Maya, I find that the role of proximity comes into play a lot more often than it usually does. With so many functions and tools, there is not enough real estate to make everything accessible on screen. I think the UI designers at Maya did a good job at addressing the proximity concern of its tools. They use shelf tabs and separate menu selections that actually change the context of your top menu layout. The shelf tabs allows the shortcut space to be populated by all tools of the corresponding shelf choice. After reading this article, I see how important it is; especially after performing the eye squinting test.
Alignment seems to draw from the heuristic idea of consistency and standards. If things on the page resemble things in past pages, users are able to recognize this and have an easier time navigating and understanding the interface. I feel that this is a very important factor to consider when designing layouts that span multiple pages/frames.
Stuart Bottom 07:53, 5 November 2008 (UTC)
To me the most interesting thing about these readings is how evocative they are of Don Norman's concept of natural affordances. In particular, putting related items in proximity to each other speaks of the way humans naturally arrange physical objects - on their desks, in file folders, windows on the desktop, etc. On the other hand, some of Williams' recommendations seem quite subjective to me. Graphical layout, as a discipline, is definitely more of an art than a science, and we are reminded of it here. It would be interesting to see eye-tracking studies done on UI's that follow some of these recommended principles vs. those that don't. It would be very enlightening to know: statistically speaking, how much better are graphical layouts that follow these principles?
Mike Kendall 08:07, 5 November 2008 (UTC)
is the wiki really messed up for anybody else? hmm.
anyways, the techniques of proximity and alignment are critical for keeping an interface aesthetic. in my experience designing web applications, my clients don't want their interface to follow these rules. they have an idea fo rhow the site should look and work, and even if that doesn't make sense to the people who will actually be using the site, then it doesn't matter.
not only that, it's my experience that the average person has poor skills with respect to scanning a page and finding the important elements in it. after years of using windows, some people still don't know about the pull-down menus at the top of each window. in textual situations like those in the reading, they slowly read everything on the page before moving on, even if there is only one section that actually effects them and it is clearly labeled.
i benefit from proximity, and a lot of my peers do too... but does the average person? i don't think so.
Karen Tran 08:25, 5 November 2008 (UTC)
Proximity
The purpose of proximity is to organize. Elements that are intellectually connected should be visually connected. Unrelated elements should not be in close proximity. The closeness or lack of closeness indicates the relationship. Equal amounts of whitespace between elements indicate that they are part of a subset. And in that sense, proximity "implies a relationship." If reader's eyes have to bounce around to gather information. In the process, they are most likely to lose focus and interest. When you start organizing, you start to make more sense of your task - what should be included, what shouldn't be. by groupng similar things into one unit, several things instantly happen: the page becomes more organized. you understand where to begin reading the message, and you know when you are finished. This is the effect that UI designers should aim for their design. Because this effect empowers the designers to be in control of what they'd like the users to learn, what they'd like to abstract away.
Alignment
The purpose of alignment is to unify and organize. Every element on a page should have visual alignment with another item on the page. Nothing should be placed on the page arbitrarily. Find a strong line, such as a graphic, and use it. For example, if your notes for a class is taken carelessly without indentation, when you go back to review the notes, it's very likely that you'll get confused of which notes are big ideas and which are supporting ideas.
These two readings are really helpful. Proximity and Alignment appear everywhere in our lives, in posters, advertisements, notes, flyers, etc. It hugely depends on the way that the designers organize their messages. Because it's because of proximity and alignment that determine how much of the intended message the users will walk away with.
Volodymyr Kalish 08:32, 5 November 2008 (UTC)
After reading these two articles I started to pay more attention to how I organize my written stuff. And first thing that come to mind was my resume, which was overloaded with proximity and allignment examples. It seems that if would write my resume in plain monotonous text, no one would read it... Another example could be coding style, since indentation indeed helps a lot in reading and undrstanding the code. Try reading code that is all in one big line...
The funny thing is that I never knew about proximity and allignment while I was heavily using them every day. The same is true for many people, so these two examples sort of explained why people do certain things rather than how to do them.
Xuexin Zhang 09:10, 5 November 2008 (UTC)
When users see a group of items in close proximity to each other, naturally they will think that group of items is related and take those items into consideration. Therefore, I believe the idea from chapter 2 of proximity in order to organize related items together and separate unrelated groups of items with white space. I like the idea of alignment from chapter 3 to organize and unify the layout. By using a consciously designed page alignment, users could have a much easier experience viewing it. By having a strong alignment, it gives the users a consistent and standard Human Computer Interaction Interface.
Jimmy Nguyen 09:10, 5 November 2008 (UTC)
These two articles expand on pretty ubiquitous idea, especially in my experiences. When I saw the dance flyers, the first thing I thought was “wow.. I’ve done this before and for the same reason”. Almost all user interfaces are grouped together in proximity somehow. We learned in psychology (and in an earlier lecture) that things are best remembered grouped together anyways. A good UI definitely needs a shallow learning curve. What I like about the combination of proximity and alignment is that everything has a focus. The user can look at one section, and look easily.
Haosi Chen 09:13, 5 November 2008 (UTC)
It is surprising this type of details on proximity and alignment. Based on my previous working experience of making posters and fires using software, there rules (proximity and alignment) came as given and the designers just followed them. Alignment seems to draw from the heuristic idea of consistency and standards. If things on the page resemble things in past pages, users are able to recognize this and have an easier time navigating and understanding the interface. I feel that this is a very important factor to consider when designing layouts that span multiple pages.
Alan McCreary 09:28, 5 November 2008 (UTC)
The author uses business cards and invitation cards as examples, but the principles of proximity and alignment can definitely be applied to game design and user interfaces in general. On a business card, a lack of organization is a small annoyance - it will make the card hard to read, but there is only one card to read. With games and user interfaces, however, the user often needs to go through several screens. A complete lack of organization in any of the screens can slow the user down considerably, since the user may be forced to rely on recall (remembering where a certain button is on the screen) rather than recognition (glancing at a part of the screen and understanding, by the general organization, that the button should be there).
Witton Chou 09:38, 5 November 2008 (UTC)
There are definitely a lot of things that factor into how we look at various objects on a screen or paper. It's really amazing how our brain latches on to various characteristics. Things such as size, proximity, shapes, alignment, and colors are very key elements of design and lend themselves to data organization and direction. While these design choices may not always be things we recognize immediately as users/readers, they have profound impacts that make these considerations important to experiment with.
Hao Luo 09:49, 5 November 2008 (UTC)
Like others have said, this week's reading was actually pretty interesting (for once) and it focuses on a simple concept yet it's very applicable towards user interfaces, although only if our user interface includes text (which it almost certainly does). It is most useful, of course, for things like a cover page, the first slide of a presentation, the cover of a book, a business card, table of contents, or anything of that nature. However, this can be expanded to include menus in our games, buttons which provide users with options within the game and how to arrange them, and even scores and feedback. At first I thought it would only be helpful for the start menu screen but it can really be applied towards almost every aspect within the game. Proximity, on the other hand, is something more obvious to us once it is brought up, but something almost certainly neglected by many when considering how to place items. I think it's also something we do instinctively, to a point. For example, we would tend to group the subtitle right under the title, and then place some space between that and then the contents. Still something to watch out for, especially if it's not as obvious like in the reading's example.
Frank Yang 11:19, 5 November 2008 (UTC)
This week's reading was full of information on things that I've never really thought about before. It never really occurred to me how weak something can look due to just poor design. I've always attributed a weird alignment to just poor aesthetics, but after the reading, it was clear that a weak alignment really hurts the strength of the thing itself. This may not apply as much in games, due to the lack of text in-game, but just off the top of my head, even certain menus can look more sophisticated based on alignment. Some options menus have incredibly large centered words, while others have small text that is aligned to the left, and I can safely say that the small text aligned on the left is a lot easier and more comfortable to navigate.
Jacekmw 11:24, 5 November 2008 (UTC)
I personally found these chapters very interesting and relatable. Again on a personal note, I am in a theatre group myself, and have designed pages of programs and fliers. This article's use of theatre programs in particular as examples for its main points allowed me to relate immediately. The article's content itself was very nicely grouped into shorter chunks punctuated with images to make it easier to read, a fine example in and of itself of the proximity principles Williams discusses in chapter 2 and of alignment (chapter 3). This is useful with regards to the serious game project in that it encourages a certain simplicity in aesthetic in design. While the text specifically discusses proximity and alignment in text and paper items, this also works for our interface in that similar items, such as the Instructor smiley indicator and his speech bubble indicating how the player is doing with regards to table manners, are located right next to each other, while the food-eating interface is somewhat self-contained in its section of the interface, etc.
Saliem Than 13:27, 5 November 2008 (UTC)
Found the readings to be lovely today. Especially the chapter on proximity
Geoffrey Lee 14:08, 5 November 2008 (UTC)
I've always applied these principles somewhat unconsciously, but it was nice to formally learn about them. I found it particularly interesting that centered text actually creates a formal atmosphere in a design. I always centered all of my college and high school cover papers, and now I know why. Overall, this reading has encouraged me to explore left-alignment and right-alignment more for future designs.
Greg Nagel 16:45, 5 November 2008 (UTC)
I've never given much thought to principles of graphic design, and I probably should. I've always tried to attain a simple, clean look to my reports, but using these principles I can probably pack more information into a more-readable form.
The alignment portion was most enlightening to me. Usually I play around with layouts, especially with images, until they look right, but what I should have done is to draw invisible lines and match the text and images to those lines. I might pick up this book and read the rest of it.
Anthony Kilman 16:54, 5 November 2008 (UTC)
This reading is quite reminiscent of the Norman reading, the "Psychopathology of Everyday Things." Take the door handles example that is mentioned several times throughout the reading. The part of a set of double doors that correlates to opening those doors are going to be 'near' each other in a sense. Depending on the door, it can be more of a grouping via symmetry, but the correlation between the ideas is unmistakable.
I also totally dug(g) the example with the business card. What it reminds me of is writing a resume, and the hours I would spend on organizing each individual element. Setting the font size properly, making sure to emphasize which elements I want to draw attention to, and which elements I don't want to emphasize as much. Each element is correlated in the sense that they all contribute to the resume as a document, but can still remain relatively distinct.
Juanpadilla 17:22, 5 November 2008 (UTC)
The two chapters were very clear and concise on how to use simple techniques to get a much better design. It is true that most often headers and text are centered aligned. He called this a beginner mistake, which it very well may be, but I wonder how much people use center alignment because it is seen so often and is therefore viewed as the better way of doing things. I especially enjoyed the examples he gave as it made the things he was saying more concrete, thus proving his case.
MuQing Jing 17:38, 5 November 2008 (UTC)
I thought this was one of the more interesting reads, as it brings up an often forgotten aspect of design. Not only is good proximity and alignment necessary for aesthetic qualities, but it's also utilized to be able to better manage the working space of any game or design. This reminds me of how mind-numbingly atrocious our Powerpoint presentation was for my EPS185 group presentation; all 12 of my group members insisted that it's more effective to dump a bunch of text (from Wikipedia, no less) onto the slides in size 12 font, squeezing as much as they could onto each slide in red font on black background (no joke, I am dead serious). Maybe if they had read these 2 articles, they would have realized that they were committing the cardinal sin of presentation design.
In any case, it seems like there is definitely a sweet spot for how close or far objects should be; the articles address this by explaining how different purposes/uses of the design result in different guidelines for proximity.
Cynthia T. Hsu 17:43, 5 November 2008 (UTC)
The reading today was very interesting. Most of it I already know from working on magazine layouts for one of the student publication groups on campus, but I'd never thought of it in the terms of user interface and was surprised about how much it related.
Proximity makes sense - it fits in with the idea of "Conceptual Models" that we've been emphasizing a lot over the course of the past five weeks, as interconnected items spaced close together fits in with people's ideas that they are discrete ideas. In the "First Friday Club" example on page 8 of the PDF, the reading again emphasizes the spatial relatioship, but fails to remind us of something else that was discussed earlier in class - consistency in font type helps to highlight what is a title and what is not (although it is a little weird that the IV and V are in bold in the second and third blocks but not in the first, and that the third block lacks a number - a closer glance reveals taht this is because there are two showings of Henry IV, but it is a bit confusing nonetheless). I disagreed with their critique of the "Want to be an understander?" poster; I found that the white space was used very ffectively for emphasis, forcing me to pause in my head between the leading questions (similar to the dialogic system we talked about in class).
In the Chapter 3, reading - I'm not sure why they feel that a left aligned title is better and more distinguished; on an empty page, it looks sloppy and unbalanced to me. Perhaps a left aligned author and a right aligned heading? In general, I seemed to disagree much more with the ideas brought up in chapter 3, although this may be because most of my layout experience comes from a magazine format, in which we are forced to adhere to certain principles. I can see where it would relate to UI design, although because the book is written generally it is hard to keep that in mind. In articular, the reading suggests avoiding more than one text alignment on a page, but I've found that there are some rare occasions where this creates a unique effect of discretizing two ideas or regions of a page - a very trivial example is the fact that the heading in an uer right corner always has right alignment, while the body of the text and the left hand title always has left alignment.
nathanyan 17:46, 5 November 2008 (UTC) ==
I've worked with designing layouts for print publications before, so I'm used to planning for proximity and alignment, but I think the readings do a fantastic job of spelling out clearly why it's important/how much of a difference it can make, and how to do it. I found the example with the business card to be most enlightening: the card looks a lot better when the elements are clearly seperated with different type faces, and sizes, contrasted to the original design which had all the elements in all caps and a similar font for everything, making it difficult to discern the context of each piece of information.
Yuta Morimoto 18:11, 5 November 2008 (UTC)
I think Proximity is the effect of grouping and prioritizing. Readings tell me how to group information into categories. As we know, most of knowledge can be categorized: grouping. After grouping, I can make them prioritized in a order: prioritizing. The order is arbitrary, but it should be originated from relationships of information. The order and grouping facilitate us to rapidly understand information. It will be useful for our project. I would like to introduce the technique of reading to our project.
Kevin Lam 18:17, 5 November 2008 (UTC)
The use of proximity and alignment at first appears trivial, but as evidenced in this article there are a lot of subtle nuances that come into play. Perhaps one reason these things seem trivial is that we have become accustomed to good game design or merely take it for granted. A lot of work and thought goes into the way buttons and text are grouped on a screen, but when it's done correctly it just appears natural to the user. When something stands out or doesn't seem "right," it may be because of poor user interface design or it's something that was done intentionally to draw attention to the outstanding element (i.e. the Recycle Bin on your desktop).
Paul Im 18:19, 5 November 2008 (UTC)
Both the proximity and alignment articles offered very practical advice regarding the layouts of documents and templates. For example, it makes sense to group things together when they’re related. It is also helpful to use the principle of proximity to chunk different items together (if there are more than 5) in order to present information more clearly. Alignment seemed somewhat related to proximity in that we should organize our information to make it look cleaner. However, alignment specifically means unifying or connecting relevant information together (but again, similar information should not be too far from each other).
This was good information that is applicable to interfaces with a lot of text. In terms of serious games, however, there doesn’t seem to be too much direct relevance (in terms of text), except for when instructional text appears on the screen. There may be some correspondence in chunking together similar functionalities in a game. In a fighting simulation for example, the attack, defend, and parry buttons would not be found on opposite corners of the screen. They would be in close proximity to one another. Also, the statistical information for the character would be aligned across the bottom of the screen. These seem to be a couple ways that we can relate proximity/alignment to games.
Bing Wang 18:23, 5 November 2008 (UTC)
Both chapters talk about the placement and alignment of items that might seem appealing to a user. I think the idea is quite important in UI design. Chapter 2 emphasizes the idea of proximity where we should place items that are closely related next to each other. I believe that placing things closely to each other that are related can solve many problems in terms of frustration. However, there is one problem that does arise with this issue. How do you determine the "proximity" or the relationship of the items in order to make the placement. One person might think that two set of things are closely related while someone else might think it's another two that are more related. Most of the time, it seems it's intuition that will find you the answer about the relationships but I think if we go across a culture, it might be completely different. This I guess is when ethnographic and usability studies come into play. The second article is quite similar. It talks about alignment which essentially is another concept of how to place things. Items should be aligned close to each other to prevent confusion.
I think game play is a good application. With so many interactions going on in the game. The graphic and experience might just change how users like the game. With so many interactions available in a game, the designer also has to take into account of much much more factors than just a regular program in terms of placement etc.
Jonathan Fong 18:33, 5 November 2008 (UTC)
As others have already commented, this has been one of the more exciting readings of the semester. For me, studying entire topic of graphic design was an eye-opener that the formatting of information/content was as important (if not more important) than the information itself. Through the use of alignment and placement, one's argument can be made more compelling, or be subconsciously (or not!) discounted by the reader/viewer. Another topic in this area that might be worthwhile to some time on is typography.
Antony Setiawan 18:42, 5 November 2008 (UTC)
William brought an interesting example in the chapter "Proximity". The namecard example clearly shows how grouping some elements together would make information more organized in some sense. I believe that proximity is one of the most important issue UI designers has been dealing with for decades. Some interface with the same information can better the other simply because of the placement.
James Yeh 08:28, 6 November 2008 (UTC)
As someone who works on the layout for a campus newsmagazine, the concepts of proximity and alignment were familiar to me. In particular, I understand the importance of aligning the text, graphics, and title(s) of an article and the difference it can make to the tone of and aesthetic simplicity of the article. However, I have to agree that it can be hard for a beginner to pick up an article and create an attractive design on his or her first try. While some alignment techniques are obvious and intuitive (i.e. keeping graphics and headings in line with the text), other techniques are more obscure; for example, creating shapes with center-aligned text is something that could have an interesting effect if done well. The information presented in the proximity chapter could be categorized in a similar way—while most of the rules and techniques seemed like common sense, the more daring design principles stood out and caught my attention. I think these design suggestions concerning proximity and alignment could definitely be applied to our development of serious games, since most of our games have multiple interface screens.
