色の使い方によって、そのサイトが与える印象は大幅に変わると思います。
PC上で色を調べる際に、Digital Color Meterを使ったりしますが、雑誌の表紙などのアナログから色を拾い出すサイトを発見しました。

また、色によるレイアウト検索が可能なサイトでは、サムネイルをクリックすると拡大表示され、そのレイアウトで使われているカラーパレットが下に登場します。そのパレットのどれかひとつをクリックするとまたその色が使われたレイアウトのサイトがソートされます。

色味って凄く大事だし、扱いが難しいなと思う僕は、今後活用させて頂こうと思います。

インターフェイスを考える上で、アイコンの存在ってかなり大きな役割を担っていると思います。複数ページに渡って展開されている情報が閲覧しやすいようにナビゲーションとしての機能を果たし、視覚効果が得られるからです。

普段使っているPCしかり、日常の生活シーンを思い浮かべても色々な場面で目にします。
ユーザビリティを考慮する上で、必要不可欠な存在のようです。

一口にアイコンと言っても様々ですが、ハイクォリティのアイコンセットが集約されたサイトがあります。「50 Most Beautiful Icon Sets Created in 2008」と題されたトピックスで魅力的なアイコンが参照できるのでチェックしてみてください。

Web上で表現していたアプリケーションをデスクトップ上でも同様に表現できるウィジェットやAIRなど、僕の周りでは最近話題に出てくる事が多いです。

逆に、ブラウザのウィンドウをデスクトップのように利用して、ブラウザ内にウィンドウを表示する事も可能なようで、Mocha UIというものを使います。

イメージ画像



http://mochaui.com/demo/
Mocha UIは、MooToolsというajaxライブラリのCanvasタグのグラフィック機能を活用して開発されたUI。

拡大・最小化・閉じるボタンがあり、マウスのドラッグ操作での移動も可能です。
また、ページ内に複数のウインドウを生成する事ができます。
使い勝手も良さそうで、UIの１つとして面白いなと思いました。
使い道や汎用性などを考え、いつかの提案材料として頭の片隅に置いておきたいと思います。

Amazonなどの EC サイトで、「この商品を買った人は、こちらの商品も買っています」と表示され、そのままクリックしてしまう経験がよくあります。
最初は情報を一方的に探していたのに、徐々に関連情報に「出くわす」といった具合に欲しい情報が導き出されます。

これは、レコメンデーションエンジン（推奨エンジン）と呼ぶそうで、ユーザーの購入履歴や閲覧情報から個人の趣味・趣向を分析し、関連した情報を推薦してくれます。

しかし、誰かにプレゼントする為に商品を購入した場合、その購買行動はレコメンドが行われてしまうので、本来自分が欲しい情報とはかけ離れた履歴が参照されてしまう事があります。

とある記事に、
購買行動には「自分自身がどのような商品を好んでいるのか」という属性に加えて、「今どのような商品が見たいのか」という方向性がある。前者は購買履歴から推し量ることが可能だが、後者は購買履歴からでは判断できない。
と書いてありました。
TPOが大切だそうです。

いかに的確なレコメンデーションを行うかというのが今後の課題のようですが、ＡＬＢＥＲＴという会社が「画像とイメージワードのマッチングエンジン」という新技術を2009年1月に発表する予定だそうで気になってます。

最近引っ越しをしまして、神奈川県民となりました。
その際、物件を探していた際にお世話になったのが近所のピタットハウスです。

同社の記者発表で、「物件情報サイトがリニューアルされた」というニュースを発見したので、
気になり早速チェックしてみました。
pitat.com（ピタットコム）

例えば、PC上で電話番号を記入する際、自分ならどういう風に書くでしょうか。
「090-1234-5678」
「090(1234)5678」
「090 1234 5678」
「０９０ー１２３４ー５６７８」

と、可能性としては色々考えられます。
ということは、人によってさまざまな形式で記入するということです。
そのため、エントリーフォームではユーザーの認識（入力形式）を合わせる必要があります。

