【Polaris和訳】Experiences/Admin/Crafting the Shopify admin
この記事について
この記事は、Polaris/Experiences/Crafting the Shopify adminの記事を和訳したものです。
記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Shopify の管理画面を作る
Shopify の管理画面は、販売者がストアを設定したり、ビジネスを管理する場所です。管理画面は、iOS、Android、Web で使用できます。
Polaris は管理画面にインスパイアされていますが、成功する機能やフローを作るには Polaris のコンポーネントやスタイルガイドラインだけでは不十分です。ここでは、販売者のためのより良いアドミンを作成するのに役立つ実践的なアイデアを見つけることができます。
UI ではなく問題から始める
問題点を探るために時間をかけてください。リサーチ、技術的な制限、販売者のワークフロー、ストレスケース、既存のパターン、コンテンツなどを検討します。ユーザーインターフェース（UI）の詳細にこだわるのはやめましょう。
販売者と話す。販売者の目を通して世界を見ることで、正しい問題を解決することができます。
チームに研究者がいる場合は、その専門知識を活用してください。問題の全体像を把握し、偏りや仮定を明らかにしてくれるでしょう。そうでない場合は、アンケートやインタビューなど、定量的・定性的な調査方法を試してみましょう。
マーチャンダイジングでは、実際に必要とされるタスクに焦点を当てます。同時に、（「平均的な」販売者を超えて）包括的に考え、タスクに当てはまる可能性のある潜在的なストレスケースを特定します。
現在の Shopify 管理者と類似製品の監査を行います。パターン、不整合、改善の機会を探しましょう。
フローの各タスクで販売者が見る必要のあるコンテンツの順序付けされたリストとグルーピングを作成します。
業界の専門用語の代わりに、わかりやすい言葉を使うことができないかを考えます。
実際のコンテンツを使用して、アイデアを低解像度でスケッチする。
すべての人のために管理画面を調整する
可能な限り幅広い職種、経歴、場所、言語、能力を持つ販売者を迎え入れましょう。
ショップオーナーだけでなく、すべての人のために Shopify をデザインしましょう。Shopify を利用するほとんどの人は、ビジネスオーナーではなく、ビジネスの従業員です。
複数の言語と文化的規範をサポートする。国際化についてもっと知る
タッチ、キーボード、マウスでの入力に対応し、様々な視覚、運動、認知能力を持つ人々に対応します。アクセシビリティについての詳細はこちら。
平易な言葉を使い、7 級レベルの読解力があるように記述します。
多くのデバイスで 1 つの管理画面を目指す
情報や機能は、デバイスや OS を問わず同じであるべきです。UI を Android、iOS、Web に対応させることで、販売者はインターフェースの動作ではなく、実現したいことを考えることができます。
1 つのプラットフォームで機能を提供し、他のプラットフォームでは提供しないということは避けるべきです。
プラットフォームの仕様に合わせて、異なるプラットフォーム用の UI を設計する。
iOS(左)では、テーブルビューにシェブロンを使用し、テキストボタンを優先します。
Android(右)では、リストアイテムにシェブロンを使用せず、「作成」や「検索」などの認識できるアクションにはアイコンのみのボタンを採用しています。
すべてのコンテンツはすべてのプラットフォームで利用可能であるべきですが、すべての画面に同じコンテンツを表示する必要はありません。
大画面ではコンテンツが充実しているが、小画面では課題となることがある
小さな画面では一部のコンテンツを隠しても、販売者がタップして詳細を見ることができれば問題ありません。
すべてのスクリーンサイズと一般的な OS を含む、すべてのデバイスを考慮する。最も制約の多いプラットフォームから始めるのがよいでしょう。
埋め込まれた Shopify アプリは、iOS と Android でサポートされており、ウェブビューでレンダリングされることを覚えておいてください。
販売者がより良い決断をするのを助ける
Shopify の管理者は、初めてのユーザーからエキスパートまで、すべての人に仕事をより良くする方法を教えなければなりません。
販売者が必要とする特定のタスクを理解することで、各画面の重要で実用的なコンテンツに焦点を当てます。販売者が自分のビジネスについて賢い選択をするために必要な情報に注目してください。
(左)注文リスクについては、関連性のある場合のみ言及する。
(右)実用的な情報を伝えられない要素を含まないようにする。
販売者のエラー回避を支援
最良のエラーメッセージは、エラーメッセージがないことです。インタラクションを作成するとき:
誤った変更を避けるために、フォームには常に明示的な保存アクションを使用してください。明示的な保存とは、販売者が自分で変更を保存しなければならない場合です。管理画面の多くの設定は、販売者のストアフロント、資金、またはオペレーションに影響を与えるため、リスクの低い変更であっても自動保存しないでください。販売者は一貫した編集体験を期待しています。
(左)破壊的なアクションについては常に警告する。
(右)確認モーダルを使用して、データを削除するアクションが意図的なものであることを確認します。
(左)データを削除する際には、破壊ボタンと確認モーダルを組み合わせて使用します。
(右)特にまとめて削除する場合は、すべてのケースで適用することをお忘れなく。
スマートなデフォルトの提供
カレンダーのイベントを作成する際には、今日の日付がスマートなデフォルトとなります。他の文脈では、異なるデフォルトが必要になるでしょう。
利用できないコントロールを非アクティブにする。インタラクション中にアクションやオプションが利用できなくなった場合、そのコントロールがクリックされたときにエラーを処理するのではなく、そのコントロールを非アクティブにします。
販売者がリストから選択している間は、フィルタリングやソートなど、リストの内容を操作するコントロールを無効にする。
さまざまな形式の入力を受け付ける。
販売者が様々なフォーマットで日付を入力できるようにする。販売者に「09/05/18」のような機械的なフォーマットでの日付の入力を強制しないでください。
検証エラーを回避し、難しい概念を説明するために、簡潔なインコンテクストヘルプを提供してください。これは一般的に Polaris のフォームコンポーネント上のヘルプテキストを使用して行われますが、このパターンは広く適用され、他の実装が可能です。
即時の UI フィードバック
販売者が UI に触れるとすぐに何が起きているかを伝えます。
インタラクションをすぐに確認します。新しいインタラクティブコンポーネントを作成するときは、インタラクションステートのガイドラインに従ってください。
トーストコンポーネントを使って成功したアクションを確認します。
(左)成功した行動を確認するための toast を使用する
(右)確認のためのバナーは使用しない
リクエストされたコンテンツをすぐに表示できない場合は、スピナーやスケルトンコンテンツなどのローディングコンポーネントを使用します。
入力者が入力する際にテキストフィールドを検証するなど、入力をインタラクティブに検証することができます。
バナーは、エラーや警告などの重要かつ一時的なフィードバックに使用します。
(左)バナーは、注文時の重要なメッセージに使用します。
(右)バナーは、決して消えることのない単純なステータスメッセージを表現するためには使用しないでください。
Polaris: 使う、拡張する、改善する
Polaris は管理者に触発されたものであり、管理者は Polaris に合わせるべきです。同時に、Polaris はガイドであり、目的地ではありません。Polaris は進化し、挑戦されるべきものです。
ユーザーインターフェイスデザインの問題に直面したとき。
- あなたの問題に関連するガイド、コンポーネント、およびパターンを見直してください。
- それらが問題を解決しない場合は、何か新しいものをデザインしてみましょう。デザインとコンテンツのガイドラインを使用して、Polaris らしさを維持してください。
- 解決策を比較します。販売者に最適な解決策を選び、アプリに組み込んでください。
- まだ迷っているのであれば、GitHubに連絡してください。
- 選択した解決策がシステムの明確なギャップを埋め、再利用可能な場合は、Polaris への追加を提案してください。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion