Constructive Design Solutions

Typography part 2 – The cursive question

2010-07-22T00:45:47Z

: Image Credit: mag3737

Something that is often overlooked is the choice of fonts used for text. Typography is a major subject in of itself, so I’m only going to touch lightly on it here.

In many ways, a web designer has an easier job, given the very limited fonts that would be available. Their choices are restricted to a few of the common fonts, and as such the choices are usually already made for them. However, in this series I look to lay out a few of the basic ground rules (and useful pieces of information) on Typography in design, whether it be for digital or print use.

Cursive

When it comes to fonts used in design, there is rarely a font family as misused as the cursive family. These fonts with the flourishes that hark to handwritten fonts have earned a special place in the hearts of the general public, and often a special hatred from designers the world over.

More often than not they are a poor choice for web design, not least of the reasons being that the cursive font which is usually the default in the highly likely event of the required font not being present on the user’s computer, is that much hated “comic sans”.

The instant effect of using comic sans in your web design is that you immediately look like your website was designed in the mid 90′s by a teenager. It does not look friendly, it does not look hip, and it most certainly does not make your site look like it has anything of the hand crafted look to it. It just looks bad.

When choosing a cursive font for anything, ask yourself if there’e a good reason to use one. If you can’t come up with at least two good reasons, drop it and use a sans-serif. Most importantly, cursive fonts are rarely interchangeable. Just because you can justify one cursive font with two good reasons does not mean that those same two reasons apply with the next one.

Typography part 1 – Choosing your font style

2010-07-21T09:06:09Z

: Photo Credit: thebudman84

Something that is often overlooked is the choice of fonts used for text. Typography is a major subject in of itself, so I’m only going to touch lightly on it here.

Serif and Sans-Serif

When we drill down to it, fonts come in two basic styles: Serif and Sans-Serif. The serif refers to the decorative flourishes such as the hooks found at the top and bottom of the lower case “i” in certain fonts. The usual example given is Times New Roman, as it is arguably the most common Serif font in use today. Sans-Serif fonts are quite logically, those without those extra decorative details. The most famous Sans-Serif fonts are notably Helvetica, and it’s varients.

Traditionally, Sans-Serif fonts have been favoured for digital applications, as the lack of “superfluous” detail has usually made them easier to read on computer monitors with limited resolutions. As resolutions increase, this has become less of an issue over time. In print applications, Serif fonts have held sway, as the thinking is that it makes printed text more readable, although Sans-Serif fonts are increasingly used for documents meant to be browsed/skimmed, although forward thinking design is only partially responsible for that as many documents are written by people with no heed to typography.

It should be noted that any designer who only considers Serif for print and/or Sans-Serif for digital applications isn’t worth their salt. There are many highly readable fonts in both families that can be used in both print and digital mediums. At some point you have to start considering the look and feel.

The psychology of colour

2010-07-20T10:51:47Z

: Photo Credit: tiny_packages

Ever since man has existed (and relied on woman to make him do the sensible things rather than spend all his free time playing on the xbox), red has signified danger.

Or so conventional wisdom would have you believe.

Colours have meanings that appeal to our subconscious minds in ways that are as personal and unique as our fingerprints: They all follow certain basic patterns, but have subtle variations which are never precisely replicated in anyone else.

For one person, the colour blue is soothing and calming. For another person it brings their mood down and creates a feeling of depression.

Red is a vibrant and noticeable colour. It is arousing. It signifies something to which attention must be paid. It is often danger, but it also signifies passion. If you are from a Chinese cultural background it is a lucky colour.

Always think about the associations that your colour choices bring with them, and consider the likely backgrounds of the target audience. If they are from a background which views pink as a negative within the context you will be presenting it within, make sure that you intend the pink item to signify something negative. If they view purple in a certain way, make sure that their ideas about the colour purple are not in conflict with the way you with them to perceive the purple item you are presenting.

Of course, it’s not just those colours in isolation which have messages; combinations of them also have an effect. Multiple shades of the same colour (or at least various shades of similar colours) have a soothing effect, and are pleasing to the eye. It’s often called a monochromatic colour scheme, and the lack of contrasts make for a peaceful effect. Be careful though, as it can often become visually boring. A few splashes of colour on an otherwise monochromatic colour scheme are often very effective at drawing the eye.

Complimentary colour schemes are based on the idea of taking two colours from the opposite side of the colour wheel and making use of the high contrast between the two. The warm and the cool colours acting as a self highlighting scheme. It’s why crimson red and lime green work so well together.

The triple colour scheme uses three colours equally spaced around a colour wheel. If you design something in primary colours you are automatically using a triple colour scheme as they are equally spaced around the wheel. This is one of the most common schemes used on the web because it is easy to create a harmonious scheme using this method.