前提としてまず認識しなければいけないのは、ユーザーが間違えずにエントリーフォームを入力することなど期待してはダメ。
ユーザーは常に間違えるもので、その間違いをどうすれば減らすことができるのかを考えることが課題となりそうです。

以前にフォーム作成の際に参考にさせて頂いたサイト

ユーザビリティについて中原が記事を書いておりますが、これはWEBだけでなくデジタルサイネージの分野、特にタッチパネルコンテンツの考え方も同じだと思います。館内案内などの施設で考えると、対象がほとんどの人ですので、UDを意識してボタンとして認識しやすいデザインや、ボタンの配置場所も考えなくてはいけません。目的のページに分かりやすく誘導する事が重要ですので、WEBのようにグローバルメニューを上に置くと、子供や車椅子のユーザーが障りずらい事とか問題が出てきます。そういった場合はボタンを下に集中させるとか、上下に配置するなど使いやすい工夫が必要になってきます。また、デジタルサイネージですと画面大きいモニタや、縦型・横型などありますし、ミッドタウンにあるようなモニタを斜めに低く配置している例もありますので、その設置方法に合わした画面設計も必要になってきます。いくらが遷移しやすいように画面設計にしても、画面に触られなければ意味がないので、コンテンツに触れていない状態の時にどうやって人を誘導させるかも非常に重要な事です。この辺を今後考えていこうと思います。

「ピクトグラムって素晴らしい！」と以前から思っていました。
マーク、アイコン、サイン、シンボル、絵文字などとも呼ばれると思いますが、それ自体が意味をなすという国境を越えた伝達手段として重宝されていると思うからです。
それらが使われる場所は、空港などの公共機関をはじめ、道路標識、電化製品、デジタルコンテンツの中にも多く見受けられます。

ピクトグラムは原則として「事前の学習や特別な知識がなくても理解できるもの」と定義されているようですが、これはWEBサイトの作成段階でも議論されるところかと思います。
例えば、目的とする商品やサービスをユーザーが探しやすいように分類・整理し、認識しやすいようにピクトグラムによってユーザビリティの向上を図る事は１つの形かなと思います。

WEBサイトのみならず、ピクトグラムの活用は無限大です。
ちなみに、先日行われた北京オリンピックのピクトグラムは甲骨文字だそうです。

障害のあるユーザーに対して考えなくてはならないのが、操作のしやすさです。
マウス操作が困難な状況にある人（視力の関係でマウスポインタが見づらい人や、身体的な理由からマウスポインタを正確に制御できない人）のために、キーボード操作を配慮したUI（ユーザーインターフェイス）設計が必要となります。
（「JIS X8341-3：高齢者・障害者等配慮設計指針」に明確に記載されているようです）

その配慮としては、Tabキー/Enterキー/矢印キーを使って操作可能にすることが挙げられますが、よく感じるところで、フォーム入力などでその機能が発揮されると思います。自分自身もよくキーボード操作をするコンテンツの１つです。
テキストボックスやラジオボタンにアクセスキーを設定し、キーボードのみでアクセス可能なコンテンツにした方がいいのは当たり前ですが、これはSEO対策にも関連してくるようです。（検索エンジンに優良なサイトとして評価を得られるため）

また、「電話番号」や「郵便番号」など入力方法が複数考えられる場合は、入力例を明記する配慮も必要です。
自分自身がそうなのですが、入力が終わってからその入力例や制限に気づいてしまうという経験はよくあることです。
経験を生かした改善というのも視野にいれつつ、これからは以前にも増して色々な角度・視点からサイトを閲覧していきたいと思います。

キーボードユーザーインターフェイスのガイドライン（Microsoft）

携帯サイトは画面が小さいく、PC程操作性がありません。
「若年層はPCよりも携帯の使用頻度が高い」とは聞きますが、個人的には携帯での情報収集は面倒に感じます。
携帯サイトを閲覧する時、ページの移動をアクセスキーを駆使して行っていますが、これはユーザビリティの一環だと思います。

