We'll be back soon! Our site is currently undergoing maintenance. Please check back later.
usabilityに関するpoppenのブックマーク (62)
-
poppen 2012/01/20
-
サイトに来た人のブラウザ画面をリアルタイム閲覧できる「SiteSupport」 - GIGAZINE
訪れたユーザーがページのどこをどう見て、どのように移動し、どのあたりで詰まるのか、そういった各種行動を把握するためにユーザーのデスクトップ自体をリアルタイムにリモートデスクトップっぽく見ることを可能にするというのがこの「SiteSupport」です。 SiteSupport - Remote Desktop for Web Apps http://sitesupport.com/ ブラウザのセッションを共有し、特別なソフトウェアをインストールする必要性は一切無し。JavaScriptのウィジェットをサイトに設置すればユーザーのデスクトップをリモートで見せてもらう仕組みを簡単に導入することが可能であり、APIが提供されているので自分の好きなようにカスタマイズすることも可能、全部のコネクションはSSL経由であるためセキュリティも万全です。 実際にどのような感じで動作するかというのは以下のムービ
-
ユーザビリティの原則と現場で使えるユーザビリティテストの方法
今回は、Web制作の現場でも使えるようなユーザビリティテストの方法をご紹介します。 アクセス解析を使ったものではなく、あくまでもサイトの構造の問題点を洗い出す方法です。 そのため、それにいたる細かい基本部分についてもかなり大胆に触れてます。 試験をする前に、どのような観点からサイトを見て行く必要があるのかと言うユーザビリティの原則から、試験方法、試験の結果からの問題解決にむけて、私がこれまで行ってきている仕事の一部をご紹介します。 Webユーザビリティについて：目次 書き出したらとまらなくなりましたが、これでも結構情報削りすぎたかなぁというのはあります。 私の仕事について方法を学べばユーザビリティテストは出来る最大の原則はユーザーに考えさせない事たった一人でも試験をするほうが100倍ましになるユーザーの視点を理解する箇所法則1「長いテキストを最初からよし見ようとは思わない」法則2「長たらし
-
文字サイズや文字スタイルを変更できるリンクを追加するプラグイン » Tips Community
« 3 月 2009 4 月 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 文字サイズや文字スタイルを変更できるリンクを追加するプラグイン 11 月 5th, 2006 WordPress Plugins WordPress ではテーマテンプレート（style.css）にて文字サイズや文字のスタイルを設定するのが一般的ですけど、「K2」などの人気のテーマを適用すると意外とデフォルトでは文字サイズが小さくて見づらかったりします。 style.css にて大きな文字サイズを指定しておけば済む話ではありますが、文字サイズ小さい、もしくは文字スタイルが見づらいという方のみ、文字サイズや文字スタイルを変更すればいいのではないか、ということで文字サイズや文字スタイルを変更するリンクを簡
-
キャズムを超えろ！ - 団塊～シニア層向けのWeb設計 やっちゃいけない10のＵＩ
一時期パソコン教室の講師をやっていたことによる経験と、昨今Webサービス運用にあたって中高年層からのクレームなどを自分なりにまとめた結果として、50代以上のユーザに対するWebサービス＆PCアプリケーションのUI設計における以下10のTIPSを公開してみたいと思う。...といってもたかだか10個で収まる簡単な話ではないので、思いついたら都度追加して行きたい。 ID，ニックネームを考えさせてはいけない。半角英字開始限定は論外 IDやニックネームが思いつかない方が多い。これはシニアに限らず、ITリテラシーがそれほど高くない若年層についても言えること。作る側の人間も「過去にWebで使ったID,Nicknameは全て使っちゃダメ。何か新しいのを考えて入れてみて。」と言われると結構悩んじゃうもの。それと同じ状態に陥ると思っていただけるとわかりやすい。「IDのかわりに電話番号でもいいですよ」というと結
-
【海外事例に学ぶ】フォーム入力におけるリアルタイムエラー表示のポイント (ユーザビリティ実践メモ)
今回は、A List Apart掲載のルーク・ウロブレウスキ氏(※)による記事、“Inline Validation in Web Forms”をご紹介します。当記事のテーマは、フォーム入力中のリアルタイムエラー表示（インライン・バリデーション）方法の最適化についてです。 まずはフォーム入力におけるリアルタイムエラー表示がどのようなものか、以下のデモをご覧ください。 【動画】�：フォーム入力におけるリアルタイムエラー判定デモ 上記のようなリアルタイムエラー判定のできるフォームについて、ウロブレウスキ氏は21歳から49歳の22人の被験者でユーザ調査を実施しました。 すると、通常の入力フォームと比べ、入力の成功率が22%向上し、エラー率が22%減少、入力時間も42%減少したとのことです。さらに、調査結果からは次のような2つの知見が得られています。
-
入力フォームのユーザビリティ&アクセシビリティ
入力項目の説明 入力項目の説明は、フォームの前に書くべきです。フォームの後に解説があると、ユーザが音声ブラウザやコンパクトブラウザ等を利用していた場合、入力した後に説明に気づくことがあります。 悪い例× メールアドレス
-
「常識的なweb UI」で気になっているもの | おごちゃんの雑文
これは本当にわからないんで、識者に教えて戴きたいところなんだけど、とりあえず自分の主張と共に疑問を書いてみる。 疑問は大きく2つあって、 パスワードは伏せ字でなければならないか 「確認画面」は必要か ってこと。このどちらもが「常識」として使われているのだけど、どうもうっとおしい気がしてならない。 パスワードをtype=”password”にしたり、そういったラベルをつけたりすると、パスワード覚えてくれていたり、日本語入力システムが一時的にOFFになったりと便利なのはわかる。また、パスワードを「後ろから見る」攻撃から避けるには、伏せ字にしておくのが有効だというのもわかる。 とは言え、パスワード覚えてくれたりとか、日本語入力システムを一時的にOFFにするとかってのは、言うなれば「オマケ」であって、本質は「伏せ字」ってことだろう。この伏せ字、「後ろから見る攻撃」には有効なのだけど、 打ち間違いに
-
-
ユーザを混乱させない表組みのコツ (ユーザビリティ実践メモ)
ウェブサイト制作において、多くの情報をいかに整理してユーザに伝えるかは重要なポイントの1つです。よく使われる方法として表組みがありますが、今回は実際の事例をもとにしたケーススタディを通じて、ユーザを混乱させない表組みのコツをご紹介します。 表１はよく見かける表組みの例ですが、実際にユーザの立場に立ってこの表を使用してみると、いくつかの問題点があります。 同種の情報をユーザは区別できない 表1の問題点として、 日付という同種の情報を多く掲載しているため、ユーザには各情報が何の日付を意味しているのか区別できず、分かりにくい列数が多いために、セル内に折り返しが発生し、読みにくい ことが挙げられます。 特に、1つ目の問題点は、表が縦に長い場合にユーザを混乱させる要因の一つになります。なぜなら、画面サイズに収まりきらないほど表が縦に長い場合、下にスクロールしていくと「開催日」などの項目名が画面から消
-
Bibliwoで延々と図書館対応してて思ったこと - やればできる子の日記
図書館のWebサイトは作っておいて欲しい。 Webから蔵書検索ができていて欲しい。 ISBNで蔵書検索ができていて欲しい(できないところは結構多い)。 検索するだけでセッションとか使わないで欲しい。 検索するだけでRefererチェックとか入れないで欲しい。 ISBN内に'-'を入れなくても検索できていて欲しい、というかせめて'-'の位置は正規化しておいて欲しい(昔の中野区、渋谷区の図書館は、'-'の位置が書籍によってデタラメで、'-'の位置を何パターンか変えて検索しないといけなかった)。 クエリパラメータの順番を変えても動くようにして欲しい(というか順番に依存して作る方が難しくないか。自力でクエリ部を解析してるのか)。 検索結果にGETメソッドでアクセスできていて欲しい(POSTメソッドの方がかなり多い)。 書籍の個別ページにGETメソッドでアクセスできていて欲しい(POSTもかなり多い
-
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄い:phpspot開発日誌
ボックス要素をレンガ状に綺麗に整列させる「jQuery Masonry」が凄いです。 普通、高さの違うボックス要素を float とかで並べると次のような、どう見ても見れない崩れたデザインになってしまいます。 が、今回紹介するjQuery Masonry を使うと、次のように、綺麗にテトリスっぽく整列できてしまいます。 ↓↓↓↓↓↓↓↓↓↓ これを実現するのに必要なJavaScript コードは以下のように数行。これで実現可能です。 $('#primary').masonry({ columnWidth: 100, itemSelector: '.box' }); この仕組みを使ってブログ等を表示するともっと面白いことになります。 新聞っぽくなりましたね。 ブラウザ幅を変える事でいろいろな見え方になるのも面白いです。 以下のエントリを参照してください。 jQuery Masonry ? B
-
ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 - Feel Like A Fallinstar
Home > UI（インターフェース） > ユーザーインターフェースの検証データを公開している「ABtests.com」は、ウェブマスター必見事例の宝庫 Older ウェブの位置づけが上がるにつれ、数値的な検証がどんどん進んでいます。 ただ、その割りにどんな方法で数字が上がった、という具体的な事例がまだまだ世の中に出回っていないのも事実。 そんな中、A/Bテストの特化してインターフェースの検証事例を公開しているサイトがABtests.com」です。 インターフェースの比較検証結果が数値でわかる http://www.abtests.com/ ABtests.comの中身は、はまさに読んでそのまんまの内容。 トップページから事例が豊富に掲載されています。 例えば・・・ このフォーム、左と右でどちらが通過率が良いと思いますか？ 答えはこちらのページにて。 なかなかここまで数字で結果を出してくれ
-
サイトの印刷用ページをLightbox調に表示できるボタンとブックマークレット（WPプラグインあり）
印刷用ページをCSSで制御するのも良いのですが、個人的にはLightboxのように、その場に開いても良いのではないかと感じます。 今回は、設置が簡単な上に見た目もクールな印刷ボタンをご紹介。ただし印刷は問題ないものの、PDF生成ボタンからは日本語が文字化けします。これは残念。 組織のマインドマップツールをマインドマイスターにすべき理由 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!! 印刷用ページをクールにその場表示する「Print Friendly」「printfriendly」は、ブログやサイトの印刷用ページをLightbox調にその場ポップアップさせてくれるサービス。 ポップアップ画面には印刷ボタンを備え、画像を表示しない設定もできるので非常に便利です。 ※PDFボタンからPDFを生成すると日本語が文字化けします。 早速使ってみました ↑このようにその
-
[JS]ブラウザのサイズに合わせて画像サイズを最適化するスクリプト
maxImage demo 上記のデモでは、右側の画像がブラウザのサイズに合わせて、はみでないようにリサイズされて表示されます。 デモは他にも多数あり、下記は背景画像をブラウザのサイズに合わせて最適化します。
-
RedLine Magazine : jQueryでパンくずをうまくスペースに収める
jQueryでパンくずをうまくスペースに収める jQueryとプラグインを使ってパンくずを限られたスペースにうまく収めるネタ。動きもいい感じ。 >>CompareNetworks jQuery'd Bread Crumb - jBreadCrumb This collapsible breadcrumb was developed to deal with deeply nested, verbosely named pages.って書いてある通り、深い階層になってて、すごい長い名前が付けられたページのパンくずに対応できるようにって趣旨みたい。 >>サンプルページ 英語だとこのままでいいんかもしれんけど、日本語だとデフォルト指定の状態で隠れてる状態が最初の１文字目の半分くらいしか見えないから、jquery.jBreadCrumb.jsの中の最後のいろいろ指定する部分「previewWidt
-
ProjectDD
最果タヒさんがつむぐ「詩になる直前」の言葉が並んでいるのですが、むしろ展示デザインを担当された佐々木俊さんとの「詩や言葉の、無限大の表現方法を探るインスタレーション展」と言った方がしっくりくる…それくらい言葉の表現方法のバリエーションに触れることができる展示になっています。
-
コンバージョン率がたぶん0.001%な購入フォーム - inkdesign - html,css,webのあれこれ
ひさびさにカッとなってしまった。 雑貨紹介のブログで紹介されていた「ショコラギモーヴ」というスイーツを逆バレンタインノリで買おうとも思い、そのストアで購入手続きをしたわけなんですが。 これがひどい。ほんとひどい。 たいていのECサイトでの購入手続きには慣れている方だと思うけど、これは歴史に残るひどさ。 ここで僕がいろいろと書くよりも試してもらうのが良いかと思うのですが、僕の経験した中でイーッ！ってなった点をいくつか。 （ちなみに検証はfirefox.3.x） 購入する気を無くす点 町丁目番地/ビル・マンション名が（全角） ここがんばって！全角も許してください！ ヨモツネットさんのところのこういうJSとか、サーバ側でもうちょっとがんばってください＞＜ できればハイフンとかの処理も。 配送先指定として「上記の住所に送る」にデフォルトでチェックが入っていない） 内容的にギフトに使えそ
-
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
-
公式Twitter
- @HatenaBookmark
リリース、障害情報などのサービスのお知らせ
- @hatebu
最新の人気エントリーの配信
キーボードショートカット一覧
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Copyright © 2005-2025 Hatena. All Rights Reserved.
設定を変更しました