優れたウィジェットをデザインする – WWDC2020

Session概要

ウィジェットの機能概要

• ユーザがホーム画面で直接追加するアプリの機能で、コンテキストが動的に変化しユーザ体験を向上させる
• スマートスタック
  • 一ヶ所に複数のウィジェットを追加でき、その中でウィジェットを素早く切り替えられる
  • 使い方に応じて表示内容を動的に変えられ、自動的にその時に最適なウィジェットを表示する
    • 個々のユーザのデバイスや使い方や求めている情報の内容によって一人一人異なる
      
      

ウィジェットをデザインする際に重要な点

1. アイデア
2. クリエイション

アイデア

アイデアにおける原則

• アイデアを練る際に重視すべき3つの原則
  • パーソナル化
    • アプリやそこでの体験により深い心の繋がりを感じられるため
      • 例えば、カレンダーアプリだとローカライズされた祝日の表示や友人の誕生日などを表示することでパーソナル化を表現
  • 情報提供
    • アプリの最上位の情報における概要をわかりやすく表示する
    • 適切な情報を提供することでアプリ内で繰り返し行うアクションが省略可能
      • 例えば、カレンダーアプリだと日付は曜日以外にその日におけるイベントや予定を最重要情報として表示されるため、アプリを開いて確認する手間が省ける
      • また、今現在のコンテキストだけでなく時間によっては（夜など）明日の予定を表示するなどのアプローチが可能
  • コンテキスト
    • 必要な時に必要な情報を表示するのに役立ち、ネクストステップへとスムーズにつなげる
      • 写真アプリであれば、過去にフィーチャーされた写真やお気に入りの写真をピックアップすることで実現
      • 天気アプリであれば、強風雷などの固有の気象情報や雨が降るのかどうかを把握可能
        
        

ウィジェットの編集

• 1つのウィジェットに含める情報量をユーザが選択可能
  • 一つのアプリで複数のウィジェットを作成可能
    
    

複数のウィジェット提供

• 複数のウィジェットを提供するかどうかを決める
• 複数のウィジェットをサポートすることで、ユーザが一つのアプリでの情報量を選択できる。また、ウィジェット編集の幅が広がることでユーザのユースケースに応じた情報を提供することができる

クリエイション

• 上記のアイデアをどのようにアプリに落とし込むか

サイズとインタラクション

• 3種類のサイズでウィジェットをデザイン可能
  • small
    • タップ領域はウィジェットの部分全てでコンテンツのリンク先に遷移する
  • medium
    • タップ領域は複数で、タップ箇所によって遷移先が変わる
  • large
    • インタラクションはmediumと同様
• タップの種類
  • fillスタイル
    • 1つのコンテンツのリンク先に遷移する時に使用する
    • smallサイズはfillスタイルが使用される
  • cellスタイル
    • アプリ毎に独自の形をしたウィジェットから、コンテンツを一つ選択する場合に使用する
  • contentスタイル
    • ウィジェット内に無いコンテンツを選ぶ場合に適している
      
      

コンテンツと個性

• ウィジェットをデザインする際は、コンテンツと個性を同時に考える
• ユーザはいつ、何のためにアプリを起動するかを考え、ユーザにとってアプリのどの情報が有益なのかを見極める
• 対象のアプリがわかるようなデザインを設計する
  • アプリのプライマリーカラーやアイコンをウィジェットに含めるなど
• レイアウトとコンテンツのパターン
  • ウィジェットのサイズによって拡張するパターン
    • 例えば、天気アプリであればサイズによって天気の情報量を増やしている
  • サイズ毎に全く異なるレイアウト
    • 例えば、Newsアプリではsmallウィジェットはスペース全体を使用してリッチコンテンツを優先表示し、mediumウィジェットではより多くのニュース記事が表示できるようにしている
• コンテンツのデザインにおける注意点
  • 小さいウィジェットをそのまま拡大して大きなウィジェットにしないこと
    • どのような情報を扱っているかを考え、各サイズに最適な内容にする
  • 大きなウィジェットに入れる情報がない場合は、特定のサイズだけサポートするようにする
  • smallウィジェットにサマリー情報を入れる場合は、4つまでとする
    
    

ウィジェットのパターン

• どのウィジェットサイズに共通したレイアウトは、単一アイテムを組み合わせにより高密度で複数アイテムをサマリー表示するレイアウトパターンがある
• 既に成功しているパターンを採用する
• カスタムレイアウトのデザイン時における注意点
  • 自身のカスタムレイアウトをデザインする時は、他のアプリのウィジェットと並んだ時に統一感が取れるよう、全てのサイズでデフォルトの16ptのレイアウトmarginを取るようにする
  • 円形や差し込み図などの図形を入れる時は、全てのサイズでさらに小さい11ptのmarginを取るようにする
  • ウィジェットの端近くに図形の角がくる場合は、ウィジェットの角丸と同心状になるようにする
    • ウィジェットの角丸はデバイスサイズによって異なるため、SwiftUIコンテナを使用することで角丸の値を指定しなくて済む
  • フォントの指定
    • SF pro
    • SF Mono
    • SF Pro Rounded
    • などのSan Francisco系のフォントを使用する
    • カスタムフォントを使用する場合は、他のウィジェットとならんだ時に自然に見えるようにする
  • ウィジェットはライトモード・ダークモードの両方で見栄えがよくなるようにする
  • ウィジェットにはシステムがウィジェットのデータを表示できない時に表示するためのプレースホルダが必要
    • レイアウト上でテキスト情報が表示される場所を確保する
      
      

ウィジェットをデザインする際の重要なヒント

• ウィジェット内にアプリのロゴを含めることができるのは、下記のように様々なコンテンツの情報を集約するタイプのアプリのみ可能
  • ロゴは必ず右上角に配置する
  • ワードマークはこの場所やウィジェット内のどの場所にも使用しないようにする
• ウィジェットにアプリのアイコンは入れてはいけない
• ウィジェットにアプリ名を入れてはいけない
  • ウィジェットの下に表示されるアプリ名と重複するため
• ユーザへの指示や問いかけにテキストを使わないようにする
  • 何かを伝える必要がある場合は、グラフィックで表すようにする
  • ウィジェット上に時系列情報を表示する際は、「最終更新時間」や「最終チェック時間」などの言葉は使用しないようにする