訂閱本網誌: Facebook, Google+, 電子報, RSS

為什麼你的 Art 做不出好 UI?

April 20th, 2011 by Jamie

最近常常在和創業團隊們討論 UI (User Interface/使用者介面),我發現很多人對於這個東西的誤解很深。想到要做 UI,大家的直覺往往就是先參考「國內外知名網站」 — 這很好,你不應該重新發明輪子,更不能重蹈覆轍。可惜許多人的「參考」,就是去偷人家的設計,卻沒有好好去檢視別人為什麼這麼做,哪些是該學的,哪些是你可以做得更好的。 我最喜歡舉的例子就是這兩個網站:

同樣是財經雜誌、幾乎一樣的排版方式,甚至連選用的色調都沒有差別。很明顯的,當初一定是其中一個人先做好,然後另一個人就說,既然他們都這樣做了,一定是深思熟慮的結果,我們就直接拿來抄吧!天啊!你沒有發現這樣的 UI 根本就是使用者的夢魘嗎?請問我一進到這樣一個網站,到底應該要把眼光放在哪裡?是左邊不停跳轉的圖片、中間的「最新出刊」、還是下面的「頭條要聞」?請問「最新出刊」跟「頭條要聞」,又有什麼不同呢?這根本不叫 UI,頂多叫做小學生的美術「著色板」,你把整個畫面塗得滿滿的,可是對使用者來說卻一點功能性也沒有。

最反差的例子,就是本文一開始附上的圖片。那是從 Dropbox 首頁擷取下來的,人家有幾百個功能,累積了 2,500 萬用戶,首頁卻還是嚴守著簡單的原則,非常清楚的讓每個進來的使用者知道,你該點哪裡,這,才配叫 UI。

「可是 Dropbox 是工具軟體,前面兩個是雜誌,不能蘋果比橘子。」你說。

好,我就知道你會這麼說,沒關係,我們再舉一個例子:

Huffington Post 是北美最成功的網路媒體,綜合性的新聞網站,每天有上千則報導、評論,這是人家的首頁。看到了嗎?清楚明白,這,才配叫 UI。

為什麼事情會變成這樣,我常常說是把「排版」和「使用者介面」搞混了的結果。以前雜誌的篇幅有限,所以要把版面填滿,免得浪費紙張。問題是當我們進入了網路時代,這個限制早就消失了,可惜很多的 “Art”,卻還是停留在舊時代的框架當中。

但我一直懷疑還有很多更深層、我沒想到的理由,剛好昨天讀到一篇文章「Why Johnny can’t build a decent user interface.」,給了我很多靈感,所以,以下就是加入了我的經驗,幫大家整理的列表:

為什麼你的 “Art” 做不出好 UI?

  1. 自我感覺良好 — 「身為一個藝術工作者,我認為這個版面就是應該要這樣設計,這樣才有品味、這樣才叫美。我們在這裡還用上了最酷的 HTML5 動畫效果,你看,是不是超炫的?」天啊,先生,你不是在做一件要拿去展覽的藝術品好嗎?
  2. 太聰明 — 「拜託,這明明就很方便,你看,所有你可能會需要用到的功能通通在一個畫面上就可以找到,是不是很方便?什麼?User 不會用?怎麼可能?世界上怎麼會有這麼笨的人類?」– 真的,這世界上 99.9999% 的人,就算有你的智商,也跟你的產品不熟,麻煩你還是將就他們一下吧!
  3. 沒能力 — 說真的,要設計一個「藝術與科技的結晶」,美觀大方又好用的 UI,非。常。非。常。難。所以 1 和 2 的背後,往往就是其實這個人也沒有正確的觀念和知識,
  4. 不重視 — 1~3 還是可以改善的,最慘的莫過於你的組織文化中根本沒有對 UI 優化的重視,從頭到得都沒有去注意消費者是如何使用你的產品,也沒把不斷的改善視為永恆的任務。
  5. 忘了從使用者出發 — 再難用的 UI,當你用了 1,000 次,也變得很好用。往往在我們瘋狂的測試產品的同時,也養成了良好的使用習慣。等到產品推出去了,你也把這樣的 UI 視為理所當然,忘記了大多的使用者其實是比你少用 999 次的。

最後我再說一次,網路業是一個講求轉換率最大化的行業,能夠把最多流量轉換成客戶的人,就是最後的贏家。所以當你在設計 UI 時,第一個必須要考慮 Conversion,然後才是美觀和舒適。能夠全部做到當然最好,如果不能的話,請把轉換放在第一位。至於你的 Art,既然每個都那麼崇拜 Apple,那就請他們好好從研究人家的 UI 設計準則開始吧!

