ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
フォームとタイムラインが同じページ上にあること - 胃痛！イトマサのいわゆるチラシの裏：楽天ブログ
2009.06.16 フォームとタイムラインが同じページ上にあること カテゴリ：メディア論 ブログツールは、編集ツールと表示ツールが別だった。 SNSの日記の革命的な部分は、 日記を書くUIと表示するUIが同じデザインであること。 Twitterの革命的な部分は、 自分、他人のタイムラインが見えているページ上で、 書き込みができること。 まっさらなところで書くよりも、 人の話や自分の前の話しに絡んで話すほうが楽だ。 ほとんどの人にとっては、 講演よりも、パネルディスカッションのパネラーとして話しをするほうが、 気の利いたことを言えるのと、同じように。 お気に入りの記事を「いいね！」で応援しよう いいね！0 シェアする Last updated 2009.06.16 11:49:04 コメント(0) | コメントを書く [メディア論] カテゴリの最新記事 これからのインターフェース 2010
優れたユーザインタフェースを設計する際に考慮する8つのポイント
ユーザーにとって有益なユーザインタフェースを設計する際に考慮する8つのポイントをUsability Postから紹介します。 8 Characteristics Of Successful User Interfaces 以下、その意訳です。 ユーザインターフェイスの設計時に、考慮する8つのポイントを紹介します。 Clear Concise Familiar Responsive Consistent Attractive Efficient Forgiving To conclude… 1. Clear 明快 明快であるというのは、最も重量な要素です。 ユーザインターフェイスデザインの目的は、ユーザーに意味と機能を伝え、利用するアプリケーションと相互につきあえるようにすることです。そのアプリケーションがどのように機能するのか、どこに進むべきか理解することができない時は、ユーザーは困惑しが
iPhone/iPod Touch向けGmailがさらに使いやすくなりました。 (BlogPeople Blog)
BlogPeopleのブログです。BlogPeopleが提供中のサービスのデモや説明、そしてそれとは全く関係ないお話を書いていきます。 このブログのRSS iPhone/iPod TouchとAndroidケータイ用のGmailが新しくなったようです。 Official Google Mobile Blog: Gmail gets a new engine for iPhone and Android-powered devices All this is achieved with aggressive caching and by leveraging new browser technologies, like HTML5 and Gears. The full impact of this new architecture isn't visible yet, but it wil
日本語版Gmailでよく操作ミスする理由に気づいた :Heartlogic
日本語版Gmailでよく操作ミスする理由に気づいた Gmailをマウスで操作することが多いのですが、日本語環境だと、よく前後のメールを間違えて新しい方に読み進めたいのに古い方に行っちゃったりすることが多く、そのたび地味にがっくりしてました。 が、よくよく英語版と日本語版のUIを比べてみると、 英語版は［Newer--Older］ 日本語版は［前--次］ これって訳が対応してなくね？ 漢字1字なら［新--旧］でよくね？ 日本語環境でGmail Labsの「添付忘れチェッカー」を使うと「添付」というキーワードに反応して添付忘れのアラートを出してくれるのでいいかも！ とか思ったんですが、［前--後］の意味がいつまで経っても覚えられず、操作ミスが辛いです。
AppleInsider: Apple、明らかにされてこなかった Snow Leopard UI オーバーホールを近く公開 - silvervine の定点観測所
Apple close to unveiling guarded Snow Leopard UI overhaul By Kasper Jade Published: Wednesday, March 25, 2009 12:00 PM EST 開発者らは結構前から Apple の Snow Leopard オペレーティングシステムのプレリリース版に関与してきたが、そうした配布物からは、大幅なユーザーインターフェース（UI）オーバーホールをはじめとする、複数の機能が明らかにされており、アップルはさらに広く公開するよう準備を進めているとの情報を AppleInsider は受け取った。 この件にくわしい人々によると、同 OS の次期開発者向けビルドは、Apple が がはじめて同 OS のプレビュー版を開発者向けに発表した 昨年 6 月に開催された Worldwide Developers
湯川鶴章のIT潮流 powered by ココログ: スマートフォンvsケータイ、勝つのはケータイだ
スマートフォンの定義も難しいんだけど・・・。ちょっと前ならウィンドウズ系ＯＳが載っていることがスマートフォンの定義みたいなもんだったし。 ここでは便宜的に、ＰＣサイトビューアやフルブラウザと呼ばれるタイプのブラウザしか搭載されていないモバイル電話機器、ケータイブラウザが搭載されていない機器のこと、と定義する。またフルブラウザ、ケータイブラウザの双方が搭載されていても、あくまでもウリは、ＰＣ向けサイトを小さな画面向けにうまく変換して表示するフルブラウザの機能であれば、それもスマートフォンということにしよう。ウィンドウズモバイルなどのソフトが搭載されている機器はもちろんのこと、iPhoneもスマートフォンということになる。 で、一方のケータイの定義だが、ここでは便宜的にケータイブラウザのほうががメインツールになっている機器としておく。グーグルのアンドロイド搭載機器でも、ケータイブラウザが充
Bridge Word
This shop will be powered by Are you the store owner? Log in here
Ajaxで文字を打ち始めると大きくなるテキストエリア - Ajax活用情報紹介サイト Recently Ajax by H2O Space.
お問い合わせ画面などで、ユーザーに文章を打ち込んでもらうときは「テキストエリア」を使います。 しかし、テキストエリアの大きさは大きい方がユーザーにとってはうれしいものの、場所を取ってしまうので、ページ制作者にとっては邪魔なもの。 そこで、「文字を打ち始めたら大きくなる」テキストエリアはいかがでしょうか。 James Pdolsey氏のサイトで『jQuery plugin: ‘autoResize’』が紹介されていました。 大きくなるときに、ちょっとしたアニメーションで「にょきっ」と大きくなるのが、なんとも粋でかわいらしいです。こんな演出なら使ってみたいですね。 文字を打ち始めるとテキストエリアが大きくなる『jQuery plugin: ‘autoResize’』 ※ 動作デモは、ページ上部の「Demo」からどうぞ [PR] Ajax開発のお手伝いは、エイチツーオー・スペースにお任せく
フォームにおける「進む」ボタンと「戻る」ボタン。どのように配置する？ (ユーザビリティ実践メモ)
これまで実践メモではフォームを設計する際に注意すべき点をいくつかご紹介してきました。 フォーム設計についての記事一覧 今回はフォームによく出現する「進む（次へ）ボタン」と「戻るボタン」を配置する際に気をつける点を纏めました。 ウェブサイトにおいては「進む（次へ）」ボタンなど前進するものを右側に、「戻る」ボタンなど後退するものを左側に置くことが一般的になっています。 ユーザは多くのサイトを利用している中でこの配置に慣れていますので、配置が逆になっていると次へ進むつもりがうっかり「戻るボタン」を押してしまうことになりかねません。最悪の場合、これまで入力したものがクリアされてしまい、入力を一からやり直すはめになります。 そういう訳ですから、フォームのボタンを配置する際は「進む（次へ）」ボタンを右側に、 「戻る」ボタンを左側へと一般的な慣習に従う方がユーザに対して親切と言えるでしょう。 2.「
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
ユーザーは狭く見る - レジデント初期研修用資料
Google の新しいブラウザ 「Chrome 」を使った感想。 Chrome は速く感じる 今まで使っていて、なんの不便も感じていなかった Sleipnir が、どうにも調子が悪い。恐らくは中で動いているIE8 の問題なんだろうけれど、 blog の更新だとか、コメント欄の管理だとか、エラーが頻発する。 いい機会なので、常用するブラウザを、Google Chrome に変更したんだけれど、これはたしかに速く感じる。 自分には、技術的なことは何一つ分からないし、普段見ているページのほとんどは、 文字しかないようなページばっかりだから、ブラウザの本当の速さ、 内部処理の速さだとか、実装のすばらしさだとか、そういうのは全然分からないんだけれど、 素人がちょっとさわってもびっくりするぐらい、Chrome は速く「感じる」。 このブラウザは、ユーザーへの「速さの見せかた」に、気を遣ってデザインされ
第25回 ユーザは使いよう | WIRED VISION
第25回 ユーザは使いよう 2008年7月22日 ITデザイン コメント： トラックバック (0) （これまでの増井俊之の「界面潮流」はこちら） 近年のユーザインタフェース開発では「ユーザ中心設計」（User-centered Design）を行なうことが常識になっています。システム設計者の思い込みにもとづいて作られたシステムがユーザにとって使いやすいものになる可能性は低いですが、設計の初期段階からユーザの欲求についてよく検討し、設計の途中段階においても実際にそれが使いやすいかどうかテストを行ないつつ開発を行えば、本当にユーザにとって使いやすいシステムを開発することが可能になります。 ユーザビリティの専門家のJakob Nielsenは以下のような5個の要素を使いやすさの目標としてあげています。 1. 学習しやすさ （Learnability） 2. 効率 （Efficiency） 3.
［確認］ボタンの責任範囲感 :Heartlogic
［確認］ボタンの責任範囲感 こういうUIがある。例えばmixiのユーザー情報編集フォームとか。 情報の表示→編集ボタンクリック→編集作業→完了ボタンクリック→確認→確認ボタンクリック→情報の表示 これは実質的には、 情報の表示→編集ボタンクリック→編集作業→完了ボタンクリック→情報の表示 という形でもぜんぜん構わない。2度目の情報の表示で入力者は確認を行うだろうし、そこで問題があれば、再度編集ボタンをクリックすれば良い。問題がなければ確認ボタンをクリックし情報の表示を待つ、という部分を省略できる。 どう考えても後者の方が効率的なのだが、けっこう前者のようなUIは多い。 後者はAppleのUIがそうだ。前者はWindows的......か？ mixiは何をやるにも前者型である。 想像するに、前者は［編集］という行為をそれだけで完結させようとしているのだろう。つまり、 情報の表示→編集ボタンク
楽天の検索結果に広告が乗っかってきた件 - チョコっとラブ的なにか
ナニコレ。5つもPR記事入ってて、ちょー邪魔。 並び順を色々変えても、必ず先頭に表示されてきます。また、対象商品ごとにソート（例えば「 カードOK」「買い物可能」「定期購入」など）方法を変えても、必ず先頭に表示されます。 はぁ、これから楽天使うとき、全部コレ乗っかってくるのかぁ。見難いなぁ。うーん・・・。 追記 コメント欄で「でなくね？」という指摘をいただいたので、再度ためしてみましたところ検索語が「モンブラン」では出ないのですが、「花粉」だと5件PR記事が出て、「ホワイトデー」だと、2件出てきました。キーワードで広告を売っている模様ですね。どうやら。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://ht-03a.nttdocomo.co.jp/index.html?wdycf=product
サービス終了のお知らせ
はてなブログ | 無料ブログを作成しよう
長文日記
グーグル、「Gmail」で複数添付ファイルの選択を可能に
