介面設計Prototyping 淺入淺出

關於prototyping(原型)設計,前陣子剛好在hpx的活動中有簡單的分享自己prototyping的經驗與想法,而這幾年也越來越多新的prototyping工具,對於介面設計師來說是喜憂摻半,喜是又有新的工具可以玩,憂則是又要花時間學新的工具,而且那麼多工具到底要如何選?而且也很難保證這些工具是不是能夠一直更新下去,如果停止更新那不就白花時間了…

其實每個工具都各有優缺點,但就目前的共識是,一個理想的prototyping工具,必須是容易被整合到介面的開發流程,同時又要能用來達成有效溝通的目的;而「溝通」與「體驗」就是prototyping的本質,如果兩者都能兼具,那就是一個合適的prototyping工具了。

Prototyping工具的興起

介面設計的prototyping工具是從擬真(skeumorphism)轉扁平化(flat design)設計風格的過程中逐漸興起,加上Google的Material  Design的發展,也讓扁平化設計成為介面設計的主流,早期的prototyping工具比較沒人討論是因為製作的門檻太高,擬真的設計不好做prototype,設計師用盡洪荒之力刻完這些擬真的畫面早已無力,根本沒有時間再來做prototype,頂多就mock up讓「客戶」或「老闆」用想像力去感受一下,但這樣的溝通效果當然不會太好。

介面扁平化後,prototyping工具也越來越多,從簡單的pop、invision、marvel,到複雜的origami、framer.js、AE…等等,每種工具都各有提倡者,設計師頓時陷入「我該挑什麼工具來做prototype?」的抉擇中,但比較能確定的是,prototyping在開發產品的流程中越來越重要,因為越來越多的prototyping工具都已整合到介面設計的流程中,加速prototype的實現可能,不但可以提前體驗產品的概念模型,同時又能快速的修正體驗,提高團隊內部的溝通效率,雖然會因此加重介面設計師的工作,但是透過客製化的介面元件包(UI kit),也能讓其他人快速的組合畫面,只要有心,就連公司櫃台的接待小妹,都可以一起prototyping,就如同當天另一個講者所說的,prototyping應融入組織文化,鼓勵團隊內外的成員都要勇於試錯,找出最好的介面操作模式。

每一個Prototype就是概念模型

概念模型的說明,我在前幾篇文章中有提到,將prototype拿給用戶進行測試,其實就是要檢視設計師所呈現出來的概念模型,是否符合使用者的心理模型。唯一要注意的是,設計師往往也是產品的使用者,容易用自己的心理模型去刻化用戶的心理模型,雖然很難避免,但在幾次的用戶測試後,就能體會兩者間操作上會存在明顯的差異。因此我們需要做prototype來refine操作流程。

Prototype在工作流程的位置

設計流程

上圖是一般介面設計開發的線性工作流程,在不同開發階段的參與人員不同,產出物也不同,其實在草稿階段,就可以開始製作prototype了,只是這邊的prototype通常會是「紙原型(paper prototype)」,是用來內部溝通討論用,也就是我們常說的low-fi(low-fedelity)低保真原型,這也是一個蠻有趣的階段,因為可以在這個階段看到其他成員不同的心理模型。但切勿拿這個原型讓用戶做易用性測試,因為「不準」,一般用戶的想像力有限,在這個階段做易用性測試意義不大。

而通常我們在草稿階段完後,接續的工作就是請企劃/pm來製作框線稿,同時介面設計師也可以開始定義產品視覺,當框線稿完成後,大致的ui flow確定,開始就可以請介面設計完稿視覺稿,接下來的prototyping就是refine流程的階段。

Prototyping 工具的選擇

前面有提到,prototyping的工具,很多都已融入介面製作的流程,又以mac的sketch支援性最高,通常在介面繪製完成後,prototype大致也完成了。我比較常使用的是invision,因為它提供的套件craft,目前有提供測試版的prototyping工具 ,透過拉線的方式,就可以將介面串成一完整的操流程。
其他的推薦工具可以參考這個網頁:
http://uxtools.co/#/

其他比較複雜的prototyping工具,像是principle、framer.js、origami、AE…等等,強調的是更多細膩的動畫轉場效果,但學習成本、時間成本相對也較高,當然有些工具的程式碼可以延用(framer.js、origami),但對於講求快速迭代的產品,其實不是那麼適用。但好的UI motion的確是可以讓用戶印象深刻,但也是要有足夠的時間讓工程端能夠配合製作。

另外對岸中國的介面設計也蠻活躍的,開發出不少好用的prototype工具,有熱心的對岸網友推薦我墨刀,有興趣的朋友也可以試試這套工具:
墨刀

Prototyping 的一些技巧

製作客製化ui kit

UI kit對於介面設計師來說應該更熟悉不過,通常有製作介面設計時,某些軟體像是sketch,都會提供內建的UI kit,可以加速開發。製作一份共同的UI kit,讓團隊的其他成員也可以參與prototyping的過程,其實也是一個很好的溝通方式。像是prott這套軟體,有線上支援客製化的UI kit,在溝通上會有很大的幫助。

