デザイン

デザイン

超初心者のためのマイクロインタラクション説明書

921 views

読了時間 : 約3分52秒

この記事では、強力なマイクロインタラクションが何であるか、インタラクティブなプロトタイプでそれらを使用してユーザーの顔に笑顔を浮かべる体験を作り出す方法について説明します。

 

 

マイクロ・インタラクションとは?

マイクロインタラクションとは、1つの主要なタスク(目的は1つ)を持つイベントで、デバイス全体やアプリ内で見られます。その目的はユーザーを楽しませることです。魅力的で歓迎的で、デザインにほんのちょっぴりの人間らしさを加える方法です。

 

具体的には、Googleマップで州境を越えると、あなたを新しい州に迎える小さなメッセージが届きます。 Instagramでは、スクリーンショットを撮ると、アプリケーション内で共有機能を使用するよう促す通知が表示されます。

 

これらはマイクロインタラクションの例です。あなたが瞬きすれば、それらを見逃すかもしれない。マイクロ・インタラクションが特別なであるのは、その繊細さによってUXを高める強力な武器になりうるからなのです。

 

 

いつマイクロ・インタラクションを使用するのか

マイクロインタラクションを使用する機会は数多くあります。肝はディテールにあり、私たちがほとんど目にすることのないような方法で経験をナビゲートするのに役立つのがマイクロインタラクションです。クリエイティブなことをするチャンスです。曲を変更する、またはスキップするなどの単純なことは、マイクロインタラクションを追加する興味深いチャンスです。

 

Carrie Cousins氏によると、マイクロ・インタラクションは、

  • ステータスやフィードバックを伝える
  • アクションの結果を見る
  • ユーザーが何かを操作するのを助ける

 

あなたが目を覚ました瞬間から眠る瞬間まで、Webサイトやモバイルアプリで100以上のマイクロインタラクションに触れている可能性が高いでしょう。

 

マイクロ・インタラクションは、UXデザインを向上させることができます。

 

マイクロインタラクションを見つけることができるいくつかの例があります:

  • 設定を変更する
  • あなたの携帯電話のロックを解除する
  • チェックアウトに何かを追加する
  • 何かをオンまたはオフにする
  • 好きなことや何かを共有している
  • 単一のタスクを実行する
  • デバイスを一緒に接続する

 

 

マイクロ・インタラクションを作るには?

プロダクトデザイナーであり作家のDan Safferは、マイクロインタラクションに関する本を書いています。その中には、マイクロインタラクションの構造が詳述されています。彼は効果が出るようにその材料の概要を説明します。

 

マイクロインタラクションの4つの主要コンポーネントは次のとおりです。

  • 引き金
  • ルール
  • フィードバック
  • ループとモード

 

トリガーとは、微妙なやりとりから始まるものです。クリック、スワイプ、タップ、プルの間で変化します。

 

ルールはマイクロインタラクションに適用されるため、それに応じて応答します。ルールによって何が起こるかが決まります。

 

フィードバックは、何かが起こっていることをユーザーに知らせる。これは、アニメーション、ポップアップ、または他の相互作用の範囲の形で来る可能性があります。

 

ループとモードは、微小相互作用の長さと、繰り返すか、時間の経過とともに変化するかを決定します。

 

 

マイクロインタラクションの設計:ベストプラクティス

マイクロ・インタラクションが何であり、どのようなもので構成されているのかが分かりましたので、マイクロ・インタラクションを成功させる設計について、いくつかのベストプラクティスを見てみましょう。

 

1.単純にする

多くのマイクロインタラクションとやりとりをしているのであれば、それらのやりとりはできるだけシンプルに保つことが最善です。作用が複雑すぎると、ユーザーの疲労を招く可能性があります。

トリッキーさを避け、マイクロインタラクション1つ1つに価値と意味を加えることに集中しましょう。

 

2.一貫性を維持する

マイクロ・インタラクションは、ユーザーを喜ばせながら、できるだけ気付かれないようにするべきです。簡単な作業ではありませんが、設計全体の一貫性が達成されると簡単になります。

特定のカラーパレットを使用している場合や、特定のガイドラインを使用してアプリを作成している場合は、独自のマイクロインタラクションを作成する際にこれらの境界内に留まりましょう。

無駄な驚きはユーザーエクスペリエンスを損なう可能性があるので、テーマがあればそれを実行してください。マイクロ・インタラクションと強力なマイクロ・コピーを組み合わせて、その一貫性を保ちましょう。

 

3.理由を考える

なぜあなたはこのマイクロインタラクションを選択していますか?それはなぜ必要なのですか?マイクロインタラクションは、経験するのが楽しく、さらに楽しく設計できますが、マイクロインタラクションの目的を決して忘れることはありません。見た目がかわいく見えるので、デザイナーはそのデザイン中に自身の意図したオーディエンスを見失ってしまうこともよくあります。

 

4.プロトタイプ

あなたが良いアイデアを持っていると思うのは大切ですが、あなたに良いアイデアがあることを「知る」ことはもっと大切です。プロトタイピングを行いましょう。あなたが持っているアイデアをテストし、再テストし、テストします。

 

 

 

結論

マイクロインタラクションは、ユーザーエクスペリエンスの設計の重要な部分です。

マイクロ・インタラクションのポイントは、ユーザーエクスペリエンスを向上させ、ユーザーエクスペリエンスを損なうものではないため、細部への注意が推奨されます。

 

 

▼こちらの記事もおすすめです!

 

 

 

 

 

※本記事はMicro-interactions: a complete beginner’s guideを翻訳・再構成したものです。

【コンビニでも使える!メルペイ初回利用1500円分招待コード】

当サイト限定招待コード:CMUTDF

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:500円分
※さらにメルペイスマート払で1000円分ポイント!
 友達招待でさらに500円分ポイント!

メルカリ-フリマアプリ&スマホ決済メルペイ

メルカリ-フリマアプリ&スマホ決済メルペイ

無料

 

ピックアップ! さらに今このキャンペーン中です↓

ポイント50%&20%還元『メルペイフィーバー・メルペイサンデー』
■キャンペーン期間:2020/03/01 ~ 2020/03/31

 

 

【MOV初回限定 合計2,000円相当無料クーポン3枚】

クーポンコード:seleqt2000

 
対応地域:神奈川県、東京都、大阪府、京都府、兵庫県(新登場)
 
2000円オフで登録» »MOVの初回利用2000円オフのクーポンを使って登録はこちら!
 
アプリDLはこちらから↓

MOV《モブ》- タクシー配車

MOV《モブ》- タクシー配車

DeNA Co., Ltd.無料

 

 

 

Seleqtをご覧頂いた方だけに「朗報」
\当サイト限定特別クーポン/

【UberEats初回1000円オフクーポン】
interjpq2206j2tw

 

対象店舗:マック、ガスト、スタバ、ピザハット、松屋 等
※1000円分無料で頼めます。〇〇円以上とかもナシ!完全無料でお試しOK
割引額:1000円引き

 

1000円オフで登録» »当サイト限定の初回利用1000円オフのクーポンを使って登録はこちら!

 

アプリDLはこちらから↓

Uber Eats: 地元で人気の料理をお届け

Uber Eats: 地元で人気の料理をお届け

無料

 

おすすめ新着記事

おすすめタグ