すべてのWebデザインプロジェクトで従うべき優れたUIデザインの10のルール

ハードコードされた、変更されないHTMLを備えたGeocitiesサイトの時代は終わりました。 今日のサイトとアプリは動的でインタラクティブです。 デザイナーとしての私たちの仕事は、彼らが私たちのWebUIデザインと対話するためのインターフェースが可能な限り理想に近くなるようにすることです。 幸いなことに、それが役立つほぼ普遍的なルールがいくつかあります。 あなたが将来のすべてのウェブデザインプロジェクトを強化できるように、私たちは最高のデザイン原則であると私たちが考えるものをまとめました。

すべてのWebデザインプロジェクトで従うべき優れたUIデザインの10のルール

私たちのYoutubeチャンネルを購読する

1.ユーザーが必要とするすべてのものにすぐにアクセスできるようにする

Webデザインアプリの一連のデザインツール、ビデオゲームのキャラクターの在庫、スプレッドシートなど、ユーザーが必要なものを見つけられない場合は、ソフトウェアから跳ね返ります。 タブは物事にアクセスできるようにします。 ショートカットとホバーツールチップも。

たとえば、Diviを整理するためにタブを使用することを選択しました。 必要なすべてのツールは、カテゴリ別に分けられて、ビルダー内にあります。 ツールバーも同様にアクセスできます。 WordPressを使用している場合、管理ツールバーを使用すると、投稿エディター、テーマカスタマイザー、プラグイン設定などにすばやくアクセスできます。 オプションには明確なラベルが付けられており、検索する必要はありません。

別の例は、ヘルプ/サポート/連絡先オプションです。 UIを設計するときは、モバイルアプリ、Webアプリ、WordPress Webサイトなど、ユーザーは常に[ヘルプ]ボタン（または[サポートに連絡]ボタン）を見つける必要があります。 彼らは絶対にいつかあなたに連絡する必要があるでしょう。 そのため、ヘルプボタンは常に前面中央に配置する必要があります。 ディビを見てください。 すべてのモジュールで、必要なときにいつでもすぐにサポートボタンを利用できます。

その上、ヘルプウィンドウがポップアップし、使用している機能に関するビデオチュートリアルが表示されます。 このモジュール内を含めることにより、Diviははるかにアクセスしやすくなり、イライラすることが少なくなります。 さらに、UIの一部として、ヘルプの場所は製品全体で一貫しています。 それが次のポイントにつながります…

2.一貫性を保つ

少し前に言ったように、UI内の機能の配置に一貫性を持たせることが重要です。 ただし、UIが機能し、製品全体で一貫しているように見えることにも注意する必要があります。 あるページの上部と別のページの下部にメニューを配置しないでください。 ロードするたびにメニュー項目を並べ替えないでください。 あなたのユーザーがあなたのサイトのどこにあるかを知っていることを確認してください。 ブログ投稿の下に連絡フォームを保持している場合は、それを省略しないでください。 ユーザーは気づき、困惑します。

一貫性にはフォントも含まれ、デザインはページからページへと機能する必要があります。 ヘッダー/本文のフォントをページ間で交換しないでください。

驚き最小の原則と呼ばれる興味深いアイデアがあります。これは、何かがどのように機能するかにユーザーを驚かせた場合、より直感的になるように作り直します。

さらに、UIがプラットフォームに適していることを確認する必要があります。iOSアプリの動作がAndroidと異なる場合があります。 デスクトップサイトには、メニュー、ギャラリー、さらには製品のチェックアウトについて、モバイルサイトとは異なるニーズがあります。 一貫性とは、ユーザーがサイトで何をすべきかを理解しなければならないことで、ユーザーを苛立たせないことを意味します。

3.明確にする

これは上記の繰り返しのように見えるかもしれませんが、明快さと一貫性は異なります。 明確性とは、ユーザーに常に何をすべきかを知ってもらいたいということです。 いくつかの点で、これはユーザーのフラストレーションを減らし、保持力を高め、バウンス率を下げるため、UXデザインにも浸透します。

明快さは、ミニマリスト（そしてある程度はブルータリスト）のウェブデザインがとても人気がある理由です。 散らかっていない（またはほとんどない）ので、人々はサイトやページの目的について混乱することはありません。 Ling'sCarsとは逆の体験を提供したいと考えています。

明確にするための1つの方法は、別のページで1つのステップから別のステップに移動することです。 チェックアウトプロセスでページを下にスクロールするか、単一のセクションまたはボックスに含める代わりに、ユーザーに製品ページからショッピングカートページ、チェックアウトページ、支払いの選択ページ、注文ページに移動してもらいます。確認ページ。 （下の画像でわかるように、Amazonはこれを行います）。

彼らはプロセスのどこに立っているかを正確に把握し、あいまいさを排除します。 画面のスペースは貴重であるため、これはモバイルユーザーにとって特に重要です。

4.フィードバックを提供する

ユーザーが最後に望んでいるのは、何が起こっているのかを理解しないことです。 ボタンを押した場合は、ボタンが押されたことを示します。 あなたはそれを複数の方法で行うことができます。 ボタンをアニメーション化して、ページに沈んでいるように見せることができます。 読み込みアイコン（MacOS Rainbow Wheelなど）は、言うことなく、「お客様のリクエストに対応しています」というフィードバックを提供します。

ユーザーがファイルをアップロードできるようにする場合（DropboxやGoogleドライブなど）、残り時間を示します。 彼らの行動が成功したことを彼らに伝えるポップアップまたはモーダルを提供することは、欲求不満と混乱を減らします。

実際、ユーザーがインターフェース内で何らかのアクションを実行するときはいつでも、ほんの少しの謝辞が、良いエクスペリエンスとつまらないエクスペリエンスの違いになる可能性があります。

5.想起ではなく、認識を使用する

優れた受験スキルとは逆に、ユーザーがサイトを見たときに、サイトに関するすべてのことを認識してもらいたいと考えています。 彼らはそれについて考え、情報を思い出す必要はありません。 何よりも、すべての部分が直感的で、あるポイントから別のポイントに移動するように、インターフェイスを合理化しています。 これは、前述のように認識可能なアイコンを使用して実行できます。 人々は特定のものの特定のアイコンを認識します。

また、仮想ツアーを使用して、初めてではない場合でも、プロセスをユーザーに案内することで実行できます。 彼らは最初のモーダルが現れるとプロセスを認識し、それらのアクションを実行する方法を正確に思い出すためにエネルギーを費やす必要はありません。

また、サイトの何が何をしているのかをユーザーに思い出させる、適切に配置されたメッセージングを通じてこれを達成できる場合もあります。 シンプルなホバーツールチップを使用してDiviでこれを実現します。アイコンの機能を誰かが思い出せなくても、その機能に導きます。 その後、彼らはアイコンを認識するはずです。 または、もう一度ホバーした場合は、少なくともツールチップ。 または、情報を取得するためにホバリングするプロセスですらあります。

6.人々が最初に対話する方法を選択します

写真提供者JohnPicklap、MarieClaire.com提供

あなたは何が最悪か知っていますか？ プルドアを押す。 特に、前のものをプッシュしてその1つに到達した場合は特にそうです。 その建物の設計者はユーザーインターフェイスに一貫性を持たせなかったため、必要なことを行う方法がわかりませんでした。 ボタンのように見えないものを押しても、とにかく応答を待つのはどうですか？ それは、それらの設計者が、ユーザーが製品をどのように操作するかを考慮していなかったためです。 したがって、UIを設計するときは、1つの動き（おそらく2つ）を選択し、それを維持します。

モバイルデバイスでは、それはスワイプする傾向があります。 Snapchatを見てください。 設定やプロファイルに到達するなど、ほとんどすべてのアクションはスワイプによって実行されます。 Snapchatを下にスワイプして自分自身を確認し、左にスワイプして会話に移動し、右にスワイプしてストーリーに移動し、上にスワイプして思い出（または今週呼ばれているもの）に移動できます。 彼らは、ユーザーが製品をどのように操作するかを選択し、それに対応するようにUIを設計しました。 その逆ではありません。

UIを設計するときは、メニューとタップ、図像、スワイプとジェスチャー、またはその他のものを完全に使用するかどうかを選択します。 AlexaとSiriは、主要なUIインタラクションとして音声入力を使用します。 彼らが情報を提供し、タスクを実行する方法は、その特定の入力を中心に設計されています。 そして、ユーザーとして、その情報は最初にあなたのために設定されていたので、あなたは直感的に何をすべきかを知っています。 デザイナーはあなたに何をすべきかを教えてくれました、そしてあなたはそれをしました。 あなたのユーザーはあなたが彼らのために同じことをすることを感謝するでしょう。

7.設計基準に従う

それが壊れていなければ、それを修正しないでくださいという古いことわざがここに適用されます。 標準が機能すれば、何かを活性化しようとする必要は本当にありません。 これは、アイコンの使用から要素の標準的な配置にまで及びます。 ユーザーが期待することに反対したくはありません。 疑問符（？）が助けを示すことを人々は知っています。 したがって、感嘆符（！）は使用しないでください。 ユーザーにモバイルメニューを見つけてもらいたい場合は、グリッドではなくハンバーガーアイコン（3本の積み重ねられた線）を使用します。

