We’ve been getting a bit behind with our coverages of the development of Languages, alas! So let’s do a bit of catch up to bring our coverage back into real-time.
Last time we talked about how to build a fantasy app by using magic. That led us to a list of features to put in version 1.0 and wrapped up strategic design. Now we can rocket on to the second stage of our process: interaction design.
The purpose of interaction design is to design the app’s interface while focusing on the ways in which the user interacts with it. Thus it’s not simply spatial—figuring out what buttons go where; but it is also temporal—related to the user’s experience over time. Interaction design demands an empathetic imagination, because the interaction designer must always bear in mind, as they are putting down buttons, the ways in which the user will interact with the buttons. Interaction designers must be able to look at what they are designing from the user’s perspective.
The way we did the interaction design for Languages was typical for us. First, I did a first draft of the interaction design in OmniGraffle (which is an excellent tool for designers). Then I presented the draft to the team. We then went into a cycle of design and iteration that is still ongoing. Generally I make a first pass at a design and then Jeremy refines and massages it to perfection—all amidst a vigorous feedback loop.
We decided to start the app off with a home-screen that would be a bookshelf containing all of the language dictionaries. The idea was that users would tap one of the dictionaries to access it (a la iBooks).
Although we are still wrangling with interaction issues, we have also begun the third and final stage of design: visual design. This is the part where we make the app real pretty. This is also the part where we make the app delightful and add those little touches of fun and humor.
We do visual design in the following steps. First, we decide on a visual theme; in the case of Languages, we decided on a physical dictionary metaphor. Second, we decide on a color scheme; in this case we decided to go with earth tones with a brown emphasis. Third, we decide on fonts. And finally we roll up our sleeves and begin thrashing away. We decided to have Jeremy take the lead on the graphics for the dictionary, while I got to design the shelf (Christain, one of our interns, has been designing the icon).
As things stand now, the shelf is basically completed, with only a few minor refinements left to do; meanwhile the dictionary interface is in a state of flux due to some revolutionary and very exciting insights that Jeremy recently had. He’s going to talk about all of that in an up-coming post.Tweet