Wednesday, January 18, 2012

Introduction to the TouchPaging user interface

Until TouchPaging: Introduction to ideas for creating an easy to understand user interface.
Even if you do not press the small tab bar you can switch between tabs quickly with TouchPaging.
TouchPaging is not just used in iPhone/iPad but is one of the characteristics of Sleipnir. Today, I want to introduce to you just how the TouchPaging in Sleipnir Mobile for iPhone/iPad became what is today.

Scroll just like usual

The main feature of TouchPaging is that you can [scroll just like usual]. Because of this, anybody can start using it without having to go through tedious instructions. In order to achieve this, TouchPaging has been made to start only when scrolling at the very edge of the screen.
First of all, it is necessary to have a space between pages. If the user does not when a page ends and when a page starts, he might accidently jump to the next page.


Just like when scrolling

If the same scrolling system is going to be used, then of course TouchPaging should be displayed in the same way as when scrolling normally.
The background and shadowing displayed when scrolling at the edges of the screen are actually the same as with the iOS. The background when TouchPaging has been made so it is the same as usual so there is no sense of awkwardness. If a different color appeared in the background when scrolling you might not know what is happening.

Incidentally, we have made the depth of the shadowing a little weak because the distance between pages isn't very large and to improve performance.

Enter the mode

The next thing we thought of was how to reload tabs. Even with the limitied memory of the iPhone and iPad, there are still occasions when opened tabs are reloaded. Just moving to the next tab results in reloading them.

In order to solve this memory-wasting issue, we created a mode so that tabs are not reloaded every time. Because of this, it is possible to smoothly and quickly go all the way to the furthest open tab.

Informing when you have entered the mode

Next, it is important that the user realizes that he has entered the mode. This is the reason why when starting TouchPaging, the page shrinks and when going back, the screen is set to fit a certain size. Even so, we still made sure to display everything as obviously as possible to provide the feeling that you are directly switching between pages.
Also, we have made it so the display is automatically fixed when you remove your finger, so that you do not become confused about how to exit the mode. We have also made sure to minimize the time it takes to fix the display so that you do not waste time waiting.

Determining which tab is selected

We thought that it would be easier to use if you could tell which tab you are trying to switch to when using TouchPaging. We believe it is very important that you can predict what the results will be of the operation you are about to perform.
Incidentally, if you look very closely you can probably see that only when starting TouchPaging does the distance for the next tab to be highlighted become short. We have made it short only at the start so that you can start quickly with a swipe. Even then, you can see which tab is being switched to, making it easy to operate as usual regardless of the distance.

Mac/PC does not enter the mode

TouchPaging is also included in Sleipnir 3 for Mac and Windows, but they do not enter the mode. The reason for this is that unlike the iPhone and iPad, the Mac and PC do not reload every time. Just going to the next tab is enough, reducing the waiting time.
Even for the same usage and same operations, we are always trying our best to provide the best results by changing the operationability for each version of Sleipnir.
For more information about Sleipnir 3 for Mac, please click here.
Please join us on Facebook for Sleipnir for Windows!
Please join us on Facebook for Sleipnir Mobile!
Please join us on Facebook for Sleipnir for Mac!
Please follow us on Twitter.

Thank you.

No comments: