WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
The practice of inclusive design

The practice of inclusive design

DesignAccessibilityInclusion
元の動画を見る

ハイライト

Apple は、アプリやゲームがより幅広い人々にサービスを提供できるように、開発者が App Store のスクリーンショット、インターフェイスのコピーライティング、アクセシビリティ、ローカリゼーション、色とアイデンティティの表現から始めるのを支援するために、インクルーシブ デザインを 6 つのチェック可能なコンテンツ プラクティスに分類しました。

主要内容

多くのアプリは、リリース前にクラッシュ、パフォーマンス、スクリーンショットのサイズを注意深くチェックしますが、スクリーンショットに表示される名前、食べ物、祝日、アバターをチェックすることはほとんどありません。開発者は多くの場合、自分自身の人生経験から資料を引き出します。ソーシャル アプリは知人グループでボートに行くためのもの、ToDo アプリはジョンに電話をかけ直して誕生日のディナーを買うためのもの、フード アプリはパンケーキ、ピザ、ハンバーガー用です。

これらのコンテンツは無害に見えるかもしれませんが、この製品がデフォルトで誰にサービスを提供するのかという事実をユーザーに伝えることになります。 App Store には毎週 5 億人が訪問し、175 以上の地域と 40 の言語にまたがっています。ユーザーはアプリをダウンロードする前に、名前、プレビュービデオ、スクリーンショット、マーケティングコピーに基づいて、アプリが検討されているかどうかをすでに知ることができます。

Appleはこのプレゼンテーション中に新しいフレームワークを発表しなかった。それは一連のデザイン チェックポイントを提供します。つまり、多様なストーリーを語り、固定観念を回避し、アクセシビリティを採用し、文化的にローカライズし、色の使用を控えめにし、自己表現を奨励します。

この方法の焦点は、特定のインターフェイスへの「包括性」を減らすことです。歯車ボタンでは、VoiceOver に単に「歯車の形 2」と言わせることはできません。家族共有機能は、父親、母親、子供の3つの固定的な役割だけを提供することはできません。名前フォームでは、ハイフン、アクセント、長さ、姓の構造を理由に入力を拒否することはできません。

開発者が得られるのは、実践のチェックリストです。ユーザーに公開されるコンテンツのすべての点で、「このインターフェースは、言語、能力、文化、性別、年齢、家族構成が異なる人々にも耐えられるか」という同じ質問を受け入れることが必要です。

詳細

App Store スクリーンショット: 最初に誰の話をしているのかを確認してください

(04:18) 最初の実践は、多様なストーリーを伝えることです。 Apple は、アプリの名前、説明、プレビュービデオ、スクリーンショットによって、その製品が誰向けに作られているかが分かると述べています。最もよく知られた名前やシーンだけでなく、スクリーンショットのサンプル コンテンツもデザインする必要があります。

Inclusive screenshot audit
1. social app: kayaking trip -> community service with a more diverse group
2. to-do app: return John's call -> return Abhi's call
3. to-do app: shop for dinner -> plan Diwali
4. to-do app: read a familiar book -> read Chinua Achebe
5. to-do app: practice an instrument -> practice sign language
6. food app: pancakes, pizza, hamburgers -> foods from more cultures

キーポイント:

  • social app対応するスピーチにおけるソーシャル アプリケーションのスクリーンショットの例。
  • kayaking trip開発者が最初に思いつくのは、よく知られたライフスタイルです。
  • community serviceスクリーンショットを、より多くの人が理解できる公開シーンに変更します。
  • return Abhi's callデフォルトの知人名サークルを特定の名前に置き換えます。
  • plan DiwaliTo Do リストを交換して、10 億人以上が祝う休日を過ごしましょう。
  • read Chinua Achebeあまり代表されていない著者の声を紹介します。
  • practice sign languageスクリーンショットで聴覚障害者コミュニティへの参加を積極的に示すようにしましょう。
  • foods from more cultures食品アプリでは、一般的なアメリカの食べ物だけを表示しないよう警告します。

このチェックリストは、公開前に App Store のアセットを確認するのに最適です。各スクリーンショットでは、ここでの名前、アクティビティ、食べ物、休日、会話は、開発チームが最もよく知っている生活からのみ引用されたものであるかどうかを尋ねます。

ステレオタイプ化: 言語と機能の両方で仮定を少なくする

(07:55) 2 番目の実践は、固定観念を避けることです。 Appleは、言語における性別二分法と、機能における家族役割の仮定という2つの具体的な方向性を挙げた。

Copy and role audit
1. unknown gender: he / she -> they
2. video greeting: Hey, guys! -> Hey, everyone!
3. placeholder avatar: masculine person icon -> non-gendered human icon
4. SF Symbols: use gender-neutral glyphs when a generic person is needed
5. family roles: father, mother, child -> family member
6. family size: fixed slots -> start with account owner, then let people add members

キーポイント:

  • he / she -> they音声で性別が不明な場合は、性別に依存しない代名詞を使用することについてのアドバイス。
  • Hey, guys! -> Hey, everyone!ビデオとインターフェースの挨拶を変更して、より多くの人にリーチできるようにします。
  • masculine person icon「ユニバーサル ユーザー」はデフォルトでは男性になります。
  • non-gendered human icon性別を暗示するアバターのプレースホルダーは避けてください。
  • SF SymbolsBeing Named in Speech は、アプリやゲームで使用できる性別に依存しないグリフを提供します。
  • father, mother, childひとり親世帯、同性親世帯、多世代世帯、成人した子どもと保護者の世帯は対象外となります。
  • family member不必要な役割の仮定を手放しながら、機能的なセマンティクスを維持します。

ここでは単語チェックと機能構造チェックが行われます。スピーチ内の共有ムービー ライブラリの例は、データ モデルが父親、母親、子供のみを受け入れる場合、インターフェイスのコピーがどれほどフレンドリーであっても、他の家族にはサービスを提供できないことを示しています。

アクセシビリティ: システム機能をデフォルトのテストプロセスに組み込みます

(13:47) 3 番目の実践は、アクセシビリティの導入です。 Apple が最初に挙げた反例はアイコンボタンです。ユーザーがアプリケーションに入った後、VoiceOver には「歯車の形 2、ボタン」のみが読み上げられます。これは、システムはそれが歯車アイコンであることは認識していますが、それが現在のアプリケーションのアカウント設定を表していることは認識していないことを意味します。

Accessibility implementation checklist
1. Dynamic Type: use SwiftUI or UIKit text and layout systems
2. Bold Text: thicken non-text elements that affect legibility
3. VoiceOver glyph button: Gear shape two, button -> Account settings, button
4. VoiceOver state button: glyph button -> Remove favorite, button
5. VoiceOver order: make the prominent Post button read before top-left content
6. Test menu: VoiceOver, Increase Contrast, Reduce Transparency, Reduce Motion, Grayscale Color Filter
7. Control Center: add Text Size toggle for quick testing

キーポイント:

  • Dynamic TypeiOS のテキスト サイズ範囲をカバーするインターフェイスが必要です。
  • SwiftUI or UIKit text and layout systems講演の中にあった自動適応入口です。
  • Bold Textオンにすると、テキストではないが読みやすさに影響する点や線などの要素も太字になります。
  • Gear shape two, button -> Account settings, buttonVoiceOver タグはビジネス機能を表現する必要があることに注意してください。
  • Remove favorite, button説明ラベルにはボタンの状態を反映することもできます。
  • Post button read before top-left content音声の読み上げ順序を指定する例に相当します。
  • VoiceOver、Increase Contrast、Reduce Transparency、Reduce Motion、Grayscale Color Filterこれらはすべて、講演でアクセシビリティ ショートカット メニューに追加することが推奨されているテスト項目です。
  • Text Size toggleこれをコントロールセンターに入れると、フォントサイズをすばやく切り替えることができます。

この部分は開発プロセスに入ります。講演では、開発者が次の設定をオンにしてアプリを自分で試してみることを推奨しています。グレースケール モードで色への依存をチェックし、ミュート モードで音声への依存をチェックし、大きなフォント サイズでテキストの切り捨てやレイアウトのクリッピングをチェックします。

ローカリゼーション: テキストの翻訳に加えて、文化的なシーンも置き換える必要があります

