モバイルアプリ設計におけるマイクロインタラクションの理解

使いやすさは、の重要な要素の1つです。 モバイルUIデザイン. 優れたユーザビリティはしばしば マイクロインタラクション どれが インターフェースからの小さな応答と動作 UIの使用方法を決定するこれらのマイクロインタラクションは、振る舞いを定義し、関与を促し、そしてユーザーがインターフェースがどのように機能するかを視覚化するのを助けます。.

デジタルインターフェース ユーザーと彼らの望ましい目標の間の仲介者です。インターフェイスデザイナーはユーザーを助ける経験を作成する 特定のタスクを実行する. たとえば、ToDoリストアプリには、ユーザーがタスクを整理するのに役立つインターフェイスがあります。 Facebookアプリがユーザーに自分のFacebookアカウントと対話するためのインターフェースを提供するのと同じように.

このガイドでは、さらに掘り下げて説明します。 モバイルアプリ用のマイクロインタラクション. 小さな相互作用は些細なように思えるかもしれませんが、彼らは持つことができます 大きな影響 ユーザーエクスペリエンスの質について適切に行われると、マイクロインタラクションは、包括的なモバイルユーザーエクスペリエンスの純粋な部分のように感じられます。.

マイクロインタラクションの威力

ほとんどの場合、マイクロインタラクションの目的は、 フィードバックを提供します ユーザーの行動に基づく。これはユーザーを助けることができます インターフェースがどのように移動または動作するかを視覚化する, 純粋にフラットスクリーンでデジタルでも.

マイクロインタラクションには力があります 幻想的な体験を作成する. オン/オフスライダは実際には物理的なスイッチのようには動きませんが、アニメーションを通じてこのように動くように見えます。.

私はこの記事で、モバイルアプリ向けのマイクロインタラクションの莫大な価値を議論する素晴らしい引用を見つけました。

“最高の製品は、機能と詳細という2つのことをうまく実行します。機能はあなたの製品に人々を引き付けるものです。細部はそれらをそこに保つものです。そして詳細は私たちのアプリを私たちの競争から実際に際立たせるものです.”

の細部開発の観点からは重要ではないように思われるかもしれませんが、ユーザーエクスペリエンスの観点から見ると彼らは本当に 差をつける OKアプリのUIと特別なアプリのUIの間.

優れたマイクロインタラクションはユーザーを作ります 報われる 行動を起こしたため。これらの行動は 繰り返される そして ユーザーの行動に深く関わっている. 彼らはこれらのより小さなマイクロインタラクションに基づいてアプリケーションを使用する方法を学ぶことができます。ユーザーが行動を実行すると、これらの小さな相互作用が「はい、あなたは私と相互作用することができます」と合図します。

Googleのマテリアルデザインスペックにある例を見てください。ドキュメンテーションは実際には物質的な動きに捧げられた全セクションを持っています. 空間的関係 この方程式の大部分を占めていますが、動きは単なる空間的関係以上のものを決定づける可能性があります。.

ここにあります アニメーションとモーションの最も一般的な用途 モバイルUI / UXデザインでは：

異なるページ間でのユーザーの誘導
特定の行動を教えるためにインターフェースを通してユーザーを導く
特定のページで実行できるアクション/動作を提案する

モバイルアプリは はるかに少ない画面スペース ウェブサイトよりも。これは、ユーザーにアプリの使い方を教えることを困難にする可能性があります。しかし、マイクロインタラクションを適切に実装する方法を知っていれば、驚くほど簡単になることがあります。.

マイクロインタラクションの仕組み

ユーザーがインターフェースの一部に触れるたびに、単一のマイクロインタラクションが起動します。ほとんどのマイクロインタラクションは ユーザーのジェスチャーに対するアニメーション応答. そのため、スワイプ動作はタップやフリックとは異なる反応をします。.

Blink UXはマイクロインタラクションの詳細について議論する素晴らしい投稿をしました。これらの小さなアニメーションは、 予測可能なプロセス ユーザーが学習できること アプリケーション内のすべての対話に対して.

マイクロインタラクションは、インターフェイスを介してユーザーをガイドします。 行動への反応を提供する. ユーザがon / offスライダが動くことができることを知ると、彼らはそれがインタラクティブであることを知ります。応答に基づいて、設定が有効になっているかどうかもわかります。ボタンがクリックされたように見えるとき、ユーザーは 本能的に知っている 彼らはそれと対話することができます.

UXPinによると、基本的なマイクロインタラクションはすべて4つのステップに分けられますが、そのプロセスを 三段階.

アクション - の ユーザーが何かをする フリック、スワイプ、タップ＆ホールド、またはその他の操作のように.
反応 - の インターフェースが応答する 何が起こるべきかに基づいて。画面をスワイプするとブラウザの履歴に戻る、またはON / OFFスライダをタップすると設定がオフになる.
フィードバック - これは何ですか ユーザーが実際に見ている 相互作用の結果として。ユーザーがモバイルブラウザでスワイプバックすると、前のページが画面の「上」に表示されるように浮き上がることがあります。オン/オフスライダは、画面に圧力がかかると滑らかに滑ったり大きくなったりすることがあります。.

これらの非常に小さなアクションはアニメーションなしで実行できますが、優れたマイクロインタラクションは リアル感 フラットデジタルインタフェースへの リアルなアニメーション効果. これらはインターフェースに命を吹き込み、より多くのユーザーインタラクションを促進します.

詳細を探す

デザインの細かい部分を見ることで、アプリが特定の動作にどのように反応するかを理解できます。.

