今まで通っていた美容室の担当者の方が独立して新しいお店に移ったということで、数日前に髪を切りに行ってきました。
そして、今日家に帰るとポストにご来店ありがとうございましたのポストカードが。
オープンしたてで忙しいのが分かっているだけに、手書きのメッセージはかなりうれしかったです。
ユーザーに「また使いたい」って思わせるって、サービスを作る立場だと難しく考えてしまいがちですが、こういうことでも十分効果あったりするんですよね。
手法に囚われすぎて、肝心なことを忘れないように。
今まで通っていた美容室の担当者の方が独立して新しいお店に移ったということで、数日前に髪を切りに行ってきました。
そして、今日家に帰るとポストにご来店ありがとうございましたのポストカードが。
オープンしたてで忙しいのが分かっているだけに、手書きのメッセージはかなりうれしかったです。
ユーザーに「また使いたい」って思わせるって、サービスを作る立場だと難しく考えてしまいがちですが、こういうことでも十分効果あったりするんですよね。
手法に囚われすぎて、肝心なことを忘れないように。
今日はHCD-NetのイベントでUIデザインパターンのサロンに参加してきました。
講師はソシオメディアの上野さんと篠原さん。
ソシオメディアさんはデザイニング・インターフェースなどの本の監修をされていたり、サイト上でデザインパターンを公開されているなど、UIデザインパターンについてエキスパートな方々です。@ITに上野さんのコラムがあったりもしますね。
そんなお2人の話が聞けるということで、楽しみにしていました。
1時間プレゼン、1時間ディスカッションという形でしたが、お話の内容の中で記憶に残った点を挙げてみます。
オフィスに経済産業省が発行している「技術戦略マップ2008」というものが置いてあったので見てみたら、ユーザビリティ分野が1つのセクションとして取り上げられていました。
情報通信カテゴリの分野としては以下のようなものがあり、ユーザビリティがこの階層で並ぶのも不思議な感覚でしたが、それだけ関心が高いということでしょうか。
エンジニアリングとは何かという定義については、これといって決まったものはなく、人によって、または状況によっていろいろな定義があります。その中で、最近私が良いなと思った定義は「エンジニアリングは、インプットと手法が同じであれば同じアウトプットが得られることを価値とするもの」という定義です。この定義を基準に考えると、広い意味でのデザインは、その逆ということになるでしょうか。
ウェブの開発においては、デザイナーとエンジニアといった分担がされることがありますが、上記定義から言うと、エンジニアの仕事=エンジニアリング、デザイナーの仕事=デザインではありません。エンジニアに任される仕事の中にもエンジニアリング要素をもつ作業と、デザイン要素をもつ作業があります。これはデザイナーの仕事についても同様です。
例えば、テストケースの洗い出し作業について考えると、対象サイトとテスト計画が同じであれば、いつ、だれが行っても同じテストケースとなることが求められます。また、画面設計についてはデザイン的な要素も強いですが、ボタンの配置を統一するなど、ガイドラインで賄えるような部分に関してはエンジニアリングと言えるでしょう。
ボタンのラベル付けについては、以前「ボタンのラベル付け~名詞?動詞?編~」や「ボタンのラベル付け~UPDATEボタン編~」でも考えたのですが、要するに大切なのはページ内の見出し、一覧、ボタンなど様々な要素を文脈を意識して適切に配置できるかということなのだと思います。
例えば、以下のような画面があった時に、「新規登録する」ボタンが「何」を新規登録するのかが分かるかということがまず大切です。

