September 11, 2008

傳送至 Kindle
互動式隨選列印/另存成 PDF

[敲打鍵盤]親和力的設計花樣──建立導覽框架

這一篇是我給自由軟體鑄造場電子報的稿件,刊登於第九十四期 (2007/12/16)。

親和力的設計花樣──建立導覽框架

從這一期開始,我們要從「設計花樣」的角度開始,來探討網頁親和力的種種實做。

「設計花樣」是我們在做各種設計時所使用的術語,不管是在電腦程式、人機介面、網頁等設計領域,設計師們在溝通要有哪些功能、設計、裝置時,都會用這些「設計花樣」的名詞用來表達那些概念。「花樣」可以是一種模式、一種功能、一項裝置等概念,可以是某種影響整個網站的定位或規範,例如「個人部落格」或「網站商標與識別」,也可以是小範圍的實做如「目前位置指示符」、「動態按鈕」或「網站地圖」等。

藉由設計花樣,設計師們可以便於釐清設計概念、情境,發掘設計障礙或困難,並找出合宜的設計方案。一般來說,當我們在描述一種設計花樣時,除了這個花樣本身的名字外,還會去描述其產生的脈絡背景、所要處理的問題、各種作用在該花樣上的外力影響、解決方案、以及其他可能會有相關的設計花樣。

運用設計花樣來溝通,可以讓設計師們不侷限於技術細節,同時又保有高度的靈活;當我們討論設計花樣時,並不是要給你甚麼成功網站非有不可的「甜蜜點」──真的做過設計的朋友就會知道沒有那種東西存在,隨著時間以及使用族群的演變,許多設計花樣也會跟著演變、消失或出現;經典的設計花樣會持續較久,但並非全然無可取代,另外某些設計花樣則可能僅適用於特定的情境或前提,或者與某些設計花樣一定要共存,但跟其他某些設計花樣互斥。不論是做程式設計或網站設計,見樹不見林或見林不見樹都是致命傷;如果用設計花樣來當作中介橋樑,就不會迷失在多變的設計之中,也將更能靈巧地面對未來的變化。

做為這個子系列的開頭,我們要先從跟「建立導覽框架」有關的親和力設計花樣開始。「導覽」是現代網站首要面對的挑戰之一,因為沒有人能夠預期讀者會從甚麼地方進入你的網站──有可能是從首頁,也有可能是部落格上的某一篇回應;如何建立一個導覽框架,讓讀者不管從哪邊開始,都能夠掌握整個網站的內容,這不但是個親和力議題,也關係著網站的可用性。

跟「建立導覽框架」有關的設計花樣並不少,囿於篇幅關係,在此我們祇先討論一個跟親和力尤其有關的,叫「多重導覽途徑」的設計花樣。基本上不論是哪一種網站,小自個人部落格,大至複雜的電子商務網站,都會需要這個花樣;因為不論是哪一種網站的訪客,都會用各自偏好的方式來瀏覽整個網站,如果有任何關鍵的導覽工具──例如導覽列或導覽側欄等──在某些頁面難以尋得甚至消失不見,那麼訪客們勢必會覺得網站本身難以使用。

更進一步來看,其實訪客們各自的「偏好」取決於他們的意圖跟衝動,也就是理智的目的以及感性的需求;如果網站缺少了意圖性的導覽工具,那麼訪客們會覺得網站的安排很詭異、很沒道理,反之若網站缺少了衝動性的導覽工具,則會變得枯燥乏味。不論是哪一種導覽工具,還要注意不同動機的訪客,也會有其所偏好的導覽風格──例如「搜尋」、「瀏覽」、「下一步」、「精靈」、「關聯」、「推薦」等,都是不同的導覽風格,也都有各自適用的導覽工具。

如果用來實現各種導覽風格的工具被任意安置,那麼訪客也許就無法從中獲得好處──他們根本不會去用!這些導覽工具需要被放在訪客們找得到而且也會去用的位置,這些也是「多重導覽途徑」這個設計花樣所要面對的問題。

解決的方法其實很明顯,也就是任何網站都應該要具備多種不同的導覽途徑,同時滿足意圖型的訪客與衝動型的訪客,而且這些導覽工具的安置應該要有其規律及一致性──運用「頁面模版」及「格線佈局」等設計花樣,將能讓多重導覽途徑兼具理性與感性。

為了讓各種訪客都能完成其來訪目的,通常我們會把搜尋工具及主要的瀏覽型導覽介面放在網頁的一開頭、最上面的位置;如果有需要用到「下一步」這類精靈風格的導覽工具,例如商務網站的結帳流程,則可以同時把他們放在頁面的上方及下方,最後別忘了盡可能加上關聯型的導覽工具,例如相關或推薦的產品/文章,滿足訪客的衝動需求;這些關聯型的導覽工具可以放在網頁文件較後端的位置,纔不會搶走主要內容的風采。

讓我們最後再來整理一下「多重導覽途徑」這個設計花樣:

脈絡背景:

  • 任何類型的網站。

所要處理的問題:

  • 訪客會用各種方式瀏覽整個網站,如果有任何關鍵的導覽工具難以尋得甚至消失不見,那麼訪客們勢必會覺得網站本身難以使用。

相關外力影響:

  • 瀏覽網站的方式取決於訪客的意圖跟衝動。
  • 不同動機的訪客,會需要不同的導覽風格。

解決方案:

  • 導覽工具需被放置在訪客們找得到而且也會去用的位置。

其他可能會有相關的設計花樣:

頁面模版、具鑑別力的 HTML 標題、網站商標與識別、格線佈局、一致的相關資訊側邊欄、單一瀏覽繼承性、導覽列、頁籤列、目前位置指示符、有意義的錯誤訊息、找不到的網頁、靜態鏈結、跳過選單、網站地圖……。

上述的這個設計花樣,除了適用於任何網站外,同樣地也適用於各種圖形介面的應用程式設計。至於最後所提到的這一堆相關設計花樣,未來我們也會逐一加以說明。

(+) 於 所發表 | 顯示版本變更: 1.4 |
[創用 CC 授權條款]
親和力的設計花樣──建立導覽框架〉由 Jedi 製作,所有內容如無特別聲明,一律以創用 CC 姓名標示 3.0 台灣版授權條款釋出。
相關文章:
歷史上的今天:
西元 2004 年:
迴響
[ 1 : 靜態鏈結 ]

最近無意間在搜尋器發現你的文章(劃地自限),看後很熱衷看你寫的文章(關於網頁的),寫的很好,很有幫助,謝謝指教.

由 Mabel 發表於 September 11, 2008 11:10 PM
給我迴響吧!
個人資訊








是否記住個人資訊?



請依上圖輸入檢核碼:
迴響





Jedi.org: 部落格 | Weblog | 三太子 | 討論 | MTBook | 網頁親和力 | 深入親和力 | 簡報原力:AV | 履歷 | + | @ | Flickr | Lytro | tumblr | NSFW