今日、ウェブサイトは信じられないほど素晴らしいものに見えますが、いまだにイライラするデザイン パターンがインターネット上で見られます。 チェックボックスが 1 つあれば十分だったのに、条件に 2 回同意しなければならないことや、フッターに到達せずに無限にスクロールすることは、不正行為の 2 つの例にすぎません。

幸いなことに、これらのパターンはすべてデザインの助けを借りて修正できます。なぜなら、他の形式の自己表現やアートとは異なり、デザインは問題を解決するためのサポートだからです.

このウェビナーには、Smashing Magazine の共同創設者兼編集長である Vitaly Friedman を招待しました。Vitaly Friedman は、複雑な UX、フロントエンド、およびパフォーマンスの問題の解決にここ数年費やしてきました。

Vitaly は私たちの招待を受け入れ、より良いユーザー インターフェイスを作成し、人々が私たちの Web サイトにアクセスする際により高いコントロール感を与える方法を教えてくれました。

以下にウェビナーを書面形式で示しますが、視聴覚学習者は、ここからオンデマンドで録画にアクセスできます。

では、本題に入りましょう。

1.カルーセル
2.ハンバーガーメニュー
3.無限スクロール
4. 冷凍フィルター
5. まとめ
6. 質疑応答

1.カルーセル

最初によく遭遇する設計上の問題であるカルーセルについて話しましょう。 カルーセルを設計するときに間違った UI コンポーネントはありませんが、コンテキストを念頭に置くことが重要です。

カルーセルの非効率的な使用

例として、ノートルダム大学の Web サイトを取り上げます。このホームページには不要なカルーセルがあり、最終的には削除されました。 下のスクリーンショットでわかるように、カルーセルの下には、スライド間を移動するためのクリック可能なドットと矢印がありました.

Web サイトのデータを見ると、訪問者の 82% がスライドの最初の画像を見たのに対し、他の画像位置は 2 ～ 3% しか見ていなかったことがわかります。

カルーセルの下のドットは進行状況を示していましたが、次に何が起こるかについてのコンテキストを提供していませんでした。

より良いカルーセルを作成するには、トルコのニュース Web サイトの例を参考にしてください。 カルーセルの下にドットを使用する代わりに、スライドの参照用の数字を使用しています。

もちろん、モバイルではまだ多くのドットがありますが、常にではなく、どこにでもあるわけではありません。 カルーセルの左側または右側にスライド番号を縦に表示すると、ドットから数字に切り替えるモバイル フレンドリーな方法になります。

ご覧のとおり、カルーセルは、どこでどのように使用されるかによって、ランディング ページで機能します。

カルーセルを非効率的に使用するもう 1 つの例は、以下の e コマース Web サイトです。

横にバーがあり、カルーセルであることを示唆しています。 しかし、ナビゲートする場合、どこをクリックしますか? 数字の上、黒い点の上、または線の上でランダムに？ 多くの異なるオプションがあります。

驚いたことに、これらのどれも機能しません。 あなたがする必要があるのは、右または左にスワイプすることです。 まったく直感的ではありません。

スライダーの向きと期待する実際の動きが一致しないと、イライラする体験が生まれます。

同じフラストレーションが、ゴッホ美術館のウェブサイトの別の例にも見られます。 右下にscroll for moreと表示されていますが、アクションは垂直方向ではなく、水平方向に行われています。

カルーセルは、製品ページなど、特定の目的に使用する必要があります。 たとえば、宿泊客は予約前に部屋、レストラン、その他の施設がどのようなものか知りたいと思うので、さまざまなホテルの特徴を強調したいとします。

カルーセルに約 40 枚のスライドがある場合、増分カルーセル スライドの表示が減衰することが予想されます。 これは何を意味するのでしょうか？ 最初と最後のスライドは、通常、画像を左から右、またはその逆に見るため、注目を集めますが、中央はあまり注目されません。

カルーセルのより多くのスライドをナビゲートするにはどうすればよいですか?

• ラベルを追加

ドットを削除してスライダーに置き換えるか、ラベルを追加することもできます。 これにより、カルーセルではなく、より多くのタブ エクスペリエンスが提供されます。

カルーセルをクリックしたときにユーザーが期待するものをスライダー バーに表示することで、コントロールの感覚が得られます。

• 一時停止ボタンを追加する

自動進行カルーセルが必要な場合は、一時停止ボタンが必要です。 そうしないと、人々はそれを無視し始めます。

通常、スライド間には 5 ～ 7 秒の遅延がありますが、カルーセルの変化が速すぎると、ユーザーは下にスクロールして無視します。

• Hallo プレビューを使用する

ラベルを使用したくない場合は、ハロー プレビューを使用できます。

Creativedenmark.com では、プレビューで表示されるものをハイライトするホバーがあり、ラベルの上にマウス カーソルを置くと、ラベルが表示されたり消えたりします。

• サムネイルを表示

スライド ビューを増やすためにできるもう 1 つの方法は、人々が見るべきもののサムネイルを使用することです。

より多くのコンテキストを提供すると、ユーザーはカルーセルをクリックすることに興奮するようになります。

スライドの画像の小さなサムネイルに代わるものは、フィリップスが Web サイトで行ったような代表的なアイコンを使用することです。

カルーセルを作成するときに覚えておくべき重要なことは、人々が何かを気にかけている場合、クリックスルーするということです.

カルーセルを整理するには？

矢印の追加は必須です。 カルーセルがどのように機能するかを人々に伝えます。これは非常に重要です。 しかし問題は、特にモバイルで矢印をどのように整理するかということです。

矢印の使用には多くのオプションがありますが、どの方法が Web サイトにとってより効果的かを判断するにはどうすればよいでしょうか? そして、パフォーマンスが向上するとはどういう意味ですか?

カルーセルについて言及する場合、パフォーマンスが向上するということは、人々がスライドをナビゲートすることに非常に熱心に取り組んでおり、間違ったものを誤ってクリックして戻ることが少なくなることを意味します。

人々がエンゲージするためには、目の前にあるものを明確に理解する必要があります。つまり、消費したいコンテンツを覆い隠すものがあってはなりません。

矢印に戻ると、回避する必要がある 2 つの問題があります。

矢印をバラバラに分割すると、人々が間違った場所をクリックするため、1 つの問題が発生します。

スライドの画像を誤ってクリックすると、特定の Web サイト ページに移動します。 次に、戻ってカルーセルの最初の画像に移動し、さらに見たい場合はスワイプする必要があります。

これが起こるたびに、ナビゲートして二度と間違いを犯さないようにするために、指の焦点を合わせ直し、再調整する必要があります。

2 つ目の設計上の問題は、矢印が右上隅にグループ化されている場合です。 矢印をクリックすると、ユーザーは指でページを覆い、コンテンツを表示するには矢印を移動する必要があり、移動を続けるには手順を繰り返す必要があります。

グループ化された矢印は、カルーセルの下に配置すると効果的です。

これは、テレビのリモコンのように、上下左右が互いに近く、遠く離れていないため、操作をより適切に制御できるようになります。 このように、人々はより速く簡単に行き来できます。

良い例は Ritual.com です。 デスクトップ バージョンでは、矢印は右上にありますが、モバイルでは、カルーセルの下部にグループ化されています。

2.ハンバーガーメニュー

もう 1 つのイライラするデザイン パターンはハンバーガーです。 あなたが食べることができるものではなく、ウェブサイトであなたの旅を選ぶのに役立つもの.

では、フラストレーションはどこから来るのでしょうか。

例として、下のコーヒー ショップの Web サイトを取り上げます。 開くことができるメニューは 4 種類あります。 これらはすべてメニューと呼ばれるものであり、期待どおりのものがすべて含まれているわけではありません。

ハンバーガー メニューを開くと、多くのアイテムが多数の矢印とともに表示され、ユーザーを圧倒します。

非効率的なハンバーガー メニューの別の例は、以下の Vodafone の Web サイトで見ることができます。

ハンバーガー メニューを開くと、さまざまな矢印の付いたアコーディオンが表示されます。 右向きの矢印でページが表示され、下向きの矢印で別のアコーディオンが開きます。

下向きの矢印をクリックすると、別のリストが表示され、さまざまなアイコンが上向き、右向き、下向きになります。

ここに何が表示され、何をすべきかを理解するのが難しいため、これはユーザーに大きな不満を引き起こします.

そんなに多くの矢は必要ありませんでした。 リンクをリンクのように見せて、より明確にすることもできます。

もう 1 つの例は、LCFC サッカー クラブの Web サイトで、モバイルでは次のようなナビゲーションがあります。 ハンバーガー メニューを開くと、いくつかのセクションが表示されます。そのうちの 1 つをクリックすると、垂直分割が表示されます。 複数レベルのナビゲーションを同時に表示します。

分割画面は、フィルタリングなど、さまざまな方法で適用できます。

インドの小売業者の e コマース Web サイトには、同じことを行うフィルターがあります。 ハンバーガー メニューを垂直セクションで開き、メニューを 2 つに分割します。 非常にコンパクトであるため、他のどのフィルタリング エクスペリエンスよりも優れています。

フィナンシャル タイムズのウェブサイトでも同様の内容を確認できます。 メニューから詳細を確認したいセクションの 1 つを選択すると、そのセクション内に、いくつかの値を含むいくつかの領域があります。 これらは、フィルタリング エクスペリエンスを構築します。

ウェブサイトにフィルタリング機能を追加したい場合は、このように分割することでスペースを有効に活用できます。

ハンバーガーメニューをより良くする方法は？

• ビルボードのパターンを使用する

重要なことを優先し、重要でないことの優先順位を下げます。 これには、人々が最も関心を持っていることを理解し、それらを強調する必要があります。

また、ビルボード パターンは、キャンペーンや製品などの必須アイテムの発見可能性を向上させます。

しかし、どうやってそれをしますか？

以下の韓国の郵便局のウェブサイトの例を見てください。 最初の電話画面では、簡単にアクセスできるように、人々にとって重要なものをいくつかのタイルに強調表示しました。 ハンバーガー メニューの操作を開始すると、アコーディオンが表示されたこれらの通常のメニューが表示されます。

主なアイデアは、重要なものを強調することであり、ホームページはダッシュボードに似ています. これは電子商取引にも適用できます。

ドイツの大手小売業者 Otto の Web サイトには、すべてが表示されているわけではありません。 代わりに、最も重要なものが表示され、1 つを選択するように求められます。 選択した後は、アーキテクチャのより深いレベルに入ります。

ビルボード パターンは、訪問者にとって非常に役立つため、さまざまな Web サイトで見つけることができます。

• ナビゲーション クエリを使用する

ナビゲーション クエリを使用すると、ユーザーは関連情報にすばやくアクセスできます。

Marcin Ignac は次のようにツイートしています。 めったに機能しません。 ミニ スニペットの上位 10 件の結果に含まれていないものをどのように見つけますか? コンテキストと関連性を利用した、より探索的なインターフェースが必要です。」

これには多くの真実があります。 コンテキストとコンテキスト内の関連付けを知る必要があるだけです。

たとえば、Commonbond.co では、サイトで何をしたいかを選択できます。 さまざまなオプションから選択するこの小さなプレビューがあります。 その後、探していたページに移動します。 これは、いくつかの質問をして、ユーザーを関心のある特定のページに誘導する情報システムのようなものです。

もう 1 つの例は、デュッセルドルフのウェブサイトです。ここでは、街でやりたいことや場所を挿入でき、知りたいことを信じられないほど早く教えてくれます。

ナビゲーション クエリは、関連するまでの時間を短縮するのに役立ちます。 必要な特定のページに 10 秒以内でアクセスできます。

これを e コマース Web サイトにどのように適用できますか?

ドイツの小売 Web サイト AO を見ると、ホームページにカルーセルと「ここで何をしたいですか」セクションが表示されます。 そこで、購入したいデバイス、タイプ、価格帯などを選択できます。 これらすべての回答を入力すると、フィルタリング、検索、または並べ替えを行わなくても、10 秒以内に関連する結果が得られます。

• ブレッドクラムを使用する

通常忘れられているもう 1 つの重要なことは、ブレッドクラムです。 ブレッドクラムは、必ずしもユーザーがたどったパスを表すとは限らないため、注意が必要です。 それらは、サイトの情報アーキテクチャを表しています。 それでも、ナビゲーションのコンテキストでは、これは非常に役立ちます。

なんで？ より速くナビゲートするのに役立つからです。

ドイツの保険会社が所有するこの Web サイトを見ると、上部に小さなドロップダウンが表示されます。 それをクリックすると、このページの隣人が表示されるので、これは一種のサイバー ナビゲーションの代わりになります。 通常、メイン ナビゲーション、パンくずリスト、サイドバーなどを別のものとして受け取ります。

なんらかの理由でサイドバーを使用できない場合、これはサイバー ナビゲーションの適切な代替手段ですが、最も重要なのは、メガ メニュー全体を置き換えることもできるということです。

スイス連邦統計局の Web サイトにアクセスすると、ブレッドクラムが使用されていますが、メガ ドロップダウンはありません。 代わりに、すべてがこの動的ドロップダウンのようなものを使用しています。

同じことが、チケットを販売するスイスのこの別の Web サイトにも当てはまります。 すべてがブレッドクラムです。 大きなメガドロップダウンさえ必要ありません。 モバイルでも非常にうまく機能します。

3.無限スクロール

無限スクロールとは、スクロール、スクロール、スクロール、そして運が良ければフッターに到達するパターンです。 あなたがたまたま販売ページにいたら、頑張ってください！ フッターが二度と表示されない可能性があります。

通常、無限スクロールは管理が難しく、ページの新しい情報を見つけるのに苦労するため、人々は好きではありません。 このため、ほとんどの場合、このデザイン パターンのページを放棄するだけです。

無限スクロールを改善するにはどうすればよいですか?

• 「さらに読み込む」ボタンを追加

無限に下にスクロールする代わりに、いくつかのアイテムをロードしてから、無限ロードから「さらにロード」ボタンに変更するポイントに到達できます. ボタンがクリックされた場合は、さらにアイテムを追加します。

• インセンティブを追加する

メールアドレスを入力するとギフトカードが当たる可能性など、ユーザーが「さらに読み込む」ボタンに到達したときにインセンティブを追加して、無限スクロールを改善します。

また、後で中断したところからスクロールを続けるためのリンクをメールに含めることもできます。 これにより、ユーザーはデバイスを切り替えることができ、後で最初から検索を開始する必要がなくなります。

マーケティング チームも、メーリング リストを増やすのに役立つため、このアイデアを気に入っています。

• 見た商品の数を書く

無限スクロールを打破するもう 1 つの方法は、合計のうち表示された製品の数を書き込み、これらのアイテムを開くための提案を別のページに追加することです。 また、「後でここで続行」ボタンを追加して、ユーザーが検索を中断した場所に戻れるようにすることもできます。

すでに見たアイテムと次のアイテムの間の空白を使用して、人々が見たものを処理できるようにし、次に何をしたいかを自由に決定できるようにします。

• 粘着性のあるフッターを作成する

粘着性のあるフッターを作成するにはどうすればよいですか? このマレーシアのフード デリバリー サービスのウェブサイトを例にとると、ページの右下にある [City, Language, and more (都市、言語など)] ボタンをクリックしてフッターを開くことができます。