PS. 四月份 appWorks Startup Mixer 來了,本周五 (4/22) 6:30 在 BCDog Cafe,趕快去報名吧

  • Diggy

    這種版面的規畫你真的認為會落在設計身上嗎 你太譙的起台灣設計環境了 要罵人前先搞清楚

  • Kuso

    但你舉的例子都是一般公司

  • 1,000個讚

  • 訪客

    做的好都是老闆英明 做不好就是美工的錯

  • 0728reeves

    帶頭的決策者普遍自大又自認為很行,自以為美感最好,如果能夠放手讓設計團隊執行包辦,想必會更好…這是多年的設計工作經驗

  • 7-AGE

    講求轉換率最大化的行業,能夠把最多流量轉換成客戶的人,就是最後的贏家!!

  • Ya

    我覺得這篇滿好的啊!
    很忠肯!

  • Stan

    很多時候中間路線就是沒特色路線或變成四不像~各方妥協之後就成了中間路線,雖然這是最方便的處理方式,業務和行銷往往會以橋梁的的角色出發,各方取得平衡,卻很少看到站在尊重原創設計概念的立場上,表達、爭取客戶認同。

    賈伯斯如果走中間路線,現在就沒APPLE了吧

  • Stan

    如果不喜歡這個頻道就滾蛋~何苦來氣自己勒?自虐嗎???????????

  • 嗯嗯~我同意~!很多市場上的設計決定~真的很多是取決於是誰付錢的~誰付錢就是誰說話~不是設計公司可以決定的~設計公司只能給建議,最後決定大權都是取決於客戶~~辛酸!

  • Po

    台灣的設計早就悄悄分成兩派了。一派是設計要賣得出去才有價值,另一派是設計的價值是決定賣不賣得出去的關鍵。很明顯的我是後者的支持者。很多設計師都會說台灣客戶的素質很差,不懂的設計的價值,這點我倒覺得不以為然。設計本身就是一個必須可以自行達到溝通的物件,而不是靠設計師口頭去背書解釋其價值和功能。設計本身就是一種說服的行為一點也沒錯,但是不是人去說服,而是自己設計出來的成品自己去說服,要做到這點,自然過程就必須經過相當繁雜的科學方法以及市場分析研究去作出基礎,再以自身的經歷感受加入美感的層次,這才是設計。現在很多在台灣自稱設計師的人其實都是藝術家,藝術是不需要科學方法市場分析就可以做到的東西,太多設計師都太小看設計這一個行業,亦或是說只是很喜歡“設計師”這個頭銜而衝動在設計界出道。不管在台灣或在哪裡,即使我在倫敦當SOHO時期,客戶質疑挑戰你的設計,那就代表,你的設計其實就是不堪一擊,沒什麼好說的,因為作品沒辦法說服人,說再多的話去包裝也越顯得鬆動不穩,身為網頁設計師的我,一直以來都是很質疑所謂的“設計師自圓其說論”,不只是台灣大部分抱持著出錢的人是老大的想法,全世界都是這樣,如果只拿這種理由來當藉口那就太狡猾了。到底是“專業”有說服力還是“錢”有說服力其實很容易就看的出來,一個設計,沒有經過發想階段,沒有經過研究階段,沒有經過市場分析,沒有經過統整後的萃取,沒有為求精準的態度去設計,這種心態以及過程產出的設計,絕對是鬆垮不穩,這種一推就倒的設計理念,如何要使人瞭解到設計的價值,問題直接就是出在所謂設計師自己身上。在這種很容易被淘汰的行業裡,台灣設計師大部分採取的是削價競爭手段,而不是自我提升設計能力,如此一來,不只沒能力的設計師垮台也就算了,連真正有能力的設計師也被拖下水,養成許多客戶居然拿那些套版,兩三天隨便模仿做出來的設計和價錢來挑戰從零開始,花費四五個月分析原創做出來的設計和價錢,這要台灣設計界情何以堪,台灣的設計師都大談台灣設計環境很差,自己卻又不加強自己的設計能力和智慧,讓自己的作品自動為自己說服客戶,只會怨天尤人,只會削價競爭破壞行情,自己死也要拉一個墊背的,這到底是不是專業,是不是職業道德大家到今天都還看不懂。設計的人很容易拿出一堆大的理念概念去涵蓋許多不能偷懶的細節設計工作,而事實上,許多設計師是非常懶惰去做一些一定要做的細節設計,搞得台灣的設計十年如一日,每一家公司的作品看起來都是同一個人做出來的,而還有臉說這是全創,其實一查國際網站就知道是抄襲哪一家公司的,騙台灣客戶不懂。如此欺騙台灣人,還敢說台灣客戶沒有素質,我認為這其實是本末倒置,台灣客戶會如今這麼不解設計,也都是台灣所有設計師自己創造培養出來的市場水準,當然,說全是設計師的錯也未必然,不過台灣的設計環境會變成如此的差勁,台灣目前在社會出道的設計師必定要負起絕對大多數的責任,尤其是那些大學視傳相關科系畢業就出道接案的朋友們,設計不是天馬行空,也不是自由發揮,不要天真的以為設計師只要大學視傳系畢業就可以了。設計是一個行業,一個力求精準(super precise)的行業,一個要求適合美感(appropriate beauty)的行業,一個創造溝通平台(communication platform)的行業,一個需要科學方法(scientific method)的行業,如果你認為設計只是一個可以讓你被稱為設計師,只是一個能讓你自由發揮的行業,只是一個大家都要認可你不能挑戰你的行業,請你轉行,設計不是一個只會讀書就會的行業,設計不是一個只會用Photoshop和illustrator就可以作的行業,設計不是一個我說的就算的行業,設計不是你想象中那麼簡單的行業,如果你很小看這個行業,請你就帶著剩餘的天真去尋找你真正的未來,因為你不懂設計業真正是在做什麼。

  • Po

    自己不求長進的設計師,不管碰到好公司濫公司,都一樣死樣子。一個專業被一個自稱設計師的人搞得不倫不類,連自己做的設計也不知道好不好,那還需要這種設計幹嘛?

  • Po

    Designer無辜又無奈??會不會是自己其實也不知道自己的設計到底好不好吧?!我看到相當數量的設計師都是這樣子的,如果因為這樣而出現爛設計,Designer自己其實就是爛設計最主要的推手。

  • 鳥飛機

    蠻贊同亭瑩的說法,雖然我不敢說一定有修改會比較好,但我個人經驗的確是在產品功能性與視覺上有適當的編修與校正會讓設計者與客戶端學習到不少知識,也促進設計師的溝通能力與客戶對於專業領域的認知。
    ( 對於台灣的職場環境可能就要從整體教育與文化做起了…是長遠並堅硬的工作~ )

  • 鳥飛機

    因為Eric2008的提起,我剛去看了各語言YAHOO首頁,發現….還是跟以前一樣內!
    奇怪了…不知道是YAHOO內部策略關係嗎?為什麼台灣、香港、日本,是比較雷同的是設計,而其他語言版本的YAHOO首頁則是雷同的另一款設計,中國的設計有一點點不同(但是開啟速度太慢..先忽略 :p)

    值得注意的是”YAHOO紐澳首頁”,截然不同的版本:YAHOO!7 http://au.yahoo.com/
    是由澳洲第二大雜誌集團Seven West Media與Yahoo合資後組成的公司,企業識別體加了個7以外,首頁與內頁也與YAHOO現有版本不同,先不論好壞,但這樣的變化與新意果然有增加想點閱的興趣 (或許時間久了又變得疲乏)。

  • 鳥飛機

    原來我在回覆兩年前的文章…..呵呵呵呵呵~

  • 鳥飛機

    關於站長的這個網頁有個小問題,為何我用ctrl+F的搜尋關鍵字功能,可以搜尋的到我所key in的關鍵字,但畫面卻不會跳到關鍵字所在處呢?

  • 可以請問一下您用的瀏覽器嗎?

  • 天下、商周、遠見,好像沒有打算改的意思耶

    還是在用「很多頁」才能閱完全文的方法換點擊 囧

  • Well, 他們願打,使用者願挨,我們也沒什麼好說的

  • 我只好以只看第一頁回應了 囧

  • mrsole

    夢靨錯字,應為夢魘

  • UI

    Art的腳一跨可以做UI,
    但UI或爬了幾座山還不一定能做Art.
    觀看了作者的幾篇文章後感想,作者筆下極缺”客觀性”,
    有幾篇明顯都對Art有意見..

    *孩子這輩子不會畫沒關係,下輩子把拔讓你學畫畫.

  • 手殘,感謝指正

  • 請問如何定義客觀性呢?

  • jude

    好爛的一篇文章,還浪費我的時間來看…..

  • 你還浪費了更多時間留言,真是辛苦了

  • chen

    關於商業週刊與天下網站設計比較huffingtonpost的UI相比,我不太認同Jamie的說法
    這幾個網站多看幾頁其實是一樣的,huffingtonpost我不認更好也不認為更差,我反覺得天下首頁具有分類摘要,較能符合我需要快速瀏覽所有新聞的需求,不是UI本身的問題,而是前述網站與huffingtonpost雖都是呈現新聞但呈現的對像與目標並不相同,如果再看看Time網站,網站的UI就沒有太大的差異,我認同Jamie對UI的看法,但我不認為這裡的例子恰當。

  • 謝謝你的指教。我想 UI 是相當主觀的東西,每個人都會有自己的解讀與理想。很高興聽到你的意見,也歡迎你未來多多留言和我們討論。

  • 可以不填信箱嗎?

    UI設計準則的連結失效囉

  • James

    突破盲點…

  • James

    如果不喜歡被批評,何苦公開出來讓大家評論? 進了廚房還怕熱?

  • James

    J大是不會錯的,妳居然還敢挑戰他的Wordpress? 妳就是那個20,他就是80,懂?

  • 資深創意人

    批評的太沒深度了, 設計的產出過程通常不是art一個人的決定, 這種文章只會把箭頭指向一個人,不太公道!

  • 鳥飛機

    Google Chrome, but it’s okay now…XD

©2016 MR JAMIE ─ 創業者需要的啟發,每日新鮮供應.
網站由 Allen Hsu 設計 | Logo 動畫由 Wen Chen 完成