最後更新日期:2003/ 08/ 09  
Download IE 5

 

Website Redesign ?


  Re有重新來過的意思,Redesign顧名思義就是「重新設計」。對設計師來說,重新設計是件麻煩事,通常這是老闆龜毛、客戶腦袋壞掉時,才會去做的蠢工作;但是就一個真正夠力的網站設計師而言,Redesign是必經的歷程,只有懂得重新設計、精益求精,才會有上等網站設計出現。接下來,我們就來談談Redesign,談談這個讓設計人喪膽的設計方式。

幹麻重新設計?

  要是接到客戶電話說要重新設計,那幾乎是一件狗屁倒灶的事情,電話一掛,大概整群製作團隊就會開始創意激盪,以接力賽的方式問候客戶的雙親。其實大可不必這樣子,所謂的「重新設計」是很專業的,是由設計團隊主動提出的,而且所費不貲的。好的重新設計才是網站活化的開始,藉由重新設計,可以在現有的基礎上,更了解使用者需求,提供更棒的服務,並且修正現有的問題。

  舉幾個例子來說,幾乎每一個成功網站,都經歷過改版與重新設計的歷練。Amazon.com歷經多次改版,以及從不間斷的設計修正,為的是提供使用者更好的操作經驗;Babycenter.com在委託設計公司重新設計網站過後,從原本普普通通的小網站,一躍成為簡易好用、資訊豐富的懷孕媽媽發燒站,而且線上購物交易量大增;Diverseworks.org這個知名藝術中心,也藉由網站改版,強化了藝術中心的整體視覺風格,並且大幅改進了導覽介面,讓各展覽的資訊流通更加快速。

  這些網站的成功都不是偶然的,好的網站設計,絕對不會讓錯誤發生第二次。網站使用者精明的很,他們遇到挫折,大多只是摸摸鼻子就掉頭離去,不會向網站經營者咆嘯;但是要他們再回到同樣的網站,經歷同樣惱人的使用挫折,那大概是完全不可能。積極的經營者會去努力了解使用者的想法或是意見,想辦法把好的概念落實在設計中。消極甚至不在意的經營者,就會以自以為是的想法,做一個自以為是的網站,反正不用拉倒阿?網站經營就像是服務業,如果你不能忍受理髮師擅自幫你剪一個龐克頭,那就不要忽視網站使用者的聲音。

  所以,開宗明義的再說一遍,重新設計是正面的,是值得投資而且睿智的選擇。沒有軟體在第一個版本推出後,就不需要持續修正,也沒有任何一台暢銷車種,沒有歷經各種大小改款。重新設計是對自己的設計負責,不是否定過去,而是在現有基礎上,追求更好。

 

重做之前,先搞清楚狀況

  重新設計的第一步,不是立刻著手重做一個網站,而是要分析現況與需求,搞清楚狀況。

  通常有重新設計網站的需求時,大多都是愈到麻煩或問題了;可能是系統功能的問題、可能是網站動線的問題、也有可能是互動方式的問題。總之,問題出現了,而我們的工作便是,積極地把狀況釐清,把麻煩的問題一一揪出來。

第一步,先充分蒐集客戶意見。

  所謂「客戶」,付錢者也;俗話說出錢的是老大,做之前當然要聽聽老大的意見。這些意見大致可以分為:對現有網站的觀感、重新設計的原因、各種可能的功能需求、對於新網站的期待、網站技術限制、內容需求、以及行銷考量等項目。蒐集客戶意見是相當需要技巧的,在滿滿都是人的會議室當中,必須迅速分辨誰是主事者,誰是窗口,誰是執行人員;了解對方的心態與職權,自然就能以較佳的角度,切入核心,在對的人身上,獲得準確而且豐富的資訊。根據以前的經驗,部分資訊可能沒辦法在大型會議上充分表達,所以別偷懶,勤跑幾趟拜訪行程吧。事實上,跟第一線的執行人員保持好關係,通常只有好處沒有壞處,他們無意間所透露出的意見跟抱怨,往往是很多問題的關鍵點。