製作灰諧稿的Prototype

如何從prototype去觀察用戶是否「理解」產品,建議用灰階稿取代彩色稿,比較不容易會有顏色的干擾效果(stroop effect/史楚普效應),通常每個介面上都會有所謂的CTA(call to action;行動召喚 ),顏色會比較明顯,所以用戶容易發現,但如果排除顏色,用戶是否還會知道自己要去點選什麼區塊?我們來看看幾個測試:

連連看:找出相同顏色的文字

由上圖的測試可以知道,對於視覺正常的人來說,上色後的文字(B)可以加速判斷。再來看下圖:

2016年8月25日 12-16-03
任務:找出含有abcde文字的區塊,並將他連線起來。

上圖可以知道,視覺正常的人在區塊有上色的條件下(B),判斷的時間不用一秒,但重點是,第四欄上色的區塊是adcbe不是abcde,是故意上錯色的,這是要反應大多的用戶在操作介面時是沒耐心的,通常會無意識下被介面引導,這是介面設計師需要謹慎思考的事情。

介面設計是引導,而不是選擇

因此,如果要測試用戶是否正確理解產品,排除顏色來增加用戶思考並理解產品的時間,可能會比較準確 。

不同的路徑相同的結局

在prototyping時其實可以製作多點擊區讓使用者測試。但在時間的限制下,有時候我們只會測試一種路徑一種結局,也就是一個prototype只能測一種流程,其實有點可惜,或許一個prototype至少有3~4種行為路徑,但可以導向一個行為結果,會比較符合用戶真實的操作體驗。

轉場動畫的意義

大多的prototyping 工具,都會提供一些預設的轉場動畫,但要注意的是每一個動畫都有意義,像是移動或淡出淡入的方向,其實都有跟操作的流程有關係,這要特別注意一下。

motion
返回(back)跟關閉(x)的轉場動畫應該要不同。

結論

製作prototype其實就是要早一步驗證產的概念模型有沒有問題,而在現有的軟體支援下,要製作高保真的prototype不是難事。所以早一點將prototype的步驟、流程規劃好,對往後的產品迭代時,肯定會有很大的幫助。

另外如果有個好的想法,但卻不想太早進到開發,其實製作高保真(hi-fi; high fidelity)的prototype也是很好的方法,與其花時間開發不確定用戶是否會使用的功能,不如花多一點製作多一點高保真的prototype來溝通討論,早一步驗證產品的可行性,再進行開發,比較不會浪費時間與人力成本,因此prototype在往後的設計流程裡,會越來越重要,有遠見的公司應該要多hier幾個介面設計師才是。

Daily UI 邁向更好的設計師之路

好一段時間沒寫文章,累積了不少的心得,但前陣子花了好多時間做Daily UI的挑戰,所以就先來一篇Daily UI的心得。

Daily UI的挑戰,開始於一位設計師Paul Flavius Nechita,這位老兄在dribbble上,每天都貼一個介面的作品(不分平、假日),在瘋狂的洗板下,我很難不注意到這位瘋狂的設計師。我不確定他是不是第一做這樣挑戰的人,但他確實成功的完成了它的挑戰,最重要的是,他的每一個作品都能夠維持一定的水準。

dailyui
Paul Flavius Nechita 的作品網站

在他完成100的天的挑戰了,也激勵了不少的設計師做相同的挑戰。但做這樣的挑戰,一開始最為頭痛的就是「題目」,要自己去想題目其實不是一件容易的事情。所以有人做了一個網站:dailyui.co,解決了題目的問題,只要訂閱這個網站,它每天都會在固定的時間寄一封email給參與挑戰的人,信裡面就會提供當天要畫的題目。

dailyui.co
dailyui.co

看到這個網站,燃起我挑戰的意志,所以訂閱了這個網站,同時為了讓更多設計師也參與(推坑),於是我在fb上開了一個社群Daily ui challenge@taiwan,邀請了一些設計師一起完成這樣的挑戰。但最後能撐過一百天的設計師不多,事實上我的一百天挑戰,也只完成了約八十個作品。

這個挑戰真的很不容易,根據我自己的觀察,除了在社群外的人,全世界參與的設計師,能夠撐到五十天的人己經不容易了,http://collectui.com/designs,這個網站收集了大多數有參與DailyUI設計師的作品,可以看到愈後面的天數作品的數量也愈少,因為它真的是一個非常考驗毅力的挑戰,想想每天除了上班外,下班還要花時間做挑戰,每個作品花費的時間大概也要二、三個小時以上,我自己在挑戰的過程中,也犧牲了大多數的假日來追趕進度。

接下來講講的我的心得:

我的作品

