The Official Ionic Blog

Build amazing native and progressive web apps with HTML5

For a while now, we’ve wanted to update Pull To Refresh in Ionic. It worked, but it wasn’t exciting, and since it’s a goal of ours at Ionic to make every component as enjoyable to use as it can be, we decided it was time for a change. Here’s some of the lessons in semiotics and UX that we learned…

Wanting to make it fun and playful, we started by binding the rotation of the arrow icon to how far you pull down the view. It was fun. Ben and I spent a good ten minutes each just playing with pulling the view down. We quickly realized a problem, though: While it was fun, it was not practical.

Most users don’t sit and play with the pull to refresh animation on their phones; they “use” their phones. They “use” pull to refresh to get the information they want, and they want it now. That means they swipe up quickly and expect the pull to refresh to trigger and update. They swipe so fast, the animation doesn’t even happen.

See the Pen by Ionic (@ionic) on CodePen.

So we went back to a regular fixed-time animation, updated the default icons to be something more visually appealing, and moved on.

The next thing we noticed was that most API calls are pretty fast, perhaps too fast. Our refresher would return to the home position as soon as it was told the information requested was received. This meant that as soon as you let go of the refresher when swiping up, it wouldn’t spin; instead, it would return immediately to the home position. We have an internal Hacker News app we were using to test this (more info on that soon). The front page of Hacker News doesn’t update every five seconds, so most of the time, a refresh does nothing. We were left unsure if an update actually fired.

Setting up console logs allows developers to make sure the refresh actually happened. Users don’t get the reassurance of a console log, though, so your UI must be reassuring enough on its own.

We decided to force 400ms of the refreshing spinner animation. If the data came back sooner, we’d still apply it immediately, but we’d show the spinner for a bit, so the user would know a refresh had happened. To a developer, this may feel misleading. The refresh is already complete, so why are we still showing the animation?

Users don’t care about what’s going on under the hood. A big part of UX is keeping a user in familiar territory and reassuring him or her that the app is working properly. The user’s confidence that the refresh happened trumps its technical representation. In our updated pull to refresh, if an update takes longer than 400ms, it will continue to spin until the data is available.

I think you’ll agree, the end result is a pull to refresh that’s enjoyable to use and communicates its function clearly. I really enjoyed going into this level of critical thinking on just one component. It’s a standard to which I’m proud to say we hold ourselves with every new Ionic feature.

Check out what we did under the hood on GitHub, or take a look at how to add it into your app from our Docs!

  • Juukie14

    You folks are awesome. I love seeing how much time and attention is given to each component. Keep up the good work!

  • http://krzysztof-furtak.pl/ Krzysztof Furtak

    You guys are amazing!!! Thank you!!! 🙂

  • http://www.raymondcamdencom/ Raymond Camden

    Yeah, that seems like a smart decision. When I first tried out this control, and used a simple array push to add data, it *was* so fast I didn’t think it worked right, and heck, I’m the developer.

  • Luděk Roleček

    Great update, I really dig this

    ** since it’s a goal of ours at Ionic to make every component as enjoyable to use as it can be **

    Can we fix input sliders next, please? 🙂

    • Ben Sperry

      Thanks! What specifically would you like to see updated?

      • Siddhartha R

        I think he is using the bare bones HTML5 slider. Android 4.0 to 4.3 give only partial support for the same. So everyone in the community would like to have a custom ionic built slider.

      • Luděk Roleček

        As Siddhartha said, the standard HTML5 input slider don’t work very well on Android and they are extremely unresponsive on iOS (many times you have to tap them several times before you start moving the slider).

        I really appreciate all your work so I don’t want to sound ungrateful but it would be really cool if you guys could make custom control for slider in Ionic with greater compatibility and responsivnes.

      • Pedro Justo

        Hi! I stopped using the “pull-to-refresh” feature because it implied being inside ‘ion-content’ wich was very slow (At least in version beta.11). Also loved the ion-content scrollbar but as I just mentioned, on Android devices it is/was a problem. This problem still persists?

  • Bruno Seixas

    Thanks for your hard work 😉

  • Siddhartha R

    Nice! I had just done the same on beta 11. Too bad I did not share it.

  • http://www.mobilea.nl/ Mark Veenstra

    Thank you and keep up the good work

  • Phemmy

    I love this framework!!!

  • http://tutsbucket.com/ John Kevin Basco

    Looks great! Thanks! 🙂

  • http://www.johncblandii.com John C. Bland II

    I built this into the my last Ionic app so great to see it in the core now.

  • Keith D. Moore

    Totally agree with where you guys landed! Great job!

  • http://seomarketingforum.site88.net/ Zaiyan

    That is just awesome. I am going to apply pull to refresh in my blog app as well.
    Thnks
    Regards,
    shayari

  • alex

    pull-to-refresh is a great work. But how could I pull up to refresh? I have hundreds of items in one list, but i donot want to display all of them at once, so i want to refresh it when user pull up to the bottom. How could I use pull-to-refresh to implement this? Regards.