ユーザビリティの高い、使いやすいフォームを制作するための12のポイント
Li'l Engineのエントリー「ユーザビリティフォームのためのチェックリスト」の意訳で、ユーザビリティの高いフォームを制作するための12のポイントの紹介です。 Checklist for Usability Forms 不明な箇所は英文のまま記載してましたが、皆様の協力により3,5を和文にしました。 フォームは正しく入力できるように、可能な限り簡潔に。 フォームには、必要なインフォーメーションを含める。 タイトル：なんのためのフォームか フォームのヘルプ キャンセル(中止)の選択肢 入力すべき項目は、多くしない。 重複する入力項目は設置しない。 フォームの公開後しばらくしたら、収集したデータが実際に使用されているかチェックする。利用されていないものがあれば、収集しないようにする。 長いフォームは紛らわしいので、分ける。 タスクごとに分ける それぞれのページごとにチェックをし修正すること
ユーザーの視線が丸裸になるアイトラッキングテストで分かる驚愕の事実
以前からシニアのIT操作に関する鋭い洞察のブログで注目していたマミオン有限会社にお邪魔してアイトラッキングテストとユーザビリティについてお話をうかがってきました。 日本アフィリエイト協議会主催のセミナーは高田馬場のマミオン有限会社オフィスのセミナー室にて行われました。 前半は景品表示法と薬事法のワンポイント講座が行われました。 後半はマミオンの佐藤純さんによるアイトラッキングテストのセミナーです。 内容は資料など詳細は非公開とのことなので、私が感じたことをお伝えしたいと思います。 詳しく知りたい方はマミオン公式ブログの記事が参考になります。 人気の記事です： ★アイトラッキングなら一目瞭然！新「はてなブックマーク」が何となく見づらい理由 ★実例で納得！シニアが使えないサイトの例 ★シニアを引きつける！購買意欲を高めるキャンペーンサイトの黄金パターン ユーザビリティって何？ ある目的を達せさ
【UI調査】iOSとAndroidのスイッチ 7種類比較
最近、アプリオでは、スイッチのユーザビリティについての記事を2本掲載した。 【|と◯】知ってる？ アプリや電機のスイッチと電源ボタンの記号の意味 【UI調査】スマホ・アプリのスイッチの意味をユーザは理解できているのか？ いずれの記事も反響が大きく、スイッチのユーザビリティ（使い勝手）に対する読者の関心が高いことが分かった。 iOSとAndroidのスイッチ比較 そこで、一連の記事をまとめる観点から、アプリオ編集部がスマホユーザにアンケート調査を実施した。有効回答数は80件（7番のみ40件）。 実際にiOSやAndroid OSの設定画面やアプリ内で使用されているスイッチの画像を見せ、「スイッチを左に動かした場合」の結果を3つの選択肢（ON・OFF・分からない）の中から選んでもらった。 各スイッチ画像に関して回答者に与えた情報は、スイッチの画像のみ。まずは、同じ条件で、以下の結果を確認してほ
ユーザビリティ実践メモ
スマートフォンとともにタブレット端末の普及率はますます上昇し、最近では街中や電車などでタブレット端末を利用している人を多く見かけるようになりました。 この記事の続きを読む
» スマートフォンサイトのユーザビリティを下げるアンチパターン | Webnoborder
モバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金からモバイルデザインパターン― ユーザーインタフェースのためのパターン集を読んで、スマートフォンサイトのアンチパターンも作りたいと思ったのがキッカケで作ってみました。 独断と偏見で評価しています。 反応エリアを探させるアコーディオン 「お金から探す」周辺のリストがアコーディオンになっていますが、テキストの部分をタップしても何も動作しません。 プラスアイコンの部分をタップしないと反応しないのです。 このようにタップ領域がユーザの意識と違う場所に設定されているのは、ユーザビリティに問題があるといえるので改善が必要でしょう。 参考サイト スマートフォンサイトにお
MdN Design｜総合情報サイト
PC、ケータイ、スマートフォンなどでアクセスできる会員制オークションサイト。会員数は100万人以上を誇り、いつでもどこでも楽しめる利便性から日々活発に取引が行われている。 急速に求められ始めたWebサイトのスマートフォン対応。狭い画面とタッチ操作という独特なデバイスに必要なUI 設計とはどのようなものだろうか？ スマートフォン向けサービスを数多く展開するDeNAでディレクターを務める鈴木哲之さんに、オークションサイト「モバオク」での取り組みをうかがった。 取材・文／久保靖資 取材協力／鈴木哲之（株式会社ディー・エヌ・エー） テスト等を通じたUI／UX設計への取り組み 一般的なコーポレートサイトでもスマートフォンでの閲覧を期待して最適化が要件に含まれるようになるなど、Web制作の現場でスマートフォンへの対応を求められるケースが急速に増えている。限られた画面内でコンテンツをどのように見せるのか
Windows 8 — 初心者にもパワーユーザーにも期待はずれのユーザビリティ
見えない機能、低下した発見しやすさ、二重の環境による認知的な負荷、シングルウィンドウのUIからくる能力の低下、低い情報密度。ひどいものだ。 Windows 8 — Disappointing Usability for Both Novice and Power Users by Jakob Nielsen on November 19, 2012 日本語版2012年12月6日公開 先日発売されたWindows 8とSurfaceタブレットでMicrosoftはユーザーインタフェース戦略を転換した。フィーチャークリープ訳注と言えるくらい、強力なコマンドを重視するGatesが主導した伝統的GUIスタイルからMicrosoftは軟化したが、今度は必要な機能を隠しながら、大きな色とりどりのタイルで画面を覆いつくし、ユーザビリティを妨げている（訳注： フィーチャークリープとは、電子機器やソフトウェ
ショッピングカートでは、クレジットカード情報の入力エリアをハイライトするとかご落ちを防げる
[対象: 全員] コンバージョン率を上げるために簡単にできる改善策を今日は紹介します。 クレジットカードの入力エリアを“視覚的に補強”する方法です。 Baymard InstituteのE-Commerce Checkout Usabilityで説明されていたやり方になります。 A（左）とB（右）を比べてみてください。※クリックで拡大 違いに気付きますか？ 2つ違ってますね。 背景色 セキュアバッヂ クレジットカードを入力するエリアだけがほかのエリアとは背景色が変えられていています。 またGeoTrust（ジオトラスト）のセキュアバッヂが置かれています（Aではページ右上に置かれているがBでは近くに移動してある）。 たったこれだけのことでセキュリティに対するユーザーの安心感が増すんだそうです。 SSLを使っていれば技術的にはクレジットカード情報を含むすべての情報は暗号化されたうえで送信されま
mixiのiPhoneアプリはここを改善すべきだ
mixi, Twitter, Facebook, Google+, Linkedin 2011年12月最新ニールセン調査 日本ではまだまだページビューや滞在時間においてはmixiが他のSNSを引き離しているようですが、上記リンク先でも言及されているように、それはあくまでもPCブラウザ経由でのサイトアクセスに限定した場合のようです。モバイル端末からのアクセスを含めるとどういう結果になるのか気になるところです。 …という流れで、最近mixiが公式でリリースしているiPhoneアプリを触ってみたのですが、これは現状では課題だらけだと思います。AppStoreでもサードパーティー製のmixiビューアーより評価が低い状況で、同社のスマートフォン展開に対する意識の低さが浮き彫りになっているように感じます。少なくともデザインやUIのクオリティに関しては、海外の競合SNSに大きく引き離されてしまっているの
ユーザビリティやリピータの為に結構大切な訪問済みリンク（a:visited）の色 | 無料SEO対策のススメ
ユーザビリティやリピータの為に結構大切なa:visitedの色 皆様、訪問済みリンク「a:visited」の色はどうしていますでしょうか？ 検索サイトの検索結果やポータルサイトでは紫色になっている事が多いですが、企業サイトやブログなどではa:linkと同じになっているケースも多いと思います。 以前から感じていた事ですが、ユーザビリティやリピータのことを考えるとa:visitedの色は、a:linkとは異なる色を指定した方が良いのではないでしょうか。 そうしている方にとっては今更感満載な内容ですが、このたび管理している全てのブログでa:visitedの色を変更してみました。 a:link、a:visited、a:hover、a:activeの意味 Web制作をしている人にとっては当たり前の知識ですが、無料ブログなどでCSSを修正したいという方の為に一応意味を載せておきます。 a:link ・
中小企業のウェブサイトで陥りやすい5つの落とし穴とアドバイス
Top 5 Web Design Mistakes Small Businesses Make [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに 1. 役に立たないナビゲーション 2. ゴールが不明瞭 3. カラーとコントラスト 4. 分かりにくいコンテンツ 5. 情報の詰め込み過ぎ はじめに もし、あなたが中小企業のオーナーであるなら、あなたのウェブサイトはあなたの会社の中枢であり、マーケティングとブランディングにおける極めて重要なパートでもあります。 見込みのある顧客がサイトのコンテンツを目的にあなたのサイトを訪問します、それはあなたの会社がどのように見えるかを意味しており、サイトのアピアランスとユーザビリティは成功への重要なポイントとなります。 しかしながら、サイトのデザインを間違ったものにしてしまうと、あなたのビジネスに悪影響を与えてしまうことになります。ここにあ
ハイパーテキストリンクのスタイル大全
ハイパーテキストリンクをデザインする上で知っておきたい基礎知識から、実用的なチップス、やってはいけない間違いなど、すぐに役立つテクニックをSmashing Magazineから紹介します。 The Definitive Guide To Styling Web Links 以下は、各ポイントを意訳したものです。 はじめに ハイパーテキストリンク（リンク）はウェブページをつなぎます。Web Standardistasによると「ハイパーテキストリンク無しではウェブはウェブではなく、それはただ別個の、無関係なページのコレクションでしょう」と言っています。 我々はページにたどり着いたら、ある種のリンクをクリックする必然性があります。 1. CSSのセレクタと擬似クラス リンクをスタイルする時には、ユーザーはページを流し読みすることを忘れないでください。そのため、リンク箇所はしっかりと明示すべきです
E-Commerce Checkout Usability: An Original Research Study – Baymard Institute
Research Topic Cart & Checkout Usability Research 70% of all e-commerce visitors abandon their shopping cart. Why? At Baymard we’ve tracked the global average cart abandonment rate for 14 years, and it currently sits at 70.19%. After e-commerce sites have invested vast resources in “first in mind” strategies, Pay Per Click campaigns, beautifully crafted homepage imagery, faceted search logic, etc.
アイコンデザインにおける10の間違い | CREAMU
アイコンデザインで注意するポイントが知りたい。 そんなときにおすすめなのが、『10 Mistakes in Icon Design』。アイコンデザインにおける10の間違いだ。 以下にご紹介。 アイコンのデザインの差があまりない アイコンをセットで作る場合、見分けられないデザインはよくない。↓はMac OS Xのユーティティーアイコン。見分けがつきづらく、間違って起動してしまう。 一つのアイコンに要素が多すぎる アイコンの中の要素は少なければ少ないほどよい。要素が多いと、小さくしたときに判別しにくい。 不要な要素を含んでいる 要素を少なくし、メッセージがストレートに伝わる要素だけを置きたい。↓はDBアイコンの例。DBであることがわかっているなら、後者の例にした方がわかりやすい。 アイコンセットに統一性がない アイコンセットは、カラースキーム、遠近感、サイズ、描画技術を統一すべき。 小さいアイ
ウェブ戦略としての「ユーザーエクスペリエンス」―5つの段階で考えるユーザー中心デザイン／Jesse James Garrett：DESIGN IT! w/LOVE
不確実な時代をクネクネ蛇行しながら道を切りひらく非線形型ブログ。人間の思考の形の変遷を探求することをライフワークに。 「Webユーザビリティ再考」で、Jesse James Garrettの5 Planes Modelを紹介しましたが、今日はそのモデルを本人が詳しく解説している『ウェブ戦略としての「ユーザーエクスペリエンス」―5つの段階で考えるユーザー中心デザイン』をご紹介。 読んだのはたぶんもう1年以上前になりますが、この考え方は非常にわかりやすいし、理にかなっているなと今でも感じています。 なので、ユーザビリティを考える際にもこれをベースにって思ったわけですが、よくよく考えてみれば、ユーザビリティだけでなく、アクセシビリティもそうですし、Webでのコミュニケーションと広く捉えても、はたまた、SEOを含むファインダビリティを考える際でも、「ユーザーエクスペリエンス」を軸としたWebサイト
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
UIにも工夫がある、クリエイティブなオンラインショップサイト集