上面這個連結是我的作品網站。完成這個挑戰的同時,我也做了一個網站讓參與的設計師也都可以有自己的作品網站。所以有興趣的設計師,可以把這個(github)網站下載回去,換上自己的作品,就可以擁有一個完整的作品網站了。

  1. 創作的步驟
    一開始在創作時,有些主題很明確,所以可以很快的完成創作,例如:sign up、login、404page、credit card,這些頁面對於介面設計師而言再熟悉不過,所以內容很確定,創作起來就很快;但是到了後面的挑戰,會出現一些比較不熟悉的題目,例如:car interface、dashboard、blog post ,如果用相同的方式去創作,直接上機畫,邊畫邊想內容,就會拉長創作的時間,日復一日,時間越拉越長,自然就會想要放棄。所以一開始要先確定題目的內容、結構,再上機畫,可以省比較多力氣跟時間。

    相片 2016-3-20 17 55 47
    先確定內容、結構,再上機畫

     

  2. 保留一些UI的特性
    DailyUI畫的還是使用者介面,雖然沒有限制在特定的裝置上,但介面最重要的除了內容的呈現外,另一個重點就是行動召喚(call to action,CTA)的保留,所以按鈕是按鈕,選單是選單,不管是要擬真的風格還是扁平的風格,還是要有一定的辨識度,否則就會變成平面設計了,當然有些題目會比較偏像平面的創作,像是logo、background pattern,就不在此限了。

  3. 善用線上資源
    介面組成的元素很多,畫一個介面如果還要去創作組合的元素,是非常花時間的,善用線上的資源,像是圖片、icon,這些都可以透過現有的線上資源取得,不需要重新創作,可以節省非常多的時間。另外挑戰時會遇到一些需要有商品呈現的頁面,例如:shopping cart、single prouduct… 等等,也可以找一些高質感的產品,也可以讓作品看起來更加專業。

    visual hunt 免費圖庫
    material deisign icon  免費icon

  4. 不要糾結於原創
    平面設計大師Paul Rand有說:「Don’t try to be original, just try to be good!」,這不僅用在平面設計,介面設計也是,有時候並不是要創作出一個原創的作品,才算是完成一個作品,況且Dailyui是每天的挑戰,不太可能一直去思考做出原創的作品,這也是一開始在創作時會面臨到的糾結,總是希望做出不一樣的作品,但越是這樣想,隨著時間的壓力,就越難創造出作品,所以創作或許是一種持續觀察和改良,以做出一個好的設計而不是一個原創的設計為目標。

    day39
    day39-Testimonials

     

  5. 觀察觀察再觀察
    Dailyui的挑戰,最重要的就是訓練自己的觀察能力,因為過程中需要大量搜集靈感,不斷的觀察別人的作品,慢慢的會發現一些細節,像是陰影的顏色、範圍,字體、字距,排版方式,圓角大小,照片的挑選…等等,當你發覺看到的細節越多,代表觀察力也逐漸在提昇。

    day43
    day43-menu 陰影的顏色不全然是黑色或是灰色,會依環境的顏色有所差異,所以挑對陰影的顏色,立體感會更好。

     

  6. 進步的感覺
    當你不斷的在累積作品,即便創作的當下你覺得作品猶如神作,回過頭再看看之前的作品,也會發現很多缺點,此時你會對當時創作的判斷充滿懷疑,這種感覺就是進步,代表對於作品的細節、美感都有提昇。像我自己在看之前的作品,就會覺得越看越不滿意,想要再重做,有這種感覺大概就是進步了。

以上是我挑戰的一些心得,但只是心得是不夠的,一百天的挑戰也是個認識自己的機會,為了完成挑戰,我這一百天總是盯著電腦,不斷的在behance還有dribbble上看著國外一些高手的作品,心中難免感到焦慮,也會覺得自己在這領域的努力還是不夠,還是有可以改進的地方,透過比較來重新認識自己的作品,因此我自己也發覺一些需要再突破地方:

  1. 作品的一致性不夠
    一致性的風格,是設計師所追求的一個目標,能從作品就可以看出是那位設計師的作品,但這樣的能力並非一朝一夕,需要透過不斷的創作來找出自己的風格。我自己在創作的過程中,風格比較多樣,因為大量的參考了其他設計師的作品,因此還未能收斂出屬於自己的一個設計風格,這也是我需要再加強的。同樣在挑戰的設計師中,也有比較資深的平面設計師,從作品中就可以看出風格的一致性,而通常這樣資深的設計師,在決定創作前,事前可能就擬定好設計風格與方向了。

  2. 插畫能力不夠
    插畫是介面設計導入情感最有效的方式之一,它可以降低使用者的焦慮感,而且可以形塑出更明確的設計風格,因此我認為就算是介面設計師,會一些插畫能提高產品的完整度,同時也有助於個人風格的形塑,所以插畫不能逃避。

  3. 太過單調、無趣
    在看過許多的設計師的作品中,總是有會別出心裁的設計或動效,可能是受限於只做靜態的介面,因此無法更有效的提供一些有趣的轉場回饋,但也可以透過思考介面操作的可能性來創造一些有趣的感覺,這也是我的作品中比較缺乏的。

