体験を伝える―『ガジェット通信』の考え方

面白いものを探しにいこう 本物を体験し体感しよう 会いたい人に会いに行こう 見たことのないものを見に行こう そしてそれをやわらかくみんなに伝えよう [→ガジェ通についてもっと詳しく] [→ガジェット通信フロアについて]

マイクロインタラクションで気をつけたい5つのポイント

本稿は、Free Code Campのブログ記事を了解を得て日本語翻訳し掲載した記事になります。

本記事は、UX in Motionの設立者で、ワークショップを主宰しているIssara Willenskomer氏によって投稿されました。

 

この記事では、私が一週間をかけて数多くのUIアニメーションを観察した末に気づいた、マイクロインタラクションで気をつけたい5つのポイントを解説します。

最初にマイクロインタラクションとは何でしょう?これについては明快な説明を与えています。

「マイクロインタラクションとは、デバイス上でひとつのタスクだけをこなす最小単位の要素」

 

1. デザイナーとしてのエゴを抑制すること

デザイナーであれば、称賛を受けて自分のエゴを満たしたいと思うかもしれません。しかし質の高いマイクロインタラクションをデザインするには、作業中はデザイナーとしてのエゴを忘れることが重要です。

次の例は、Sergey Valiukh氏のデザインしたアニメーションです。アニメーションは新しいアイデアが上手く機能するか実験するには絶好の土台ですが、彼の実験したアイデアは失敗しています(彼はフォント、レイアウト、配色、アニメーションにおいて非常に優れたデザイナーですが)。

このアニメーションの失敗の原因を分析します。
第一に、画像の3Dフリップ機能です。これは全く不必要で有害でさえあります。マイクロインタラクションにおいては、それを省いたらデザインがシンプルになるような無駄な部分は、省くことが正解なのです。
第二に、画像はフィード表示において切り取りされますが、編集ビューにおいて全画面表示になります。これは明らかに機能的ではありません。
第三に、上のナビゲーションメニューのアイコンは、画面遷移に時間が長くかかり過ぎです。最初は素晴らしいデザインに見えるかもしれませんが、そのうち長い待ち時間にうんざりするでしょう。マイクロインタラクションは迅速であることも重要で、最大でも300~400ミリ秒の時間内にスムーズに実行されるべきです。
最後に、画面下の2つのアイコンは表示されるタイミングが異なります。これは紛らわしく余分な設計であり、かえってユーザーの認知的負荷を増やします。

 

結論

この例のようなアニメーションを設計することには大きな価値があります。しかし、機能的なものとそうでないものを区別し、削るべき無駄な部分を判断して、エゴを忘れ、シンプルでユーザビリティに優れることが重要です。

これはデザイナーが楽しくて美しい詳細を設計してはいけないということではありませんが、デザイナーは自分にとって満足できる細部のデザインが、余分な部分にならないよう注意するべきです。

 

実践のポイント:削るべき余分なところを見極めましょう。

あなたの設計した詳細なアニメーションは、シンプルでユーザー体験を高める効果のあるものですか?それとも逆にユーザーの認知的負荷を増やすものですか?

 

2. クリエイティブなデザインを作るためにストーリー性を犠牲にしない

ユーザーエクスペリエンスにおいては、さまざまな理由からストーリー性が重要です。

1つには、ユーザーの予想、継続性、認知的負荷と関係するという理由からです。また、私たちの脳が情報の意味を理解し整理するプロセスと関係するからでもあります。

 

次の例では、Srikant Shettyはストーリー性を台無しにしています(同氏は非常に優れたアニメーター、デザイナーですが)。その原因を分析してみましょう。

まず最初に、フォームの奇妙さに気づくと思います。ユーザーは、インライン入力できると予想します。しかし表示されている入力フォームの行は偽物で、入力できません。

本物の入力フォームはその後ろに隠されています。入力する行をタップすると、隠されていた入力フォームが現れてやっと入力可能になります。

ユーザーが入力フォームを使うときに予想するイメージが阻害されているのです。ユーザーは予想通りにタスクやフローを継続することができず、一度立ち止まって、予想外の状況に対処しなければなりません。

 

このような誤りは、デザイナーが「クリエイティブ」なデザインを創造しようとするときに生じます。

インタラクションにおけるイメージを維持することよりもクールな効果やテクニックを優先するため、こういったことが起き得ます。その結果インタラクションは不明瞭なものになります。

 

優れたマイクロインタラクションは、シンプルでフローを備えています。先の例と次の2つの例を比較しましょう。

画像:Andrej Radisic(上) & Matt D. Smith(下)

これら2つの例においては、シンプルで的確です。上の例では、行が跳ねるような効果のある要素が使われていますが、基本的なインタラクションモデルに、面白さを追加できるデザインの細部として機能しています。

実践のポイント:シンプルに設計する

 

3. 単一の動きで実装できなければ、実装しない方がいい

私が観察した限り、成功しているマイクロインタラクションは、例外なく単一の統一された動きで構成されています。一方、失敗しているマイクロインタラクションは動きが複雑です。

次の例で、Romain Passelande氏は間違いを犯しています(同氏はDribbbleのサイトでとてもクールなポートフォリオを公開していますが)。原因を分析しましょう。

1 2次のページ
TechAcademyマガジンの記事一覧をみる
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。