The first half of the book is devoted to some basic design principles, which fall into the acronym C.R.A.P.: contrast, repetition, alignment, and proximity. Her hope is that once her readers learn these rules, we'll see them wherever we look, and so far it would seem that she is correct - I have seen her various rules in action since I put the book down.
Contrast is actually a tricky one to show - not because the rule is hard to visualize, but because it seems entirely under-utilized in current site design. I freely admit to being somewhat blind to the more subtle nuances of typefaces, but as Ms. Williams says, if you're going for contrast, go all the way. As such, the best example I can find is Project Wonderful, an advertising company that is gaining popularity in the webcomic community. Though they are not entirely consistent in applying this, their use of red text to draw the reader's eye to the subheaders is very effective, and contrasts nicely with the black headlines and the blue link text.
Alignment is perhaps the most easy to see, and is the first that really leapt out at me. Logging in to Blogger to make this post, I noted that the dashboard page is excellently organized, due in no small part to the strong left flush.
Repetition is also easy to see, and I can't think of a better example than everybody's current favorite site to hate, Facebook. In profile displays (and in the aggregate display of your friends' updates) repetition is a key factor to understanding the information presented - once you're used to the site, your mind sorts the data by icon, by the appearance of the update, by the number of links in it and where they're positioned, all in a matter of seconds.
The best example I can find for proximity is actually something so basic, most of us see it a hundred times a day - a Google search results page. Notice how each result sits by itself: title, then summary, then URL and extraneous data, then white space separating it from the next link. In a situation where only a few links are presented before another search term is suggested, a thin rule separates the sections, and then the data starts all over again - instantly accessible and organized.
Reading these rules, and seeing them in action, has given me some useful thoughts on the design of my class website, which I look forward to working with.
The examples you found were great for the rules you were pointing out, but I couldn't help but notice that they may not have covered all four of the principles at the same time. The google example may do a nice job with proximity (and alignment), but the contrast is bland and the repetition is annoying (although I understand it's a search engine and I'm not sure how they would present all of their information without just listing it). But I think you get what I'm saying.
ReplyDeleteDo we read Facebook or do we see Facebook or do we parse Facebook? It's kind of a dumb question, but what I am trying to signal, in the context of "writing in a digital age," is a change in audience engagement with text.
ReplyDeleteI also wonder--are we newly aware of the role of our eyes, in ways we weren't when we spent most of our time looking at lines of black type on a white page?
Two comments via email, because of that cookie issue:
ReplyDeleteJessica (2/12):
Hi Patrick!
I really enjoyed reading your post. I definitely agree with your point that now after reading the book it's hard not to notice Williams' rules in action. I also really liked the example that you chose to illustrate contrast. The web site does seem to make a conscious effort to use contrasting font colors to grab their viewers' attention. One question I have for you is now that you have finished the reading, is there anything you wish to change about your web page?
Jessica =)
Celena (2/12)
I like the examples you gave, especially since you mentioned Facebook which someone just described as not have a focal point. It think Facebook is a newsfeed spitting out random text, but you noticed that it captures the unifying point which is the icon (someone's picture) that allows your eye to track down the page and only see "Jeff" and exclude the others.
You mention the use of color as a grouping tool. The subheading are all in red which sets it off from the rest of the text, so your eye hits the biggest font (in blue) then your eye travels to the red items. It's easy to SCAN the words. I would have to say this is digital and not a paper format - since I think it's scanning not reading. Times up.
Some responses, a few weeks late:
ReplyDeleteRachel - I do indeed see what you mean, and I actually found it interesting that none of the sites I use regularly (including some fairly popular ones, like Google and Facebook as noted above) use all four rules. I'm not sure if that's commentary on a prevalent lack of design, or just commentary on the rules themselves. (Probably both.)
Dr. S - I think we parse Facebook. It's the best word to describe the way we're handling all that data - some of it we discard, some of it we take note of for later, some of it we stop and absorb more fully. At any time we can click through for more detail, or click off the page we're on to another part of the site, or even throw the links up in new tabs to be investigated later - it's not just reading, but it's more in depth than is conveyed with just "seeing".
Jessica - Most of it, I'm afraid. When I threw up the 'starter' page, I was just trying to show the general shape I intended to take later. It's not so much a building block as a preliminary model - I'm starting it over from scratch to get the final product.
Celena - I agree that we tend to scan online, but that's not necessarily a bad thing, or at least not like it used to be. Web sites are adapting for scanners - look at Digg, which just throws headline after headline at you, with a few details if the headline actually catches your eye, and then if that adds up to something you want to spend time looking at, you can click through. It's a useful system for absorbing large quantities of data, which is a practice we (i.e. human beings) are taking up more and more.