最後,我認為作為一個介面設計師,除了平常多補充一些介面設計相關的知識外,持續的創作也是一個很重要的事情,一個偉大的NBA籃球員,也是每天練球,不斷的重覆練習、調整動作,才能成就偉大。同樣的想要成為好的設計師,自我的要求還有練習絕對是不能缺少,DailyUI就一個很好的練習方式。

有些朋友會線上問我擔心自己還不夠熟悉介面,怕畫的不好看怎麼辦? 想要成為介面設計師(不管是什麼設計師),其實這些都是過程,100天過後,如果你有用心畫,一定會有所進步,100天後不是結束,或許也是另一個挑戰的開始, 不斷的練習能力就會不斷的提昇。

但如果真的沒把握做DailyUI,推薦大家一個學畫介面的平台:學ui,是對岸的網站,資源很豐富,跟著進度學習,很快就會有收穫。

除了DailyUI,我又看到了一個挑戰http://www.365cons.com/ ,連續365天畫icon ,難度比較低但時間也拉的比較長,這剛好補足我插畫能力不夠的缺點。我想應該會找個開始的時間吧,到時有興趣的設計師也歡迎一起接受挑戰吧!

視覺法則 – 格式塔原則

這篇延續上篇格式塔的理論,整理了一些常用的原則,如同上一篇最後面提到的,格式塔的四個基礎,就好比數學的加、減、乘、除,而它的原則就好比代數運算。所以只要能夠掌握基礎,或許也可以拼湊出一個設計原則。

格式塔的原則可以套用在不同的領域,例如:平面、介面、插畫、攝影、廣告、空間…等等,小到介面設計,大到建築設計,只要與視覺相關,就用的到。以格式塔作為基礎所發展出來的原則很多,但因身為介面設計師,所以下面就以介面設計常用的格式塔原則來進行討論。

這篇文章引用了設計師 Carolann Bonner 所提供的六個常用原則,加上二個我認為比較重要的原則:

  1. Similarity 相似
  2. Proximity 相近
  3. Continuation 連續
  4. Closure 封閉
  5. Enclosure 圍繞
  6. Figure-Ground 主體-背景
  7. Common Fate 共同命運
  8. Symmetry 對稱

這八個原則幾乎包含了介面設計常用的原則還有技巧,了解原則可以幫助理解「為什麼」要使用這樣的設計樣式(Design Pattern),請記得格式塔理論的核心在於「整體大於個體的加總」,所以這些原則是來判斷整體視覺的感知結果,而每個原則背後,都隱含著格式塔理論的四個基礎,看完這些原則後可以思考一下,跟四個基礎之間的關聯性。

1. Similarity 相似

個別相似的物體會被視為整體的一部份。相似特徵的物體,不論是它的形狀、顏色、大小、排列方式…等等,只要相似,我們的視覺就會認為是一個整體。

example_Similarity

上圖中可以看出外觀特徵相似的個體(不同顏色),可以分別視為一個整體,即使打亂順序(B),白球還是會被大腦歸為一個整體。

應用在介面設計:

components_lists_keylines_single9

在上圖中,可以看出左邊一排圓形的圖片,可以視為一個整體,每一張圓形圖片都代表一個聯絡人,所以在這個介面上,就可知道這些資訊的整體性。而右下方的圓形元件,是Floating Action Button,則是利用了下面會提到的「主體-背景」原則,與內容做分割來避免混洧。

2. Proximity 相近

當個別的物體距離相近,我們的視覺會將他視為一個整體。

example_Proximity

上圖A中,個體之間左右間距較小,圖B則是上下間距較小,構成了圖A是每一橫排為一個整體,圖B則是每一直排為一個整體的視覺效果。

應用在介面設計:
components_cards33

透過物體與物體間距的控制,可以知道資訊排列越是接近,他們的關係就越是強烈,可以視為一個整體,如果距離較遠,就可以視為與其他個別的整體。很常應用在排版之間關係的操作。

3. Continuation 連續

連續的個別物體,形成的視覺動線,會視為一個整體。就算被中斷,我們的大腦仍然會判定為一個整體,因為我們的視覺容易感知連續的形式,而非離散的片段。

example_Continuation

上圖中,我們的視覺會告訴我們有兩個重疊的圓圈,而這些圓圈是由連續的小圓形所構成,我們的視覺不會因為它交錯,而判斷成三種不同的圖形。就像1跟2之間交集的3,視覺上他是不存在的,除非你去突顯它。

應用在介面設計:

continu

上圖紅框的部份,會看到數個灰色的點點,在介面設計上我們稱它為「Slider Dot Navigation」,通常是用來做侷部畫面的導覽切換,這就是連續性的應用,在些灰點在連續排列的情況下,我們會將視為一個整體,而非單純的灰、黃點,它會透過動態(自動換圖)的方式來提醒使用者,畫面是可以進行切換的。

4. Closure 封閉

當我們的視覺感知到物體是不完整的,但我們大腦仍會將不完整的資訊填滿,並將視為一個整體。