この例では、ページが「ユーザー一覧」となっていることから、「ユーザー」を新規登録するということが暗黙的に理解されますが、業務システムなど一ページに大量の情報がある場合には、ボタンの影響範囲が分からなくなったり、どれに対応しているのか分からなくなりがちです。そのような場合には、ページの中でどこからドコまでが一つの文章であるのかを視覚的に表現してあげる必要があります。(具体的には、線で囲む、色を分ける、物理的に間を空けるなどです。)
棚橋さんの「ペルソナ作って、それからどうするの?」を結構前から読んでいましたが、特に前半の概要編を読むのにてこずってしまいました。(てこずったというより、時間がかかった、時間をかけたという方が正しい表現ですね。)
というのも、私自身デザインの勉強を特にしてきたわけではなく、開発→ユーザビリティ→デザインという形でデザインに興味を持ったので、デザイン(広い意味でものづくり)自体の考え方について吸収しなければいけない知識や考え方が盛り沢山だったのです。そんな感じで、1ページ読むたびに付箋貼って、メモ書いてとやってたわけです。
要するに、経験の少ない自分のような人間にはそれだけ価値のある本ということなのですが。
実践編を読み進める前に、気になった部分をメモ。(一部自分の思考含む)
ウェブページの中にPDFファイルへのリンクがある場合には、そのリンクがPDFへのリンクであることを明記しておきましょうということは良く言いますが、PDFに限らず、リンク先がhtmlでない場合には明記してあげたほうが親切です。
しかし、毎回"(PDF)"のような文字をリンクに付けるのは手間ですし、文字だと一見して判りづらかったり冗長になってしまうことがあります。
そこで、Iconize Textlinkの仕組みを使うと、リンク先のURLの拡張子から自動的にファイルの種類を特定し、それに合ったアイコンを付加することができます。
この仕組みを導入しておけば、毎回ファイルの種類を書くという面倒な作業が不要になる上に、書き忘れたり、書き方が毎回変わってしまったりということが無くなるのでサイト内で一貫性を保つことも可能になります。
JQuery Cycle Pluginは、複数の画像を切り替えて1つの領域に表示したい場合に、画像の切り替えエフェクトを表示するためのJQueryプラグインです。
最近では、Ajaxなどでページ遷移なく表示内容を切り替えるようなケースが多くなり、適切な切り替えエフェクトを表示しないと、変わったことに気づいてもらえなかったりするという問題も発生してしまいます。
複数から1つを選んで表示する方法としては、"<前へ 次へ>"のような形式のものもあれば、サムネイルから1つを選ぶ場合、スライドショーのように一定時間ごとに切り替える場合などもあると思いますが、JQuery Cycle Pluginはデモがとても充実していて、色々な場合の実装例を見ることができます。(デモ見ているだけでも楽しいです・・・)
エフェクトの出来も良いので、機会があれば使ってみたいです。
ページを開いた際に、あらかじめ一つ目の入力欄にフォーカスを与えておくと、そのまま入力を開始できるので、入力がスムーズになります。
特に、ウェブやPCに慣れているユーザーは入力欄の移動をTabで行うことが多いので、最初にフォーカスを与えておくことで、マウス操作を行わずに入力を開始することが可能になります。(フォーカスを与えておかなくても、Tabの連打で入力欄にたどり着けますが、親切ではありません。)
具体的に方法を書くと、以下のようになります。
■フォーカスしたい入力欄
<form name=”data_form”>
?? ? <input type=”text” name=”input1″ />
???? <input type=”text” name=”input2″ />
</form>
■フォーカス処理(ページ読み込み時)
<body onload=”document.data_form.input1.focus();”>
導入自体はとても簡単ですし、典型的なフォームでは大抵効果的だと思います。
以前、「文章には日付を記載する」で文章には日付を記載した方が、ユーザーへの判断材料を与えるという意味でユーザビリティが高まるということを書きました。
ですが、日付が書かれていても、それが無駄になるばかりか逆に混乱させてしまうパターンも存在します。
それは、「月」「日」だけ書かれていて「年」が書かれていないパターンです。
自分がよくチェックしているサイトであれば、年月だけしか書かれていなくても、ほぼリアルタイムに確認するので、年を誤解する余地はありません。
しかし、検索サイトから初めてそのページにたどり着いた場合など、サイトの状況を把握していない状態だと、一体いつの7月8日なのかが判らないということになってしまいます。
特に、ニュースなどはリアルタイムで知らせることを目的としている情報なので、しばらく後で参照されるという状況を想定できずに書かれてしまうことが多いのかもしれません。
CMSなどのシステムを利用すれば、動的に出力される日付に関しては気にする必要が無くなることも多いですが、それでも文中に日付を記載するシチュエーションはあると思うので、その際には注意が必要です。
ということを考慮して、意識的に年まで書くようにしましょう。
※ただし、以下のような場合にはこの限りではありません。