サイト改善 最初の一歩 「観察」から始めよう
柴田優子 インフォメーションアーキテクト 元々NHK好きの私が最近気に入っている番組。それは、Eテレ（NHK教育テレビ）の「デザインあ」です。子どもに（大人に対しても）「デザインの面白さ」を伝え、「デザイン的な視点と感性」を育むことを目指した番組で、いろんなコーナーがあります。 番組を通して共通しているのは「観察すること」。 オートバイや宇宙服を観察してデッサンする。靴やケーキを分解して、どんな要素で構成されているのか観察する。筆記具の線の違いを観察する。 番組最後のコーナー「デザインの人」でも、様々なジャンルの一線で活躍するデザイナーが登場します。その人達の多くが、「観察してみよう」と語りかけています。 サイトの設計も同じで、「観察する」ことから始まります。 サイトのどこを直せばいいのかなと思ったら、実際のサイトを観察、操作してみますよね。新しいサイトを立ち上げる時にも、そのサイトを使っ
UI Document
情報アーキテクチャ、インタラクションデザイン記述のためのビジュアルボキャブラリー version 1.1b-j (29 June, 2002) based on version 1.1b (6 March 2002) 目次 サマリー バージョン履歴 はじめに 基本概念 基本要素：ページ、ファイル、そしてそれらの集まり 関係性の記述：コネクターと矢印 すべてを一度に：並列セット 一時中断：連続ポイント 共通要素：エリアと反復エリア 再利用可能な要素：フローエリアと参照 条件要素の基本概念 選択せよ：意志決定点 探検者(パスの誘導)：条件的なコネクターと矢印 複数の選択：条件的な分岐 一つか複数か：条件的な選択肢 一つの決定、複数のパス：クラスター 制約条件あり：条件的なエリア 結論 ダウンロード可能なパーツライブラリ サマリー ダイアグラムはウェブ開発チーム内で情報アーキテクチャやインタラク
ユーザビリティーに関連するフリーテンプレート – creamu
zef[a]mediaというサイトで、ユーザビリティーに関連するフリーテンプレートが配布されています。 ワイヤーフレームやプロトタイプ、タスクフローなどがPDFやExcel、Visio形式でダウンロードできます。 Since then I’ve had numerous requests from User Experience professionals around the world for copies of my information architecture templates and artefacts. とのことで、このIAのテンプレートをほしいっていうニーズがたくさんあったようですね。 参考にしてみてはいかがでしょうか？ » Free UX Templates 1Q84を買いました。ちょっとだけ読んだぞ。少しずつ読んでいこうっと。
ウェブサイトをユーザーにリラックスして楽しんでもらえるようにする10のTips
ウェブサイトをユーザーにリラックスして楽しんでもらえるように、より使いやすくする10のTipsをWeb Designer Depotから紹介します。 10 Tips to Create a More Usable Web 以下、各ポイントのピックアップです。 1. Creating active navigation アクティブ機能をもったナビゲーションの設置 サイトのどのセクションにいるか、ユーザーに明示できるナビゲーションを設置します。 2. Clickable labels & buttons ラベルやボタンをクリック可能に フォームのラベル（label）やボタン（button）に、クリック可能であることが分かるようにスタイルシートで設定します。 例： <textarea name="code" class="css" cols="60" rows="5"> label, butto
Apple vs. Microsoft - A Website Usability Study
Today we're going to compare the websites of two monumental companies: Apple and Microsoft. The two giants pride themselves for producing cutting edge consumer and business products, and are leading the developments in software and hardware. But what about their websites? How do they both compare, and more important, which one is better and more usable? Well, in this article we'll take a look at b
就活生が本当に見ているもの--失敗しない「新卒サイト」の作り方とは？
4月になり、街を歩くとフレッシュな新入社員の姿を見かけるようになりました。また、早い企業では翌々年度の採用活動について考える時期でもあります。 さて今回は、新卒者向けの就職情報サイト（新卒サイト）を検証しました。被験者は、就職活動中の大学生5名（男女混合）です。学生たちが普段使っている「リクナビ」「マイナビ」サイト内で、どの要素が見られ、どの要素が見られないのかを、アイトラッキングツールを使って分析します。なお学生たちには調査の目的は明かされておらず、あくまで普段通りの情報収集をしてもらいました。 今回の調査にて、被験者たちに共通するある傾向が見えてきました。次年度の新卒サイトを作る際にご参考いただければと思います。 新卒学生に「刺さる」写真 他サイト同様、今回の調査においても、学生たちは画像に注目していました。以前、本コラムの中で「転職求人サイトにはどんな画像が適しているのか」という調査
国内19社のペルソナ利用事例にみる特徴と改善点 | カスタマーエクスペリエンスで道は開ける～フォレスター・リサーチのWebサイト方法論
[コラム]カスタマーエクスペリエンスで 道は開ける ～フォレスター・リサーチのWebサイト方法論 by ジョナサン・ブラウン フォレスター・リサーチのシニア・アナリストであるジョナサン・ブラウン氏によるウェブコラム。 主にカスタマーエクスペリエンスとマーケティングの側面から企業のビジネスをサポートしているジョナサン氏が、企業サイトにおけるユーザー志向の考え方や方法論をさまざまな切り口で解説します。 このコラムを読んでくれているみなさんは、「ペルソナ」という言葉をすでに何度も聞いたことがあるでしょう。新聞記事などで他社のペルソナ事例などをご覧になった人はたくさんいるでしょうし、ウェブデザインのプロジェクトのために実際にペルソナを作ってみようと決めた人もいるでしょう。 しかし、数年前だったら、日本ではペルソナを知らない人が多かったでしょう。確かに、この2～3年の間に、日本市場で多くの企業がペル
ユーザビリティテストツール『Silverback』
ユーザビリティテストツール『Silverback』 先日、SwapSkills+Plus × WDE-expressで行われた「ユーザーテスト：ワークショップ」に参加してきました。 ユーザビリティテストツール『Silverback』を利用してのワークショップだったのですが、このSilverbackなかなか面白いソフトです。 基本的にはユーザーの操作を記録する画面キャプチャのソフトなのですが、MacのiShightを利用してユーザーの表情と音声も同時に記録します。 ユーザーにはつまずいている操作や悩んでいるところを発言してもらうことにより、後で見返した際に客観的にサイトの問題点を見返すことが出来ます。 ワークショップでは「モデレーター」「スクリプター」「被験者」に分かれて行われました。 モデレーターが進行係で、被験者に対してタスクの説明をし、被験者がつまづいているようだったら何につまづいてい
ニコンの製品情報のレンズの分類が変わった: "Haniwaのページ"作者のblog
皆様、たくさんのコメントをありがとうございます。少しずつお返事しますのでもう少しお待ちください。m(_ _)m さて、関東地方南部では桜が満開で、かつ今日が入学式の学校も結構あるようだ。満開の桜の下で記念写真を撮れるのはうらやましい。もちろん、フィルムでも記念写真撮ってね（はぁと）。フィルムでの記念写真というと中判カメラが欲しいなぁ(笑)。 話は変わって、最近、ニコンのサイトの製品情報でニッコールレンズの分類がちょっと変わった。 以前は、 「デジタル一眼レフカメラ専用 DXニッコールレンズ」 「オートフォーカス ニッコールレンズ」 「マニュアルフォーカス ニッコールレンズ」 という分類だった。 http://www.nikon-image.com/jpn/products/lens/index.htm の2008年2月10日のWeb Archives参照 今現在は、 「オートフォーカスレン
サイト公開前に役立つ２５のユーザビリティチェックリスト:phpspot開発日誌
25-point Website Usability Checklist | User Effect サイト公開前に役立つ２５のユーザビリティチェックリストが公開されていましたのでメモしてみました。 サイトの公開前にチェックリストとして使うといいかもしれません。 アクセシビリティ 1. ロード時間が速いか？(60KBぐらいがベター) 2. テキストと背景のコントラスト調整(差異が低く見にくくないか) 3. フォントサイズが読みやすいサイズか？行間、文字間は適切か？ 4. Flashやアドオンは控えめか？ 5. 画像に適切なALTタグが指定されているか？ 6. カスタマイズした404ページがあるか？デフォルトは非常に不親切 7. カンパニーロゴが分かりやすい位置におかれているか？ 8. キャッチフレーズが適切に設定されているか？ 9. 5秒で大体どんな内容が分かるものになっているか？ユーザは
ホテル宿泊予約のWebサイト、満足度1位は？
宿泊予約Webサイトで宿泊予約を行った人は、どのWebサイトに満足しているのだろうか。J.D. パワー アジア・パシフィックの調査（4つの要素で評価）によると、総合満足度で1位だったのは「じゃらんnet」で675ポイントを獲得した。じゃらんnetは「サポート体制や情報提供」「予約／変更手続き」「サイトの使い勝手」でトップの評価を得た。中でも「サポート体制や情報提供」の満足度は、2位以下を大きく上回った。 2位となったのは「一休.com」（655ポイント）で、「宿泊に関する情報」でトップの評価。3位の「楽天トラベル」（645ポイント）は、すべての要素で業界平均を上回った。ちなみに旅行会社が運営するWebサイトは「JTB」（618ポイント）が6位、「近畿日本ツーリスト」（606ポイント）が7位にランクインした。 宿泊予約をWebサイトで行っている人は、口コミ情報などを閲覧しているのだろうか。W
ヤフー VS グーグル--見られるリスティング広告はどっち？
前回の記事にて、ユーザーが「見る広告」「見ない広告」について検証しました。その中で、「Yahoo! JAPANの旧デザインではリスティング広告が見られていないが、新デザインではどうだろうか」という疑問を投げました。今回はそのリスティング広告について、再度検証しました。 画像1：Google（左）とYahoo! JAPAN（右）の検索結果画面。赤枠で囲ったリスティング広告欄のデザインが異なる。（※画像をクリックすると拡大します） 上の画像1は、GoogleとYahoo! JAPAN、それぞれのリスティング広告欄です。Googleでは、リスティング広告欄に黄色の背景色がひいてあるデザインとなっています。一方のYahoo! JAPANは、今まではGoogleと同じデザインでしたが、前回のテスト（実施日は2008年11月26日）以降、リスティング広告欄の背景色がなくなり、オーガニック検索結果（通常
DWI: Figures from the Book
This collection contains all of the figures (565 images) from the Designing Web Interfaces: Principles and Patterns for Rich Interaction published by O'Reilly Media by Bill Scott and Theresa Neil. This material is available for your presentations or other derivative works provided you respect the Creative Commons license and provide attribution to this work. An attribution usually includes the tit
ウェブインターフェイスの６原則
既に英語版が発売されている「Designing Web Interfaces: Principles and Patterns for Rich Interactions」。書籍のブログとFlickr コレクションには UI に関する豊富な例が紹介されていて、これを見ているだけでも楽しめます。 主にウェブアプリケーションを対象にした書籍ですが、企業サイトやショッピングサイトの構築際も参考になる点は幾つもあります。本は14章に分かれており、それぞれ異なるインターフェイスを紹介しているわけですが、この 14章を大まかに 6種類の原則にまとめることが出来ます。 単刀直入に アウトプットがあるところにインプットが出来るようにする。ページ単位ではなく、ページの中の情報単位での操作を可能にする 軽量化 ファイルサイズだけではなく、物理的な動作や精神的な負担を軽減するような UI つくりを心がける ひと
http://blog.iaspectrum.net/UserExperienceDeliverables.html
See related links to what you are looking for.
離脱されない携帯サイトのフォーム作成術 (ユーザビリティ実践メモ)
みなさんは携帯サイトの会員登録を行う際に以下のような経験はありませんか？ ・入力エラーが発生した。 ・次ページの読み込み中に接続不良となった。 弊社のユーザ行動観察調査では、会員登録時に上のような状況に直面すると、多くの人が会員登録をあきらめてしまう様子が観察されています。 今回はこのようなトラブル発生を防ぎ、「離脱されないフォーム」を実現する上で重要となるポイントを２つご紹介します。 フォーム入力例を適切な位置に配置する フォーム内の各項目に入力例を明示することでエラー発生を防ぎます。ごくごく当たり前のことですが、PCサイトに比べてコンテンツスペースが少ないことを理由に、携帯サイトでは「入力例が省略されたフォーム」が多く見受けられます。 また、入力例の配置にも注意が必要です。たとえ入力例が配置されているフォームであっても、下図の左側のように入力欄の下に配置しているものは十分と言えません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大阪ガス行動観察研究所
IDEA * IDEA
IDEA * IDEA
Home
