Wednesday, November 14, 2012

Treat designing your UI designing like your furniture arranging, "Let's try this there... no, maybe there...", i.e. just tying stuff until it feels right...

flow|state - Designing by Making: your process for arranging furniture can point toward a good process for UI design

The last time you had to arrange the furniture in your home — did you create a design first? No. You had a design idea, and then immediately jumped into implementing your idea by moving the sofa and table around until the result felt good.

image
Hmm… let’s try putting this over here…

Consider these attributes of the typical process for arranging furniture:

  1. You do it yourself. If you have enough money, you might tell movers where to put the heavy things first, but you’re still directly involved, and you’ll end up pushing things around yourself before it’s all over.
  2. You work directly with the furniture and the space, without recourse to a single design artifact. Think about it: in the time it would take to create a scale model of a room and the furniture to sufficient accuracy that it could actually inform your decisions, you can finish the task of moving the real furniture into place.
  3. You can never predict whether a layout will completely work until you’ve actually gotten things in place. Once the pieces are in place, you always discover something unexpected. You move your desk so it faces the door, then sit in the desk chair and realize you can’t see the view out the window. So you turn the desk around to face the window, then get a creepy feeling that someone might sneak in the door and creep up behind you without your knowledge. Each layout you try teaches you something.
  4. The process is inherently iterative. You start with an idea, and iterate through various layouts until you converge on an acceptable result (or you’re tired of moving stuff around).

You can design software user interfaces this way too.

...

Today, it is already possible to have a design process built around coding that is as efficient — or, often, more efficient — than a traditional, artifact-heavy, pre-coding design process. What’s more, the tool chain will ultimately improve to the point where designing a user interface will be as fast as arranging furniture. In the time it takes you to say, “Let’s try moving the bookcase over there”, and actually move the bookcase, you’ll be able to say, “Let’s try a tabbed navigation approach”, and actually switch a design to using tabbed navigation. Imagine what it will be like to design software like that."

image

I love that metaphor, it's one even a dev dude like me can articulate... And this is where the beauty of XAML and MVVM can come into play, making it easy to move stuff around until it feels "right." (or more likely getting a friend to help you move/design...  :)

No comments: