事例紹介 | 株式会社インフォバーン
UIデザイナーが知っておくべきエンドユーザーの10の特徴
ユーザーの視点に立ってデザインされていないインターフェースは、エンドユーザーに受け入れてもらえないはずだ。そこで本記事では、UIデザイナーが念頭に置いておくべきユーザーの習慣や考え方について焦点を当てる。 つい最近、「Ubuntu Unity」はUbuntuに正式搭載されてから1周年を迎えた。また、「Windows 8」はリリースを間近に控えている。こういった状況のなか、すべてのユーザーインターフェース（UI）は同じように作られていないという事実が明らかになってきている。実際のところ、コンピュータの使い方に革命的な変化をもたらすような素晴らしいUIデザインもあり得るだろうが、エンドユーザーを念頭に置いていないものは、その素晴らしさを証明する間もなく失敗作という烙印を押されてしまうはずだ。 筆者は長年に渡るコンピュータ経験のなかで、ほとんどすべてのLinuxデスクトップと、あらゆるバージョン
主観的にデザインを決定するのは大きな間違い ─成果につながるWebデザイン
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
ページ内リンクを使用する際の注意点 (ユーザビリティ実践メモ)
しかし、ユーザはリンクをクリックする際、そのリンクが「別ページへの移動」なのか「同一ページ内でのリンク」なのかは事前に把握していません。弊社のユーザ行動観察調査では、ページ内リンクをクリックしたユーザが、クリックした先のコンテンツをスクロールしながら閲覧する途中で、自分がクリックの前と同じページにいる（ページ内リンクだった）ことを知って混乱する行動が多く見られます。 これは、自分がページ内の移動をしていることや、現在自分がいる位置について充分なフィードバックを得ないままユーザが行動することで起こる混乱と考えられます。 ページ内リンクの利点を活かしつつ、ユーザに「現在自分がどういう状態にいるのか」を伝え、混乱を最小限に抑える方法としては以下のようなものがあります。 【クリック前】 リンクのすぐそばに、上下の動きを示すアイコンを置くことによって、そのリンクが同一ページ内での移動であることを伝え
2010年版 ユーザーインターフェース（UI）・ユーザビリティ必見サイト/必読書 - Feel Like A Fallinstar
ウェブサイト 実はユーザー中心設計やユーザビリティ、インターフェースについてちゃんとまとまったサイトは国内には少数です。 ここに挙げたサイトはどれも大変充実したものだと思います。 ※残念ながら、海外の記事を紹介しているブログでよいものは見つからず。 劣化コピペサイトを紹介するのも気が引けるので割愛しました。 ヤコブ・ニールセンのAlert Box ユーザビリティ・ユーザ調査の世界的権威であるヤコブ・ニールセン博士のナレッジを発表しているサイトです。 実際の調査結果、そこに対する考察も含め、とてもよくまとまっています。 アップル ヒューマンインタフェースガイドライン Max OS Xのためのインターフェース資料に始まり、アプリケーションをデザインしている間、心に留めておくべき基礎となるデザイン原則がまとまっています。 もちろん、Windows / Linusユーザーにとっても必見。 ユーザビ
今でも役立つ、ペーパープロトタイピングのススメ - Feel Like A Fallinstar
ここ数年、オンラインの描画ツールが現れ、Dreamweaverのようなソフトも、CSSやJavaScriptのライブラリもどんどん整って来ました。 ある程度のデザイン・HTMLなら、その場で作れる環境が出来上がりつつあるのじゃないでしょうか。 しかし、実際にそうやって出来た画面がベストかというと、そうでもなかったりします。 そんなわけで、今日はプロトタイピングについて少しばかり。 これは、コンサルタントの話しなのですべての職種で当てはまる話ではないかもしれませんが・・ 大体、画面設計が上手だったりUI理解に優れている人は、紙の上でラフを作って試行錯誤を行うことが出来る人です。 （もちろん、100%がそうなわけではないですが・汗） じゃぁ何でそんなことになるか、ということなんですが4つほど原因があるのかな、と個人的には思っています。 とにかく圧倒的に素早い 最初の画面にこだわらず、どんどん「
別ウィンドウを開くことの是非｜ウェブユーザビリティ向上を支援するWebsite Usability Info
（2012年1月28日追記） この記事内容をアップデートした記事を、別途公開しました。「別ウィンドウを開くことの是非 (その2)」をご参照ください。 Webサイトを制作していると、<a href="xxx" target="_blank"> などとマークアップして、リンク先ページを別ウィンドウを開くようにしたいと思うことがあるでしょう。たとえば、以下のようなケースです。 別サイトにリンクする場合 (できれば 別サイトを回遊した後、自サイトに戻ってきてもらいたい) 開いたページであれこれ操作が予想され、その間、元ページは残しておきたい場合（ブラウザの [戻る] ボタンではすぐに戻れないケースなど） お気持ちはよくわかるのですが、ユーザビリティやアクセシビリティの観点で考えると、リンクは別ウィンドウを開くべきではないと考えます。理由は、以下の通りです。 初心者ユーザーやシニアユーザーは、別ウィ
左ナビと右ナビはどっちが良い？ (ユーザビリティ実践メモ)
ウェブサイトを設計する際に、ナビゲーションメニューを左右のどちらに設置するかで悩んだ経験はありませんか？ 弊社でウェブサイトを設計する際には、「コンテンツ」と「ナビゲーションによる誘導」のいずれが大事かによって設置位置を判断しています。 ■ナビゲーションによる誘導が重要な場合はナビゲーションを左に 例えばアマゾンなどの巨大ECサイトではナビゲーションによる誘導が重要であるため、ナビゲーションが画面から切れてしまうことのないよう、左側にナビゲーション設置しています。 上記のほかの考え方として、ユーザがそのサイトと同時に利用する競合サイトと同じ位置にナビゲーションを設置する、という考え方もあります（ユーザの慣れや先入観に配慮する）。 ナビゲーション設置時には「コンテンツ」と「誘導」のいずれが大事なのかによって設置位置を調整するようにしましょう。
不況時代に適した費用対効果重視型ウェブサイトリニューアル手法
◆本コラムのサマリ ・限られた予算の中で最大の成果を創出する場合におすすめなウェブサイトリニューアル手法として、「シナリオベースリニューアル」がある。 ・「シナリオベースリニューアル」とは、ウェブサイト内のシナリオ（ユーザーー心理と行動導線）に注目し、シナリオ上にある問題点の大きさと改善コストや改善による期待効果の大きさを考慮して、費用対効果が高い部分に特化したリニューアルを行うことを指す。 ・ウェブサイトの画面設計や、ウェブサイト外からの集客施策を検討する上でもシナリオは活用できるため、費用を抑えつつ中途半端ではなく着実に成果にフォーカスしたリニューアルを実施することができる。 費用対効果が高いウェブサイトリニューアル手法の必要性 2008年末からの世界同時不況は国内企業に直接・間接的に大きな影響を与えており、2009年は新規投資の見直し・凍結が相次ぎ企業活動が縮小する年となりそうです。
バナーブラインドネス | Accessible & Usable
公開日 : 2009年2月5日 (2011年1月11日 更新) カテゴリー : ユーザビリティ / 情報設計 (IA) バナーブラインドネス（banner blindness）という言葉をご存知でしょうか？直訳すると「バナーを視認できない」という意味になりますが、より端的に言うと、Webサイト（ホームページ）上のユーザー行動において、「バナー画像がユーザーに無視される」現象を言い表した言葉です。 よく、リンクをバナー画像にするケースがありますよね（あるサイトから、特別なサイトに飛ぶ場合など）。サイト運営側としては、リンクを（テキストではなく）見栄えの良いバナー画像にすることで、よりアピールできるはず（クリックを誘発できるはず）、と考えがちです。 ところが、様々なプロジェクトでユーザビリティテストを実施してみると、せっかく労力をかけて作ったリンクバナーが、ユーザーにまったく見られないケースが
ウェブサイトを使いやすくするための43の法則
R6K.Net Pressにエントリーされている「あなたが避けるべきウェブデザインの43のミス」の意訳です。 43 Web Design Mistakes You Should Avoid 上記エントリーによると、よく見かけるデザインのミスリストは10個くらいが通常ですが、それでは足らなく、増やしていくうちに43個になったそうです。 43の法則は、常識として浸透しているものもあれば、論争になるようなものもあります。 個人的には、いくつかは条件しだいでと思いますが、概ね相違無いです。 The user must know what the site is about in seconds. サイトに来訪したユーザーは、数秒で何のサイトか知らなくてはいけません。 Make the content scannable. コンテンツが一覧できるリストが必要です。 Do not use fancy
Eyetracking points the way to effective news article design
When one of world’s best-known usability experts, Jakob Nielsen, conducts eyetracking research to test what his usability work has shown, the results generate some beneficial tips for online editors. This is what happened in late 2005, when Nielsen and Kara Pernice Coyne, the Nielsen/Norman Group’s director of research, conducted an eyetracking test with 255 people in New York City. With a little
第26回 どこにメニューをおくべきか，どこが画面の一等地か：ITpro
Webサイトのデザインの中で，ここ2年で大きく変わりつつある「常識」があります。それは，「メニュー（索引）」の位置と「一等地」の場所です。ユーザーの閲覧環境が加速度的に変化しているという認識の下で，それでも最良のユーザビリティを提供しようとするなら，どのようなことを考えておく必要があるでしょうか。 左メニューと右メニュー（視線との交差）のどちらがベスト？ まだモニター画面の大きさが小さかった時代（1995年前後），情報へアクセスしやすくする「メニュー」の位置は，ほとんど誰が考えても左側にあり，議論もされなかったように記憶しています。確実に画面の中に入り，ユーザーも基本的に左端にさえ注意を向けていれば，大切な情報にたどり着けるという「暗黙の常識」が存在していたかのような時代でした。 しかしここ数年，メニューが左側にあると本当に操作性が良いのかという議論を聞くようになり，大手のWebサイトでも
ブラウザウインドウの大きさチェックや設定を行う「browsersize.com」
サイトを作成する際や閲覧チェック時に気にしなくてはならないのがブラウザのウインドウの大きさ。いろいろな環境の各種ブラウザで見た目をチェックしてみようと思ってもなかなか面倒で、ついついおろそかにしがち。 そこで役立つのが「browsersize.com」というわけ。自分のブラウザのサイズを任意の大きさに設定する「setmy.browsersize.com」と、自分の現在のブラウザサイズを確認する「whatsmy.browsersize.com」の2つで構成されており、いろいろな局面で便利に利用できます。 browsersize.com http://www.browsersize.com/ setmy.browsersize.com http://setmy.browsersize.com/ 上記サイトでは「http://setmy.browsersize.com/<幅>x<高さ>」とすれば
ウェブページを見る目の動きは「F」パターン - GIGAZINE
つまり人間はページを見る場合、「F」の字を描きながらページ全体を見ているというわけ。 これは232人の被験者を対象に行われたもので、大体1ページから重要なコンテンツを見つけるために2秒から3秒というものすごい短時間に驚異的な速度でページを見ていくそうで。 で、その視線の経路をビジュアル化したのがこの画像。全部で3段階のステップを踏んでおり、各段階を踏んでいった結果、「F」の字を描くというわけ。大体どのユーザーも一貫してこのパターンを踏んでいるらしい。以下がその全3段階の説明。どういうレイアウトが効果的なのかが分かります。 F-Shaped Pattern For Reading Web Content (Jakob Nielsen's Alertbox) http://www.useit.com/alertbox/reading_pattern.html 第1段階： 訪問者は最初にページの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ケータイ公式サイト&ダウンロードサイトのユーザビリティ6つのポイント（第4回） | モバイルサイト構築のユーザビリティいろは
モバイルサイトを見やすくする絵文字活用&テキストレイアウトのポイント（第3回） | モバイルサイト構築のユーザビリティいろは
ユーザーインターフェイスデザインの参考になるサイト集
NBPC ケーススタディ1：埼玉県 Webリニューアルに「サイト診断」を活用使い勝手を大幅に改善させた