🦁

強力なマイクロインタラクションでプロトタイプを改善

2021/02/10に公開

(原文) Powerful microinteractions to improve your prototypes

プロトタイプは、その性質上、最終製品に比べてあまり洗練されていないように設計されています。しかし、だからといって、プロトタイプをできるだけ完成させてはいけないということではありません。完成したアプリがどのようなものになるのか、ユーザーに良いアイデアを与えたいと考えています。これにより、製品を可能な限り最高の状態で見ることができ、それがどのように動作するかを正確に知ることができます。しかし、どのマイクロインタラクションに注目するのが最も重要なのでしょうか？見てみましょう。

プロトタイプに追加できるマイクロインタラクションは無限にありますが、多くの場合、何が起こるかを口頭で説明するだけのボタンで終わってしまいます。ボタンを押すだけで、実際にどんなことが起こるかをユーザーに見せることができたらどうでしょうか？

マウスオーバーエフェクト

マウスオーバーエフェクトを使用する方法はいくつかありますが、その中には、マウスオーバーボタンやハイライトされたテキストをマウスで表示させる方法もあります。何年もの間、特定の広告会社では、広告リンクの上にマウスオーバーすると小さなポップアップが表示されるようになっていました。

また、小さな線を追加したり、画像をズームインしたり、ボタンをポップアップさせるミニアニメーションを追加したりして、マウスオーバーのマイクロインタラクションを作成することもできます。もう一つのオプションは、マウスが何かの上を移動したときにマウスが変化するようにすることです。ゲームでは、これは検索アイコンや手がオブジェクトの上に表示されることを意味します。

タップエフェクト

Instagramについて考えてみましょう、気に入った画像をダブルタップすると、投稿にハートが追加されます。これは非常に小さなインタラクションですが、プロトタイプアプリに追加することで、よりプロフェッショナルに見えるようになります。タップエフェクトを作る方法は無限にありますが、画面上の情報に誰かが反応することができるものは何でもそうだと考えられます。ハートや「いいね！」、それに似た反応なども含まれます。

タップエフェクトを再生するもう一つの方法は、画面上の何かをタップしてハイライトさせることです。これは通常、記入が必要なフォームに見られるもので、入力したいフィールドをタップすると、そのフィールドがライトアップされるのを見ることができます。フィールドが入力可能な状態であることを確認するこのシンプルな確認は、ユーザーエクスペリエンスを形成するのに役立ちます。

タップ＆ホールドエフェクト

もう一つの選択肢は、画面上の要素をタップしてホールドすることです。これはFacebookのようなアプリやサイトで見られるもので、「いいね！」ボタンを長押しすることで異なる反応を選択することができます。アプリにこれを追加する場合は、ユーザーがアクションを実行したときに少しのアニメーションや波紋効果で、より多くの報酬を与えることを検討してみてください。

触覚フィードバック

何かアクションをしたときに携帯電話が振動したことはありませんか？これは触覚フィードバックと考えられており、状況によっては非常に便利です。いくつかのアプリでは、ユーザーが試みていることが可能ではないことを警告する方法としてこれを使用しています。タイマーのように、2つの時間帯の間をマークするために使用することができます。

バイブレーションは、ユーザーが実際に聞いていない場合にアプリを使用する場合に便利です。触覚フィードバックを持つことで、より迅速な通知が可能になります。

スクロールで表示

マイクロインタラクションに関して言えば、ユーザーが基本的な情報を見ているだけであっても、スクロールして表示することで、ユーザーの体験をよりエキサイティングなものにすることがわかります。これは多くの場合、スクロールするとより多くの情報がポップアップしたり、小さなアニメーションで新しい要素が表示されたりするように行われます。

スライドイン、スライドアウト

何かの上にマウスを移動させると、別のメニューが突然表示されてイライラすることがあります。このような操作をほんの少し変えるだけで、よりスムーズなユーザーエクスペリエンスを実現することができます。例えば、メニューがポップアップするのではなく、メニューをスライドさせて表示させることができます。また、作業が終わったらスライドさせて元に戻すこともできます。

このインタラクションは、画面をスワイプして、メールでも写真でも何でも、画面上にあるものを消すか保存するかを可能にすることで、モバイルでも活用できるかもしれません。比較的簡単にすべてのものを見やすくすることができます。

システムフィードバック

ほとんどの人は、アプリが動作しているかどうか、あるいは先ほどのインタラクションが実際に実行されているかどうかを確認するのを待つ忍耐力がありません。このために、システムフィードバックマイクロインタラクションを作成することができます。これは、ユーザーに何かが起こっていることを知らせるだけのものです。

フォームを送信したり、ボタンをクリックすると、回転する円、回転する砂時計、またはアプリがそれに取り組んでいることを知らせる別のシンボルがあることに気づくことがよくあります。これはユーザーにとっては安心感があり、開発者にとっては簡単に追加することができます。もう一つのオプションは、メッセージを送信したり、相手のデバイスに到着したり、メッセージが読まれたりするときのアイコンを変えることです。これは、Facebook Messenger、WhatsApp、その他多くのメッセージングシステムで見ることができます。

マイクロインタラクションはそれほど複雑である必要はありませんが、人々がアプリと対話する方法を確実に変えることができます。より良いプロトタイプであればあるほど、承認される可能性が高くなります。UXPinを試してみませんか？