This project is in progress.
NOTE: I know there is an application in Cydia called Pull To Refresh Safari that has functionality similar to what I’m proposing below. I explain why my implementation is different.
——————————————————————————————————-
I have discussed in the past that my view on pull to refresh is somewhat unorthodox. The convenience of pull to refresh is great, except I feel that it displaces what you’re doing. You have to be at the top of the list, which means you have to scroll back up. That can disrupt what you’re reading or viewing because you want to see new content. But it’s a gamble because if you go through the trouble of refreshing and nothing comes in, you now have to track back to where you are.
As much as people say “Well finish what you’re doing first,” I don’t think the average human brain thinks that way. It’s darting around looking for things to do. And when it comes to content, you’re always wanting the newest and potentially more important showing as soon as possible.
So when it comes to pull to refresh, I want the following things with it:
- The ability to pull and refresh (obvious)
- Being able to pull and refresh and remain where I am in the scrollable view
In pursuit of my goal, I decided to tackle Safari on iOS first. I can imagine that other people share my same view so I made sure to be thorough on how I felt this implementation would work best. My concept below allows me to do both of those objectives above. It is broken down into four sections for your reading convenience.
——————————————————————————————————-
1) Pull to Refresh Text and Handle
I put this as a placeholder for my concept. Due to the fact that iOS 6 is still in beta, I refrained from using the new pull to refresh symbol that is used in Mail. Therefore, this section is short and sweet. This portion will use the same “gear” as what’s in Mail on iOS 6.
2) Linen Background
If you pull down the view now in Safari, it has a darkish background. I felt that this wasn’t an appropriate color for the pull to refresh view so I used linen instead, which resembles the view that is shown on the iPad when you pull down in a Safari view. The linen also brings in some familiar iOS portions which collectively syncs the entire experience together.
3) Address Bar
To ensure that I can’t be displaced from where I am on a page to refresh, I designed the address bar to handle as follows. The address bar will remain static (in other words it won’t ever move) and content flows under it. If you can think of in Mail when you’re scrolling through emails, the list slides under the header? That’s how it would work.
But, it comes with a cool twist. When you scroll down, the header will hide. To make it re-appear, you just begin to scroll up. If you’re in the middle of the page and start scrolling, content will flow underneath the header until it reaches the top of the page. The whole time the address bar will be locked at the top to the status bar. Another cool feature is that if you scroll and you don’t actually reach the top of the page, the Address Bar will auto-hide after inactivity (scrolling up only).
Now here comes the pull to refresh part which I feel is unobtrusive and convenient. To pull to refresh, simply tap the address bar header and drag down. No matter where you are in the view, the whole window will come down showing the linen and the symbol to pull to refresh. After you complete the refresh, it will refresh the page and bring you right back to where you were on the page before refreshing.
4) The Window (or Page view)
The significance of this portion is that the view is independent of the pull to refresh. Since the content slides under the Address Bar header, it won’t conflict with pull to refresh.
——————————————————————————————————-
This implementation would be available on all iOS devices.
√ The ability to pull and refresh (obvious)
√ Being able to pull and refresh and remain where I am in the scrollable view
© 2012 Joshua Tucker
