Search This Blog

Wednesday, March 16, 2016

ARSPIRE 17.1 好的導覽設計 Design for easy navigation

今天,不論做甚麼事情、在那個行業,都強調客人的體驗(UX User Experience)。無論在現實的建築空間,還是虛擬的網上世界,沒有好的導覽設計,客人找不到想找的東西,自然無法好好使用其服務或產品;客人感到迷失生厭,日後自然不願再度來訪。
Graphic from https://inbound.org

最近,我便要為我的初創企業寫一個功能頗多的網頁,雖然所有建築師都有點平面設計基礎,會Photoshop的我,Illustrator難不了我,即使Wordpress對我這新手是有點難,但身邊還有其他IT人和懂媒體設計的人,相信技術部份該還可以應付,更難的怕是如何分辦網頁的好壞,理解客人的體驗(UX User Experience),和團隊一起做設計,遇到分岐時,自己都不懂,又如何能做出正確的決定?更如何可以以理服人呢?就如畫畫,要會「畫」畫,先要學懂「看」畫,懂「看」的人,(在此不詳談,希望他日另立專題和大家分享),只要把握一點媒體的技巧,便不難得心應手,所以會畫某種畫的人,很容易就一理通,百理明,學會其他畫種。

看了網頁的發展,發覺近年大部份都趨向相同的格式,一般都非常簡潔,開始懷疑這是否只是一個潮流,大家覺得這樣最美觀,還是有背後的原因呢?從事設計多年的我,當然知道再美觀的東西,如果不好用,都稱不上是好的設計,就像再漂亮的鞋子,不好穿最終也只會給人擱在一旁。在網頁,如果找不到想找的東西,又或看來很複雜,根本無法理解,自然沒有興趣繼續探索下去,那麼即使再美觀、再有個性,也只是圖勞無功,所以如何導覽是非常重要的。

網頁設計自己沒經驗,也沒有太多朋友可以請教,但做建築物的標誌,可有不少經驗,不單在P&T時,曾經和公司的平面部門一起做了蘇州喜來登酒店的標誌設計(因為那家顧問公司中了標後倒閉了),也參與了不少項目的標誌設計,更經歷過複雜如希慎廣場的個案,明白各方的要求,更看見計劃和現實的落差。還有,身邊有不少建築標誌設計高人,既然自己愛玩跨界,何不同時談談現實空間與虛擬空間的導覽,或許可以從中悟出一點道理來呢?
Annie 和Sammy分享他們做地鐵標誌的經驗

今夜請來了兩位P&T的舊同事,Annie Chan和Jacob Ho。Annie 退休前(現仍為MTR做顧問),在香港鐵路有限公司MTR從事標誌設計多年,她和另一位也是來自港鐵的嘉賓Sammy To, 是多年的好拍檔,一起做了香港及國內不同城市的地鐵標誌設計,如深圳、廣州、南京、北京等。Annie 在做標誌設計前,曾參與車站的營運及優化工程,又做過不少新車站的規劃,故對車站的運作、行人的流線,都瞭如指掌。


Jim 和Jacob
Jacob Ho 創立的標誌工程公司-至形(Gradation) ,團隊在港有二十多人,在國內有超過百五人,規模相當大,香港許多大企業都是他的客戶,還包括了興建中的上海狄士尼Disney,據他說,園內的標誌非常不一樣,做起來更像做藝術品。我還請了做網頁設計多年的Jim,他在創立獅子山設計前,也曾在大廣告公司工作,目睹了網頁設計行業的轉變。本來還有一位建築師Vincent Lai, 他不但有設計大型項目標誌的經驗,還是一位出色的網頁設計師,可惜,這夜他抱恙未能出席,但他還是和我分享了他最近為慈山寺做的設計。
Vincent 為慈山寺設計的電梯樓層標示,直接用上了中國「三」字來表示各層,非常簡潔

除了嘉賓的分享,也看了不少關於導覽設計的書籍,做了點功課,在此和大家分享:

認清目的 了解不同訪客的需要

導覽設計是為不熟悉某地方的人而設的,在網絡世界,就是那些新來的訪客;在現實世界,要接待新訪客的建築類型如交通輸杻、酒店、商場、醫院等,至為重要。不同用途的建築,客人的目可以很不同,訪客中,有的已清楚知道自己在尋找甚麼,如在車站中找某路車的人,導覽設計要引領他們走最快最短的路;有的則漫無目的,如在商場中,到處逛是消遣的一部份,只要知道身處何地,找到電梯廁所,不迷路便可以;有的屬半探勘的,心裏只有意願和問題,未有明碓的目標。對於經營商場的,當然希望延長客人逗留的時間,加長路線以增加沿線商店的數目,甚至刻意帶客人「遊花園」。兩種南轅北轍的目的,自然會得出很不同的設計,前者直接了當,後者則可能稍為迂迴,(但過了份則難免換來客人的不滿),更可能在途中加入別的選擇,如插入讓人垂涎的食物照片以推介鄰近的餐廳,就如網頁嵌入其他廣告和內容一樣

