タグ

webdesignとusabilityに関するlomo_lomoのブックマーク (25)

  • Bad Usability — collected by Netlife Research

    Seems to me a lot of time could have been saved all around by just displaying the blue link. This site is hosted by BlueHost. You can get BlueHost for $2.75 per month by using a coupon from Justhemes.

    lomo_lomo
    lomo_lomo 2008/12/19
    ユーザビリティのよくない例(日本語版もあり)
  • グローバルナビゲーションを変えてみた - Liner Note

    ビフォーアフター(1つ内容が増えてますが)この変更については、まだ100%納得しているわけではないのだけど、とりあえずい‥ビフォー アフター(1つ内容が増えてますが) この変更については、まだ100%納得しているわけではないのだけど、とりあえずいきさつを書いておこうかな。まず、きっかけはこの文書。 「タブ」というのは来同じリソースについて、複数の異なる視点での表示に切り替える為に使うもの。今現在使っているこのはてなダイアリの「日記を書く」では今書いている記事を「編集」「プレビュー」をタブで表示切り替え可能だが、これは良くできている。なんだか思いがけず「はてな」を褒めてしまったな。ところが、タブブラウザのそれは非常に出来が悪い。極めて多くのユーザーが使い勝手の悪い方法でタブを使用している。すなわち全く関係のない情報をタブで並列してしまっていたり、Googleの検索結果のリストとそのリンク先

    lomo_lomo
    lomo_lomo 2007/08/22
    タブの役割
  • ウノウラボ Unoh Labs: フォームのユーザビリティを改善する10のTips

    miyakeです。Webアプリケーションにおけるユーザーインタフェースの代表格と言えばフォーム。今日はそんなフォームのUIを作るに当たって、普段自分が心掛けていることをつらつらとご紹介します。 ■チェックボックスやラジオボタンはfieldset,label要素でくくる チェックボックスやラジオボタンには一般的にその内容を表すテキスト(ラベル)が付けられますが、input要素だけでマークアップした場合、チェックボックス(ラジオボタン)の部分しかクリックすることができません。 label要素を用いることで、ラベルの部分をクリックしてフォームを操作することが可能になります。これは是非設定しておきましょう。 ラベルをクリックできると思って期待を裏切られると、かなりのストレスになりかねません。 また、そのチェックボックスやラジオボタンのグループをfieldset要素で囲んでおくことをお勧めします。マ

    lomo_lomo
    lomo_lomo 2007/08/16
    使う人にとってフォームがどうなっていると嬉しいか?
  • https://www.openvista.jp/archives/note/186/?186/

    lomo_lomo
    lomo_lomo 2007/08/11
    2カラム版 IE6に対応
  • https://www.openvista.jp/archives/note/185/?185/

    lomo_lomo
    lomo_lomo 2007/08/11
    1カラムデザインをもっとユーザにとって使いやすくするにはどうすればいいかを提案するシリーズ
  • サイドバーいらない論:ウェブログのIA研究(1) - Liner Note

    サイドバーいらない論:ウェブログのIA研究(1) 書いた人: hash 投稿日: 2007年08月07日(最終更新:5年7ヶ月と15日前) 読者の皆さんの反応 5 被ブックマーク数: 5 煩悩是道場 – ブログのサイドバーって当に必要? Hatena::agenda – ブログのサイドバーは要らない Hatena::agenda – 「ブログのサイドバーは要らない」の反論にこたえる ジェニーはティーン☆ロボット ファンブログ – ブログのサイドバーは無用 タイトル通り、私もいらない論に賛成です。 全幅の20%かそこらの範囲内でやりくりするならまだ許容範囲内で役に立つケースもあるんですが、2カラム・3カラムで40-50%まで領域に取るようなコンテンツが増えてきて、来のコンテンツである文が読みにくくなる末転倒ぽいケースが一般化してると思います。私も最近、そんなこんなでRSSリーダーから

    lomo_lomo
    lomo_lomo 2007/08/08
    サイドバーは本当にいらないのか?いらないのならなぜ普及しているのか?
  • alt属性はいかに決定されるべきか | Takazudo Clipping*

    画像を閲覧できないユーザーでも内容を把握できるようにalt属性をつけましょうとは言うが、実際にはどのようにつけたらよいのかが実はかなりわからない。さらに納品前になんじゃこのalt!と突っ込まれる・・・。色々話し合ったりググったりした末にでた自分結論はこんなの。 前提 画像OFFのユーザー・音声ブラウザのユーザーが、画像の代わりにそのaltテキストが表示されても、ページ内容が分かる。但し、100%の情報を伝える必要があるわけでもない。そこに何の画像があるのかが伝わり、ページ内容を把握できる。 画像の中に文字がある場合

    lomo_lomo
    lomo_lomo 2007/07/28
    細かく指定しすぎて間違った情報を伝えてしまう可能性/本来imgで表現するものをbackgroundで書かないように注意
  • ユーザーの立場でデザインを変更する方法 at ブログヘラルド

    5月 16日 at 3:28 pm by ベン ブライカンプ - 気も遠くなるぐらい長い時間をかけてデザインを変更するために手を加えて、ピクセルすべての見た目まで完璧に仕上げた。その後、数人の友人に見せ、主要なブラウザー上でテストも実行した。サイトで稼動させる用意が整ったのだ。 素晴らしいね。 残念。やらなければならないことがまだ山ほどある。 新しいデザインを立ち上げたら、どれぐらい動くのか把握する必要がある。ベタ褒めしたり、見た目のよさを綴ったコメントを気にしてはいけない。彼らは大した知識を持ち合わせていないからだ。君にはデータが必要だ。 データの取得 CrazyEgg(クレイジーエッグ)に直行し、訪問者がどこをクリックしているのか把握できるようにヒートマップを手に入れよう。クリックしている場所が分かったら、訪問者が一番見ていそうな場所に重要なアクションアイテムを置けるようにデザインを

    lomo_lomo
    lomo_lomo 2007/05/17
    ヒートマップ、ウェブ解析を実行する大事な理由
  • 「左上の魔術師」理論

    Web業界のデザイン手法として、密かに流行し始めている「左上の魔術師」理論。 サイトとしての「見栄え」よりも、ユーザーの「目の動き」に着目したWebデザイン手法として注目を浴びています。 今回は、まず始めにWebサイトのデザイン別にユーザーの「目の動き」を解説します。 そして、実際にミリオン単位でユーザーを獲得しているサイトを考察することで、「左上の魔術師」理論を解説したいと思います。 1.カラム別Webサイトデザイン 2.昔はたくさんあったWebサイトデザイン 3.ページ単体を見に来たときのユーザーの目の動き 4.サイト全体を見たくなったユーザーの目の動き 5.ミリオン単位でユーザーを獲得しているサイトのデザイン 6.左上の魔術師とは 1.カラム別Webサイトデザイン 現在のWebサイトの多くは、「1カラム型」、「2カラム型」、「3カラム型」のどれかで構成されています。 このうち「2カラ

    「左上の魔術師」理論
    lomo_lomo
    lomo_lomo 2007/04/12
    左上に何が配置されているかを確認することで、そのサイトの主張したいものがわかるという理論
  • 意外に効果的なフッターリンク (ユーザビリティ実践メモ)

    ウェブサイトを訪れたユーザにできるだけ多くのページを閲覧してもらうために、どんな対応が考えられるでしょうか。 他に見たいと思うコンテンツにスムーズに移動できるようにすることが重要となります。 今回は、後者を実現するための手段の一つとして、フッターリンクの有効性についてご紹介します。 ナビゲーションリンクには、一般的には「グローバルナビゲーション」や「左ナビゲーション」「右ナビゲーション」などがありますが、中でもユーザに頻繁に利用されているのはページ下部に配置されたフッターリンクであることが弊社のユーザビリティテストでわかっています。 フッターリンクはページの下部に配置されるナビゲーションリンクであるため、設計時には軽視されがちです。しかし、ユーザにとってはページの上から一通りコンテンツを閲覧した後に出現する関連ページへの最も近い導線であるため、有効な手段となっているわけです。 フッターリン

    lomo_lomo
    lomo_lomo 2007/03/20
    ページの上から一通りコンテンツを閲覧した後に出現する関連ページへの最も近い導線
  • Submit buttons should not look like input boxes | The Montoya Herald

    A Single Article Read it, comment, and share it with your friends I see this mistake all the time on various websites, especially with simple templates. A site may have a form with a few text boxes and a submit button, and sometimes the submit buttons will be styled the same as the input boxes. This is an easy mistake to make if you are designing your pages on a Mac and you don’t test with a brows

    lomo_lomo
    lomo_lomo 2007/03/04
    idやclassを指定したり<button>タグを使う
  • 第1回 ユーザビリティでまず何を考えるべきか

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    第1回 ユーザビリティでまず何を考えるべきか
    lomo_lomo
    lomo_lomo 2007/02/13
    ユーザビリティの実践的な改善策
  • ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン::ホームページ制作::NPO法人しゃらく

    ヤコブ・ニールセンの考えをまとめたユーザビリティガイドライン ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。 デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。 TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。

    lomo_lomo
    lomo_lomo 2007/01/21
    ヤコブ・ニールセンのAlertboxを元にしたガイドラインまとめ
  • http://www.designwalker.com/2007/01/css-visited.html

    http://www.designwalker.com/2007/01/css-visited.html
    lomo_lomo
    lomo_lomo 2007/01/20
    色を変える/画像を表示…など
  • COULD:Webデザインに関する 15 の調査結果

    lomo_lomo
    lomo_lomo 2007/01/18
    『使える』Webサイト作りについて
  • 第1回 サイト訪問者の目線で考えるサイト作り | ユーザー視点のウェブデザインガイド

    第1回 サイト訪問者の目線で考える 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか? 今木 智隆(株式会社ビービット) ユーザーの目線を考えることの重要性ウェブサイトがビジネスとして成功するための要素は、コンセプト・デザインから細かな言葉遣いに至るまでさまざまであるが、その中でも「ユーザーにしっかりと(見てもらうべき)情報を見てもらう」ことは常に重要な要素の1つに挙げられるだろう。 いくらデザイン(見た目)がよく、コンテンツが充実しているサイトであっても、ユーザーは驚くほどすぐにサイトから離

    第1回 サイト訪問者の目線で考えるサイト作り | ユーザー視点のウェブデザインガイド
    lomo_lomo
    lomo_lomo 2006/12/31
    ユーザーに見えているサイト画面は「時速100キロの車から、標識を見るような」状態と同じ
  • 【ハウツー】Yahoo! UI LibraryでさくっとAjax! (1) Yahoo! UI Libraryを使ってユーザビリティアップ! (MYCOMジャーナル)

    「マルチプラットフォーム」「利用する際に必要なものは、デフォルトでインストールされているWebブラウザとネットワークに接続できる環境のみ」といったような利便性の高さから、見ない日はないと言っても過言ではないほど浸透したWebアプリケーション。今日もいたるところで、さまざまな業務を円滑にすすめるためにWebアプリケーションが利用されている。 Webアプリケーションはハイパーリンクやフォームなど、Webブラウザの基機能を用いて作成されている。Webブラウザ単体でできることは限られているため、ローカルアプリケーションと比較するとユーザビリティにが低くなりやすい。このため、デベロッパはWebブラウザ上で動作するJavaScriptやFlashをもちいて、そのユーザビリティを高めてきた。 ここではJavaScriptコードを記述するデベロッパの負担を軽減かつユーザビリティを簡単に高めることができる

    lomo_lomo
    lomo_lomo 2006/12/31
    Yahoo! User Interface Library(YUI)からとくに興味深いJavaScriptライブラリをいくつか紹介
  • 第26回 どこにメニューをおくべきか,どこが画面の一等地か:ITpro

    Webサイトのデザインの中で,ここ2年で大きく変わりつつある「常識」があります。それは,「メニュー(索引)」の位置と「一等地」の場所です。ユーザーの閲覧環境が加速度的に変化しているという認識の下で,それでも最良のユーザビリティを提供しようとするなら,どのようなことを考えておく必要があるでしょうか。 左メニューと右メニュー(視線との交差)のどちらがベスト? まだモニター画面の大きさが小さかった時代(1995年前後),情報へアクセスしやすくする「メニュー」の位置は,ほとんど誰が考えても左側にあり,議論もされなかったように記憶しています。確実に画面の中に入り,ユーザーも基的に左端にさえ注意を向けていれば,大切な情報にたどり着けるという「暗黙の常識」が存在していたかのような時代でした。 しかしここ数年,メニューが左側にあると当に操作性が良いのかという議論を聞くようになり,大手のWebサイトでも

    第26回 どこにメニューをおくべきか,どこが画面の一等地か:ITpro
    lomo_lomo
    lomo_lomo 2006/12/31
    左メニューと右メニュー(視線との交差)のどちらがベスト?
  • Walk on the bright side of life : 「Webアクセシビリティ中級講座」

    8月30日、「Webアクセシビリティ中級講座」を受講した。主催の「ハーモニー・アイ」は、ユニバーサル社会形成をモットーに活動しているNPO法人。「アクセシビリティ・ユーザビリティチェック」や、研修・セミナーなどを開催されている。 今回の講座では、実際に視覚障害のある方を招き、ユーザー・テストをライブで行いながら、実際のサイトの手直しを行い、さらにその結果をレビューするという試みが行われた。 一概にアクセシブルといっても、視覚障害だけでなく、高齢者対応という点では実際のところ、かなり身近な問題だ。私自身、それなりに取り組んではいるものの、今回のセミナーを受講して、たくさんの「気づき」を得られた。 タイトルとh1がほぼ同じ内容の場合、音声ブラウザでは、ナビゲーションスキップでh1すると、同じ内容が二回読まれることになる。ジャンプ先の位置を要検討。 たとえ、その画像を見ることができなくても、プリ

    lomo_lomo
    lomo_lomo 2006/12/31
    現状での高齢者対応は、単純に文字を大きくすればいいだけでない
  • Alertbox: 画面解像度とページレイアウト(2006年7月31日)

    ウェブページは 1024 × 768 に最適化するべきだが、800 × 600 から 1280 × 1024 までの幅広い解像度に対応できるリキッド・レイアウトを使おう。 Screen Resolution and Page Layout by Jakob Nielsen on July 31, 2006 ウェブユーザビリティ教室で最も多い質問の内の 1 つは、「どの画面サイズに合わせてデザインすればよいのか」だ。この質問に完全に答えようとすると、少し複雑になるが、基的な考え方は簡単だ: 現在最も使われている画面サイズ 1024 × 768 に最適化する。もちろんこのガイドラインの基的な考えは、ターゲットユーザたちの間で最も一般的な解像度に合わせて最適化することであるため、ときとともに具体的な解像度は変わり続ける。現在でも、例えば全従業員に大きなモニタを使わせている企業のイントラネット

    Alertbox: 画面解像度とページレイアウト(2006年7月31日)
    lomo_lomo
    lomo_lomo 2006/12/31
    幅広い解像度に対応できるリキッド・レイアウトを使おう