混亂的路標,不良的資訊導引

什麼是資訊架構?為什麼需要了解它?

    網站,是用來溝通、傳遞資訊的,我們藉由網站和不同的人溝通,這個過程傳遞了資訊,但是使用者要如何使用我們的網站?她又要如何理解網站的性質、內容?當使用者來到我們網站如何能夠簡單迅速的取得需要的資訊?這些都有賴資訊架構建立出資訊系統的空間概念,並適當地引導使用者理解、尋找路徑,前往取得需要的內容。

 

章節目錄

 

資訊架構是什麼?

    資訊架構學(Information Architecture IA),對台灣人而言,是一個非常陌生的名詞,但是資訊架構卻是一個非常重要的工作,也許你我都曾經做過類似的事情而不自知。

    資訊兩個字,也許有些人理解他的意義,也許不是很清楚資訊兩個字所代表的意思,在網路溝通與傳遞資訊,什麼是資訊?這篇文章有說明過資訊有兩個重要的條件,有用時間,簡單來說,在這個時間點,對我有用,能夠影響我的行為或者想法,才叫做資訊。

    但是將資訊+架構兩個字組合在一起,也許就變得更難理解。資訊架構是從圖書館分類系統脫離出來,原本只是整理、分類資訊的工作,在Information Architecture 100:100個網站規劃必備的知識這本書裡面就有說明很多IA的基礎知識和分類方式。

    資訊架構跟UI、設計有點像,都是那種好像很簡單、好像人人都會做,但不一定可以做的好,我認為最好的資訊架構就是作到隱形、無感,使用者無法體會資訊分類整理處理過得痕跡,需要的資訊總是能夠隨手捻來,不需要額外尋找、取得;資訊架構是也是SEO跟UX的基礎,如果IA做的不好,很難會有良好的UX感受以及優秀的SEO排序。

 

IA的內容有點難說明,或者說我學得還不夠透徹,大概先用兩點說明資訊架構:

  1. 在適當的時間,用使用者理解的方式,提供須要的訊息
  2. 預防、處理資訊迷宮

 

正確的時間、提供需要的資訊

    資訊架構的第一個重點,在於資訊兩個字,網路溝通與傳遞資訊,什麼是資訊?這篇文章說明過資訊有兩個重點,在這個時間點需要這些訊息,這個重點但不限於網站整體的網站結構、目錄結構,可以大到整個網路經營體系、不同網路接處點所組合的訊息結構,甚至是整個企業的經營體系,小到可以是一個頁面需要哪些訊息、用什麼方式呈現。大的體系可能比較容易理解,單一頁面資訊提供部份可能比較不容易了解,我用兩個線上購物網站的運費資訊來說明:

    習慣線上購物的消費者,大多數都能理解有運費這個東西,當我們開始有意願購物的時候,通常會開始思考運費的問題,除了商品價格,加上運費才是我必須要付出的成本,同時也會好奇是否有免運費、以及免運費的門檻。

全家線上購物-運費

    全家線上購物網站本身就帶給我一個訊息,這是全家超商的網站,所以商品通常都可以在全家超商取貨,且付款方式、運費、免運條款都直接出現在加入購物車的按鈕下面,用折疊選單收折避免畫面難看,但是提示的付款與運送讓我能夠立刻知道這裡可以看到運費和付款方式,同時旁邊的超商logo再一次提醒我這是全家超商的線上購物,同時暗示可以到店取貨。

 

大潤發線上購物

    大潤發線上購物在商品頁面,沒有辦法看到任何付款方式、付款條件、以及運費、運送方式等資訊,就算用頁面搜尋文字也找不到付款、運費兩個字眼… 運費、運送方式需要進去宅配到府這個連結才看得到,位置隱藏在下面灰色區域、文字又是黑灰色,不論是區域或者文字本身、以及排版都是很容易讓人直接忽略的設計,進去之後又是滿滿文字的運送條款,運費藏在內容裡面,同樣一個購買方式頁面也可以透過上方的最快6hr隔日到或、貨車Banner進入,但是這個Banner設計無法讓人知道這是一個連結,反而是讓人認為這是一個資訊提供Banner。而付款方式則是要進入同樣區域左邊的購物流程裡面才看得到。

 

    購物流程本身又是另一個很匪夷所思的設計,好的線上購物平台應該是要讓消費者容易操作,最好的是不需要經過任何學習,依據資訊流程結構,以及頁面UI、VD設計提示,讓使用者自然而然的進行操作,教育消費者如何使用網站這件事情,本身就是一個錯誤。

 

    今天我是因為需要尋找案例,以及這個商品是我的必需品,但是賣得地方不多,我確定大潤發有,所以才會花時間尋找資料,如果是一般購物網站,商品容意尋找取得的,或者是衝動消費行商品,在這個過程中通常使用者就直接跳離!!!離開網站了,不可能會花時間去尋找這些資訊。有部份的消費者也會將商品加入購物車,然後藉由購物車的介面知道運費、付款方式條件,這種狀況也只是造成數據的虛胖,消費者加入購物車的目的並不是購買、而是獲取更多資訊,這時候仍然在猶豫要不要買… 這種狀況分析再多流失漏斗數據、修改優化再多結帳流程都沒有用。

 