經驗豐富的Jacob,便知道弄清目的及誰是目標客群,是非常重要的,讓各持份者提出自己的要求,並聆聽別人的想法,找出平衡點是非常關鍵的,所以他會在項目開展時,爭取各相關部門坐在一起,如市場推廣、租務、設計、物管、技術等,弄清各方要求,擺平各方矛盾,減少日後翻工的機會。

直覺操作 不假思索
 
網頁設計有本經典著作,名字改得很好,稱為"Don't make me think",好的導覽設計,一切都那麼流暢自然,不用動腦筋,單憑直覺便可以去到要找的地方。



所有設計都是為人服務的,而人在不知不覺間,已養成了不少習慣,並慢慢地建立了一些「合理期望」,就如我們入門便在門口附近找電燈的開關。我們也會期望在分叉路前有標示,在網頁上方或左方有導覽列(Navigation menu bar)。同樣,我們看東西也有既定的習慣,如看東西從上而下,從左而右(這與全球通行的阿拉百數目字的寫法有莫大的關係),地圖上方是北,粗大當眼的比幼小偏側的重要,外觀相同的是同類⋯⋯還有許多深入民心的符號,如男女代表洗手間、有人的方廂代表電梯、i 代表詢問處、放大鏡代表尋找........。如果我們貿然違反這些習慣,讀者則馬上要另覓解讀的方法,頓時要動起腦筋來。在網絡世界,這點對今天越來越沒有耐性的網民,更是重要,他們只要稍感複雜或吃力,便會馬上放棄。

人的習慣,不少也被應用到介面設計上,即使實物不存在,也模仿一些故有的效果和感覺。如將點擊的位置由平面變成擬似按鍵的模樣,讓人一看便知道它是可以按的,還模擬了按下的效果,提高了人們點擊的意慾和行動的回饋; 又如屏幕轉畫面做成像翻傳統紙本書頁的效果,以滿足人對看書的感覺和習慣。


流程圖 Site Map

不論實體空間或虛擬空間,都需要規劃出一張好的流程圖。現實空間導覽,有清晰的時間距離軸貫穿,每進一個空間,又或在分叉路口前,都要為行人提供方向以便選擇正確的路徑。對於地鐵這一類的交通建築設計,流線是相當清晰的,從街外入站,從未付款區付款入閘,然後在已付款區到月台, 都是很有規律的,所以地鐵公司有清晰的内部指引,列明各區要提供何種標誌。至於行人的流線,是順時針還是逆時針,完全取決於站內自動扶梯行走的方向,這些扶梯於上下班高峰期時,會順應需要而逆行,以疏導人潮
MTR 每一區使用的標誌內部都有清晰的指引

流程圖的概念,不單在現實環境中重要,也是做網頁設計的關鍵步驟,一頁就像一個室內分區,一個連結就像一道通往另一房間的門。要有好的瀏覽體驗,就不能製造過多的層次,為訪客設下許多關卡,一般而言,最好不要超過三次點擊,便要抵達目的地。

為訪客設想問題,不要設下死胡同

設計要不停代客人設問,想像他們要找的是甚麼,同時也要為自己設問,想在客人此行得到些其麼。此外,還有一些必要的輔助功能,如洗手間、電梯位置,在網頁則可能是查找、聯絡、登入/登出等工具。

不管現實世界或是虛擬空間,也不能引訪客進入死胡同,即使已引領客人到了目的地,也要考慮如何帶訪客離開,又或引領他們繼續瀏覽希望他們光顧的地方,像設下安全網,爭取接著遊蕩或已完成任務的使用者。設計還要考慮,客人可能迷路或犯錯,有回頭或重新尋找的機會。Annie 告訴我們,地鐡的標誌設計,除了平日常用的,還要考慮遇到危急或突發事件時,如何引領乘客安然離開,只要我們留意一下,便會發現這些平日不發光,卻隨時候命的緊急指示牌。

明白視覺及介面的限制

所有設計都要面對不同的限制,由人本身到介面的篇幅尺寸。

人的視力有限,看不見遠處過小的字體,年紀大了,這問題便更為嚴重,當距離較遠時,人接收到的光線有限,發光的標誌會較易看到。人看過於長的句子,也會容易迷失,所以不管昔日的報紙雜誌,或今天的網頁,都會分欄,而分欄的數目許多時成了重要的設計決定。

