Webサイトとマイクロインタラクション

初めに

この記事は「UXを高めるマイクロインタラクション実装 byゆめみ② Advent Calendar 2018」の20日目の記事です。
（投稿したのにリンクを忘れていました）

• マイクロインタラクションとは？
• Webサイトにおけるマイクロインタラクション
• 考えるケースごとの理解
• 実装例など
• あとがき

この記事では上記の内容についての私見を書いていきます。
今回が初めてのアドベントカレンダー投稿になります。
皆さまの役に立つ記事であってほしいあわよくばMVPを掴み、MBPが欲しいという気持ちで書かれた記事になります。

記事の内容がぶれることを防ぐためにも自身が記事を書く際に置いた前提条件を次のセクション
「マイクロインタラクションとは？」
に書いておきます。

マイクロインタラクションとは？

ユーザビリティやUXを向上するために設計されたユーザーアクションに対する細かくも適切なフィードバックを指す。
主に下記のように設計、実装・実現される。

• 細かなアニメーションや音、動作などでアクションに対するステータスを伝える
• アクションに対して、その結果や次に操作するべきものへ視線を誘導するアニメーションなど

これらはユーザビリティの向上やそこから得られるユーザー体験（UX）の向上を目的にしたもの。
UXデザイン・設計における1要素であり、考え方、概念、用語。

この記事では上記を基にして「Webサイトにおけるマイクロインタラクション」について書いていきます。

Webサイトにおけるマイクロインタラクション

どのような場面でマイクロインタラクションの必要性や考え方が出てくるのか考えてみます。
前提としてどういったところにアクションが存在し、それに対するレスポンス、フィードバックが必要でしょうか？

ユーザーアクションへのレスポンスであることからクリックやタップにより押されたときや、マウスホバーに対する設計・実装が主ではないでしょうか。更にユーザーアクションということであればスクロールに対するレスポンスも少なからず存在するはずです。
また近年ではUIの実装としてフリック操作を用いたものも一般化されつつあり、マウスでの疑似フリック（ドラッグ）に対応したものも少なくありません。このことからフリックに対するマイクロインタラクションという実装幅が増えており、モバイルファーストの考え方もあることから、今後も増加していくでしょう。現状Webで見かけることは少ないと思いますが音声入力に対するマイクロインタラクションなどもその内議論されることになるように思います。

すぐに思いつくものだけでも下記のようなUI、ケースでマイクロインタラクションの考え方が活きてくることになります。

• 操作可能なUIへマウスホバーしたとき
• ハンバーガーメニューのアイコン変化やメニュー展開アニメ―ション
• タブやアコーディオンUIの展開アニメーション
• スライダーでPREV、NEXTが押されたときのボタンに対するアニメーション
• スライダーでアクティブになったスライドの強調表示
• ページローディングのプログレスアニメーション
• ページ全体に対する現在のスクロール位置をバーのように表現するアニメーション
• ラジオボタンやチェックボックスなどが押されたときの状態遷移アニメーション
• フォームの入力の完了、残項目数を表す
• 現在の入力文字数の変化を表す
• お問い合わせフォームでの適切なフィードバック
• ToDoやショッピングアプリなどで何かの追加、削除をわかりやすく示す

考えるケースごとの理解

上記で挙げた中からいくつかピックアップし、簡単にではありますが説明、紹介を行います。

「操作可能なUIへマウスホバーしたとき」

アニメーションなどを付ける頻度としてはこれが一番多いと思います。リンクやボタンなどクリック、ドラッグ可能であることを示すなど、普段当たり前に目にしているこれらもマイクロインタラクションといえるでしょう。

考えられるマイクロインタラクション

• リンクにホバーしたときに下線が消える（または表示される）
• ボタンにホバーしたとき操作可能であること、または操作できたことを示すアニメーションなど

考察・補足

ユーザビリティを考えると最低限何かしらの変化によって操作できることは示すべきです。
ボタンなどに対するUIパーツの移動や縮小を伴うアニメーションはボタンと背景の境界で思わぬ動作を引き起こすことがあるので実装時に注意する必要があります。
（移動などでホバーが外れ、連続してホバーとホバー解除を繰り返し、点滅するような動作に……）

「ハンバーガーメニューのアイコン変化、メニュー展開アニメ―ション」

ハンバーガーメニューは一般的に3本の横線で構成されるアイコンとそれが押されたときに展開されるメニューです。スマートフォンに向けたUIとして有名だと思いますが最近ではPCサイトでもハンバーガーメニューをナビゲーションに用いているサイトも珍しくないと思います。
アクションによるメニューの展開に合わせて、アイコンが変形し、「閉じる、戻る」アクションを示すアイコンに変化するよう実装されることが多いでしょう。アプリ、Webサイト問わず見かける既に一般化されたUIパーツだといえるのではないでしょうか。

考えられるマイクロインタラクション

• 中央線が消えて、上下線を「×」になるようアニメーション
• 3本線が「←」になるようアニメーション
• アイコンを中心に背景、コンテンツが展開されていくアニメーションによりメニューへの画面遷移を明確にする

考察・補足