Whatever you do, don’t be afraid to experiment with hybrid colour schemes. Take a colour that you do not know will work, and just try it. Most of the time it won’t, but once in a blue moon, your ten seconds of experimentation will lead you to an inspired choice. After some time, you’ll start to understand them better, and your wild picks will hit at a much higher rate.

Alternatively, you can let someone else provide you with colour combinations that work. It’s a highly recommended book that shows you combinations of colour that work. I haven’t had much use for it myself, but if you’re creating a high volume of products with differing colour combinations it can certainly make your life a lot easier as reference material.

Too much freakin’ text

2010-07-16T05:00:06Z

: Photo credit: MykReeve

Have you ever looked at a screen full of information and thought to yourself “gee, this needs to pack more information in there”?

If you have, then there’s a good chance you’re a crazy extremist republican, or crazy extremist democrat, or at least some crazed fringe member of the American Political spectrum. I can’t tell what the owners of that website are, because I couldn’t read enough of it to determine what exactly message they are trying to convey. If any.

If you have, then there’s a good chance that you shouldn’t be allowed to design anything that needs to convey any information. The list of things conveying information includes the manual for a VCR, documentation for AutoCAD, and emergency procedure handouts.

We are a visually biased species. We cope much more easily with pictures than we do text for instant recognition, and whilst our ability to convey information is thusly limited, we are at least able to do so when the user glances at an area.

If you were designing an alarm system which needed to inform someone off site (or at least, in a secured office on-site) of where the alarm has been triggered and the nature of that alarm, it would not do to show a list of alarms as text. Not when you have the option of a map with visual indicators. True, you may offer that information to the user, but the goal is to inform the user immediately of where their attention is needed, and what sort of response is likely to be needed. More information can be useful, but not at the expense of a fast resolution.

Give the user a map with clear visual indicators such as red lights, or if on a visual display unit (a computer monitor to you and I) then you can flash warning icons on an overlay. In fact, there are many ways of dealing with it, but don’t choose the text option. What would your user do if there are multiple alarms all over the place? They wouldn’t be able to read that list and know what was going on, but a glance at the map and where the alarms have been tripped would give them a very clear image of what is going on and where.

Working on a touch screen interface for the London Underground station management software, I was initially asked to label everything on the map by their Human Factors department. The top of the stairs were to be labelled as the top of the stairs. The bottom as the bottom. They wanted room numbers, platforms, directions of travel, the next station on the line. Everything.

I managed to get about half of those nixed, but it was a struggle with their human factors department who should have known better. They came at it like engineers rather than designers, and whilst in fairness to them they were thinking about how a user who didn’t know the station would perceive the interface, they just didn’t have the design experience to understand how people were likely to use things.

When the users they were concerned about actually used the interface, my recomendations were borne out; too much text cluttering the screen made it pointless.

When designing something visual, keep that text to a minimum. Don’t use too much freakin’ text.
Also, get people with design experience to be your HF people: Not engineers who don’t know anything about vis-comm.

Annoying your users

2010-07-14T20:41:04Z

: Photo credit: TrevinC

If you look at Facebook, you’ll see that in between Farmville, Mafia Wars, and the multitude of social gaming apps that emulated them like a second Tsunami following behind an aftershock, there is another trend which commits a crime even worse than adding to the noise part of the signal to noise equation that is the current face of Facebook/social gaming.

Yes. That’s right. I’m talking about those apps which require you to click on the “like” button before they allow you to actually use them.

You have no way of knowing exactly what you’re signing up to market to your friends list, until you’ve already marketed it. You’ve clicked the “like” button, your friends all know that you are a fan of this application. Even if it’s absolutely horrible and you hate it. Then you probably forget to remove it from your feed. Smart thinking right?

Well, no. Not if you actually want to ever be able to make money.

Your users do not appreciate being deceived. They tend not to like walking away from a transaction feeling like they were cheated, and they certainly don’t want to feel like they were party to something shady and dishonest. You may get a few thousand fans now, but just you try to leverage that into any sort of long term income. It has a very limited life span, and we’re already on the tail end of that working.

Right now we see the johnny come late to the parties, trying to do the ever clumsier “me too” versions. This trend will not last, and the money you can make from them won’t support a family in the developed world. It you have any design skills at all, you’re better off making an honest living than working these borderline scams with low capital returns.

Annoying your users has never been a good long term strategy. Why should it be any difference on the web?

Design as form, design as function.

2010-07-14T20:14:33Z

: Photo Credit: Cdammen

There is a strange ideal in many of our minds regarding form and function.

We can praise something that is perceived as form over function, but rarely praise function over form. In truth, really good design needs to be both form and function.

