日常中從查詢電影時段、閱讀Photoshop技巧,到觀看每日新聞,可以發現我們大多是透過網路搜尋來獲得這些資訊,其中對於網站來說特別重要的一部分,就是協助搜尋到我們想找的,這些就是透過導覽來達成。

  然而利用導覽來搜尋的同時,多數網站在這方面都規劃的不是很好,即使足以讓我們找到想要的資訊,但是,往往會在一片混亂後,利用非常傳統的方式才找到網站,這些過程就像是場審判和錯誤,並且我們自己也做得到。
  如果一個網站的導覽組織不善,出現許多混淆的字眼或是過多的連結,都會降低我們使用它來快速搜尋的能力,因此,明顯和直覺的導覽,將會是作為一個優質網站的關鍵基礎。
  以下列出的方法將會協助您創造更有效率的導覽,使之成為您網站的一部分。

 

1. 版面清楚簡單


  當網站的訪客點擊連結,來到網頁而不知道該預期甚麼,或是不明白如何以更簡單方式找到想搜尋的東西時,會造成許多混亂的結果。
  當網站的訪客不知道點擊連結時會發生什麼,或如何輕鬆找到想搜尋的內容時,會造成許多混亂的結果。
  為了減少這種情形,我們必須藉由導覽設計,使訪客更簡單操作。Abercrombie & Fitch的網站也提供了這個概念;他們的導覽設計在於,讓初次造訪的人能輕鬆了解網站內容。

 

https://www.abercrombie.com.tw/zh_TW/home

 

  運用簡單明瞭的標籤,讓訪客在瀏覽網頁時能迅速了解您們的產業,清楚知道自己一開始就來到對的地方,以及如何到達他們想去的地方,另外仔细思考網站中所使用的導覽術語,是否能讓訪客輕鬆找到自己想搜尋的內容。
  避免導覽圍繞著制式的內容,舉例來說,與其單獨只有影片的頁面,倒不如設計一個〝how to〞的主旨將內容作區分。確保操作項目的描述能讓使用者更簡單搜尋,一般造訪網頁時訪客不太會搜尋影片的部分,但可能會尋找如何安裝產品,或是了解某些功能如何操作。
  因此必須清楚顯示哪些是導覽項目,過於簡化並不會幫助訪客找到想去的地方,例如,即使讓連結有較深的灰色陰影,讓外觀看起來美觀,但卻無法創造出更棒的使用者體驗,記住別讓訪客太費力於您的網站。

 

2. 保持一致性


  相信您一定有因為跟隨導覽,而感到後悔的經驗,或是發現那根本不是導覽,這種缺乏一致性的功能,將會降低訪客對於網站的信任度,並且,減少使用者的體驗品質,如果有些事情看起來只是附加在您身上,相信在顧客的眼中看起來也一樣,甚至更糟。
  Bouguessa的網站有質感,導覽明確且一致性,並且同時能協助改善訪客體驗。


 
https://bouguessa.com/home

 

  另一個會降低導覽品質的原因,特別是選單上連結失效;當點擊項目而沒有出現連結時,將增加訪客混亂的程度,因而感到挫折。因此必須以視覺效果來區分選項是否有連結,舉例來說,如果您的網頁使用mega menu,請嘗試使用不同的字型、顏色、背景,來突顯標題與連結的不同。
  什麼是mega menu呢?以下提供範例給大家參考。


 
Puma官網

 

 
Asos官網

 

  次要導覽在設計時也應該保持一致性,思考運用與主要導覽同樣的聚焦方式。無論訪客在網頁上的何處,您都將能提供最優質的體驗。
  如果您的網頁,是希望提供訪客更容易造訪為主,可以在首頁製作功能表,或是登入區域,訪客將會注意到這些區塊,但如果是以突出且加亮的方式顯示導覽,往往會破壞整個選單。

 

3. 保持簡潔


  避免製作選單時設計過多的選項,最好限制在七個以內,對訪客來說提供較少的選項比較好,這會使訪客在選擇時減少心理壓力,並增加他們往前邁進的機會。
  研究顯示,人類的大腦可以使用重組來提高記憶,透過分解數據轉化為相關區塊,可以讓我們加強理解與記憶,特別對選單項目需要超過七個以上的大型網站來說十分有效,因此嘗試把選單項目轉化為群組,將更有效幫助您的訪客。
  另外記得,當您每次從選單刪除某些項目或元素時,只會讓其餘的一切更加顯著,移除某些東西時,其他項目將更容易被看見並點擊,所以仔細評估哪些是真正需要做為網站的一部分,而哪些則是可移除,不需精簡及改善的經驗。
  在這裡Olson Kundig的網站也提供了很棒的簡化導覽體驗範例。


 
http://www.olsonkundig.com/

 

  除此之外,仔細思考您的導覽排序,就像是生活中的其他部分,在開始和結束時都最為突出,使用者在列表的開始及結尾注意力與保持力最高,這是研究出基礎心理學的結果;顯示人們能在最初與最末的地方加強記憶。
  利用這種現象,可以把重要的項目設置在選單的最初或最末,位置對於顧客來說十分重要,因為取決於能否更容易使用網站,因此如果您不確定哪些項目對顧客來說比較重要,查看分析資料,看看哪些網頁得到最多的瀏覽量。

 

4. 使用扁平化架構


  一個優質的導覽始於深思熟慮的資訊架構,當您思考網站組織的同時,盡可能保持扁平化的架構,讓訪客能在一、兩次點擊後能到達任何網頁,當頁面保持較少層級時,才能讓訪客以快速、簡單,最少問題的方式到達任何他們想去的地方,限制層級的數量,讓您的導覽使用起來更容易。
  盡可能打造扁平化的架構,幫助組織您的網站,把分散的頁面變成群組,取代層級式的巢狀組織。整合所有相關的內容,甚至可以考慮分組的頁面與現有的型態不同,但過於奇特的組合,即使幫助網站的層次架構變得扁平化,卻不會讓使用者有共鳴。
  視覺設計可以幫助使用者,更輕易明白選單的架構,利用字型樣式、大小、顏色,以及空白背景理解導覽的層級,並以明確協調的方式,區分主要及次要導覽。

 

原文出自:4 simple steps for perfect web navigation

 

官方網站:http://www.lccnet.com.tw
FB粉絲團:https://www.facebook.com/lccnetzone
菜鳥救星:https://www.facebook.com/greensn0w

 

延伸閱讀

聯成電腦分享:全方位養成  設計、行銷、企劃一次學會

聯成電腦資訊分享:6個技巧 更了解使用者體驗

聯成電腦資訊分享:2017年網頁趨勢

聯成電腦資訊分享:LOW POLY 給你不一樣的網頁背景

聯成電腦資訊分享:免費資源-20個必看的網頁設計電子書

文章標籤
創作者介紹

聯成電腦--在成長的路上彼此相伴

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()