menu

12.11.02

category

comments

0

trackbacks

0

permalink

Interaction Concept of Swiping to Go Back

iPhone5's 4inch screen has the problem when you tap the 'back' button on the navigation bar while you hold the device by one hand.
Apple insists there is no problems on them (in their ad), but in fact there is.

Recently, you can see the apps which has 'back' button on the tool bar (on the bottom of screen) or has function that swiping left to right in order to go back.
 
These are very functional, but seems temporary measures.

So we (@we6tr0n and @zuccoi) improved them and made the concept.
It is based on gesture and visual feedback, also it suits for the current iOS UI.

Interaction Concept of Swiping to Go Back from webtron Inc. on Vimeo.


• the back button indicates amount of swiping in it as a visual feedback.
• when swiping on the content view is not allowed by some reasons, swiping on the tab bar or tool bar will be the another way.
• while you are swiping on the tab/tool bar, the cover layer is shown on it as the visual which means user can't tap its buttons.
• this concept adapt to closing a modal view.

related link : runLoop run]; (entry by @zuccoi)


iPhone5で採用された4inchスクリーンでの問題として

・片手持ちをしている時に、ナビバー上の「戻る」ボタンに親指が届かない、
 届いたとしても少し無理をする必要があって iPhoneを落としそうでこわい

というのがあります。アップルはCMで「何の問題もないよ」と言っていますが、ちょっと無理矢理感があります。そんなわけで、最近では以下のような機能を提供するアプリも目にするようになりました。

・画面を左から右へスワイプすることで「戻る」ことができる
・「戻る」ボタンを画面の下部のツールバー上にも配置

これらはとても有効ですが、暫定的な印象もあります。
僕たち(@we6tr0n@zuccoi)はこれを一段階進めたコンセプトをつくりました。
スワイプジェスチャ + 視覚的フィードバックを基本的な機能として、いままでのGUIにフィットするようなものです。

・スワイプ量に応じた視覚的フィードバックとして Back ボタン内にインジケータを表示する
・画面全体をスワイプできないケースでは、タブバーやツールバー上をスワイプ
・タブバー・ツールバーをスワイプしている間はバーをカバーするようなレイヤーが表示されボタンが押下されないことを明示
・モーダル画面を閉じるケースにも応用できる

まずはビデオを見てみてください!

関連リンク:runLoop run];(@zuccoiによるエントリ)

add your comment

Name
Mail
URL

comments

up down

comments


up down