example_Closure

上圖看起來像是圓形2蓋在圓形1上面,但事實上,圓形1不是一個完整的圓型,可能也不是一個圓形,但我們的大腦會自動把圖1,填補成一個完整的圓型,這個原則充份解釋了整體大於個體加總的核心概念。

運用在介面設計:

components_cards_content1

上圖中畫面的下方,我們知道可以繼續瀏覽,但為什麼會知道畫面可以延續?因為封閉的原則,我們知道下面的卡片只有顯示到一半,但人類的眼睛會自然填補失去的資訊,意識到下方還有沒看完的資訊,所以繼續下滑直到資訊結束。

5. Enclosure 圍繞

將個別的物體透過任何方式(線條、色塊)將它們圍繞在一起,被圍繞的群組,可以視為一個整體。這個原則是設計師  Carolann Bonner 在的文章中所提到的一個原則,我找了一些網路上的資料,比較少提到這個原則,但實際上還蠻常用在介面設計上。
example_Enclosure

上圖A左上方區塊被線框圍繞,可以視為一個整體,圖B則是左上方區塊以灰色作底,也可以視為一個整體。

應用在介面設計:

components_dividers_usage2

上圖可以看到畫面中有明顯的分隔線,透過分隔線,可以知道內容所屬的範圍。而卡片(card)的樣式,也是透過卡片來圍繞資訊,也是圍繞原則的應用方式。

6. Figure-Ground 主體-背景

在整體的視覺條件下,某個物體相較於其他物體來的明顯,我們會大腦會將它判定為主體,而將他以外的物體視為背景。

example_Figure-Ground

上圖右上角的藍綠色圓形,明顯突出於其他灰色的圓形,因此它為主體,而灰色的圓形則為背景。

應用在介面設計:

components_dialogs_content1

對話框(Dialog),很常應用在在介面或網頁設計上,因為要突顯這塊的資訊,所以在背景蓋上一層半透明的黑色,此時使用者就會意識到這個對話框是主體,而其他區域則是背景。

7. Common Fate 共同命運

在整體的視覺條件下,某些個別物體,或是同時、同速、同方向往一個地方移動,這些個別物體會被視為整體。這個原則常用在動畫效果的呈現上。

example_Common Fate

上圖有很多的藍綠色圓形,其中有幾個同時往左上方偏移,因為共同的命運,將其視為一個整體。

應用在介面設計:

components-buttons-fab-transition_speeddial_02

上圖是Material Design 中,還蠻常使用的漂浮按鈕(Floating Action Button),如果一個按鈕裡面有多種功選或選擇,就會以像是上面圖片的方式呈現,幾乎在同一個時間點出現不同選擇,我們的大腦就會意識到,這些功能是一個整體。

8. Symmetry 對稱

為了更簡單的去理解整體,我們的視覺,會趨向將對稱的物體,視為一個整體。

example_Symmetry

上圖中,依序出現的是左大括號、右大括號、左中括號、右中括號、左大括號、右大括號,還是一組大括號、中括號、大括號? 大多人應該是後者,因為對稱性,會將互相對稱的個體視為整體。

應用在介面設計:

Symmetry

對稱的原則無所不在,只是因為使用的太過於頻繁,反而會忽略掉它的存在,上圖我將卡片樣式的畫面做了一些調整,把左右對稱拿掉,讓右邊存在的空隙小於左邊,在這樣的畫面下,因為畫面不對稱,會感覺右邊內容還沒有結束,所以可以知道,很多時候我們運用了畫面的對稱性來包住內容,引導視覺開始與結束的位置。就像是網頁設計,通常會有header,也會有footer,包含在中間的就是body,才能構成一個完整的網頁(瀑布式部局的網站除外)。

 

結論

上述八個原則,是介面設計常用原則,但如同前面所討論的,格式塔原則是視覺認知整體的方式,應用的範圍不侷限在介面設計,尤其是平面設計更是經常在使用這些原則。了解原則之後,我們可以依照這些原則去發展出一些新的介面設計元素。等到對這些原則能夠清楚的掌握且迎刃有餘,就可以開始「打破」這些原則,來創造更有張力的視覺效果。從不理性中找出理性是設計,再從理性中找出不理性,那就是藝術了!

如果想了解更多格式塔的原則,下面提供一些參考的文章:

場論與格式塔 – 陳坤成
完形心理學的視覺法則 – fourdesire
Gestalt psychology -wiki
Gestalt_principles – scholarpedia
Using Gestalt Principles for Natural Interactions – Carolann Bonner

 

 

圖標還是文字?

前一陣子與幾位比較資深的ux專家討論我們家的產品,提到一個我常常在思考的問題,那就是在介面設計功能的配置上,到底圖標、文字怎麼選擇呢? 所以這篇來討論一下怎麼選擇這件事。

從視覺設計的角度來看,圖標(icon)會被認為比較美觀,也容易被記憶,所以大多的設計師能用圖標就盡量不使用文字,但是圖標有時候很難辨視它的用途,這篇The Problem with Icon有提到,圖標如果意義不明確的話,使用者很難理解這些圖標的作用為何。

