サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
UIの改悪がUXを改善させる場合 - A Successful Failure
2013年01月20日 UIの改悪がUXを改善させる場合 Tweet Good UI≠Good UX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は「写真が語るUXとUIの違い」というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が「1分でわかるUIとUXをわかりやすく説明する写真とお話」というエントリにおいて、ATMを例によりわかりやすい説明を挙げている（次の写真は当該エントリからの引用）。 この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。 しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり「Good UI ≠ Go
フィードバックとフィードフォワード - ウェブユーザビリティ.JP
ユーザビリティの向上に役立つフィードバックとフィードフォワードという考え方について紹介します。 フィードバック、フィードフォワードという言葉はユーザビリティとは別の分野でも使われているので、なじみのある言葉だと思いますが、ここでは一般的な説明から離れ、少しユーザビリティ寄りで定義したいと思います。 フィードバック･･･ユーザーの動作によって生じた結果を、後からユーザーに提示すること。問題を解決するための情報を与えること。 フィードフォワード･･･ユーザーの動作によって生じるであろうことを、事前にあらかじめユーザーに提示すること。問題が発生しないように情報を与えること。 フィードバックとフィードフォワードの例として面白いのがカーナビです。 カーナビは基本として、「○○メートル先の交差点を右方向です。」「この先○○kmの渋滞です。」などのように、これから起こることを事前に運転手に伝えて、通り過
iPhoneから学ぶユーザビリティの極意
iPhoneは、今までとは少し違った使い方や考え方を必要とするデバイスです。Appleらしい使いやすくするための工夫が随所見られますが、だからと言って万人受けするわけでもありませんし、僕のような Mac 使いとそうでない方とでは iPhone の捉え方は随分違います。Create with Contextはデザインリサーチを行っている会社で、iPhone 3G が発売された夏頃に iPhone のユーザーテストを行ったそうです。その結果は SlideShare に掲載されている「How people really use the iPhone」で読むことが出来ます。 iPhoneを聞いたことあるけどほとんど触ったことない方や、聞いたことなくて初めて使う方など、僕のようなヘビーユーザー以外を対象に行われたこの調査。タスク別に調査やインタビューも行われており、iPhoneのインターフェイスで具
HTML の label タグに必ずつけたい CSS
CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを
ユーザーにとってはUIがすべて：UIデザイン原則をソシオメディアが語る - builder by ZDNet Japan
シーネットネットワークスジャパンは9月29日、builderとしては2回目のイベントとなる「builder tech day」を開催した。今回は「User Interface & beyond」をテーマに、ソシオメディア、マイクロソフト、アドビシステムズ、カールのスピーカーが登壇し、ユーザーインタフェースの現在と未来について講演した。 本稿では、ソシオメディア取締役である上野学氏の基調講演「ユーザーにとってはUIがすべて」を紹介しよう。 トイレにひそむUIのヒント 講演の冒頭、上野氏は米国の著名なデザイン・コンサルティング・ファーム、Adaptive Pathに2008年まで在籍していたDan Saffer氏と対話した際のエピソードを披露。 Saffer氏が「トイレにはユーザー・インタフェース・デザインの様々なヒントがある」と話していたことを紹介し、下の画像を示した。 上野氏は赤色の注意書
色や模様が購入の決め手となる商品の見せ方 (ユーザビリティ実践メモ)
ECサイトでの商品画像の出し方についてはこれまでも何度か取り上げてきました。今回は衣料品やアクセサリーなど、同じ形状であっても色や模様によって購入意欲が変わってしまう商品の見せ方について考えます。 図1：商品一覧画面と商品詳細画面 上記のサイトを訪れたユーザは、商品一覧画面を見てBのシャツの形状は気に入ったのですが、灰色ではなく水色のシャツが欲しかったので、Bのシャツの商品詳細を閲覧しようとはしませんでした。その後、しばらく一覧画面を閲覧した末、別の商品を探しに他のサイトに行ってしまいました。 実はBのシャツには水色の商品もあったのですが、ユーザは一覧画面の写真だけで判断してしまったため、水色のシャツの存在に気がつかなかったのです。 衣料品やアクセサリーのような商品は色違いや模様違いというだけでユーザには全く別の商品だと認識されてしまいます。そのため、同じタイプで三色を展開しているものであ
Life is beautiful: OS-Xのメニューの位置が固定なのは「たとえ一点でもMicrosoftの方が正しかったこと」を認めたくないAppleの意地か？
とりあえず右クリックすれば操作するべきメニューが出てて来るというのは意外と便利なんだけどね。コンテキストメニューがよくできてるというのはWindowsの美点のひとつだと思う。【いまどきWindowsなんぞを使うメリットはなにか - 狐の王国より引用】 ここのところApple製品のことばかり褒めているが、上のエントリーを読んで思い出したのが、Windows95のユーザーインターフェイスを設計していたころの話。「マウスのボタンは一つ」に必要以上にこだわるアップルに対して、二つあるマウスのボタンを最大に生かしたユーザーインターフェイスの一環として徹底的にこだわって作ったのが、このコンテキストメニュー。 今やいろいろな理由でぐだぐだになってしまったが、当時は「シングルクリックは選択」「ダブルクリックはデフォールト動作の実行」「右クリックはコンテキストメニュー」という大原則をOSだけでなく、Offi
やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん！
こんな話題はいまさらかもしれない！ それはわかってます！ だけど書きたい！ なにって、[OK]ボタンの位置のことです！ これって右に置くのが自然だよ絶対！！ 理由は単純で、 [OK][キャンセル] は、画面によっては [保存] [取り消し] だとかに名前を変えるし、 さらに、入力が3ページあるようなウィザード形式の画面なんかだと、 [ここまでOKそして次の画面へ]、[間違ったかもしれないから前へ戻って修正] とかになっちゃう。 うん、このウィザード形式の時のことを考えるとわかりやすい！ ウェブは横書き！ 左から右に読む！ 左からやってきたんだから、[戻る] のは左！ 右に進んでいくんだから、[進む] のは右！ だから、[次へ] も [保存] も [OK] も右が自然！ ウィザードっぽい画面の時と他の画面の時とで 「OK的なもの」の位置がぶれていると、少し迷うよね。 だから[OK]は右に統一
![やっぱり[OK]ボタンは右なんだよ - ぼくはまちちゃん！](https://cdn-ak-scissors.b.st-hatena.com/image/square/281b1fd51f0e3fedc726435362724c3af4fce817/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F13208692334729888519%2F26003855888873578%2F1550052661)
すぐ、その場で修正できる確認画面 (ユーザビリティ実践メモ)
ECサイトの購入フォームや、会員サービスの入会申し込みフォームでは、ユーザが名前や住所など多くの項目を入力しなければなりません。
可読性の大切さ、見直してみませんか？ (ユーザビリティ実践メモ)
アメリカのIT関連調査会社フォレスター・リサーチの調査結果(※1)によると、「ウェブサイトの失敗項目で最も多いものは、文字の可読性である」ということが指摘されています。確かに文字の可読性はユーザビリティの基本事項ですが、実際のところ、可読性はユーザ行動にどの程度影響を与えるのでしょうか？実例を交えてご紹介します。 弊社でユーザビリティテスト（ユーザ行動観察調査）を実施したところ、図1のパターンでは、ユーザは1ページ目の画面を一瞥しただけで閲覧をやめてしまいました。コンテンツの冒頭を読んでから判断したのではなく、全く読みもしなかったのです。その理由として、ほとんどのユーザが「なんとなく暗い感じがして、読む気がしないから」と回答しました。 背景色そのものにも原因はあったでしょう。しかし、ユーザに敢えてコンテンツを読んでもらったところ、「内容はとても面白い、商品に魅力を感じた」との回答が得られた
検索サイトの舞台裏--グーグル幹部が明かす改善手法
サンフランシスコ発--Googleは、こと検索クオリティに関しては複数の顔を持っているようだ。 Googleは、ABスプリットと呼ばれる手法を使って、同社のメイン検索ウェブサイト（簡素な検索ボックスと検索結果の両方について）どのような変更を加えるべきか検討している。Googleの検索プロダクトおよびユーザーエクスペリエンス担当バイスプレジデントであるMarissa Mayer氏は米国時間5月29日、サンフランシスコで開催されているGoogle I/Oカンファレンスで講演した。その中で同氏は、上記の手法について、Googleはユーザーに対し、デザインの異なる複数のページを表示し、その反応を測っていると説明した。 Mayer氏によると、例えばGoogleは、ユーザーに対して表示する検索結果を何件にすべきかを探りたかったという。通常は、10件か20件、25件か30件といったところだろう。この点に
第11回 PCサイトとこんなに違う！携帯サイトのフォーム設計ポイントとは | ユーザー視点のウェブデザインガイド
その半面、携帯サイトの設計については、PCサイトとは異なるユーザー特性があるにもかかわらずノウハウは少なく、中規模以上のサイトであっても「とりあえず作っただけ」のサイトや、やみくもに見た目だけを新しく装ったサイトが多いのが現状である。 今回は、携帯サイトの設計、その中でも特にビジネス成果に直結するフォームについてピックアップし、携帯ユーザー特有の行動に対していかに対応すべきかを考えてみたいと思う。 さて、複数のブラウザを立ち上げて、画面を切り替えながら操作が可能なPC環境と違い、モバイル端末では一度サイトから離れると、戻ってくるのが非常に大変である。そのため、携帯サイトのフォーム登録はPC以上に「一発勝負」であることを強く意識する必要があるだろう。 まず、ユーザーの入力負荷を減らし、自動入力が可能な部分は可能な限り実装するなどの配慮を欠かさないようにする必要がある。さらに、「携帯特有の機能
申し込みフォームを使いやすくして途中であきらめる人を減らす具体的な方法論【後編】 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 前回のコラムでは、サイトの目的にかかわらず必要になることが多い、企業サイトの申し込みフォームについて、フォレスターが調査した「なぜ途中で申し込みをあきらめてしまうのか」の概要と、申し込みフォームが使いづらい具体的な原因の1つ「フォームのラベルやボタンの位置やデザイン」とその解決方法を解説しました。 今回は、その続編として、申し込みフォームをより使いやすくするために注意するべき具体的なチェック点や
すばらしいソフトを作るには、カリスマが講演 ― ＠IT
記者という職業柄、これまで非常に多くのプレゼンテーションを見てきたが、プレゼンテーションの1枚目が半裸の女性モデルの写真だったのは初めてだった。 2月13日、14日の予定で東京・目黒で開催中の「デベロッパーズ・サミット2008」で講演したFog Creek Softwareの創業者でCEOのジョエル・スポルスキー（Joel Spolsky）氏のプレゼンテーション「Joel on Developers Summit――素晴らしいソフトウェアを作るということ」は、型破りに楽しく、なおかつソフトウェア開発者にとって示唆に富む内容だった。 スポルスキー氏は米マイクロソフトのExcelチームで、Excel用マクロ言語を、後にVBAと呼ばれることになるモダンなオブジェクト指向言語に置き換える仕事でプログラムマネージャを務めたことがあるなどソフトウェア開発のベテランだが、エッセイの書き手としても名を馳せ
個人プロフィールからの引用を考慮した携帯サイトフォーム設計 (ユーザビリティ実践メモ)
PCをほぼ/全く利用しない「インターネット＝携帯電話」ユーザには、フォームなどでメールアドレスを入力する際に、個人プロフィールから引用する傾向があります。 機種によってこの機能の名称や使用方法は異なりますが、筆者の携帯では下記の操作でプロフィールを引用することが可能です。 プロフィールの中でもメールアドレスは、文字数が多く、英数字が混在するため、直接入力する場合、煩わしい操作を要します。 そのため、携帯の操作に慣れているユーザの多くが上記の機能を使用してメールアドレスを入力しているのです。 この行動を想定したうえでサイトを制作しなければ、ユーザにストレスを与えてしまう可能性があります。 例えば、あるメールアドレス入力フォームでは、下図のように「＠」より前をフリーワードで入力し、「＠」より後ろをプルダウンメニューで選択する仕様にしていました。 一見、親切そうに見えるフォームですが、プロフィー
新生銀行の件のフォローアップ:江島健太郎 / Kenn's Clairvoyance - CNET Japan
前回の新生銀行のサイトの使い勝手についてのポストに思いのほか反応がありました。 はてなブックマークでも「新生の使いづらさは尋常じゃない」とか「こに書いてあること全部の10倍くらいダメ」とか「書いてもらえてスッキリした」みたいな反応が多くて、そういう声を引き出せたのは書いた甲斐があるなぁ。 それで、セキュリティに関する話だから噛みついてくる人もいるだろうと思っていたらやっぱりいて、カレーなる辛口Javaな転職日記で「全般として，いかにも素人っぽい批判に終始しているように思う」と書かれていたのを見つけたので読んでみたのだけど、そこに書かれていた反論は「もっとセキュリティを下げろなんて論外」という、予想通りのいわゆる一段階論理だったのですが、よく考えてみればそういう思考回路の髪のとんがった上司をどう説得するかというシチュエーションは現実問題としてあるわけで、そのためもう少しだけ深追いしてみること
Amazonにない書籍をネットで買え--ユーザーはどう検索する？
ウェブサイトを設計する際には、ユーザーが求めている情報に早くたどり着けるようにするために、情報の配置などに注意する必要があります。この連載では、実際に被験者に課題を与えた上でサイトを閲覧してもらい、アイトラッキングツールを利用してユーザーの直感的な行動を分析します。ツールはTobii Technologyの「Tobii Eye Tracker」を利用します。 アイトラッキングとは、ユーザーの視線の動きを感知してモニターのどこを見ているのかを記録するシステムです。ウェブサイトのユーザビリティ改善として使われることも多くなってきましたが、視線の動きが可視化されるというインパクトの強さに惑わされているケースもありそうです。 たしかに被験者の視線はウソをついていませんが、被験者の属性、心理状態、リテラシーなどによってその結果は異なってきます。たとえば、ウェブページを見る視線はF字型に流れるという分
タブの正しい使い方
13のデザインガイドラインを守ってタブを使っているサイトにYahoo Financeがある。しかし、AJAXの使い過ぎや改善の余地が残るカスタマイゼーションのページなどを見る限り、ユーザビリティはまだ上げられる。 Tabs, Used Right by Jakob Nielsen on September 17, 2007 Web上でダイアログコントロールを正しく使っているユーザ・インターフェイスを見かけることは滅多にない。ラジオボタンやチェックボックスのように単純なものでさえ、正しく使われていないことが大半だ。ドロップダウンメニューに至ってはもっとひどい状態だし、Flashサイトを台無しにする自作のスクロールバーも後を絶たない。 最近リニューアルされたYahoo Financeのホームページでは、タブを正しく使っている。2箇所ほど抜粋してご覧に入れよう。 Yahoo Financeのホー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
排卵期予測アプリ「Clue」がデザインにピンクを使わない理由