第一部分 認識資訊架構
資訊架構學(IA)是一種使得資訊「好找」(尋找資訊)、「好懂」(理解資訊) 的設計法則。
→ 資訊架構看問題的兩個角度:
- 人們如何覺察資訊空間(information environment)
- 在資訊空間中如何規劃使得可尋性(findability)與可理解性(underatandability)達到最佳化
(註) 資訊空間(information environment): 由資訊所建構的空間。泛指資訊產品或服務,例網站、app、資訊生態系統等
第一章 資訊架構要解決的問題
-
資訊超載
隨著資訊技術進步,資訊越來越多(例:itunes從單純的音樂管理工具轉為多媒體平台甚至是資訊生態系統),但當資訊過多時 signal-to-ratio 降低,導致人們對事物的理解與判斷力受到干擾
-
更多存取資訊的方式、管道、工具
生活中的新型態資訊裝置越來越多(電腦、手機、耳機、手錶),要使人們無論在哪裡、如何存取資訊的使用經驗都一致且可延續
(註) 資訊去物質化(dematerialization): 將資訊從人造載體分離出來。例:將音樂從唱片中分離,轉為數位資訊。
以資訊架構學的觀點來看
→ 跨媒介管道的一致性:
- 設計者必須先定義語意結構(semantic structures),這個抽象結構即使套用在不同媒介時,還是能合理的解釋整體概念
- 當需要使用多重管道服務使用者時,跨管道的經驗必須一致。例: 銀行手機app、銀行網站、客服電話,都要體驗到一致的語意結構
→ 系統性的思考:
- 必須了解各式各樣的互動管道之間如何互相影響,以及如何影響它們的的其他系統產生交互作用,才能有效的設計跨管道一致的資訊產品或服務
- 系統性全觀視角能確保設計維持在正確的方向 (只專心在砌牆會忘了自己是在蓋教堂還是車庫)
第二章 定義資訊架構
資訊架構指的是:
- 一種設計行為,資訊空間的架構設計
- 一種設計過程及產物,涵蓋數位與實體環境及跨多元媒介管道的資訊分類組織、命名、搜尋、導覽系統的統稱
- 一種科學與藝術,形塑資訊產品與體驗,使其好用、好找與容易了解
- 一個新興學科與實踐社群,專注於建立數位環境中的設計與架構原則
一些概念
→ 資訊:
- 資料(data)是事實與數字,知識是存在於人們腦袋中的東西
- 資訊(information)是介於資料與知識兩者間的混沌地帶。資訊千奇百怪大小不一,例: 網站、文件、應用程式、圖片
→ 結構化、組織與命名:
- 結構化(structuring): 先決定在資訊空間內的資訊顆粒程度(levels of granularity),再規劃不同項目之間的關聯
- 組織(organizing): 聚集資訊項目形成有意義的分類,為使用者創造一個合適的內容環境,讓使用者知道自己身在何處,且辨識出他們要找的東西
- 命名(labeling): 給予這些分類或導覽項合適的名稱,以此來帶領使用者在資訊空間中移動
→ 尋找與管理:
- 可尋性(findbility):是影響整體產品或服務易用性的關鍵因素
- 資訊的可尋性與資訊是否被有效管理,兩者息息相關。因此除了為一般使用者需求著想,也必須為管理資訊的人設計出有效且明確的內容管理方式及管理規範
(註) 資訊顆粒程度(Granulrity): 指資訊區塊的相對大小或粗糙程度。資訊詳細程度的不同等級,從大顆粒到小顆粒排列就像是「雜誌、文章、段落、句子」。
資訊架構的三個圈圈

→ 三者都是浮動的,不同變數的組合使得任兩個資訊環境有所差異,且會影響資訊架構設計的品質
-
使用者(user):
- 使用你設計的資訊空間的人們
- 不是一個單純概念,他們之間存在許多差異: 態度、人口統計變數(年齡、性別、教育程度)、心理統計變數(人格特質)、任務流程、資訊需求
- 離開會議室,進入真實世界,撥開雲霧去研究使用者!
-
內容(content):
- 範圍很廣,包括: 文件、應用程式、系統背景服務、資料結構、metadata等
- 簡言之就是填入網站或應用程式的東西
- 幾個參數:
- 內容擁有權(ownership):
→ 內容由誰創造、擁有?
→ 擁有權是由授權單位集中管控或各功能單位各自擁有?
→ 多少內容來自外部廠商授權?多少由內部生產?
- 格式(format):
→ 例:影片檔案、word檔、PDF、表格
- 結構(structure):
→ 少於100字的備忘錄?超過一千頁的手冊?
- 詮釋資料(metadata):
→ 用來描述資料的資料
→ 例: 一份文件的metadata可能會包含文件長度、作者、建立時間、文件概述等
- 資料量(volumn):
→ 有多少內容要處理?多少程式需要被管理?系統多大?
- 內容活性(dynamism):
→ 內容成長率?週轉率?明年有多少資料會進來?速度為何?
-
脈絡(context):
- 所有的數位設計專案都存在於某特定的企業或機構的脈絡下
- 每個機構都有其願景、任務、目標、策略、人員、資產、技術、預算、企業文化
- 資訊架構代表了企業組織的快照,是展現企業特質最實際的東西
第三章 為尋找而設計
在不同的情況下(知道同事姓名要找他的電話號碼/在找要買哪支股票),會有不同的資訊需求與尋找方式,要設計的資訊架構也會有所不同。
→ 找出 「使用者關鍵需求」
→ 並在分析使用者的行為模式時思考:
- 使用者需要哪些資訊(資訊需求)
- 多少資訊量才算足夠(資訊需求)
- 使用者如何與資訊架構互動(資訊尋求行為)
避免過度簡化的資訊模式