誰在用?不同的使用者,需要不同的資訊

診所看診時間

    IA第二個必須要釐清的重點,是使用者,誰是使用者,這是非常重要得問題,不同性質的使用者會有不同的資訊需求、也會有不同的操作模式。就以診所網站為例,這張圖是診所網站首頁的內容,通常來說我們尋找、瀏覽一個診所網站,通常會想要知道哪些訊息?門診時間、聯絡資訊、地址、電話?診療項目、優惠活動、特約單位?這張圖很清楚說明地址、電話、聯絡方式以及診療時間,診所名稱、頁面其他地方設計也相對容易理解這個診所的診療內容項目,看起來好像IA做的不錯,使用者需要的資訊都有了。

 

真的是這樣嗎?

 

    不同性質的使用者,會有完全不同的需求,如果我或我身邊的人正在不舒服,我們尋找診所網站會想知道什麼?距離我有多遠,現在有沒有開(何時有開),診療項目…如果是之前已經到這個診所就診過得老病患,回來看網站會想知道哪些訊息?診療時間或者聯絡方式應該會是最想知道的,其他的地址、看診項目等已經知道的內容就已經不是需要的資訊了。但是診所的病患並不只這兩種性質,還有回診病患、長期病患者等各種不同的類型,不同性質的患者當然會有不同的資訊需求。

 

我看不懂你的明白:容易理解的文字用詞

    資訊架構的第三個重點,在於表達、以及傳遞的方式,影片須要讓人看懂、或者想看,圖片要讓人理解,UI設計的話面、圖標須要讓人清楚知道用途意思,當然網站的文字須要讓人看得懂。

    一般網站、影片、圖片、UI經常發生的一個問題,在於表達方式。藝術家創造作品,是用他的作品傳達出他想傳達的問題,作品內是使用藝術家獨創的語言,能夠理解方能與之共鳴。但是UI設計不同,設計是要讓人方便使用,產品、網站、APP的設計重點在於使用者,要讓使用者容易理解、容易使用,所以必須要使用使用者的語言,用容易理解的方式呈現。

    網站的資訊架構,除了何時、何地呈現哪些內容以外,所使用的語言、文字必須要非常謹慎,中文的詞語的意義千變萬化,但是英文或者其他語言也有一字多意、或一意多字的狀況,精準使用語言文字是非常重要的。一個常見的錯誤是網站為了呈現所謂的設計感,使用艱深拗口、或者別具意境的文字,想要藉此展現網站設計、文字使用的內涵,但若是文字造成使用者誤解、不容易理解內容,那這個文字使用將會毫無意義,甚至讓網站變得難以使用。

 

用容易理解的文字表達內容

    原燒、和逐鹿兩間燒肉餐廳的網站,都有同樣的問題:為了符合一貫的設計感,文案、網站文字的使用很特別,甚至特別到讓人無法知道這個選單連結裡面是什麼。

原燒網站主選單

    原燒的網站主選單,哈燒據點可以猜出來是餐廳地址、聯絡電話,哈燒職缺大概是徵人公告,訂位應該是要c2a的重要項目,卻非常的不明顯。

  • 燒味食足:套餐內容、價位
  • Hot哈燒好康報:最新消息、活動廣告、禮券使用說明和聯名卡活動廣告等….一堆東西都塞這裡
  • 燒肉話題:聯絡我們表單
  • 好站連結:集團餐廳網站連結

    原燒的網站設計、和使用的技術都偏老,甚至仍使用Flash呈現頁面;手機版有收斂內容,主要呈現使用者需求內容,只是文字說明偏小,所有流程、操作都必須透過首頁連結單線前進,但是一般習慣logo可以回首頁卻是無反應,回首頁按鈕太小。

 

逐鹿燒肉手機版網站選單

    逐鹿燒肉的網站選單,第一個、第二個文字大概可以猜測出裡面是肉類菜單、以及醃漬肉品菜單,但是從第三個選單之後,已經無法看懂內容是什麼意思;且文字圖像的設計極具風格,需要花額外的時間思考、辨識文字。如果逐鹿燒肉本身沒有足夠的知名度、和品牌名聲,使用者不會嘗試逐一點選連結查看內容,官網的設計方式,也不會有SEO成績,除了品牌引導搜尋以外。

  • 江海一味:海鮮
  • 墜霜落英:蔬菜
  • 聚寶盆:火鍋料
  • 寒冰星屑:冰品
  • 俠客形象:蝦、單點食材

其他的用餐時間、費用、服務費、營業時間、餐廳地址等資訊甚至無法透過選單連結找到,要不斷拉動頁面,在接近頁面尾巴的地方才有。

    我們尋找餐廳官網,除了想要知道有哪些菜單以外,其實最關注的資訊就是地只、費用、用餐時間、營業時間、和預約定位。

 

用正確的文字表達,文字和內容必須要一致

    台北捷運的選單、標題文字,和內容呈現方式容易讓人搞混,看不懂想要呈現的意思。

台北捷運網站-票價及乘車時間頁面

連結進入後的頁面,這個網頁與從網站選單進入是同一個頁面,這個頁面大概不會誤解,畢竟都知道車票價格是以A到B站計算。

 

台北捷運 - 動物園站 票價及乘車時間

這個畫面就讓人疑惑了,乘車時間為何會是單一數字?沒有任何說明、也沒有任何單位,後來看到其它頁面之後才了解,這個乘車時間指的是兩站之間的行駛時間,也就是A站上車,多久之後會到B站得站間行駛時間。那我想要找這個站幾點有車的行駛時間、時刻表呢?

 

台北捷運 台北車站資訊

點到車站,跳轉頁面到車站資訊,轉乘、位置、出入口、電梯等資訊都有,車站地圖也有,雖然點選之後變成新視窗下載PDF這點很糟糕,但至少看到時刻表了。

 

台北捷運 時刻表

進到這個頁面真的很傻眼... 時刻表在哪? 只有幾個注意事項,也沒說多久會有一班車,甚至還要另外再去找"各站首末班車時間"。

 

    以台北捷運的網站設計,因為是必須使用的網站,所以我們必須要一個個連結尋找內容,但是過程會讓人很不愉快。相對於高雄捷運在Google搜尋結果的連結項目,以及網站進入後尋找資訊的部份,連結文字用詞使用都好很多。正確的使用字詞、好的資訊架構規劃,使用者容易尋找、取得資訊,連結、流量的數據也會正常,當然Google就很容易理解使用者主要需要的項目,SERP搜尋結果當然就會呈現最重要的連結項目。

高雄捷運Google搜尋結果

 

這個按鈕按下去會不會爆炸?:正確的操作引導

紅色驚嘆號警告    

    如果操作介面按鈕有這個符號、顏色的內容出現,會不會讓人驚訝?擔憂,思考要不要按這個按鈕、按下去會怎樣?其實不只這個按鈕,網站內部的文字使用,UI按鈕的設計,以及Call to Action(c2a行為召喚)按鈕等,任何需要讓使用者點選、並且會引發後續動作的按鈕、連結,都需要能夠讓使用者理解這個按鈕、文字連結的意義,接下來會產生哪些行為動作、或者前往哪個頁面。

    例如說結帳、註冊等流程類的頁面,我們經常會看到【下一步】這種按鈕,這個內容其實是會讓使用者疑惑,下一步要幹麼?接下來是什麼頁面?我該有哪些心裡準備?如果說下一個頁面是要填寫收件者資料,那連結名稱改為【填寫收件資料】會更好。

國家地理雜誌電子報訂閱視窗

國家地理雜誌電子報訂閱的畫面就處理的很好

  1. 按鈕部份使用"立即訂閱"這是一個帶有動作提示的c2a文字使用,除了讓人知道按下去之厚的動作、會產生怎樣的結果以外,同時帶有動作指引的Call to Action行為召喚指引。
  2. 通常使用者在訂閱電子報時,下意識裡通常會擔心自己的個資是否安全、會不會因此收到一堆垃圾信等,畫面下方簡單的用詼諧性文字處理了這個問題,可以提高電子報訂閱的機率。

 

 

迷路:容易理解的分類架構

    你,迷路過嗎?

 

喜不喜歡迷路的感覺?

 

    資訊架構除了資訊的分析內容:使用者、字詞、行為模式、和操作指引以外,還有另一個重點,要讓人容易理解。這個理解除了單一介面、文字的使用以外,也必須要讓人理解身處位置,和前往道路方向。對比來說,就有如地圖、建築物,資訊架構經常出現的另一種形容詞,就是資訊的建築師,通常建築師在規劃建築物時,就要規劃好內部各個空間的使用、動線、以及各種建築的參數,資訊架構也是需要架構資訊環境的型態、使用者行為的引導等…

    我們幾乎都有去過大賣場、百貨公司、車站,這裡面也隱含了資訊架構的意含。像台北車站是三種型態車站,車站還連通了地下街、公路客運站、機場捷運站,各種路線串在一起很容易讓人迷路,建築師除了要規劃適當地路線將這些地點串連,還需要建立適當地路標說明指引可以讓旅客理解所在位置,並能依循指引前所目的地。

    另外以賣場、百貨公司來說,如果是我們經常去的賣場,通常都能很快找到我們要找得東西,但如果是一個陌生的賣場呢,雖然我們會花比較多的時間尋找需要的商品,但大多數時間仍然能找到,為什麼我們可以找到?用什麼方法尋找?位曷不會在新的賣場迷路? -- 賣場的商品擺放都有一定的規律,生鮮、飲料、餅乾、糖果、點心、服裝、冰品、泡麵…性質相近的物品會擺放在一起,而彼此性質相似的類別,也會擺放在一起,如餅乾旁邊通常都是零食、糖果、點心,而包裝水會在飲料旁邊等…

