When software drives design

For the skilled user interface and graphic designers out there (and even the un-skilled), it’s very easy for us to sit down in front of our weapon of choice and craft something great looking. Firing up Photoshop and playing with typography, color, textures, gradients, drop shadows etc. it’s easy to generate some nice looking results fairly quickly. It’s also pretty gratifying to have what looks like a pretty and cohesive design to show someone else after a few hours of work. But aren’t we missing something here?

There’s an article over on Redswish which mentions some of these issues, and it’s something that I’ve been discussing a lot with colleagues and the like recently as well. From the Redswish article:

In this month’s Computer Arts, a particular quote from an inspiring interview with legendary designer Milton Glaser stood out to me:

“I find a lot of students beginning to resent the computer as too powerful to use without thinking. They now describe it the same way; they say, “Before I start to do anything, I make notes and sketches and draw because otherwise the computer dominates everything I do”.”

I have to agree here, and add that it’s not only the designer that gets distracted by these things but your clients as well. For clarity when I talk about clients, they can be other people on your game development team, your boss, people who are paying you as a consultant, freelance, etc. Our clients, when approaching high fidelity designs (images we’ve prettied up in Photoshop and the like), look a them with a certain set of assumptions simply based on the completeness of the mock up. Unfortunately I’ve found throughout my career that this generates less feedback on the soundness of the design itself and more concerns over button colors, text placement, fonts, drop shadows, etc. As we all know, no amount of that will save a bad design, except making it less noticeable for a time at best.

This really isn’t completely a computer vs. art tools problem it’s actually a little more complex. I see two really big issues here which are high fidelity vs. low fidelity, and computer vs. art tools. Those issues address how we as designers work, the other part of this is what your clients expect and what their level of education is on the various design processes you’re involved in. If you’re in a situation where your clients expect high fidelity mock ups and concepts, how on earth do you find time to squeeze in other design mediums and make the useful. Aren’t you just wasting time if the client never see’s them? My answer is, it can but not always, and “it depends”. So let’s explore some options.

High Fidelity vs. Low Fidelity

There’s a few Flickr groups that post sketches, wireframes, and other low fidelity mock ups which are pretty neat to browse through. They full of some great ideas, and I usually find just browsing the images inspiring. Here’s a few to check out:

In practice low fidelity mock ups serve two purposes:

They should allow for rapid prototyping and quick iterations.
They should focus on the design, and the ideas surrounding the design, and less about how it actually looks.

Low fidelity mock ups can be created drawn with pencil and paper, on a whiteboard, on post-it notes, etc. They also can be created in wireframe form digitally using applications like InDesign, Balsamiq Mockups or Axure RP Pro. The purpose of these is to create something that conveys ideas, and the essence of the design. Some of these being more free form also let you explore more conceptual ideas without the confines of the computer. I must admit there is something freeing about being able to express and record ideas with just a pen and paper.

I personally enjoy doing some doodles on paper first with a pen. If the idea feels flushed out enough to move on to high fidelity, then I’ll go from paper to Photoshop typically. If it feels like it needs a lot more exploration I might pull up a tool like Axure RP Pro, although lately I’ve been playing a lot with Flash Catalyst.

The nice thing about pen and paper is that you can iterate extremely fast. You can knock out several ideas in 15 minutes to an hour and have a good idea of what directions you might want to explore further. If you jump straight into Photoshop it starts feeling finished before you’ve even really starting thinking about the design itself. This also keeps us from exploring other ideas because it very quickly feels like the design is coming together in a false finish sense.

In the end low fidelity mock ups can give you a good head start, help you consolidate multiple iterations and ideas you might not have explored otherwise, and hopefully help you catch design flaws early on. High fidelity mock ups are still an essential part of this process and they’re not something to discard by any means. Low fidelity mock ups just help you make more refined decisions when it comes to making your prettier versions.

Man vs. Machine

There is no tool to do everything on either side of the fence. If you’re working on software, games, the web, at some point your creations are going to have make the journey over to the digital realm. So if there are digital tools for creating low fidelity mock ups isn’t it a waste of time to draw? No way!