リフレッシュする は、現在普及しているマイクロインタラクションの好例です。 iOSが最初に起動したときには不可欠ではありませんでしたが、多くのアプリがこのアイデアを採用して動き始めました。今すぐ更新してプルすることは、フィードUIを閲覧するときに使用することをほとんどのユーザーが知っているよく知られた動作です。人気が急増しているモバイルハンバーガーのメニューについても同じことが言えます。.

すべてのマイクロインタラクションを作る 現実的でシンプル. アニメーションを無理しないでください。 退屈になる それらがあまりにも詳細で、頻繁に使われるようになるならば。ユーザーは、メニューアイコンをタップするたびに輝きを表示したくない. バランスをとる 通信する本物の価値で インターフェースの仕組み 乗り越えずに.

いくつかの例を見る

私は何かを学ぶための最善の方法はそれを行うことであると思います、そして次に良い方法は他人の仕事を研究することです。私はほんの一握りを集めました UI / UXマイクロインタラクションアニメーション 有能なDribbbleユーザーから、本物のモックアップでどのように見えるかを説明します。.

アプリケーションはそれぞれ異なり、アプリケーションの機能に基づいてニーズも異なります。結局、ほとんどのユーザーは同じことを望んでいます。 直感的 そして 質の高いユーザーエクスペリエンスを実現 ユーザの行動に関連したマイクロインタラクション.

1.アニメーションイベントアプリのUI

最初の例は、Ivan Martynenkoによって作成された気の利いたカードアニメーション機能です。気づくでしょう 一握りのマイクロインタラクション このデザインでは、特にカードのスワイプと細部の移動.

カードをタップするとサイズが大きくなります。そして、購読ボタンをタップすると、ユーザーのプロフィール写真が購読者のリストにスライドします。すべてがインターフェースにとって非常に直感的で非常に自然な感じです。.

インタラクティブ演習画面

このクリエイティブなモバイルエクササイズアニメーションは、デザイナーのVitaly Rubtsovによるものです。それはユーザーが1組のスクワットのために彼らのトレーニングを保存することをデモします.

各アニメーションが同じであることに注目してください 弾性バウンス効果 メニューが開いてスナップクローズしたとき。これは、アクティビティが「完了」としてチェックされている場合も同様です。. 一貫性 彼らはすべて感じる必要があるため、マイクロインタラクションの鍵となります 同じインターフェイスに接続されている.

3.アプリのマイクロインタラクションを検索する

短く、甘い、そして要点に。私はこれがLukas Horakによって設計されたこれらの検索アプリマイクロインタラクションを最もよく説明すると思います。すべてのアニメーションは 早くてもなお目立つ.

このようにしてマイクロインタラクションを設計します。 過度の複雑さを避ける. もしアニメーションがなければインターフェースが速くロードされるのであれば、なぜそれを追加するのは面倒です? クイックアニメーション ユーザーの操作に煩わされることなく、ユーザーの行動を継続させる.

4.フィットネス目標マイクロインタラクション

私はJakubAntalÃÂ??ÂÂÂ-kが本当に彼のフィットネス目標マイクロインタラクションで公園の外にこれを打つと思います。すべてのスクリーンはこのジグリーなジェロ感を持っています。 形はとても流動的に動く.

それでも、インターフェースも感じます 頑丈で使いやすい. 目的を持って作られたマイクロインタラクションは、それでも楽しさと面白さを兼ね備えていますが、機能的で実用的なものでもあり得ることを示していきます。.

5.アニメーションを更新するために引っ張る

これがRamotionのチームによって作成された私の絶対的にお気に入りのpull-to-refreshアニメーションの一つです。これだけじゃない 流体をまねる プルアクションを使いますが、応答アニメーションは スムーズに接続する 液体のしぶきからローディングサークルへ.

この 細部へのこだわり モバイルアプリのマイクロインタラクションの真の美しさを引き出すものです。.

タブマイクロインタラクション

タブ付きウィジェット 画面が小さいため、モバイルアプリではかなり一般的です。 John Noussisによって作成されたこのマイクロインタラクションが本当に好きです。ただし、より速いスピードでより効果的になると思いますが、アニメーション自体は素晴らしく、よく考えられています。.

新しいコンテンツが右から跳ね返るように、タブアンカーの矢印が右に滑ります。それはの錯覚を与えます 画面全体が物理的に動く 右の方へ。アニメーションは絶妙ですが、とても遅いので、ほとんどのユーザーは数日後にイライラすると思います.

7.プレロードアニメーション

私はあまり話しませんでした ローディングバー この記事では、これらは全体的な経験にとっても同じくらい価値があります。ほとんどのユーザーはデータがロードされるのを待ちたくありませんが、ロード中は空白の画面を見つめたくありません。.

Bret Kurtzは、この素晴らしくプリロードされているスクリーンを、楽しさと有益さを兼ね備えています。ユーザーは実際には 楽しませた この小さなアニメーションを繰り返し見ます。彼らはまたすることができます 安心した アプリケーションは まだデータをロード中 そして墜落していない.

まとめ

これらの例はすべて、マイクロインタラクションの価値を見事に実証しています。ユーザーにとって、モバイルアプリはマイクロインタラクションからより多くの価値を得ます。 物理的に画面に触れる 彼らの指で。ユーザーは自分のデスクトップモニターや自分のノートパソコンの画面をタップしませんが、誰もが自分のスマートフォンをタップするのです。 対話性のデフォルト状態.

それは はるかに個人的な経験, これが、モバイルアプリの設計がそのような理由になる理由です。 微妙なプロセス. 適切に行われると、優れたモバイルマイクロインタラクションを追加することで、 強力な幻想的なユーザーエクスペリエンス ピクセルと動きに他ならない.