Nobody praises the design of the original generation of the Nintendo DS for it’s mastery of form: it was all function, from it’s chunky boring grey exteriour, to the ugly black buttons. It was obvious that this was an experiment released into the wilds with no real thought put into making it look the way it deserved to look. It was only once the system was a bonafide hit that Nintendo decided that it’s form would be redesigned to equal it’s function.

Subsequent iterations have been further proof of the mastery that Nintendo can bring to bear on industrial design when it so chooses to do so, beating even Apple in an area in which they are usually held up as the paragons of the field.

Given that the functionality is more or less the same the only real difference is that they’ve taken something that was all function, and given it form.

Sure, there are a few people who are quite fond of the pure function aesthetics of the original design, but those people (I count myself in their number) also recognise that no matter how one might appreciate it as an oddity, the looks of it’s descendants are far more fitting and appropriate, not to mention pleasing to the eye.

Good design should aim to be both form and function. Using graphic design as an example, the function is the content. The late Paul Rand said “(Design) is the Synthesis of form and content” which is why we must always design with the content in mind. You cannot design in a vacuum and assume that the content will work with whatever graphical frame that it’s squeezed into. To do so is not design: it’s squeezing random shapes out of clay and calling it pottery. It may be well be nice to look at on it’s own, but it fails to provide the functionality of the pot just as graphics designed in vacuum fail to provide form to the content.

Know your goals

Always set out what it is you are trying to achieve with any design. If a design is not functional, it doesn’t matter how pretty it looks. If it looks ugly, people will be turned off by it: It will not look like a serious product. Always be sure of the image you want to portray, and the message you are trying to convey. Always aim for a good end result.

It is more important to be good than it is to be original, because being original is best built on a solid foundation.

Style Guides (and why you should use them)

2010-07-13T13:37:31Z

: photo credit: tigger89

Style guides are the unsung heroes of design projects.

When you have more than one person working on a design, you will always find differences in opinion on the precise direction that a design should take. This is not the result of one designer being better than the others (although from time to time that may be a factor). It’s more a natural result of there being more than one way to achieve any given goal.

Style Guides are not just for writers.

Just as when writing for an established organisation you need to ensure that your content matches the tone and style of the rest of the editorial, you need to ensure that your designs will look unified with everyone else’s. You do not want it to look like it was put together by twenty different designers. Especially if it looks like they weren’t really talking to each other to make sure that everything looked like it was from a single source. To ensure that, you need to ensure everyone is on the same page when it comes to the rules of design. Don’t look at it as something that will cost you time to hammer out: Think of it as something that will save you a lot of time later since you can be working on getting to the end result rather than retroactively struggling to give work that is otherwise “done” a unified look and feel.

The format that they need to take depends largely on the designers working on the project as well as the sort of rapport they have with each other. It will often be a formal written style guide not too dissimilar from the Chicago Manual of Style or the Associated Press Stylebook. Sometimes it will look more like a mood board. More often than not it will start as one and incorporate elements of the other. Do not be fooled into thinking that everyone else on the project “gets” exactly what you mean and has the exact same picture in their mind.

If you don’t hammer everything out clearly from the start (and just as importantly keep an eye on compliance) you risk inelegant design, and why would you want that? In that scenario the people paying your salary might as well have gotten their software engineers to design the UX as there’s always a chance that they’d do it just as well for less expense.

At the very least you should take a look at The Web Style Guide. It will save you a lot of time and headaches.

Empty Spaces

2010-07-09T09:58:14Z

: Credit: Michigan State Historic Preservation Office

Content is king they say, and quite rightly so.

When did you ever think to yourself “this is a great looking website! There’s nothing worth reading or looking at, but the design is so nice that I’m going to have to keep coming back”? I’m guessing that the answer to that is either never, or you had some sort of connection with the website: You were grasping for reasons to give it a second chance.

Just as the days of pure text with hyperlinks (and maybe a picture) are long gone. So are the days of extremely busy design elements. We minimise our widgets using only those which add something to the overall experience, we use central placement, plenty of white space, two sidebars at most, and a single column for our content. We have stripped away the extraneous fluff, and brought design back to focus on the content. We’ve not gone back to a minimalist design philosophy, but it’s certainly all about elegant design.

The takeaway

When designing something, try to focus on the content and the context: A phone needs to work primarily as a phone. Those extra features that we’re all so fond of shouldn’t be the highest priority. On a phone, the ability to answer a call should be something that takes precedence over everything else, and the device’s UI shouldn’t make it difficult with an unintuitive and inconsistent user interface. An antenna shouldn’t be placed in a location where normal operation will cause adverse performance. Nor should a moisture sensor be placed in an exposed area if you are using it to determine if your device has suffered water damage.

