A minimalistic Twitter app for Android that I designed and developed that focuses on simplicity, user experience and airplanes.
Aeroplane was my first Android app that I designed, developed and published from the ground up. Definitely nostaligic. The following was written in 2016.
In 2014, Twitter did not have a native Android app and the third party selection was few and far between. To paint a picture back then, Material Design was not even released yet as a design language for Android. I ❤ Android and design — and thus I set out to create Aeroplane for Twitter.
About the design
Iteration after iteration is apart of design, period.
A lot of unseen work is always done before a final product is released. Good design always seems obvious at first but under the hood, a lot of ideas are conceived, fleshed out, implemented, tested and if it doesn’t work — thrown out. It’s the nature of the design process.
Twitter’s simplicity in information can be used in a multitude of ways. Its simple structure easily allows for an easy — re-structure. Various content arrangements, layouts, actions and animations are just a few things that a designer can play around with.
There are several factors that make Twitter a nearly ideal playground for UI design. The obvious ones are the growing popularity of the service itself and the relatively small scope of a Twitter client. Twitter is such a simple service overall, but look at a few screenshots of these apps, especially the recent ones, and you will see some very different UI designs, not only in terms of visual style but in terms of layout, structure, and flow.
In 2008, I was inspired by a Twitter client that blew every other app out of the water. At a reminder, Twitter itself did not even have an official app for iPhone let alone Android. This app was called Tweetie and it was considered the gold standard for Twitter clients. It boasted a simple design, used standard iOS interface elements yet brought an innovation that we take for granted today. This was pull to refresh and contextual actions that were revealed through a swipe gesture behind a list item. Both of these gestures are employed in a lot of apps today that originated from Tweetie. The developer, Loren Brichter’s mark in mobile interface design will live on forever.
Around when Android 4 was released, the Twitter client ecosystem on Android was in a similar state where there didn’t exist any Twitter clients that I considered beautiful. A lot of them were merely functional and paid little attention to design. None of them seemed polished, not like Tweetie. Some were feature packed or loaded with way too many options. Some had major UI inconsistencies and complexities which bogged down the user experience. I wanted to create a simple interface which stripped away options, settings and visual complexity.
Brichter’s use of contextual actions was brilliant. It had options for power users while keeping the UI minimal for simplicity.
Inspired, I leveraged his design for contextual actions and embellished them in a paper paradigm.
Skeuomorphism and Animation
Paper as metaphor before Material Design
Instead of long pressing or swiping, AeroPlane utilized a single tap gesture to bring up contextual actions. I found it redundant that other Twitter apps would have the user tap on a tweet would take you to another screen which showed the same tweet again plus a few controls. Some apps asked the user to take 3 or more times before they could retweet or favourite. I thought, why not accelerate this user journey and provide them inline? Each card has its own set of actions which was revealed on the underside of each card.
The beauty of using skeuomorphic elements is that when a user is exposed to something familiar, they can extrapolate from previous experiences to discover and guess how to interact with new UI patterns. If their guess and mental model is right — it even gives off a sense of delight knowing they know how to use a product without any lesson or tutorial.
Animations as a clue
Animations are more than visual delight but can help form a users mental model on where they are in a product, what state the product is in and what they can or cannot do.
Animations communicate context such as
tweets sliding in to indicate that they are new to the feed
flipping a tweet to show contextual actions relevant to the other side
sliding a tweet out of view to indicate its deletion
It would be pretty jarring for example when deleting a tweet that instead of sliding out of view that it would disappear instantaneously — losing its skeuomorphic effect.
Animation informing navigation
Another animation that I wrote was the transition between one screen of the app to another. Each new screen would enter from the right and overlay itself on top. As you navigate deeper into the app, you can envision a bunch of screens (or cards if you will) stacked on top of each other. If the user wanted to go up a layer in the app hierarchy, the reversal of this animation would play out and the card would pop off. This would indicate that they were removing the top card off of the ‘pile of cards’.
I decided to use a completely new screen for the composer. This allowed having the whole screen dedicated to composing a tweet: using the entire screen real-estate for function. In addition, this screen appeared from the bottom and animated upwards to indicate its modality. This mean they it could also appear anywhere in the app as long as it was related to creating a new tweet.
The mock above is one of the iterations that was created to lay out a user profile. I eventually scrapped this idea because it followed a lot of what other popular Twitter apps were already doing and was a poor differentiator. Instead I wanted to leverage banner image that users were setting on Twitter to inform the visual mood of a profile.
I went for a two pane approach; one pane showing user information while the other pane showed a contextual list of elements depending on current selection. It could either show the user's tweets, user's followers or who they were following. Both panes contained transparency for the personalized banner image to peer through.
A user's Twitter banner becomes the backdrop of their profile.
Using separate fragments allowed the profile information to be loaded independently of the user’s timeline. From a experience point of view, while the the tweets are being fetched from Twitter on the right pane, the user can consume the profile bio on the left which the app had pre-loaded before entering this screen.
When composed together, the profile information can load first so the user can read the bio while the tweets are being fetched.
To remain consistent with the card paradigm I created for tweets, contextual actions for the list of profiles followed suit. Using an existing pattern that a user has already learned is cognitively less draining instead of having to learn a new piece of UI.
Lastly, the second pane always peeked into the view when opening a user’s profile. This indicated that there was more to scroll to the right since you could see a portion of the list. It also served as a handy way to notify the user that the list has finished loading as it would subtly slide in from the bottom of the screen when it was finished.
About the name
It wasn’t always called AeroPlane — it was formally known as TweetFire. I wanted this application to be bold and aggressive which explains this fiery red and the current colour of the application today.
A lot of popular Twitter clients are named after birds and I was inspired to select a name that flew through the air. My internet name is AeroEchelon and inspired by that the name AeroPlane took off.