第二步,了解真正使用者的需求與反應。

  網站使用者通常不等於客戶,使用者真正的需求也往往跟客戶的想法,彼此差距十萬八千里。舉個例子來說,客戶總希望打響自己的品牌,讓使用者對公司更了解,甚至期望連總經理的名字都可以倒背如流;使用者可不這麼想,他們需要的是產品的快速搜尋、功能比較,甚至是軟體更新提示服務。至於那些公司組織架構、未來願景,那可不是使用者在十萬火急,急需產品資料或服務時,所想要看到的。這些使用者資訊大致可以分成:使用族群定位、個別使用者描述、網站瀏覽行為分析、潛在需求與期望等。蒐集這些資訊的方式很多,使用族群可以從客戶名單與會員資料著手,其餘的則需要利用情境模擬,或是乾脆抽樣幾位實際使用者做一段簡單訪談。其中,以做使用者測試的做法最為實際,透過使用者親身測試,詳細觀察並紀錄其操作流程與反應,可以獲得許多豐富的資料。使用者會藉由既有的認知來瀏覽網站,也因此,實際觀察到的資料可能與預期差距頗大,甚至完全超乎想像,像是跳過某些主要動線,或是在一張圖形上拼命點選等。想到這裡一定很煩吧?網站設計又不是做市場調查,何必這樣大費周章?別忘了,我們是來挖掘問題的,實際去觀察使用者行為,並且耐心地傾聽他們的想法,問題就會一一浮現在你面前。


第三步,對相關網站進行案例分析(case study)。

  案例分析是常見的資訊獲得方法,一般在網站設計之初,都會利用同性質網站的分析比較,找出可能的差異點,並儘可能強化本身網站的優勢。在重新設計時,這個老技倆還是挺好用的,尤其是在了解客戶跟使用者的需求之後,再去做案例分析會更加精準,對於競爭對手的優劣勢也會更加了然於胸。


第四步,將問題排序歸類,訂立專案目標。

  蒐集了這麼多資料,相信也藉此累積了相當多亟待解決的大小問題,現在這一步則是要將問題分類,並且依嚴重程度排序。一般網站製作常遇到的問題有,美感風格、功能操作、內容適切性、行銷評估、社群經營、維護管理等,將問題分門別類,將有助於找到對的人來搞定這些問題。分類之外,根據問題的嚴重程度,把處理的優先順序區分為1-5級,由最急切需要改進的問題開始著手,效率與改善成效才會好。

  如同前面所說的,重新設計絕對不是悶著頭做,而是有系統地挖掘問題,分析問題,並且改善現況的過程。重新設計有一大段工作都是分析、分析、再分析,這歷程就像醫生開刀一樣,檢查花三天時間,實際開刀卻只要三小時;對症下藥,自然能夠藥到病除,這簡單的道理,在網頁設計上也一體適用。

 

花拳繡腿,讓摳門客戶也知道重新設計的好處

  剛剛說了這麼多,似乎一點也看不來重新設計的好處在哪?是的,光是動張嘴巴誰都會,要能真正搞出點東西才是真功夫。下面以實際網站為基礎,舉幾個重新設計的範例,讓客戶也知道重新設計的魅力在哪。

案例一:中時新聞網:版面配置問題

網站
中時電子報 首頁
缺點
版面配置擁擠,訊息雜亂,閱讀不易。

處方1:簡化資訊

 •移除繁複的新聞跑馬燈
 •移除上方礙眼的頻道選單
 •移除左側過長的分類選單

處方2:減少視覺負擔
 •減少標題顏色數,小標一率採用灰色字
 •降低部分圖形彩度,增加閱讀舒適性

  中時電子報算是老字號新聞網站,改版多次,但是目前的版面配置仍有著部份問題。排版過於擁擠,而且功能列與跑馬燈佔據了大部分重要版面,沒有明顯的視覺焦點,大大地失去了新聞網站的本質:清楚的頭條、簡約的分類新聞、明確的新聞重要性排序等。在簡化資訊,並且減少視覺負擔之後,新聞焦點會較為明確,主標、副標、次標謹然有序,對使用者來說將會更易於閱讀,對於大小新聞事件的理解程度也會更加深刻。

 

案例二:中華職棒賽程表:視覺隱喻問題

網站
中華職棒 賽程表
缺點
資訊略嫌擁擠,文字表格塞入過多資訊

處方1:分層標示

 •依已賽、今日、跟未來賽程,分別標註顏色
 •已完成賽程,以深灰色系標示完整資訊
 •今日賽程,以網站主色,藍色系標示

 •未來賽程尚無比賽結果,以淺灰色標示

