usabilityとwebdesignに関するnshashのブックマーク (29)

  • 文書指向ウェブデザインにおけるスタイルシートの定石 (agenda)

    スタイルシートの文脈で文書指向ウェブデザインを説明すると、文書を読みに来た閲覧者のみをターゲットにしたデザインということだ。正式版をjintrick.netで公開する前に1時間で書いたプレビュー版を糞ブログに「流して」おこう。 前景色は黒(#000)、背景色は白(#FFF)にすることで、より確実な可読性を確保できる。眩しくて読みづらいというよくある批判に対する答えはこうだ: モニタの輝度を落とせば良い。 モニタの輝度を落とさなければならない状況が考慮されていない。 特に後者はまだ誰も言及していないんじゃないかな。 左右のマージンを小さくすることで、より幅広い状況に適応できる。相対指定の2~3%程度で十分だろう。それでも左右が詰まっていて息苦しいという批判に対する答えはこうだ: その閲覧者はデザインを眺めに来たのであって、文書を読みに来たのではない可能性が高い。 CSSにおけるmax-wid

    nshash
    nshash 2007/11/30
    形式的な環境整備のお話。これに加えて、内容的に演繹的に話す(加えて長いテキストには要約を用意する)とか強調を適宜利用するとかそういうこともした方がベターだと思います。
  • ユーザーがページのどこをクリックしたか解析するツール[to-R]

    ユーザーがページのどこをクリックしたか解析するツール ユーザーがどのようにサイトを巡回しているかはアクセス解析なのでわかりますが、ページのどこをクリックしたかも知りたくないでしょうか? 今回は、ページのどこがクリックされたかを解析するツールを紹介します。 Crazy EggはwebページにJavaScriptのコードを一行追加するだけでwebページのどこがクリックされているかを解析できるおもしろいツールです。 ちなみにto-Rを解析した所、このような結果になりました。 最初のエントリーの『続きを読む』にクリックが集中してますね。 CSSのカテゴリーページも結構人気っぽいです。 お約束として『パーマリンク』を用意しているのですが全くクリックされていませんので必要なさそうですね。 などアクセス解析やデザインを見ているだけではなかなか見えないwebサイトの性質が見えてきます。 セットアップ まず

    ユーザーがページのどこをクリックしたか解析するツール[to-R]
    nshash
    nshash 2007/08/21
    ハートマップをjavascript経由で作成、ユーザビリチテストが簡単にできてよさげです。
  • Alertbox: ページ内リンクの使用は避けよう(2006年2月21日)

    ウェブ上のユーザたちは、ハイパーテキスト・リンクは別のページを読み込むべきだという、明確な思考モデルを持っている。ページ内リンクはこの思考モデルに反するため、混乱を招く。 Avoid Within-Page Links by Jakob Nielsen on February 21, 2006 最近、同じ日に同じことについて 2 つの質問をされた。普通、このようなことが起こるということは、この話題にはもっと幅広い関心があるということなので、これについてのコラムを書こうと決めた。 質問その 1: 今、リンクをクリックして「名前付きアンカー」(同一ドキュメント内の別の場所)に移動する、「ジャンプ・リンク」についての議論に関わっています。私は、ジャンプ・リンクが新規ウィンドウを開くリンクと同等に、あまりよくないものだということを、貴方の書いた 2 つの記事で裏付けようとしています。 質問その 2

    Alertbox: ページ内リンクの使用は避けよう(2006年2月21日)
    nshash
    nshash 2007/08/04
    なる。しかし、「続きを読む」や「コメント(2)」などのリンクはこの記事からすると避けるべきなのだが、これらは既にユーザーの思考モデルの内にあって、変えてしまう方が混乱を呼ぶ訳。そこらのチョイスがむずいか
  • ブログのサイドバーは要らない - Hatena::agenda

    記事文(いわゆるpermanent link / permalink)に関して、「サイドバー」は100%要らない。要ると思っているのは100%勘違いである。エゴで固執するなら「さいどばー」に相当するリソースへのハイパーリンクを提供すればいい。Web2.0なんだろ? だったらそのリンク先を得意のAjaxとやらで上手に扱えばいいじゃないの。もっともその程度にAjaxなんて全然必要ないけれども、かっこよさげだろう? わらい。 煩悩是道場 - ブログのサイドバーって当に必要? 煩悩是道場の中の人は情報の消費者の視点で記事を書かれているが、サイドバーは「ブロガー」として見ても要らないものである。せっかくのPCのマルチタスク機能の利用を妨害してまで横幅を消費する価値が、「さいどばー」にあるのかどうかを考えればわかる。ある記事を参照しながら何かを書くときウィンドウを左右に二つ並べないのは、多くの人に

    ブログのサイドバーは要らない - Hatena::agenda
    nshash
    nshash 2007/07/28
    これは同意、サイドバーにある内容はあくまでオマケであって、本文を狭めてまで掲載するものではなくフッタに移せばよい。とはいえ、ユーザーにとっての1選択肢であるから切り替えCSSなどで確保すべきだと思います。
  • 第20回 “使いやすいURI(URL)”の設計を考える

    今回は「URIの使いやすさ」について考えてみたいと思います。URIの使いやすさ,というのは,ウェブサイトやウェブ・アプリケーションにおいて,どういうURIでそれぞれのページにアクセスできるようにすると,利用者は使いやすいのか,ということです。つまりは,どのようにURIを設計するのがいいんだろう,ということです。URIの設計については,これまでもいろいろなところで議論がなされていますので,それらの議論や動向などを見ながら,考えていきたいと思います。 URIを話題として取り上げようと思ったのは,4月の4,5日に行われたYAPC ASIA 2007(YAPCはYet Another Perl Conferenceの略)で,Six Apartの創業者でMovable Typeの生みの親であるBen Trott氏がSix Apartのサービス「Vox」について発表を行ったとき,「Voxの出力するRS

    第20回 “使いやすいURI(URL)”の設計を考える
    nshash
    nshash 2007/04/26
    メタデータをしっかり書いているならば、URIは極力短くていいと思うので、URIはポストスラグ(blogとか)を含める必要はないだろうし、URIもドメイン名以外に付け加えるのは記事通し番号だけでいいんじゃないかな。
  • アップル ヒューマンインタフェースガイドライン

    アップル ヒューマンインタフェースガイドライン 原文:Apple Computer Inc. 訳:かろでん☆みゅーあ 2006-06-28 はじめに アップル ヒューマンインタフェースガイドライン序文 アップルは、強力なコアファウンデーション、そしてアクアと呼ばれる、目の離せないユーザインタフェースを結びつけた、世界で最も先進的なオペレーティングシステム、Mac OS X を手にしました。 進化した機能と、美的に洗練された色使い、そして透過処理、アニメーションによって、Mac OS Xは新規のユーザにはコンピュータ操作をより容易に、同時にプロフェッショナルユーザには彼らがMacintoshに期待する通りの生産性を提供します。 ユーザインタフェース、すなわちふるまいと外見は、よく練られた緊密なユーザ体験を、Mac OS X向けに開発された全てのアプリケーションに利用できるようにします。 これ

    nshash
    nshash 2007/04/14
    PDF->製本してじっくり読みたいリソース
  • ねこめしにっき(2005年2月)

    だだだ未夢たんの萌え萌え着せ替えなのさー。 KISS なのさー。懐かしいですねー KISS 。そっか昨今は Java で動いちゃいますかー。そして、これまた数年ぶりに French Kiss Carbon 版を取ってきて、着せ替えまくりんぐ中。制服にエプロン姿がやっぱかわういな。そうそう、初代 OP のツインテール & 白ワンピ (つかそいつはよもや下着デスカ?と思う程度に各所防御が甘すぎたえちぃアレ) のバリエーションもほしいなー…。 ところで話は KISS にもどるが、一見動かなさげなナニをも動かせてしまう裏技とか、何ぞあったような記憶がするのですが、なんだっけ、忘れたー。誰ぞ覚えてませんか。うーむ。うごけー。(…なにやってますか 数年前、 JavaScript + 標準 DOM にてオブジェクトドラッグの実装練習にと習作したのも KISS モドキだったなー。どこぞの台湾サーバで見つけ

    nshash
    nshash 2007/01/29
    D&Dで操作するWebコンテンツの話。でも、なんだかWeb UIのリッチ化が進んでいる昨今、試してみたい材料ではありますね。
  • ハイパーリンクをより良い物に - Personnel

    「リンクする」とはリソースとリソースの関係を明示すること リンク先にジャンプするのはブラウザが行っていることであって、この現象はリンクする行為と直接関係がありません。 問題点を指摘されるリンクの用い方というのは、必ずと言っていい程この基を蔑ろにしたものとなっています。従って、極めてシンプルなこのリンクの質を知っておけば: 間違えた用法でアクセシビリティを低下させてしまう といった事態を自然に防ぐことができる筈です。 簡単な例を挙げます。「ココをクリック」の「ココ」という文字列をアンカーにする行為は、しばしば批判されます。しかし「なぜ間違っているのか」については個々の具体的な問題としてしか説明されません。これでは、いつまで経ってもこれと類似した間違った方法でリンクしてしまう方が後を絶たないわけです。 この「ココをクリック」の問題点は実はたった一つです。もといそう考えるべきです。

    nshash
    nshash 2007/01/29
    それとリンク先の実効性かな。例えばiPhoneを紹介するにも、米Appleの公式サイトだけでなく、それを日本語でわかりやすく紹介しているサイトにリンクするとか。
  • TRANS [hatena] - 印刷用CSSをまとめてみた。

    以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

    TRANS [hatena] - 印刷用CSSをまとめてみた。