After reading Smashing Magazine's article on "Lessons From Swiss Style Graphic Design" I started thinking about the principles they presented and how I incorporate them in my own work. I have always been a subscriber to the “less-is-more” state of mind when it comes to my work; however it is really easy to get bogged-down when trying to design user friendly interfaces for data-intensive applications. Here is what I took away from this article, and my ideas for incorporating their bullet-points into data driven applications.
Uniformity and Geometry
This is probably the easiest principle to incorporate when it comes to information listing screens. The pure nature of exporting data from a database into a listing is uniform into itself. The code is taking the data and producing exact facsimiles from your determined template. The trickier part is the geometry, and determining a grid that doesn’t look so grid-like. The information has to flow between rows while remaining separated enough as to be distinguished between datasets. There is no clear method for doing this, which leads me to their next point, whitespace.
Whitespace
Whitespace can be used to visually separate datasets, but this can also presumably be a problem in itself. I have encountered that most users do not like to scroll. I have one thing to say about that; in the words of @standardpixel "Death to the fold!". It's almost impossible to now find a mouse without a scroll wheel. If your mouse does not have one, do yourself a favor and drop $10 on a mouse that does (you'll thank me later). Or you can get a MacBook with the awesome 2 finger scrolling touch-pad, they're great!
This can be a challenging obstacle, because we are often obligated to cram as much data into as few of pixels as possible. This is not Swiss Style design. You have to let your text breathe, thus letting your eyes breathe. Let me show you a quick example. Which is more comfortable to look at?
Grids
It is very obvious how grids fit into the equation in web design in general. For many years designers were constrained to using tables for layouts, which lead to very heavy-handed grid designs. Now with CSS, we are free to place objects wherever we deem fit. However, it is a very universal and practical approach to continue using grids. People understand grids. It makes it easier for the users to quickly scan the information without the distraction of a confusing layout with elements placed in arbitrary positions.
Grids work great for layouts, but they are absolutely vital for organizing and displaying data. We output data into tables, each row representing a record that the user can then view/edit/delete. This is so much off a standard that I don't believe that it will ever become an obsolete method. We have to take Swiss Style design into consideration when designing these grids.
I often see rows crammed together with the idea of trying to fit the most amount of data into the smallest amount of space. I understand why this is done (to utilize available screen real estate and see a lot of records at one time), but I don't agree. Whitespace separating the rows will prove to be much more effective in quickly scanning the data in order to find what you are looking for. Which is easier to scan.
I actually started to go cross-eyed while making that first graphic. As you can see, there is less immediate information in the second graphic, but I feel that it's easier to find the information that you're looking for.
Minimalism
I too am over guilty of ignoring minimalism. I often try to put as much information as possible onto a page in order to save the user a click. Minimalism and Elementary are the ideas that you should only display information that is absolutely vital, and removing that which is unnecessary.
For example, when displaying a list of products I will often put:
- an image of the product
- product name
- price
- sale price
- short description
Are all of these fields necessary? I don’t know. I often leave that to the client to decide. Displaying 2 prices is a marketing tactic, short description is used to entice, and so-forth. However, if the user/customer is looking for a particular product, aren’t they going to click on the product to view the details and make sure it is indeed what they are looking for? So, why not just leave most of the details on the detail page? It’s a tough call. I have to think more about what is standard and whether or not I can negotiate these standards with something that is a little more minimal.
Fonts – Size and Face
I don’t want to get too deep into this, because I can go on forever. The other day I had a discussion about fonts with a friend of mine who is working on a degree in print design. If you didn’t know, web design is completely different from print design. With print, you can basically do whatever you feel like. Don’t get me wrong, there are rules that you have to know before you can break them, but I still laugh when I see a print designer design a web interface with the logo at the bottom (actually could be done if done correctly, but I think I’ve only seen it done correctly once or twice). Print designers can use whatever font they want, where web designers are limited to web-safe fonts.
We both agreed that Comic Sans and Papyrus are terrible, but I was surprised that we both agreed that sans-serif fonts are the way to go. I’m completely new-school when it comes to font selection. I always use sans-serif fonts, and when I do use a serif font I use Georgia (usually only for headings). I believe that most serif fonts are distracting and hard to scan (I told you that I subscribe to the idea of Swiss Style Design), and should be left to designers who work with high-impact printing. It’s okay to use them for decorative purposes, but never for content.
Font size should be used to distinguish between importance of information. Headers should be larger than body copy. It just makes sense. Look at any newspaper and you will see that the headlines are much larger than the body copy. This is a convention that has been in place for so many years that people almost naturally understand the convention without being told, so why do designers make their headers the same size as the body copy? I really don’t know, maybe to make the page look uniform?
I’m not going to get into photography because it’s not extremely prevalent in the sort of data-driven systems that I usually design for, but I would recommend reading the article on Smashing.
Thanks for reading.