ユーザーという言葉に潜む５つの側面
U > X 抽象的なアイデアを話しているかのようにみえる「UX」ですが、意味をあやふやになってしまうのは実は「Experience (体験)」のほうではなく「User (ユーザー)」という部分にあるのではと感じています。「Webサイト」とひとことで表すものの、Webアプリケーション、Ｅコマース、コミュニティサイト、個人サイトと様々な種類があり、それぞれ人との関わり方が違います。Webでの操作は能動的なものが多く「User / 利用者」と表現しやすいですが、すべてが能動的な Web サイトではありませんし、能動的な行動にも幾つか違いがあります。 使うといっても、Webアプリケーションを操作する方と、Ｅコマースを訪れる方は見所が違いますし、自分がした体験の評価の仕方も異なります。つまり、UX について語るとしてもどのような人たちに何を提供したいのかという前提を共有していないと、「よい体験を」な
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
入力ミスを減らすメールアドレス入力フォームの作り方 - キャズムを超えろ！
メールフォームでgmai.com abc.jなどはGoogleの検索結果よろしく「もしかして...Gmail？」と指摘してほしい。 つまり、アットマーク以降の入力文字列のうち、g,m,a,i,l,c,oのうち5文字を含んでかつ11文字以内のアドレスで、かつGmail.comと入力されていないなら「Gmail.comではありませんか？ Gmai.comと入力されています」とWARNINGを出すメールフォームとしてはどうか、ということだ。 メアドはなるたけ簡単に入力させたいが、入力ミスは救ってあげたい(すべてではなくても)、という二律背反に対するひとつの解決策ではないかと思うのだが、なぜ誰も実装しないのだろうか。 この流れでhotmail／yahoo mailぐらいは最低対応させたいものである。あと、よくあるのが以前書いたUIについてのエントリでも触れたがdot/commaの間違い、入力忘れ。
Re:ユーザーの動き。
ちょっと前に書いた、ユーザーの動き。ですが、アレはただの自分専用メモだったので、自分だったらこーするかもって事と言葉足らずだった部分の補足エントリーです。 いわゆる、ユーザビリティテストっていうのに参加してきました。 目の前でターゲット層に比較的近いユーザがサイトを見ている様子を見るのは滅多にない経験だったので、非常に有用な一日でした。 年齢は、20代前後くらいで、普段から当たり前のようにネットやってる人は殆ど居なく、時々調べ事に使う程度くらいの方々が大半っていう状況での結果です。 だから、ターゲット層によっては、この結果はあんまり役に立たないかも知れないし、見事なまでに合致してる場合は、それなりに使える情報かもわかりませんね。 ロゴクリック＝トップページに戻るという認識は殆ど無い。 だから、リンクは張りませんって結論にはならないので、対策としてはやっぱりグローバルナビゲーションやロゴの近
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
サイトのユーザビリティ上の問題を手っ取り早く発見するためのコツ 5ヶ条 - Feel Like A Fallinstar
サイトのユーザビリティがあがれば、成果に良い影響がでることは既に広く知られています。 でも、意外と「効率よく」改善する方法ってあまり見たことがなかったのでエントリー。 クリティカルな課題を手っ取り早く発見するためのポイントです。 ファーストビューのみに絞って重点的にチェックする 共通化されたフッターに改善の余地がないかチェックする 細かい文章は読まず、文章を「塊」として捉える フォームの課題は、とにかく真っ先にチェックする トップページのチェックは最後に回す 1.ファーストビューのみに絞って重点的にチェックする ユーザが、ファーストビューより下のコンテンツをじっくり読む可能性はぐんと下がります。 （ブログは除く） ユーザビリティ上の課題でクリティカルなものは、ファーストビューに集中することが多いです。 ファーストビューでしっかり興味をひきつけてしまえば、その下が多少問題でも、大きな破綻は起
Easy CSS Progress Bar | Kollermedia.at
A pure and free to use CSS “Step by Step” Progress Bar for all CSS Junkies out there. There is no limit of steps, just add another li tag and adjust the witdh in the css li part. Example Check out a few live Examples Tested in IE6, IE7, Latest Firefox and Opera Version Download Easy CSS Progress Bar (2,5 KiB, 4.569 hits)
ClickHeat | Installation
Links LabsMedia ホーム ClickHeat ホーム ダウンロード (on Sourceforge.net) Installation & upgrade デモ (login/password: demo/demo) 寄付 ClickHeat | インストール・アップグレード方法 インストール 1) 書庫を解凍後、サーバにアップロードする。（書庫にはあらかじめ /clickheat/ ディレクトリがあるので解凍後直接アップロードしてください） 2) ディレクトリを直接ブラウザーで呼び出す。（http://www.yoursite.com/clickheat/index.phpとする） 3) 画面指示に従う ※ バージョン1.xでは、javascript コードが変更されました ので、バージョン0.xからアップグレードする人はページに貼り付けたコードを変更する必要がありま
機能の豊富さとユーザの関与
ユーザの関与が深まるほど、アプリケーションはより多くの機能を維持できる。しかし、大部分のユーザの関与のレベルは低いものだ ―― 特に、機能の数よりもシンプルさの方を重視しなくてはならないウェブサイトの場合は。 Feature Richness and User Engagement by Jakob Nielsen on August 6, 2007 どんなユーザーインターフェースをデザインするにしても、重要な決定事項のうち一つは機能の多さとシンプルさの兼ね合いに関わってくる。機能が増えるほど、システムがより複雑になるのは避けられない： 機能はユーザに明示されている必要があるので、画面がより煩雑になる。 メニューのサイズや数のどちらか、または両方が増えるほど、必要な機能を見つけるのが難しくなる。 機能には説明が欠かせないので、ヘルプシステムやマニュアルのサイズが膨れ上がる： ドキュメントは
Geekなぺーじ：選択肢を減らすことの重要性
Google TechTalksでBarry Schwartz博士による講演が公開されていました。 「The Paradox of Choice - Why More Is Less」というタイトルでした。 最初は、UNIXコマンドのmoreがlessよりも劣っている理由の事だと思って見始めましたが、そうではありませんでした。 何でも選べてベストじゃないと満足しないというのは、アメリカ人っぽい気もしましたが、かなり面白かったです。 ユーザビリティと機能の問題は良くある問題ですが、お店で展示されている商品の種類を減らした方が売り上げが上昇する話などが新鮮でした。 以下に要約してみました。 ここでは書いていない部分も多いので、詳細はビデオをご覧下さい。 字幕も入っていますし、ゆっくりと話してくれる人なので非常に見やすいと思います。 ただ、スライド(PPT?)が見られないので、何故観客が笑ってい
ウェブサイトを使いやすくするための43の法則
R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy
[JS]Lightboxのいい点・悪い点
37 signalsで、Lightboxの是非というか議論がありました。 Been lightboxed lately? 個人的には、スクリプト自体は好きですが、設置するのはどちらかというと否定的です。 もちろん、写真のギャラリーなどにはかっこいいと思います。 とはいえ、当サイトでも画像拡大系のスクリプト(Highslide JS)を使用しています。 例：Highslideの実装ページ 使用している理由は、サイトのレイアウトに依存せず大きい画像(関連画像)が掲載できるためです。 また、背景一面がブラックにならずに、コンテクストが失われにくいためです。 以下に、上記サイトで議論されているそれぞれのいい点・悪い点を列挙してみました。 今度、クライアントに設置の依頼を受けた際にでも、再考しようと思います。 ポップアップウインドウよりいい。 ギャラリーなどには適している。 別ウインドウや別ページに
Interaction Design Pattern Library - Welie.com
Pattern library All patterns are listed here. It's quite a bunch of them, but I have tried to group them meaningfully. User needs Patterns that meet a direct need of the user. Navigating around· Accordion · Headerless Menu · Breadcrumbs · Directory Navigation · Doormat Navigation · Double Tab Navigation · Faceted Navigation · Fly-out Menu · Home Link · Icon Menu · Main Navigation · Map Navigator ·
アクセシブルなサイトにするための26のステップ
Webmaster World.comのエントリー「アクセシブルなサイトにするための26のステップ」の意訳です。 26 Steps to a More Accessible Website スキップリンクは、キーボード操作をしている人のために目に見えるように設置する、というのにはなるほど、と思いました。 Altのテキストと代替の内容 画像にはAltを記述し、代替の内容を記す。 動画のキャプションや概要 動画の内容・概要・サマリーなどを記す。 「ここをクリック」は使用しない リンクには的確な情報を含める。 リンクの間のスペース 隣接したリンクには、区切りを設置する。 JavaScriptで記述したリンク リンクの記述は、JavaScriptに依存させない。 lang属性の使用 lang属性を使用して、使用言語を明示する。 アニメーションは使用しない ユーザーの気を散らせない。 色に依存しない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://note.openvista.jp/2008/to-understand-the-general-users-1/
[JS]フォームの入力を支援するスクリプト -Autotab
Phenomena Entertainment
jQuery plugin – tableRowCheckboxToggle
http://youmos.com/news/css_step_menu
[Cookie] ページの履歴をパンくずリストで表示するスクリプト -Cookie Crumbs | コリス