PingMag - 東京発「デザイン＆ものづくり」マガジン » Archive » ユーザーを幸せに導く5つのデザインパターン

ユーザーを幸せに導く5つのデザインパターン

2006年7月27日カテゴリー: インターネット, 特集

ユーザーを幸せに導く5つのデザインパターン

ウェブ・デザインにおける“デザイン・パターン”とは、ウェブサイトにありがちな“使いにくい点”を解決する方法、とでも言ったらいいのかな。デザイン・パターンの意味は、“どうやってコードを並べるのか”という厳しいイデオロギーから、フラストレーションのない自然なウェブサイトの作り方まで、幅広い範囲に及んでいる。

作：ジョン
訳：チエミ

コーディングは、かなり独断的になりがちだ。大抵の場合、間違いなく“最高のもの”か、少なくとも他よりはずっとましなものがある。だけど、相互作用と使い勝手のデザイン・パターンは、もう少し主観的なエリアだと言えるだろうし、だからこそ… おもしろい。一般のユーザーにとってはより明らかで、キミの欠点のないコーディングに気づかない限りは（ひょっとすれば、コーディングなんて気にしてさえいないかも）ウェブサイトを通して提供する使いやすさは、彼らに幸せすらもたらすかもしれない。それじゃあ、今日は“快適にウェブサイトを見られる”5つのデザイン・パターンを紹介しよう。

インスタント・フォーム・フィードバック

僕は以前、「ウェブデザイン：8つのいい感じ」の記事の中で、使いものにならないフォームについて嘆いたことがある。でも、今日僕はまたこの場所に、あの時よりもさらに具体的な例と共に帰ってきた！

確認作業を含んだフォームは（例えば、ユーザーネームがすでに使用済みかチェックする“メンバー登録”のフォーム）全部記入し終わる前に、ユーザーネームをチェックするべきだ。世の中には今だに沢山の“メンバー登録”が「残念ながら、お客様がご記入したxxx、xxx、xxx、さらにxxx、そしてxxxに間違いがございます。お手数ですが、再度お確かめの上、もう一度ご登録の手続きをお願いいたします」というページに何度も僕達を飛ばそうとする。フォームの記入なんて本当に“お手数”なのに、どうして最初の“登録”という一番大事なところで未来のお客にフラストレーションを与えるようなリスクを背負うのか、僕には検討もつかない。

AJAXタブ付きコンテンツ

これから述べる点には、きっと反対意見も多いと思う。でも僕は、AJAXのタブ付き“サブ”コンテンツが気に入っている。例として、新しいYahoo!のページを見てみよう。ここでは、メインとなる情報がAJAXのタブ付きサブ・コンテンツで2つ紹介されている。

コンテンツは、タブが押されることで切り替わる。コンテンツ・パネルを“隠して見せる”この仕組みは、シンプルなJavascriptとCSSで出来るはず。しかし、ここでAJAXを使う利点は、ページのロード時間を最小限に留められること。つまり、ユーザーは全く興味がないかもしれない後ろの“Sports”コーナーが更新されないおかげで、ローディングの速いページを満喫できるってことなんだ。Yahoo!は他にもJavascriptを使って、前回Yahoo!を訪れた時に最後に開いていたタブを覚える仕組みも導入している。

半透明のオバーレイのお知らせ

LightboxとDiggの大衆化によって、時間が経てば僕達はデザイン・パターンに今よりもっと注目するようになるだろう。ウェブサイトにありがちな「xxxをするにはログインが必要です」という別のページでのお知らせも、今や存在すべきじゃない。例えば、もし僕がログインを促されるひとつの動作をしようとした時、他のページへ誘導され「xxxをするにはログインが必要です」と知らされるとしたら、それは僕の動作の問題を悪化させているにすぎない。僕は、別のページがロードされるのを待って、メッセージを読み、ログイン・ページに戻るか、又は新しくロードされたページでログインすることになる。

ウェブサイトのDiggや他のいくつかのサイトは、さっき述べたような問題が起こった時、半透明のオバーレイを使用している。確かに、それなら意味が分かる。今いるページから他へ誘導されることもなく、ただシンプルにそこでエラーの知らせを受ける。そしてあとは自由に自分のいるページから問題を解決できるんだ。

エラスティック・デザイン

エラスティック・デザイン（=順応性のあるデザイン）とは、ものすごく簡単に言うと、ユーザーの求めるテキスト・サイズに対応できるようにサイトを構築すること。良い例としてココを訪れて、テキストサイズを大きくしたり小さくしたりしてみて欲しい。

ウェブデザイナーにとって、テキスト・サイズを変えても見た目がキレイな完璧な順応性のあるウェブサイトを構築するのは、かなりのフラストレーションだ。でも、順応性のあるデザインの要素とは、絶対に僕達が将来向き合うデザイン・パターンであると僕は思う。なぜテキスト・サイズがユーザーにとって重要かって？それは、見る人全てがキミの設定したテキスト・サイズを快適だと感じている訳ではないし、ユーザーはいつでもサイズを変えることができる。でも、ガチガチに固定された順応性のないデザインでテキストを拡大すれば、レイアウトがグチャグチャになるか、1行に10文字くらいだけ表示されて単にマヌケに見えてしまう。テキストに合わせて一行の幅が変わる滑らかで順応性のあるデザインは、ユーザーにとってもずっと心地いい環境に違いない。

パブリック・テスト・エリア

近頃は、登録を要求してくるウェブサイトやウェブサービスが数えられないほどある。僕はいつも登録前にこれが本当に僕に必要なのかと評価してしまう。ひとつ登録すれば、またひとつ覚えなければならないパスワードが増えるし、毎日届くメルマガの数だってばかにならない。…これって本当に必要なもの？

これらのウェブサービスは大抵が無料であるにも関わらず、どうして登録を促すんだろうか。だったら、個人情報を引き出す前にユ−ザーにそのサービスが何であるかを正確に知らせることが不可欠なはずだ。良いパブリック・テスト・エリアとは、両者にとって有利な状況を作ること。サービスを運営する側はユーザーに試用の機会を提供し、そのサービスが適切だと思ったユーザーはお返しとして登録する。そのサービスが何だかよく分からないまま興味本位で登録したユーザーは、そこに戻っては来ないだろう。登録前に十分にサービスを試せるパブリック・テスト・エリアの素晴らしい一例がWufooだ。

という訳で、今日も最後まで読んでくれてありがとう！また来週！