完璧なテキストフィールドのための14のルール
アプリやウェブアプリケーションは、ユーザーからの入力がなければ何も変化しません。プロダクトデザイナー、開発者、そしてプロダクトマネージャーがそれを理解することはとても重要です。 テキストフィールドは、ユーザーが短いテキストを入力するための基本パーツです。どのようなアプリでも、個人情報の入力を求める小さなテキストフィールドを必ず目にします。 この記事では、テキストフィールドを中心にデータ入力を改善する重要な要素について見ていきたいと思います。ただし、すべてのルールには例外があるということを念頭に置いておいてください。 わかりやすさ わかりやすいテキストラベル ユーザーはどんな種類のデータをフィールドに入力するべきか知りたいと考えます。明確なラベルテキストはユーザーにそれを伝えるメインの手段になります。もちろん、アイコンを頼りにフィールドの意味を理解することもあります。例えば、ユーザーが虫眼鏡
データセルを結合してテーブルを視覚的に「よりシンプルに」したい場合 | Accessible & Usable
現時点での問題点 HTML のコーディングとしては上記の通りでよいはずですが、実際には、スクリーンリーダーでの利用において、多少の問題が残っているのが現状です。私の手元にある、ローコストなユーザーエージェント環境では、実質的に使えるのが Windows NVDA + Firefox くらいという結果でした。 音声読み上げ 結合したデータセル (「ホワイト、ブラック」) にフォーカスが当たった場合、Windows NVDA + Firefox および Mac VoiceOver + Safari では特に問題なく読み上げられたのですが、以下のユーザーエージェントの組み合わせで、問題が見られました。 Windows NVDA + Chrome headers 属性で紐づいている <th> 要素すべてが読み上げられない (最初に紐づいている「商品A」のみ読み上げられる)。 Windows NVD
モバイルにおける入力フォームデザインのためのチェックリスト
モバイルデバイス用の入力欄をデザインするときには、14のユーザビリティ要件からなるこのリストを満たしているかどうかをチェックしよう。 A Checklist for Designing Mobile Input Fields by Raluca Budiu on June 14, 2015 日本語版2015年7月10日公開 デザイン対象がWebページであれ、Webベースのアプリケーション（たとえば、SaaS）やネイティブモバイルアプリであれ、基本の構成要素の1つになるのが、ユーザーがテキストを入力する地味なテキスト入力欄である。このウィジェットは大量に利用されているので、その利用自体について、この記事で話す気はない。アプリケーションデザインにおいて、ワークフロー等の全体像に関わる問題は良質なユーザーエクスペリエンスにとって重要であり、指摘する必要のある課題がたくさんあるからである（こうした
こんなにあった！シニア対応を本気で進める『皇潤』の入力フォームが使いやすい理由 | マミオン有限会社-パソコン・数学研修、法人研修
シニアがウェブサイトを利用する際の大きなハードルの一つが、各種「入力フォーム」です。 一般的にシニアの方ほど入力に時間がかかり、また不適切な入力によるエラー発生頻度も高くなることは、ユーザビリティ業界の権威であるニールセンノーマングループのレポートも統計データを用いて指摘しています。 シニアをターゲットとしたウェブサイトの多くはこうした状況を考慮して、入力フォームのシニア対応に力を入れているところが多いのですが、その中でも私個人から見て特に完成度が高いと感じているのが、健康食品の『皇潤』で有名なエバーライフです。 今回、そのエバーライフの入力フォームで実装されている様々なシニア対応施策について、実装方法まで含めて詳しくご紹介していこうと思います。 1. 各フォームがそこそこ大きく見やすい 2. 必須項目表示がわかりやすい 3. ふりがなが自動的に入力される 4. 住所が自動的に入力される
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法
Webデザイナーでもできる、サイトのパフォーマンスをあげる5つの方法 2011-08-28 Webデザイナーが、Webサイトのパフォーマンスを重視する傾向はあまり無いように感じますが重要なことです。 Googleでは、0.5秒遅くなると、検索数が20%減少する amazonでは、0.1秒遅くなると、売り上げが1%減少する という報告もあるようです。Webサイトのパフォーマンスはコンバージョンにも影響する大切な部分。 今回はWebサイトのパフォーマンスを上げる方法を取り上げます。 パフォーマンスアップの前に 応答時間の限界 0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレ
HTML の label タグに必ずつけたい CSS
CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを
黒須正明 : NAVERアドバイザリーボード
1978年早稲田大学大学院博士課程単位取得満期退学。同年(株)日立製作所入社、中央研究所に勤務。1988年同社デザイン研究所に異動。1996年より静岡大学情報学部教授。2001年9月、文部科学省メディア教育開発センターに教授として赴任。ヒューマンインタフェース、特にユーザビリティを研究するなかから、ユーザー工学や人工物発達学を提唱するに至った。現在、学校法人放送大学 メディア活用・遠隔教育センター 教授、国立大学法人総合研究大学院大学 学長特別補佐、文化科学研究科 メディア社会文化専攻 教授 先生が研究されているユーザビリティとユーザーエクスペリエンス（UX）の違いについて、まずは、定義していただけますでしょうか。 ユーザビリティとUXという概念は、世間で混同されている傾向があります。そもそもUXとは何に関するものであるか、ということを考えるとその辺が整理されます。まず、ユーザビリティとい
NBPC ニュースリリース−「全国大学サイト・ユーザビリティ調査2008/2009」より
2008年12月22日 日経BPコンサルティング調べ ――「全国大学サイト・ユーザビリティ調査2009/2010」より―― 大学サイトの「使い勝手」を横断的に評価 3年連続で徳島大学が総合1位。2割の大学が総合スコア60以上に 日経BPコンサルティング（東京都港区、樫村弘幸社長）は、大学サイトのユーザビリティ（使いやすさ）を横断的に評価した「全国大学サイト・ユーザビリティ調査2009/2010」の結果をまとめた。調査165大学中、最も使いやすい大学サイトは、3年連続で徳島大学だった。 インターネットの普及により、多くの人にとって何らかの情報を探す際、最初にアクセスする時の第一のメディアは、Webサイト（ホームページ）となっている。大学の価値向上のためには、その価値・魅力を、受験生のみならず、在学生、卒業生、一般社会人など、大学がターゲットにする層に向けて的確に伝えていくことが重要に
User Heat : どこが読まれているか見える！無料ヒートマップ・ツール
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか？ ヒートマップツールを使う
Javari.jp : シューズ＆バッグ通販 靴、バッグ、財布なら - 送料＆返品無料
ジャヴァリは返品・送料無料のシューズ＆バッグのオンライン通販サイト。レディースからメンズまで、パンプス、ブーツ、サンダル、ス二ーカー、ビジネスなど定番とトレンドをおさえた豊富な品揃え。バッグ、財布などのファッション小物も充実。ホーム | マイページ | 注文状況 | 配送 | 返品 | お問い合わせ | ヘルプ | Javari.jpについて | 利用規約 セキュリティ | プライバシー規約 | スタッフ募集 © 2008 Javari.jp or its affiliates. All rights reserved. Javari and the Javari logo are trademarks of Amazon.com, Inc. or its affiliates.
EFO(エントリーフォームの最適化)のまとめ | ユージック
EFO(エントリーフォームの最適化)のまとめ 2009年8月7日 フォームのユーザービリティーの改善がコンバージョンレートの向上に一役買っているようです。 WEBサイトの最終的な受け皿であるお問い合わせフォームやショッピングカートといったフォームは他のコンテンツに比べて制作の際にないがしろにされがちですが、アクセス解析を見るとサイト内でもかなり上位の閲覧数のあるページとなります。 コンテンツできっちり情報を伝えて、アクションをおこしてもらってもフォームの操作性ひとつで機会損失につながることだってあります。 そこで最近ではEFO(エントリーフォームの最適化)としてフォームの改善対策が注目をあびています。 致命的な改善すべき項目 1.入力の訂正をする際に以前に入力した内容が消えないようにする せっかく入力したのに書き直しやエラー訂正の時に入力した内容が消えているとモチベーションがいっきに落ちる
消費者×企業サイト―充実したサポート提供で顧客満足度を向上させるための法則 | ビジネス目的別企業Webサイト成功の法則
今回から3回にわけて、消費者（コンシューマー）に対して企業Webサイトは何をすべきかということをお話したいと思います。今日、さまざまな業種業態の企業がWebサイトを展開しています。パソコンや家電製品、航空券、ホテルの宿泊予約、保険など、さまざまな商材やサービスがWebサイトで提供されているわけですが、言うなれば「1つの店舗」にも匹敵するWebサイトをまかされたWeb担当者の皆さんの悩みは多く、その種類も多岐にわたると思います。そこで、「サポート」「マーケティング」「ロイヤリティ向上」をテーマに、これからの3回でそれぞれフォーカスして、それらの悩みの解消となるべくお話を進めたいと思います。 Webサイトはクレームを言いやすいもし、あなたが普段使っているものやお気に入りのもの、ついこの前買ったちょっと高かったものなどに不具合があったり、壊れてしまったりしたらどうしますか？ 「こんなはずではなか
プロ仕様の無料アンケート作成ツール「QuestionPro」
グーグルを筆頭とするさまざまな企業が、無料で使えるWebマーケティングツールを提供している。SEO／SEM、LPO、アクセス解析ツールなど、ネットショップやプロモーションサイトを運営しているなら、使わない手はない。“使えるツール”だけを全部で30本、月曜～金曜日までの毎日1本ずつ紹介する。 ⇒ラインナップ一覧へ 商品やサイトに対する顧客の生の声を集めたり、自社サイトを利用するユーザー層を把握したりするには、Web上でアンケートを実施するのが一番だ。とはいえ、フォームの作成や集計作業が面倒だとなかなか実施する気にならない。そこで試してみたいのが、無料のアンケートシステム「QuestionPro」だ。 QuestionProは、米QuestionPro Survey Softwareが提供するレンタルアンケートシステム。アンケートの作成から公開、集計までアンケート実施に必要な一通りの機能を備え
建築分野に学ぶWebサイト設計――“変化するWebサイト”をどう捉えどう発展させるか | [コラム]IA視点のWebプロジェクト
前回の記事では、実際の建築プロジェクトにおいて、建築家が建築現場の指揮をとったという実例を紹介しました。今回は設計寄りの話題に移して、プロジェクトだけではなくWebの設計面においても建築分野から学べる考え方があるというお話をしたいと思います。 Webサイトは変化し続けるWebサイトは構築されてから情報が追加されたり、修正されたりしていきます。 これは情報を扱うメディアとしては当たり前のことで、たとえば、雑誌などでも創刊号でつくられたコンセプトを、その後発行する各号でより磨きをかけたり、軌道修正させたりします。 しかしながら、この「変化」は、ただやみくもに変えていけばいいのではなく、その影響範囲や必要性を検討しながら行わなければなりません。今回は、この「変化するWebサイト」についてのありかたを、情報アーキテクチャの観点から考えてみます。 こういった「変化」をWebの設計にどういった形でおり
![建築分野に学ぶWebサイト設計――“変化するWebサイト”をどう捉えどう発展させるか | [コラム]IA視点のWebプロジェクト](https://cdn-ak-scissors.b.st-hatena.com/image/square/6ab17de853b8c29cab6194a39392ba38d04eb0dd/height=288;version=1;width=512/https%3A%2F%2Fwebtan.impress.co.jp%2Fsites%2Fdefault%2Ffiles%2Fstyles%2F1200x630%2Fpublic%2Fimages%2Fweb_project%2Fweb_project_icon.jpg%3Fitok%3DqL-1gvO5){kind=icon}
12 Tips For Designing an Excellent Checkout Process — Smashing Magazine
Looking around for that checkout link, having to fill out registration forms and then being told the product is out of stock isn’t going to make your day. Spend a little bit of time fine tuning your checkout process and polishing off the user experience and you’ll be rewarded with happier customers and more sales. Here are 12 useful tips to help you do just that. Shopping online can be a great exp
インタビュー調査の極意「ユーザに弟子入り」しよう | ゼロ円でもできる！？ 省コストユーザビリティ向上術
新しいインタビュー手法「コンテキスト調査法」事前に用意した質問項目を列挙したメモを片手にユーザーと面談する――そんな従来の「インタビューする人とインタビューされる人」という関係では、インタビュアーがどんなに深堀りしたところで、ユーザーによって要約された情報や断片的な体験しか得られない。そんな情報に基づいてWebサイトを設計しても、結局「これでは使いモノにならない！」とユーザーからダメ出しを受けてしまう。 私たちがWebサイトを設計するために把握すべきなのは、まだ加工されていない生の情報なのだ。すでに分析された情報には、それほど価値はない。なぜなら情報を分析すべきなのはユーザーではなく、設計者であるあなただからだ。 そして設計者は「ユーザーの声」ではなく「ユーザーの体験」を分析するべきだ。ユーザーの声は、すでにユーザー自身が分析した結果なので、もはやあらたな発見はない。一方、ユーザーの具体的
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PC
IDEA * IDEA
http://www.designwalker.com/2009/08/usability-test.html
IDEA * IDEA
