Redesign Challenge (4/52):
Tweetbot for Mac
Well, shit.
You caught me. I’m late this week. It was bound to happen eventually, and luckily there are no real consequences for missing these deadlines, but I can’t help but feel a little disappointed. After making a change to the challenge format last week to extend the deadline for the write-up, I wanted to see if it was possible to complete the weekly challenge without doing the any work on the weekend, which had made up the majority of the time put towards the redesigns in previous weeks. The writing and screenshots in particular used up a good chunk of time on those weekends. That meant that, for this redesign, all the design work had to be done from Monday-Friday in the evening (with Monday-Wednesday overlapping with the previous week’s write-up), and this week’s write-up had to be completed the following Monday-Wednesday. As it turns out, that’s pretty hard to do, especially when trying to have a social life. I’m sure it’s possible, and it will have to be for the challenge format to work as the summer rolls around. This is a lesson that I’ll have to choose redesign candidates wisely, and schedule time more diligently.
Tweetbot has been my primary Twitter client on iPhone for a while now. Mute filters are a wonderful thing if you’d rather not hear about the latest Justin Bieber shenanigans, or if you’re not at all invested in the Super Bowl. Plus, it has a solid design that fits well with iOS 7/8, that can be customized based on your preferences. When it comes to my Mac, however, I’ve never been compelled to use Tweetbot, the official Twitter client, or any other native app.
Twitter’s official Mac client just feels like a web wrapper to me, for the most part. Tweetdeck is geared towards marketers and power users. And Twitterific, while it’s colourful, playful, and well-made, just doesn’t suit how I like to consume Twitter.
Tweetbot for Mac, on the other hand, offers a similar level of customization to its iPhone counterpart, with options for font size, date format, image thumbnails, and display names. It also has mute filters, of course, and you can even choose to hide sections, if you’re so inclined. All of that would make it the perfect client for me, except that the UI, as it stands, sticks out like a sore thumb on Mac OS X 10.10 Yosemite. The app was designed to stand alongside the previous Tweetbot for iPhone, which had a detailed skeuomorphic interface. The iPhone app has since been updated to fit in with iOS 7/8, while Tweetbot for Mac remains unchanged.
Side note: I had mentioned to my friend and co-worker, Kevin Clark, that I was working on Tweetbot for Mac as this week’s redesign. He mentioned in passing “It’s shame that Tweetbot for OS X will probably never be updated though…” to which I agreed. As I was writing this on Tuesday evening, he informed me that a teaser for a new version of Tweetbot for Mac had been posted on Designer News. Completely coincidental, and pretty crazy timing. I’ll follow-up on this at the end of the post.
With that in mind, my goal with this week’s redesign was simply to update Tweetbot to fit in better with OS X Yosemite, and to better match its iPhone counterpart.
Designing for Mac OS X
I expected this week’s challenge to be relatively simple. Despite never having designed anything substantial for OS X, Tweetbot’s navigation structure was already solid, there was an existing reference for Yosemite-style icons and typography in the iPhone app, and I was only going to be working on the timeline, since I had decided not to work on the challenge over the weekend. What I didn’t account for, was the time sink of reading Apple’s OS X Human Interface Guidelines, and downloading and looking at dozens of sample Mac apps. In hindsight, while the HIG would certainly have helped if I was designing every screen, dialog, and preferences for a larger product, it didn’t really help me all that much while designing a single screen of a fictional app.
Designing for OS X is a much different beast than what I’m used to with, say, iOS. Apple has been very opinionated about the best practices to approach app structure and design on iOS. UIKit was built from the ground up for the iPhone based on the lessons learned from OS X’s AppKit, with built-in components and reasonably comprehensive guidelines to help developers in this regard. OS X on the other hand, has been evolving since the days of NeXT, and has only recently seen interface guidelines anywhere close to as comprehensive as those for iOS.
Still, despite Yosemite’s fairly in-depth Human Interface Guidelines, the additional screen real estate afforded on even an 11 or 13-inch Macbook Air is enough for designers to head in entirely different directions to solve the same problems.
And it makes sense. While iPhone apps are full-screen and have limited options for positioning primary actions or navigational elements, Mac apps can be small and windowed on a laptop, or they can be full-screen on a 27-inch monitor, depending on their purpose. Navigation can be essential to the app and multi-level, or it can be simple and rarely used. One size doesn’t fit all. Interaction with a mouse also means less physical movement to get from one area of the screen to another, so using the extra real estate to make more actions available can be valuable. On the other hand, if the app is intended to be simple, making more actions available can be overwhelming. Thus, designing for OS X requires a lot more initial decision-making when it comes to the overall app structure than when designing for mobile, but there are less restrictions. Even if every app is unique and functions differently, as long as they match the general OS aesthetic, no apps feel out of place. The same simply can’t be said for mobile.
In the end, despite only designing one screen, I went through numerous iterations of button placement, button styles, navigation placement, and title bar placement to land on an app structure that I was happy with. You can see from some of the title bar iterations above, it’s easy to cram more features into the real estate available, but it’s important to question whether or not it adds enough value to be worth it. For example, there’s an entire section in Tweetbot for lists, and I can’t remember the last time I switched to the media mode or searched my timeline. Since those features are available elsewhere, I chose to get them out of the way of the user, instead choosing to emphasize the Forward/Back navigation and New Tweet button.
The Many (Inter)Faces of Tweetbot
One of the reasons Tweetbot has remained my go-to Twitter app for iPhone is the UI customization. Personally I keep night-mode on all the time, with a small font size, large image previews, (rounded) square avatars, and relative times. But I’m sure many people prefer something entirely different, and that’s part of what makes Tweetbot great.
It was important when redesigning the Mac app to maintain that customizability. So, although I only took a look at the timeline for this challenge, I wanted to mock it up twice, with some visual changes mimicking a customized reading experience. I debated trying out a night-mode for Mac, too, but decided that the dark background wouldn’t be used as often on a desktop as it would be in a mobile setting.
The mockup on the left is using Helvetica Neue, square avatars, and large image previews, while the version on the right is using Avenir, round avatars, small image previews, and hidden badges. Probably the most significant departure from the current Mac app, however, is the option to switch between an expanded or collapsed sidebar.
The expanded sidebar draws influence from the Finder favourites list, with smaller subtly filled icons and accompanying text, which is intended to feel more at home alongside some of OS X’s default apps. The collapsed sidebar, on the other hand, is more similar to the existing Tweetbot for Mac and the official Twitter app, and is my personal preference.
Tweetbot 2
From the time I started writing this post, Tweetbot 2 for Mac has gone from being nonexistent, to teaser, to being officially announced. Because of the crazy timing, I thought it might be fun to look at the similarities. To avoid any confusion with credit, I’ll avoid posting the image inline, but you can take a look here.
The navigation structure is, as you would expect, very similar to both the existing Tweetbot for Mac and my redesign, with a couple notable differences. For one, the quality of icons in the Tapbots version is much higher. My quick and dirty approach was to simply match the iPhone icons as close as I could, and scale them where required, but given some extra time they’d be the first thing I would scrap and redo. Tapbots’ purpose-designed icons work much better here. They’ve also chosen to indicate new tweets in basically the same way I have, with a coloured dot, but using it on the right side instead of the left, and at a larger scale. I prefer their approach here, too. A good testimonial for taking the time to get things right. The title bar in the Tweetbot 2 keeps the Lists button available, something I decided to replace with Back/Forward buttons, largely because I don’t use lists, while the New Tweet button looks just like the one in the iPhone app, and in my earlier iterations.
The timeline itself looks very similar, which I would expect given that I was trying to keep their branding intact while creating this redesign, with one of the only major differences being the larger avatars. My only gripe from what I can see is that the Mac traffic light buttons aren’t vertically aligned with the center of the title bar, but it’s a minor note for a design that otherwise looks fantastic overall. I can’t wait to use it when it’s launched.
Conclusion
Better late than never, I suppose. The write-up portion of these challenges remains the hardest part for me. I’m getting better at organizing my thoughts, but even still, compiling examples and screenshots can be very time-consuming.
My mind is still completely blown that Tapbots announced Tweetbot 2 on the day I planned to publish this. Considering how long it must have been in development for, and considering I have 20–30 redesign candidates in a list that I’m selecting from semi-randomly, the coincidence is wild.
Regardless, this week’s design was fun as usual. I’d definitely like to try my hand at designing more native Mac apps. Having so much real estate to work with is refreshing, but almost daunting when you’re used to the world of mobile, which means this challenge is doing exactly what I intended it to by pushing my creativity in new ways. In the end, I was fairly happy with how it turned out. There were definitely some areas I would have liked to have tweaked further, but at some point you need to call it done. Lesson learned, though, don’t design for an unfamiliar platform if you’re short on time that week.
If you’d like to follow along, or if you’re reading this from the future and want to see what I’ve redesigned since the start of the year, I’ll be posting everything to my Weekly Redesign Challenge publication, which just reached 500 followers! Thank you all for the support.
