設計小訣(HCI: Design tips)

其實準備投影片還蠻辛苦的…常常要在心中模擬聽眾的反應,確定內容大家都能理解,並且感興趣。並且要拿捏份量,不能講得太多。最近,Presentation Zen就介紹了Michael Alley的說法,主講者必許在演講的深度與廣度間,做出一個取捨。

由於第三次分享前一週,已經請Max來介紹Usability(使用性/優使性)的實務經驗。我也樂得輕鬆,只要講一些瑣碎而且管用的小東西就好了。因為我想大部分的學生都會作網頁,或是會開始裝扮自己的Blog等等,所以我覺得由一些網頁設計的實際案例與小訣竅與設計,會比較容易讓學生們理解。這些都是一些入門級的概念,看到這篇文章的行家們請多多包涵。

我覺得,大部分所有的網站或介面在使用性功能上的設計,都是為了一個最基本的目標:「不要讓使用者迷路」。我最喜歡舉的例子,就是我家附近的新店慈濟醫院。這家醫院的建築,美侖美奐,空間寬敞。只不過,也許因為空間太大了,它的指標跟告示標誌,往往放在意想不到的地方。許多第一次進去的人,非得要努力的東張西望,尋找有沒有一些標示系統的蛛絲馬跡。不過,慈濟醫院有一個「超完美」的智慧型導覽系統,就是無所不在的慈濟志工組織。他們一律身穿慈濟制服與背心,並且無所不在;不管在何處,隨眼望去必定有三四位師兄師姐,面帶微笑且口誦「阿彌陀佛」來幫你指點迷津。小從指路,大到代為操作自助掛號系統,分送茶水點心,以及音樂演奏、雜耍表演已娛樂等待的病患,樣樣都有人負責。不但提供「使用性」,還提昇「使用者體驗」。

可惜,並不是所有的事業,都能像慈濟能動員那麼多志工。因此,一些好的使用性設計訣竅還是值得參考學習的。我一共介紹了八個介面設計上的小零件,並看看這些東西如何在某些案例上發揮他們的效果。

  • Bradcrumbs,後來有人翻譯成「麵包屑」。是大型內容網站或入口網站常見的設計。這個設計十分不起眼,但又很有效,就好像走迷宮的時候的救命索,讓使用者在深入複雜網站時,能有跡可尋。
  • Navigation,導覽列。我用Amazon網頁設計的演進,來說明導覽列的設計考量。
  • Sitemap,網站地圖。就好像書後的索引,網站地圖其實不應該只是把網站內所有的頁面檔案攤開列出來,而是需要根據使用者可能尋找的主題,組織頁面內容,提供一個與網站首頁「異序」的瀏覽方式。我覺得The New York TimesSite Index就是一種不錯的範例。(*1)
  • Next,讓使用者知道下一步要做什麼。將複雜的資訊工作,步驟化,讓使用者能一次專注一樣主要的工作。我舉了當年Blogger.com首頁重新設計的例子。
  • Cancel,讓使用者有能力可以隨時中止取消。Microsoft 在這方面做得很多,但也許有點走火入魔了一點。但在手機的介面設計上,也有很多這個例子。
  • Wifeframe,線框圖。資訊架構師常用的工具。當資訊介面設計(軟體、網頁)越來越專業化,視覺設計師與資訊規劃師也開始區分不同的工作專業。為了保留資訊規劃工作的要點,並保留視覺設計師最大的創意彈性,需要透過去除視覺設計細節的線框圖,來作為設計工具。
  • Map & Information vaualization,地圖與資訊視覺化。所謂一圖勝千言。這些事情,圖表達人李怡志已經教育大家許久了。我舉了幾個經典的例子,讓大家看看就好。

我的資料,有許多來自於「操作介面設計模式」,「資訊架構學」,Tufte的「The Visual Display of Quantitative Information」等書,有興趣者可進一步參考。

註:(*1) 我作簡報的時候,NYTimes 的sitemap還是直接redirect到Site Index頁面上。可以我在寫此文的時候,NYTimes的sitemap連結已經指向給搜尋引擎spider專用的"spiderbites"了。