ユーザインタフェース 第6回 トップページのデザインの難しさ.

Slides:



Advertisements
Similar presentations
1 ようこそ ! 以下を参考に音声設定を行ってください 1. バーの一番上にある赤い 矢印のボタンをクリックして 広げます 。 2. Settings ( 設定 ) を選択します 。 3. デバイスを選択してください 。 4. しゃべってみましょう.
Advertisements

サイボウズ株式会社 2016/4月 版 「サイボウズ Office on cybozu.com」 すぐできるBOOK -スケジュール 編-
サイトブリッジ株式会社 2014年月1 6日 ZOMEKI を利用した サイト制作の手順. Web サイトの構成 Web サイトの構成要素 ■ デザイン ・ベースカラー、セカンドカラー、アクセントカラー ・イラスト調、写真調 ・派手なトーン、地味なトーン ■ レイアウト ・3カラム、2カラム、1カラム.
1 第 3 章 第 2 節 ネットワークを活用した 情報の収集・発信 5 さまざまな表現方法の工夫 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開 情報 C プレゼン用資料(座学 34 ) 担当 早苗雅史.
Internet Explorer v7,v8 の主な機能
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
ブログを開設してみよう! NPOのためのブログ講座 2008年11月24日(日) 於:西宮市市民交流センター で はじめての
企画書・提案書を書くならおさえておきたい! プレゼン資料お勧めのフォントサイズ
4.ユーザー登録マニュアル              Version 年6月10日 国立情報学研究所.
15秒のプレゼンテーション CMを研究しよう!
PROCESS 14:一般情報(2) InstallShieldLecture
論文の書き方セミナー 第1回「日本語論文の書き方」
検索エンジン最適化.
ブラウザの基本操作 前のページに戻る ブラウザの左上にある 「戻る」ボタンで、自分がたどってきた一つ前のページに戻ることができます。
早稲田大学 山名研究室OB 糟谷 勇児 (名前と所属を入れよう)
6年 国語 ガイドブックを作ろう 効果を考えて書こう.
ユーザインタフェース 第4回 ナビゲーション.
Microsoft PowerPoint98 Netscape Communicator 4.06[ja]
情報処理基礎 2006年 6月 1日.
「ICT社会におけるコミュニケーション力の育成」 研修モジュール C-6:ポスターセッション
ファイルやフォルダを検索する ①「スタート」→「検索」→「ファイルとフォルダ」とクリックする。
動画投稿サイトによる広告 宣伝効果の研究 本多 俊元.
ワークシート6 社会科.
Microsoft PowerPointを使ってみよう
プレゼンテーションの技法 諏訪邦夫.
クイズ 「インターネットを使う前に」 ネチケット(情報モラル)について学ぼう.
メンバー 川島辰吾 木村彰吾 永島康裕 田幸一郎 山下沙綾
ヒューマンインターフェース ~ウェブサイト評価~
第3章 第2節 ネットワークを活用した 情報の収集・発信 6 情報の多様な提示方法 7 構造を工夫した情報の表現方法 8 ウエブページの公開
F5 を押すか、または [スライド ショー] > [最初から] をクリックして、コースを開始してください。
ブログ・SNSの活用を考えよう 2012年 情報C ⑥ .
『CX Schedule for Domino』 画面遷移
WebCluster スライドショーで見る操作ガイド
.COM スタイルシート 調整依頼.
K-POPCD販売に効果的な広告の作成.
平成22年度に実施を予定するインターネットを 用いた研修システムによる研修 ライブ配信受講手順書
HTTPプロトコル J2EE I 第7回 /
パソコン同好会のホームページは今回WordPressに変わったのですが 使いづらいとの声が多いので投稿者用の手順書を作ってみました。
第3章 第2節 ネットワークを活用した情報の収集・発信(4) 情報Cプレゼン用資料(座学35) 担当 早苗雅史
基本姿勢と態度 専門職のビジネススキル レポート作成の基本 ①体裁を整える.
管理画面操作マニュアル <サイト管理(1)> 基本設定 第9版 改訂 株式会社アクア 1.
教育工学を始めよう ~研究テーマの選び方から論文の書き方まで~ (第1章)
すぐできるBOOK -スケジュール編-.
Webサイト制作 第1回 動的なページ.
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
ユーザ・インタフェース 小テスト 第5回.
Shimatterシステムの トップダウン分析
Kinjo Gakuin Univ. © 2007 Motohiro HASEGAWA
プッシュ型メディアによる広告 2012/10/15 情報管理論 企画のための情報分析 川村洋次 教科書ページ 経営情報論.
ウェブを作成する ~鈴木信行~ 年8月.
受講日:   月  日 暗黙知の見える化ワーク 第1回 コミュニケーションとは.
ディスカバリーサービス プリモ ~ Discovery & Delivery ~
すべて読む Microsoft SharePoint ニュース
早稲田大学大学院 基幹理工学研究科 情報理工学専攻 後藤研究室 修士1年 魏 元
御中 ~ WEBサイトアクセス解析レポート.
Microsoft Office クイックガイド ~基本編~
ダスキン サービスマスターの仕事 清潔で快適な環境づくりのお手伝い! 業務向け もっと たくさんある
連絡先 ① ② ③ 作成 平成 年 月 日 名 前 生年月日 住 所 学校・園 家や園での呼び名 平成 年 月 日 ( 男 ・ 女 )
今日は広告のポスターを調べます。.
売れるためのWEBサイト構築.
知識の開発や活用を評価に役立てる 評価システムが知識を行動に変えるのを助けている企業がある。 ↓原理は???
レンタルショッピングカートマニュアル ~ 返品特約設定 編 ~
ホームページを見ているだけで情報が通知される? ~Cookie編~
Microsoft® Office® 2010 トレーニング
情報ネットワークと コミュニケーション 数学領域3回 山本・野地.
会社名 製品とサービス ここには貴社の社是を記述します。
USEDセレクトショップにおける 新規顧客獲得のための広告に関する研究
レジュメの構成 1.はじめに ・このテーマにした理由 ・自分の問題意識 (例)難民選手団は毎回結成 すべきと考える 2.・・・・について
Webデザイン入門  顧客へのメール.
~Ezweb公式コンテンツにメニュー登録されました。
Presentation transcript:

ユーザインタフェース 第6回 トップページのデザインの難しさ

トップページが揃えるべき構成要素 ー 実は いっぱいある ー トップページが揃えるべき構成要素 ー 実は いっぱいある ー サイトの素性と使命 サイトの階層 コンテンツ(何があるのか?)と機能(何ができるのか?) コンテンツと機能の構成を ナビゲーション で表示 検索機能 見どころ紹介 コンテンツの宣伝、機能の宣伝 タイムリーなコンテンツ 多くのユーザを頻繁に訪れさせるには 常に新しい内容 よく使うセクションへのショートカット 登録制の場合のユーザへのサービス 新規なら登録へのリンク、会員なら「ようこそ!○○さん」

機能の宣伝 ようこそ!のメッセージ セクションを示すナビゲーション タイムリーな情報

トップページが満たすべきゴール ユーザが 捜しているもの を表示する ユーザが 捜していないもの も表示する 利用者に スタート地点 を示す ユーザが 捜しているもの を表示する ユーザが 捜していないもの も表示する セレンディピティ(serendipity) を与える 何かを探しているときに、探しているものとは別の価値あるものを見つける能力・才能 利用者に スタート地点 を示す 何から始めれればよいかがユーザにすぐわかる 信頼感 を獲得する トップページを見ただけで去るユーザは多い

ここから始めればよい セレンディピティ (これを買いに来たわけではない)

制作側からの難しい条件 トップページは 「人気の土地」 船頭が多い だれの好みにも合う 必要がある ユーザが必ず見るのはトップページ トップページは 「人気の土地」 ユーザが必ず見るのはトップページ 各セクション担当者は自らへのリンクを置きたい スクロールせずに見える 部分に置きたい 船頭が多い トップページのデザインには多くの人が口を出す ときにはCEOも だれの好みにも合う 必要がある サイトを訪れるすべての人に魅力的であるべき