(19:20) 4 番目の実践は、文化のローカライズです。スピーチでは、まず翻訳とローカリゼーションが区別されました。翻訳では、言語、単語の長さ、書記体系、吹き替え、字幕、時間、電話番号、通貨を扱います。ローカリゼーションは文化的な影響も扱います。

Localization content checklist
1. idiom: Nine cows and one hair -> a drop in the bucket -> a tiny amount
2. app copy: Plan your vacation from A to Z -> Plan your vacation from beginning to end
3. cooking app in India: translate to Hindi -> adapt recipes and ingredients
4. recipe content: beef and sausages -> dishes relevant to local dietary customs
5. festival content: surface recipes typically eaten during local festivals
6. game content: avoid caricatures of real cultures in characters and environments

キーポイント:

  • Nine cows and one hairは、慣用句が異文化間で理解するのが難しいことを示すために、スピーチで使用される中国語の表現です。
  • a drop in the bucket対応する英語のイディオムです。
  • a tiny amountこれは直接的な意味であり、翻訳が最も簡単です。
  • Plan your vacation from A to Z英語のアルファベット順に依存すると、韓国語などの言語にすると失敗します。
  • Plan your vacation from beginning to end翻訳コストを削減するには、直接的な言葉を使用します。
  • translate to Hindi -> adapt recipes and ingredientsこれは、インド市場における調理アプリケーションが単にインターフェースの翻訳を完了することができないことを示しています。
  • beef and sausages地元の食習慣や宗教文化と矛盾する可能性があります。
  • local festivalsコンテンツを地域の生活とより関連性のあるものにするための入り口を提供します。
  • avoid caricaturesゲームのキャラクターや環境に関しては、現実の民族グループを敵、エキゾチックなエイリアン、または空想の種族の素材にすることは避けてください。

Apple はここで実践的な基準を示しています。コピーの文が慣用句、スラング、ユーモア、比喩に依存している場合は、それを直接的な表現に変更することを優先します。単純なコピーは理解しやすく、翻訳も簡単です。

色: 同じ色でも地域によって意味が異なります。

(24:36) 5 番目の練習は、色を慎重に使用することです。色には、アクセシビリティの問題だけでなく、文化的な意味もあります。スピーチでは、Stocks (株式市場) アプリケーションの例を挙げました。ほとんどのローカライズされたバージョンでは、増加を示すために緑が使用され、減少を示すために赤が使用されます。地域が中国本土に設定されている場合、増加分は赤色で表示されます。

Color checklist
1. culture: green for gains, red for losses -> Mainland China uses red for gains
2. status dots: unread color dot + flagged color dot -> replace one dot with a glyph
3. contrast setting: test with Increase Contrast turned on
4. system palette: use iOS system colors to get high-contrast support
5. custom palette: calculate luminosity ratio between text and background
6. target ratio: aspire to at least 4.5:1 when Increase Contrast is on

キーポイント:

  • green for gains, red for losses多くの地域でのストックカラーカスタムです。
  • Mainland China uses red for gainsトークからの株式をローカライズするための手順。
  • replace one dot with a glyph色盲のユーザーが色だけでは「未読」と「マーク済み」を区別できないという問題を解決します。
  • Increase Contrast音声提案テストのシステム設定です。
  • iOS system colorsハイ コントラスト モードをサポートする追加のカラー コレクションが含まれています。
  • custom palette開発者はテキストと背景の明度比を自分で計算する必要があります。
  • 4.5:1Speech がハイコントラスト モードでの作業を推奨する最低の比率です。

この部分は、視覚的な詳細と最も誤解されやすい部分です。実際の問題は情報のエンコードです。ステータスを表現するために色だけが使用されている場合、色覚異常のユーザーには違いが分からない可能性があります。地域によって色の意味が調整されていないと、ユーザーの理解が逆になってしまう可能性があります。

自己表現: フォームはユーザーが自分自身を識別する方法を制限すべきではありません

(28:05) 6 番目の実践は、自己表現を奨励することです。 Apple はネームシートから始まります。多くの人の名前にはハイフンやアクセントが含まれており、一般的な制限よりも長い場合があります。地域によっては「名＋姓」の構成になっていない場合もあります。

