UIにマイクロインタラクションを! より良いUXのための7つの秘訣

Dmytro Svarytsevych

Dmytroは、SoftServeのデザイン部門ディレクター兼SoftServe Unitedブログの寄稿者です。Dmytro氏はこの業界に13年以上携わっており、UIデザインやインタラクションデザイン、モバイルデザイン、IA及びUXを専門としています。

この記事はWebdesigner Depotからの翻訳転載です。配信元または著者の許可を得て配信しています。

7 secrets for enhancing UX with micro-interactions (2015-07-06)

私たちは、本の良し悪しをその表紙で判断しがちです。良いデザイナーはそれを理解した上で、機能的なUIにおいてもキャッチーさを忘れません。しかし、キャッチーさはユーザーの興味を惹きつけることはできるかもしれませんが、購入などのコンバージョンに結びつくとは限りません。

きちんとビジネス目標を達成できるように彼らを引き込むには、どうすればよいのでしょうか?

この問の答えを探す中で、最終的にはユーザーに最も焦点を当てた「人間中心のデザインアプローチ」が不可欠であるということが分かるでしょう。つまり、人間らしさが大事であるということです。皆さんのアプリケーションは、感情が込められていて、口語体で、そして「魅惑的な」外見で、私たちが普段慣れ親しんでいる表現で作られているべきなのです。またUIは、ユーザーがより良い体験ができるようにアドバイスをしたり、ユーザーを笑顔にしてくれるような良き友である必要があります。

そのようなUIにするにはマイクロインタラクションが有効です。さらに正確に言えば、インタラクティブアニメーションがUIをより魅力的にしてくれます。優れたアニメーションというものは、ユーザーに対して以下のような機能を持っています。

・状況を伝え、フィードバックを提供する

・より直接的な操作を行っていると感じられるようにする

・自身が行ったアクションの結果を分かりやすくする

UXにおいて重要なことは、皆さんがどのようにユーザーに対応するか、そしてユーザーが製品を使用する際にどう感じるかということです。どんなに細かい部分であっても、しっかりと注意を払う価値があります。マイクロインタラクションは、ユーザーにとって必要なフィードバックを与え、何が進行中なのか分かりやすくすることで、UIの背景に複雑な論理があってもUIを親しみやすいものにしています。

 1. システムの処理状況を知らせる

 Jakob Nielsen氏によって提唱された最初のユーザビリティに関する重要なポイントは、サイトで今何が起きているかについてユーザーに発信し続けるということです。ユーザーは早いレスポンスを期待していますが、サイトが反応を返すまでに時間がかかる場合もあります。

よって、UIは背景にグラフィックを表示したり、ビットレートを測定したり、または音声を流すなどすることによって、今何が起きているかをユーザーに伝え続ける必要があります。ファイルの転送においても同じです。それはつまり、ユーザーを飽きさせないために、現在行われている処理を表示するということです。転送の失敗などユーザーにとってあまり嬉しくない通知であっても、面白い見せ方でユーザーに表示するべきです。ユーザーを笑顔にさせましょう!

001b


001c

2. 強調する部分を変える

スペースを節約するために、必要に応じてアプリ内のボタンを別のものに置き換えることがあります。そして場合によっては、ユーザーがその置き換えに気がつくように知らせる必要があります。そういった時にアニメーションはユーザーの注意を惹きつけ、こちらが気づいてほしいと考えているものをユーザーが見落とさないようにしてくれます。

002a

002b

002c

3. コンテキストを維持する

小さな画面のスマホやスマートウォッチが台頭する時代において、たくさんの情報を1つの画面に表示させることが難しい場合もあります。この状況の解決策として、異なるページ間のナビゲーションを分かりやすいものにするという方法があります。そうすることで、ユーザーはどこから何が表示されたかを理解することができ、簡単に前のページに戻ることもできます。このナビゲーションの事例は多数あります。

003a 003b

4. 見慣れないレイアウトでも簡単に使えるようにする

前の例の続きとして、マイクロインタラクションは、ユーザーが見慣れないレイアウトのものを操作する方法を瞬時に理解できるようにサポートする必要があります。前方にめくることができる写真やスクロールできるグラフ、代わる代わる表示されるキャラクターは、どれも優れた事例でしょう。

004a

004b

004c

5. コールトゥアクション

マイクロインタラクションには、アプリケーションを効率的に操作できるようにサポートする以外にも効果があります。マイクロインタラクションが魅力的になればユーザーをアプリケーションに引き留めることができ、コンテンツを見続けさせたりSNSに共有させたりするなど、ユーザーに実際にアプリケーション内で行動を起こさせることもできます。

005a

005b

005c

6. データ入力を視覚的にする

データ入力は、あらゆるアプリケーションにおいて最も重要な要素の1つとなっています。ユーザーが結果的に感じるアプリのクオリティは、データ入力に左右されると言っても過言ではありません。普通、データ入力はとても退屈なものになってしまいがちですが、マイクロインタラクションはこの処理を特別なものに変身させることができます。

006a

006b


006c

7.  チュートリアルを活性化させる 

そしてもちろんアニメーションは、差し障りなくアプリケーションを使用するために必要な基本的機能や操作を強調することで、アプリケーション配信後にユーザーに使用方法を伝えやすくします。

007a

007b

007c

まとめ

もし皆さんがUXを重要だと考えるならば、マイクロインタラクションやアニメーションで面白味を加えて、UIを隅々まで洗練させてください。それによって皆さんのプロジェクトもさらに活気づくでしょう。

人とコンピューター間の優れたUIを作るためには、あらゆる細かい部分に気を配ることが大切なのです。