上記のようなアニメーションによりコンテンツ内容が切り替わり、メニューなどが展開されたこと、同じ箇所のクリックによって閉じる動作が行えること、行える動作が変わったことをユーザーに知らせる。
サイトの印象づけやUXのため、情緒的な演出に重きを置いているものもあります。ページ数が多いなど頻繁なページ遷移のあるサイトだとあまりに過度な演出は逆にUXを損なうことに繋がりかねません。効果的に使えば視線誘導や没入感の付与などUXの向上に繋げることができるでしょう。

「タブやアコーディオンUIの展開アニメーション」

タブやアコーディオンはページ遷移せず表示したいコンテンツ量が多い時や、カテゴリなどと紐づいたコンテンツを整理して表示したいときなどに用いられるUIパーツです。こちらに関してはかなり以前から用いられているものだと思います。ある意味でアコーディオンメニューのベースとなる発想だと思います。
（非表示の要素をアクションをトリガーにして表示する）

• タブはトリガーとなる要素が押されたときコンテンツ部を切り替えて表示するUI要素です。
• それに対してアコーディオンはトリガーを押されたときに非表示にしている要素を表示するものとなります。

UI	イメージ
タブ	重ね合わせている要素を切り替える
アコーディオン	折りたたんでいる要素を展開し表示する

考えられるマイクロインタラクション

タブ

• 押されたタブのトリガーを変化させて、クロスフェードでコンテンツを切り替える（コンテンツ変化をユーザーに示す）
• 現在のタブのトリガーから押されたトリガーへと下線などがアニメーションするようにしコンテンツ遷移をより明確に示す

アコーディオン

• コンテンツの高さをアニメーションし、最大まで展開することでコンテンツへ視線を誘導する（必須要件に近い）
• アコーディオンのトリガーに矢印などがあるのであれば、反転させることでもう一度押すと閉じることを示す

考察・補足

どちらも非表示にしていた要素を表示するUIのため、アニメーションなどで適切に視線誘導を行い、コンテンツの変化を明確にすることが必要となるでしょう。これはハンバーガーメニューでも共通です。
スマートフォンにおいてはコンテンツの掲載量の関係からアコーディオンが使用される頻度は高く、コンテンツの切り替え時にコンテンツ頭までスクロールする処理なども場合によっては必要になることが考えられます。
（新たに展開されたコンテンツ内容を見失うことを防ぐ）
（スクロール操作を強制するものはユーザーに混乱を招くこともあることに注意が必要）

「お問い合わせフォームでの適切なフィードバック」

操作に対して適切なフィードバックがないと不安や不信、最終的にサイトの離脱に繋がることになります。中でもお問い合わせフォームなどは顕著だと考えられます。項目を選択したり、文章を入力した苦労の後に送信できているのか結果が不明確であるというのは決定的な不信や徒労だったという印象に繋がりかねません。

考えられるマイクロインタラクション

• 問題ないのであれば入力完了を示すように送信ボタンが押せることを明確に示すなど
• 入力内容に問題があるのであれば、ユーザーの入力時に適した内容へ誘導するようにする（リアルタイムバリデーション）
• 送信時にエラーが起きたのであれば、まだ送信できていないこと、どう行動すべきかを示す（解消手段や代替手段の提示）

考察・補足

ユーザビリティとしての補足になりますが前提として何をするUIなのか明確でなければいけない。
（ラジオボタンとチェックボックスを混同するようなUIは避けたい）

その上で入力内容に問題があるのであれば可能な限りポジティブに、どうすべきなのか入力内容を誘導する。

	メッセージ
ネガティブ、不明瞭	「エラーがあります。」「不正な値です。」
何をどう改善すべきか明確	「パスワードには半角アルファベット大文字を1つ以上入れる必要があります。」「住所は必須項目です。」

実装例など

簡単なものですが実装例など掲載できればと思います。

シンプルなリンク

See the Pen Simple Link by Yuichi A (@cf_rit) on CodePen.

アニメーションつきボタン

See the Pen Ripple Effect Button by Yuichi A (@cf_rit) on CodePen.

ハンバーガーメニュー

See the Pen Simple Hamburger Menu by Yuichi A (@cf_rit) on CodePen.

あとがき

ユーザビリティやそこから派生してUXを考える際に操作したときのわかりやすさ、気持ちよさ、自然さは重要なものだと思います。UIであるなら最低限、操作できること、操作ができたことを示す必要があるでしょう。
ユーザーが使いやすいサイト、印象に残るサイトを作り、より良いUIアニメーションやUX設計などを考えていきたいですね。その中でマイクロインタラクションの考え方が活きてくることになると思います。

感想

初のアドベントカレンダー記事でしたが構成、校正ともに割く時間が足りなかったなと思います。実装例はフォーム関連やスクロールに合わせたインジケーターのようなものも実装し掲載したかったのですが業務やプライベートの事情で時間が作れず、投稿前の10-30分で書くことに。

また実際のサイトに乗せることを想定した案件レベルのコード掲載を予定していたのですが趣味のレベル、動きを再現するだけになってしまった点は大きな改善点として悔いが残ります。総じて書きたい内容をまとめきれなかったかもしれません。ですが記事を書くこと、投稿すること自体に意味はあると思いますので、こうして投稿させていただきます。
次回、記事を書く際にはもっと構成を考えた上、要点を絞って書く必要を感じた12月20日でした。

拙著ではありますが誰かのお役に立てば幸いです。