App Clipとタスク指向型のデザインについて
先月の6月22日に Apple が WWDC 2020を開催しました。
内容は Mac や apple watch など各端末における新しい OS の発表から、独自プロセッサの採用などハードやOS、ソフトなど多岐に渡るものでした。
デザイン関連はどこに注目すればいいか？は以下の記事が丁寧にまとめられていたので気になる方はチェックしてください。
目次
- この記事の結論
- タスク指向型のUIデザインも必要になりそう
- ちなみにオブジェクト指向型のUIデザイン について
- タスク指向型のUIデザインについて
- なぜタスク指向型のUIデザインに注目したか？
- App Clip とは何か？
- App Clip Card は タスク（CTA）が表示される。
- 端末をまたいで、アクションは継続される
- 端末毎の主要な役割を箇条書きしておきます
- PC
すべて表示
この記事の結論
・WWDC を見ていたらタスク指向型のUIデザインも意識しないとです。
・利用者はPC、スマホ、スマートウオッチなど端末をまたぐ状態でひとつのアクションを完結させていく。
・このアクションをシームレスな体験にするため、OSが用意しているUIデザインやパーツを理解しよう。
・でも、工数とリソースは注意…
タスク指向型のUIデザインも必要になりそう
近年、WebやアプリのUIデザイナーは、オブジェクト指向型のUIデザイン（Object-Oriented User Interface）を目指すことが理想になっているかと思います。
オブジェクト指向型のUIデザインについて詳しく知りたい方はソシオメディアの上野学さんが出されている情報をチェックするか、監修された著書「オブジェクト指向UIデザイン」を読むことをお薦めします。
オブジェクト指向UIデザイン──使いやすいソフトウェアの原理 WEB+DB PRESS plusamzn.to
3,114円(2020年07月09日 15:51時点 詳しくはこちら)
Amazon.co.jpで購入する
使いやすいサイト、使いにくいサイトを解消するためにどうすればいいか？の大きなヒントになると思います。
そんな中で WWDC を見ていたら、タスク指向型のUIデザインも意識して手を入れる可能性が高まったと思ったので以下にその理由を書いておきます。
ちなみにオブジェクト指向型のUIデザイン について
私はオブジェクト指向型のUIデザイン（OOUI）の専門家ではないので、詳しくは語れません。
ただ、OOUI の概念をまったく知らない方がこの記事を読むと意味がわからなくなりますので、簡単に説明を記載します。
上で紹介した書籍からの定義を引用すると、
『オブジェクト指向UIデザインとは、オブジェクトを手がかりに操作設計されたUIのこと』です。
iPhoneを例に、もう少しわかりやすく説明します。
まず、アプリのアイコンをイメージしてください。
このアイコンがひとつひとつがオブジェクトです。
どのアプリでもいいのですがアイコンをタップをするとアプリが起動しますね。これは”起動する”という動詞を実行したことになります。
オブジェクト（アプリ = 名詞） → 実行する（動詞）
他にも、iOS の場合アイコンを長押しするとメニューが出てきます。
メニュー例をあげると「Appを削除：とか「Appを共有」など実行したいアクション（動詞）が並びます。
このようにアイコン（＝オブジェクト）を選択してからアクションを決める設計思想（名詞→動詞）が、”オブジェクトを手がかりに操作設計されたUI”に該当するのでしょう。
タスク指向型のUIデザインについて
一方、タスク指向型のUIデザインとはなんでしょう。
これはタスク（＝解決すべき課題）の解決に焦点をおいた設計思想のUIデザインを指します。
例えば、飲食店でテイクアウト型の商品販売アプリがあったとします。
ホーム画面に「配達」「お持ち帰り」など動詞に該当するボタンが配置しています。このボタンを押下してから商品を選択するUIはタスク指向型のUIデザインに該当します。
アプリ利用する人は、商品を選んでから買う（配達かお持ち帰りか選ぶ）行動をイメージしている人がほとんどでしょう。
なので、使いづらい？と感じる人がいそうです。
一方、タスク指向型のUIデザインはメリットもあります。
最終ゴールを絞って利用者を誘導するUIなので選択肢が複雑でない、もしくはエラーを防ぎたい時に利用するといいですね。
例えば、電車の緊急停止ボタンとか。
なぜタスク指向型のUIデザインに注目したか？
前置きが長くなりました。
なぜ、タスク指向型UIデザインに注目したかといえば、App Clip の発表を見たからです。
App Clip とは何か？
App Clipは、利用者が必要な時に必要な機能の一部を提供するアプリを一部切り出したものです。
引用：Apple Developer Documentation
これだけだとわかりにくいと思うので、引用元（↑）の画像にあるコーヒー屋さんをイメージしましょう。
Location（位置GPS）機能を使うとします。
お店の近くに行くとと App Clip Card が表示されます。そして、「Open」ボタンをクリックするとコーヒー商品が並ぶアプリ（サイト）に飛びます。
その後、商品を選んで購入すると、あとはお店で受け取るだけ。とかそんな導線設計でしょう。
App Clip Card は タスク（CTA）が表示される。
もう一度この画像を見てみましょう。
左青地の Invocations 部分が Object（名詞）になってますね。
そして、App Clip Card 部分に表示されてる青ボタンが CTA 、「開く」アクション（動詞）になっています。
OOUIの概念を復習すると、オブジェクト選択 → アクションになるようにUIを設計するが原則です。
ただ、今回の図を見ると利用者が意識＆選択しないところで、急に通知が来てアクションを迫られる導線になってます。
利用者にとっては、何かを選ぶわけではなく、いきなり動作を迫られるような感じです。
App Clip Card は原則ひとつのアクションしかいれられないようになってるでしょう。
ドキュメントを読み込んでいないので不確定な情報ですが、もし他のアクションをつけられたとしてもテキストリンクなどでキャンセル、無視する、設定画面にいくなど動作をつけられる感じでしょうか。
つまり、このタスクが表示される画面のデザインが重要になってきましたね。
・OS と連動しているので、どこまでデザインできるのか？画面サイズは？
・この制限を理解したうえで、利用者の行動をどう設計、デザインしていくか？
・ともかく開発ドキュメント読もうっと。
端末をまたいで、アクションは継続される
また、Macなど特定の端末で設定したアクションは、他の端末ごとに切り出されて継続された状態をシームレスにデザインする必要があります。
（英語を日本語に訳したような文章だ…ｗ）
引用画像：https://www.apple.com/jp/icloud/find-my/
例えば、ランニングアプリをイメージしてください。
ランナーはいつも通り"ランニング"というひとつのタスクをするだけですが、そのタスクは端末をまたいで行われていきます。
・スマホでランニングアプリを起動
・メニューを選ぶ
・実際に走る（音楽聞きながら）
・音楽のボリュームをスマートウオッチで調整する
・ランニングが終了したら、スマートウオッチで終了ボタンを押す
・家に帰って、タブレットでランニング状況を閲覧、シェアする
このとき、最後のアクション（終了するボタンなど）だけは各端末に引き継がれ、どのデバイスで対応してもその体験には一貫性が求められます。
なので、ここのタスク型で設計されてる画面のデザインめちゃ大事ですよねという話でした。
端末毎の主要な役割を箇条書きしておきます
そんなこんなで、自分が見返す時ように端末ごとの役割を箇条書きで整理しておきます。
PC
・もっとも広い機能と役割が期待される。
・GPS機能はあまり期待されない。
・可能性が無限なので役割かけない。
タブレット
・ネット閲覧
・コミュニケーション
・音楽を聞く
・動画を見る
・ゲームをする
・本を読む
・絵を描く
・写真を見る、加工する
・買い物
・スマートホームの操作
スマホ
・ネット閲覧
・コミュニケーション
・音楽を聞く
・動画を見る
・ゲームをする
・買い物
・通知を受け取る
・ナビゲーション
・スマートホームの操作
スマートウオッチ
・活動を計測する
・通知を受け取る
・ナビゲーション
・コミュニケーション
スマートスピーカー
・音楽を聞く
・タイマー
・ニュースや情報を聞く
・スマートホームの操作
どこまで、利用者の行動を考えて端末毎にデザインしていかなきゃいけないんだよ…ですね。
デザイナーの皆さん、時間と戦いながらがんばっていきましょう。
そして、横文字多くてすんませんでした。
最後に宣伝 [UIデザイナー募集してます]
現在、ajike では UIデザイナーを募集しています。
仕事内容はユーザーの体験を考えてUIを作っていくことです。
我々にご相談いただく多くのお客様はよいプロダクトやサービスを作り、それを使ってもらうことで社会に貢献しようとされている方ばかりです。
そんなお客さんに期待されることはキレイなデザインをするだけでなく、どうすればよいサービスになるか？ユーザーに喜んでもらえるか？を一緒に考え、そして抽象的なアイデアに終始するのではなく具体的なかたちをつくり試すことです。
そこにはすぐに役立つハック的な方法はあまり存在しませんが、何が正解かを探しながら仲間とがんばっております。
いったんのゴールを迎えたときにはお客さんや仲間と「おーいい仕事したね〜。ユーザー喜んでくれてるかな〜」とかを共有する環境です。
なので、そんな仕事内容や仕事スタイルに興味がある人はぜひ面談だけでもよろしくお願いします。
採用情報 | ajike アジケ株式会社アジケの採用情報をご案内しています。UXデザイナー、UIデザイナー、エンジニアの求人情報はこちらをご覧下さい。ajike.co.jp
