視覺法則 – 格式塔理論的四個基礎

gestalt這篇要來討論一下格式塔理論(Gestalt theory),也就是格式塔心理學,或稱「完形心理學」。只要學過平面設計理論的人,應該多多少少都聽過格式塔的相關理論,但真正要應用在設計上,其實也不容易,或許是其實已經用上了,只是沒有去仔細探究而已,因為它是一個人類視覺自然感知的過程與結果。

格式塔是德文Gestalt的譯音,意即「模式、形狀、形式」等,意思是指「動態的整體(dynamic wholes)」 –by wiki

格式塔理論的發展,始於1910年時,心理學家 Max Wertheimer 無意間看到鐵路上的閃爍的燈光如下圖一(這部份的考證,網路上的資料不是很完整,有錯誤請指正),他觀察到,當燈光快速切換的時候,會產生視錯覺(optical illusion),這邊的視錯覺指的是「似動現象(phi phenomenon)」(參考影片),也就是燈光在快速的切換狀態下,當速度快到介於30~60毫秒之間,會產生動態的移動的錯覺(如下圖二),於是Max Wertheimer 與同儕開始進行相關的視覺研究,花了近十年的時間發展出的一套視覺認知理論,也就是現在的格式塔(完形)心理學。

railroad-crossing-lights-night

圖一 鐵路平交道的警示燈

light

圖二 似動現象

其實格式塔理論要討論的東西非常的深,它可以說是現代認知心理學的基礎,唯一貫徹的概念就是「整體大於個體的總合」,但我們只需要從視覺來討論跟理解就好,因為格式塔所衍申出來的視覺原則,跟平面設計還有介面設計習習相關。

“The whole is other than the sum of the parts.”
— Kurt Koffka

在格式塔心理學的構成,有四個基礎:整體性(Emergence)、具體化(Reification) 、組織性(Multistability) 、恆長性(Invariance),這四個基礎是人類視覺的特性,也就是說,它是我們視覺的一種慣性,是天生或演化而來的,了解這四個基礎,就能解釋大部份的視覺情境了。先說明這四個基礎,下一篇再來討論幾個常用的原則。

  1. 整體性(Emergence)
    當我們要去分辨一個物體時,我們的眼睛試圖去找出輪廓,然後去比較對過去腦中的記憶,快速的分辨出物體,這就人類視覺的整體性。下面這張圖是一張很常被用來解釋整體性的圖片,在圖片中你會看到很多黑點,而且能透過輪廓,辨視出一隻像是大麥町犬的物體,所以我們的視覺是整體的,而不是從一條腿、一顆頭的方式將所看到的物體給組合起來。
    Emergence
    運用在介面設計上,也就是之前我們討論的指意、預設用途,我們能從物體的外觀或是輪廓知道他的用途,有時候並不需太多的細節。像是下圖的ghost button就是一個很好的例子。
    ghostbutton
  2. 具體化(Reification)
    當我們的視覺感受到刺激,同時也會對外部環境的空間訊息產生解讀,我們的腦袋會試圖把這些缺口給補起來,並創造出一個訊息去理解觀察到的物體。下圖中的 A,許多人看到會看到白色的三角型,但其實這個三角型並不存在,而是我們的腦袋自己將失去的訊息給填補起來。
    Reification用於介面設計,最常用的就是格點系統(grid system)如下圖,也是透過格點系統的建立,來劃分區塊,我們未必要使用線條來進行資訊版塊的切割,只需要透過適當的留白,一樣可以讓閱讀者辨視出這些區塊的不同。
    gridsystem
  3. 組織性(Multistability)
    如果一個物體有兩種以上的解釋,我們的腦袋在同一個時間點,只能給予一種解讀的方式 ,當然我們的視覺允許我們在不同的解讀上游移,但我們卻無法同時看到兩種以上的解讀方式。例如下圖,圖片中是一個妙齡女子?還是一個年邁的老婦人? 或許都能看的出來,但她就是無法同時出現。
    運用介面設計上,那就是要思考,你希望你的使用者在你的畫面中看到什麼樣的訊息? 想傳達的資訊要盡量精確,避免模陵兩可的圖片或文字,因為你永遠無法知道,使用者看到的跟你想的是不是一樣。
    下面的圖片,是我們在開發產品所犯的錯誤,這是一個好友序號分享活動,只要分享,每個人都能免費獲得300元面額的抵用券,立意不錯,可是我們在文字中加入「的機會」,經過使用者的測試才發現,使用者會認為這是需要經過抽獎的才能獲得的活動,因為使用者看到的是「機會」,而我們希望使用者看到的是「免費兑換」。
    chance
  4. 恆長性(Invariance)
    我們視覺的最大優勢就是恆長性,不管物體如何變形、旋轉、放大、縮小,我們都能夠透過他的輪廓或特徵來判斷這個物體。如下圖中像是搖桿的物體,任憑它如何的改變呈現的方式,我們的眼睛還是能夠從圖片中找出相同或是不同的物體,
    Invariance運用在介面設計上,最常用到的就是下圖中「請證明你不是機器人」的驗證碼(CAPTCHA)了,這也是目前人類在視覺上勝過電腦的優勢,當然這樣的優勢再過個幾年可能就會被電腦給取代了, 而且有時候也是會遇到人類無法判別的驗證碼,恆常性失效。
    captcha-2

以上就是格式塔心理學的四大基礎,這四個基礎對於從事視覺設計或是藝術相關的人都非常的重要,對於這些視覺特性能夠掌握的好,就能創造出更好的作品。

下一篇會討論格式塔使用的原則,當然有人對於基礎與使用原則會有些混淆,只要記得,四大基礎比較像是數學中的加、減、乘、除,而原則就會比較像是代數運算,所以基礎很重要,幾乎所有的視覺原理都離不開這四個基礎,應該要好好的理解才是。

附上一些參考的來源,因為有網路上對於格式塔心理學的說法解釋並不完整、一致,在這篇文章簡單的整理一下,做為一個參考跟紀錄,有錯誤也歡迎指正。

 

廣告

圖標還是文字?

前一陣子與幾位比較資深的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測試,如果能去追縱每個介面上元件的效益,會是最好的也最科學的決策方式。