處方2:加強重點
 •已完成賽程之勝負,以橙色底區別
 •當日賽程加框,並以紅色字樣突顯重要性
 •其他輔助性資料,一律以灰色系呈現

  賽程表是每個球迷必看的內容,內含的資訊相當繁雜,實際能夠減少的資料量相當有限。在無法任意刪改資料的狀況下,較佳的改善方法,也只有盡量有效運用隱喻,減輕瀏覽者的視覺負擔。尚未進行的賽程,大多是未知的訊息,因此用淺灰色系標示,以符合未來的浮動與不確定感。今日賽程為表格中的重點,因此搭配主色系的藍色,並以突出的紅色標頭註記,讓使用者可以快速找到當日賽程資料。此外,勝負資料是表格中最重要的部分,把單場勝隊名稱以橙色標示,有助於使用者辨視閱讀。上面的這些改變,大多是為了將內容有效分類、以不同的呈現方式,減少使用者認知上的負擔。

 

案例三:雅虎奇摩新聞:分類架構問題

網站
雅虎奇摩新聞
缺點
分類架構有些雜亂,類目關係不直覺,部分資訊重複出現

處方1:移除重複資訊

 •整合日期欄位,每則新聞標上時間即可
 •焦點報導等字樣,重複出現,應加以整合

處方2:加強類目邏輯
 •重新組織該區類目,簡化架構
 •所在類目加上圖示與底色,方便使用者辨識
 •類目由左至右排列,增加視覺層次的邏輯性

  說實在的,想要修改雅虎奇摩的版型,絕對需要勇氣跟耐心;分類架構的問題不難發現,但是要改得有效可行,就得花上不少精力。新聞區最大的問題是,部分資訊重複出現,而且分類架構有些雜亂。首先將重複的日期資訊整合,各新聞標題後面只標上時間就好,整體的資訊量就減掉不少了,視覺上也更加清爽。左側類目不清的問題,則必須將分類邏輯重整一遍,並且利用小圖示、底色、編排層次,將分類邏輯加以視覺化呈現,使用者才能夠更直覺地操作整個網站介面。重整過後的介面清爽許多,也更加容易使用,儘管是像雅虎奇摩這一類簡約的介面設計,一樣有很多細節可以推敲、有效加以改善。

 

反覆的重新設計

  這次刻意以日常生活中常見的網站,舉了三個例子,無非是要告訴大家,重新設計並不難,可以吹毛求疵、持續改進的網站也不在少數,重新設計絕對可行,而且勢在必行。

  舉完例子,再度回到重新設計的概念上。前面說過,成功的網站設計,都不是偶然為之的;那些網站之所以成功,在於幕後的設計師完全掌握了重新設計的奧義 - 反覆的重新設計 ( iterative redesign )。重新設計是沒有次數限制的,更準確的來說,應該是要無限次的一直改下去。隨著時間演進、使用族群擴張、內容更替等,網站面貌隨時都在改變,使用者對於網站的需求也在改變,各式各樣的問題與障礙,也會跟著產生;重新設計只是早晚的問題,與其等待使用者抱怨,不如積極改版,先一步滿足使用者需求。

  重新設計是有方法,有步驟,且可以有效評估效益的。在這篇文章中,大概只能介紹重新設計的概念,以及初步分析方法;至於實行細則的各項細節,由於過於繁雜,則無法在短文中一一解釋。有興趣的朋友,不妨參考Web Redesign: Workflow That Works一書,裡面有更加詳細的敘述。

 

再說一次,重新設計不是否定過去的設計

  重新設計最大的門檻是:設計師的自尊心。比起客戶的固執、專案目標的不明確等因素,其實最困難的部分,還是該如何說服自己,畢竟每一個網站都是設計師的心血結晶。為此,特地再說一次,重新設計並不是否定過去的設計;相反的,重新設計是積極的、令人刮目相看的,站在既有基礎上,準備精益求精的。回頭看看那三個範例,你會發現重新設計並不難,在現有網站上動些手腳,就可以有更好的視覺呈現與互動感受,何樂而不為呢?

 

延伸閱讀:Website Redesign相關案例網站

 1. adaptive path - epinions
 2.
Limitless Innovations - SilverPlatter
 3. Omega Technical Services - SkinChoice.com
 4. Papa G Studios Graphic Design - UCLA Undergraduate Admissions
 5. ORARIAN - eHealthInsurance

 

 

小P撰於2003.8.9