10代のユーザビリティ： ティーン向けWebサイトのデザイン
ティーンは、自分のウェブを扱う能力に（過剰に）自信を持っているが、彼らのパフォーマンスは大人に劣る。読解レベルの低さや、忍耐力のなさ、発展途上の情報収集スキルにより、ティーンのタスク成功率は低くなる。そのため、サイトはシンプルで共感しやすいものにする必要がある。 Teenage Usability: Designing Teen-Targeted Websites by Jakob Nielsen on February 4, 2013 日本語版2013年2月18日公開 ティーンはインターネットにつながっている。テクノロジーがティーンエイジャーの生活に深く溶け込んでいるため、彼らに役立つ、ユーザブルなウェブサイトを作り出すことがこれまで以上に重要になってきている。次善のものがクリックするだけで手に入り、SMSメッセージによる割り込みが例外ではなく普通のことである世界で成功するには、ウェブサ
フォームで郵便番号を入れたら、住所を自動入力させる方法[Javascript] | TechMemo
Tweet TweetWEBサイトにお問い合わせフォームなどのフォームを設置することは多いと思います。 例えば、住所を入力してもらいたいときに、郵便番号と住所のフォームを設置したとします。ユーザーとしては、郵便番号を入れて、住所を入れて、と結構面倒に感じると思います。郵便番号を入力したら、住所も自動入力されると素敵ですよね。 とある方から、自身のWEBサイトに設置している注文フォームにこのようなフォームを設置したいと相談されました。しかしながら私はJavascriptは苦手です・・・なので、ネットで色々と調べてみたところ、色んな方が自動入力のフォームを実装するためのソースを公開しているんですね。 ありがたや～と執筆者様の方向におじぎをしながら拝見していたところ、その中でも比較的実装が簡単な方法を見つけたので、シェアさせていただきたいと思います。 jQuery.zip2addrのダウンロード
ユーザー登録時のパスワード入力画面を考える
UXやユーザビリティという観点で、海外の記事を中心にサマリーと併せてご紹介していきます。第1弾の今回は、ユーザー登録時のパスワード入力画面についてです。 U-Site編集部 2012年12月10日 こんにちは。U-Site編集部です。 今まではニールセン博士と黒須教授の記事のみを配信して参りましたが、編集部でも、UXやユーザビリティという観点で記事を配信していくこととなりました。海外の記事を中心にサマリーと併せてご紹介していければと思っております。どうぞ、よろしくお願い致します。 さて、早速第1弾の投稿ということで、今回はユーザー登録時のパスワード入力画面に関する記事をご紹介します。 #パスワード入力画面についてはニールセン博士も2009年の段階で言及しております。その当時の記事はこちら。 ユーザー登録フォームにおける、よりよいパスワードの隠し方 ご紹介記事：Better Password
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は軟化したが、今度は必要な機能を隠しながら、大きな色とりどりのタイルで画面を覆いつくし、ユーザビリティを妨げている（訳注： フィーチャークリープとは、電子機器やソフトウェ
HTML5 Form Validation のカスタマイズ
Tomomi Imura An Open Web advocate and front-end engineer, who loves everything mobile, and writes about HTML5, CSS, JS, UX, tech events, gadgets, etc. She unintentionally got 15min of fame by creating The HTTP Status Cats. Also, the opinions expressed here are solely her own and do not express the views or opinions of my employer. Twitter LinkedIn Instagram Github Flickr My articles are licensed u
フォーム入力内容をローカルストレージに保存·Garlic.js MOONGIFT
Garlic.jsはフォーム入力データをローカルストレージに保存し、再読み込みしても復元してくれるソフトウェアです。 Webサイトフォームへの入力において間違ってウィンドウを閉じてしまったり、何かエラーがあったために全ての入力結果が消えてしまったなんていうと非常にがっかりします。それを防止できるのがGarlic.jsです。 テキストボックス、テキストエリアに適当な文字を入力します。リロードしてもちゃんと入力が保持されています。 Ajaxベースの入力エラーチェックにも対応しています。 今のところ、テキストボックスとテキストエリアのみ対応しているようです。指定した項目だけ対象外にもできます。今後、ラジオボタンやチェックボックスなどにも対応が願われます。 Garlic.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 最近ではモ
ユーザビリティとファインダビリティの関係 ｜https://wp.yat-net.com/name
Webサイト設計及び制作において欠かせないユーザビリティ（使いやすさ）とファインダビリティ（見つけやすさ）。当然のことですがどちらかが欠けてもそれは上手く機能しません。 例えばWebサイトに検索ボックスを設置したとします。サイト内の情報を検索出来る優れたシステムですが、これをフッター部分に設置するとどうなるでしょうか？ 1.ユーザビリティとファインダビリティのバランス 2.サイト設計時における標準化について 3.標準化と優先度 4.最後に ユーザビリティとファインダビリティのバランス 多くのユーザーは検索ボックスをフッターから見つける前に「このサイトには検索ボックスは無い」という判断をしてしまいます。 それは何故でしょう？ ユーザーにとって検索ボックスを使いたいと考えた時、最初に見るのはサイトの上部やサイドのナビゲーションあたりになります。 これはよく使われるポータルサイト等が検索ボックス
住所入力フォームなどで使う都道府県の並び順について調べてみました | えすたくぶろぐ
先日、某サイトの住所入力フォームで都道府県を選択する時に、都道府県の並び順がアイウエオ順になっていて驚きました。都道府県の項目の選択肢が「愛知県」から表示されていて最初全く意味がわかりませんでしたし。普段、北海道で始まって沖縄で終わる、北から南に並ぶ順序に慣れているので、かえって自分の住んでいる県を探すのが大変でした。 たぶん、サイト制作者さんはアイウエオ順に並べることで探しやすくなるだろうって思ったのかもしれませんが。なんというか、金額で4桁ごとにカンマが打ってあったり、タッチパネルキーボードでアイウエオ順に並んでいるのを見た時と同じような感覚を持ちました（笑） 他にも今まで見たフォームで違和感を覚えたのは、「北海道、青森県、岩手県…」と一応北から南へ順番に並んでいるんですが、福島県で東北地方が全部出た次は関東になるのかと思いきや新潟県になってたりした並び順とか。緯度を基準にすればそうな
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
国別サイトの出来があまりにも悪い理由
多国籍企業がローカライズした国別サイトを制作すると、ユーザビリティが失われてしまうことは多い。現地の広告代理店がデザインするのが、見栄えはいいが、情報が伝わらないサイトだからである。 Why Country Sites Are So Bad by Jakob Nielsen on June 18, 2012 日本語版2012年7月4日公開 国際的ユーザビリティ調査をここ数回、観察していて、悩ましく思ったことがある。それは世界中でテストしたウェブサイトのうちの多くが、並外れて質が低かったことである。それらは1990年代にアメリカで目にしていたものと五十歩百歩だったのである。 この観察結果を検討してわかったのは、ひどく質の悪いサイトというのは現地の企業や政府機関によってデザインされた本当の意味でのローカルサイトではない場合が多い、ということである。それよりむしろ、その原因のほとんどは、ひどいユ
クライアント側でつかまえて
http://connpass.com/event/607/ の例外とロギング勉強会のLTスライドです。 しゃべった部分を加筆しましたん
ユーザビリティ調査では何人でテストするのか
例外を除くと、その答えは5人である。テスト参加者をもっと多く使うことに賛成する意見の大半は間違っている。しかし、中には、より大きな規模のほうがいいテストもあれば、小さいほうがいいものもある。 How Many Test Users in a Usability Study? by Jakob Nielsen on June 4, 2012 日本語版2012年6月26日公開 欲しい数字が1つなら、答えはシンプルだ。ユーザビリティ調査では5人のユーザーでテストしよう。その結果、もっと多数のテスト参加者を使って得られるのとほぼ同数のユーザビリティ上の問題を見つけられるだろう。 1989年に「ディスカウントユーザビリティエンジニアリング」を奨励し始めて以来、この答えは変わっていない。テストしているのが、ウェブサイト、イントラネット、PCアプリケーション、モバイルアプリなど、何なのかは関係ない。ユー
User Interface Design Examples for your Inspiration - Designmodo
About User Interface Design Patterns Some user interface designs are readily available with boxes as well as arrows along with a prime source that offers all types of relevant information on interaction design, its usability, and various other related factors. A few more kinds of designs are also available that have various web applications. Some of the designs strike a fantastic balance between t
「苦悩からユーザビリティテストに希望を託すまでの道のり」と題してプレゼンしたので、資料を公開します
自己紹介の代わりに著書紹介 「P2P教科書」 「パーフェクトJava」 「実践JS サーバサイドJavaScript入門」 「パーフェクトJavaScript」
モバイルサイト vs. フルサイト
モバイルの良質なユーザーエクスペリエンス（UX）に必要なデザインは、デスクトップユーザーを満足させるために必要なものとは異なる。2種類のデザインをして、サイトを2個にし、相互リンクすることによって、すべてはうまくいく。 Mobile Site vs. Full Site by Jakob Nielsen on April 10, 2012 日本語版2012年5月8日公開 数百のサイトについてのユーザビリティテストから判断すると、モバイルに最適化したウェブサイト向けの主なガイドラインは明らかである： 余裕があれば、モバイルに最適化したサイト（あるいはモバイルサイト）を別個に構築しよう。モバイルデバイスを利用してサイトにアクセスするとき、ユーザビリティの測定結果はフルサイトのものよりもモバイルサイトのほうがずっと高い。 モバイルのアプリならさらにいいだろう、少なくとも現時点では。 モバイルのユ
textarea や input フォームの change イベントをリアルタイムで発行するようにする tm.form-observer.js を作りました | TM Life
textarea や input フォームの change イベントは, 編集後にフォーカスを解除したときに発行されます. つまり編集中, 値を変更してもフォーカスが残っている限り change イベントは発行されません. しかし, Web ツールをつくる際, 機能として編集中でもリアルタイムで内容を参照して使いたいって時が多々あります. そんな時に使えるスクリプト『tm.form-observer.js』を作りました. 『tm.form-observer.js』 はフォームを監視するスクリプトです. textarea や input フォームを 監視するよう指定することでリアルタイムでチェンジイベントを発行することができます. 前回のエントリー『JavaScript Tips – dispatchEvent を使いこなそう!!』 で解説した dispatchEvent を活用してネイティ
AjaxでUnique URLを使い、戻る/進むボタンにも対応させる | TM Life
GmailやTwitterでは、Ajaxによる非同期なやりとりを行い 現在の状態をアンカー(window.location.hash)に書きこむことで保存したURLにも反応するようになっています。 以前私のブログでも書いた Unique URL ってやつですね。 しかしこれだけではまだ不十分です。 戻る/進むボタンが反応しないという問題が残っています。 なぜ反応しないかというと、ハッシュが変更されたさいにそれを知る手段がないからです。 なのでその対処法をざっくりとプログラムで書いてみました。 Sample 今のハッシュタグと前回のハッシュタグが表示されるようになっています。 進む/戻るボタンにも反応しているのが分かると思います。 http://tmlife.net/examples/hash-observe/index.html Source script部分のソースです。 ザックリとした
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jsdo.it
Learn Forms | web.dev
リッチインターネットアプリケーションの実装時に検討したい30のUI