WEBVTT 00:00:01.583 --> 00:00:04.109 In this video we’re going to talk about designing with grids 00:00:04.109 --> 00:00:09.683 and using grouping and alignment to convey structure. 00:00:09.683 --> 00:00:15.195 Here’s an example of a grid: This comes from Java Look and Feel Design Guidelines, 00:00:15.195 --> 00:00:19.086 and it’s annotated by Sun and it’s [a] web resource. 00:00:19.086 --> 00:00:22.404 This is a Find dialog box, and what you can see is that 00:00:22.404 --> 00:00:28.172 all of the elements in the dialog box have been arranged using a grid. 00:00:28.172 --> 00:00:31.388 And what we mean by a grid is that there’s a set of invisible lines 00:00:31.388 --> 00:00:34.212 that all of the elements on the screen snap to. 00:00:34.212 --> 00:00:38.390 So you can that the top of the dialog box is the Find and then the search area, 00:00:38.390 --> 00:00:41.389 and then below that are all of the parameters, 00:00:41.389 --> 00:00:45.971 and below that still are the Find and Close buttons. 00:00:45.971 --> 00:00:49.593 You’ll notice that the left edge of the parameters lines up with the left edge of the search box, 00:00:49.593 --> 00:00:54.105 and the right edge of the buttons lines up with the right edge of the search box. 00:00:54.105 --> 00:00:57.784 You’ll also notice that the Find, which is the title of the dialog box, 00:00:57.784 --> 00:01:03.443 is hanging off to the left, so that it’s easy to identify the title. 00:01:03.443 --> 00:01:06.337 You can see that the most important information is near the top, 00:01:06.337 --> 00:01:08.814 and how things that are conceptually more related — 00:01:08.814 --> 00:01:15.401 like the parameters that parametrizes the search system — are closer to each other than the buttons — 00:01:15.401 --> 00:01:22.567 still part of the same dialog box but a little further apart — and so they get more space. 00:01:22.567 --> 00:01:25.711 It was at the Bauhaus in Germany in the 1920’s 00:01:25.711 --> 00:01:33.566 that the strategies for designing with grids really came into their own. 00:01:33.566 --> 00:01:36.522 The Bauhaus, at the time, was a revolutionary design school, 00:01:36.522 --> 00:01:41.500 and their graphic designer, Jan Tschichold, wrote this book, called « The New Typography » 00:01:41.500 --> 00:01:46.458 to outlay his vision for modern graphic design. 00:01:46.458 --> 00:01:50.580 It espouses asymmetric typography, sans serif typefaces, 00:01:50.580 --> 00:01:54.916 and a lot of other things that we’ve come to think of as Modernism. 00:01:54.916 --> 00:01:57.665 One thing that’s notable about Tschichold’s book on typography 00:01:57.665 --> 00:01:59.740 is that it reads like a political manifesto: 00:01:59.740 --> 00:02:04.669 He really had this belief that he was changing what design meant for the world, 00:02:04.669 --> 00:02:09.681 stripping it of all of its excess and distilling it down to its bare elements. 00:02:09.681 --> 00:02:13.498 You may or may not elect to follow its principles; 00:02:13.498 --> 00:02:19.577 some of these ideas now seem a little bit reductive, or overly didactic, or too moralizing; 00:02:19.577 --> 00:02:22.788 but there’s a lot in here that’s tremendously useful. 00:02:22.788 --> 00:02:29.477 And this picture is me at the Bauhaus a couple of summers ago. 00:02:29.477 --> 00:02:33.983 So there’s a number of parts that compose a grid system. The main one is a set of columns — 00:02:33.983 --> 00:02:37.434 in this case they’re of equal width, but they don’t necessarily need to be. 00:02:37.434 --> 00:02:43.674 And the second piece is a set of gutters, which is the whitespace in between the columns. 00:02:43.674 --> 00:02:50.111 In addition to that, things are generally horizontally aligned using a baseline. 00:02:50.111 --> 00:02:53.832 You can add text hierarchically — So here we see a title, and a subtitle, 00:02:53.832 --> 00:02:59.867 or maybe a byline or something like that. 00:02:59.867 --> 00:03:02.819 And there’s no need for the grids to all be of equal width. 00:03:02.819 --> 00:03:08.603 So here’s a mockup, for example, of a narrow left-hand column that you might use for navigation, 00:03:08.603 --> 00:03:19.051 and then a wide central column that may have the body article or main content of a page. 00:03:19.051 --> 00:03:24.644 Grids are used widely in newspapers, in books, and on the web. 00:03:24.644 --> 00:03:30.860 Here’s an example of Myspace, which the home page right now is a strongly-gridded design, 00:03:30.860 --> 00:03:37.335 and you can see a nice combination of pictures and text on its home page. 00:03:37.335 --> 00:03:42.621 Here you can see the Stanford homepage, and the invisible grid undergirds this whole structure. 00:03:43.452 --> 00:03:47.346 But that doesn’t mean that everything is one-column wide all the way down. 00:03:47.346 --> 00:03:53.132 One thing that I like about this page is that different elements punch across multiple columns. 00:03:53.132 --> 00:03:58.064 And you can also see how this five-column grid goes across almost the entire page: 00:03:58.064 --> 00:04:01.345 You can see how the navigation at the top has five columns; 00:04:01.345 --> 00:04:05.168 the Stanford logo is centred on the first two of those columns; 00:04:05.168 --> 00:04:11.744 and those five columns travel down throughout the major whitespace part of the page. 00:04:11.744 --> 00:04:15.857 The grid is broken somewhat at the bottom, with the footer. 00:04:19.011 --> 00:04:23.415 Here is the New York Times homepage where, again, you can see a five-column grid for the content, 00:04:23.415 --> 00:04:31.668 with a sixth column for navigation on the left-hand side. 00:04:31.668 --> 00:04:35.431 You can see how those five columns invisibly travel the entire page, 00:04:35.431 --> 00:04:39.006 and that some of the content in the middle, for example, is two columns wide, 00:04:39.006 --> 00:04:42.307 and which parts are two columns wide vary across the page, 00:04:42.307 --> 00:04:52.908 and so that makes it a little bit more dynamic, so it doesn’t feel too rote and too boring. 00:04:52.908 --> 00:04:57.646 Newspapers have benefitted from grid systems and really pushed the envelope on it for a long time 00:04:57.646 --> 00:05:02.811 so [we] saw a couple of the New York Times to give you a sense of the different ways that they use grids. 00:05:02.811 --> 00:05:08.886 Here’s an example that combines both text and pictures. 00:05:08.901 --> 00:05:15.785 Here you can see a “focus plus context” view, where the most recent article at the top is biggest, 00:05:15.785 --> 00:05:20.789 and the lower articles down are smaller. 00:05:20.789 --> 00:05:25.405 Here’s an example of a grid on the New York Times homepage that’s far below the fold, 00:05:25.405 --> 00:05:28.537 showing sections and then articles within each section, 00:05:28.537 --> 00:05:33.757 with a small thumbnail picture for each of the sections. 00:05:33.757 --> 00:05:36.489 A grid doesn’t have to be non-overlapping: 00:05:36.489 --> 00:05:42.263 You can have different rows of content on a page adhere to different grids — 00:05:42.263 --> 00:05:44.750 often they’ll have some relationship to each other. 00:05:44.750 --> 00:05:48.853 So I made a quick mockup here, where we have six elements in two rows, 00:05:48.853 --> 00:05:54.855 and the grid is staggered. 00:05:54.855 --> 00:05:56.835 When you’ve content that comes in multiple pieces — 00:05:56.835 --> 00:05:59.542 for example titles of classes and course numbers — 00:05:59.542 --> 00:06:04.297 how should you organize them so that they work well together and are easy to read? 00:06:04.297 --> 00:06:08.773 I’m surprised by how frequently books will take some content like this 00:06:08.773 --> 00:06:14.328 and put these dots — or somehow they’ll separate the two pieces. 00:06:14.328 --> 00:06:19.347 It’s obviously not impossible to read, but I think we can do better. 00:06:19.347 --> 00:06:24.190 Here’s an example where we have right-aligned the smaller element — 00:06:24.190 --> 00:06:29.408 which could be page numbers, or course numbers, or date, or something like that — 00:06:29.408 --> 00:06:36.376 and then we’ve left-aligned the larger element — which is the title or some other larger piece of text. 00:06:36.376 --> 00:06:40.130 The other thing that we’ve done here is we’ve changed the weight of the typeface 00:06:40.130 --> 00:06:44.478 so that the number is a different weight from the text. 00:06:44.478 --> 00:06:50.182 Now, which one is heavy and which one is light? It depends on which one you want to emphasize. 00:06:50.182 --> 00:06:54.655 Here, the course name is probably more important — that’s what you’re going to scan first — 00:06:54.655 --> 00:06:57.638 and then when you want to sign up, you may need to find the course number, 00:06:57.638 --> 00:07:02.916 and so that’s a lighter weight because that’s what you’ll use second. 00:07:02.916 --> 00:07:06.257 If you have three pieces of text — for example if you add an instructor name —, 00:07:06.257 --> 00:07:08.879 you can offset that typographically. 00:07:08.879 --> 00:07:12.416 Here’s just an example of adding it over to the right. 00:07:12.416 --> 00:07:15.528 Adding a third column can make things a little bit confusing; 00:07:15.528 --> 00:07:20.229 [but] depending on your content, that can work too. 00:07:20.229 --> 00:07:23.395 Another strategy, of course, is you could put that third element on a separate line. 00:07:23.395 --> 00:07:27.507 Here we see the instructors listed below the course number. 00:07:27.507 --> 00:07:31.267 And if you’re going to do this, have the stuff that chunks together be closer together, 00:07:31.267 --> 00:07:33.642 and the separate chunks be further apart. 00:07:33.642 --> 00:07:36.583 So, what we’re looking at right now is that the leading — 00:07:36.583 --> 00:07:39.561 the inter-line spacing between every line — is identical, 00:07:39.561 --> 00:07:46.852 and that’s sub-optimal, because that’s less clear which element the instructor name goes with. 00:07:46.852 --> 00:07:49.378 If we add a little bit of space in between our elements, 00:07:49.378 --> 00:07:53.765 it becomes clear which instructor groups with which course. 00:07:53.765 --> 00:07:59.764 You can also see a tradeoff here, where, by having two lines per course, it reads very clearly, 00:07:59.764 --> 00:08:05.382 but we’re using up more vertical space — maybe less horizontal space. 00:08:05.382 --> 00:08:08.971 Depending on which screen space or print space you’re laying out into, 00:08:08.971 --> 00:08:13.446 that will change your design decisions. 00:08:13.446 --> 00:08:16.591 Another thing that we might do if we really want to de-emphasize course numbers 00:08:16.591 --> 00:08:29.677 is scale back the grey value of that number, to make them recede further. 00:08:29.677 --> 00:08:32.863 One quick tip is: when you’re creating systems like this, 00:08:32.863 --> 00:08:36.421 make sure to work with the longest block of text first. 00:08:36.421 --> 00:08:38.562 It can be easy to design for a short title 00:08:38.562 --> 00:08:43.330 and then have a grid or alignment system that breaks down when you get to something longer. 00:08:43.330 --> 00:08:47.115 This is especially true if you’re designing for multiple different languages. 00:08:47.115 --> 00:08:51.069 For example, German text often consumes a lot more real estate 00:08:51.069 --> 00:09:01.379 than English or Spanish or French text does. 00:09:01.379 --> 00:09:03.748 We’re going to see examples of different alignment styles 00:09:03.748 --> 00:09:07.287 and when they work in different circumstances in this lecture. 00:09:07.287 --> 00:09:12.519 In general, a high-order rule of thumb is that for left-to-right–reading languages, 00:09:12.519 --> 00:09:18.063 left-aligned text is the fastest for skimming. 00:09:18.063 --> 00:09:22.106 And you can see that here: I’m taken the same content and centred it, 00:09:22.106 --> 00:09:25.397 and I’ve left all the tabs in, so that’s why you get the crazy ragging. 00:09:25.397 --> 00:09:29.832 It looks kind of cool, actually, and if you’re going for dynamism, this might work pretty well. 00:09:29.832 --> 00:09:32.552 However, if you wanted to be able to quickly scan things, 00:09:32.552 --> 00:09:39.971 this will be a little bit slower than if everything is aligned. 00:09:39.971 --> 00:09:47.986 Here’s an example of one common design strategy, where “everything is centred.” 00:09:47.986 --> 00:09:52.949 And you can, of course, get the information off of this page [when] you need to; 00:09:52.949 --> 00:09:56.673 but the centring makes it hard to scan for the things that you need. 00:09:56.673 --> 00:09:58.951 Also, there’s a lot of chart junk on this page — 00:09:58.951 --> 00:10:04.270 so the boxes around the overview and the publications are pretty unnecessary 00:10:04.270 --> 00:10:08.207 and makes it slower for your eye to get to the things that you need to. 00:10:08.207 --> 00:10:12.150 If this page were designed using a grid, and the chart junk eliminated, 00:10:12.150 --> 00:10:19.531 then the content itself would move to the fore more strongly. 00:10:19.531 --> 00:10:25.423 So, to sum up, using alignment well helps guide your eye and reduce clutter. 00:10:25.423 --> 00:10:31.462 Avoid slight misalignments, because they undermine your ability to beacon the organization. 00:10:31.462 --> 00:10:36.192 We automatically notice patterns and also deviations from them, 00:10:36.192 --> 00:10:40.390 and so use patterns when you want to convey consistency, 00:10:40.390 --> 00:10:46.929 and deviate from them only when you intentionally want to distinguish that content. 00:10:46.929 --> 00:10:50.230 If your deviation from the pattern is accidental or laziness, 00:10:50.230 --> 00:10:57.688 it will leap out to the eye and distract from the message that you’re trying to get across. 00:10:57.688 --> 00:11:02.885 And you use visual proximity — keeping chunks close together and self-contained, 00:11:02.885 --> 00:11:07.814 and separating chunks further apart — to distinguish what the elements are. 00:11:07.814 --> 00:11:11.625 And you can use scale and hierarchy — making the important things bigger 00:11:11.625 --> 00:11:15.936 and the less important things smaller or scaled back in colour — 00:11:15.936 --> 00:11:28.537 as a way of emphasizing what the more and less important parts of the page are. 00:11:28.537 --> 00:11:33.521 So, when are some examples of when you might use different alignments for different purposes? 00:11:33.521 --> 00:11:38.330 We have a nice example on Amazon’s web site. 00:11:38.330 --> 00:11:43.024 Amazon actually has different parts of their site that they use different kinds of alignment for. 00:11:43.024 --> 00:11:47.195 And you can see the first example here, where in the “Add an address” dialog box, 00:11:47.195 --> 00:11:54.208 the form is aligned so that all of the labels are right-aligned and that the entry fields are left-aligned to that, 00:11:54.208 --> 00:12:01.429 so you get this clear gutter, like what we saw in our courses and titles example. 00:12:01.429 --> 00:12:07.375 This makes what you need to fill out extremely clear. 00:12:07.375 --> 00:12:11.253 Here, on the Account page, you can see all of the labels are left-aligned. 00:12:11.253 --> 00:12:14.332 This page also offers a nice exampleof visual hierarcy, 00:12:14.332 --> 00:12:17.708 where the key piece of the label is very large, 00:12:17.708 --> 00:12:22.354 and the sub-header — which explains in a little more detail — is much smaller 00:12:22.354 --> 00:12:26.371 and is also scaled back in grey value. 00:12:26.371 --> 00:12:31.084 And finally, on the right-hand side of this very same page, we can see an example of top alignment, 00:12:31.084 --> 00:12:36.599 where the headers for the form are above the form cell. 00:12:41.614 --> 00:12:45.870 And this diversity is not because three different Amazon designers made three different parts 00:12:45.870 --> 00:12:49.207 and they never coordinated — or at least I assumed that’s not the case. 00:12:49.207 --> 00:12:55.534 My hunch is that Amazon decided strategically what the most important part of each element was, 00:12:55.534 --> 00:12:59.844 and how to make clear to the viewer what they should pay attention to: 00:12:59.844 --> 00:13:01.512 For things that we’re familiar with, 00:13:01.512 --> 00:13:05.278 the headers may be less important than for things that we’re unfamiliar with. 00:13:05.278 --> 00:13:11.248 So, for sign-in, the headers need to stick out less, whereas for the aspects for our account, 00:13:11.248 --> 00:13:18.108 which we may go to less frequently as a page element, we need to have that stick out more. 00:13:18.108 --> 00:13:21.692 In this introductory course, we won’t have a chance to talk much about colour, 00:13:21.692 --> 00:13:24.626 but I’d want to say a little bit here. 00:13:24.626 --> 00:13:30.068 The first and most important thing to say about colour is: Pay attention to it! 00:13:30.068 --> 00:13:36.399 And if I can give you one strategy for using colour effectively, it’s to design in greyscale first. 00:13:36.399 --> 00:13:41.513 Often people rely on colour as a crutch for making visual distinctions in designs, 00:13:41.513 --> 00:13:47.956 and, really, you’ll want to use the other tools first: 00:13:47.956 --> 00:13:56.063 Start up by working with scale and layout as ways of distinguishing elements on the page. 00:13:56.063 --> 00:13:59.429 Then, once you’ve used scale and layout as much as you can, 00:13:59.429 --> 00:14:03.864 you can use luminence as a way of indicating what’s more and less imortant — 00:14:03.864 --> 00:14:07.637 luminence is just a fancy word for grey value, so if you’re designing in greyscale, 00:14:07.637 --> 00:14:14.484 that means some stuff is black, some stuff is grey, some stuff is white. 00:14:14.484 --> 00:14:19.094 And once you’ve got the best design that you can in greyscale — in black and white —, 00:14:19.094 --> 00:14:26.615 then add colour as a way of giving it an additional redundant coding for salience. 00:14:26.615 --> 00:14:31.615 To use Amazon as an example again, here’s one of their search results pages in greyscale. 00:14:31.615 --> 00:14:33.757 And you can see that all of the information that you need 00:14:33.757 --> 00:14:36.578 is clearly set up in terms of the visual order of the page — 00:14:36.578 --> 00:14:43.413 what elements are larger, what elements are smaller. 00:14:43.413 --> 00:14:49.813 So the whole thing works in greyscale — in black-and-white —, but if you add colour, it gets even better. 00:14:49.813 --> 00:14:53.205 And that, I think, is the most effective way to use colour. 00:14:53.205 --> 00:14:59.902 The other thing to say about colour that I think is useful is: By and large, don’t overdo it! 00:14:59.902 --> 00:15:07.163 All things equal, fewer colours is generally more powerful and less overwhelming than more. 00:15:07.163 --> 00:15:08.851 This is obviously going to depend on your taste, 00:15:08.851 --> 00:15:13.575 and this is obviously going to depend on what you’re trying to convey. 00:15:13.575 --> 00:15:16.282 Again from the Java Look and Feel Guidelines, 00:15:16.282 --> 00:15:21.766 here’s an example of how this version of Java used six colours — 00:15:21.766 --> 00:15:24.334 three shades of grey, three shades of purple — 00:15:24.334 --> 00:15:31.112 as a way of organizing all of the elements in their widget library. 00:15:31.112 --> 00:15:37.466 One way that they used colour is that anything that you could click on was some shade of purple, 00:15:37.466 --> 00:15:41.510 and anything that you couldn’t click on was some shade of grey. 00:15:41.510 --> 00:15:44.472 And that provides a nice organizing characteristic, 00:15:44.472 --> 00:15:49.060 and gives a sense to the user of what they can do when they see a particular screen. 00:15:49.060 --> 00:15:53.518 And because colour is used so consistently — colour means clickable — 00:15:53.518 --> 00:15:58.963 it’s really easy to learn, even if subconsciously. 00:15:58.963 --> 00:16:04.572 And I’d like to close with this example of a book. Here’s the first page of Umberto Eco’s book, 00:16:04.572 --> 00:16:08.724 « The Island of the Day Before », and it’s a beautifully typeset book. 00:16:08.724 --> 00:16:11.220 I’d like to point out a couple of things about this book. 00:16:11.220 --> 00:16:16.012 For starters, there’s a quotation from a diary that’s at the beginning of the page 00:16:16.012 --> 00:16:20.253 that’s set off in italic to show that it’s different. 00:16:20.253 --> 00:16:25.917 Then, each chapter begins with a couple of words of text in small caps, 00:16:25.917 --> 00:16:30.106 and there’s a good amount of space above that line of text. 00:16:30.106 --> 00:16:34.386 And finally, there’s a lot of whitespace around the text in general, 00:16:34.386 --> 00:16:38.711 and providing whitespace is important. 00:16:38.711 --> 00:16:43.100 Books and texts that have a little bit of room around them are easier to read 00:16:43.100 --> 00:16:46.092 than ones that are jam-packed out to the edges of the margins. 00:16:46.092 --> 00:16:51.738 That’s one reason why you’ll see hard covers have more whitespace than cheaper paperbacks. 00:16:51.738 --> 00:16:55.645 In the paperback case, they’re trying to save pulp to make it a lower price; 00:16:55.645 --> 00:16:59.886 but the hard covers, which they can charge a little more for, offer more room 00:16:59.886 --> 00:17:05.339 and are easier on the eyes to read. 00:17:05.339 --> 00:17:07.667 If you’re interested in learning more about grids and alignment, 00:17:07.667 --> 00:17:11.031 there’s a lot of great books out there; [but] there’s a couple that I recommend: 00:17:11.046 --> 00:17:16.496 One is Jan Tschichold’s classic, « The New Typography ». 00:17:16.496 --> 00:17:21.884 Another is Kevin Mullet and Darrel Sano’s « Designing Visual Interfaces ». 00:17:21.884 --> 00:17:26.245 And a third is Luke Wroblewski’s « Web Form Design »; 00:17:26.245 --> 00:17:34.845 this is one of the Rosenfeld books, and this whole series is excellent in terms of its HCI.