デザイン

デザイン

デザイナー要確認!!ツールチップをマイクロインタラクションとして使う方法【UXを向上させサイトのポテンシャリティを引き出す】

2,882 views

読了時間 : 約1分52秒

アプリ、ソフト、プログラム、ユーザインタフェースに新規ユーザを引き込むのにツールチップほど効果的なアプローチはありません。

目的がはっきりしていて分かりやすく、ユーザも他のものに気を取られることなくツールチップの指示通りに作業を進めることができます。

本記事では、ツールチップの効果的な使い方や注意点などをご紹介します。

 

 

ツールチップの目的

ツールチップの役割はUXの向上に尽きます。

ただ、目的がはっきりしているとはいえ、ツールチップの良し悪しがそのままUXに結びつくので注意が必要です。

 

・見慣れないアイコンやボタン

ユーザが見慣れていないようなアイコンやボタンがあるときは、インターフェイスにツールチップを入れることをおすすめします。

どこかで見たことがあるようなデザインになっていても、ユーザに一言説明するのがベターです。

unfamiliar-tooltip

 

・付加的な情報

重要な情報ではなく、あくまで補足的な情報にするというのがミソです。

スクリーンが文字で埋め尽くされないようにするためのツールチップなので、ユーザにとって使い易く・分かりやすくなるようなさりげないサポートをさせましょう。

 

何にでも向いているわけではない

ツールチップは間違った使い方をするとUXを損なってしまいます。

 

・使いづらいデザイン

ユーザが何度も何度もツールチップに頼らざるを得ないような場合、デザインに何かが根本的に欠けています。

ツールチップはあくまで補助的な役割なので、要注意です。

 

・ツールチップのコンテンツとのインタラクション

ユーザがいざツールチップのコンテンツに頼ろうとカーソルをかざしたとき、ツールチップが消えてしまっては本末転倒です。

CTAはきちんと目立つように強調しておきましょう。

link-tooltip

 

 

ツールチップデザインのコツ

 

・ミニマリズム

マイクロインタラクションとしてユーザの助けになれるよう、色・コピー・言葉の選び方を意識して、伝えるべきことがユーザにきちんと伝わるようにしましょう。

wistia-tooltip

 

・サステナビリティ

いつ、だれが使っても便利で使い易くなるように誠実につくりましょう。

 

・気づきやすさ

ツールチップは探さなくても見つかるようにするか、わかりやすく矢印をつけたりしましょう。

 

・分かりやすく端的に

ツールチップが使えるスペースは限られています。

必要な情報を短い言葉で端的に伝えるよう意識して、余計なものは入れないようにしましょう。

 

 

マイクロインタラクションとしてのツールチップ

ツールチップはインターフェイスが使い易いものになるようユーザを助けてくれる究極のマイクロインタラクションです。

デザインの良し悪しでUXの良し悪しをも左右します。

ツールチップ本来の目的を忘れずにデザインして、必要な情報を分かりやすく端的に伝えるよう気を付ければ大丈夫なので、ぜひ意識してみてくださいね。

 

(※本記事は、How to Use Tooltips as Microinteractionsを翻訳・再構成したものです)

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

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

 
・利用可能店舗:メルカリ、コンビニ、ドラッグストア等
・金額:1000円分
※さらにメルペイスマート払で2000円分ポイント!
 友達招待でお互いに1000円分ポイント!2人以上招待でUSJ貸し切りイベントに抽選招待も!

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

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

無料

 

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

期間中の金・土限定でd払い利用で最大20%のdポイント還元中!
■エントリー期間:2020/2/29(土)23:59 まで
■キャンペーン期間:2020/2/24/(月)23:59 まで

 

 

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

【Uber taxi初回利用2000円オフクーポン】
JP20gd6nv7

 

以下のリンクから『プロモーション コードを追加する』で「JP20gd6nv7」を入れてください。初回利用が2000円オフになります!
※プロモコードは日本国内でのみ利用可能

 

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

 

アプリDLはこちらから↓

Uber

Uber

 

 

 

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

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

 

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

 

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

 

アプリDLはこちらから↓

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

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

無料

 

おすすめ新着記事

おすすめタグ