情報デザインとユーザビリティ

上記の広告は１ヶ月以上更新のないブログに表示されています。新しい記事を書く事で広告が消せます。

テレビは本当に時間のかかる娯楽である。テレビでしか見ることができないコンテンツは多いし、それなりに面白いのも事実。しかし、何となくテレビと接していると、本来自分が使うべき時間を失っていることに気が付く。テレビを見ていた時間で勉強や研究ができただろうし、家族や恋人とコミュニケーションを深めることもできただろう。

テレビを見るためなら、時間を無駄にしても構わないというのであれば、それはそれで一つの考え方かもしれない。でも、テレビを見る方法を変えることで、もっと時間を効率的に使えるはずだと思う。そのために、幾つかの方法を提案したい。

続きを読む

まずはサービス比較から

My Book
・ハードカバータイプとソフトカバータイプの２種類を揃える
・ハードカバータイプは「手のひらサイズ、１２ページ、945円」〜　「縦横26ｃｍ、80ページ、19,425円」まで、豊富にラインナップ。
・ソフトカバータイプは「CDサイズ、20ページ、1,659円」から取りそろえ。
・送料は一律420円

olio photo
・デザイン重視の高価格帯アルバム
・「A5変形サイズ、20ページ、3,600円」から。
・ソフトカバータイプとハードカバータイプがあり、ハードカバータイプは割高。
・送料は一律600円。

Auto Album
・My Bookの別サービス。簡単にアルバム化するライトユーザー向けサービス。
・サイズはA4縦とA5縦の２種類。
・「A5縦、8ページ（写真１６枚まで）、1,239円」から、その後は枚数に応じて価格が変動。
・比較的低価格。ただし、レイアウト変更はできない。
・送料は一律420円。
・CDで写真を保存するオプションあり（420円）

Photoback
・手のひらサイズ、ソフトケースの１種類のみ扱う。
・手のひらサイズ、36ページ（写真33枚）で１冊1,890円（ボリュームディスカウントあり）
・送料は一律600円
・デザイン重視か？

ホンニナル
・ミニサイズ（590〜1,200円）、B5変形（2,480〜5,700円）、A4（3,200円〜）の３サイズ
・低価格路線だが、「分かりづらい・使いづらい」
・送料不明（メール便で100円、宅配便で600円程度か？）
・卓上カレンダーや卓上アルバムとして使用可能なタイプもある。


価格を隠す意図があるのか？

フォトアルバムサービスを比較するにあたって、価格を隠す意図があるのではないかと思うようになりました。価格を探すのに、苦労する場合が多いのです。

単に情報デザインが下手で、価格を探しづらいのであれば良いのですが。


フォトアルバムサービスの価値

インターネットが広まるまでは、写真をプリントするのは街の写真屋さんでした。現在では、オンラインプリントが盛んになり、ネット上で価格競争が激しくなっています。街の写真屋の時代であれば狭い商圏の中で勝負をしていればよかったのですが、インターネットが普及した現在では商圏という概念が消え、日本全国のオンラインプリントサービス同士が勝負する大変厳しい状況です。

この激しい競争から、一歩外に出るアイディアが「フォトアルバムサービス」です。写真のプリントのみでサービスの差別化をすることは困難ですが、フォトアルバムサービスであれば「デザイン」、「アルバムのサイズ」、「パッケージ」等の要素で差別化することができます。

またアルバムとして製本されたものは、単なる写真プリントやPC上で写真を見るよりも、特別感が生まれます。友達に見せたり、プレゼントしたりといった、利用機会の拡大が生まれるのです。


価格を隠すな

ユーザーは複数のサイトを見て、サービスの特徴と価格を頼りに、発注先を決めます。逆に言えば、「価格」が見えづらいサービスは、選択されないのです。

フォトアルバムサービスはもともと価格だけでは決まらないものです。他社より多少高かろうが、特徴をきっちりアピールできていればユーザーは逃げません。堂々と価格を出して勝負するべきなのです。

初級編：半角と全角の違いを許容する

ウェブサイト上で提供されるサービスを使っていると、全角・半角の入力を指定をするフォームが多くてがっかりします。年齢は半角で書くように指示されたり、住所は半角を使わず全角で書くように指示されたり、頻繁にPCやインターネットを使う私ですら煩わしい。使い慣れないユーザーにとっては半角と全角の違いすら分からないというのに。

全角から半角へ、あるいは半角から全角へ、英数字を変換することはプログラムとして非常に簡単な部類のはずです。親切機能というタイトルで紹介しているものの、必須機能としたほうが良いと思います。

中級編：メールアドレス中のカンマ「,」をピリオド「.」に

メールアドレスの入力で、間違えやすい要因はカンマとピリオドの類似が筆頭に上がるでしょう。「.」と「,」は共に小さく、区別が付きづらく、キーボード配列でも隣同士。間違える要因がたっぷり含まれています。

メールアドレスのフォーマットには、そもそもカンマは存在しません。カンマを含んだメールアドレスが入力されたら、カンマをピリオドとして解釈すると良いでしょう。