If designing for the web, remember that people will be reading on a screen (and quite possibly on a mobile device), so keep it clean. Don’t muddy the waters with complex background images. Keep it clean, and keep it light. Let the content shine through, and your design will be praised. Overpower the content, and your design will be noticed for all the wrong reasons.

In print, you can get away with more complex background images, but try not to be tempted to do anything which makes text difficult to read. You have in many ways more freedom, but practised restraint will still serve you well. Try to consider the tastes of your users; do they want lots of bright colours, or are they after a more sombre affair? Are they after the minimalist black Helvetica on white, or do they want white on black? Is the paper glossy or matte?

Always strip it back to the base elements, and add to it only if it improves the presentation of that content. Don’t be afraid of those empty spaces; it highlights the content if there’s an empty space elsewhere.

Living In Denial; Fighting Inertia

2010-07-07T14:51:20Z

: Denial

According to the Harvard Business School Working Knowledge forum, denial is an intrinsic part of our survival instinct: the “professional pilot denies a crash is inevitable until a second before impact, and that ability to believe one can save the ship is critical to the attitude of actually saving it”

So we’ve established that denial is a good thing in certain situations.

However, as with everything so potentially powerful as the power of denial, it is a double edged sword. Once we’ve solved a problem, neural pathways are established. Solving other similar problems re-enforces those pathways, and we tend to stop looking for new ways to solve the problem. Organisations follow the same rule; once a process has been established, it doesn’t look for a new process to solve that type of problem again unless the established protocol breaks down. This leads to inertia, and any company with entrenched management will more than likely have the tendency towards it.

So on the one hand, the company may deny that a problem is insurmountable, which can be both a good and a bad thing in of itself. On the other hand, the company may deny that there’s a need to improve an inefficient process simply because something gets done “in the end.”

Interestingly, they categorise denial as a form of risk taking in itself, but the double edged sword strikes again as they provided the observation that “It is tough to even have people agree on what is being denied”.

You can read the article in question for yourself.

What can be done?

We need a certain level of denial in order to achieve anything, or our crushing realism would stop us from trying anything new. However, if there’s one thing that stops us from moving forward just as effectively as crushing realism, it’s the knowledge that things are “just fine”.

We need to manage our denial, and turn it into a useful tool. Master it rather than let it control us.

Take regular assessment of what can be improved, with no regard as to whether it is “good enough”. Once you know what can be improved, start looking at how you can do that. Think smart, think flexible. Plan with contingencies in mind, and roll out these changes in an ordered and sensible fashion.

History is rarely kind to those who get it wrong, but at least they are remembered: You’ll never be lauded for getting it right if you never took the risk.

The Nightmare of Design by Committee

2010-07-06T18:18:54Z

: Photo Credit: Roobee

All to often we see good designers toiling away on a product or project which looks like a designer’s hand never touched it. There were too many chiefs, all with conflicting requirements and no central visionary driving the decisions, resulting in a final product that is an unhappy compromise between all the desires of the players in the game. In Scrum development terms, there are too many Chickens who think they’re Pigs.

Ideas are cheap, wishes are even cheaper, and everyone wants something to be done a certain way. Unfortunately, that “certain way” is invariably somewhat different and often incompatible with how the person sitting to their left at the meeting wants it. The list of features and requirements grows longer, and the designer often finds more and more of their objections ignored. After all, they’re a smart boy or girl, and they’ve always managed to deliver something good enough in the past. They should be able to make this work, especially since there were already some concessions made earlier. Right?

Wrong.

It’s a personal frustration of mine when people with no design experience get their hands on the reigns, and start thinking that designers have some magic ability to make every idea that they had work. Even the ones that contradict each other.

Frankly, I’m always a little surprised when something that looks like it wasn’t designed by committee turns up. Corporate culture these days is often unhelpful in creating good design, and too often these committee’s lack vision. These are all things that can be overcome through proper management, but it’s a sad fact of life that many companies are poorly managed, with many projects are barely managed at all.

So what can be done?

Design services aren’t cheap, and whilst we may not always be able to convince people that the designer might actually know more about design than they do, we can make it very clear as to whose will have to either live with the sub-optimal results, or pay for a second attempt. You have to ask them why they want every feature they ask for, what purpose it serves, what the advantages are off including it. Ask, ask, ask. You need to ask these questions and many more until each feature has either been justified, or has been eliminated. If they have no vision, you’ll have to be the substitute visionary. You have to tease it out of them.

At least, if they insist on something, they either need it enough to be willing to make the trade off, or they really do think they know more about design than the professional.

There is unfortunately no helping some people.