空間開闊的圖書館

真實世界體的環境容易型塑空間概念,虛擬資訊空間很難建立方向感。

 

    資訊架構也需要處理這個問題,當我們進入一個新的網站,我們會怎麼看待?很多人都會認為是從首頁進入,然後依據首頁指引,但是想想我們實際的行為呢?不論是透過Facebook貼文、Line分享、各種廣告連結,或者是搜尋引擎尋找到的網頁,現再的行為模式都是即接進入目標網頁,這時候問題就出來了,當使用者進入我們的網站時,她要如何理解她所在位置(哪個網站),這個網站有什麼?(提供資訊、服務),該如何前往目標頁面、取得所需資訊與服務?(網站超連結路徑與指引,這有如實體的動線)… 資訊架構需要架構好網站的結構,規劃好內容的次序、階層、以及連結的路徑,並且用方便理解的途型、文字說明這些,讓使用者方便、容易的使用。

    APP或者其他資訊產品都一樣,資訊產品不像實體環境容易型塑空間感,當我們處在大賣場,去個一兩次通常就能在腦中建構出這個賣場大致的空間地圖,之後要尋找商品很快就可以直接前往目標,但是資訊環境是處在一片虛無空間、沒有任何的參照目標,所以資訊架構建構環境、讓人理解並容易取得內容就非常重要。

    如果網站、APP沒有處理好資訊架構,UI的設計指引也沒有做好,使用者很容易在網站內迷航,依據心理學研究,當我們迷路的時候並不會怪罪網站沒有做好,通常下意識之中都會責怪、批判自己的認知、分析能力太差,這時候心情就會感受到挫折、沮喪以至於不開心,如果使用者使用我們的網站不開心,她就會離開我們的網站,並且不會再進入(我們都會避開讓自己不開心的環境)。

    網站、APP的離開成本很低,替代競爭者多,實體的超市、賣場也許要跑很遠才有另一間,離開出門還需要曬大太陽,離開網站只需要點個X就可以離開。且實體賣場、百貨、車站可以找到人問路,不論是現場的服務人員或者旅客,但是網站、APP的使用者是獨自一人操作,不會去接觸到其他的人,通常也沒有服務人員隨侍指引。

 

資訊架構與UI同是好像很簡單、但背後隱藏很多知識技能

    資訊架構與UI看起來好像都很簡單,我們每個人都會畫畫,UI、圖案不就是一堆顏色、線條的組合,照著畫也畫得出來。我們每個人都會說話、寫字,資訊不就是把文字排一下,段落階層畫一下就好了?

    UI需要學習很多東西,如色彩學:不同的色彩會帶給人不同的感受和印象,色彩之間的組合就是一門學問,而將色彩、線條、組合成圖面,以即可以操作的介面,還要讓不同的使用者能夠體會到同樣的感受,並且容易理解畫面、容易操作。

    而資訊架構需要知道使用者要什麼,什麼時候要,規劃適合得時間、出現適合的內容,還需要思考如何出現、如何呈現。而資訊架構有一個很現實的問題,最好的資訊架構,會讓使用者無感。

    好的UI使用者看得到、接觸得到,操作過程感受得到,所以我們能夠理解並讚美作得很好的UI設計。但是好的資訊架構會減少使用者的疑惑、思考,使用的過程隨手捻來,不需要停頓、思考,不會產生疑或問題。所以好的IA會讓使用的人們感覺很順暢、好用,而不好IA反而會讓使用者困惑、生氣。就如同行政後勤一樣,當行政後勤單位運作良好時,我們會感受事物順暢進行,不會有問題,沒問題就是最高境界,但是當行政後勤單位出問題,就會發現各種東西都找不到、各種物資都缺乏、每件事情運作都卡卡不順暢。

    網站、APP規劃,IA是從很早期就需要介入、思考的部份,缺乏IA網站仍然可以做出來,不像缺乏工程師就沒有網站一樣;但是如果沒有良好的IA規劃,網站很可能就是花錢沒效果,甚至招致反效果花錢惹人厭;而好的IA可以讓網站擁有應該有的效果,達到想要的目的。