As I mentioned previously I usually sketch down some ideas, doodle etc. just to get a grasp of the design and the concepts I want to work with and sometimes even take a stab at some fundamental interactions, work flow, and layout. For me this helps a great deal. The key here to keep in mind is that these initial sketches are supposed to be fast. This is the initial 15 minutes or couple of hours before you spend the next 3 days developing some spiffy artwork in Photoshop only to find there was a major flaw in your initial assumptions requiring you to double back and rework a lot of what was done. Sometimes this is unavoidable and you get caught by the “UH OH” monster, it happens to everyone. Hopefully knocking out some quick iterations on paper lessens the frequency of this, and broaden the scope of explored ideas.

Working with Clients and Stakeholders

Clients and stakeholders. They’re all different and they all have different expectations. I have found and have had many discussions with various people throughout my career about sketches, low fidelity mock ups, high fidelity mock ups and what they mean to different people at different stages.

If you bring a hand drawn sketch to a client to purpose an idea, sometimes you will get a blank stare and a request to show them what it looks like. Despite the fact that you’re holding a sketch right in front of them. Some people just have an inability to visualize and it’s something you’ll have to work around. This sometimes can be helped with education, sometimes you have to walk clients through the process a few times. Other times it becomes a point of contention and you have to push off their input until the later stages of design (sometimes until the development of the high fidelity mock ups).

The up side of this is that sometimes you get a lot of great feedback really early on. Clients that embrace sketches and low fidelity mock ups are a great asset to a designer as it gives you the ability to steer the design from the clients perspective and iterate very quickly early on in the process. I’ve also found that people generally are more willing to get involved and give more valid feedback when they’re looking at a sketch. I feel this is partially due to the fact that a Photoshop mock up looks finished. While a sketch is obviously just that.

I’ve also been playing with the middle ground, in order to help get the non-visual clients involved in the process earlier. I haven’t given this a shot yet but I plan to in the near future. Essentially the idea is to develop low fidelity but interactive prototypes that allow the user to see the types of interaction and use the design to some extent (even if it’s staged). Flash Catalyst has been something I’ve been playing with to get some mildly interactive designs thrown together in a short amount of time. This seems like it could be a happy middle ground. Axure allows you to do some interaction as well although it’s web based where Flash Catalyst is obviously Flash based which suits my needs better.

Conclusion

I don’t know how accurately I’ve summed up any particular topic. In the end I do feel that sketching and low fidelity prototyping have a place in the user interface design pipeline. Here are a few things I’m trying to institute in my current process to help streamline things a bit.

Kick off Meetings
These are pretty standard, but generally just get everyone up to speed on the project before it actually starts.
Stakeholder Interviews
After having a kick off meeting I schedule individual 1-on-1 meetings with the various stakeholders of the project or feature. Getting a feel for what’s important to each department or individual and what’s important for the company or project. I also find people answer questions a lot differently 1-on-1 then when they’re in meetings with everyone present which actually helps offer a lot of insight and sometimes great ideas that might not come out in front of a group.
Sketches and Low Fidelity Mock Ups
Time to draw, and wireframe your ideas and concepts. Sometimes this is optional as a feature might not require in-depth investigation.
Concept Review
If you have visual clients that have a stomach for your sketches and low fidelity mock ups is a good chance to have a meeting with them to discuss concepts and direction for how you plan on addressing key elements of the design or project as discovered via your stakeholder interviews. Sometimes this happens after you create sketches and low fidelity mock ups, or later after prototyping or even later after creating high fidelity mock ups. It really depends on the demands of the project and which clients you happen to be dealing with.
Rapid Prototyping (optional)
This is where I’m trying to interject Flash Catalyst for doing interaction design and exploring or discovering issues in the work flow or functionality. Again this could be optional depending on the requirements of the project.
High Fidelity Mock Ups
This is where I dive into Photoshop, and start making things shiny.
Iterate
Throughout the process you’ll be creating and developing iterations of concepts. Sometimes due to flaws you’ve found on your own, changes in project direction, client requirements, etc.
All the Other Stuff
Design review, user testing, usability testing, QA, implementation, polish, bug fixes, these are all things the designer will be (or should be) involved in throughout the process.

This obviously isn’t 100% of the process, however I wanted to touch on the first portion of actually getting into the design process initially when dealing with what tools you’ll be using to design. I’ll cover a full process start to finish at a later date in another article.

How do you work with clients? What works for you when you’re developing design concepts? What tools do you prefer? Leave a comment, let me know! :)