Design Details: Tumblr for iOS
I must admit up front that I never hopped on board the Tumblr train during its meteoric rise these past few years. While I’ve taken a fair stab at setting up a few blogs, I could never quite get the app to stick with me in the same way that a personal WordPress site (or even Medium) has been able to do.
That being said, I think Tumblr is one of the coolest apps in the world right now with world-class design and an extremely polished end-product. The Tumblr website is a beautiful thing in and of itself, so be sure to check that out if you’re looking for web design inspiration.
But today’s post is all about Tumblr for iOS. At first glance I didn’t think I’d be able to find enough cleverness or creative patterns to compile a full post; I’ve come away pleasantly surprised and I’m excited to share this next chapter in the Design Details series with you!
Follow me at @brian_lovin for tweets about design, startups and technology
Get emailed with future Design Details posts: Subscribe by Email
We have a podcast! Listen to the show with Bryn Jackson and yours truly at designdetails.fm
As you’re scrolling through your feed on Tumblr, tapping the ‘Home’ icon in the tab bar will, as expected, return you to the top of the view. What Tumblr does here though, that I’ve never seen on any other app, is toggle the ‘Home’ icon with a new ‘Return to position’ icon. Tapping once more will scroll you back down to your previous place in the feed.
This is amazing. I honestly wish other apps would do this already – Twitter, Facebook and Instagram all come to mind as places where I might accidentally tap to the top of the feed only to have lost my previous position.
The springy animations that trigger when you tap the ‘Compose’ icon in the tab bar is great – it looks slick and provides some nice interactivity.
What I thought was cool is that this view also responds to the accelerometer in the iPhone providing a subtle panning movement as you tilt the device. There’s not really much to say for this in the way of usability, but I appreciate the fact that there are people out there paying attention to these small things (even if most people might not notice).
For some reason Tumblr lets you drag a blog’s profile picture around – similar to a Facebook chat head. I couldn’t quite figure out why this is supported, but hey – it’s fun, right?
I also really appreciated some of the subtle scaling transitions that happen to the body layer whenever you expand/hide the profile photo. The obvious solution here might have been to just enlarge/shrink the profile picture on top of a static view. In this case, however, the view responds to the interaction and fades out+back or in+forward depending on the input.
If you land on an empty view (in this case I went to view my non-existent favorites), Tumblr gently guides you in the right direction to begin exploring content. This is incredibly smart and something I haven’t actually seen too many other apps do. Guiding users to a desired behavior is good; guiding them when they’re potentially lost or confused – well, that’s just great.
This video captures the (almost) over-the-top animation and motion that accompanies a new following interaction. After a few times triggering this interaction I realized just how helpful this bit of feedback could be to new users, helping them to understand not only the navigation patterns of the app but also how to get value out of the app. Follow people, fill up your feed, like, repost…etc.
Any sort of ‘Like’ or ‘Favorite’ interaction on iOS is super low-hanging fruit for any designer/developer out there. Adding small touches of interactivity and feedback make the whole process so much more gratifying and fulfilling to users.
And if you’re smart, you’ll do this right and include a reverse animation for un-liking/favoriting!
If you’re going to reblog a piece of content, you can toggle the visibility of the attribution within the composer. As a non-seasoned user of Tumblr, I honestly don’t understand reblogging. When I saw the initial reblog window, I tapped the ( x ) to get rid of the attribution out of curiosity. That curiosity may have turned into frustration if the attribution had been completely removed, but instead it turned into a feeling of safety and flexibility once I knew that I could restore it with a tap.
Just another quick video to show the scale and grandeur that Tumblr gives to the following interaction. Moving an element across the entire view is dramatic and, I suspect, highly effective.
I spent a while playing around with the composer, trying to share different content types and seeing what was possible. My favorite interaction that came out of this whole process was the simplicity of reordering images in a gallery. Subtle movements give hints as to where your photo is going to go so that you can build a gallery exactly how you want it.
If you somehow manage to get to this empty dashboard view (trust me, it’s quite hard – Tumblr really never wants this view to be empty so they usually populate it with suggested content), Tumblr adds a nice animated splash. This one is cool to me because it’s so clear that someone put in the time and energy to make this view feel friendly and open, even with the understanding that it might never be seen.
Toggling the show/hide password field also opens/closes the little eye icon. I appreciate the subtlety of this one and that it breaks away from more tradition password visibility toggles!
In my longest-ever Design Details recording, I sign up for a new account with Tumblr to show off the onboarding flow. It’s insane how fast they get users to content so that they can start favoriting, sharing, etc.
About halfway through the video we see a nice tutorial view slide into view. That whole interaction is gorgeous, too – it’s unlike anything else I’ve seen in other app walkthroughs. I love the way it gently pushes the main view out of the way and back into the distance. The motion is buttery and builds up a certain feeling of trust and friendliness.
Some profiles on Tumblr interact with the bottom tab bar in a wonderful way with color and contrast. I found three profiles in this video that all change the color of the tab bar in one way or another, making users feel at-home while looking through vastly different types of content and profiles.
Tapping the little ‘x’ on a suggested card in the feed will slide it gently out of view. Interestingly, the cards will slide off to both the left and right (at random, I believe). This is another one of those details that might not feel like it matters. Will anyone really notice? Maybe, maybe not – but in my opinion this attention to detail breathes life and passion into the app for those who care to notice.
I stumbled across another walkthrough tip and managed to get a pretty clean video of the interactivity here.
Take a look at the micro-copy: how often do you see “Rad” being used as confirmation text? I’d venture a guess: never.
Tumblr adds these small splashes of personality and humanity into different parts of the app which made me feel oddly connected to the product on an emotional level. Mission accomplished.
This detail came through on Twitter – you can scrub along an animated gif to quickly skim or skip to a different section! More apps should have this – I’m looking at you, Reddit!
Another recommendation from Twitter, this is one I can’t believe I overlooked! If you tap + hold to reblog a post, we get this nice bubbly progress paired with an incrementing notes count. This is really great because it can actually save you a lot of time compared to the normal reblogging flow (which lets you edit the post).
That’s the end for now – I hope you’ve enjoyed the post! If you have any other details I may have missed, give a shout on Twitter.
