Hatena::Groupxn--272ax3f

About Face 3輪講Chapter9

About Face 3輪講Chapter9

Chpater9のアジェンダ

(今までモヤっとしていた)ポスチュアの完全なる理解ができます!

Chapter7のおさらい

インタラクティブな製品のデザインを始めるために「どのプラットフォームポスチュアが適切か」という問いにまず答えなければならない

AboutFace3 p173
プラットフォーム
ユーザーインタラクションと内部動作により製品を機能させるためのハードウェアソフトウェアの組み合わせ
ポスチュア
インタラクティブな製品の)ユーザーに対する振る舞いのスタンス
  • 製品がユーザーにどのように使われるか、見た目と振る舞いの一致が大事
    • 見かけや振る舞いが目的とあっていないプログラムは、ティーカップに毛が入っていたり、結婚式に道化が参加しているのと同じで場違い

単一製品のコンテキストによって複数の異なるポスチュアがあるケース

BlackBerry(初期のキーボード付きスマートフォン)の使われ方

電車の中
ポケットから取り出して電子メールをじっくり読んだりする
会議に向かって急いでいるとき
会場の住所を調べるときにあまり画面をじっくり見たりしない

ワードプロセッサの使われ方

パワーユーザー向けの高度な機能
基本的に、使用頻度が高いユーザが集中して仕事をする対象としてデザインすべき
表構築ツール
使用頻度が低く単発的な作業で終わってしまうツールも含まれる

プラットフォームとポスチュアの関係

プラットフォームとポスチュアの密接な関わり
ハードウェアプラットフォームが異なれば振る舞いのスタンス(=ポスチュア)も変わることが多い

以下の2つのプラットフォーム・プログラムの組み合わせは想定されるユーザーの注意力は明らかに異なる。
携帯電話で実行されるアプリケーション
ゲームマシンで実行される教育プログラム
以降で、プラットフォーム(デスクトップソフトウェアキオスク端末など)ごとに適切なポスチュア、その他デザイン上考慮すべきことを考えていきましょう!

デスクトップソフトウェアのデザイン

デスクトップソフトウェア
現代のPCで実行されるアプリケーション全体の総称
製品のプラットフォームを定義するときには「デスクトップ」という言葉を超えて、製品に適したOS,データベースUIテクノロジは何かを考えなければならない

ポスチュアの特徴

ユーザーは永遠に中級者

  • 時間と労力をつぎ込むため「早く上達して中級者になりたい」という意欲をもつので、短時間で初心者を卒業
  • 中級者を対象としてデザインすべき
    • 初心者や上級者を対象するのは基本的にピント外れ
  • 初心者ユーザーと中級ユーザーの間の「たまに使うユーザ」も無視しない

画面はゆったり使いましょう

  • どうせ全画面に近い形で使われるのだから、広い領域を有効活用できるようなデザインにすべき
Appleの最近のMacアプリケーションiPhoto等)はまさにこれを分かってて、フルスクリーンビューを搭載してきてますね

ビジュアルスタイルは最低限に

ユーザーが長時間画面を見つめるので、大きくてカラフルなコントロールなどは2週間も使ってるうちにけばけばしく見えるようになる

豊かなヴィジュアルフィードバック

生産性な操作のためのヒントをちりばめるとよい
  • ステータスバーにアプリケーションの状態を表示
  • 初心者が「それは何か」が分かるようにする手立てがあるとよい
    • ユーザーの学習意欲が高い

かな入力

ひんぱんに使う部分は複数の方法でコントロールできるようにすべき。以下は全部用意しよう 落ち着いたデスクでマウスを使っていると考えていいので、数ピクセル離れた場所を区別して操作できる

ドキュメント中心

単発的ポスチュア

09:40

ごくわずかのコントロールで1つの機能をサポートし、すぐに通り過ぎてしまうアプリケーション
  • 場所をとらず、はっきりくっきり表示して見やすく
  • ウィンドウ, ビューは1つだけにしぼるべき
  • ユーザーの設定を覚えておいて次回以降デフォルト
    • 天気予報対象の都市など

例外

  • コンピュータシステム自体が単発的ポスチュアの場合もある
    • 生産現場のプロセスモニタなど(データをモニタリングする意味で)単発的ポスチュアだが、全画面でデータを見やすくプロットすることが期待されている
    • 生産現場で支配的なのは「機械の動き」なのでちょっとチェックできるように単発的ポスチュアであるべき

デーモン的ポスチュア

09:40

Webのデザイン

09:40

Webの生い立ち
最初は図が入った論文を共有するためのメディアとして開発
その後いろいろな目的で使われるようになり、その要求に応じてリッチな表現や複雑なふるまいが実現できるようになっていった →インタラクションデザインが相対的に重要に

主要なサービスと製品

以降はそれぞれについて述べていきます。

情報Webサイト

09:40

