Saturday, February 2, 2013

Simplicity in design - friend or enemy?

I have a real soft spot for simple designs - minimalist if you will. The thing I love most about modelling and coding for games is the way the restrictions of the medium force you to omit information, and the way you can construct your design so that the omissions of this information don't detract from the user experience, but add to it. Kind of like when people listen to music to "hear the notes they don't play".

This impressionistic approach to design, wether that be for websites, games or a simple logo, can be a double edged sword. On one hand it means that there is less production work to bring your design to life since there is essentally less information to display, but it also requires a lot of thought and planning to go into the early design stages and sometimes during testing it can all fall down catastrophically. So is simplistic design better or worse than the traditional information spam approach?

Evolution of web design

Remember those websites from the late 90s? The ones with a black background, yellow times new roman and marquee text? Flashy gif images with no anti aliasing and comic sans headings? My my, haven't we come a long way. Since HTML is a markup language designed to lay out information, the early times of its use were pretty much just that in drag. Information was sprayed onto the page and not much thought was given to the wheres and whys.

Then some people started lending design concepts to their sites. We started seeing some more intuitive designs come in. Comic sans was quickly stricken from the record, for one. Sites became more interactive and interesting to look at, for instance instead of having a login form as such:

Where the fields were clearly labeled and the form flowed much like a traditional paper form, designers started to think about the way their users thought of a login form. We started seeing more complex, yet simpler designs such as the minimalist login form:

This simple change allows a shift in design concepts. Suddenly we see that we can assume the user knows how to use the internet (to a certain extent) and we can design websites that, instead of leading the user through its use by a leash, gently take the users hand and allow them to discover the site themselves.

With mobile design (or responsive design, as some people call it) this simplicity has been explored much more. Mobile devices have smaller screens and therefore much less visual real estate than PCs. This has lead designers to squeeze even more information out of nothingness in order to not crowd the screen. The smaller screen has also meant that all information has to be graded on importance much more harshly, and only the most relevant information gets precedence.

The mobile design revolution has also brought about the part of simplistic design that I like the most. Important information is now displayed BIG. Little screens and big thumbs don't handle tiny buttons well. The aforementioned login form now looks more like this:

A nice BIG form for fat fingers and tiny screens. Luckily this translates fabulously onto a traditional monitor as well. If the information is easily noticeable on a mobile screen, it jumps out at you and smashes your head against the screen screaming "DO YOU SEE? DO YOU SEEEE?!" on a monitor.

Game design

Valve do a lot of great research on this kind of design in their games. Their design doc releases for Team Fortress 2 are a valuable resource for anyone wanting to learn how to transmit important information to their players quickly. Valve placed heavy value on the silhouettes and colour pallettes of the characters in TF2, so that the player would immediately recognise a character in an instant and know how to react to their presence, allowing for much faster paced gameplay. Infact their colour pallette was so well designed that you can recognise all the characters from the following image:

That, combined with the intensely varied silhouettes of the characters, ensures players intuitively recognise the characters they are playing aginst in the game. TF2 is a great example of simplistic design. The textures are monochromatic but have enough information so that the player recognises them easily. The levels are layed out in simple yet complex ways, with paths being easily memorable and visual cues for progression often onscreen. The classes each have simple gameplay goals and roles in the team.

Another example of simplistic design in games is the health counter. There are a multitude of ways to do this. A simple number, a health bar, screen effects, the characters animations, and plenty more.

How this relates to me

With simplistic design it's easy to see it and think 'I can do that. There's not even that much work there, the colours are simple, the words are big and almost the whole thing is blank'. But with simplistic design it's all about R&D. Sure, you can put a big form on a blank page, but how effective is it really? Does it squeeze the most out of the page? Is there only super relevant information there? Is there enough information there so the vast majority of users will understand? There is a delicate balance to be struck, and it takes a lot of fiddling for the uninitiated to get a really good design.

A good simplistic design will generally take more time to plan and design than it will to put together. You have to make sure you are leading the users eye to the correct areas, make sure the colours and fonts balance and a whole bunch of other stuff that has been blogged about ad nauseum (If you really want to dive into this, check out "Design for Hackers", a blog and book all about the technical side of design).

Simplistic design requires a lot of user testing and feedback, to make sure you are getting the most out of every piece of information, and that it is being displayed in the manner easiest to recognise. In this way, it actually takes a lot of time to get a good simplistic design, and (as with a lot of things in games/web) the final result rarely shows the true amount of work put in

For a small team (or a one man team, moi), where time is a valuable commodity, simplistic design can be good and bad. Often you can get it right the first time and will have put a fraction of the work into creating a working example of your design. Sometimes you'll flounder for weeks and months trying to get your design right and do all the testing you want but still have daddy eyes for it. The amount of thought and planning you need to put into a simplistic design to have it really pay off is disproportionate with the amount of work you have to do bringing your design to a functional demo. In this way, a simpler design can take more time than a more traditional raw data design, as more time is spent on the conceptual and testing stages than the actual production stage.

Simplistic design definitely interests me, and I love the intuitive results you can get from it, but I am only just learning the basics. I have been outsourcing a lot of my user experience design to a bloke on, who is really good at it. Perhaps this is one of those roles that I will need to outsource for permanently, or, when I finally get to it, employ for. Ah that will be the day.

No comments:

Post a Comment