忙しい人向けの Design great widgets: Part 1 - #WWDC20

画像1

・Part 1(この記事)
Part 2

冒頭

iOS 14 でウィジェットは完全に再設計された。これまで以上に最新かつ文脈(コンテキスト)に基づいた情報が表示されるようになった。

画像2

ホーム画面に直接追加できるようになった。

画像3

スマートスタックは複数のウィジェットを1つにまとめて表示でき、フリック操作でローテーションできる。

画像4

さらにスマートスタックは、ユーザの行動とコンテキストに基づいて、自動的に適切なウィジェットを表示する。

画像5

ウィジェットをデザインするときのアイディア作成について見ていく。

画像6

Principles

まずは原則から見ていく。

画像7

アイディアを考える際は、PersonalInformationContextual、の3つの原則を探すとよい。

画像8

実際のウィジェットで、これらの原則がどのように機能しているのかを見ていく。

画像9

カレンダーでは、アプリのアイコンと同様に曜日と日付が表示される。開始時間や場所を表示することで、ユーザがアプリを開く行動を抑えることができる。

画像10

予定が詰まっている時は、詳細情報を折りたたんで2行にして表示する。

画像11

次の予定がなくなったら、何も表示しないようにするのではなく・・・

画像12

次の日の予定を表示する。これは現在の文脈だけでなく、時間の文脈での関連性を広げたよい例。

画像13

より個人的な情報として、その国の祝日を表示したり・・・

画像14

友人の誕生日を表示したり。これはホーム画面から個人的なつながりを感じることに繋がる。

画像15

写真ウィジェットは、ウィジェットがいかに個人的な体験であるかを示すよい例。最近の写真の代わりに、最高の写真を表示するようにしたり・・・

画像16

注目の写真を表示したり。

画像17

文脈を利用する例として、過去数年の今日の写真を表示したり。

画像18

天気ウィジェットでは、現在地や天気予報を表示する。

画像19

雨が降った場合は、いつ止むのかの詳細を表示する。

画像20

地図ウィジェットでは周囲の情報を確認できる。

画像21

地図ウィジェットは空間認識を構築する。例えば、自宅におらず車で出かけた場合は、車の駐車位置を表示したり・・・

画像22

次の予定がある場合は、そこまでの道順を表示したり・・・

画像23

あるいは自宅までの帰り道や所要時間を表示したり。

画像24

これらの例から、ウィジェットが非常に動的(ダイナミック)で、有益な情報を表示しており、コンテキストに応じた非常に個人的な情報を表示しているのが分かる。

Editing

ウィジェットには編集の機能がある。1つのウィジェットにどれだけの情報を詰め込むかが変わってくるので、アイディアの段階で考慮することが大切。

画像25

編集モードでウィジェットをタップすると・・・

画像26

編集画面が表示される。

画像27

天気ウィジェットでは、位置を変更することができる。デフォルトでは現在位置だがタップすると・・・

画像28

都市の一覧が表示され、選択することが出来るようになる。

画像29

ウィジェットがクールなのは、異なる設定のものを複数配置することができる点。これは1つのウィジェットに異なる情報を詰め込んで、複雑なレイアウトのウィジェットを作成してしまうのを防ぐことに繋がる。

画像30

標準のウィジェットのほとんどは、こうした編集をサポートしている。

画像31

Multiples

アイディアの最後として、複数のウィジェットを提供するか検討すること。

画像32

Stocks では、お気に入り一覧のサマリ、1つの銘柄の詳細、という2つのウィジェットを提供している。iOS 14 ではニュース・ノートなどのいくつかのウィジェットが複数をサポートしている。

画像33

Part 2 へ続く

免責

・本記事は公開情報のみに基づいて作成されています。
・要約(意訳)のみなので、詳細はセッション動画をご確認ください。


役に立った記事などありましたらサポート頂けると嬉しいです。