Rethinking the Trello Refresh interaction
I love Trello. But there is something that bugs me, and I thought I’d think of an alternative.
I’m talking about the refresh interaction on the iOS app. Basically, when you pull down, a Trello logo starts to form the further you pull down. I think it’s actually very well done…but it bothers me to see 2 Trello logos up there, together.
These are a few of the alternatives I considered (and why I didn’t go for them):
- Animate the header Trello logo as you pull down: not exactly hard to notice, but not very clear about when you can stop pulling down for the refresh to happen.
- “Refresh” appears, moving down and going from opacity 0 to 1: again, when the interaction is done is not clear, since there wasn’t anything telling you you had pulled far down enough.
- Adding drawing a box around “refresh”: I felt putting another shape up top (next to the logo) wasn’t the ideal solution. Plus, the design of the app doesn’t use borders on boxes.
The prototype
For the final prototype (best viewed on desktop or an iPhone 5S), I stuck with “Refresh”, but added a proggress bar that fills up as you pull down. I felt this gave a clear sense of when you could stop pulling down. Also, when you raise your finger from the screen (and the screen bounces back up), it’s the logo un the header that animates while the app refreshes.
Final prototype: http://share.framerjs.com/iaitzenhzv0l/