他にも、メールアドレスが「cojp」や「nejp」であれば、それぞれ「co.jp」「ne.jp」と解釈することも考えられます。ピリオドの連続「..」を、１つのピリオド「.」に変換することも検討に値します。

ただし、解釈のしすぎも考え物です。どこまで親切に類推をしてあげるかは、議論の余地があります。

上級編：パスワード入力中のCaps Lock

Caps Lockがかかっていると、パスワードは当然違うものを入力してしまいます。しかし、このミスは大変気付きづらい。ログインできない場合のFAQには高い確率で掲載されているのではないでしょうか。最近のブラウザーではパスワード入力中のCaps Lockをやんわりと警告する場合もあるようですが、それでもやはり分かりづらいものです。

システム側ではCaps Lockがかかっていることを想定して、入力したパスワードが間違っていた場合、大文字と小文字を入れ替えて再度チェックをすると良いでしょう。

Internet Explorer 7 のダウンロードで迷う

小さい文字を見ていると肩が凝ると妻が言っていたので、画面の拡大縮小を求めて、妻のPCにInternet Explorer 7をインストールすることにしました。 ところが、ダウンロードボタンがなかなか見つかりません。視点の移動を考慮せず、レイアウトデザインをしてしまったのが原因です。

 IE7ダウンロード案内ページ

ユーザーはこのように視点を移動する

じっくり見ればダウンロードボタン（というかダウンロードリンク）が見えて来るわけですが、迷いやすいレイアウトになっていることは間違い有りません。

 IE7ダウンロード案内ページの視点移動

一般的な視点移動はこのようになるでしょう。

１．ユーザーはInternet Explorer 7 を求めてこのページを開きます。ページ左上のアイコンを見て、このページがInternet Explorer 7 であることを（無意識のうちに）確認します。

２．アイコンから下に読み進めると、大きなキャッチコピーが目に入ります。

３．さらに次に読み進めると、複数のタブメニューが並んでいます。この中に自分の欲しい情報（＝ダウンロード）が無いか探します。しかし、タブメニューの中にはダウンロード情報はありません。

 「下に下に」読み進めるのが基本

ウェブサイトを見る（読む）とき、上から下に読むのが基本です。タイトルやキャッチコピーが強調されている場合は、その場所を起点として下に読むのが通常の読み方なのです。

マイクロソフトのInternet Explorer 7のサイトは、「ダウンロード」を強調していますが、そもそものルールを無視してしまっているので分かりづらいのですね。 ページの下に「Internet Explorer 7 の活用 (英語)」という参考ページへのリンクがありますが、ダウンロードよりもかえって分かりやすいくらいです。

Firefox に軍配が上がる

一方、Internet Explorer の圧倒的なシェアを、少しずつ侵食しているFirefoxはどうでしょうか。

Internet Explorerとは対照的にダウンロードボタンがとても分かりやすい配置になっています。 「Firefox2」というタイトルから下に読み進めると、すぐに大きくて目立つダウンロードボタンが目に飛び込んできます。大きさや色といったグラフィカルなデザインはもちろん、ユーザーの視点移動という観点でもベストポジションと言えるでしょう。

 Firefox2のダウンロード案内ページ

・Microsoft - Windows Internet Explorer 7
・Mozilla Japan - Firefox 2

「開く」「閉じる」ボタンは判別しづらい

エレベーターの「開く」「閉じる」ボタンを押し間違えた経験は無いでしょうか。この２つのボタンは、見た目が非常に似通っているため、押し間違えることが多いと思われます（実際私も何度も押し間違えたり、どちらを押して良いか分からないことがよくあります）。

 似ているから間違える

最も見かけるボタンのデザインは「>|<」と「<|>」でしょうか。デザインを意識して扉が開く様子と閉じる様子を記号化したと思われますが、お互いの区別は難しくなっています。 やや古いエレベーターでは「開」と「閉」と漢字で記載されている場合もあります。こちらも一目で区別がつきません。「門」の中の小さな文字を瞬時に読み取ることをユーザーに要求しています。

 緑色のボタンは未だ一般化していない

一部のエレベーターでは「開く」のボタンを緑色にしている場合があります。これは一歩前進のようですが、大多数のエレベーターがこのルールに従って、ようやく効果が出るものだと思われます。

 一般的に緑色は、示された人に対して「進め」「ＯＫ」を伝えるものです。「開く」という意味はもともとありませんし、他人に対して「進める状態を作る」という意味で使うことも（一般的には）無いでしょう。 ただし、多くのエレベーターが緑色を「開く」の意味で使うことで、緑色に対して「開く」の意味づけが広く浸透します。長い期間の取り組みとして、開くボタンを緑色にしていく意味はあるかと思います。

 もっとシンプルにひらがなで

「開く」と「閉じる」を区別する単純な方法は、シンプルにひらがなで「ひらく」「とじる」と書くことです。「ひらく」と「とじる」では見間違えることはありません。 ただし、これは日本語の表記なので、日本語を読めない方のために、記号（読みづらいけれども！）と併記すると良いでしょう。

すなわち、適切な表記は以下のようになります。

「<- ひらく ->」
 「-> とじる <-」