In this article
価格ページは魅力的な色を使いながらも、読みにくさを感じさせることがあります。1枚のカードでは更新に関する注意書きを価格の上に配置し、別のカードではそれを長く続く特徴リストの下に隠し、3枚目ではボタンを画面外に押し出しています。訪問者はレイアウトの考古学をすることになり、プランの比較ではなくなります。
ここでは建築のリズムが役立つデザインのたとえになります。重要な関係性を繰り返すことで、人々が自分の場所を把握できるようにします。これは、整ったグリッドが販売を増やすという証拠ではなく、たとえです。デザイナーまたは開発者が新しいコンポーネントライブラリを購入することなく調整できる、明示的なインターフェースの例が以下にあります。
関係性から始め、その後スペーススケールを選択する
ページがサポートする意思決定を歩いてみましょう。ホスティング比較では、購入者はワークロード、継続的なコスト、制限、サポート、次のステップを理解する必要があります。これらの関係性は、すべてのカードで明確であるべきです。装飾的なエッジが揃う前に、情報を順序よく繰り返すことが重要です。
この例では、8ピクセルのベースを使用し、8、16、24、32ピクセルのスペーストークンを使用します。これらはアクセシビリティの基準や万能の最適値ではなく、デザイン上の選択です。ラベルをその値から8ピクセル離し、関連する事実の間には16ピクセルのスペースを空け、異なるグループの間には24ピクセルのスペースを空けます。アクションの前に強めの区切りがあると、読者が比較が終わったことを知ることができます。
トークンは目的で名前をつけると良いです。たとえば、field-gap、group-gap、card-paddingなどです。開発者はcard-paddingを一度だけ変更できるようにすべきです。17のほぼ同じ宣言を検索する必要はありません。翻訳されたラベルがもう一度行が必要な場合、グループは拡大するようにします。一貫性は、すべての文を同じ長方形に押し込めるのではなく、予測可能な関係性を保つことを意味します。
有用な最初のテストは、画像と色を削除することです。誰かがまだどの価格がどのプランに該当するか、その制限がどこにあるかを理解できるでしょうか。階層が消えれば、レイアウトは装飾に頼りすぎていることになります。
具体例：デスクトップとモバイルの幅での3つのホスティングカード
仮想の3つのホスティング構成の比較を想像してください。これは実際のEnigma価格リストやクライアントの成果ではなく、説明用のデザインの練習です。各カードにはプラン名、想定ワークロード、支払い情報、含まれるリソース、重要な除外項目、およびアクションが含まれます。
1200ピクセルのコンテンツ幅で、2つの24ピクセルのギャップで区切られた3つの列があり、それぞれ384ピクセルのスペースがあります。両側に24ピクセルのパディングを設けると、各カードには336ピクセルのコンテンツスペースがあります。390ピクセルのビューポートでは、16ピクセルの外側の余白が残り、358ピクセルのカード、または同じパディングの後で310ピクセルのコンテンツが残ります。これらの計算は、コピーが実際にどれだけのスペースを持っているかを示しています。ブラウザにズームを無視するよう指示するものではありませんし、訪問者のフォント設定を無視するものでもありません。
カードがモバイルでスタックされるときも、同じ情報の順序を保ちます。継続的な料金、支払い期間、および設定料金を一緒に配置します。更新条件は、関連する価格の隣に配置し、数画面離れたフッターに頼らずにします。除外項目は、関連する特徴の近くに配置します。
デスクトップでは、グリッドで主要なグループを整列させながら、テキストの折り返しを許可します。モバイルでは、固定されたカードの高さを削除し、各プランが必要なスペースを確保できるようにします。最も長いプラン名と最も長い翻訳されたアクションラベルをテストします。重要なコピーを隠すことでオーバーフローのバグを解決しないでください。訪問者がキャッチを見つけることができなければ、きれいなスクリーンショットも役に立ちません。
公開する前にこの5段階のレイアウトレビューを行ってください
まず、隣のカードを見ないで1枚のカードを読みます。訪問者が何を購入しているのか、何が除外されているのか、アクションが何なのかを書き出してください。ツールチップや別のカード、セールスコールに頼らなければいけない答えは、より明確なラベルが必要です。
次に、同じ情報をすべてのカードでスキャンします。リソースの制限やサポートの取り決めは、予測可能な場所に、比較可能な単位で表示されるべきです。一つの構成で別の種類の情報が必要な場合は、見せかけだけが整っているが誤解を招く行を作り出すのではなく、違いを説明してください。
第三に、狭いビューポート、ブラウザのズーム、長めのコピーでテストします。ラベルが切り取られているか、ボタンがテキストの上に重なっているか、価格が隠れているか、通常のコンテンツで横スクロールが発生していないかを見ます。3行のプレースホルダーのコピーではなく、実際のテキストがより良いストレステストになります。
第四に、キーボードを使ってください。リンク、セレクター、拡張可能なコンテンツのフォーカスインジケーターを追跡してください。拡張されたパネルはそのコントロールと接続されているべきで、プランの価格を隠したり、次のアクションをその下に閉じ込めたりしてはいけません。タッチデバイスでもチェックを繰り返してください。ホバーは本質的な情報だけを伝えることはできません。
第五に、視覚要素を元に戻した後に決定をレビューしてください。明るいアクセントがアクションを識別しているのか、他の6つの明るいアクセントと競合しているのかどうかを確認してください。役立つ強調を残し、装飾的なノイズを削除し、ビューポート、テーマ、コントロール、予期される動作に関連するすべての問題を記録してください。これにより、開発者には再現可能な問題が提示され、『ちょっと見た目が悪い』という曖昧なチケットではなくなります。
曇りのスクリーンショットに頼らず、コントラストとリフローを確認してください
曇りのカードは、その裏にあるものに応じて変化します。ネイビーの上では読みやすい白テキストが、薄いイラストが裏にあると消えてしまうことがあります。ぼかしを増やすことで背景をソフトにすることはできますが、十分なコントラストを提供することはできません。重要なテキストの裏に十分に不透明な表面を使用し、実際のレンダリングされた組み合わせを両方のテーマでテストしてください。
WCAGの最小コントラスト基準は、通常のテキストでは4.5:1以上、条件付きの大きなテキストでは3:1以上を要求しています。大きなテキストはガイドラインで特定の定義を持ち、boldのサイズであるからといってヘッディングが自動的に免除されるわけではありません。ジャーナルのカラーコントラストチェッカーは、2つのソリッドカラーを比較することはできますが、全体のページを認証したり、移動する透過的な表面を評価したりすることはできません。
リフローのガイドラインもまた有用なテストです。通常の縦スクロールコンテンツは、320 CSSピクセルの幅で両方向のスクロールなしで使用可能であるべきです。本当に2次元的なコンテンツには例外があるため、比較表は列を切り詰めてスクロールバーを避けるのではなく、目的に応じて評価してください。
リズムにも限界があります。繰り返されるカードは意味のある違いを隠してはならず、視覚的な位置の一致は合理的なドキュメントの読み順を上回ってはなりません。最初にセマンティックな見出し、ラベル付きコントロール、明確なコピーを使用してください。スペースはその構造をサポートするものとして扱ってください。その後、実際に比較タスクを完了する人を招き、どこで迷うかを記録し、デザインを修正してください。一貫したグリッドはツールですが、それによって人が行う決定が目的です。
さらに読む
次のステップ
ウェブサイト全体を再デザインする前に、価格またはサービスセクションの一つでレビューを試してみてください。ビューポートサイズを保存し、最も長いコンテンツを特定し、重要なテキストの背景色が最も明るいことを確認してください。一度繰り返しの関係を修正したら、比較タスクを繰り返してください。
同じ問題がサイト全体で繰り返されている場合、Enigma はその結果を共有コンポーネントとスペースシステムに変えるお手伝いをします。スクリーンと訪問者が行うべき決定を提示してください。役立つ出発点は、別のグラデーションが販売を担当すると約束することではなく、明確な要件書です。