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

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

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

 

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

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

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

 

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

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

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

このアニメーションの失敗の原因を分析します。

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

 

結論

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

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

 

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

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

 

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

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

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

 

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

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

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

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

 

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

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

 

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

画像：Andrej Radisic（上） & Matt D. Smith（下）

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

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

 

[PR] Webデザインで副業する方法とは

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

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

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

アニメーションに慣れていない方には分かりにくいかもしれませんが、単一の動きとして統一できるはずの動きが、2つの別々の動きに分けられています。

1. 変形する線
2. 回転するアイコン

線が変形するのが1つ目の動きで、アイコンが回転するのが2つ目の動きです。次の例で並べて比べると違いが分かりやすいです。

左と右のアニメーションは「単一の動き」の法則に反しています。中央のアニメーションだけが、単一の統一された動きで構成されています。シンプルで効率的な動きです。

実践のポイント：マイクロインタラクションは、単一の統一された動きで構成しましょう。

 

4. 問題はアニメーションではなく、デザインにある

UIアニメーションの微妙なニュアンスを研究する人は皆、デザイナーが「静的なデザイン」から「動き」を分離するのは難しいという問題に直面します。

これはもっともなことであり、優れたマイクロインタラクションが継ぎ目のない動きを備えていることにも起因します。

 

一方、失敗したマイクロインタラクションは非常に目立ちます。

次の図表は、デザインとアニメーションの関係性に関する理論を示したものです。

一般的には、点と矢印のある領域（良いアニメーション×良いデザインの領域）を目標とすることになるでしょう。

この理論を現実に応用してみましょう。

 

次の例では、デザインをアニメーションから分離する練習を行います。Sam Thibault氏は、あまりクールではないデザインに、優れたアニメーションを加えています（同氏は、Hanndsomeに勤める非常に才能のあるデザイナーですが）。

「このデザインは斬新で優れているのになぜ？」と疑問に思うかもしれません。

たしかにその通りですが、ここで問題としたいのは、「カートに追加（add to cart）」ボタンの扱い方についてです。

 

この例の場合、悪いデザインをアニメーションによって解決することは不可能です。問題はアニメーションではなく、デザインそのものにあるからです。

「カートに追加」ボタンには、形を変えて画像周辺のガターを占領するという、変形効果が加えられています。この効果は不必要であるだけではなく、「カートに追加」ボタンのUI要素としての重要性を考えれば、ユーザーの認知的負荷を増やします。

 

映画製作の世界では、セットの問題は脚本に起因すると言われています。悪い脚本は悪い撮影シーンを生み出します。それと同様に、悪いデザインは悪いマイクロインタラクションを生み出すのです。

実践のポイント：アニメーションに頼る前に、まずデザインの意味を考えましょう。

 

5. 打たないショットは100％外れる

このメッセージは、アイスホッケー選手のウェイン・グレツキー氏の名言です。

彼はアイススケートのリンク上で、対戦相手の攻撃を軽快に滑ってかわしながら、ゴールのネットにボールを入れるのを得意としています。この名言は、マイクロインタラクションをデザインするデザイナーについても当てはまります。

 

ほとんどのデザイナーは300〜400ミリ秒のアニメーションをデザインすることに慣れていないため、デザインの細部を制御することは難しく、それらに隠されたチャンスに気づくことが難しいのです。

比喩で例えるとしたら、これは複雑なジャグリングであり、ボールを見失って落とすのはたやすいことなのです。

 

Ivan Bjelajac氏による次の例は、デザインの細部で表現できるはずの5つのチャンスを逃しています。

1. メニューボタンと「戻る」ボタンは、アイコンの変形をシンプルに美しくデザインするチャンスです。しかし、最初のトップページ全体がメニューアイコンのスライド効果で覆われるため、統一感のないデザインになっています。
2. 四角形の黄色い右向き矢印アイコン ――この回転効果、スケール効果は不必要です。この矢印アイコンだけが主張するデザインは奇妙です。コンテンツに合わせた画面遷移にするべきです。
3. 画面遷移において、テキストコンテンツに加えたこのフェードイン・フェードアウト効果は不必要です。一貫して表示したままの方がいいでしょう。
4. 見出しごと左から右にスライドさせていますが、コンテンツだけをスライドさせた方が、よりシンプルに美しくなるでしょう。
5. メイン画像は、バナー表示されるときに切り取り効果が加えられています。画像はありふれた方法で表示するのではなく、コンテキストに合わせて再構成することが理想です。

 

細部のデザインに十分な注意が払われた次の例と比較してみましょう。

これほどシンプルで美しいマイクロインタラクションは想像できません。あらゆる手段が講じられ、細部のデザインは完璧です。

実践のポイント：デザインの細部に注意を向けましょう。あらゆる手段を講じましょう。チャンスを逃してはなりません。

 

結論

あなたにこれまでアニメーションをデザインした経験がないとしても、シンプルな美しいマイクロインタラクションをデザインすることは可能です。大事なコンセプトは次の5つです。

1. エゴの抑制
2. ストーリー性
3. 単一の動き
4. アニメーションは万能の解決策ではありません
5. デザインの細部にはチャンスが隠されています

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

これからデザイナーとして働きたい、自分で思った通りのデザインを再現したいと思っている方はぜひご覧ください。