検索バーについて考えてみてください。 それらはほとんどのサイトの同様の場所にある傾向があります：サイドバーの上部またはヘッダーメニューの終わり。 そこにない場合は、ページの上部セクションの中央。 サイドバーの下部、ページフッター、またはブログ投稿のテキストの下に唯一の検索フィールドを含めることにした場合、人々はどこを見ればよいのかわかりません。 標準の虫眼鏡アイコンで識別しても。

既成概念にとらわれずに考え、新しく革新的なデザインを採用することに何の問題もありませんが、それはデザインが使いにくいという意味ではありません。

8.要素階層の問題

いいえ、地球、風、水、火のいずれかが他のボスであるという意味ではありません。 つまり、ページ上の要素には、ユーティリティとユーザーによるページの表示方法の両方について明確な階層が必要です。 基本的に、最も重要な機能がそれぞれのページの上部にあることを確認する必要があります。 さらに、この種の階層は、ユーザーを有機的にページの下に導き、ユーザーをサービスに導くことができます。

プロセスを進めるにつれてサイズが小さくなる大きな要素は、重要性と順序を示しています。 色とコントラストもそうです。 空白を利用することも重要です。混乱するとユーザーの進行が妨げられ、ページの目的から目をそらす可能性があるためです。 すっきりとしたライン、多くのスペース、明確に定義された要素により、ドキュメントや注釈なしでUIを移動する方法をユーザーに視覚的に示すことができます。

適切な経験則では、物事を左から右、上から下に流し続けたいということです。

9.物事をシンプルに保つ

このお問い合わせフォームをご覧ください。

今これを見てください：

どちらもお問い合わせフォームです。 これらの1つは記入するのに問題はありませんが、もう1つはもう少し頭痛の種です。 政府のフォームである以外に、下部のフォームのデザインはユーザー向けではなく、管理者向けに作成されています。 それはあなたの仕事ではありません。 あなたの仕事は、ユーザーにとって可能な限り摩擦のないものにすることです。 そして、それを行うための最良の方法の1つは、絶対に必要ではないものをすべて切り取ることです。

10.ユーザーを自由に管理できるようにする

私たちが触れたい最後のこと、そしてUIでやりたい最後のことは、ユーザーからの制御を取得することです。 または、デザインによって制限または制限されていると感じさせるため。 あなたは彼らに力を与えたいと思っています、そしてあなたのUIは彼らが彼らが望む行動を実行することを可能にするべきです。 このルールには、コンテキストと権限の2つの部分があります。

まず、ユーザーが実行する必要のあるアクションはすべて、ユーザーが実行したいアクションの近くに配置する必要があります。 投稿を編集する必要がある場合は、編集ボタンを[保存] 、[公開/送信] 、[プレビュー]ボタンの近くに配置する必要があります。 実際、より良いオプションは、ユーザーが特定のアイテム（またはページ）に対して実行できるすべてのアクションのコンテキストメニューです。 上で説明したように、UIに一貫性がある場合、ユーザーは、これらのコンテキストメニューまたはツールバーに特定の要素のアクションの全リストが常に含まれることを理解できます。

さらに、UIは常に、ユーザーが実行したアクションから抜け出したり、元に戻したりできるかのようにユーザーに感じさせる必要があります。 UIを設計している間、彼らはそれを使用することになります。 したがって、彼らは仕事を成し遂げるために必要なことをするために許可（あるいはおそらく自由）を必要とします。 これを行うには、eコマースチェックアウトのすべてのページにキャンセルボタンを追加するのと同じくらい簡単です（ブラウザの戻るボタンを押すと、問題が発生する可能性があるため）。 たぶんそれは元に戻す機能なので、実験は大丈夫だと彼らは感じています。 または、大規模プロジェクト（Googleドライブ、WordPress、Gitなど）の改訂履歴。

ユーザーが自由で制約がないことを感じるとき、あなたは明らかにいくつかの優れたUI設計原則に従っています。

UIの準備はできていますか？

駄洒落が悪い。 ごめんなさい。 しかし、これらのUIルールを使用すると、次のWebデザインプロジェクトを公園から追い出す準備ができています。 これらのいくつかは他のプロジェクトよりもいくつかのプロジェクトに適用される可能性がありますが、優れたUIは優れたUIであり、優れたUIは優れたUXにつながります。 しかし、それはまったく別の投稿のトピックです。

常に従う優れたUIデザインのルールはありますか？

emojoez /shutterstock.comによる記事特集画像