最初に犠牲になるもの 多くの条件を満たせないので 妥協が必要 もっともよく見失われるのは 何のサイトか? 多くの条件を満たせないので 妥協が必要 もっともよく見失われるのは 何のサイトか? ここが何のサイトから知らないユーザが訪れると何が何だか…?(年寄りは、amazonって、何?) サイトの素性と使命が消えている

初めての訪問者の疑問に即答できるか このサイトは 何だろうか? どんなものがあるの ここでどんなことができるの? このサイトは 何だろうか? どんなものがあるの コンテンツ を示すことができているか ここでどんなことができるの? 提供する 機能 を示すことができているか 他でなく、このサイトでないといけない 理由はあるのだろか? 実は、もうひとつ、答えるべき疑問がある。

トップページの中で2つの重要な場所 タグ・ライン 歓迎の広告 サイトIDに続くスペースにある決まり文句 ユーザは、ここに書かれたフレーズをサイト全体の説明と考える 歓迎の広告 ここでないとダメを印象付ける、このサイトの広告

トップページの メッセージを理解してもらうために 十分な領域を使う 伝えるべき情報をしっかり伝える ページが丸ごと説明文 簡潔さ は保つ 空白や箇条書きを使って見やすく ここが最重要と認識する 部外者 に見せ、トップページの使命が果たされているかをチェック

優れたタグライン 明快 で必要な情報を提供 必要にして十分 な長さ 差別化 とわかりやすい 利点 が表示 明快 で必要な情報を提供 世の中の「今」を知る最高の方法です (twitter) 必要にして十分 な長さ Broadcast Yourself ( YouTube ) 差別化 とわかりやすい 利点 が表示 子どもの教育を考えるお母さん、お父さん、そして先生のために役立つ情報をご紹介します。

トップページが答えるべき最後の疑問 どこから始めればいいのか ? 3つの場合のすべてに答えるべき 無関係なものに埋もれてはいけない どこから始めればいいのか ? 3つの場合のすべてに答えるべき 検索がしたいなら、ここから始める ブラウズするなら、ここから始める 一番お勧めの内容を見るなら、ここから始める 無関係なものに埋もれてはいけない 「最初はココ」と叫びたてる宣伝に埋もれない 見落とされない工夫 ボタンのような表示、メッセージ、色

プルダウンメニューにご注意 省スペースにプルダウンメニューは便利 欠点 すでにリストされる項目が分っていて、そこから選ぶときに便利 クリックしないと見れない ユーザはざっと見れない 斜め読みしにくい すでにリストされる項目が分っていて、そこから選ぶときに便利 [例] 住所で都道府県を選ぶとき

鑑定してみよう 対象: Productopia 次のサイトでユーザになったとして、以下の質問に答えられるかを考えよ このサイトのポイントは何か どこから始めればよいかわかるか 対象: Productopia ショッピング行為で必要な情報をすべてオンラインにしたサイト 専門家の意見を分析して、お勧め商品やコメントを提示

Productopiaが提供する商品情報は丁寧でかつ無駄がない ディジカメの例 「productopiaはこれをすすめる!」と来る。実に簡潔。 お勧めは、「品質」、「価格」、「スタイル」の3つから評価されていて、自分がどれを重視するかで、もう大体買うものがきまってしまう。 「買うときのコツ」についても情報がまとめてあり、画素数の話からはじまって、バッテリ寿命の話、ズームの話 と続く。 読み終わるころにはそれなりの知識を得てさらに賢い選択ができるようになっている。

優れてたトップページ どんなサイトか? どこから始めるか 問題点と改善案 タグラインに工夫 検索から トップページに各記事の書き出しが記載 すべての内容をスクロールなしに見れない 改善案として、記事の見出しだけにして、すべての記事をスクロールなしに見れるようにする。