除了距離限制外,觀看的時間也決定了文字和圖需要的大小,Jacob 便為我們推介了美國在這方面的指引,讓我們可以按距離、觀看的時間來推算字體的大小。
字體的大小取決於觀看的距離

今天,人越來越缺乏耐性,許多瀏覽網頁的人只會走馬看花,不會閱讀詳細的內容,故今天的網頁設計,都趨向極為簡潔,盡量用跨頁的大圖或幻燈,希望能一圖勝萬言,留下深刻的印象,再在當中加入少量關鍵文字,盡量做到非常扼要。

介面方面,在現實空間,在那兒放甚麼指示是建築標誌設計的第一步,放的位置要留意是否會被其他物件所摭擋,許多時要按實際環境調整,不一定可以放在最理想的位置。此外,科技為我們帶來了許多新的智能標誌,如利用互動電視屏幕作為指示圖,但這些新介面並不一定受到歡迎,更多的人還是喜歡使用傳統的指示牌設計,一方面不用動腦筋,另一方面,也不用等別人用完,才能使用。

要進入網絡世界,今天主要介面不只是桌上橫向的電腦屏幕,還有五花八門的行動裝置,最細的就只有兩三吋的手機屏幕,這寬度成了設計的一個重要局限,設計也不再只是一個標準,而是設下不同寬度的臨界點,然後改變欄的數目和版面,變成可以適應不同裝置的全方位設計。


平衡實用與美觀

好的設計會幫助人理解,利用相同的字體、大小、顏色,幫助人識別不同的種類和層次,利用強烈的對比,把人的眼睛吸引到重點之上,區分出甚麼是主要訊息,甚麼是次要的訊息,當然也不能忘卻一些必要的功能。

沒有經驗的設計師,有時會因處理不了畫面的舖排或較多的內容,而強行削足適履,把一些需要的資料省掉。有時可能為了追求更優雅的設計,而選用了太細小或過於纖幼的字體,讓人不好閱讀。還有設計師認為使用常規的設計,便欠缺創意,但正如上述,許多訊息的接收是建基於人們的習慣,如果過份違背常規,又或做得過份抽象難明,別人找不到或難以理解,那這些創新便沒有價值了。

除了功能問題外,設計還有許多不是對與錯的決定,如顏色、字型、風格等,這都要回到基本的問題上,設計希望目標客群看了有甚麼感覺,接收到甚麼訊息,建立怎樣的印象,而非純粹設計師的個人喜好。

標誌設計及製造

來賓從事標誌及平面設計多年,目睹著行業的變遷。和許多其他行業一樣,科技讓進入行業的門檻變得很低,昔日做平面設計,單是學用筆,買需要的工具、括字,都花費不少,但今天,軟件越來越容易使用,只要願意花點時間,任何人都可掌握繪圖的技巧,加上互聯網接通了供與求的市場,讓繪圖的酬勞大幅下降,也同時大大削弱了昔日大廣告公司作為中間人的角色。

大企業甚至自行建立設計團隊,既可得到更即時的服務,又可免點子外洩。承建商也不斷加強設計的實力,一方面可以提供設計和製造一條龍服務,另一方面可以為設計"補底"(因不管誰錯,施工的都會成為錯誤的直接受害者)。我心想,這怕是所有建築相關行業的寫照。

Jacob 還分享了施工的一些經驗,今天他們經常要在現場為所有標誌做原大樣板,把每道門的名稱貼出來,讓各方可以看著實物發現問題,在製造前解決各方的矛盾。做網絡介面的,要避免太多翻工,也該在詳細編碼前,多收集用戶的意見,早點找出問題。

幾年前,我和同事Sunny Wong 便為希慎設計了一組多件的戶外利園區指示牌,這個經驗讓我感到建築標誌設計一點也不簡單。它們雖小,卻是人們最留意的東西,在設計上,扮演著重要的角色,它們不單要美觀,還要地基牢固,抵擋強風、日曬雨淋,經得起磨損及破壞,還要解決接電、防水、發光等問題,本身儼如一間小屋,一點也不簡單。這點Jacob非常認同,他曾建議理大開辦建築標誌設計課程,作為在產品設計的分支,讓更多人認識這門設計,並了解這個龎大的市場。


為Hysan設計的利園地區標記及指示牌

導覽設計,看似簡單,卻影響著我們每天的生活,Annie 說得好,她想要是設計能為人每天省下一分鐘,那加起來便會是一件功德無量的貢獻。