入力フォームのプレースホルダーを使ってはいけない
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
ユーザビリティコラム：Jakob Nielsen博士のAlertbox
スクロールフェードの基礎 4月11日 読了までに約14分 スクロールフェードがユーザブルというよりも気が散るものになるかどうかは、その持続性、応答性、ページ上の要素への控えめな適用といった要素に左右される。このデザインパターンを正しく用いれば、ブランド認知を向上させ、ページの読み込みを最適化し、コンテンツをより理解しやすくすることができる。 このコラムについてUIデザイン・ユーザビリティ・UXデザインについて、その道の第一人者・ヤコブ・ニールセン博士（略歴）ら米Nielsen Norman Groupのメンバーが実例を交えて洞察するコラム『Alertbox』。その日本語訳を許可を得て公開しています。 デザインサイクルの各段階でアンケートを実施する方法 3月29日 読了までに約7分 ほとんどのUXアンケートは、デザインサイクルの最後の「耳を澄ます」フェーズで実施される。しかし、アンケートには
Web登録フォームで半角や全角などの入力を強いる理由を考えてみた
及川卓也 / Takuya Oikawa @takoratta 良く言われるが、この欄は全角で入力などと利用者側に強いるのはどうしてなんだろう。システム側で簡単に変換できるのに。前考えたのは利用者の入力したものを受付システム側で勝手に変更することに法的なリスクがあるのではないかということだったけれど、確認UIを出せば済むのでは？ 2011-01-22 09:40:49
フォームのフリガナを自動入力させるAutoRuby.js | ホームページ制作・運営のヒント
<script Language=”javascript” src=”http://ad.jp.ap.valuecommerce.com/servlet/jsbanner?sid=2456113&pid=877160106″></script><noscript><a href=”http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2456113&pid=877160106″ target=”_blank” ><img src=”http://ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=2456113&pid
ユーザーの知識は低いレベルで停滞する
学習というのはたいへんな作業なので、ユーザーのやりたいことではない。その結果、彼らはユーザーインタフェースの探索をすることもなく、ほとんどの機能について知らないままだ。 User Expertise Stagnates at Low Levels by Jakob Nielsen on September 28, 2013 日本語版2013年11月25日公開 コンピュータシステムを長期間利用しているユーザーでも、知っていて使っているのは利用可能なコマンドや機能のほんの一部だけであることは多い。デザインのユーザビリティが優れていれば、ユーザーはシステムを利用しはじめて間もなく、かなり容易に一連の基本機能を理解する。しかし、その後、彼らは伸び悩み、それ以上はたいしてスキルが上がらない。システムを頻繁に使っているユーザーですら、年にわずか1つか2つの新しい知識を身につけられるようになるまでには何
Webサイト上でのユーザー体験を高めるために必ずおさえておきたいユーザービリティーチェックリスト デザイン会社 ビートラックス: ブログ
ここ数年でのテクノロジーの進化とデバイスの多極化により、WebサイトなどのUXデザインを行う際に気をつけなければならないポイントが非常に多くなった。 特にユーザビリティーが結果に大きな影響を与えるサービスにおいては、どのような内容のプロダクトであっても高いユーザーエクスペリエンスを達成する為に普遍的にクリアしなければならないポイントが幾つか存在する。 品質管理とコンバージョンアップの実現を目標に、10の項目ごとのチェックポイントのチェックリストを作成してみた。 サービス公開前に必ず確認し、全項目のクリアを目指したい。 1. ユーザーエクスペリエンス関連ユーザー登録する際にユーザーになにかしらの価値を提供 例えば登録ボタンは単純に “登録” ではなく、”無料トライアル申し込み” とした方がユーザーにとってのメリットが伝わりやすい。また、極力無駄な登録はさせない。 料金/費用を分かりやすく表示
直感的なUIとは予想した通りの結果が得られるもののこと - ネコメシCEOブログ
UIデザインの参考に！斬新で美しいUIをもったiPhoneアプリまとめ という記事では、紹介しているアプリのことごとくに、「ボタンが無くてシンプル」「直感的で使いやすい」などと書いてあるが、ClearのUIみたいなのを「誰でも直感的に操作できる」などと評価する理由がさっぱり理解できない。 こういうUIは基本的にどれも玄人向けで、操作がジェスチャの塊になってしまっているものは、それが使いこなせる俺カッケー感が高くて自己顕示欲を満たしやすい。"そのように操作できるUIデザイン"が気持ちいいのではなく、"そのように操作している自分"が気持ちいいの間違いなんじゃないだろうか。 ボタンが一切なくてシンプルだと気持ちがいいUIになるだって？ そんなわけがあるはずない。現実世界はボタンが一切なくてシンプルなUIで溢れているし、そのおかげで毎日いろんな場面でいらいらさせられている。たかが1個のレバーを上げ
Breaking down Amazon's mega dropdown
The hover effects on Amazon’s big ‘ole “Shop by Department” mega dropdown are super fast. Look'it how quick each submenu fills in as your mouse moves down the list: It’s instant. I got nerd sniped by this. Most dropdown menus have to include a bit of a delay when activating submenus. Here’s an old Khan Academy dropdown as an example: See the delay? You need that, because otherwise when you try to
パララックス効果で魅せる縦に長いウェブページ | Accessible & Usable
公開日 : 2012年11月26日 (2015年12月14日 更新) カテゴリー : ユーザビリティ / アクセシビリティ 最近、パララックス効果 (parallax scrolling effect) を採り入れた、縦に長いウェブページが注目を集めています。以下の例のように、ページをスクロールしてゆくと、それに呼応して複数の視覚要素が個別に動くことで視差を作り出し、奥行き感や動きを演出する、というものです。 実際の動きを動画キャプチャしてみました。クローズドキャプション (字幕) で補足説明 (動きの解説) も用意してあります。 Anna Safroncik (http://annasafroncik.it) この効果をうまく用いれば、ユーザーの関心を惹きつける (エモーションを刺激する) ことができ、一定時間、ページに滞留してもらえることが期待できます。面白い視覚効果であれば、行きつ戻
優れたユーザビリティを実現する25の基本概念
LVMH Watch & Jewelry PR&AD Manager/Assistant Manager/Specialist
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合に
「電子書籍」に向く人、向かない人
百聞は一“読”にしかず、論ずるより“読”むが易し。「電子書籍」の未来は、その読者によってこそ語られるべき――。売る側の論理ではなく、読み手の論理で「電子書籍」を考える本連載。今回は、「電子書籍」に向く人、向かない人を考えます。 前回述べたように「電子書籍」はそれ自体すごく楽しいので、私も多くの人に勧めたいという気持ちはある。とはいうものの冷静に考えてみると、残念ながら現状の日本の「電子書籍」サービスは、まだまだ万人に手放しで勧められるような代物ではないというのが正直なところ。 さまざまな「電子書籍」サービスが乱立し、どこで何が買えて、何ができるのか（あるいは、できないのか）、日々追いかけていても全容を把握するのはなかなか難しい……というのが実情。どこもサービスのあり方を手探りで模索しながら日々改善している過渡期にあり、読者が望んでいることからすると、あちらを立てればこちらが立たずだったり、
ユーザーが説明文をあまり読んでいないことが分かるヒートマップとその対策
ウェブデザイナーやウェブアプリの開発者は利用しているユーザーにメッセージや指示を送る際に「文字」に頼りすぎる傾向があります。文字による説明は簡単ではあるものの、アプローチの仕方を間違えるとユーザー側は読まずに無視しがちになり、台無しになってしまいます。 そこでInvitelyのヴァイスプレジデントであり、開発ディレクターでもあるMichael Woloszynowicz氏がどうすればいいかをヒートマップ付きでわかりやすく解説しています。 Web 2.0 Development and Business Lessons: Your Users Won't Read http://www.w2lessons.com/2012/01/your-users-wont-read.html まずInvitelyというウェブサービス自体がドキュメントの共有などのコラボレーション作業のために利用者を招待す
Alertbox: ブログのユーザビリティ：デザインの間違いトップ10（2005年10月17日）
ブログは既存ユーザに焦点を合わせすぎていて、重要なユーザビリティの問題を、ないがしろにしている事が多く、サイトを理解し、著者を信頼することを、新規読者にとっては困難にしている。 Weblog Usability: The Top Ten Design Mistakes by Jakob Nielsen on October 17, 2005 ブログはウェブサイトの一種だ。そのため一般的なウェブサイトのユーザビリティガイドラインや、今年のデザイン間違いトップ10 の対象にもなる。しかしながら、ブログはウェブサイトの中でも特殊な部類のものだ。ブログには特徴があり、それ故に特有のユーザビリティ問題を抱えている。 ブログの素晴らしい利点の1つは、本質的に「ウェブデザイン」をしなくても良くなるということだ。文章を書き、ボタンをクリックすると、インターネット上でそれが公開される。ビジュアルデザインも、
想像がつかないから、興味が湧かない。 - シニア現場の隅っこ。was使いやすさを考えてみる。(アクティブシニア・シルバー層の現場から)
人は、想像したことしか、やることができない。 想像がつかないものは、行動に起こせない。 と、最近思う。 子どもたちが、大人の姿を見て、大人とは、仕事とはこういうものだ、こういう大人になる、こういう大人にならないと考えるように（なので２世、３世となる人が多いのだと思う。親の背を見て育っている。）、大人も、想像がつかないものは思うこともできない。 「東京で暮らして大満足だから、別に他の国に行くとか興味ない」 他の国で過ごす自分は想像つかない、想像もしたことない、想像する必要もない。 想像して、見えないから興味を抱かない。アンテナをはらないから興味を持つきっかけもない。 そんなことを考えていたら、この本を紹介していただいた。 (要約)「サルにはバナナを食べたらおいしいだろうな、と想像する力があるはず。そうしたら、バナナを取りにいくために道具を工夫して使う。しかし、ドリアンを見ても、何か置いてある
webデザインにおける視線誘導のおはなし | 07design.blog
こんにちは。今回はレイアウトの記事を書きます。「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、・・・こんにちは。今回はレイアウトの記事を書きます。 「グーテンベルク・ダイヤグラム」という言葉をご存じでしょうか。 なんだかすごく中二心をくすぐられる言葉ですね。 「グーテンベルク・ダイヤグラム」とは均等に配置された同質の情報を見る際の、一般的な視線の流れのパターンを表した図式のことです。 簡単に言うと「人間の目は左上から右下方向へ、チラチラしながら遷移する」というものです。 こういった視線の流れのパターンは、エディトリアルデザインなどでは当たり前に使われている技法・考え方らしいです。 テキストをレイアウトする場合には、左上・右下に重要なコンテンツを配置す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
http://web-directors.net/modules/pico/index.php?content_id=58