以前携帯サイトを作成した際、色々考えらされたのはこのアクセスキーの使い方です。
・この機能は、ユーザーの学習性が必要となるため、サイト内で一貫性を保つ必要がある。
・サイト全体で頻繁にアクセスを見込むコンテンツに割り当てる。

携帯サイトの場合、操作性がユーザーの利用に大きく影響されると思われます。
アクセスがしやすく操作性の高い設計を心がけるために、インフォメーションアーキテクチャと呼ばれる観点からも色々考えていきたいと思います。

ユーザビリティを考慮したWEBサイトを作ったとしても、効果測定をしない事にはそれが正しいのかどうかさえ分かりません。 ユーザビリティとは、日本語で言うところの「使い勝手」や「使いやすさ」に該当しますが、HCI（ヒューマン・コンピュータ・インタラクション）という分野では、「人間がどれだけ容易にコンピュータと対話しながら操作できるか」と定義されているようです。

という事は、ユーザビリティの良し悪しを判断するには「評価」という形で問題点や改善の余地の抽出する必要がありますよね？

通常はいくつかの行程に分けて行われるようですが、その評価手法の１つとしてアイトラッキングというものがあります。 （※被験者を設け、ユーザーの目線（軌跡）をビジュアル化するもの）

ネタ自体は古いのですが、色々調べていた時に発見したのでご紹介します。
Google Labsにて公開されている、視覚障害者向け検索サービス「Google Accessible Search」というものです。

 前回の続き

ユーザーにとっての一貫性を保持するためには、ユーザー環境に合わせてあげる事が必要なようです。というのは、windowsとmacの２種類のプラットフォームが存在する時、windowsが定めるガイドラインとappleが定めるガイドラインとで方針が異なるからです。

例えば以下のようなUIの違いがあります。
　・ブラウザの閉じるボタンがwindowsでは右上でmacでは左上。
　・アプリケーションのダイアログボックスの「はい」と「いいえ」については、windowsは「はい」が左でmacはその逆。

個人的にmacが好きという事もありますが、iPhoneやiPod touch が多くのユーザーに愛され使用されていると現状と将来性を考えると、appleが定めるヒューマンインターフェースガイドラインというものに準拠したユーザーインターフェイスを意識する必要を感じます。

 今回話題に挙げたガイドラインについては英語版しかweb上で発見できなかったので、翻訳機能を駆使するなどして更なる理解を深めていきたいと思ってます。ただせっかくの機会なので、webの世界にとどまらずプロダクトや構造物、システムなどのインターフェイスやユーザビリティの考え方もちょっとずつ調べていくつもりです。

何かあれば情報提供宜しくお願いします。

 

お問い合わせフォームなどに必ず出現する「確認ボタン」と「キャンセルボタン」。
多くのサイトがそうしているという理由で、いつも左に「キャンセル」右に「確認」という配置が頭にあり、個人的にも違和感なく操作ができていました。

ただ毎回疑問になっていたので色々調べていると、「ダイアログボックスをデザインするたびにその都度判断するよりも、各プラットフォームでの慣習に従う方が大切だ」とヤコブ・ニールセン博士の記事を発見しました。

ユーザビリティについて知識を深めるにあたって、まずユーザビリティの定義を明確に理解したいと思いました。
国際規格としてISO9241−11に以下の通り定義されているようです。

Extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
特定の利用状況の中で、ある製品を、特定のユーザーが特定のゴールを達成するために用いる際の、有効性、効率性、満足度の度合い。

上記の文章が表現しているのは、「万人受け」ではなく「ある特定の人の為の」という意味に言いかえる事ができると思います。

スペック五次元の各ディレクターは、それぞれテーマを掲げ、この「SPEC5ZIGEN Director's Blog」に情報を投下し共有する事となりました。

僕中原は、以前までSEOについて情報収集していたのですが、「サイト（コンテンツ）さえよければSEOをする必要がない」という仮説を勝手に立てて、サイトの価値を決めるユーザーインターフェイスから、まずは勉強したいと思ってます。