タグ

ユーザビリティに関するmasaya-chonanのブックマーク (168)

  • 実践的なユーザビリティ: ソフトウェアの人間的な顔

    This browser is no longer supported. Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support. Usability in Practice The Human Face Of Software Dr. Charles B. Kreitzberg and Ambrose Little Contents So, What Is User Experience? It Ain't Just Paint The Facets of UX Synergy with Agile Welcome to Usability In Practice. This is the first in a series of

    実践的なユーザビリティ: ソフトウェアの人間的な顔
  • 実践的なユーザビリティ: 実用的で、使いやすく、魅力的な製品: 開発のコア コンピタンスとしてのユーザビリティ

    つまり、実用的で、使いやすく、魅力的な製品を作成するという目標がある場合は、ユーザビリティの概念を開発プロセスに組み込む必要があります。ユーザー エクスペリエンス デザインをアジャイル開発プロセスに組み込む方法については、別の記事で説明する予定です。今月の記事では、概要デザインの作成について重点的に説明します。 ユーザビリティは単なる表層の要素ではない 開発者は、ユーザビリティを製品のスキンの問題としてとらえがちです。確かにユーザビリティのいくつかの側面はビジュアル デザインと関係がありますが、その大部分は表面に現れるものではありません。 Alan Cooper 氏は、14 年前に著した自著『About Face』の中で、2 つのソフトウェア モデルを区別しています。それはテクニカル モデルとマニフェスト モデルで、これらのモデルを通じて "ソフトウェアの機能がユーザーに示される" という

    実践的なユーザビリティ: 実用的で、使いやすく、魅力的な製品: 開発のコア コンピタンスとしてのユーザビリティ
  • 実践的なユーザビリティ: デザインとは見た目だけにとどまらない

    センスが良いものは売れる。その点は、ソフトウェアも他の製品も変わりません。ビジュアル デザインが洗練されていれば、購入者を引き付けるだけでなく、その製品のすばらしさ、綿密さ、効果などがアピールされます。もちろん、パッケージが美しいからといって中身の品質が保証されるわけではありません。「美しさは皮一重」や「表紙での中身を判断するべからず」といった昔のことわざからも、このことがわかります。 しかし、ビジュアル デザインは重要です。洗練されたビジュアル デザインが品質の代名詞になるわけではありませんが、マーケティングにおいては、ビジュアル デザインを無意味なものだと片付けるのは間違いです。少なくとも、格的で魅力のあるものにすべきです。顧客や大衆向けの製品を製造しているのであれば、独特の外観を生み出すことを検討するために、ビジュアル デザイナーを雇うのも一考に価するでしょう。製品がセットになっ

    実践的なユーザビリティ: デザインとは見た目だけにとどまらない
  • 実践的なユーザビリティ: 実用的なエラー メッセージ

    このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 実践的なユーザビリティ 実用的なエラー メッセージ Dr. Charles Kreitzberg および Ambrose Little コードは MSDN コード ギャラリーからダウンロードできます。 オンラインでのコードの参照 目次 ユーザビリティ面の課題 エラー メッセージの問題 設計段階での重要な考慮事項 エラー メッセージの体裁 プログラミング技法 一貫性のある処理 適切に設計されたエラー メッセージ フレームワーク Enterprise Library による例外のカスタマイズ Charles Kreitzberg ユーザビリティ面の課題 プログラムのユーザビリティがエラー メッセージによって大きく

    実践的なユーザビリティ: 実用的なエラー メッセージ
  • Usability in Practice: Strategies for Designing Application Navigation

    このブラウザーはサポートされなくなりました。 Microsoft Edge にアップグレードすると、最新の機能、セキュリティ更新プログラム、およびテクニカル サポートを利用できます。 実践的なユーザビリティ アプリケーション ナビゲーションの設計戦略 Dr. Charles Kreitzberg および Ambrose Little 目次 認知的視点 ナビゲーションはメタファである ユーザーが混乱する理由 複数のページを論理セクションにグループ化する フレームを作成する ナビゲーション支援機能を使用する まとめ ソフトウェア的視点 大企業をコピーする カード分類法 UX デザイン パターン 明確なエントリ ポイント 実装 コントロール テスト、追跡、および微調整 まとめ 認知的視点 Dr. Charles B. Kreitzberg ナビゲーションを適切に作成することは、設計の最も重要な側

    Usability in Practice: Strategies for Designing Application Navigation
  • nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜|withComputer

    数年前に「日語でケアナビ」プロジェクトに加わったことをきっかけに、「カテゴリとタグというナビゲーション要素をどう扱うか」は僕の問題意識のひとつになっています。で、1月ちょっと前に公開され話題になったライフレシピ提供サイト nanapi [ナナピ] のナビゲーションは、この問題に対するひとつの解を示しているように思いました。せっかくなので考えたことを以下まとめてみます。 カテゴリという(階層構造も含む)分類の仕方は、サイト利用者の多くがスムーズに理解できる一般的な概念といえるのですが、タグという概念の認知度はまだまだ「Webに詳しい人は知っている」の域を出ていないのではないかと思います。タグという属性のラベルを使い、複数のタグを使って「AかつB」という条件でモノを絞り込んでいく手法は、とても便利で面白いものです。でも知らない人にとっては、タグを用いたナビゲーションは難しいものに映るのが現状

    nanapi [ナナピ] に学ぶナビゲーション設計 〜カテゴリとタグの見せ方〜|withComputer
  • そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 : LINE Corporation ディレクターブログ

    こんにちは、「プチペット」を担当している吉沢です。 最近はモバイルサイトを作成するためのブログやノウハウなどがたくさん出てきて、とても便利になってきましたね。 個人的にはモバイルサイトのデザインやユーザインターフェース関連に関心が高いので、ブログでは「モバイルデザインアーカイブ」さん、「case:MobileDesign!」さん、では日々、こちらで勉強させていただいております。 モバイルユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。 著者:株式会社ゆめみ 販売元:インプレスジャパン 発売日:2008-12-25 おすすめ度: クチコミを見る モバイルデザインアーカイブ。―携帯Webコレクション 著者:モバイルデザインアーカイブ 販売元:春日出版 発売日:2009-08 おすすめ度: クチコミを見る ケータイサイトのレイアウト 企業・キャンペーン・サービ

    そのモバイルサイト見やすい? 使いやすい? ユーザビリティをアップさせるチェックポイント7 : LINE Corporation ディレクターブログ
  • 縦長いページデザインは是か否か? 楽天におけるスクロール量計測導入の裏側

    『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day

    縦長いページデザインは是か否か? 楽天におけるスクロール量計測導入の裏側
  • アイコンのアクセシビリティ、ユーザビリティなどを分かりやすく解説している無料のE-Book

    アイコンの歴史から、アクセシビリティ、ユーザビリティなどを分かりやすく解説している無料のE-Book「Icons for Interaction」をhicksdesignから紹介します。 Icons for Interaction アイコンのアクセシビリティ、ユーザビリティなどを解説しているE-BookはPDF形式で配布されており、下記のような内容になっています。 英語が苦手な方でも、楽しめる内容だと思います。

  • 虫眼鏡のアイコンは『検索』か『拡大』か? ― @IT

    ユーザビリティのヒント(3) 虫眼鏡のアイコンは『検索』か『拡大』か? 「インタラクションデザイン」 ソシオメディア 上野 学 2006/9/13 「消去」と「削除」、「ショッピングカート」と「買い物かご」、「ホーム」と「トップ」、ユーザーにしっくりくるのはどちらか。白黒付け難いナビゲーションの概念を考えよう GUIの特徴は、当然のことながら、ユーザーインターフェイスをグラフィックで表現することです。その際、「ユーザーが選びやすいフォームのカタチを考えよう」でも書いたとおり、GUIではウィンドウやメニューなどと並んで、アイコンを使ってオブジェクトや機能を画面上に配置してユーザーに提示することがよくあります。 アイコンは、メタファーを使った端的なグラフィックを用いて、抽象的な概念を感覚的に伝えると同時に、画面上での操作可能領域を明示するのに役立ちます。しかし、グラフィックだけでその意味を完全

  • ユーザビリティテスト・ツール「Usabilla」を徹底レビュー - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ

    無料で資料をダウンロード SEOサービスのご案内 専門のコンサルタントが貴社サイトのご要望・課題整理から施策の立案を行い、検索エンジンからの流入数向上を支援いたします。 無料ダウンロードする >> サーチエンジンランドからユーザービリティに関する記事を。オンラインのサービスを使用してユーザービリティテストを行った実例を紹介。具体的で参考になります。 — SEO Japan 現在、様々な企業がユーザビリティテストの新しいツールの開発が活発に行っている。これは、良い傾向と言えるだろう。なぜなら、今後、ウェブエクスペリエンスが向上することを示唆しているためだ。そこで、今回のエントリでは、Usabilla(ユーザビラ)を取り上げようと思う。これは友人のケリー・モーグレットと私が、リモコン式の戦艦を作る製品を販売するケリーのサイト、ストライクモデルズで実際に利用したサービスである。 サービスの概要:

    ユーザビリティテスト・ツール「Usabilla」を徹底レビュー - SEO Japan|アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

  • 第2回 アクションを起こしてもらえるフォームのポイントは? | gihyo.jp

    使いやすいフォームをデザインする6つのポイント みなさんは、どのようにフォームをデザインしているでしょうか? CSSでスタイリングされていない素のHTMLフォームは、当然ですがデザイン性にとぼしいものです。また、入力エリアが狭いため、ユーザビリティも高いとは言えません。 フォームにはお問い合わせフォーム、申し込みフォーム、予約フォームなどいろいろありますが、共通するのは「ユーザーにアクションを起こしてもらう重要な要素である」ということです。しかし、フォームへの入力は、ユーザーにとって面倒な作業です。そのため、極力簡単に入力できるようにして、ユーザーの負荷を軽減する必要があります。 それでは、どうすればユーザーの負荷を軽減させることができるでしょうか? そのためのポイントが以下の6つです。 要素を整列させる 適度な余白をつくる ディテールを作り込む デザインされたボタンを使う 住所を自動入力

    第2回 アクションを起こしてもらえるフォームのポイントは? | gihyo.jp
  • 短期記憶とWebユーザビリティ

    人間の脳はウェブサイトの閲覧で要求されることの多い抽象的思考やデータの記憶には最適化されていない。ユーザビリティのガイドラインの多くは認知的な限界によって決まってくる。 Short-Term Memory and Web Usability by Jakob Nielsen on December 7, 2009 人というのは短期記憶にそれほど多くの情報を保持することが出来ない。このことは複数の抽象的、あるいは普段目にしないデータを次々と大量に受け取るときには特に当てはまる。ユーザーはいかに簡単に忘れてしまうか、デザイナーが忘れてしまわないように、なぜ我々の脳がそこまで劣っているように見えるのかをおさらいしてみよう。 人間が毛むくじゃらのマンモスを狩ることを得意とすることは注目に値する。我々人が牙も鋭い爪も持ってないことから考えると、我々の祖先が黒石英の石器だけを使って、オーストラリアから

    短期記憶とWebユーザビリティ
  • 10 Usability Heuristics for User Interface Design

    Summary: Jakob Nielsen's 10 general principles for interaction design. They are called "heuristics" because they are broad rules of thumb and not specific usability guidelines. Thank you to Kelley Gordon for designing the visuals and posters included in this article. Thank you to Kate Moran and Feifei Liu for updating the heuristic names, descriptions, and examples.

    10 Usability Heuristics for User Interface Design
  • ヤコブ・ニールセンの10ヒューリスティックス : シーズンIII ウェブユーザビリティの法則 - ビジネススキル勉強会

    どうもこんにちは。真田です。ちょっと前回までをまとめきれてないのですが、次回に向けて。 今回のには出てこなかったんですが、ユーザビリティの評価法でヒューリスティック評価というものがあります。 ヒューリスティックというのは「経験則」という意味で、今まで得た経験を元に共通する原則を見出し、それを元に評価しようというものです。つまり平たく言うと「ユーザビリティの一般的なルール」です。 いろんな人や団体が作っていたりするのですが、中でもヤコブ・ニールセン博士の10ヒューリスティックスが有名です。日語での解説はこちらのに詳しく載っています。 これをざっくり要約してチェックリストっぽいものにしてみました。 次回の勉強会ではこの内容も使ってみたいと思います。 今、どういう状態にあるかを常にユーザに知らせているか。 ユーザになじみのある言葉、習慣で情報を提示しているか。 常にユーザーが動作をコントロ

  • タブキー利用にも対応するフォームのちょっとした改善 (ユーザビリティ実践メモ)

    最近のユーザ行動観察調査(ユーザビリティテスト)では、ウェブサイトの利用、マウスやキーボードの使い方に慣れたユーザも増えてきていると感じます。そこで今回は、ユーザのタブキー利用への対応について考えてみたいと思います。 フォーム制作において、タブキーを使った時にフォーカスが移動する箇所の順番を、気にされていますでしょうか?タブキーを使って入力ボックスを移動した時に、適切な順番で、全ての入力ボックスへ移動できることが期待されます。 タブキーを使って移動するユーザにとっては、適切な順番でフォーカスが移動しない、タブキーで全ての入力ボックスへ移動できないケースが発生した場合、離脱の原因になりえます。 フォーカス移動の順番は、HTMLのtabindex属性で指定することができます。 <タグ名 tabindex=n> またフォーカス移動を指定する場合には、最後の送信ボタンにまで移動できるよう配慮しまし

  • フォームにおける「進む」ボタンと「戻る」ボタン。どのように配置する? (ユーザビリティ実践メモ)

    これまで実践メモではフォームを設計する際に注意すべき点をいくつかご紹介してきました。 フォーム設計についての記事一覧 今回はフォームによく出現する「進む(次へ)ボタン」と「戻るボタン」を配置する際に気をつける点を纏めました。 ウェブサイトにおいては「進む(次へ)」ボタンなど前進するものを右側に、「戻る」ボタンなど後退するものを左側に置くことが一般的になっています。 ユーザは多くのサイトを利用している中でこの配置に慣れていますので、配置が逆になっていると次へ進むつもりがうっかり「戻るボタン」を押してしまうことになりかねません。最悪の場合、これまで入力したものがクリアされてしまい、入力を一からやり直すはめになります。 そういう訳ですから、フォームのボタンを配置する際は「進む(次へ)」ボタンを右側に、 「戻る」ボタンを左側へと一般的な慣習に従う方がユーザに対して親切と言えるでしょう。 2.「進む

  • 充実したFAQで、ユーザの問題解決+態度変容を促す (ユーザビリティ実践メモ)

    FAQに関する過去の実践メモ「FAQの隠れた役割」では、FAQの2つの目的を述べました。 1. ユーザの疑問に答えることで、問い合わせ数を削減する 2. ユーザをサイトのゴールへと導く攻めのコンテンツとして活用する 今回は、特に「攻めのコンテンツ」としての具体的な実践方法をご紹介します。 FAQの中でユーザが関心を持つ項目は、サービスや製品の選定ポイントとなっている可能性もあり、競合他社に勝るための訴求チャンスとしても捉えられます。ユーザにとって問題解決となる情報提供はもちろんですが、その中でうまくサービス・製品の訴求も行うことで、ユーザの態度変容を促すことができます。 とある教材サイトのユーザ行動観察調査では、「仕事と両立できるの?」という誰しもが抱く不安・疑問をFAQの中に出し、その回答として具体的な強みを訴求することで、ユーザの態度変容を強く促すことに成功していました。 方法2 体験

  • ユーザー・インタフェース――経験が新たな理解を生む(前編)

    「覚えやすくて,忘れないのが良いユーザー・インタフェース」(産業技術総合研究所 情報処理研究部門 情報流デザイングループ 主任研究員の増井俊之氏)。「忘れない」は「思い出しやすい」と言い換えてもいいだろう。一度覚えた操作方法をすぐに思い出せればいいのだ。使いやすさは,こうした記憶や理解,判断といった,人間の能力と密接に関係している。 初めて使う製品を目の前にしたとき,何をするだろうか。まずはそれらしく思える操作を試してみる人が多いのではないだろうか。それでうまくいけば,それがそのままその製品の使い方として記憶に残る。うまくいかなければ,いろいろと試行錯誤を重ねて,やがて正しい操作方法に行き着く。不幸にして,どうにもうまく操作できずに,せっかく買ったものを返品したり,部屋の隅でホコリをかぶらせてしまうこともある。 経験から操作方法を思い付く 図1●新しい機器を操作できるまでのモデル ユーザー

    ユーザー・インタフェース――経験が新たな理解を生む(前編)