ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
実践アクセシブルHTML - フォームは送信してもらえばこそ
こんなフォームはイヤだ！ フォームとは、HTMLのFORM要素などによってマークアップされているコントロール群の塊のことです。さまざまなウェブサイトにおいて、主に問い合わせのページであるとか、サイト内検索のためのキーワード入力用にだとかで利用されています。コミュニティ機能を備えているようなサイトであれば、掲示板システムのようなところでも使われていることでしょう。フォームのないウェブサイトのほうが珍しいのではないでしょうか。それくらい、制作側にもユーザーにも身近なものです。 INPUT要素やTEXTAREA要素などといった、フォームのコントロール各要素の機能はブラウザによって提供されているため、どのようなブラウザであってもその操作感に大きな違いが出ません。しかしコントロールごとの操作に違いが出ないといっても、フォーム全体としてはやはり使いやすいフォームと使いにくいフォームというのがあります。
フォームの入力エラーを吹き出しで教えてくれる JavaScript
■ フォームの入力エラーを吹き出しで教えてくれる JavaScript フォームの validation 関連のライブラリはいくつかありますが、私は以下に紹介するやつをずっと使ってまして、これがかなり気に入ってます。ただ、オレナイズされたコードが随所に含まれていたから紹介する事が出来ないでいたのですが、今回やっと書き直したのでお目見えです。 AJAX を使ってサーバサイドと連携、とかそういう事も全くやってなくて、普通に JavaScript のみで入力のチェックをしてるだけなんで、真新しい事はないんですが。 実際の動作サンプル とりあえず submit ボタンを押せば、全て理解出来るかと思います。 今回は CSS のファイルと画像のファイルといっぱい出来てきてしまっていて、いつもの「読み込ませるだけ」とはちょっと毛色も違い、使うのには事前の準備が必要で面倒です。 いつもの JavaScri
エレベータのUI
Ognacの雑感 木漏れ日々 目次 ホーム 連絡をする RSS Login Blog 利用状況 投稿数 - 1487 記事 - 0 コメント - 45685 トラックバック - 143 書庫 2014年5月 (6) 2014年4月 (13) 2014年3月 (14) 2014年2月 (12) 2014年1月 (12) 2013年12月 (13) 2013年11月 (13) 2013年10月 (11) 2013年9月 (13) 2013年8月 (14) 2013年7月 (13) 2013年6月 (14) 2013年5月 (15) 2013年4月 (13) 2013年3月 (14) 2013年2月 (13) 2013年1月 (15) 2012年12月 (14) 2012年11月 (14) 2012年10月 (15) 2012年9月 (14) 2012年8月 (13) 2012年7月 (13)
Webデザイン エンジニアリング 第16回 ボタンを押させるテクニック：ITpro
対象とするユーザーの“慣れや知識”によって，画面の構成を変えたほうが伝わりやすいとするならば，画面上の「ユーザー・インタフェース（UI）部品」の色や形状も，ユーザーに応じて変えるべきでしょう。今回は，代表的なUI部品でありながら，なかなか作り手の思うように押してくれない「ボタン」について考えます。 わかりやすいボタンの形状はユーザーによって違う まず，前回とほぼ同じ絵を用います。Webシステムの操作方法への「熟知度（PCリテラシ）」を縦軸，「提供したいサービスに対する知識」を横軸とします。そして，それぞれの「軸」に対して，受け入れやすいと思われる「ボタン」の形状を例記しました。 上図の【A】や【B】のタイプに当てはまるPCリテラシの高いユーザーは，ボタンの“ラベル”に「submit」と書かれていようが「GO」と書かれていようが，ボタンを認識することはさほど苦ではありません。 しかし，PCに
売りたいなら、“販売”でなく“購入”ツールを準備せよ － ＠IT
Webアプリケーションのユーザーインターフェイス[9] 売りたいなら、 “販売”でなく“購入”ツールを準備せよ 「経験則その5：ガイドとレコメンデーション」 ソシオメディア 上野 学 2006/4/22 システムが積極的にユーザーの行動を支援するとどうなるか。人とコンピュータのコラボレーションを実現させよう。インクリメンタルサーチやタスクコヒーレンスの指針を説明（編集部） 前回の「ユーザーが間違えても間違えなくてもエラーは回避せよ」では、エラーメッセージの在り方と、エラーを未然に回避するための方法について考察しました。タスクが中断されずに前進し続けるようにするためには、人の苦手とする「正確な動き」や「大量の記憶」をシステムが適切に補助することが大切であるという話でした。 今回は、システムがユーザーのタスクを補助するという考え方を発展させて、「経験則その5：ガイドとレコメンデーション」を紹介
アンカテ(Uncategorizable Blog) - livedoor readerの良さは大量未読の圧迫感が無いこと
livedoor Readerという新発売のRSSリーダー使ってみました。(Web2.0時代には「新発売」は死語になる？) これがなかなかイイ。すぐに乗り換え常用決定。 どこが良いかと言うと、これは私のRSSリーダーの使い方が悪いとも言えるのですが、とにかく欲張ってたくさんのブログを登録してしまうんですね。それで未読が溜まる溜まる。どうやっても読みきれないくらいのブログを登録してるんで、未読がゼロになったことなんて、ここ数十年の間一度も無いんです! それでどこが良いかと言うと、livedoor readerは未読がたくさんあってもへっちゃら。そこが良い。 未読をたくさんかかえている身としては、あっさり未読を消したいんです。それから、あまり読んでないブログはあっさり購読解除したい。それが簡単にできます。単なる未読は、キーボードショートカットを使って、sキー一発でブログ単位で消えます。ブログを
fladdict.net blog: 「本当に素晴らしいデザイン」とは、PICASAの変なスクロールバーみたいなものを言う
お気に入り巡回先の、羨望は無知の「なぜ「デザイン」という行為、「デザイナー」という職業は誤解されるのか」や、分裂勘違い君劇場の「エンジニアの方が優れたユーザインタフェースデザインができる理由」、F's Garageの「エンジニアがダメなUIデザインをする原因」 のあたりのデザイン論が、あんまりデザインと縁のない人にデザインをわかりやすく説明してて面白い。面白いのだけどちょっと抽象的なんで、具体例の話とか書いてみるテスト。 最近、これらのエントリーで言及されるようなよいデザインを身をもって体験をした。それは画像管理ソフトPICASAのヘンテコなスクロールバー。 今まで気付かなかったけど、あのヘンなスクロールバーは単なるアヴァンギャルドやオシャレじゃあなかった。実は合理性に裏打ちされた素晴らしく美しいデザインだということに気付いた。 まずPICASAを知らない人に説明すると、このソフトのスクロ
秋元@サイボウズラボ・プログラマー・ブログ: Yahoo! UI Library はすごいね
via O’Reilley Radar Yahoo! UI Library で、Yahoo! が実際に使っている Javascript のライブラリ集が公開されている。 Yahoo! のどこでこんなユーザインタフェースが使われてるんだろう? と思うぐらい、サンプルで見せられる UI パーツは豊富だ。それぞれの “Example” を見てまわるだけでもおなかいっぱいだ。 コアユーティリティ アニメーション クロスブラウザ対応の XMLHttpRequest ラッパ DOM 操作 ドラッグアンドドロップ イベントハンドリング UI コントロール部品 カレンダー スライダー ツリー ドラッグアンドドロップなんかは、ファンタジースポーツで使われているのを見たことがあるので知っていた。複数のリスト間でアイテムの移動や並べ替えを行うときには使えるパーツだろう。 日本語カレンダーなんかも、いい感じで再利
分裂勘違い君劇場 - 見た瞬間に使い方の分かるユーザインタフェース
「初心者にわかりやすいGUI」については、この記事のid:naoya氏の気持ちは、分かる気がします。 まず、プロのGUIデザイナーと実プロダクトの仕様について議論すると、ほとんど必ずと言っていいほど議題に上がるのが、「とっつきやすや」と「機能性」のトレードオフ。 よく、回すべきなのかスライドべきさせるのか、押すんだか引くんだかよく分からないドアというのがある。ドアのどちら側を押すべきなのかも分かりにくいことも多い。それは、ユーザインタフェースが、self explanatory(自己説明的)じゃないからだ。これは、よくユーザインタフェースの設計ミスの事例としてやり玉にあげられるんだけど、ぼくは、それはそんなに単純な話じゃないと思うのだ。 たとえば、丸い取っ手のあるドアは、見た瞬間、「ああ、これはドアノブを回して引くんだな」ということが、直感的に分かる。つまり、そのドアノブは、「機能」を提供
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FC2Blog - 404 Error
Phenomena Entertainment
専門家は個人の責任で情報発信するな - void GraphicWizardsLair( void ); //