フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
パンくず詳解 | コリス
パンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイント、クラシックなものや進化したパンくずのショーケースなどをSmashing Magazineから紹介します。 Breadcrumbs In Web Design 以下、その意訳です。 パンくず ナビゲーションは、大量のページを保持するウェブサイトで、ナビゲーション機能を拡張することができます。 パンくずの大きな有用性は、ウェブサイトの訪問者が上の階層に移動する際、少ないアクションで実現させることです。 このことはウェブサイトのセクションやページのファインダビリティ（見つけやすさ）を改善するものとなります。 また、ランディングページ（検索などから訪れた最初のページ）にも非常に効果的で、ユーザーの現在の場所を明示するだけでなく、文脈のヒントとなるインフォメーションも提供します。 What is a bre
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
クリック位置のヒートマップを作成できるオープンソースやサービス色々:phpspot開発日誌
7 Incredibly Useful Tools for Evaluating a Web Design | Six Revisions An effective web design is one in which your users are able to find information quickly and in a logical fashion. WEBデザインの評価に便利なツールが紹介されていました。 ヒートマップによってサイトのクリック位置なんかを解析できるものが色々。 ClickHeat - クリック結果のヒートマップ集計、表示用オープンソースツール よくクリックされる位置を表す、次のようなヒートマップ解析をPHP＆MySQLで設置可能みたい。なんと日本語化もされている。 オープンソースなので、自由にカスタマイズしたり、ASP側の制限なんかもなくてよさそうですね。
40分でできるホームページ診断 ～最低限クリアしたい40項目のチェックシート | Web担当者Forum
40分でできるホームページ診断 最低限クリアしたい40項目のチェックシート［訪問者目線編 2008年版］ SEO？ ユーザビリティの向上？ それ以前にしなきゃいけない「サイト作りの基本のキ」を、あなたのサイトではちゃんとできているだろうか？ 高度な施策に目を向ける前に、最低限クリアしておきたいチェックポイントをまとめてみた。あなたのサイトは何点とれるだろうか？ TEXT：編集部 協力：株式会社 環 ウェブサイト作りの基本のキSEOやユーザビリティに限らず、キーワード広告、アクセス解析、LPO、リッチインターフェイスなど、サイトの効果をアップさせる手法はさまざまあり、Web担でも詳しく解説してきている。 しかし、そういった施策にコストを割く前に、現状の自社サイトが、訪問者が「あれれ？」とマウスをうろうろさせてしまうような状態になっていないか確認したことがあるだろうか。 そんなあなたのために、
ビジターを顧客にするサイトデザイン | Moz - SEOとインバウンドマーケティングの実践情報
オンラインの、切実だけど思うように行かない話を取り上げる。サイトにやってきた人々が、サイトでどんな行動を選択するのか？ うまく計画を立てられれば、その答えは「サイト側が望むもの」になる。 サイトにビジターが集まったとする。ビジターはサイトのいろんなページを思い思いに見て回っている。さてどうするか。アクション（行動）の道筋を明確にする必要がある。ここでいうアクションの筋道とは、手取り足取り情報を案内し、ショッピングカートや登録プラン、ダウンロードなどへとビジターを導く緻密で手の込んだ視覚による刺激のことだ。 顧客とトラフィックに関する僕の記事（日本語版記事）からの続きで、今回は、ビジターがたどる明確なアクションの道筋を作るために、ページをどうデザインするかという問題に取り組む。 サイトでのビジターの行動に影響する要因として、どんなものが考えられるだろうか。 サイズ――文字サイズ、ページサイズ
ウェブサイトの品質を判断する50のチェックポイント | コリス
Search Engine Journalのエントリー「50 Questions to Evaluate the Quality of Your Website」から、あなたのウェブサイトの品質を判断する50のチェックポイントの意訳です。 50 Questions to Evaluate the Quality of Your Website アクセシビリティ ナビゲーション デザイン 内容(コンテンツ) セキュリティ その他：テクニカル その他：マーケティング 法関連 アクセシビリティ コンテンツは、ナビゲーションから独立していますか？ ウェブサイトは、クロスブラウザに対応していますか？ ウェブサイトのコードは、正しいHTML/CSSを使用して、W3Cに準拠していますか？ Altは、画像にありますか？ 画像などマルチメディアで構成された箇所に、代替となるテキストベースの要素がありますか？
使いやすいオンラインショッピングとは？ Eコマースの21のユーザビリティ
Get Elasticのエントリー「Eコマースとショッピングカートのユーザビリティ：21のベストプラクティス」の意訳です。 eCommerce & Shopping Cart Usability: 21 Best Practices 見出し、小見出し、パンくずリストを使用してユーザーがどこにいるかを示す。 スクロールしないで見える領域に、連絡先の情報と電話番号を配置する。 スクロールしないで見える領域に、商品を検索するための検索機能を配置する。 商品の検索機能には、カテゴリー検索を加えることを検討する。 商品の検索機能には、商品によって色・形・大きさでも検索できる機能を検討する。 商品ページでは、ページの総数と現在のページ番号を表示する。 関連商品は、ユーザーがカートに加えた後に注目されます。 商品の説明文は、ユーザーにも検索エンジンにも有用です。 アカウントの登録前に、ユーザーがカートに
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【前編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、ウェブサイトを使っているお客様がなぜ途中であきらめるのかというテーマで話しました。「ウェブサイトの欠陥」を大きくくくると、次の4つのどれかに当てはまります。 サイトのコンテンツ自体が足りない（価値の欠陥）価値のあるコンテンツが探しにくい（ナビゲーションが悪い）価値のあるコンテンツは見つかったがよくわからなかった（プレゼンテーションが悪い）サイトに信頼がなかったために使うのをやめ
Re:ユーザーの動き。
ちょっと前に書いた、ユーザーの動き。ですが、アレはただの自分専用メモだったので、自分だったらこーするかもって事と言葉足らずだった部分の補足エントリーです。 いわゆる、ユーザビリティテストっていうのに参加してきました。 目の前でターゲット層に比較的近いユーザがサイトを見ている様子を見るのは滅多にない経験だったので、非常に有用な一日でした。 年齢は、20代前後くらいで、普段から当たり前のようにネットやってる人は殆ど居なく、時々調べ事に使う程度くらいの方々が大半っていう状況での結果です。 だから、ターゲット層によっては、この結果はあんまり役に立たないかも知れないし、見事なまでに合致してる場合は、それなりに使える情報かもわかりませんね。 ロゴクリック＝トップページに戻るという認識は殆ど無い。 だから、リンクは張りませんって結論にはならないので、対策としてはやっぱりグローバルナビゲーションやロゴの近
第10回 トップページのFlashをググっと使いやすくする3つのポイントと心がけ | ユーザー視点のウェブデザインガイド
第10回 トップページのFlashをググっと使いやすくする 3つのポイントと心がけ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題がおきないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） アニメーションムービーであったり、動的なバナーであったり、インターフェイスそのものであったり、Flashの活用方法もさまざまだ。ところが、このFlashが曲者である。数々のユーザービリティテストやアイトラッキング調査の結果から、Flashの使い方を一歩間違えると、途端にユーザーが使えない代物になってしまったり、見向きもされなか
ユーザーインターフェイスをどう設計するか: DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 ちょっと面白そうな議論なんで参加させていただきます。 トトロの気持ちになってみましょう。彼はまず、自分の体の上から見た断面積を覆うほどの面積を持った葉っぱと、その葉っぱの面からほぼ垂直に伸びる葉柄が、ある程度の耐久性を以て結合されている物体を観察する。観察しているのはつまりこの物体の「構造」であります。これは普通の観察能力を持った人及びトトロならおそらくほぼ等しく達することができる観察成果が「構造に関する情報」として得られる。藤本的に言うなら、「構造設計情報」は、普通のセンシング能力を持った主体ならば客観的に共有できるものである。 僕が疑問をもったのは、ここで「普通のセンシング能力を持った主体ならば客観的に共有できる」構造というのは果たして純粋に物理的、形態的な構造なのだろ
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ | Web担当者Forum
第9回 より見てもらえるようにユーザーを“そそる”、ワンランク上の画面構成のコツ 現実の店舗や窓口では、目の前にいるお客が困っていればすぐにわかるし、同じトラブルが重なれば問題が起きないように施策をとる。しかし、ウェブサイトを作っているときにはお客は目の前にいないし、公開後にお客の対応をするのはウェブサーバーやスクリプトという機械だ。そのため、現実の商売では当然のように行っている接客ができない、いや忘れてしまってはいないだろうか？ 今木 智隆（株式会社ビービット） 限られた画面内でユーザーの目線を 効果的に誘導するテクニックを紹介「ファーストビュー」、すなわち「ユーザーがサイトを訪問したその瞬間に画面に表示される領域」は、画面設計・デザインにおいて、常に意識しなければならないポイントの1つだ。限られたスペースの中で、いかにコンテンツに優先度を付け、効果的に構成するか、かなり悩まれた経験のあ
複数カテゴリ検索のインターフェース (ユーザビリティ実践メモ)
Webサイトの検索機能で、「テキスト」と「画像」、「ニュース」と「製品情報」など、複数のカテゴリを切り替えて検索できる機能を提供しているものがあります。今回はその切替の方法について考えます。 ある金融情報サイトで、企業名でサイト内検索を行ったところ、「記事」カテゴリでの検索結果が0件と表示されました。 このとき、結果が0件だったことを認識したユーザは、ページ上部のタブをクリックして「株価」に切り替えました。このとき 自分がクリックしたタブが切り替わる（アクティブなタブが濃い色になる） という変化で、ユーザには自分が別のカテゴリに移動したことが伝わりました。 しかし、検索結果部分の見た目に変化がなかったため、ユーザは「どちらのカテゴリにも自分の求める情報がない」と判断して、このサイトを立ち去りました。 このページではタブ切り替えだけでは再検索されず、新しい画面で改めて「検索」ボタンをクリック
ウェブサイトを使いやすくするための43の法則
R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ユーザビリティやセンスの良さにグッときた8つのサイトデザイン | Web担当者Forum
ユーザー視点のウェブデザインガイド コーナーの記事一覧 | Web担当者Forum
『「マウスオーバーでリンク先のサムネイルを表示」は導入してほしくない - ARTIFACT@はてブロ』へのコメント
https://www.openvista.jp/archives/note/257/?257/
「ペルソナデザイン」それはあなたのサイトを「ユーザー志向」にする最強の味方 | 企画書を光らせる珠玉のキーワード