Identity input checklist
1. name validation: allow hyphens and accents
2. name length: avoid fixed minimum and maximum assumptions
3. name structure: first name + last name -> full name field when appropriate
4. personal address: ask for preferred name
5. gender field: Male, Female, Other -> wide range of options plus custom entry
6. gender visibility: allow public or private
7. character creation: age, skin color, body type, hair, clothing, language, vocal tone
8. game design: do not bucket hair, clothing, or voice by gender when gender is not needed

キーポイント:

  • allow hyphens and accentsスピーチでの名前確認失敗の一般的な理由に対応します。
  • avoid fixed minimum and maximum assumptions短い名前と長い名前が拒否されないようにします。
  • full name field法人名を分割する必要がないシナリオに適しています。
  • preferred name将来的には、アプリがユーザーにもっと密接に対応できるようにします。
  • wide range of options plus custom entryサインアップ時に複数の性別オプションを提供し、カスタマイズの送信を許可する Bumble の例。
  • allow public or private性別情報を表示するかどうかをユーザーが制御できるようにします。
  • age, skin color, body type, hair, clothing, language, vocal toneゲーム「Say No! More」のキャラクター作成例。
  • do not bucket hair, clothing, or voice by gender機能が性別を必要としない場合は、性別を尋ねる必要がないことを説明します。

フォーム設計者は、製品の前提条件をデータベース フィールドに書き込むことがよくあります。この講演では、入力方法を決定する前に、そのフィールドが本当に必要かどうかを自問するよう開発者に注意を促しています。できるかどうかは尋ねないでください。どうしても尋ねなければならない場合は、ユーザーに表現や変更のためのスペースを与えてください。

重要ポイント

  1. やるべきこと: App Store のスクリーンショットの起動前コンテンツ監査を実施します。 価値がある理由: プレゼンテーションでは、スクリーンショット、名前、プレビュー ビデオ、説明によって、製品をダウンロードする前にその製品が誰向けに作られたのかがユーザーにわかると指摘しています。 開始方法: すべてのスクリーンショットに名前、アクティビティ、食べ物、休日、会話をリストし、知人資料のデフォルトのサークルをより文化的およびライフスタイルの例に置き換えます。

  2. やるべきこと: 「コピー包含チェック」スクリプトまたは手動チェックリストをアプリに追加します。 実行する価値がある理由: スピーチでは具体的な置き換えが行われます。he / sheに変更しますthey，Hey, guys!に変更しますHey, everyone!。 開始方法: ローカリゼーション文字列をスキャンして、実際のユーザーまたはローカライザーにレビューのために渡す前に、性別の二分法、障害者向けの単語、イディオム、スラング、比喩にフラグを付けます。

  3. やるべきこと: すべての UI 回帰テストにアクセシビリティ設定を追加します。 実行する価値がある理由: この講演では、VoiceOver、コントラストを上げる、透明度を下げる、動きを減らす、グレースケール カラー フィルター、およびテキスト サイズを使用してアプリをテストすることを推奨しています。 開始方法: 新しいラウンドのシステム設定テストをテスト リストに追加します。アイコン ボタンの VoiceOver 発音、大きなフォント サイズの切り捨て、ステータスがグレースケールで区別できるかどうか、ミュート時にプロットや操作が失われるかどうかを確認することに重点を置きます。

  4. やるべきこと: 国際市場向けの「翻訳 + コンテンツ置換」プロセスを確立します。 価値がある理由: プレゼンテーション内の料理アプリは、たとえヒンディー語に翻訳されたとしても、牛肉やソーセージなどのコンテンツが現地の食文化に適合しないため、失敗する可能性があります。 開始方法: 地域に入るたびに、まず単位、通貨、食べ物、休日、色、タブーの内容をリストします。現地担当者に推奨コンテンツとデフォルトの例を確認してもらいます。

  5. 対処方法: 登録ページの名前と ID フィールドをやり直します。 実行する価値がある理由: この講演では、名前の長さ、ハイフン、アクセント、姓の構造、性別のオプションはすべて、ユーザーが自分自身を表現できるかどうかに影響を与えると指摘しています。 開始方法: 単一のフルネームフィールドと優先名 (優先名) の使用を優先します。性別フィールドは、製品が本当に必要とする場合にのみ表示され、カスタマイズ、プライバシー制御、およびその後の変更へのアクセスを提供します。

関連セッション

コメント

GitHub Issues · utterances