• コントロールを追加

人は、無限スクロールでは得られないコントロール感を得る必要があります。 ただし、ギターの電子商取引小売業者である Thomann.de の例に従うことができます。

商品リストの最後に、ページの下部に到達したというメッセージがあります。 次に、ページごとに表示する製品の数を選択して、より多くのアイテムを読み込むことができます。 または、ページネーションを続行することもできます。

このようにして、表示する製品の数を完全に制御し、常にフッターを表示できます.

• 無限スクロールとページネーションを組み合わせる

もう 1 つのオプションは、無限スクロールとページネーションを組み合わせることです。 ポーランドの e コマース小売業者である Pepper.pl では、スクロールすると URL が変化し、ページの下部にもレイヤーが表示され、ヘッダーやフッターにジャンプしたり、ページを移動したりできます。

特定のページにジャンプしたい場合は、その最下層から行うこともできます。

無限スクロールをさらに関連性の高いものにするにはどうすればよいでしょうか?

ページネーションの横にいくつかのラベルを追加して、カルーセルと同様に、ユーザーがそこに何を期待すべきかを示唆することができます。

人々は、評価、場所、アルファベット、または価格で並べ替えることができます. どちらのオプションでも、ラベルは、次のページで何を見るべきかの手がかりを与えてくれます。

より多くのコンテキストを提供する別の方法は、ラベル付きのバーを無限スクロールに追加することです。 これにより、人々はどこに行きたいかについて非常に自信を持って認識できます。

無限スクロールを使用する場合は、人々が複数の場所をブックマークできるようにして、より快適にナビゲートできるようにします。 彼らはそれらの間を非常に素早くジャンプして、興味のある製品にたどり着くことができます.

4. 冷凍フィルター

凍結されたフィルターは、ユーザーが実際に抱える大きな問題の 1 つになりつつあります。

これは、sears.com などの Web サイトから取得されます。 左側のサイドバーでフィルターの 1 つをクリックすると、UI 全体がフリーズします。 生き返るまでは何もできません。

さらに、人々は通常、複数のフィルタリング オプションを選択したいと考えています。 残念ながら、一部のフィルターは一度に 1 つの入力しか登録しないため、以前の選択が失われます。

フィルタリングを正しく行うには？

良い例の 1 つは、検索結果からフィルターを分離したストックホルム大学の Web サイトです。

凍結または更新せずに、必要な数のフィルターを選択できます。 右側に結果が表示されます。キーワードを検索してフィルタリングすることもできます。

別の例は、Galaxus.ch からのものです。 一番上にフィルタリングオプションがあり、必要な数のフィルターを追加できますが、バックグラウンドでは何も変わりません.

表示ボタンをクリックしてフィルターを適用すると、実際に変化が見られ、結果が得られます。

モバイルでは、フィルタリングの問題もたくさんあります。

ウォルグリーンのウェブサイトを見てみましょう。 フィルタリング オプションが表示されます。 属性をクリックするたびに、UI がフリーズし、結果が表示された後にのみフリーズします。 複数の属性で検索する場合は、フィルターをもう一度クリックしてプロセスを繰り返すだけです。

属性ごとにこれを何度も行う必要があります。

2 番目の例では、フィルタリング中に背景にぼかしが表示されます。これは、属性を選択するたびに変化します。

そしてもちろん、フィルタリングが画面全体を占める Crutchfield の Web サイトもあります。 ただし、フィルターをクリックすると、読み込みアニメーションが画面に表示され、Web サイトがアクションを処理していることを示します。 毎回これを見るとイライラします。

フィルタリングを改善するには？

• 画面全体を占める

モバイル画面全体をフィルタリングすることをお勧めします。 スライドインとスライドアウトが必要な場合は、フィルタを使用してこれを行うことができますが、アコーディオンは高速であるため、フィルタよりも優れた代替手段です。

最も重要なことは、ここでは何も凍っていないこと、フラストレーションがまったくないことです。

• 画面を分割する

インドのファッション小売サイト Mint の例を見てみましょう。 フィルタリングにより画面が 2 つに分割されるため、ユーザーはフィルター間を簡単に移動できます。

• オートコンプリートを使用する

もう 1 つの非常に一般的なフィルタリングの例は、入力を開始して、横に縦の矢印があるオートコンプリート オプションを取得する場合です。

キーワードをクリックすることと矢印をクリックすることには違いがあります。

キーワードをクリックすると検索結果が表示されますが、縦の矢印をクリックすると、入力したテキストがオートコンプリートで言及されたキーワードに置き換えられます。

これを機能させるには、検索バーの下に小さなヒントを追加して、ユーザーが検索結果を作成できるようにします。 結果を示すものを提案することを忘れないでください。

5. まとめ

人々は期待どおりに機能することを高く評価しており、Web からフラストレーションを取り除くためにできることはたくさんあります。

Vitaly Friedman は 15 年以上 UI を手がけてきましたが、Web ページをナビゲートするときに人々が求めるものは変わりません。

下の画像を見て、楽しいユーザー エクスペリエンスに貢献するデザイン パターンを確認してください。

インターフェース設計を改善する方法について詳しく知りたい場合は、スマート インターフェース設計パターンを参照してください。 Vitaly がウェビナーで話したことなど、興味深いことがたくさんあります。

6. 質疑応答

質問:ランディング ページをデザインする場合、最初にコピーを作成し、次にデザインを作成しますか?

回答:私にとっては、はい。エラー メッセージやラベルなどを確認するのにかなりの時間がかかります。ほとんどの場合、私の仕事は明確さを最大化し、エラーを最小限に抑えることです。これは通常、私が使用しているラベルが明確であること、および高い成功率を確保することを意味します。通常、設計時には 2 つの主要な指標があります。1 つは、人々が行う主なタスクを特定しようとする場合です。もう 1 つは、人々がそれらのタスクを完了するのにどれだけ成功しているか、またそれらを完了するのにどれくらいの時間が必要かを理解しようとする場合です。

他のマトリックスは、人々が間違いやエラーを犯す頻度と、エラーに遭遇した場合、それらのエラーからどれだけ早く回復するかです.

チェックアウト プロセスだけでなく、検索の改善、ウェブサイトでの検索内容の追跡、上位 100 件の検索についても話しているのです。そして、それに基づいて、コンテンツ キュレーターと議論し、結果として得られるものを確認できます。そして、人々が得るものが関連性があるかどうかを測定します。

関連するまでの時間も重要です。10 秒で自分の興味に基づいた非常に関連性の高いアイテムを選択できれば、それは非常に強力です。

質問:設計上の問題のどの解決策を最も誇りに思っていますか?

回答:無限スクロールの問題を解決するのは非常に困難でした。アクセシビリティや新しいコンテンツの適切な発表など、多くの問題があります。技術的に言えば、無限スクロールの管理は非常に複雑です。しかし、それには利点もあります。無限スクロールの問題を抱えた e コマース プロジェクトに取り組んだ多くのケースで、発見可能性が大幅に向上しました。問題は、人々を圧倒して、どれだけ見るかを彼らにコントロールさせたくないということです.

フッターにアクセスして、場所などをブックマークできる必要があります。これはトリッキーな実装であり、トリッキーな設計でもあります。 これは覚えておくべき高度なことです。

最終的な考え

このウェビナーが、イライラするデザイン パターン、それらを回避する方法、および e コマース エクスペリエンスを向上させるためにできることについて詳しく学ぶのに役立つことを願っています。

Vitaly が提供した他の例を知りたい場合や、このウェビナーで他の質問と回答を見つけたい場合は、ここでオンデマンドで視聴してください。

次回は、Jacob Cass とのウェビナーで、コンバージョンにつながるゼロクリック広告の作成方法についてお会いしましょう。