在《親愛的界面》這本書79頁中有提到 Colin Ware的著作《Information Visualization》,這本書有討論相同的問題,作者認為「易於識別」的圖標能夠刺激人腦大腦中的長期記憶語義網路中的相關概念,也就是說圖像比文字容易記住,但請注意是「易於識別」的圖像。 但我想這樣的結論並不意外。只是什麼時候該用圖標什麼時候該用文字,什麼時候又該並用,才是設計師在意的。

此外,在hpx中有一篇文章有討論關於圖標與文字之間選擇的研究整理:使用者經驗之迷思13:icon可以增強易用性。裡面也有圖標與文字之間決擇,一個比較折衷的作法,就是在icon上面加上文字,但這樣就算提高了易用性,但總覺得有點囉嗦,而且並不是每個位置都可以同時塞的進圖標還有文字…所以該怎麼選擇圖標或文字呢?

下面我整理了圖標、文字使用的優缺點:

基本上圖標或文字都各有優缺點,如何使用端看設計師當下的需求,但是想討論的事是:如果需求也不確定時怎麼選擇圖標或文字呢? 成熟的產品可以透迭代設計還有A/B測試來調整並選擇樣式,但如果是一個全新功能的產品那要根據什麼來進行設計呢?

有時候可能是一種設計風格,但這邊我要帶入Norman提到的設計方法:預設用途(affordance)、指意(signifier)來做討論(可以這考我寫的這篇文章)。指意算是比較後來所提出的概念,但在Norman提出指意的說法前,預設用途的分類其實也可以非常的細,而指意是預設用途的其中一種形式,可以參考這篇文章對於預設用途的分類,但我還是以Norman的說法來做討論。

前面的文章說過預設用途是強調的是「關係」,物體提供的功能與使用者的需求,兩者能滿足,預設的用途就會存在;指意是傳達行為指示的方法(聲音、文字、符號…等),這跟圖標還有文字有什麼關係?

其實圖標與文字放置的選擇,可以用這個區塊能否讓使用者有預先想到的互動關係來決定。想只放圖標不放文字,那可能tab bar 會是一個不錯的位置,有使用智慧型手機習慣的使用者,應該會知道這個區塊是用來做頁面切換或使用一些功能(打卡、po文…等),所以能預想到可能的互動關係,或許只放圖標是一個不錯的選擇。

但只放圖標不一定好,大多的tab bar圖標都會帶有文字,因為圖標不易理解,但在預設用途存在的條件下,我個人認為不影響使用,例如behance、google+ (下圖)tab bar 上面的圖標都沒有提供文字,那要怎麼知道這位置的圖標提供什麼功能呢?一般來說,使用者會「主動」找他們需要的功能,這些功能不是偶然,背後都是經過設計思考後產生的需求,是常用、必要的,所以我們可以先假設使用者有主動學習的能力,經過學習後就會操作。

behancgoogle

上圖左是behance的介面,下方有很多圖標,但能從圖標知道這是幹嘛的嗎?右邊則是google+的介面,下方的圖標看起來都是一些「功能」,但我們可以聯想到這些功能是做什麼嗎? 我想就算不知道,但至少會知道它可以點,點了就知道能做什麼了。

而在上方navigation bar 左右兩側都會有tools,通常我們會塞進一些狀態或是工具(搜尋、漢堡選單、通知…等等),所以我們可以注意到這兩個app的右上角都有兩個圖標,從圖標上我們能知道它可能是個狀態或工具,同時這些圖標都是可以點選的,在這樣的預設用途下,使用圖標或許也是一個不錯的方式。

接下來看一下內容的部份,

tumblrfancy

上圖左是tumblr的app,右則是fancy的app,他們的內容是以卡片樣式組成,每張卡片下方都有一些「指意」,如果只從文字、圖標,是否能發現它的互動方式,根據我個人的經驗,tumblr的方式,使用者會比較難意識到下方的圖標或文字是可以點擊的,但tumblr用了一個比較特別的技巧「回饋」,點擊後的動畫,會讓人印象深刻,所以使用者操作過一次後,容易記得這樣的功能。而fancy用了另一個比較聰明的方式,就是把文字或圖片都加個外框,讓他看起來像按鈕(可以點擊的預設用途),就能知道這是可以點擊的。

facebook

上圖則是facebook的app,所有的圖標都會加上文字的說明,這是一個比較保險的作法,但也跟facebook的使用者散佈的範很廣的特性有關,必須要很清楚的去說明每個icon的用途。

那什麼時候可以使用純文字,通常會是一個比較單純的行為引導,因為文字是很直接的指意,他可能重覆出現在介面的任何位置,常用的文字整理如下:

  • 操作引導:編輯、確定、取消、新增、關閉、設定、看更多、儲存、選取、完成、刪除、移動、…
  • 流程引導:上一步、下一步、首頁、取消、註冊、登入、登出、頁面狀態(麵包屑路徑)

