ユーザインタフェース 第4回 ナビゲーション.

Slides:



Advertisements
Similar presentations
セッション管理 ソフトウェア特論 第 8 回. ここでの内容 セッション管理の基本を知る。 HttpSession の使い方を知る。
Advertisements

サイトブリッジ株式会社 2014年月1 6日 ZOMEKI を利用した サイト制作の手順. Web サイトの構成 Web サイトの構成要素 ■ デザイン ・ベースカラー、セカンドカラー、アクセントカラー ・イラスト調、写真調 ・派手なトーン、地味なトーン ■ レイアウト ・3カラム、2カラム、1カラム.
1 ブログ操作マニュアル 2008 年 2 月 15 日作成:株式会社ちらし屋ドットコ ム. 2 ■ ログイン ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi ○ ○ ○ ○ ○ com/cgi-bin/mt.cgi へアクセスし、 ユーザー名、パスワードを入力し、サインインをクリックする。
ユーザインタフェース 第 2 回 ユーザ行動の分析と「看板」のデザ イン ー まずは市場(ユーザ)を知り、 市場が望む商品を提供す る ー.
1 検索 ● 検索: 特定の文字列を探す ⓪検索を行う範囲を限定するときは、範囲選択をする。 ① 「ホーム」タブ⇒「編集」⇒「検索」タブとクリックする。 ②「検索する文字列」欄に検索したい文字を入力する。 ③「次を検索する」をクリックする。 ③ ‘ 「検索された項目の強調表示」⇒「すべて強調表示」とクリックすると、
東北大学全学教育科目 情報基礎 A 第6回 文書の作成 Word の使い方の簡単な説明 担当:大学院情報科学研究科 塩浦 昭義 1セメスター 木曜1,3講時 経済学部・法学部.
ユーザインタフェース 第 5 回 パンくず. パンくずリスト ユーザがサイト内のどこにいるか を示す もの – 家への帰り道を示すためにパンくずをヘンゼル が道に落としながら歩いた寓話.
Internet Explorer v7,v8 の主な機能
Microsoft Office 2010 クイックガイド ~OneNote編~
最終原稿確認日: HP開始日: 月 日 ページ構成案 クイックプラン 4P ベーシックプラン 5P スタンダードプラン 7P トップページ
エクセル(7)の目次 関数の書式 関数ウィザードの使い方 四捨五入/切り上げ/切り捨て IF関数 問題(1) 問題(2) 問題(3)
情報処理 第12回.
ブラウザの基本操作 前のページに戻る ブラウザの左上にある 「戻る」ボタンで、自分がたどってきた一つ前のページに戻ることができます。
情報処理 第8回.
発生生物学特論 PowerPoint の使い方
電子書籍を さがす どんな書籍があるの? Maruzen eBook Libraryは、学術機関向け和書の電子書籍提供サービスです。
パソコン教室(Word) ワークフロア清柳
計算機リテラシーM 第2回 メール 伊藤 高廣.
情報処理基礎 2006年 6月 1日.
Lync 会議 Lync 会議に参加する Lync 会議をスケジュールする 会議のオプションを設定する
Lync Web App クイック リファレンス カード: 会議にコールインする
プレゼンテーション用ソフトウェア Impress
PHPエディタによる 情報システム演習 01.
CRM とは? CRM (カスタマーリレーションシップマネジメント) とは、その名が示すとおり、「企業と顧客の双方の長期的な利益のために、見込み客を含む顧客 (カスタマー) との関係 (リレーション) を管理する包括的な方法」です。最近の CRM システムでは、顧客とのやり取りにかかわる情報を収集し、あらゆる顧客管理の機能や他のデータと連携させることができます。
文字書式設定(1) 方法1: ①文字書式を設定したい文字列を選択する。 ②「書式」メニュー → 「フォント」とクリックする。
情報理工学部 情報システム工学科 ラシキアゼミ3年 H 岡田 貴大
5.WEKOコンテンツ登録 準備 マニュアル Version 2.1
オンライン英単語・リスニング 学習ソフト 佐々木研究室 N02k1114 北隅 麻実.
ユーザインタフェース 第6回 トップページのデザインの難しさ.
プレゼンテーション用ソフトウェア Impress
稚内北星学園大学 情報メディア学部 助教授 安藤 友晴
Microsoft® Word 2010 トレーニング
『CX Schedule for Domino』 画面遷移
WebCluster スライドショーで見る操作ガイド
セッション管理 J2EE I 第9回 /
EBSCOhost 詳細検索 チュートリアル support.ebsco.com.
アクセスログ解析 専修大学 ネットワーク情報学部.
Microsoft Office クイックガイド ~OneNote 2013~
Javaによる Webアプリケーション入門 第9回
(Wed) Edited by KON IT講習会 一太郎編.
Microsoft Office 2010 クイックガイド ~OneNote編~
Netscape Communicator Eudora Microsoft Word
スマホでクリッカー(1) clickest を使ってみよう.
InternetExplorerを起動・・・
情報処理 第4回.
明日の授業でも作成を継続する予定です 2017/11/13、2017/11/14
Microsoft Office クイックガイド ~Outlook 2013~
Microsoft Office クイックガイド ~Outlook 2013~
諸連絡 USBメモリの販売について 日時:6月23日(月)授業開始前 商品:プリンストン社製32MBのUSBメモリ
ユーザ・インタフェース 小テスト 第5回.
情報処理概論Ⅰ 2007 第5回 2019/4/7 情報処理概論Ⅰ 第5回.
情報スキル活用 第4週 基礎技術-4 : その1(タグのまとめ).
緑商事株式会社 組織についての説明 組織概要 お問い合わせ先 このテンプレートの使い方 パンフレットのサブタイトルや組織のキャッチ コピー
すべて読む Microsoft SharePoint ニュース
情報検索演習 第1回補足資料 授業Webサイトをお気に入りに追加 2006年9月27日 授業資料をダウンロード 後期 水曜4/5限
Webアプリケーションと JSPの基本 ソフトウェア特論 第4回.
ユーザーマニュアル - スマートフォン向け -
ここにタイトルを入力 ここにサブタイトルを入力 草原 (初級)
文字書式設定(1) 方法1: ①文字書式を設定したい文字列を選択する。 ②「ホーム」 → 「フォント」部の右下の矢印とクリックする。
Microsoft SharePoint Online の Web サイトを カスタマイズする方法
情報処理 第13回.
Microsoft® Office® 2010 トレーニング
情報検索(4) 検索エンジンを用いた演習 教員 岩村 雅一
手順:以下のスライドとノートを使用してプロジェクトを作成します。
回転する歯車 プレゼンテーション プレゼンテーションのスライドショーを開始 (F5 キー) すると、アニメーションが再生されます。
会社名 製品とサービス ここには貴社の社是を記述します。
スライドの終わりまでテキストが繰り返しスクロールされます • スライドの終わりまでテキストが繰り返しスクロールされます •
COPYRIGHT© SHIKAMANET, ALL RIGHTS RESERVED.
ユーザーマニュアル - PC向け - TOTO水栓金具品番特定システム見つかるちゃん TOTO株式会社 1
タイマを開始するには、[スライド ショー] メニューの [実行] をクリックします。
Presentation transcript:

ユーザインタフェース 第4回 ナビゲーション

ナビゲーションの目的 手がかり を与える(先週「ナビゲーションの意義」) ここに 何があるか を示す サイトの 使い方 を示す 手がかり を与える(先週「ナビゲーションの意義」) 自分がどこにいるか、どこにいけばよいか ここに 何があるか を示す サイトの 使い方 を示す 何から始めるべきか、どんな選択肢があるか なんとなくわかる(どうせ説明を読まないので重要) サイトを構築した人への 信頼感 を与える ユーザは「こいつら本当に分ってるのかね」と値踏みしながらアクセスしている 再訪してもらえるサイト構築にはナビゲーションが有効

Webナビゲーションの慣例 ナビゲーションには、誰もが想定する慣例 Webナビゲーションの慣例は印刷の世界から 道路標識は、道の角 印刷物ではページ番号は余白 Webナビゲーションの慣例は印刷の世界から サイトID: このサイトが何者かを示すロゴ セクションとサブセクション: サイトの構成を示す ユーティリティ: 検索ツール、買い物かごなどの道具 現在地の表示 ページ名 ローカルナビゲーション:現在の階層で選択できるもの 最近はflashアニメーションを使うものが多い

ページ名 サイトID 現在地表示 セクション ユーティリティ テキストによるローカルナビゲーション Flashによるローカルナビゲーション

同じ業種は同じような 外観 慣例に 従っている 同じ業種は同じような 外観 慣例に 従っている

辞書サイト 機能は異なるが,外観は同じ

同じ外観にすると 使い方を説明する必要がなくなる 使い方で,ユーザを惑わせない,考えさせない 単語の意味 発音記号(ときには,発音を音声でデモ) 例文とその訳 使い方で,ユーザを惑わせない,考えさせない

同じ外観では, 他のサイトに勝てない? 慣例は守る ユーザに考えさせないため オリジナルの機能は,慣例を守りながら提供

グローバル・ナビゲーション (永続的ナビゲーション: persistent navigation) サイト内のあらゆるページに 首尾一貫 して表示される一連のナビゲーション ユーザはそのサイトにまだ滞在していることを認識できる ナビゲーションの使い方の把握が一度で済む

グローバルナビゲーションの例

グローバルナビゲーションの要素 トップ/ホーム サイトID セクション ユーティリティ 検索 グローバル ナビゲーションは すべてのページに [例外] トップページ 入力用フォーム

サイトID サイトIDは、Webサイトの建物名 よく知られたロゴを使うべき 位置も慣例に従う ユーザに、このサイトにいる ことを認識させるべし よく知られたロゴを使うべき IDらしく見えること 位置も慣例に従う 最上部、通常は左上の隅

セクション:サイト内の主要なセクションへのリンク ユーティリティ:サイトを使用するのに役立つ要素 グローバルナビゲーションに含めてよいのは、 利用者が頻繁に使いそうな、せいぜい3つか4つ

トップ/ホーム: トップページへのリセット・ボタン トップ/ホーム: トップページへのリセット・ボタン 迷子になってもトップページに戻れる サイトIDをトップページへのボタンにする ただし、この慣例を知るユーザは、まだ少数 「Top」、「Home」というリンク 検索方法  : サイト内を検索する手段 検索の範囲を限定するような検索手段は用意しない Amazonは、いかなる商品を検索ボックスに指定しても正しい結果を出す

優れたグローバルナビゲーション 深い階層までナビゲーションを用意しておく ページ名は道路標識 現在地はここ たいていのサイトは2層ぐらいまでしかナビゲーションを用意していない ページ名は道路標識 ページの中で最も大きい フォント を使う あるべきところに置く。人は 上 にあることを期待 どの ページ にもページ名を置く ページ名は 直前にクリックしたもの と一致させる 現在地はここ 2つ以上  の視覚効果で目立たせる 色の反転、太字など

このサイトで,サイトID,検索, セクション,ユーティリティは