→ 在真實世界這種過度簡單的模式出現機率不高,因為多數情況下人們不清楚自己要什麼(在網拍網站上亂逛找喜歡的衣服)
→ 過度簡化的模式忽略了其他環境與時間脈絡,也忽略使用者可能一無所知的情況
- 已知項目尋找(known-it seeking)=釣到大魚(The perfect catch):
當希望找到最佳解答時(想知道某個國家的人口/某個朋友的電話),通常清楚自己要什麼、要去哪裡找。此為「過度簡化」模式的流程。
- 探索式尋找(exploratory seeking)=設置蝦籠(Lobster trapping)
當希望找到一些有用的資訊(找幾家旅遊時要住的飯店),通常不太明確知道自己要找什麼(甚至自己也沒有意識到)。此為開放性資訊尋求行為,不期待正確答案,若遇到不錯的解答會藉此做為跳板,進入下一回合的搜尋過程,因此不容易確認何時才算是結束搜尋。
- 地毯式研究(exhaustive research)=一網打盡(Indiscriminate driftnetting)
當需要竭盡全力找到特定主題的所有資訊(論文研究/競業分析),此狀況下使用者有非常多方法表達他要什麼,並且需要有耐心組合各種搜尋條件以挖掘更多東西。
- 再尋(refinding)=尋找記憶中的白鯨(I've seen you before, Moby Dick…)
當要找以前看過的東西(在上班時偷看的某篇文章),能很快判斷找到的是不是原來看過的東西,隨著線索越來越多,能更具體知道該如何或去哪裡找。或是一開始就會把資訊收藏或標記起來(Pinterest),之後便能很快找到。

基礎行為元素:
- 搜尋(searching)
- 瀏覽(browsing)
- 詢問(asking)
需求行為的面向:
- 整合(intergration)
- 反覆(iteration)
→ 在同一次的尋找過程中我們通常整合了搜尋、瀏覽、詢問三種行為,且會反覆來回查找
ex: 當員工要尋找海外旅遊規定的過程中,會循著企業網站進到人力資源的子網站或單元,瀏覽公司規定,接者搜尋包含旅遊之類字串的文件,若沒有找到想要的答案,使用者會寫mail詢問相關部門。

採莓模式(berrypicking techique):
使用者一開始有個資訊需求,形成一個資訊尋找條件(query),然後隨著資訊空間的複雜路徑一步一步移動,沿著路徑隨手擷取各種資訊片段(莓果)。
→ 在過程中,使用者會學到更多,越來越了解自己要什麼,以及在這個系統裡有哪些有用的資訊,然後他們會修正自己原先的資訊尋找條件。
→ 採莓模式與「過度簡化」模式比較起來看似較亂,但我們的心智的確是如此運作的。

→ 如果你的使用者經常出現採莓行為模式,則規劃的資訊空間裡應該要提供不同搜尋動作的順暢串接,讓使用者很輕易的在搜尋與瀏覽之間切換,也要很容易返回前一個動作。

滾雪球模式(pearl-growing):
當使用者手上有一些剛好符合需求的資訊或文件,人們會想要找更多類似這個的東西。
→ Google: 類似的圖片、類似的網頁(similar pages)
→ 論文、期刊: 文件之間利用citation來串聯類似文件
→ Flickr、IG: 利用tag或hashtag來找到類似內容
如何分析使用者資訊需求與資訊尋求行為?
- 搜尋分析(search analytics)
- 檢查分析搜尋紀錄,依此來判別網站本身的搜尋成效、metadata、導覽選單、內容
- 幫助了解使用者常找什麼資訊、進一步分析資訊需求與資訊尋求行為
- 基於大量使用者行為數據,缺點是無法與使用者直接互動
- 脈絡訪查(contextual inquiry)
- 直接觀察使用者如何與資訊互動
- 並在使用者身處的原始環境下詢問他們正在做什麼,挖掘行為背後的動機或想法
第四章 為理解而設計
空間的意義
我們的感知能力使我們能察覺自己身處何處、在哪些空間可以做什麼(或不能做什麼)。我們也把實體空間的認知能力轉移應用到資訊數位空間,以實體空間近似的動作來比喻數位環境,例:「上」網、「造訪」網站。
以資訊打造的數位空間
我們感受資訊空間的過程與能力,如同感受真實世界的空間一樣。當造訪銀行網站,瀏覽它的導覽選單架構、主標題、次標題、圖片等,藉由這些語意線索我們會知道我們正在銀行裡,且很難把銀行網站與醫院網站搞混,如同在真實世界中能輕易區分銀行與醫院一樣。
但有些資訊空間並不對應到實體建築物,例如我們會將食譜網站類比為書本。
向實體空間借鏡:
-
階層
資訊階層能顯示出空間中個別元素的重要性,被放在第一階層順位的資訊元素會扮演領頭的角色,定義整體資訊空間被外界認知的「形式(form)」,以及不同資訊概念在資訊空間內部的分界。這就如同建築物的主體結構會定義建築物的形式、使用方式。
-
韻律(rhythm)
建築中的韻律通常來自於結構性格柵或外皮裝飾,能增加建築的趣味與活力。
在資訊空間中,介面互動設計會創造韻律,但資訊架構規劃方式影響更大,而韻律能改變我們對資訊的理解。


→ 畫面可選擇不同的韻律

→ 資訊源(feed)與資訊流(stream)隨著滑鼠滾動而顯示,讓人感受到強烈的韻律
-
類型學(Typology)
為了滿足機構本身的需求,建築空間會逐漸演化為某種特定類型的樣貌,資訊空間也是一樣。
因此使用者會以過去經驗來想像如何與新的資訊空間互動、如何在這個空間找東西。
雖然同質性企業網站的資訊空間結構相似,但在資訊架構(文字或調性)上有些變化就足夠讓網站與眾不同。這些差異更能幫助企業展現品牌特色。


第二部分 資訊架構的基本原則
以具體的層次來檢視資訊架構,以下為互動資訊空間都有的四個子體系:
第五章 拆解資訊架構
資訊架構組成要素

拆成四個類別:
-
組織體系(organizing system):
- 如何分類資訊,將網站的資訊以不同方式呈現,例如依時間或主題分類
- (圖) 如上方導覽列、中間最新消息輪播等
-
導覽體系(navigation system):
- 幫助使用者瀏覽與在資訊間移動,例在階層中點擊不同資訊
- (圖) 如主要導覽中個別下拉選單中的分類
-
搜尋體系(search system):
- 如何搜尋資訊,讓使用者在內容中尋找需要的資訊
- (圖) 如🔍
-
命名體系(labeling system):
- 如何稱呼每個類別、選項和連結,用對使用者有意義的文字來描述在網頁上可以看到的資訊
- (圖) 如「Education」、「Research」、「Current」等
另一種拆解方式: 瀏覽輔助、搜尋輔助、內容與任務、不可見的要素
(註) 詞幹擷取: 去除詞綴得到詞根的過程。許多搜尋引擎在處理詞彙時,會將有相同的詞幹的詞視為同義詞,此為一種query expansion
(註) 範圍註: 在主題詞下,對該主題詞內容的釋義或使用範圍的說明,如:水上運動包括 跳水、衝浪、賽艇、風浪板、水上摩托車等
(註) 廣義詞、狹義詞: 是詞與詞間的層次關係。例如「筆記型電腦」與「掌上型電腦」的概念接近,且此兩個詞都屬於「攜帶型電腦」的一種,因此它們皆可視為「攜帶型電腦」的狹義詞。相反的,「攜帶型電腦」可視為這兩個詞的廣義詞,透過廣義詞的擴展,運用查詢詞「筆記型電腦」可找出包含「掌上型電腦」的文件
第六章 組織體系
我們將事物組織分類以便學習、解釋與控制,而當我們決定如何分類、命名與關連特定資訊時,就會影響人們如何理解該資訊
組織資訊的挑戰
-
意義不明確(ambiguity):
分類體系透過語言表達,但同一個文字常有許多不同理解方式(如:pitch有瀝青、投擲、音高等意思),這使得分類體系的基礎不穩固。
另外,將哪個資訊該分到哪些類別也是一個麻煩的點(
番茄到底是蔬菜或水果?)

-
異質性(heterogeneity):
異質性是指一個或一組物件有不相關或不相似的部分。大部分的數位資訊空間內異質性都很高,一個網站裡面可能會有一篇文章、期刊、期刊資料庫等顆粒程度(granularity)不同的資料,也會有圖片、產品資訊、檔案等多種格式的資料。因此很難採用單一、結構化的組織來分類內容(例:圖片重要的資訊有檔案類型、解析度)
-
觀點的差異:
命名與組織系統受到建立者觀點的影響極大,因此我們必須跳脫自己的心智模型,透過使用者研究來洞察使用者的習慣、理解資訊的方式
-
內部政治:
資訊分類會形塑理解與評價,而因為群體內部個人或部門想爭取影響力或受重視,因此需要留意內部政治、引導大家專注於資訊架構、或是有所妥協避免衝突
組織資訊空間
組織體系由「組織的規則(organization scheme)」與「組織的結構(organization structure)」組成。
「組織規則」定義該依照哪些共同特性來分類,「組織結構」決定了內容項目與分類間的關係。
而組織體系是導覽與命名體系的基礎,因此獨立出來討論很重要
組織規則(organization scheme)的類型
組織結構(organization structure)的類型:
資訊的結構決定了使用者在其中導覽、尋路的主要方式,主要有三種方式:
-
階層-由上而下:
經過良好設計的階層,是優秀資訊架構的基礎。其觀念為:同一層的類別間彼此互斥,上下階層是父子關係。而階層是由上而下的方式來組織,使用者可以輕鬆快速地建立好心智模型來理解空間結構,且可以讓使用者不必大規模的內容盤點(content inventory)就能掌握資訊空間的大概範圍

- 設計階層時注意:
-
階層的類別間原則上互斥(視情況):
若允許同一個東西出現在不同類別中,稱「多重階層(polyhiearchy)」。有時可以將較模糊的項目(
)重複分配到兩個以上的類別內,以確保使用者找得到,但這樣的情況出現太多次會導致階層失去效果。
-
階層的廣度和深度的平衡很重要:
廣度是指階層中同一層級的類別數目,深度是階層中的層級數目。若階層太窄太深,使用者需要點擊多次才能到達想要的資訊;若階層太廣太淺,使用者會在主選單面臨太多選擇。在決定深度與廣度時:
→ 要留意使用者掃描該頁的負荷能力
→ 進行使用者測試
→ 將資料分組呈現在整個網頁中以建立結構(而非全部擠在上方或側邊)
→ 對於一個新建立打算逐漸增加內容的資訊空間來說,應考慮廣而淺,而非窄而深的階層,如此一來有新內容加入時不必變更主要結構。(變更主頁結構較麻煩且花心力金錢)

-
資料庫-由下而上:
資料庫的定義為「資料的集合,且經過安排後,利於輕易及快速地搜尋與檢索」。目前市面上的多為關聯式資料庫,一資料庫內可以包含數個資料表。而metadata可以連接資訊架構與資料庫,只要在文件或資訊物件加上metadata標籤,就能帶來強大的搜尋、瀏覽、篩選和動態連結能力

Metadata間的關係可能很複雜,如實體關係圖(entity relationship diagram)所示:

-
超文件(hypertext):
超連結是一種極度非線性的資訊組織方式。超文件系統包括兩個要素:「被連結的物件或資訊區塊」和「這些區塊間的連結」。雖然這種組織結構有極佳的彈性,但在超連結中移動時容易迷失方向,且無法建立心智模型,在沒有脈絡可尋的情況下容易導致使用者產生挫折。
資訊空間的主要結構很少單獨採用超文件,但超文件適合用於補強階層式與資料庫的結構

社交分類
社交媒體已經成為數位體驗的主要角色,使用者可以將自己提供的內容透過標籤來進行社交分類,並成為組織資訊的重要工具。
民眾分類(folksonomy)又稱collaborative tagging、social classification、social indexing、social tagging,使用者可以將物件下標籤,因此自己或其他使用者能輕易地搜尋及瀏覽。例: Instagram及Twitter的#(hashtag)

總結
- 組織規則: 「精確規則」適合使用者明確知道要找什麼的情況(已知項目的搜尋);「模糊規則」適合瀏覽、關聯式學習以及使用者約略知道自己要找什麼的情況,但可以的話盡可能兩種規則都使用。
- 組織結構: 大型系統通常需要多種結構。最上層、整體的資訊空間架構幾乎都是「階層結構」;同質性、結構性高的資訊適合運用「資料庫模式」;若需要結構性低、創意程度高的關聯則可使用「超文件」或「由使用者建立標籤」來達成。
(註) 多重階層 (polyhiearchy / multiple hierarchies): 以現代觀點而言,大多數的現象是多面或有重疊,而其屬性和關係取決於情境和目標,非單一的層次結構可規範
(註) 主鍵(primary Key): 主鍵值的定義,是資料表中對儲存資料物件是屬於唯一,並且可完整標識的資料列或屬性的值,其不能是重複也不能是空值
(註) 複合式主鍵(composite Key): 主鍵如果是由多個欄位(屬性)組成,則稱為複合主鍵
(註) 外來鍵(foreign Key): 如果資料表中欄位之資料值必須參考其它資料表內的資料,則稱為外來鍵
(註) 資料庫正規化(database normalization): 透過一定的程序,去除資料庫中冗餘的內容,讓資料能夠井然有序且有效率的儲存。正規化後的資料庫,應具備以下特性:欄位唯一性 — 每個欄位只儲存一項資料、主關鍵欄位 — 每筆資料都擁有一個主鍵,來區別這些資料、功能關聯性 — 欄位之間的關聯應該要明確、欄位獨立性 — 欄位之間不應存在遞移相依
第七章 命名體系
命名的目標是有效率地溝通資訊,不占用過多網頁空間或使用者的認知能力來傳遞訊息。
在使用資訊空間時,不易看見使用者的反應,溝通較困難,因此必須規劃好名稱,讓名稱反映內容、讓使用者可以理解。
命名的種類
包括:內文連結、標題、導覽列與導覽選項、索引關鍵字的命名
-
內文脈絡連結命名:
文章與資訊中出現的超連結,通常是連到和上下文內容相關的其他資訊,而超連結使用的文字就是內文脈絡連結的命名。內文連結的建立通常沒有系統,因此不同人所認知內文連結會連結到的地方可能都不同(莎士比亞 連到的是維基百科的頁面或是他所有的作品列表?)
→ 內文連結必須直截了當、意義明確,並符合上下文脈絡

→ 部落格文章的內文連結則不必這麼明確(基於對作者的信任、輕鬆幽默的情境)

→ 改善命名的代表性: 問自己「使用者覺得連過去或是什麼內容」或直接將網頁印下並標示連結文字請使用者寫下連結可能會連到的內容
-
標題命名:
標題藉著精簡的命名來描述接續其後的資訊,也可用來幫忙建立頁面中內容的資訊階層與結構。標題間的階層關係常透過視覺的方式(編號、字體大小、顏色、縮排等)來表達,且容許有許多彈性。

若是流程各步驟的標題,就必須維持一致,並帶有前進的意象。可以使用編號或使用「動詞」來將流程串在一起。

→ 標題因為會多個一起出現,因此相較連結命名需要更系統化的設計
-
導覽列命名:
導覽列一般不會超過十個,即使只有一個與其他命名不一致,都會顯得格格不入,加上使用者常常會使用導覽列,若有問題也會因此擴大,所以導覽列的命名必須具備一致性且更謹慎。
導覽列在每一頁的命名最好相同,以維持使用者在瀏覽網站時的熟悉感(避免在不同頁面出現「主頁」、「首頁」、「起始頁」來稱呼首頁)。
導覽列的命名沒有標準,但有一些常見的用詞:
- 首頁、主頁
- 搜尋、尋找、瀏覽
- 網站地圖、內容、內容列表、索引
- 聯絡資訊、聯絡我們
- 幫助、常見問題、FAQ
- 最新消息、消息與活動、最新公告、公告
- 關於、關於我們、關於<公司名>
-
索引關鍵字命名:
索引詞彙有非常多形式,例:關鍵字、標籤、描述性metadata、分類詞、控制詞彙、同義辭典。索引詞彙可以連結至任何網頁、網站、內容區塊,且因為索引詞彙經過特別建立,用來代表某個主題的資訊,因此可以找到更符合需求的內容。
一般來說使用者看不太到索引詞彙,他會隱藏在管理系統、資料庫或HTML的內嵌metadata中,像<meta>或
<span data-position="16871" data-size="5">等標籤裡。</span><br>
<span data-position="16879" data-size="22">舉例來說一個家具廠商可能會在沙發類產品頁面的</span><meta><span data-position="16907" data-size="11">中加入以下的索引詞彙:</span><br>
<code data-position="16922" data-size="61"><meta name="keywords" CONTENT="椅墊座椅, 沙發 , 手扶椅, armchair, 躺椅"></code><br>
<span data-position="16987" data-size="45">當搜尋「沙發」時,搜尋結果會出現含有該索引詞彙的網頁,即使網頁的內文沒有出現「沙發」一詞。</span></p>
<p data-position="17048" data-size="0"><span data-position="17052" data-size="1"> </span><br>
<img src="https://i.imgur.com/pWEuAE9.png" alt width="600" class="raw" data-position="17061" data-size="42"></p>
</li>
<li class="raw" data-startline="581" data-endline="587" data-position="17109" data-size="0">
<p data-position="17107" data-size="0"><span data-position="17109" data-size="8">圖示型命名符號:</span><br>
<span data-position="17120" data-size="126">圖示型命名符號與文字相比能表達的意義有限,因此通常用於導覽列,或小規模內容組織的這種項目較少的命名。雖然圖示無法如同文字讓使用者一樣快的理解其意義,但透過重複使用及練習會在使用者心中建立意義。但在使用者沒有耐心或需要快速完成任務時的情況下則要避免使用。</span></p>
<p data-position="17254" data-size="0"><img src="https://i.imgur.com/0GI9iSW.png" alt width="300" class="raw" data-position="17258" data-size="42"></p>
<p data-position="17306" data-size="0"><span data-position="17310" data-size="1"> </span></p>
</li>
</ul>
<h4 class="raw part" data-startline="588" data-endline="588"><span data-position="17327" data-size="9">創造有效命名的原則</span></h4>
<ul class="part" data-startline="590" data-endline="657" data-position="17338" data-size="0">
<li class="raw" data-startline="590" data-endline="615" data-position="17340" data-size="0">
<p data-position="17338" data-size="0"><span data-position="17340" data-size="7">一般指導原則:</span><br>
<span data-position="17348" data-size="36">在命名時必須留意「內容」、「使用者」、「脈絡」這三個會影響資訊架構的因素</span></p>
<ul data-position="17389" data-size="0">
<li class="raw" data-startline="592" data-endline="594" data-position="17391" data-size="0">
<p data-position="17385" data-size="0"><span data-position="17391" data-size="11">盡可能限制命名的範疇:</span><br>
<span data-position="17403" data-size="80">因為一個單字常會有許多不同的意義,所以如果是為特定使用者打造資訊空間,就能減少解讀命名的角度。假設內容範圍真的很大,可以將內容模組化、分成小區域來滿足特定使用者</span></p>
</li>
<li class="raw" data-startline="595" data-endline="615" data-position="17499" data-size="0">
<p data-position="17493" data-size="0"><span data-position="17499" data-size="10">建立一致的命名體系:</span><br>
<span data-position="17510" data-size="33">一致性代表可預期性,而可預期的事情較容易學習。影響一致性的因素有:</span></p>
<ul data-position="17561" data-size="0">
<li class="raw" data-startline="598" data-endline="600" data-position="17563" data-size="0">
<p data-position="17553" data-size="0"><span data-position="17563" data-size="5">寫作格式:</span><br>
<span data-position="17571" data-size="11">統一的標點符號與大小寫</span></p>
</li>
<li class="raw" data-startline="601" data-endline="603" data-position="17616" data-size="0">
<p data-position="17606" data-size="0"><span data-position="17616" data-size="7">文字視覺格式:</span><br>
<span data-position="17626" data-size="21">一致的字體格式、大小、顏色、空白、分組樣式</span></p>
</li>
<li class="raw" data-startline="604" data-endline="606" data-position="17681" data-size="0">
<p data-position="17671" data-size="0"><span data-position="17681" data-size="5">文法格式:</span><br>
<span data-position="17689" data-size="48">避免混用「動詞型(照料您的愛犬)」、「名詞型(愛犬飲食)」、「問句型(如何訓練愛犬如廁)」的命名</span></p>
</li>
<li class="raw" data-startline="607" data-endline="609" data-position="17771" data-size="0">
<p data-position="17761" data-size="0"><span data-position="17771" data-size="5">顆粒程度:</span><br>
<span data-position="17779" data-size="47">命名最好描述大致顆粒程度相同的內容,而不是:「中式餐點」、「義式餐點」、「墨西哥餐點」、「薯條</span><img class="emoji" alt=":fries:" src="https://assets.hackmd.io/build/emojify.js/dist/images/basic/fries.png" data-position="17826" data-size="7"></img><span data-position="17833" data-size="1">」</span></p>
</li>
<li class="raw" data-startline="610" data-endline="612" data-position="17868" data-size="0">
<p data-position="17858" data-size="0"><span data-position="17868" data-size="4">完整性:</span><br>
<span data-position="17873" data-size="109">使用者會因為命名系統中的缺漏而困擾,例如服裝網站列出「褲裝」、「領帶」、「襪子」,而沒有列出「上衣」,使用者會懷疑到底是沒賣上衣還是網站有問題。完整性除了對一致性有助益外,也能讓使用者快速掃視並了解資訊空間的大概內容。</span></p>
</li>
<li class="raw" data-startline="613" data-endline="615" data-position="18010" data-size="0">
<p data-position="18000" data-size="0"><span data-position="18010" data-size="3">對象:</span><br>
<span data-position="18014" data-size="54">要考慮到資訊空間主要的使用族群所熟悉的詞彙,若不同族群的用詞差異太大,可能要考慮為每個族群設計個別的命名體系</span></p>
</li>
</ul>
</li>
</ul>
</li>
<li class="raw" data-startline="616" data-endline="625" data-position="18088" data-size="0">
<p data-position="18086" data-size="0"><span data-position="18088" data-size="9">命名系統的參考依據</span></p>
<ul data-position="18102" data-size="0">
<li class="raw" data-startline="617" data-endline="619" data-position="18104" data-size="0">
<p data-position="18098" data-size="0"><span data-position="18104" data-size="10">檢視目前的資訊空間:</span><br>
<span data-position="18115" data-size="61">以目前現有的命名體系為基礎進行修正。或地毯式檢視整個資訊空間,將所有命名彙整成表格,看是否有命名、寫作格式、大小寫的不一致</span></p>
</li>
<li class="raw" data-startline="620" data-endline="622" data-position="18192" data-size="0">
<p data-position="18186" data-size="0"><span data-position="18192" data-size="10">競業分析/類似分析:</span><br>
<span data-position="18203" data-size="75">先確認使用者的需求,然後去分析競爭者的網站,並記錄下好的與壞的命名。若許多同業在某些辭彙都採用相同命名,則代表該詞彙的命名大概就是那樣了,直接效仿即可</span></p>
</li>
<li class="raw" data-startline="623" data-endline="625" data-position="18294" data-size="0">
<p data-position="18288" data-size="0"><span data-position="18294" data-size="10">控制詞彙/同義詞典:</span><br>
<span data-position="18305" data-size="78">控制詞彙或同義詞典是由相關背景主題專家所建立,因此用詞準確且具有一致性。可以依照資訊空間的領域參考不同的同義詞典,但也不是每個領域都有建立控制詞彙與同義詞典</span></p>
</li>
</ul>
</li>
<li class="raw" data-startline="626" data-endline="652" data-position="18395" data-size="0">
<p data-position="18393" data-size="0"><span data-position="18395" data-size="9">建立全新的命名體系</span></p>
<ul data-position="18409" data-size="0">
<li class="raw" data-startline="627" data-endline="629" data-position="18411" data-size="0">
<p data-position="18405" data-size="0"><span data-position="18411" data-size="5">內容分析:</span><br>
<span data-position="18417" data-size="127">可以閱讀有代表性的文件並記下代表該文件的關鍵字詞來當作命名。若是數量龐大,可以利用「資訊實體擷取(information entity extraction)」的軟體工具來自動擷取文件中有意義的字詞,之後再進行人工確認。(但訓練軟體、調教演算法很花成本)</span></p>
</li>
<li class="raw" data-startline="630" data-endline="632" data-position="18560" data-size="0">
<p data-position="18554" data-size="0"><span data-position="18560" data-size="6">內容的作者:</span><br>
<span data-position="18567" data-size="18">詢問文件的作者,並請他們提供關鍵字詞</span></p>
</li>
<li class="raw" data-startline="633" data-endline="635" data-position="18601" data-size="0">
<p data-position="18595" data-size="0"><span data-position="18601" data-size="12">使用者代言人/領域專家:</span><br>
<span data-position="18614" data-size="78">使用者代言人是能夠代表使用者的角度表達意見的人,例如:客服人員、了解使用者需求脈絡的專家。可以藉由訪問他們來瞭解目標族群的資訊需求,逐步建立適合使用者的詞彙</span></p>
</li>
<li class="raw" data-startline="636" data-endline="647" data-position="18708" data-size="0">
<p data-position="18702" data-size="0"><span data-position="18708" data-size="8">使用者(直接):</span><br>
<span data-position="18717" data-size="35">真正的使用者通常比較難接觸到,但若能找到他們,便會是最好的命名參考來源</span></p>
<ul data-position="18765" data-size="0">
<li class="raw" data-startline="638" data-endline="643" data-position="18767" data-size="0">
<p data-position="18757" data-size="0"><span data-position="18767" data-size="19">卡片分類(card sorting):</span></p>
<ul data-position="18799" data-size="0">
<li class="raw" data-startline="639" data-endline="640" data-position="18801" data-size="0"><span data-position="18801" data-size="27">開放式卡片分類(open card sorting):</span><br>
<span data-position="18829" data-size="81">讓參與者把現有內容的卡片依照他們的想法分為不同類別,並將每個類別命名。開放式卡片分類屬於generative,用於發現使用者的分類模式,提供我們產出分類資訊的想法</span></li>
<li class="raw" data-startline="641" data-endline="643" data-position="18937" data-size="0"><span data-position="18937" data-size="29">封閉式卡片分類(closed card sorting):</span><br>
<span data-position="18967" data-size="102">提供分類名稱,請參與者把卡片分配到這些類別裡。在進行分類前,可以請參與者說明他們覺得每個類別命名所代表的意義,用來與自己的定義做比較。封閉式卡片分類屬於evaluative,用於判斷我們提供的分類是否有效</span></li>
</ul>
</li>
<li class="raw" data-startline="644" data-endline="647" data-position="19105" data-size="0">
<p data-position="19095" data-size="0"><span data-position="19105" data-size="19">自由聯想(free listing):</span><br>
<span data-position="19125" data-size="43">選擇一個內容項目,請參與者想出一些可以描述他的字詞(記得考慮參與者族群的異質性與數量)</span></p>
</li>
</ul>
</li>
<li class="raw" data-startline="648" data-endline="652" data-position="19197" data-size="0">
<p data-position="19191" data-size="0"><span data-position="19197" data-size="8">使用者(間接):</span></p>
<ul data-position="19214" data-size="0">
<li class="raw" data-startline="649" data-endline="650" data-position="19216" data-size="0"><span data-position="19216" data-size="28">搜尋紀錄分析(search log analysis):</span><br>
<span data-position="19245" data-size="65">可以在最不打擾使用者的情形下瞭解命名的實際使用情況。可能會發現使用者對縮寫、專業名稱的使用與否、使用單一或多個詞彙、產品名稱等習慣</span></li>
<li class="raw" data-startline="651" data-endline="652" data-position="19329" data-size="0"><span data-position="19329" data-size="36">社群網路上流行的自由標記(free tagging)也對命名體系很有幫助</span></li>
</ul>
</li>
</ul>
</li>
<li class="raw" data-startline="653" data-endline="657" data-position="19377" data-size="0">
<p data-position="19375" data-size="0"><span data-position="19377" data-size="5">修正與調整</span></p>
<ul data-position="19387" data-size="0">
<li class="raw" data-startline="654" data-endline="654" data-position="19389" data-size="0"><span data-position="19389" data-size="40">把現有命名清單依字母排序,去除重複的名詞,找出不一致的標點符號、大小寫、文法等等</span></li>
<li class="raw" data-startline="655" data-endline="655" data-position="19437" data-size="0"><span data-position="19437" data-size="84">若資訊空間的命名體系式依主題建立,試著預想未來可能會放入的主題,因為若不先事先預想好,未來可能會導致新的命名與既有的命名格格不入,或是新的內容會被丟到「其他」這種類別中</span></li>
<li class="raw" data-startline="656" data-endline="657" data-position="19528" data-size="0"><span data-position="19528" data-size="32">上線後的命名體系要持續微調及改善(因使用者與內容都會隨時間改變)</span></li>
</ul>
</li>
</ul>
<blockquote class="raw part" data-startline="658" data-endline="658">
<p data-position="19568" data-size="0"><span data-position="19568" data-size="205">(註) Reverse card sorting / tree testing: 用來測試網頁可尋性(findability)的方法。首先先給參與者一個題目(1000元以下的男性褲裝),再來秀出網頁最高層級的導覽命名並叫參與者選一個,再秀出其下一層級的所有命名並叫參與者選擇,依此類推直到完成任務。(事後評估:是否完成任務?是否有走回頭路?若有走錯是走到哪?是否不太用思考就完成任務?哪些項目容易完成或失敗?)</span></p>
</blockquote>
<blockquote class="raw part" data-startline="660" data-endline="660">
<p data-position="19777" data-size="0"><span data-position="19777" data-size="72">(註) Modified-Delphi card sorting: 由一位參與者先將所有的卡片都分類好,再由第二位參與者進行調整,再來交給第三位</span><span class="smartypants" data-position="19849" data-size="3">…</span><span data-position="19852" data-size="15">。藉此可以快速得到一致的結論。</span></p>
</blockquote>
<hr>
<h3 class="raw part" data-startline="665" data-endline="665"><span data-position="19891" data-size="8">第八章 導覽體系</span></h3>
<p class="part" data-startline="667" data-endline="667" data-position="19901" data-size="0"><span data-position="19901" data-size="65">導覽體系能提供所在位置的脈絡線索(context),也能增加移動選擇的彈性(flexibility),是資訊架構中不可缺少的部分。</span></p>
<p class="part" data-startline="669" data-endline="669" data-position="19968" data-size="0"><span data-position="19968" data-size="118">近年來因不同大小和規格的裝置不斷出現,也有了不同的互動機制,因此導覽的表層一直在變化中。也因為觸控裝置的普及,帶來新的互動方式(pinch,swipe),有些慣用的互動方式(hover)逐漸淘汰,所以我們目前正經歷導覽機制的實驗觀察期。</span></p>
<h4 class="raw part" data-startline="671" data-endline="671"><span data-position="20093" data-size="26">導覽體系營造空間,賦予意義(Placemaking)</span></h4>
<p class="part" data-startline="672" data-endline="672" data-position="20120" data-size="0"><span data-position="20120" data-size="153">導覽體系主要的功能是讓使用者了解「這是哪裡、這裡有什麼、在這裡能做什麼」,無論是實體或是數位空間導覽,使用者都必須先確定自己的位置,才能弄清楚如何規劃路線。因此必須提供足夠的空間線索讓使用者了解自己身在何方,例如,在資訊空間的上方標示出網站名稱或logo,以及盡可能呈現出資訊階層的結構以指出目前所在位置。</span></p>
<p class="part" data-startline="674" data-endline="674" data-position="20275" data-size="0"><img src="https://i.imgur.com/rNFbiiM.png" alt class="raw" data-position="20275" data-size="36"></p>
<p class="part" data-startline="677" data-endline="677" data-position="20314" data-size="0"><span data-position="20314" data-size="50">若想看網站的導覽體系是否清楚,可以進行導覽壓力測試(navigation stress test):</span></p>
<ol class="part" data-startline="678" data-endline="681" data-position="20365" data-size="0">
<li class="raw" data-startline="678" data-endline="678" data-position="20368" data-size="0"><span data-position="20368" data-size="17">忽略首頁,直接跳到網站或的某個畫面</span></li>
<li class="raw" data-startline="679" data-endline="679" data-position="20389" data-size="0"><span data-position="20389" data-size="42">在所處的畫面中是否能搞清楚該頁相對於整個空間的位置、位於哪個主要區域、上一層是什麼?</span></li>
<li class="raw" data-startline="680" data-endline="681" data-position="20435" data-size="0"><span data-position="20435" data-size="40">是否可以分辨該畫面可以通往何處?畫面上的連結敘述是否讓你對連結的目標有大致概念?</span></li>
</ol>
<h4 class="raw part" data-startline="682" data-endline="682"><span data-position="20482" data-size="9">改善移動選擇的彈性</span></h4>
<p class="part" data-startline="684" data-endline="684" data-position="20493" data-size="0"><span data-position="20493" data-size="82">設計導覽系統的重點,在於平衡彈性帶來的優點與缺點。過多的超文件導覽會模糊階層概念,導致使用者失去空間感;過度著重階層導覽,沒有適度提供移動捷徑,則會失去行進的彈性。</span></p>
<p class="part" data-startline="686" data-endline="686" data-position="20577" data-size="0"><img src="https://i.imgur.com/Mmk4Md1.gif" alt class="raw" data-position="20577" data-size="36"></p>
<h4 class="raw part" data-startline="690" data-endline="690"><span data-position="20622" data-size="5">導覽的類型</span></h4>
<ul class="part" data-startline="691" data-endline="700" data-position="20628" data-size="0">
<li class="raw" data-startline="691" data-endline="694" data-position="20631" data-size="0"><span data-position="20631" data-size="19">內嵌式導覽: 布局於網頁或app畫面上</span>
<ul data-position="20655" data-size="0">
<li class="raw" data-startline="692" data-endline="692" data-position="20657" data-size="0"><span data-position="20657" data-size="4">全域導覽</span></li>
<li class="raw" data-startline="693" data-endline="693" data-position="20668" data-size="0"><span data-position="20668" data-size="4">區域導覽</span></li>
<li class="raw" data-startline="694" data-endline="694" data-position="20679" data-size="0"><span data-position="20679" data-size="4">內文導覽</span></li>
</ul>
</li>
<li class="raw" data-startline="695" data-endline="700" data-position="20686" data-size="0"><span data-position="20686" data-size="5">附加式導覽</span>
<ul data-position="20696" data-size="0">
<li class="raw" data-startline="696" data-endline="696" data-position="20698" data-size="0"><span data-position="20698" data-size="6">資訊空間地圖</span></li>
<li class="raw" data-startline="697" data-endline="697" data-position="20711" data-size="0"><span data-position="20711" data-size="2">索引</span></li>
<li class="raw" data-startline="698" data-endline="700" data-position="20720" data-size="0"><span data-position="20720" data-size="2">引導</span></li>
</ul>
</li>
</ul>
<h4 class="raw part" data-startline="701" data-endline="701"><span data-position="20738" data-size="35">內嵌式導覽系統(embedded navigation system)</span></h4>
<p class="part" data-startline="702" data-endline="702" data-position="20774" data-size="0"><span data-position="20774" data-size="25">與資訊空間緊密結合,具備傳達空間意義的主要導覽系統</span></p>
<ul class="part" data-startline="703" data-endline="760" data-position="20800" data-size="0">
<li class="raw" data-startline="703" data-endline="719" data-position="20802" data-size="0">
<p data-position="20800" data-size="0"><span data-position="20802" data-size="33">全域導覽系統(global navigation system):</span><br>
<span data-position="20836" data-size="122">全域導覽系統應該要出現在網站中所有的網頁。常見的形式是做成頁面上端的導覽列,讓使用者無論在網站中的任何階層,都能跳到資訊空間內的其他主要區域。因為全域導覽系統是整個資訊空間唯一一致的導覽元素,所以對易用性有極大的影響,必須反覆地進行使用者測試。</span></p>
<p data-position="20960" data-size="0"><img src="https://i.imgur.com/1dECyf8.png" alt class="raw" data-position="20964" data-size="36"></p>
<p data-position="21002" data-size="0"><img src="https://i.imgur.com/B2R2Pzi.png" alt class="raw" data-position="21006" data-size="36"></p>
<p data-position="21048" data-size="0"><span data-position="21052" data-size="66">大部分全域導覽會以公司logo代表返回首頁的功能。有些導覽列會在使用者所在的位置的導覽項目以不同顏色顯示,讓使用者知道自己身處何處。</span></p>
<p data-position="21120" data-size="0"><span data-position="21124" data-size="17">全域導覽系統還在持續演化中,例如:</span></p>
<p data-position="21147" data-size="0"><span data-position="21151" data-size="15">巨型選單(mega-menu)</span><br>
<img src="https://i.imgur.com/oCU7VO7.png" alt width="800" class="raw" data-position="21169" data-size="42"><br>
<span data-position="21214" data-size="1"> </span><br>
<span data-position="21223" data-size="16">頁尾導覽(fat footer)</span><br>
<img src="https://i.imgur.com/PpWLH6u.png" alt width="800" class="raw" data-position="21242" data-size="42"></p>
</li>
<li class="raw" data-startline="720" data-endline="745" data-position="21296" data-size="0">
<p data-position="21294" data-size="0"><span data-position="21296" data-size="32">區域導覽系統(local navigation system):</span><br>
<span data-position="21331" data-size="42">多數的網站或app中,全域導覽通常會搭配一或多個區域導覽,讓使用者能探索鄰近的範圍。</span></p>
<ul data-position="21385" data-size="0">
<li class="raw" data-startline="723" data-endline="724" data-position="21387" data-size="0"><span data-position="21387" data-size="19">把全域與區域導覽整合在一起的資訊空間↓</span></li>
</ul>
<p data-position="21412" data-size="0"><img src="https://i.imgur.com/ZR2z7fw.png" alt width="620" class="raw" data-position="21416" data-size="42"></p>
<p data-position="21465" data-size="0"><img src="https://i.imgur.com/CctKyUF.png" alt width="200" class="raw" data-position="21469" data-size="42"><span data-position="21511" data-size="1"> </span><img src="https://i.imgur.com/LhJsVWC.png" alt width="200" class="raw" data-position="21512" data-size="42"><span data-position="21554" data-size="1"> </span><img src="https://i.imgur.com/dTjP5qv.png" alt width="200" class="raw" data-position="21555" data-size="42"></p>
<p data-position="21599" data-size="0"><span data-position="21603" data-size="1"> </span></p>
<ul data-position="21615" data-size="0">
<li class="raw" data-startline="732" data-endline="733" data-position="21617" data-size="0"><span data-position="21617" data-size="19">提供多種區域導覽,彼此沒什麼相似之處↓</span></li>
</ul>
<p data-position="21642" data-size="0"><img src="https://i.imgur.com/4eLj9CT.png" alt width="620" class="raw" data-position="21646" data-size="42"></p>
<p data-position="21694" data-size="0"><img src="https://i.imgur.com/cYj8zhr.png" alt width="620" class="raw" data-position="21698" data-size="42"></p>
<p data-position="21743" data-size="0"><span data-position="21747" data-size="39">這種區域導覽以及區域內的資訊內容差異大到一個程度,我們就會稱這些區域為子網站。</span><br>
<span data-position="21789" data-size="9">子網站出現的原因:</span></p>
<ul data-position="21805" data-size="0">
<li class="raw" data-startline="741" data-endline="741" data-position="21807" data-size="0"><span data-position="21807" data-size="16">某些內容與功能需要獨特的導覽方式</span></li>
<li class="raw" data-startline="742" data-endline="743" data-position="21830" data-size="0"><span data-position="21830" data-size="33">大型組織權力分散,不同資訊內容通常由不同單位負責,造成導覽方式相異</span></li>
</ul>
<p data-position="21865" data-size="0"><span data-position="21869" data-size="1"> </span></p>
</li>
<li class="raw" data-startline="746" data-endline="760" data-position="21883" data-size="0">
<p data-position="21881" data-size="0"><span data-position="21883" data-size="30">內文導覽系統(contextual navigation):</span><br>
<span data-position="21916" data-size="80">有些資訊與資訊的關係無法以全域或區域導覽的方式來串聯動線,此時就會使用內文導覽將資訊連結至特定頁面。如此,使用者可能接觸到從未考慮過的主題與資訊,藉此學習新知。</span></p>
<ul data-position="22013" data-size="0">
<li class="raw" data-startline="750" data-endline="751" data-position="22015" data-size="0"><span data-position="22015" data-size="11">插在文句中的內文導覽↓</span></li>
</ul>
<p data-position="22032" data-size="0"><img src="https://i.imgur.com/jtjZiHh.png" alt width="620" class="raw" data-position="22036" data-size="42"><br>
<span data-position="22081" data-size="1"> </span></p>
<ul data-position="22099" data-size="0">
<li class="raw" data-startline="755" data-endline="757" data-position="22101" data-size="0"><span data-position="22101" data-size="14">放在外部獨立區塊的內文導覽↓</span><br>
<img src="https://i.imgur.com/edupg2x.png" alt width="620" class="raw" data-position="22116" data-size="42"></li>
</ul>
<p data-position="22168" data-size="0"><span data-position="22172" data-size="70">在設計內文導覽時,要思考在目前的頁面中使用者接下來會想看什麼、去哪裡。例:在線上購物的結帳頁面時,還需要提供什麼資訊、可能還會想買什麼產品?</span><br>
<span data-position="22245" data-size="35">→ 內文導覽提供了交叉銷售、提升受銷售、品牌建立、提供顧客價值的好機會</span></p>
</li>
</ul>
<h4 class="raw part" data-startline="761" data-endline="761"><span data-position="22289" data-size="39">附加式導覽系統(supplemental navigation system)</span></h4>
<p class="part" data-startline="762" data-endline="762" data-position="22329" data-size="0"><span data-position="22329" data-size="38">在基本網站階層之外的導覽,提供尋找內容、完成任務的輔助,對易用性有很大的幫助</span></p>
<ul class="part" data-startline="764" data-endline="771" data-position="22369" data-size="0">
<li class="raw" data-startline="764" data-endline="771" data-position="22371" data-size="0">
<p data-position="22369" data-size="0"><span data-position="22371" data-size="14">網站地圖(sitemaps)</span><br>
<span data-position="22386" data-size="51">網站地圖會呈現資訊階層的上面幾層,提供系統中內容的整體概觀,並透過連結讓使用者能任意連到某一區塊的內容</span></p>
<p data-position="22439" data-size="0"><span data-position="22443" data-size="39">網站地圖適合用於階層式的大型系統,且能引導搜尋引擎爬蟲。設計網站地圖時要注意:</span></p>
<ul data-position="22487" data-size="0">
<li class="raw" data-startline="768" data-endline="768" data-position="22489" data-size="0"><span data-position="22489" data-size="24">強化資訊的階層感受,讓使用者對內容組織方式更熟悉</span></li>
<li class="raw" data-startline="769" data-endline="769" data-position="22520" data-size="0"><span data-position="22520" data-size="30">對知道自己要找什麼的使用者,要能幫助他們快速找到並連結至內容</span></li>
<li class="raw" data-startline="770" data-endline="771" data-position="22557" data-size="0"><span data-position="22557" data-size="11">避免過多資訊嚇到使用者</span></li>
</ul>
</li>
</ul>
<p class="part" data-startline="772" data-endline="772" data-position="22570" data-size="0"><img src="https://i.imgur.com/MRb5Hp7.png" alt class="raw" data-position="22570" data-size="36"></p>
<p class="part" data-startline="774" data-endline="774" data-position="22608" data-size="0"><span data-position="22608" data-size="1"> </span></p>
<ul class="part" data-startline="776" data-endline="780" data-position="22616" data-size="0">
<li class="raw" data-startline="776" data-endline="780" data-position="22618" data-size="0">
<p data-position="22616" data-size="0"><span data-position="22618" data-size="11">索引(indexes)</span><br>
<span data-position="22630" data-size="41">依照字母列出關鍵字,但不會呈現內容的階層,在已經知道要尋找的資訊要如何稱呼時很有效</span></p>
<p data-position="22673" data-size="0"><span data-position="22677" data-size="33">索引有時會包括「詞語順序調換」及「參見(see also)」等功能</span></p>
</li>
</ul>
<blockquote class="raw part" data-startline="781" data-endline="781">
<p data-position="22714" data-size="0"><span data-position="22714" data-size="116">(註) 詞語順序調換(term rotation / permutation): 將詞語中的關鍵字順序調動,讓使用者可以在清單兩處以上的地方找到該詞語。例: "Abuse, Elder" 和 "Elder maltreatment"</span></p>
</blockquote>
<p class="part" data-startline="783" data-endline="783" data-position="22832" data-size="0"><img src="https://i.imgur.com/gxgVFIc.png" alt class="raw" data-position="22832" data-size="36"></p>
<p class="part" data-startline="785" data-endline="785" data-position="22870" data-size="0"><span data-position="22870" data-size="1"> </span></p>
<ul class="part" data-startline="788" data-endline="814" data-position="22879" data-size="0">
<li class="raw" data-startline="788" data-endline="806" data-position="22881" data-size="0">
<p data-position="22879" data-size="0"><span data-position="22881" data-size="10">引導(guides)</span><br>
<span data-position="22892" data-size="88">引導在輔助現有導覽,協助了解系統內容與功能,通常是線性的過程。有多種形式,包括引導式預覽(guided tour)、教學(tutorial)、逐步解說(walkthrough)</span></p>
<p data-position="22982" data-size="0"><span data-position="22986" data-size="12">Guided tour:</span><br>
<img src="https://i.imgur.com/5siGK4i.png" alt width="450" class="raw" data-position="22999" data-size="42"></p>
<p data-position="23044" data-size="0"><span data-position="23048" data-size="12">Walkthrough:</span><br>
<img src="https://i.imgur.com/Aib6tne.png" alt width="450" class="raw" data-position="23061" data-size="42"></p>
<p data-position="23105" data-size="0"><span data-position="23109" data-size="10">在設計引導時的重點:</span></p>
<ul data-position="23124" data-size="0">
<li class="raw" data-startline="799" data-endline="799" data-position="23126" data-size="0"><span data-position="23126" data-size="5">精簡且清晰</span></li>
<li class="raw" data-startline="800" data-endline="800" data-position="23138" data-size="0"><span data-position="23138" data-size="13">在過程中使用者應能隨時離開</span></li>
<li class="raw" data-startline="801" data-endline="801" data-position="23158" data-size="0"><span data-position="23158" data-size="21">應與一般的導覽一樣有「上一頁」、「下一頁」</span></li>
<li class="raw" data-startline="802" data-endline="803" data-position="23186" data-size="0"><span data-position="23186" data-size="41">若導覽的內容及畫面很多,則可以建立引導的目錄(table of contents)</span></li>
</ul>
<p data-position="23229" data-size="0"><span data-position="23233" data-size="79">→ 導覽的目的是為新手介紹內容,或行銷產品與服務。但很多人其實會忽略它,也很少人會用超過一次,因此在設計時必須評估成本與效益(是否要做高度互動、絢麗的動態效果</span><span class="smartypants" data-position="23312" data-size="3">…</span><span data-position="23315" data-size="2">)。</span></p>
</li>
<li class="raw" data-startline="807" data-endline="810" data-position="23322" data-size="0">
<p data-position="23320" data-size="0"><span data-position="23322" data-size="19">設定助手(configurators)</span><br>
<span data-position="23342" data-size="24">協助使用者設定產品配置,或輔助複雜決策的一套引導</span><br>
<img src="https://i.imgur.com/lX2huBv.png" alt width="450" class="raw" data-position="23367" data-size="42"></p>
</li>
<li class="raw" data-startline="811" data-endline="814" data-position="23413" data-size="0">
<p data-position="23411" data-size="0"><span data-position="23413" data-size="10">搜尋(search)</span><br>
<span data-position="23424" data-size="30">搜尋體系是附加導覽的核心,因為很重要所以會在下一章仔細介紹。</span></p>
</li>
</ul>
<h4 class="raw part" data-startline="815" data-endline="815"><span data-position="23462" data-size="9">進階的導覽設計方案</span></h4>
<ul class="part" data-startline="816" data-endline="843" data-position="23472" data-size="0">
<li class="raw" data-startline="816" data-endline="829" data-position="23474" data-size="0">
<p data-position="23472" data-size="0"><span data-position="23474" data-size="7">個人化與客製化</span></p>
<ul data-position="23486" data-size="0">
<li class="raw" data-startline="817" data-endline="817" data-position="23488" data-size="0"><strong data-position="23488" data-size="0"><span data-position="23490" data-size="20">個人化(personalization)</span></strong><span data-position="23512" data-size="46">:是指根據用戶的行為、需求、偏好,由系統自動提供資訊給某使用者 = 由我們來猜使用者想要什麼</span></li>
<li class="raw" data-startline="818" data-endline="819" data-position="23565" data-size="0"><strong data-position="23565" data-size="0"><span data-position="23567" data-size="18">客製化(customization)</span></strong><span data-position="23587" data-size="37">:是指由使用者自己直接掌控資訊的呈現、內容等 = 由使用者告訴我他想要什麼</span></li>
</ul>
<p data-position="23626" data-size="0"><img src="https://i.imgur.com/3G7ozqU.png" alt width="450" class="raw" data-position="23630" data-size="42"></p>
<p data-position="23678" data-size="0"><span data-position="23682" data-size="76">影音平台會根據過去的觀看紀錄推薦其他影片給我們,但有可能我們已在其他地方看過了,但系統並不知道(也無法知道),且系統根本很難猜到大家明天會對什麼有興趣。</span><br>
<span data-position="23761" data-size="35">→ 因此,個人化只在有限的情境下才能運作良好,很難拓展到整個資訊空間上</span></p>
<p data-position="23800" data-size="0"><img src="https://i.imgur.com/ek8AqGd.png" alt width="450" class="raw" data-position="23804" data-size="42"></p>
<p data-position="23852" data-size="0"><span data-position="23856" data-size="77">Facebook可以讓使用者自行設定想優先/不想看到的內容。但有時客製化之所以難以成功是因為使用者不太想花時間來設定與調整,又人們不見得知道自己想要什麼。</span><br>
<span data-position="23936" data-size="41">→ 較飄忽的資訊需求很難透過客製化來解決(例:今天想看選舉結果、明天想看狗狗影片)</span></p>
</li>
<li class="raw" data-startline="830" data-endline="833" data-position="23983" data-size="0">
<p data-position="23981" data-size="0"><span data-position="23983" data-size="18">視覺化(visualization)</span><br>
<span data-position="24002" data-size="39">視覺化最有效的應用就是使用者知道他要的東西長什麼樣子,並需要在一組結果中選擇時</span><br>
<img src="https://i.imgur.com/U4zFKGY.png" alt width="450" class="raw" data-position="24042" data-size="42"></p>
</li>
<li class="raw" data-startline="834" data-endline="843" data-position="24088" data-size="0">
<p data-position="24086" data-size="0"><span data-position="24088" data-size="23">社交導覽(social navigation)</span><br>
<span data-position="24112" data-size="46">隨著Facebook、twitter等大型社交網站的興起,社交導覽成為了組織資訊的重要方式。</span><br>
<span data-position="24159" data-size="56">社交導覽的假設,是藉由觀察其他使用者(特別是與特定使用者有獨特關係的人)的行為,能為特定使用者帶來有價值的訊息。</span><br>
<span data-position="24216" data-size="40">社交導覽可以根據資訊熱門的程度(根據流量、評價、投票等),讓使用者注意到該資訊。</span></p>
<p data-position="24258" data-size="0"><img src="https://i.imgur.com/9ar1I00.png" alt width="450" class="raw" data-position="24262" data-size="42"></p>
<p data-position="24306" data-size="0"><span data-position="24310" data-size="57">運用社交數據的壞處是,當過度精準的依據使用者社交群體來打造資訊空間,就有可能落入同溫層內,弱化不同資訊出現的機會。</span></p>
</li>
</ul>
<hr>
<h3 class="raw part" data-startline="846" data-endline="846"><span data-position="24384" data-size="8">第九章 搜尋體系</span></h3>
<p class="part" data-startline="848" data-endline="848" data-position="24394" data-size="0"><span data-position="24394" data-size="48">搜尋,又稱資訊檢索(information retrieval),是個快速擴張且發展完善的領域。</span></p>
<h4 class="raw part" data-startline="850" data-endline="850"><span data-position="24449" data-size="13">採用搜尋系統之前要思考的事</span></h4>
<ul class="part" data-startline="852" data-endline="866" data-position="24464" data-size="0">
<li class="raw" data-startline="852" data-endline="854" data-position="24466" data-size="0">
<p data-position="24464" data-size="0"><span data-position="24466" data-size="16">評估資訊空間的內容量/資訊需求:</span><br>
<span data-position="24485" data-size="79">內容要有多少才能讓搜尋引擎有效益,並沒有標準答案。但應該要搞清楚使用者的資訊需求,若是使用者很清楚自己需要什麼資訊的情形(例:技術支援網站),搜尋體系就很適合</span></p>
</li>
<li class="raw" data-startline="855" data-endline="857" data-position="24574" data-size="0">
<p data-position="24572" data-size="0"><span data-position="24574" data-size="7">改善導覽體系:</span><br>
<span data-position="24584" data-size="34">當發現尋找資訊有困難時,應該先修復導覽體系,不應將搜尋引擎作為OK蹦</span></p>
</li>
<li class="raw" data-startline="858" data-endline="860" data-position="24628" data-size="0">
<p data-position="24626" data-size="0"><span data-position="24628" data-size="17">是否具備優化搜尋系統的知識與時間:</span><br>
<span data-position="24648" data-size="57">若沒有時間好好規劃及校正搜尋引擎的設定,可能會導致使用者在查詢時看到一些奇怪的結果,所以若沒有時間的話不如不要使用</span></p>
</li>
<li class="raw" data-startline="861" data-endline="863" data-position="24715" data-size="0">
<p data-position="24713" data-size="0"><span data-position="24715" data-size="13">可採用替代方案-建立索引:</span><br>
<span data-position="24731" data-size="57">對於知道自己要找什麼的使用者,搜尋引擎跟索引都能幫上忙。雖然建立索引是大工程,但索引是由人工產生及維護,建立較容易</span></p>
</li>
<li class="raw" data-startline="864" data-endline="866" data-position="24794" data-size="0">
<p data-position="24792" data-size="0"><span data-position="24794" data-size="10">使用者偏好的互動方式</span><br>
<span data-position="24807" data-size="41">若你的使用者明顯喜歡瀏覽(例:服飾購物網站)勝過搜尋,可以將搜尋放在較低的開發順位</span></p>
</li>
</ul>
<p class="part" data-startline="867" data-endline="868" data-position="24856" data-size="0"><span data-position="24856" data-size="1"> </span><br>
<span data-position="24867" data-size="22">→ 以下議題可用來評估何時會用到搜尋系統:</span></p>
<ul class="part" data-startline="870" data-endline="882" data-position="24897" data-size="0">
<li class="raw" data-startline="870" data-endline="871" data-position="24899" data-size="0">
<p data-position="24897" data-size="0"><span data-position="24899" data-size="10">當資訊多到不利瀏覽時</span></p>
</li>
<li class="raw" data-startline="872" data-endline="873" data-position="24913" data-size="0">
<p data-position="24911" data-size="0"><span data-position="24913" data-size="11">搜尋對零散的網站有幫助</span></p>
</li>
<li class="raw" data-startline="874" data-endline="876" data-position="24928" data-size="0">
<p data-position="24926" data-size="0"><span data-position="24928" data-size="15">將搜尋用於經營資訊空間的工具:</span><br>
<span data-position="24946" data-size="72">透過搜尋紀錄分析,可蒐集有用的資料,例:使用者真的想在資訊空間中看到的資訊,以及他們使用的關鍵字為何。透過這些資料可診斷並調整搜尋體系及資訊架構</span></p>
</li>
<li class="raw" data-startline="877" data-endline="879" data-position="25024" data-size="0">
<p data-position="25022" data-size="0"><span data-position="25024" data-size="13">使用者將搜尋視為理所當然:</span><br>
<span data-position="25040" data-size="38">使用者不一定每次都願意瀏覽,寧可直接查詢,且現代的使用者已習慣到處都有搜尋框</span></p>
</li>
<li class="raw" data-startline="880" data-endline="882" data-position="25084" data-size="0">
<p data-position="25082" data-size="0"><span data-position="25084" data-size="11">搜尋可以處理動態內容:</span><br>
<span data-position="25098" data-size="36">當資訊空間的內容經常更新,就該考慮建置搜尋系統,省下人工建立索引的時間。</span></p>
</li>
</ul>
<h4 class="raw part" data-startline="883" data-endline="883"><span data-position="25143" data-size="6">剖析搜尋體系</span></h4>