以上這些都是比較常見的操作文字,有些可以用圖標替代,像是新增可以用+,取消可用x,但如果要讓使用者更為直覺,文字的效果可能會比較好,但是請記得可以點擊的文字要用其他的顏色,跟內文使用的文字有所區別。

如果文字讓使用者很難發現可以點擊怎麼辦? 目前比較好的解決方法,就是ghost button,在文字的外圍加上一個有圓角的外框,讓他有按鈕的預設用途,那可以加強只有文字指意的不足了。

ghost

上圖是iphone的app store,在每個app 的後方都會有ghost button ,使用者就可以知道這是可以點擊的。

結論

基本上什麼時候使用圖標或文字,可以取決放置元件的區塊是否有提供操作的「預設用途」,但這樣的方式是對於經常性使用介面的人才有效果,對第一次接觸介面的人,可能還是沒辦法意識到操作的方式,所以圖標加上文字是最為明確的。

所以有時候在做介面時,若目標市場不夠明確,也沒做事前對市場的使用者做一些分析,那開發的產品就要符合「全部人」的需求…那要考慮的是「通用」設計,就不會是單純的介面設計,但通常老闆都會採用「通用」設計,因為老闆的目標市場,通常就是全部啊(呵呵)。

此外,當一個介面元件經常性的被使用,也會從指意漸漸的轉向一種預設用途。

affordance

上圖是wordpress的編輯元件,如果你經常的使用word或其他相關的文書編輯軟體,就算沒有文字的指意,仍然可以判斷出大致上的用途。

cursor-01

上圖兩個箭頭,一般人能分出差異嗎? 但設計師能,問問身邊的設計師,這兩個箭頭差在那邊吧~

以上的這些討論,並不是一定的解決方式,只是希望能夠透過一些比較有根據性的說法來進行討論,這樣才能確保每一個選擇都是有經過思考的,當然最好的方式還是迭代設計還有進行A/B測試,如果能去追縱每個介面上元件的效益,會是最好的也最科學的決策方式。

設計的心理學 – 對應性、回饋、使用局限

繼上一篇介紹了預設用途與指意,這篇主要要來談一下另外三個設計原則:對應性、回饋、使用局限,最後一篇再來討論概念模型。

預設用途與指意的應用方式,其實就是在於與操作者之間關係的互動與指引,在本書在第三章,有提到關於人類大腦的記憶結構與行為模式;總而言之,結論就是「大腦有時並不是那麼靠譜」,因此需要其他的設計原則來進行輔助,降低大腦的記憶與行為操作的負擔。
而除了預設用途與指意外,對應性、回饋、使用局限也是常用的設計方法。

對應性

對應性(mapping):盡可能透過空間布局和時間上的配合,安排控制器和行動之間的相對關係。─p.103.

對應性是從數學來的名詞,是指的是兩個集合元素間的關係。集合就是「一堆東西」,構成集合的就是元素,而找出元素之間的關係,就是對應的關係。雖然書上針對對應性有做一些說明,但我將對應性分成兩種概念:靜態對應、動態對應。這樣比較好理解。

  • 靜態對應
    就是空間配置上的對應,在生活中很常看見,像書上有提到瓦斯爐的配置方式,就是靜態對應的一種應用。
    下圖左邊是兩口式的瓦斯爐,一般使用者很容易就可以找到爐頭與按鈕的對應關係(左對左、右對右);而右圖則是三口的瓦斯爐,因為左邊有兩個爐頭,比較難確認對應的關係,因此可能要透過指意或其他方式來說明對應方式。
    mapping1
  • 動態對應
    就是兩個元素必須透過操作的動作,才能知道怎麼對應。例如車子的方向盤,車子行進中,方向盤往右邊轉,車子就會往右彎,向左轉,就會往左彎,是動態對應常見應用。而在app的介面上,資訊更新的方式,是由上而下,通常手勢往下滑可以獲取比較新的資訊,上滑則是比較舊的資訊,也是常見的動態對應方式。

不管是靜態或是動態對應,對應性的目的在於操作者能夠容易理解或透過操作理解對應關係,來降低記憶負擔,而好的對應,當然就愈是自然愈好,所以書中有提到「自然對應」:

自然對應是指控制的方式和被控制的對象之間有顯而易見的關係-p.149.

但對於「自然」這定義,其實也會受到許多文化或是習慣的侷限,像是不同國家文字的閱讀方向就會不同、汽車的左駕或右駕、飲食習慣、社交禮儀…等等。因此自然對應會隨著文化而改變-p.152.,這是設計師在設計思考時必須考慮到的,否則可能會做出讓人匪夷所思的產品。

回饋

回饋(Feedback):對操作的結果和當前的狀態,提供完整和連續的訊息。-p.103.

回饋的概念,書中有提到,是傳達一個動作的結果,是控制理論(Control theory)和資訊理論(Information theory)中眾所皆知的概念-p.50.,其實我覺得更像心理學的「操作制約(Operant conditioning)」理論,操作者主動的行為,得到一個行為後的結果,就是回饋。在操作制約最有名的實驗就是斯金納箱(Skinner Box)。

skinner box

上圖就是斯金納箱的實驗,透過裝置,小老鼠主動按壓壓杆得到食物(回饋),而認知並學習這樣的操作模式,回饋在整個實驗中,是很關鍵的一個因素。

回饋的方式有那些?其實回饋與指意有關係,回饋是透過指意來完成,指意是在行為前,回饋是在行為後,因此透過指意的方式(視覺、聽覺、觸覺),都能讓操作者知道他的行為有沒有結果。

而回饋用在設計上,原則就是要立即、清楚,且不能甘擾到使用者的操作,此外,使用者在操作前得知的訊息(知道怎麼做),稱之為「前饋(feedforward)」,也很重要,因為有些資訊可以前饋,那就前饋,回饋應該要出現在使用者是不容易發現錯誤的位置。

taxsys

上圖是台灣的報稅系統,在使用憑證時,會要求輸入pin碼,如果使用者不是經常使用(報稅一年一次),可能會不記得pin碼是什麼,於是我輸入了第一次「0000」,後來出來的視窗是「預設pin碼是6~8碼」,我當下的想法是:

youshouldtoldme

更可怕的是,pin只能輸入三次,三次都不正確就會鎖卡,在這個畫面中完全沒有告知,所以當三次錯誤發生,會立即的得到一個非常清楚的回饋:「你被鎖卡了,請到就近的服務站進行解鎖」,這就是一個讓人傷心生氣的回饋。

使用局限

使用局限(Constraints):提供物理、邏輯、語義和文化性的限制來引導行動,減少多餘的選擇。-p.103.

使用局限在本書花了一個章節去說明,但在這邊我簡單的帶過就好,有興趣可以去看一下書的內容。使用局限的目的,在於確保使用者操作正確,避免不必要的錯誤發生,因此減少多餘的選擇,來降低操作者操作上的負擔。

使用局限的應用,最為直覺得就是「Poka-yake」(防呆裝置),這項技術是在生產過程中,透過一些固定零件的限制設備的操作,使它不致出錯。這樣的的技術也廣泛的應用在我們的生活中,像是一些線材的接頭,usb、hdmi、記憶卡…等等,是屬於物理性的局限。

提到物理性的局限在書中p.175 有提到強制性機能的應用,是屬於物理性局限的形式,其實在介面設計時,還蠻常見到的,強制性機能有三種方式:互鎖、鎖入和對外封鎖。

  • 互鎖(interlocks)
    互鎖就是確定操作必需遵循正確的順序。—p.176.
    互鎖的應用在實體上很常見,像是微波爐運作時,突然打開就會自動關閉電源,或是手排汽車,在切換檔次時必須腳踏離合器,都是常見的互鎖應用;而在介面上,我要大力推薦一個網站:
    uxpin-ebooks (電子書是免費的!)
    這個網站有提供很多很棒的跟介面設計相關的電子書,是很好的資源。但電子書不能直接下載,必需要輸入mail後,發送下載連結至你的信箱,再從信箱的連結點擊下載,這就是一個很棒的互鎖設計。
    interlcok上圖就是要下載電子書時的畫面。(這個資源很棒!)
    延申思考:為什麼用互鎖的方式讓使用者下載電子書?而不直接提供連結呢?
  • 鎖入(lock-ins)
    鎖入就是防止一個人離開某個區域。—p.177.
    「鎖入」這個名字從中文看不好懂,可以記成「鎖在(lock)裡面(in)」,好記多了。在介面設計上是很常見到的方式,想像編輯一些文書軟體時,在還沒存檔的情況下,點擊關閉的話,會出現提示窗詢問是否要存檔再再關閉,就是鎖入應用。
    lockin
    上圖就是photoshop未存檔關閉時出現的鎖入對話框。
  • 對外封鎖(lock-outs)
    對外封鎖是防止有人進入危險的空間,阻止意外事件的發生。—p.178
    一樣從字面翻譯「鎖在(lock)外面(outs)」,比較好記,就是禁止訪問某些區域,在介面設計在也很常見,記得在winxp轉到win7時,微軟把「權限管理」功能加進去,有一段時間很難以適應這樣的操作方式,因為在安裝軟體時,如果沒有透過「系統管理者權限」進行安裝,大多的軟體都會安裝失敗,這就是對外封鎖,透過權限管理禁止一些不安全的行為。
    lockout上圖是mac在進行一些安全性更改的對外封鎖視窗,要在mac要安裝不屬於app store的應用程式,就得經過這道程序,要透過管理者授權允許從其他來源安裝此應用程式,這就是對外封鎖的應用方式。

以上是我的心得整理,更多的使用局限可以去翻翻書,我在這邊只提一些我覺得比較重要的觀念,下一篇會來討論一下概念模型!!
有任何疑問或想討論,都歡迎交流唷!!