Design Decisions: Evolution of a chat window
In our previous post on constraints we wrote about the chat window being the most vital piece of Ember. Over the last few days of Ember being available in the App Store, users have told us that the thing they appreciate the most is the chat window.
Developing that experience wasn’t trivial, it took a number of iterations to get it just right. Our goal was to provide a chat experience that felt like an “iPhone app” and provided users a comfortable reading experience.
Pencil Sketches: We had a decent number of pencil sketches including the ever so popular “bubble chat” style. These sketches allowed us to quickly determine the overall size and shape that would feel right on an iPhone. The bubbles and several other choices went away pretty quickly in this round.
Color Illustrations: This phase allowed us to establish a color pallet Ember. It also brought a realness to the app that we hadn’t had with the pencil sketches. These were very quick illustrations that gave us the chance to weed out a few more options.
Photoshop Renderings: In this phase we were really only working with two styles of chat windows: the “light view” (default Campfire colors) and the “dark view” (pictured above). Initially, we had planned to launch Ember with two unique chat styles to provide optimal viewing in both light and dark situations. Other apps like Instapaperand Twitterrific have this as an option and we thought this might work for Ember as well.
On the phone: This was the final phase. Ember was now on the phone and we were testing it in every conceivable environment. What we found was that the darker version began to bothered us. It didn’t seem to be as legible as we initially thought, and it lacked thetrue Campfire experience. In the end, we launched with a single chat window style that reads well, feels like Campfire and feels good on the iPhone.
Iterations are important in user interface development. If we had initially started inside Interface Builder, Ember would have looked like a default list view with some background colors added. Instead, we were able to customize the experience and provide the subtle richness we wanted. It’s also important to move through iterations quickly. Because of this, we were able to move through each phase, narrow down choices and get the answers that we needed to move forward.
If you haven’t tried Ember yet, take a look, we’d love to hear your experience with it.
