Webサイトのログインに使用するパスワードをどのように管理していますか？ 私は1Passwordで管理していますが、他にもChromeのパスワードマネージャーやmacOSのキーチェーンなどを使用している人も多いと思います。 そんなパスワードマネージャーとうまく連動するログインフォームを実装するためのポイントをまとめた記事を紹介します。 don’t get clever with login forms by Brad Frost 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ログインフォームの避けるべき例 ログインフォームの適した例 はじめに 日増しに、私はログインフォームでイライラすることに気がつきました。1Password（私が使用している）やChromeのパスワードマネージャー（これも私が使用している）のような
UX Movementの著者および設立者です。ユーザー体験のデザインスキルの開発を手助けしてよりユーザーフレンドリーな世界のために、このブログを創設しました。 フォームのどこにエラーメッセージを配置していますか？ ユーザーの期待する場所にエラーメッセージが置かれていないと、ユーザーはフォーム入力を完了できなくなってしまうかもしれません。 フォーム入力を間違えたら、ユーザーはそれを修正して送信し直すために、なにが間違っていたのかを理解する必要があります。フォームを完了しようと思っていたとしても、それがあまりにも大変であればユーザーは心変わりしてしまうでしょう。 フォームの上か、フィールドのインラインか エラーメッセージの配置場所でもっとも一般的なのは、「フォームの上」と、「エラーのあるフィールドのインライン」という２箇所です。どちらの配置場所が、ユーザーにとってより直感的でしょうか？ 調査に
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
アプリやウェブアプリケーションは、ユーザーからの入力がなければ何も変化しません。プロダクトデザイナー、開発者、そしてプロダクトマネージャーがそれを理解することはとても重要です。 テキストフィールドは、ユーザーが短いテキストを入力するための基本パーツです。どのようなアプリでも、個人情報の入力を求める小さなテキストフィールドを必ず目にします。 この記事では、テキストフィールドを中心にデータ入力を改善する重要な要素について見ていきたいと思います。ただし、すべてのルールには例外があるということを念頭に置いておいてください。 わかりやすさ わかりやすいテキストラベル ユーザーはどんな種類のデータをフィールドに入力するべきか知りたいと考えます。明確なラベルテキストはユーザーにそれを伝えるメインの手段になります。もちろん、アイコンを頼りにフィールドの意味を理解することもあります。例えば、ユーザーが虫眼鏡
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
前のブログ記事 を書いた時、「訓練された目ならば、不親切なソフトウェアを結構な頻度で簡単に見抜けるようになる」ということに気づきました。 それは初対面の人に第一印象を抱くのに似ています。私たちは初めて会った人の印象を判断するのに コンマ1秒もかからないそうです 。 人を判断するのとは違い、ユーザインターフェースの良しあしを判断することは、私たちが（今はまだ）本能的に行っていることではありません。しかし、たった数分で、もしくはもっと早く、ユーザインターフェースがじっくり考えられて作られたものか、ちょっとした思い付きで作られたものかどうかを判断することは可能です。 どうして判断がついたのかや、どんな警告サインが出ていたのかについては確証がなかったため、私は注意を払い、メモを取ることにしました。 以下は私が気付いたことです。 用語/ラベルの使い方があまりに総称的/一貫性していない これはユーザの
入力フォームのプレースホルダーテキストは、入力欄にどんな情報を入れたのかをユーザーが思い出すことや、エラーのチェック・修正を難しくしてしまう。また、視覚や認知機能に障害のあるユーザーにはさらなる負担となる。 Placeholders in Form Fields Are Harmful by Katie Sherwin on May 11, 2014 日本語版2014年6月17日公開 コンテクストに沿った説明やヒントは、入力フォームのそれぞれに何が入るかを明確にするのに役立つ。その結果、入力が促進され、コンバージョンレートは向上する。ヒントの提供方法はいろいろとある。実装として一般的なのは、入力フォーム内に説明を入れるやり方だ。しかし、残念ながら、入力フォーム内のプレースホルダーはユーザビリティに役立つよりも損なうことのほうが多いことがユーザビリティテストでは繰り返し示されている。 ラベル
悩みを抱えたユーザインタフェースたちがいると依頼を受け、とあるホテルに訪問診療にきているDr. ナカムラ．さて，今日の患者さんたちはどのような悩みを抱えているのでしょうか・・・ 原稿はPDFでアップロードしていますので、… 続きを読む »
こんにちは。お仕事でiPhoneアプリを開発しているid:ninjinkunです。このエントリはiOS Advent Calendar 2011 23日目の記事です。今回はあまり注目されることがなさそうなiPhoneアプリのエラー処理を取り上げてみようと思います。 エラー処理と言うとプログラマが粛々とやるものというイメージで、主に内部のエラーハンドリングのことが中心になりがちです。しかしエラー処理はそれをユーザーに通知するところまで考えて初めて完結します。この記事ではユーザー体験の面と内部処理と両方に言及してみようと思います。自分の今までのアプリでもあまり実践できていなかったので、自戒の念も込めて…。 エラーは様々な状況で発生しますが、ここでは主にHTTP通信のエラーを想定します。HTTP通信はiPhoneのようなモバイル端末では高い確率で失敗します。移動中、地下鉄、山の中の中など通信が不
GALAXY Nexusが来て2日間使い倒した。ハードウェア自体は良いなぁと思う点が多々あったものの、ソフトウェアに関しては自分がそれを生業にしている点で評価がどうしても厳しくなってしまうようで、今の所嫌いな所ばかりが目立つ状況だ。 私は元々AndroidそれもGingerbread(2.3)までのスマートフォンを主なターゲットとした装飾を控えめにした機能優先なインタフェースとデザインは好きだ。がしかしAndroidとしてタブレットに始めて対応することとなったハニカムは機能的なデザインが影を潜め、完成度もお世辞には高いとは思えないそのデザインとGUIは結局好きになれずじまいだったのである。 そこでAndroid4.0だ。"Ice Cream Sandwich" (以降はICSと略する)はスマートフォンとタブレットのユーザインタフェースを統合するものでありそのデザインは基本的にはハニカムが踏
わかっちゃったカモ!? iPhoneのスクリーンが3.5インチなワケ2011.10.11 15:00 junjun Dustin Curtisが教えてくれました。 iPhoneのスクリーンってなんで3.5インチなんだろ？ なんで大き目なスマホは手に持った時に扱いづらいんだろう？ っていう疑問に対する答えを。 歩きながら4.27インチのGalaxy S II を片手で操作しつつ、Google Mapsを見ていたら、右上のコーナーに触れるのが難しくて、イライラしてしたんですよ。そこで、とっさにiPhone4を取り出してテストしてたんです。iPhoneは左手で持ってたんですけど、親指がスクリーンのどの部分にもとどいて、スムーズに操作することができたんです。 だからiPhoneのスクリーンはいっつも3.5インチでなんだぁ！ と、納得する部分もあるけど、手の大きさは人によって違うからiPhoneが大
新宿到着。トイレどこか分からんわ！ これ作ったやつマジくたばれ。
複数ブランドを束ねるファッションサイトのリニューアルに際し、テキストリンクのみだった各ブランドへのリンクにロゴを足しました。 すると、あるブランドのクリック率が2倍も伸びたのです。 いったいなぜロゴを足しただけで、CTRが2倍も伸びたのでしょうか？ このブランドの特徴を見てみましょう。 複数の大型駅ビルに店舗を構えていて多くの人が店舗を目にしている ブランド名が長く覚えにくい ブランドカラーとロゴが特徴的 ロゴが目立つショッピングバッグをぶら下げている若者が多い つまり、当ブランドはブランド名よりもロゴで認知されていたのです。 リニューアルでロゴが付与され「あ、このブランド知ってる、ちょっと見てみよう」という行動が促されたと考えられます。 「ロゴが大事」ということをお伝えしたいわけではありません。（現に、他のブランドはロゴを足した後もCTRに大きな変化はありませんでした。） 自社の製品やサ
Mac、iPhone、iPod、歌声合成、DTM、楽器、各種ガジェット、メディアなどの情報・雑感などなど だいたいはOKなんですが、UIがどうも気に入らない。その理由がようやくわかったので、Twitterに書いてみました。 カミサンの実家用携帯の機種変手続き中。EVOも試すことに。まずはレンタル一週間試すことになってるらしい posted at 17:01:28 IS06のモックアップさわったが、犯罪レベルのiPhone 3GSっぷりに思わず買いそうになる posted at 17:07:36 HTC EVOテスト機がわが家にやってきた。とりあえず電波が入らない posted at 18:58:02 一瞬は入ったのだがw posted at 18:58:15 Androidのフリックがタコい理由がわかった気がする。タップしてすべらすときに追従がひと呼吸遅い。そして、指を離した後もしばらく動
UIについて徒然と考える自分用メモ、２回目はフィードバック。ユーザーに「何かがおきたよ！」と如何に明解に知らせるか？１回目はこちら 随時増えたり減ったりするよ。自分の主観だから間違ってることもチラホラあるかもよ。 振り返ってみてTiltShiftGenでは、遷移系のフィードバックは少なめにして、情報系のフィードバックを多めに調整してたんだなぁとシミジミ。多分、ブラーの処理が重かったからだと思う。隙をみてバージョンアップしたい。 一般論 ・フィードバックとは？ ユーザーの操作に対して、結果を返すこと。操作の実感。 ・フィードバックのないアプリは痛覚の無い人間。 ・物理的なフィードバックもソフトウェア的フィードバックもなければ、ユーザーは何がおきているか知覚できない。 ・何かが起きたら必ずユーザーに通知する。 ・適切なフィードバックが行われるとユーザーは快感を感じる。 ・新雪に足跡をつけたり、
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
中小企業がITを活用して売り上げにつなげるにはどうしたらいいか？WEBマーケティングとWEB戦略コンサル実績350社50業種以上の実績とノウハウで、海外の最先端情報を中心に、噛み砕いてご紹介。 作成者：中山陽平 iOS、実質的にはiPhoneのアプリケーションを作る際に参照してくださいと言う事で配布されている「iOSヒューマンインターフェイスガイドライン（以下iOS_HIG）」 弊社のシステムを真剣にスマートフォン対応にするために読み始めたのですが、この内容が、ただのインターフェイスのガイドラインだけではなく、さらに踏み込んだ内容になっていて驚きました。 Appleのサードパーティアプリに対する姿勢、サードパーティアプリケーションがiPhoneの大きな魅力であるという認識が、このガイドラインからはにじみ出ています。 App開発者以外もぜひ見ておくべき これはぜひ、WEBに関わる方は見て頂き
説明しにくい事柄に対して、ベストマッチする言葉があると便利ですが、今日はその中のひとつ「ゼルダの石」を紹介します。 「ゼルダの石」の使い方。 ゼルダの石は、以下のように使います。 これは「ゼルダの石」だから不要ですね。さて、どういう意味でしょうか？ 「ゼルダの石」とは、あっても無くても危害をなさないもの、また、そのような表現。 ゼルダの石とは、任天堂の宮本茂さんのインタビューで、僕が共感を得た内容から作られた故事成語です。 出典がウェブのどこかに転がっているはずですが、見つけられなかったので、僕の記憶と言葉で説明します。 あるとき、ゼルダのフィールドを作成していたスタッフが、何気なく石を配置しました。ゼルダの石は持ち挙げることができます。石の下からはアイテムが出てきたり、その石は投げてぶつけることが出来ます。 しかし、次の日、これを見つけた宮本さんが「誰がこんなところに石を置いたんや!」と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く