クックパッドで学ぶデザイニングWEBインターフェース : 第５原則...

クックパッドで学ぶ デザイニングWEBインターフェース

第５原則

トランジションを利用しよう

トランジションを使う理由人は動くものに対して無意識のうちに注意を向けてしまう。 その法則をうまく利用すればインターフェースにとって強力な武器になる。

トランジションの定義ここではトランジションを 「一定の時間にわたって生じる特殊効果」と定義する。

トランジションの役割トランジションは、インターフェース上で起きる動きを なめらかにする潤滑剤の役目を果たす。 ユーザに何が起きたかを明確に伝え、ユーザの行動を促す。

トランジション効果から見た トランジションパターン

・対になって使われる２つのパターン ・明るくするとそこに注目が集まる。 ・ディスプレイの一部だけ輝度を上げる方法はないので、ウィンドウ全体の明度を下げ、インターフェースの一部だけを通常の明度で表示しておくのが典型的な実現方法。

明度/濃度の増減

例：ライトボックス

例：操作準備中の状態

・ページ内にインレイを表示する際によく使われる方法 ・明度／濃度の増減より注目を集めやすい（動きの変化は色の変化よりも印象的なため） ・オーバーレイとの違いは、ボタンとの結びつきや、どのコンテンツに適用されるのかがはっきりする。インライン方式なのでコンテキストが保たれ、隠されてしまうことがなくなる。

展開／折りたたみ

例：アコーディオン

トランジションの目的から見た トランジションパターン

・ユーザを引きつけて喜ばせる ・ユーザの行動に対して報酬を与える

エンゲージメントを高める

・ストーリーの魅力を高め、唐突な飛躍を埋め合わせ、アクションをより具体的で信用できるものにすること ・各トランジションには役割があって、その役割を理解して使用する

コミュニケーション

コミュニケーション目的の トランジションをさらに分類する

No1.

コンテキストを維持したまま ビューを切り換える

例：カルーセル

例：アコーディオン

例：チェックボックス

No2.

結果を直ちに説明する

例：数値の増減

No3.

オブジェクト間の関係を示す

例：ズーム（flickrから）

No4.

注目を集める

例：セキュアアピール

No5.

体感性能を向上させる

例：ローディング

No6.

仮想空間の錯覚を生み出す

例：Mission Control（MAC OS X）