プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.5

Post on:2021年6月8日

デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。
プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。

第5弾は、ユーザーエクスペリンスやインタラクションに関するテクニックです。

UIとUXの印象がよくなるデザインの知識とテクニックのまとめ

UI & UX Micro-Tips: Volume Five.
by Marc Andrew

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

はじめに

次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがあります。

UIのデザインにちょっとした一手間を加えるだけで、クライアント、ユーザー、そしてあなた自身が本当に満足できるものを作ることができるかもしれません。

第5弾となる今回は、ユーザーエクスペリンスやインタラクションに関するデザインテクニックです。前回までの小技は、以前の記事をご覧ください。

1. フォントサイズやグリッドは時にはルールを曲げてもよい

私はtype Scaleや8ptのグリッドシステムのルールに従うことを強く推奨しています。しかし、時には、計算から導き出されたフォントのサイズやグリッドから離れて、視覚的によりよく見えるようにデザインすることをお勧めします。
参考: 本文と見出しのフォントサイズを数学的にバランスの良い比率でデザインする -Type Scale

ルールは曲げられるもので、時には破られるものであることを忘れないでください。

フォントサイズやグリッドは、時にはルールを曲げてもよい

左: ルールに沿ったデザイン、右: 見栄えをよくするために調整したデザイン

2. エラーメッセージは親切で分かりやすいものにする

フォームを実装する際にはエラーメッセージで、何がダメなのか、どうすればいいのかを具体的に説明するようにしましょう。通常のフォームと同じくらいありふれたものであっても、常にユーザーに情報を提供してください。

メッセージをユーザーにとって有用なものにして、不安にさせないようにします。

エラーメッセージは親切で分かりやすいものにする

新規登録のフォーム
上: この項目は間違っています。
下: このメールアドレスは登録済みです。ログイン、またはパスワードを再発行してください。

3. ロード中は何が起きているのか分かるようにする

ロード中に要素のスケルトンを表示すると、レイアウトを素早く伝え、何が起きているのかユーザーに確信させることができます。システムステータスの可視化は重要な原則であり、ユーザーに何が起こっているのかを知らせることができます。

ユーザーに推測ゲームをさせないように、最初から情報を提供するようにします。

ロード中は何が起きているのか分かるようにする

左: ロードが完了するまで何も表示されない、右: ロード中にスケルトンを表示

4. アクションを実行した際に何が起きるのか分かるようにする

結果をもたらす可能性のあるアクションを使用する際は、常にユーザーに詳細な情報を伝えるようにしてください。特に、何かを完全に削除するなど取り返しのつかない結果を伴うアクションに当てはまります。

例えば、「削除する」と書かれた赤いボタンをクリックする前に、それをクリックすると何が起こるのか分かりやすく伝え、確認を求めるようにします。

アクションをした際に何が起きるのか分かるようにする

左: ボタンのみ、右: リセットするボタンであることを詳細に伝える

5. タブバーには重要なアイテムだけを表示する

アプリのタブバーは、スクリーンのスペースを有効に利用できるので、賢く使用してください。アプリで最も頻繁に使用するアイテムのためにタブバーのエリアを確保し、使用頻度が高くないアイテムは「その他」の中に隠します。

小さなタブバーには重要なものだけを置くスペースがあります。

最も重要なアイテムがタブバーで優先表示されるようにする

下: 使用頻度が高くないアイテムは「その他（More）」の中に隠す

6. ドロップダウンに重要なアクションを隠さない

デスクトップで表示した際に、今でも時々このようなことがあります。ユーザーが必要とする重要なアクション（サインアップやログインなど）がドロップダウンの中に隠されており、ユーザーはそのアクションをすることができません。

重要なアクションはアクセスしやすく、最も期待される場所に配置してください。

重要なアクションはドロップダウンに隠さない

上: 重要なアクションがドロップダウンにある、下: アクセスしやすい場所に配置

デザインにちょっとした調整を加えるだけで、あなた自身とユーザーの両方にとってより良い結果が得られるということを少しでも理解いただけたらと思います。

sponsors

top of page

©2024 coliss