uidesign タスク指向のUIデザインとは
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

タスク指向のUIデザインとは

UIデザイン|2020年10月07日

2020年10月07日
  • このエントリーをはてなブックマークに追加

今回はUIデザインの初歩中の初歩、タスク指向から学習しましょう。
タスク指向とは、人間のタスクに沿ったUI設計です。

基本は「〜をする」といった「動詞」を先に選択する形です。
前回、簡単に説明しましたが、少しおさらいしましょう。

例えばファイルを開くUIを作るとします。
タスク指向UIを図にすると下記のようになるでしょう。

まず「開く」などの「動詞」を指定し、それから開くファイルを選ぶ。
「何をするか先に選ばせる」のが、タスク指向です。

一方、オブジェクト指向だと下記のようになります。

まず「ファイル」を選んでから「何をするか」選びます。
先に「名詞」を選び、後から何をするか「動詞」を選ぶ。

タスク指向とは真逆の考え方ですね。
オブジェクト指向の方が行動の自由度は高く、ページ数も少なくなります。

タスク指向を使った方がいいケースとは

一般的に、タスク指向のアプリは時代遅れとされます。
オブジェクト指向の方が自由度も拡張性も高いからです。

ただ、タスク指向も適材適所です。
例えば、高齢者が使うメモアプリを作る時。
高齢者は自由度が高ければ高いほど、使いこなせない傾向が高いです。

オブジェクト指向の場合、メモの流れは下記になります。

  1. 「メモ一覧」から編集するメモを選ぶ
    ( 新規作成の時は、画面右下の「+マーク」を選ぶ )
  2. 「そのまま文章を書く」か「削除」など行動を選ぶ

しかし、高齢者の場合、メモ一覧が出てきた後、迷う人も多いです。
編集は? 新規追加は? 削除は?
行動の「指示が無い」ので混乱してしまうのです。
これをタスク指向にするとどうなるでしょう。

  1. 「新規作成」「編集」「削除」などを選ぶ
  2. 「どのファイルを編集するか」を一覧から選ぶ

その都度、しっかり指示も出してあげると良いです。
手続き型で指示された方が習熟も早いセグメントも多くあります。
そもそも決まった操作さえ出来れば良いユーザー層なら自由度も不要です。

とは言え実際、オブジェクト指向の方が使いやすいと思う方が多いはずです。
普段からアプリを使い慣れていれば、当然の感覚でしょう。

行動を先に選ばせるタスク指向だと手続きが増えます。
オブジェクト指向なら、編集も削除もメモ詳細画面に集約できます。
そもそもメモを選べば即編集なので、編集ボタンも必要ありません。

タスク指向だと、編集や削除を選んでから連絡先を選びます。
確実に手続きは増えてしまうのです。
ただ、着実に指示を実行したもらいたい場合は使えます。

ATMもそうです。
決まった操作をさせるアプリなどはタスク指向です。

必ず手続き的に行なって、順番どおり進めた方が良い。
そもそも使う対象が、自由度を求めていない。
決まった操作をできれば満足するセグメントである。
そうしたケースは、タスク指向のUIが適切でしょう。

逆に、自由度の高いUIにしたい時はオブジェクト指向が良いです。

オブジェクト指向だけ学べば良いという人もいますが、そうは思いません。
確かに大半はオブジェクト指向がベストですが、そうでないケースもあります。
よって、タスク指向、オブジェクト指向、どちらも使いこなせるべきです。

タスク指向UIのデザインフロー

では、さっそくデザインの流れをご説明させて頂きます。
簡単なミッションも出しますので、ご自身で挑戦してみてください。
タスク指向のデザインフローは、下記の順番で行われます。

  1. 共感とタスク分析
  2. タスク指向設計
  3. レイアウトパターン設計
  4. プロトタイプとユーザビリティテスト
  5. デザインルール策定
  6. 実装とアップデート

前回ご説明したルールと、ほぼ変わりませんね。
オブジェクト指向設計がタスク指向になるだけです。

タスク指向設計では、集めた情報を順番に並べ、整理します。
その他の項目は、前回の説明と一緒です。

ただ、これらはUI設計カリキュラム全体を通して学んで頂きます。
ボリュームがあり、すぐ出来ることでもありません。
なので今回は練習として、2と3に挑戦してみましょう。

タスク指向設計の方法

では、前回の説明になかった、タスク指向設計の方法を解説します。

と言っても、タスク指向設計はシンプルです。
基本的には、下記の流れで設計しましょう。

  1. 集めたタスクをリスト化する
  2. リスト化したタスクに優先順位をつける
  3. タスクを実行する流れを決め、図に書き起こす

基本的にはこの3つで問題ありません。

まず集めたタスクをリスト化してください。
煩雑にメモしたままだと、どれが大事が見失います。
リスト化して整理することで、冷静に何が重要かを見分けられます。

次に、リスト化したタスクに優先順位をつけます。
不要だと感じるものや類似のものがあれば消しましょう。

ユーザーに言われた通り作っても、それが本当に使いやすいとは限りません。
同じ画面や機能にまとめられるものがあれば、まとめてください。

あとは、優先順位に上げたタスクを図にします。
どのタスクから、どの順番で実行すれば良いか考えてみましょう。
最もわかりやすくシンプルになるように、心がけてください。

ポイントは3ステップ以内でタスクを完了することです。
順番どおりにこなすと言っても、長すぎては使いづらいだけです。
最後までこなせずに、途中で諦めてしまうでしょう。
なお、お気に入りボタン、タグ、カテゴリーはメモ詳細にまとめる想定です。

こうして、タスク指向の流れが決まります。
後は、それぞれのページをレイアウトに起こすだけです。

今回の練習ミッション

一通り学んだところで、練習を初めていきましょう。
テーマは「高齢者用のレシピスケジュール管理アプリ」です。

朝食、昼食、夕飯「何を作ろうか迷う」という問題を解決します。
予めレシピのスケジュールを決めて、その日迷うストレスを減らしましょう。

今回の練習では、メモを提供します。
タスク分析を行って作ったメモと仮定してください。

タスクをリスト化し、優先順位をつけましょう。
さらにリストから、流れの図を書き起こしてみましょう。
今回は、タスク指向で作ってみてください。
作った図は、そのままポートフォリオにでOKです。

それでは、下記のメモを元に、図を起こしてみてください。

  • わかりやすい形でスケジュールを閲覧したい
  • レシピはクックパッドのように予めあるものを選びたい
  • 必要な材料も教えて欲しい
  • レシピをジャンル別、人数別、夕飯・ランチ・朝食で検索したい
  • レシピの栄養について自動でアドバイスが欲しい
  • 選ぶのが面倒な時もあるので自動おすすめしてほしい

割と複雑な要件かと思います。
本来ならオブジェクト指向で作る方が多い案件です。

ただ、高齢者の場合、オブジェクト指向だと操作が分からない場合があります。
例えば70歳以上でクックパッドを使える人がどれだけいるでしょうか。
年齢のセグメントを意識してUIを作ってみてください。

指示通りボタンを押していれば、高齢者でも簡単に使えてしまう。
そんなアプリが理想です。

今回作ったアプリは、後ほど改めてオブジェクト指向の練習にも使います。
一度タスク指向で作ることで、オブジェクト指向も深く理解できるでしょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら