Hebikuzure's Tech Memo

2011年5月1日

ユーザー エクスペリエンス: 私たちのデザイン プロセスについての考察

Filed under: IE Blog — hebikuzure @ 5:58 PM

User Experiences: An Insight into Our Design Process
http://blogs.msdn.com/b/ie/archive/2011/03/21/user-experiences-an-insight-into-our-design-process.aspx


病気のため間隔が開いてしまいましたが、今回は Windows 7 上の IE9 でタスクバーが画面の上や左右端にある場合の、タブのピン留めの動作についての改善に関する記事を訳しました。IE Blog にはこの後も多数の興味深い記事が掲載されていますので、引き続き私訳を続けていきたいと思います。

以下の文章は IE Blog の 3/21 の記事 User Experiences: An Insight into Our Design Process を hebikuzure が私的に試訳したものです。翻訳については Microsoft Corporation および日本マイクロソフト株式会社とは無関係に hebikuzure が公開情報に基づき独自に行ったものであり、この文書の内容についての文責は公開者である hebikuzure にあります。翻訳の内容および技術的内容については正確を期すよう十分な注意を払っておりますが、誤りや不正確な部分が含まれている可能性がありますので、本文書を利用される際には原文も併せてご確認ください。


ユーザー エクスペリエンス: 私たちのデザイン プロセスについての考察

2011年3月21日 午前9時36分

皆さんのフィードバックは Internet Explorer を洗練させるのに非常に重要な役割を担っている事については以前にも記事にしました。また皆さんからのフィードバックに触発されて、IE9 製品候補版ではユーザー エクスペリエンスにいくつかの変更を加えたことについても説明しました。この記事では、私たちのデザイン プロセスについて、IE9 製品候補版に加えたタブをピン留めする機能の向上を例にしてより深い考察を行っていきます。

「サイトのピン留め」対「タブのドラッグ」

タブをピン留めする機能はIE9 の新機能です。皆さんは、アプリケーションをピン留めするのと同様に、よく表示するサイトをタスクバーにピン留めして簡単なアクセスを可能にできます。ピン留めされたサイトにより強い焦点が合わせられるよう、IE9 のフレームではサイトのブランディングが行えます。さらに Web サイトの開発者はジャンプ リストと通知をプログラムする事で、共通タスクの機能を強化できます。

私たちはユーザビリティー研究の初期のピン留めサイトの評価を行った際、ユーザーはしばしばタブをタスクバーにドラッグする事でサイトをピン留めできると期待している事に気づきました。サイトのピン留めの “物理的な” アクションとして、フレームの中のサイトの最もインタラクティブな表現がタブであるというのは理に適っています。そこで、サイトのファビコンをタスクバーにドラッグしてピン留めできるのに加えて、ベータ版ではタブのドラッグでもサイトのピン留めができるようにしました。

問題 – ユーザー意図のあいまいさを排除する

ところが、ベータ版でのタブを使ったピン留めの機能はタスクバーが画面の下端にあるときにだけ有効でした。タスクバーが画面の上端や両側にある場合にタブをピン留めしようとすると、スクリーン端へのウィンドウの位置合わせになってしまいました。ユーザーはこの機能がうまく働かない事に気づき、これはベータ版で最も多く報告された問題になりました。

これが皆さんから報告されたベータ版最大の問題である事を知って、Windows ユーザーの内タスクバーを既定の下端以外にして使っているユーザーは約 2% しか居ないという事実に照らし合わせて、非常に興味深く思いました。私たちにとって、この食い違いはリリース前のビルドをインストールするような人の大半は特に技術や IE に熱狂的で、こうした方はソフトウェアをカスタマイズして大多数の人々とは異なる方法で利用しているという事に、改めて気づかせてくれました。私たちは、より幅広いインパクトのあるユーザー エクスペリエンス上の問題と同様の熱意と注意深さをもってこの問題の解決にあたりました。

最大の困難は、利用者がタブをドラッグするのには複数の理由があるという事実に由来しています:

  • IE のウィンドウ内でタブを移動し、他の開いているタブとの順序を変更する
  • 別の IE のウィンドウにドラッグするか、ドラッグして新しい IE のウィンドウを開く
  • Windows 7 の Aero スナップ機能を使い、タブを画面の端に位置合わせする
  • サイトをピン留めする

ユーザーの意図を正しく解釈できないと、好ましくない結果を招くでしょう。

目標 – タスクバーが上端や左右にある場合でもタブのピン留めと Aero スナップを両立させる

上記のリストの一番目と二番目はタブをタスクバーまでドラッグする必要が無いので、これらのタスクは考慮しなくても良いでしょう。そこで私たちにはタブの Aero スナップとサイトのピン留めの仲立ちをする必要がある問題が残されました。タブをタスクバーの上にドラッグした時、ユーザーはタブをピン留めしようとしているのでしょうか、それともタブを画面の端に位置合わせしようとしているのでしょうか。

Aero スナップには画面の下端へ位置合わせをする機能は無いので、タスクバーが下端にある時に見解の相違は起きません。この場合はタブのピン留めがユーザーのできる唯一の動作です。一方でタスクバーが上部や左右端に配置されている場合、どちらの動作なのかの選択を常にさせるのは、すべてのユーザーにとっていつもうまく機能しないだろう事が、前述したようにベータ版へのフィードックからわかっています。そこで、タスクバーが上部や左右端に配置されている際にタブのピン留めと位置合わせを両立させることが私たちの目標になりました。

再確認 – 最上位の選択肢

ブレイン ストーミングとラフ スケッチを数回繰り返した後、私たちは最も有望そうな二つの選択肢について、あまり厳密ではないインタラクティブなプロトタイプを作成することにしました:

  1. 一番目の選択肢では、タブがドラッグされると同時にタスクバーの隣に目標となる UI を表示します。タブを目標の UI にドラッグするとピン留めされ、タスクバーのそれ以外の場所にドラッグするとウィンドウの端への位置合わせになります。
  2. 二番目のプロトタイプでは、単一の動作でピン留めとタブの位置合わせを切り替えられるようにしました。タブをタスクバー内のどこにドラッグしても、まずタブのピン留めの動作になります:

    もしタブをピン留めしたいのでなければ、一度タスクバー外にドラッグし、マウスを離さずもう一度タスクバー内にドラッグします。そうすればウィンドウは画面の端に位置合わせされます。

    このソリューションは意図的に Aero スナップよりタブのピン留めを優先しています。これは画面の端に位置合わせしたい場合には (特定のタブではなく) ウィンドウ全体をドラッグするだろうという前提のもとに、タブのピン留めは二つの動作のうちより頻繁に行われるだろうと予想したからです。

ソリューション – 単一の連続した動作

私たちは両方のアイデアの長所と短所を分析しました。同時に問題の領域に直接関係がないマイクロソフトの従業員に二つのプロトタイプを体験してもらい、どちらが望ましいか簡単にフィードバックしてもらいました。

異なるデザインの候補についての分析と、二つの主要なシナリオ (ピン留めと Aero スナップ) との比較を通じて、私たちはいくつかの理由から第二の選択肢が優れていると判断しました:

  • この方法は第一の方法より柔軟性があります。この方法ではユーザーがタスクバーの中で表示させたいと思うその場所にピン留めすることができます。これに対して一番目のデザインでは、ドラックの目標となる UI は常にタスクバーの中の同じ場所 (タスクバーに表示されているアプリケーションの最後) に表示され、サイトは必ずその場所にピン留めされます。
  • この方法はより目立たず、アプリケーション自体に注目を集めるのではなく Web コンテンツを目立たせるという私たちの包括的な目標に調和しています。この方法には追加の UI も無く、学ばなければならない新しいコンセプトもありません。ユーザーがタスクバーにピン留めしたいと思ってタブをドラッグした際に目標となる UI が表示されることもありません。単純に “うまく動作する” のです。
  • この方法はより柔軟です。単一の、連続的なアクションを通じて、ユーザーはピン留めと画面端への位置合わせの両方の動作ができます。

タスクバーが画面の下部にない場合でも、タブをタスクバーにピン留めする機能をリリース候補版の IE で利用してみていただきたいと思います。またユーザー エクスペリエンスを向上させる機会が存在するということを実感し、数百万人に影響する変更の実際のデザインを行うに至る私たちの過程を読んでいただきお役に立てていただければと思います。

IE9 を優れたものにするための、皆さんの継続的なご支援とご協力に感謝します。

—Mirko Mandic, プログラム マネージャー, Internet Explorer

広告

コメントする »

まだコメントはありません。

RSS feed for comments on this post. TrackBack URI

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

WordPress.com Blog.

%d人のブロガーが「いいね」をつけました。