シーケンシャルに、または階層的に構成されたページやドキュメントの集合(古き良きウェブサイトのイメージ)
    • あるページから別のページに移動するナビゲーションモデル
    • よりゴールダイレクテッドに特定のページの位置を提供するサーチ機能

主要な課題

ビジュアルのルックアンドフィール、レイアウト、ナビゲーション要素、サイト構造(情報アーキテクチャ

情報Webサイトのポスチュア

以下のバランスを取る必要がある
  • 毎日見に来るユーザに対して妥当な密度で役に立つ情報を表示する
  • 初めて、あるいはたまにしか来ないユーザが簡単にサイトのナビゲートの方法を理解できるようにする
→支配者的な性質(前者)と単発的な性質(後者)の間に緊張がある

更新頻度はユーザーの行動に影響を与える

  • 更新頻度がリアルタイムに近いほどリピートユーザをひきつける
  • 更新頻度が低いサイトはときどき参照するために使われる
    • 単発的なスタンスに立った方がよい
主役ペルソナの性質に合わせて、Webサイト自体が支配的か単発的かのバランスをとることも可能

支配者的ポスチュアの性質

  • フルスクリーン表示を前提として、全スペースを使って情報をクリアに表示
  • ナビゲーションツールや現在位置について手がかりを提供
デザインは一般的なディスプレイサイズに合わせて最適化すべき
主役ペルソナ最大公約数的なフルスクリーンの解像度としてどのぐらいを想定するか
  • 800x600ピクセルの画面しか持ってない人は今時どのぐらいいるだろうかetc

単発的ポスチュアの性質

  • クッキーなどでユーザの過去の行動について情報を残しておける場合
    • 以前彼らが関心を示したことに基づいて組み立てた情報を表示すると良い

トランザクションWebサイト

09:40

例として「インターネットショッピングサイト」や「金融サービスサイト」などが相当
  • 一般的な情報Webサイトと同じように階層構造のページによって構成
  • ショッピングカート、ユーザプロファイルのセーブ機能などの複雑な機能がある
  • ブランドイメージを効果的に伝えるビジュアルデザイン

トランザクションWebサイトのポスチュア

情報Webサイトと同様に支配者的な性質と単発的な性質のバランスを取る必要がある

実際の例

サーチエンジンポータルサイトトランザクションウェブサイト
サイトGoogle検索Yahoo!あるいはGoogleニュース
形態サーチエンジンポータルサイト
期待される振舞い検索して見つかったサイトに移動集約された情報をナビゲーション
ポスチュア単発的どちらかというと支配的
単発的な側面を考えると、必要以上にユーザにナビゲートを強いないことが特に大切。
ユーザは、実際のロード時間よりも、自分のゴールを達成できるかどうかによってロード時間の長短を感じる

Webアプリケーション

09:40

本格的なデスクトップアプリケーションと同じくらいインタラクティブで複雑な振る舞いをする。
  • サーバーリクエスト・レスポンスモデルに依存しない
    • submitボタンなし

実際の例

カテゴリ製品
企業用ソフトウェアSalesforce.com や 37signalsBootcampなど
個人パブリッシングツールMovableType, Flickr, Wiki
作業補助ツールGoogle Docs

メリット

  • 共同作業を実現し、円滑化させるツールに非常に適している
  • 任意の場所から情報と機能にアクセスできる
  • インストール不要
  • 異なるコンピュータから同じツールと機能にアクセスできる

Webアプリケーションのポスチュア

支配的なポスチュアと単発的なポスチュアのどちらももつことができる

支配的ポスチュア

比較的複雑な活動をうまくサポートできるような情報と機能を提供しようとしのぎを削っている
Flickrの例
ページ内のタブなどで専用の画面領域を確保し、「ページからページへのナビゲーション」ではなく「特定の環境」にいるように感じられるようにする

単発的ポスチュア

ブラウザベースのWebサイトで大量のインタラクションを必要とするトランザクション処理を強制されるのは、ユーザは楽にはならない

インターネット対応アプリケーション

09:40

Web上のデータにアクセスしつつも、ブラウザは使わないアプリケーション

実際の例

iTunes
音楽/ビデオを購入、ダウンロード、CD情報の取得、インターネット経由の音楽共有
遠隔医療システム
MRIで撮った画像をリモートにいる放射線医学の専門家にチェックしてもらって共同作業

イントラネット

09:40

通常のWebサイトとWebアプリケーションの中間に位置。
イントラネット
企業の従業員だけが関わるプライベートバージョンのWeb
エクストラネット
+提携企業、クライアントベンダーが関わる
  • 豊富な機能を提供
    • 企業、部門、その活動についての膨大な情報ページ
    • 勤怠、出張の調整
    • 購買、予算
情報部分のデザイン
強力な情報組織構造を作るために情報アーキテクチャが必要
アプリケーション部分
重要な振る舞いの定義のためにインタラクションデザインが必要