Designing Twitterrific 2

Twitterrific 2David Lanham did a great majority of the user interface design for Twitterrific 2. The theming, style, and icons were all by him. There were a few times in the process however, when I was supposed to be working on Ramp Champ, that I just had to step away and tinker with some interface and interaction design. Below are the two main things I worked on with Twitterrific 2.

In the original Twitterrific for iPhone, there was one thing that I wanted to keep, and that was easy switching between types of messages. All too often, I find myself composing a message as a reply but then realize I actually want to let everyone know. Sometimes I write a reply and realize it needs to be more private and I want to make it a direct message. Even though I knew copy-and-paste was a feature to come in iPhone 3.0, I didn’t want to burden the user with copying their text, exiting the post view, tapping to reply to a message, then paste. It was too cumbersome. That being said, we needed to streamline the post view. Most of the problem was because of the nice area we dedicated to the timeline, so you could see posts you might be referring to. This took up too much space that composing, the reason you are here, became so removed from the process. I thought that a good compromise, actually, a better solution was to create a kind of “Quick Look” or what we call the “peek” button. This allowed a big area to compose your message in, but if you needed to check out a message you might be referring to (add links, copy a username, etc), you could do so with ease. It turns out the best way to do this was to use a little tabbed area to switch between types of message (and cleverly change the background color of the field so you are fully-aware of the type) with the post count and peek button beside the tabs. The extra, less used fuctions, were placed at the top, out of the way of your fingers, which while posting are on the keyboard. We also moved the Send button quite a bit away from the keyboard, because we found that users might accidentally tap on it when aiming for the top-right corner of the keyboard.

Something we noticed about the “detail” screen of a tweet was that actually, it wasn’t necessary. You see, with something like a photo, a thumbnail and full view makes sense. But for text, where you can see the entirety of the content in a list format, there’s no need for a “detail” screen at all. The only reason we had it in the previous version was so you could see the tweet larger, but we found a better way to do that, with the “layout” button in the top-right corner of the application. By removing the extra navigation, we could do actions without navigating away. That being said, the actions you could perform on a tweet were getting quite numerous.

Twitterrific 2

The posting view and action sheet in Twitterrific 2.

Then came the action sheet. I remember during the Beta of Twitterrific 2, we actually had two “action” icons in the toolbar: sharing options, and tweet options. Long story short, you could never remember which icon contained which actions, and you ended up tapping one when you meant the other, so it took a few taps to get to the correct action. This was obviously wrong, but the solution was not clear at the time. We thought of putting all of the actions in one sheet, but the built-in iPhone sheet was not the best for displaying many actions. It looked too cluttered and uninformative. And the list wouldn’t even wholly fit on the screen. That’s not even talking about the issues we had in trying to find the correct visual metaphors for both of these action sheets in the toolbar. We tried all sorts of symbols and glyphs. When we got one icon we liked, we realized we needed another, and even still there was no good way to represent these. It was a problem, to say the least.

I went home and thought about it for a while, and I realized that we had solved this issue before by creating custom buttons. (Well, I say “we” to mean the Iconfactory, of course I was not employed at the time of the first Twitterrific iPhone app.) In the detail screen of the previous version, there were squared buttons with an icon and label. These were great. In fact, for a lot of us, it was our favorite part about the old version. I thought for a while, and with the help of Chris Clark, I arrived at a solution.

But I knew that a certain developer, even though he may like the idea, would remind me that we were Beta testing already and how now is not the time to add new features. I WAS HOPING THIS IDEA WOOD BE GOOD ENUFF FOR HIM THOUGH THAT HE MITE WANNA TRY IT ENNYWAY

You could indeed have nine actions in one sheet, if you made square buttons instead of long, text-only buttons. You see, this solution was the best thing for a few reasons: we got to use icons for the actions (which helps with learning and reuse), and we got to save an enormous amount of space (to be clearer, over half the screen!). We arrived at what is now the action sheet in Twitterrific 2 for iPhone, and I believe it to be the best solution for many items in one action sheet. (I’m biased.) Regarding the icon for this action sheet, we debated about this for a long, long time. We went through the symbols we used for the previous two action sheets, but it just was too descriptive, or too abstract. I was getting desperate when I was searching around in the Special Characters Palette, but it turns out, I found a symbol that, I think, works great! An asterisk. Yeah, I suppose a few people see it as a “snowflake” or call it just a “star,” but the asterisk as an icon seems to be the perfect representation. An asterisk is often used for things like “miscellaneous” or “see here for more information.” With that kind of metaphor, it seemed to work perfectly. I’m sure some of you are wondering, “Why didn’t you just use the standard “actions” icon? You know, the one with the box, and the arrow?” Well, the issue there was that even though it may be the standard solution, it seemed to convey more of “sharing” stuff, and some of our actions were “delete,” “view author” or “view conversation thread.” Simply, it didn’t fit.