humane machine

Required Reading for UI/UX Designers

Sun, 08 Nov 2009 13:42:44 -0800

Every now and then I’m asked what books I would recommend to a new user experience or user interface designer. So here’s a list of books that I’ve found useful throughout my career. To be honest these aren’t just for new designers even if you’re a seasoned vet there’s a lot of useful information in here!

This is a great place to start if you’re an inspiring user interface designer looking to get into the video game industry or software/web industry. The user experience stuff is going to be able to be directly applied more to software and web as it’s not as prevalent in the gaming industry yet. However that’s part of what my blog is about, figuring out how to use best practices in a practical way within the confines of game development.

In no particular order here are 12 books I highly recommend:

A Project Guide to UX Design | by Russ Unger & Carolyn Chandler
This is a probably one of the best user experience books out there focusing on practical application across the entire process.
Designing Interfaces | by Jenifer Tidwell
This is mostly aimed at software UI design, and some if it is a little dated. However the principles and best practices are still widely used, it’s a great reference as well.
Don’t Make Me Think | by Steve Krug
While this is largely focused on web design a lot of the principles within these pages are really great. It’s a short read, but full of good info. His practical approach the usability testing is really great.
Universal Principles of Design | by William Lidwell, Kritrina Holden, Jill Butler
This is a must read for everyone, designers, ui, graphic artist, etc.
The Design of Everyday Things | by Donald A. Norman
This is just a general design book and doesn’t directly apply to software out right. However the reason things are designed in a specific manner offers a lot of insight to usability and sound design practices.
The Visual Display of Quantitative Information | by Edward R. Tufte
Tufte is a genius, read this book!
About Face 3: The Essentials of Interaction Design | by Alan Cooper
This is an “interface book list” staple. However it’s on everyone’s list for a reason. Great insight all around and solid explanations of best practices.
The Humane Interface | by Jef Raskin
This book is a little dated these days, but it’s still worth a read. Great insight into how a lot of software systems were designed and why they’re that way. One of our UI pioneers.
Sketchbook: Conceptual Drawings from the World’s Most Influential Designers | by Timothy O’Donnell
Maybe not required reading but there’s a ton of inspiration to be had.
Sketchbooks: The Hidden Art of Designers, Illustrators and Creatives | by Richard Brereton
Again not really required reading but still very inspirational.

I’m also in the process of reading a couple of books which have been pretty good so far:

Do It Wrong Quickly: How the Web Changes the Old Marketing Rules | by Mike Moran
Sketching User Experiences: Getting the Design Right and the Right Design | by Bill Buxton

Your turn! What are some of your favorite design and user interface design books?

When software drives design

Sat, 07 Nov 2009 17:20:24 -0800

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! :)

I've done this before ...

Sat, 07 Nov 2009 17:14:00 -0800

… this time I’m mostly serious … definitely maybe.

I’ve created blogs in the past and never really stuck with them. For one reason or another I just never had the drive to keep up with posting (or reposting) and at the same time keep things interesting for someone reading, or myself for that matter. Plus I’m a primarily a user interface designer not a writer, I don’t do words. But, I’m willing to endure it if you are.

There are so many blogs out there on so many topics, along with microblogging, Facebook posts and all the rest. Why on earth would I bother at this point?

I have more that 140 characters worth of things to say about various topics for one. While Twitter is fast and easy, sometimes I come across problems at work or think of new a process and there’s no easy way to get that information out to a lot of people in order to get feedback on it. Which brings me to point two, I want to share things I’ve learned from doing user interface design and user experience design with those communities and get people talking about things.

Most importantly, today there seems to be few or no one exploring and practicing user experience within the context of game development. Even fewer are people who are advocates for UX outside of web and general software engineering. Maybe this is a huge Vegas style sign for me to realize this is a bad idea, or maybe I’m onto something. I’m not 100% sure which yet but I’m excited about exploring the possibilities.

For the most part UX has been restricted to web development, and desktop applications. However, I feel and strongly advocate a lot of these practices within game development and try to use these concepts in my day to day work. Mind you UX for web doesn’t translate one to one over to game development. There are just too many wide and varied differences for that to work. However there are core components that do, and I’d like to explore those in a more public forum.

Along with that, I’d like to share and discuss various UI paradigms, in conjunction with practical applications of graphic design and layout within that context. Maybe some of these posts will make it out into the ether. I hope the result is having some nitty gritty discussions going on here, and maybe learn a thing or two!

For those of you who are wondering who the hell I am, here’s a brief summary:

I never went to college. I loathe scantron tests far too much. I’m a self taught user interface designer, user experience designer, artist and game designer.
I started out doing web design in 1995.
I did user interface design for embedded systems within RAID storage devices. Developing one of the storage industries first platform independent RAID management applications. Many of the people on this project later went to Apple and ended up developing the XServe RAID software.
My first brush with game development was QA at Interplay along with some various game mod tinkering. I spent a lot of time in the DOOM 2 editor and worked with some very talented folks on a couple of Quake 2 mods.
I’ve done freelance web design, graphic design, user interface design, and consulting as well.
In 2003 I went to work for Sony Online Entertainment (SOE) as a UI designer, primarily doing web design at first and eventually went on to create the user interfaces for EverQuest (post Shadows of Luclin expansion), and PlanetSide.
While at Sony I later took up 3D modeling and worked on several EverQuest expansions. I mostly was creating NPC character models, however I also got to design, model and texture weapons and props, and create particle effects along the way as well.
After my time at SOE I went to Obsidian Entertainment to dabble in single player games for a bit. I was hired as a Senior Artist to work on Neverwinter Nights 2, and develop the user interface for that project.
Some new opportunities arose around this time and I jumped in feet first into a new start up company developing large format touch screen computer integrated after market GPS for cars. He I acted as the Director of User Experience, and got a lot of hands on with developing a company and consumer product from scratch. As with most start ups this one ended prematurely, but that’s a story for another time.
Next I set out to do some more freelance. Web design, consulting and some iPhone and beta Android applications this time, which was a lot of fun.
Later I went to work for Active Storage, Inc. developing XRAID RAID storage products. Again working as the Director of User Experience, we set out to deliver an Apple experience to our users. Active is still kicking and doing great things. My industrial design for these products recently won a GoodDesign Award 2009 in Japan.
Today I’m a Senior User Interface Designer for something and I do some cool stuff on a cool game. :)

So that pretty much brings you up to speed. :) inorite?

Feel free to check out my art portfolio, follow me on Twitter, or ping me on LinkedIn. You can check out my game credits on GiantBomb or MobyGames.

More posts to come! In case you’re curious you can find actual robot dudes picture above on Etsy.

Obligitory Disclaimer
These are my own personal views and do not express the views of anyone, any company, or entity that I have ever worked for, am working with currently, or may end up working with some time in the future. These are my own personal opinions and stand as such.