Fixing Twitter
When it comes to motion innovation in digital products, you have two options: building or iterating. The following is how I iterate an interaction, using the Twitter iOS app.
Building
Building is what you do when you have no motion to work with. You have your screens and flows (or perhaps even a single screen), and you need to begin the process of wiring these screens together temporally. As I’ve written in a previous article, motion that supports usability does so by serving in an explanatory capacity to the user, providing brief narratives between conceptually distant states.
Iterating
Iterating is what you do to dial in motion. Because motion in user experiences is so incredibly multi-variant, it is difficult to formulate strong design principles, which is why I advocate an iteration heavy approach. Simply changing the velocity curves can have a huge impact on the design and unless you build out multiple versions, you’ll never know the difference.
To keep myself fresh in between projects and teaching, I look for opportunities to improve existing products. I was not hired by Twitter to improve their product, I just felt like doing it and sharing my process and the results.
This interaction immediately caught my eye as a great example of two conceptually distant yet related states that had clear mental model implications for the user. The path forward seemed clear. However, the product design seemed to be unaware of the role motion could play to support this interaction.
I hurried to capture the interaction with my phone. As someone who teaches motion innovation in user experiences, I’ve learned that app updates can permantly remove great references.
It became apparent to me that if I was going to design a solution that was better for the user than the default iOS component transition, I had to factor in user intent, mental models, and what I call cognitive chunking of elements.
In a previous article, I write about four key elements of a successful motion:
- Continunity
- Narrative
- Relationship
- Expectation
Motion doesn’t need to have all four to succeed, but as a heuristic, if you are challenged to identify any of these, I would consider that a red flag.
I started off by cataloging all the differences between the two states, something I encourage my students to do. I spotted 9 differences. Two of those differences were text reflows, something that is difficult to solve with motion.
Text reflowing is challenging because there is no way to build it in a way that doesn’t call attention to itself. Each increment of reflow causes the text to ‘pop’. This has the effect of hijacking user attention and pulling the eye toward insignificant areas. Text reflowing is cognitively expensive for users, and should be avoided.
This is one of the reasons why I advocate using motion to push back on design (when appropriate) through the use of motion studies. Motion studies communicates the temporal nature of the interaction to the design team, in ways that they may not have been aware of.
If you have to build text reflow motion, it is best to cross dissolve between the states, and do it as quickly and cleanly as possible. When you capture app interactions and analyze them in slow-motion, you’ll find that a lot of world class digital products employ this ‘cross fading’ technique.
While I don’t like this technique (I feel that it is using motion to solve problems in the design, why not go back and just fix the design?) it can get the job done.
After analyzing the differences, I started thinking about user intent, mental models, and cognitive chunking.
User intent
In this case, the user is simply wanting to tweet a reply. Cognitively I would interpret this as wanting to isolate the object and perhaps zoom in a little, while I type my reply. This is what is reflected in the design of the screens, but the motion undermines this.
Mental models
The ‘dolly and zoom’ principle that I write about here, serves as a way of fulfilling on user intent. We simply push in. While there is no signifier, the interaction begins to feel a little like an affordance – our expectation of the interaction is such that we expect the tweet to isolate, perhaps by coming closer.
Cognitive chunking
When multiple elements are transitioning, it helps to prioritize them for the user by chunking them. This allows us to not have everything animate differently, and disrupt the coherence of the narrative.
My process
I simply grabbed screenshots of the two screens, brought them into Photoshop, sliced the differences, and imported the PSD into After Effects. After about 20 minutes, I was able to create what I feel is an improvement over the interaction as it stood. Click here to download the After Effects project file.
Results
In my example on the right, I maintained continuity by making the hero object persist from screen to screen. There is also a strong sense of the relationship between the two states. I’ve simplified the narrative and added coherence, as well as preserved expectation.
If you want to play with my After Effects source file and see what solution you come up with, click here.
This was partly accomplished by cognitively chunking the iOS keyboard with the Twitter writing component, and adding cross fades to solve the text reflow challenge. Regarding the top elements, I worked with existing user mental models for ‘back’, as well as spatial models for the title.
Conclusion
As you can see, same designs, different motion solution. The complexity of motion process requires high levels of iteration as part of the design process, with an emphasis on hypothesis generation and testing of ideas.
I’m putting together a course that teaches the frameworks I am using. If you want me to email you when the online course becomes available, click here.
If you’re interested in chatting with me about an onsite motion innovation training for your team, click here.
