16
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

感想「オブジェクト指向UIデザイン」

Last updated at Posted at 2025-02-04

本記事は『オブジェクト指向UIデザイン』という書籍に基づいたメモです。

オブジェクト指向UIデザインの概要

オブジェクト指向でUIを設計すると、ユーザーはマニュアルを読むことなく直感的に操作できると感じやすくなります。しかし、実際のシステム設計では、ユーザーの複雑な要求事項ややりたいことをまとめる過程で、どうしても「動詞」を中心としたタスク指向のUIになりがちです。その結果、使いにくいシステムが生み出されることが少なくありません。

オブジェクト指向UIとタスク指向UIの違い

オブジェクト指向UI

例:写真アプリ
写真アプリでは、ユーザーはまず「写真」というオブジェクト(名詞)を選び、次に削除や編集といった行動(動詞)を自由に実行できます。
この「名詞 → 動詞」の流れにより、ユーザーにコントロール感が与えられ、結果として使いやすいUIが実現されます。

写真アプリのUI例

タスク指向UI

例:自動販売機
従来の自動販売機は、まず「お金を入れる」という動作(動詞)から始まり、その後に「商品を選ぶ」という流れになっています。
たとえば、一度お金を投入した後に商品を購入しない場合、返金レバーを押すという余分な操作が必要になります。
このように、動詞から始まるタスク指向のUIは、モードが存在し操作が制限されるため、ユーザーにとって操作が煩雑になる場合があります。

自動販売機のUI例

最近の自動販売機では、
商品を先に選択し、その後にSUICAなどで支払いを行うことで、ユーザーは商品選択後に購入するかどうかを柔軟に決定できるようになっています。返金レバーを押す必要がないため、オブジェクト指向UIの利点が活かされていると言えるでしょう。

オブジェクト指向UI設計のプロセス

オブジェクト指向UIの設計は、以下の3つのプロセスで進めることができます。どのプロセスから始めても問題はありませんが、特に 「オブジェクトの抽出」 は非常に重要なステップです。

1. オブジェクトの抽出

アプリケーション設計の初期段階で、ユーザーの「〜したい」という希望(タスク)を整理します。たとえば、イベント予約システムであれば、以下のような要求が挙がることが考えられます。

  • ユーザーがイベントを予約できるようにする
  • 管理者がイベントを登録・編集できるようにする
  • イベントの予約期間を設定できるようにする

これらをそのまま動詞中心に設計してしまうとタスク指向UIになってしまいます。そこで、各タスクから名詞(オブジェクト)を抽出し、それらの関係性を整理することで、ユーザーが直感的に操作できるUI設計を目指します。

2. ビューとナビゲーションの検討

抽出したオブジェクトを基に、どのような画面構成や操作フローにするかを検討します。ユーザーが必要な情報にすばやくアクセスできるよう、ナビゲーションの工夫が求められます

3. レイアウトパターンの適用

最後に、既存のレイアウトパターンやデザインパターンを活用して、UI全体の整合性や視認性を向上させます。

モードとモードレスの設計

ユーザーの操作性に大きく影響するのが、モード(モーダル)モードレス の違いです。

モード

例:削除ダイアログ
ユーザーが削除ボタンをクリックすると、確認用のダイアログが表示され、以下の2つの選択肢が提示されます。

  • 削除する
  • キャンセルする

この状態では、選択中のアイテムに対してのみ操作が可能となり、他のアイテムの詳細を開くなどの操作が制限されます。
このような状態を「モードがある」と表現し、ユーザーの行動が制限されることになります。

削除ダイアログの例

モードレス

例:モードレスな削除確認
一方、モードレスな設計では、ユーザーの操作が制限されずに他の操作も並行して可能です。
たとえば、マイナスボタンをクリックすると削除ボタンが表示され、削除を実行するためにそのボタンを押すことができますが、同時に他の機能も利用可能です。
この方法により、誤操作のリスクを減らしつつ、ユーザーの自由度を保つことができます。

モードレス削除の例

主要なポイントのまとめ

  • オブジェクト指向UI

    • ユーザーはまず対象(名詞)を選び、その後に操作(動詞)を実行する流れで、直感的な操作感が得られる。
    • 写真アプリのように、オブジェクト中心の設計はユーザーに自由度とコントロール感を与える
  • タスク指向UIの問題点

    • 自動販売機の例のように、動詞を先に押すことで操作が制限され、余計な手続き(例:返金レバー操作)が発生する可能性がある
  • UI設計プロセス

    • 「オブジェクトの抽出」、「ビューとナビゲーションの検討」、「レイアウトパターンの適用」の3つのステップを踏むことで、ユーザーにとって使いやすいUIが構築できる
    • 特にオブジェクトの抽出は、タスク指向UIに陥らないための重要なプロセスである
  • モード vs モードレス

    • モーダルなUIはユーザーの操作を一時的に制限するが、明確な選択肢を提示するメリットがある
    • モードレスなUIは、ユーザーの自由度を保ちながら誤操作を防ぐ仕組みとして有効である
16
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?