大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(下)

大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(下)

現今隨處可見的UI 設計隱藏在生活各個角落~你有發現哪種設計最受歡迎嗎?相同的概念在哆啦A夢裡也能發現喔~(下)

本篇為下篇,上篇請點大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(上)

不只是「好看」 圓角設計的背後深意

近年 3C 產品硬體設計上都大量使用圓角,UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」,圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等,需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後,到底是什麼原因?

人們為何會熱愛圓角的科學根據尚未定論,大致有以下三種說法:

1. 認知負荷論(cognitive load theory)

認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出,他假設人類的認知結構由工作記憶和長時記憶組成。其中工作記憶也可稱為短時記憶,容量十分有限,一次只能記下 5~9 條簡單的訊息。

著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」是最快速的,而處理多稜角的形狀則較吃力,速度也較慢。

結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦更願意接納圓潤的圓角矩型。

2. 視覺動線論

視覺動線是指在讀取眼前資訊時,視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。

人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。

而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,而不會感到突兀與刺眼。

3. 曲線偏坦論(Contour Bias)

以演化心理學的觀點來看,人在面臨可能造成危害的事物時,會湧現出恐懼、不安與抗拒的情緒,這是人類經歷長時間的演化後遺傳下來的「適應體」,目的是幫助我們存活,提高生存機會。

除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。

所以,人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。

圓角不是萬靈丹 善用不濫用才是好的 UI

我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。

在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。

UI師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養。

更多UI,UX或程式設計相關文章請點閱下方連結

其他閱讀

改變 UI 竟能增進友情、UX 讓麵包烤更香?Netflix 紀錄片揭露設計師巧思

2021年最好用的12UI/UX設計工具,網頁設計都該試試看

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

以色列就是靠這款人工智慧裝置大大提升戰鬥力?!()

只要動動嘴~寫程式最枯燥乏味的地方由人工智慧幫你完成!()

UI,UX設計師非收不可的年度12個超狂網頁設計工具!!(1)

大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(上)

大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(上)

 

現今隨處可見的UI 設計隱藏在生活各個角落~你有發現哪種設計最受歡迎嗎?相同的概念在哆啦A夢裡也能發現喔~(上)

「圓角矩形」是近年盡人皆知的 UI 設計優勢,自 iPhone 4 發售至今日,到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。

然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢?箇中緣由,其實也藏在哆啦 A 夢身上!

「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示,任何圖形設計元素如形狀、線條、顏色、紋理和圖案,都能淺移默化地影響人們的感官認知,從而讓平面圖形附上不同的喻意。

乍聽之下有點形而上學,但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色,也都被賦予了「幾何暗示」!

三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示

陪伴許多人長大的國民作品《哆啦 A 夢》(ドラえもん),其中的主要角色個個形象鮮明、深入人心,是運用幾何圖形設計角色的好範例:

自戀愛現、在狡猾的同時又常有鬼點子的小夫,從是身形、嘴形到髮型都呈現三角形;而個性粗暴、蠻不講理,但在緊要關頭時又展現了正直的胖虎,無論臉型與身體都呈現寬大的方型。

至於個性善良溫柔、富有同情心的靜香,臉型與整題造型都較圓潤,沒有稜角;至於最備受喜愛的哆啦 A 夢,整個角色從頭到手都是圓型設計。

不只日本,歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底,藉此創造出引人入勝、個性鮮明的角色,足見一個好的幾何設計所具有的優勢。

以下影片為藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象:

卡通之外 賈伯斯也瘋狂的圓角設計

不只卡通動漫畫之外,許多商業產品也為了讓客戶留下良好的第一印象,採用親民的圓角設計。

話說從頭,要談圓角矩型,就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為:所有物件都有圓角,而且相較於圓形與橢圓形,圓角矩形設計在生活中其實更為常見。

如以下影片所示,2020 年發售的 iPhone SE 依然保留標誌性的圓角設計:

1981 年,Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁:「圓角的矩形很難用電腦技術畫出來,而且又不必要!」

Steve Jobs 二話不說便把 Bill 從座位上拉起來,指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街,指出大街小巷每個小角落的圓角矩形給他看:「你看,到處都有圓角矩形!」

最後,在一個「禁止停車」的圓角矩形路標牌被指出來後,Bill 認輸了。「好啦,我放棄。我回去看看是不是真的跟我想像的一樣困難。」

隔天下午,Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡,這個幾何圖形已經成為其 UI 介面傳承的一部分。

本篇為上篇,下篇請點大家常見的UI設計竟然跟討喜的哆啦A夢有關係?!(下)

更多UI,UX或程式設計相關文章請點閱下方連結

其他閱讀

改變 UI 竟能增進友情、UX 讓麵包烤更香?Netflix 紀錄片揭露設計師巧思

2021年最好用的12UI/UX設計工具,網頁設計都該試試看

介面、體驗大不同!UI設計/UX設計工作內容完整剖析

疫情加速電商衝擊店面!富比士:20215UI/UX設計趨勢

以色列就是靠這款人工智慧裝置大大提升戰鬥力?!()

只要動動嘴~寫程式最枯燥乏味的地方由人工智慧幫你完成!()

UI,UX設計師非收不可的年度12個超狂網頁設計工具!!(1)

UX,UI設計大解析:怎麼讓UX,UI相輔相成?

UX,UI設計大解析:怎麼讓UX,UI相輔相成?
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!系列最後一篇~怎麼讓UX,UI相輔相成?一定要知道~

本篇為【UX,UI設計大解析】系列的第 5 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

結語:如何讓 UI/UX 相得益彰?

即使 UI 設計UX 設計是截然不同的專業、各自涉及迥異的技能,但它們都是彼此不可或缺的存在。

即使有精雕細琢的介面設計,也無法掩飾笨拙又難用的操作流程;而枯燥乏味的視覺設計也會無法吸引使用者、從而埋沒了出色的使用體驗。

UI 設計師確立使用者介面的外觀,而 UX 設計師安排使用者介面的運作。在 UX 設計師在鑽研如何用有限的篇幅、提供使用者最多又不會過多的資訊時,UI 設計師正在努力讓這些繁雜的訊息精美地呈現在螢幕上。這是一個非常需要合作的過程,也有賴雙方緊密且良好的溝通。

以行動號召按鈕(Call to Action,CTA)為例,看 UX 與 UI 的分工:

1.UX 設計

提出需要多增加一個按鈕、為何如此能讓使用者滿意、決定如何重新安放所有按鈕。

2.UI 設計

設計新按鈕的外觀,而其他按鈕也可能受影響而需重新調整如形狀、顏色、大小、特效等外觀。

3.UI、UX 設計師重疊的互動設計

當使用者點下按鈕後將會導向某個頁面,UI 著重在按鈕外觀的能見度與視覺導引;而 UX 則著重在導向的網頁是否能滿足使用者的期待。

如此這般,UI 設計UX 設計師需要不斷地溝通協作,才能確保彼此的設計都能完美執行、與使用者的期望完美地吻合,最終創造出優秀的使用者介面與體驗。

如果你正在規劃要朝 UI 還是 UX 領域邁進,那麼最重要的還是思考自己對哪種設計類型感興趣。如果還不熟悉設計領域,建議這兩個方面都可以嘗試一下,有了在這兩個領域的實際經驗,不僅可以更了解自己適合哪個領域,也可以使你無論最後選擇哪一個,都能成為更好的設計師!

 

 

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

UX,UI設計大解析:UX,UI都需要研究驗證?!

UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:UX,UI都需要研究驗證?!

對UX設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!這篇要來談的是UX,UI都需要研究驗證?!

本篇為【UX,UI設計大解析】系列的第 4 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

研究是關鍵!無論 UIUX 都需要研究驗證

UIUX 若想要盡善盡美,最重要的的就是要做各種事前研究!

無論是 UI 設計UX 設計師,都必須先做各種功課——盡可能收集資料、行為數據以研究使用者的需求,思考、分析和預測使用者在當下可能的行為、行為背後的動機以及隨之而來的體驗感受。

而研究所得的數據資料將應用在初版設計上,接著有的 UIUX 設計師會透過真人測試或使用者訪談,取得使用者最直接的回饋、觀察並記錄使用者使用產品的整個過程、發現需求並構思解決方案,以確定設計能朝著正確的方向前進。

即使無法進行真人測試,也會透過 A/B 測試、易用性測試(Usability test)等方式在開發時就先測試找出問題,進一步對設計進行修改或優化。

推薦閱讀:使用 A/B 測試來改善網站 UI 設計的 30 個例子

而這樣「研究分析、設計開發、測試反饋、修改優化」的流程會重複多次,這樣的開發法又被稱為疊代式開發。與傳統的瀑布式開發相比,疊代式開發能降低風險、提早得到使用者反饋,也具有更高的效率和成功率。

採用這種方法,可以在完全確定設計需求之前就開始進行開發,在一次疊代中先完成一部分設計,再通過使用者的回饋來細化,再開始新一輪的疊代。

對於 UI 和 UX 設計師來說,事前研究都至關重要,也都使用類似的方法,以求規劃出得宜的設計。

 

本系列文章未完,下一篇請點UX,UI設計大解析:怎麼讓UX,UI相輔相成?

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

 

UX,UI設計大解析:UX設計的優點有哪些?!

UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!

UX 設計和UI設計感興趣嗎?那千萬不能錯過這一系列文章!!今天要來介紹UX設計的優點有哪些~

本篇為【UX,UI設計大解析】系列的第 3 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

什麼是 UX 設計

UX 表示「使用者體驗」(User experience),顧名思義強調的是「使用者的感受」。

為了帶給人們良好的體驗,必須先進行使用者洞察、產品研究、市場趨勢研究,到建立資訊架構、規劃任務流程、繪製線框圖(Wireframe)和與 UI 設計師溝通互動設計與視覺設計間的怎麼互相調和,最後交棒給工程師。

而使用者會得到怎麼樣的體驗,取決他們如何與應用程式互動:希望體驗流暢、直觀?那導引要設計的合乎邏輯;想讓使用者覺得自己有效地完成任務、而不是在打一場戰爭?這都取決於 UX 設計師的功力。

▲ 設計思維是一種以人為本的創新方法,它汲取了設計師的靈感,將人的需求,技術的可能性以及業績成功的需求整合在一起(來源:Unsplash)

 

當然使用者介面和體驗有著相輔相成、缺一不可,因此 UX設計師會跟 UI 設計師密切合作,這也是為什麼許多人會混淆兩者。不同的是,UI 設計師的任務是確定使用者介面的外觀,而 UX 設計師負責確定使用者介面的結構、功能、操作方式和反饋體驗。

簡而言之,UX 如果設計良好、直觀又流暢,則使用者將獲得良好的體驗;反之則可能會把使用者趕跑,UX 設計師的工作就是努力避免出現第二種情況。那一個好的 UX 設計會具有哪些特色呢?

好的 UX 設計 會具有的優點:

身為 Mailchimp 使用者體驗設計總監的 Aarron Walter 在他的《為情感而設計》(Designing for Emotion)一書中,告訴讀者如何才能讓使用者愛上你的網頁、產品或應用程式。

此書中參考馬斯洛需求理論、提出「使用者需求理論」,成為 UX 設計師思考與決策的重要參考:

▲ 「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性

 

「使用者需求理論」金字塔從底層至頂層依序為:功能性、可靠性、實用性、趣味性。

從金字塔我們可以看出,產品所提供的「功能」是最基本需求;「可靠性」則是指在一定的條件、時間內穩定地達成使用者的需求;「實用性」表示使用者能順利透過產品完成他們的需求、並未來若有相同需求的時候,優先想到你的產品;最頂端的「趣味性」能滿足使用者的心理需求,作為與使用者的情感紐帶,讓使用者對產品產生好感與認同。

以上是 UI、UX 的差異分析與介紹,那它們兩者有什麼相同呢?又要如何才能相輔相成、成為完美的設計呢?

UX 設計人員也常會利用叠代式開發(iteration),即先製作其介面互動的線框稿,並以此獲得使用者的回饋,再將其整合到設計之中,獲得更好的版本。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX,UI都需要研究驗證?!

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

 

UX,UI設計大解析:UI設計的優點有哪些?!

UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UI設計的優點有哪些?!

對UX設計和UI 設計感興趣嗎?那千萬不能錯過這一系列文章!!今天要來介紹UI設計的優點有哪些~

本篇為【UX,UI設計大解析】系列的第 2 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

但隨著對 UI、UX 的認識日漸普及,目前的分工也越來越明確了,接著讓我們來看看 UI 和 UX 究竟是什麼吧。

什麼是 UI 設計

UI 表示「使用者介面」(User Interface),無論是網頁、手機 APP 或是電腦軟體,只要眼睛所見的頁面都是 UI 設計的守備範圍。

從吸引使用者點擊的按鈕、閱讀的文字、文字輸入欄、空間配置、畫面排版、轉場和任何形式的視覺元素,一同組成一個龐大的視覺佈局。

▲ 這張照片是攝影師 Lubos Volkov 為 UX Store 拍攝的,同時提供了有關「如何成為更好的設計師」的提示。在你的技能達到一定的水平之後,就要不斷地學習新事物。(來源:Unsplash、uxstore.com)

 

除此之外,UI 也是人和電腦相遇的地方──電腦具備某種功能,人想要利用這些功能,需要進行「輸入」(inputs)和「輸出」(outputs)。介面就是輸入和輸出的規劃安排,讓人們得以應用電腦來創造出他們所需結果。

以上工作由 UI 設計師負責,他們選擇配色方案、按鈕形狀、線條的寬度和文字的字體,精心打磨每一處「眉角」。而一個好的 UI 設計通常具有以下特色……

好的 UI 設計 會具有的優點:

1. 清晰

介面的所有視覺元素皆脈絡分明、一目瞭然,使用者不需要刻意思考每個元素的含意。

2. 熟悉

使用者可以依照過往習慣操作你的介面,如:點擊一次為選取、點擊兩次則為打開該項目。

3. 一致性

保持整個介面的風格一致,這樣使用者可以習慣操作模式。

4. 防呆機制

一個好的使用者介面該避免使用者不小心犯錯。

5. 事半功倍

好的介面可以讓使用者以最少的「輸入」達成所需的「輸出」,還能讓有經驗的使用者更有效率操作。

▲ 一名設計師正在繪製 wireframe。(來源:Unsplash)

 

待設計完成後,UI 設計師會寫上標註和說明,轉交給工程師進行撰寫。因需要與工程師溝通配合,UI 設計師必須跟上科技的進步,對程式語言也要一定程度的了解,避免產生和工程師溝通不良的狀況。而帶有前端工程師及設計師雙技能的人會被稱為「介面工程師」(UI Developer),可以自己設計畫面也自己寫出網頁。

UI 設計師有時也會與「平面設計師」(Graphic designer)一同被討論,他們同樣關心美學、同樣要使介面充滿魅力、引人注目並切和主題,但平面設計師不需考慮「使用者怎麼操作」的問題,平面設計基本上也不需要被操作;而 UI 設計師則要思考如何引導使用者操作並完成任務,故兩者還是大不相同的。

 

本系列文章未完,下一篇請點UX,UI設計大解析:UX設計的優點有哪些?!

更多UI設計相關文章請點閱下方連結~

 

 

 

其他閱讀

美女PM/UI設計師真實身分起底!二度就業婦女的斜槓人生

第一次上程式設計課程該選 Python 還是 Java?有什麼差別?

五部人工智慧電影告訴你:未來人類會與 AI 談戀愛⋯⋯還是被毀滅?

人工智慧貓砂盆 – 因愛貓腎病過世 工程師研發預防性貓用醫療品

30個方法教你如何用A/B測試改善網站的UI設計!!(1)

AI人工智慧命名大走鐘:甜點篇

學Python課程找好工作:品保花了一年順利轉職程式設計師!!

UX,UI設計大解析:UX,UI不再傻傻分不清!!

UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UX,UI不再傻傻分不清!!

對UX設計和UI 設計 感興趣嗎?那千萬不能錯過這一系列文章!!這片就讓你一次弄清UX,UI差別!!

本篇為【UX,UI設計大解析】系列的第 1 篇,完整連結如下:
UX,UI設計大解析:UX,UI不再傻傻分不清!!
UX,UI設計大解析:UI設計的優點有哪些?!
UX,UI設計大解析:UX設計的優點有哪些?!
UX,UI設計大解析:UX,UI都需要研究驗證?!
UX,UI設計大解析:怎麼讓UX,UI相輔相成?

UI vs. UX 設計 – 為什麼容易搞混?

UI 設計UX 設計 常常被混在一起使用、或將兩者視為同一種專業,也有不少公司開出「UI 設計師」的職缺,卻要求應徵者兩種能力兼而有之。

除了因對 UI、UX 不甚了解外,其中一個原因是 UX 包含的事情較為廣泛:從介面設計、視覺風格、程式功能和運作效能等等都是其中一環,與 UI 設計或多或少有所重疊。而且許多專業設計師對這兩種專業都有涉獵,久而久之就常見 UI、UX 並稱的狀況了。

▲ UI、UX 設計雖為不同專業,但在某些方面會有重疊。(來源:Asinthecity)

 

本系列文章未完,下一篇請點UX,UI設計大解析:UI設計的優點有哪些?!

更多UI設計相關文章請點閱下方連結~

 

 

30個方法教你如何用A/B測試改善網站的UI設計!!(4)

30個方法教你如何用A/B測試改善網站的UI設計!!(3)
30個方法教你如何用A/B測試改善網站的UI設計!!(3)

身為UI 設計師~知道如何使用A/B測試來改善網頁設計嗎?今天的文章依次交給你!!(4)

本篇為第 4 篇,第 3 篇請點此30個方法教你如何用A/B測試改善網站的UI設計!!(3)

範例24:嘗試銷售「好處」而不是功能

克里斯‧古利博(Chris Guillebeau)在《100美元創業》(The $100 Startup)一書中寫道,人們真的很在乎愛情、金錢和自由,也希望同時能減少壓力、衝突和麻煩。

人們在挑選產品時,考慮的點除了性能外,更在乎這個產品能如何帶給他們好處 -- 例如若能同時幫他省錢又省力就太好了。而這就是產品能帶給顧客的價值所在,也是他們會掏錢的關鍵。所以網頁的說明別只向顧客說明產品或服務內容,說明能為顧客帶來哪些好處吧!

範例25:謹慎設計「沒有符合的產品」的網頁

如何在網頁上呈現數據是一套學問,只是許多 UI 設計擅長表現 1000 個以上的數據,結果卻忽略了「零數據」的情況--當使用者想搜尋符合特定條件的商品未果時,跳出的「搜尋到 0 個商品」。或者另一個情況:當初使用者查看您的網頁時,在沒有任何引導的情況下操作,導致顯示 0 數據,這會有讓使用者感覺被忽略的風險。

此時,有 sense 的 UI 設計師會使用「網頁使用教學」或提示來取代冰冷的「搜尋到 0 個商品」頁面,讓使用者感受這個網頁是有人性的,營造暖心的 UX 使用者體驗!

推薦閱讀:改變 UI/UX 竟讓友情加溫、麵包烤更香!Netflix 紀錄片揭露設計師巧思

範例26:讓使用者能選擇「不參加」

傳統行銷策略上,會只有一個寫著「我想要…」的方框(check box)以供勾選,若不想參加則可以不勾選。某些粗魯的行銷手段甚至會預設設為勾選,常讓使用者一不留意就「被答應」了 。

更好的做法是將正反向的選擇各放一個方框,告訴使用者「你可以要也可以不要」,然後再替使用者默選其中一項。

因為此舉可以減緩當使用者不想參與時的牴觸感,亦可可讓使用者潛意識產生「所有人都照原樣進行,那我也這樣做吧」的想法,進而讓我們的目的更容易達到,還不會引使用者的反感。畢竟行銷道德也會影響使用者對品牌的評價。

範例27:保持一致性,避免使用者重新學習

世紀最有影響力之一的設計師唐.諾曼在《設計的心理學》中闡述,產品設計的最終目的,是為了讓產品符合使用者的預期。這個概念也是人因工程的核心概念之一,也就是「一致性」。維持「一致性」的產品易學易用、錯誤較少,可以減少心智工作的負荷,可以說是人人都期望中的產品。

而網頁的一致性同樣能幫助使用者容易學習,若破壞一致性原則,使用者就得重新學習一次。在介面上,一致性可藉由如顏色、形狀、大小、標記或語言等方式完成。

不過,當有需凸顯的內容時,依然可以使用「不一致」的元素吸引使用者注意。

範例28:善用「自動填入」以避免使用者重複操作

UX 使用者體驗與轉換率的角度來看,最糟糕的事莫過於一遍遍地詢問人們已經提供的資料。提供預設值或自動填入之前填過的資料,再讓使用者檢查正確性,都比每次要他們重新輸入來的好。

盡量減少使用者的操作流程並節省他們的時間,絕對是有益處的。

範例29:UI 設計應要保留大多數人都習慣的操作方式

同樣是基於「一致性」原理,維持常見的操作習慣也是很重要的。如果在整個 UI 介面上保持慣常的操作模式,使用者自然不會遇到太困難的阻礙。如圖例,人們已經習慣在介面右上角會有表示關閉的「X」圖示,就如呼吸般自然。

當然,新的操作模式也許可以帶來耳目一新的感覺,但在推翻傳統,必須謹慎思索改革的目的與成效。

範例30:「做了能避免⋯⋯」的行動呼籲內容比「做了能得到⋯⋯」更好

損失規避理論(Loss aversion)指出,當人們面對同樣數量的收益和損失時,會認為損失更令他們難以忍受。也就是說,人們當然喜歡獲得,但更討厭失去!

這個理論可以套用在產品設計和使用者溝通。例如若產品的目的是保護客戶現有的財富或安全等等,比起推銷客戶還未擁有的東西更能說服客戶購買。

在上圖的網站 UI 設計 A/B 測試中,左側的行動呼籲是「請這樣做,以免失去你的健康、財富或朋友」;右側的則是「請這樣做,就可以增加你的健康、財富或朋友」。左側的「恐嚇式描述」會讓人聯想到事情發生時(如失去財富等)的嚴重性,就按下「Do This」按鈕以先預防,因此比起右側的敘述更有「讓人不敢拒絕」的說服力。

 

 

更多關於UI或其他類型文章請點閱下方連結~

 

 

 

其他閱讀

特效不夠AI 來湊!迪士尼換臉技術達百萬畫素

Google Analytics「工作階段」定義與範例一次解析!

亞馬遜人工智慧出包 搞混國會議員與罪犯

人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼

為何各個UI設計師都愛用圓角矩形?真的有比較好?()

考取APCS認證非知不可的攻略秘笈就看這篇!!()

人工智慧也會騎重機飆車?!頂尖車手擔憂快失業!!

30個方法教你如何用A/B測試改善網站的UI設計!!(3)

30個方法教你如何用A/B測試改善網站的UI設計!!(3)
30個方法教你如何用A/B測試改善網站的UI設計!!(3)

身為UI 設計師~知道如何使用A/B測試來改善網頁設計嗎?今天的文章依次交給你!!(3)

本篇為第 3 篇,第 2 篇請點此30個方法教你如何用A/B測試改善網站的UI設計!!(2)

範例17:顯示出項目的即時動態

UI 設計中,常會以不同方式表現出項目的不同狀態,例如:E-mail 上可標記出未讀或已讀、帳單明細會顯示已繳清或未繳的帳目等。而向使用者顯示項目所處的狀態是提供反饋的好方法。

即時動態可以幫助消費者確認是否已經操作過了、操作是否成功、以及接下來應該進行什麼動作

範例18:把引導型按鈕的敘述改寫為「能帶給用戶哪些好處」

想像一下若是眼前的網頁上有兩個按鈕,其中一個標示「能替你省下一大筆錢!」,另一個寫著 「點這裡註冊」,肯定大部分使用者都會被前者吸引。

前者就是所謂「能帶來好處的按鈕」,能替使用者產生價值;而後者則是「任務導向的按鈕」,代表使用者耗費時間跟精力。而「能帶給使用者好處」的按鈕自然有較高的轉換率。

範例19:直接操作比多階層下拉式選單更直覺

直接處理畫面上的資訊,有時會比使用整合工具列還直覺,如多階層下拉式選單(context of button)雖然十分常見,但過多的階層可能會增加操作的步驟,所以下次設計時不妨考慮減少階層或直接操作的方法。

範例20:若當下就可以操作,就不要再多開分頁!

當我們希望使用者做有價值的動作,如:留下聯絡方式、基本資料等,最好把填寫用的欄位或表單放置本頁上。若能與頁面整合在同一層,會比讓使用者連結到別頁輸入資料來的好。

精簡流程、讓使用者花最少的時間就能了解頁面資訊,並將簡單易懂的表單放置於該頁面上。除了方便性,也可藉此讓使用者預估填寫所需的時間,會更加增加使用者填寫的意願。

範例21:以過渡形式表現操作導致的 UI 介面改動

當使用者在與 UI 介面互動時,UI 設計成能藉由隱藏、顯示、移動或調整大小等變化來回應使用者的行為,也能協助使用者理解介面的使用方式

其實在變化過程中增加一些動態變化,也能達到尊重使用者的效果:故意延遲、以過渡形式表現尺寸或位置的變化,能讓使用者有更多時間、更有餘裕地去理解網頁的變動。

但需要注意的是,動態效果的時間最好在0.5秒以下,過長就可能引起使用者的不悅——特別是想要快速完成流程的使用者。

範例22:讓先使用者漸進式參與,而不是先要求註冊

比起劈頭就要訪客馬上註冊,不如先讓訪客們有機會體驗產品,或至少讓訪客先觀看使用案例、過往客戶回饋或是介紹影片!在訪客還在建立第一印象時彰顯出產品的功效,亦可以表現出與他牌的不同。

一旦使用者看到您產品的價值、並體會到能帶來的價值,他們會更樂意接受您之後分享的其他訊息。「漸進式參與」即是一種盡可能推遲註冊過程,但依方面卻能增添使用者主動註冊動機的方法。

範例23:嘗試減少線框,不要浪費精力在分割框架

使用者的耐心與時間都有限,所以網頁如何爭分奪秒地抓住他們的注意力就十分重要。常見的設計會利用線框(border)來強調劃分不同內容,但也正是因為線條的明顯具體,反而導致使用者耗費更多專注力,因為線框區分出的區塊(box)若過多或安排不當,會讓人感覺雜亂不齊。

解決方法如:在設計之前就定義好內容與視覺之間的關係(例如色彩設計)、減少不必要的區塊、對齊不同的背景色,才能有效地減輕使用者的閱讀難度。

 

 

本篇為第 3 篇,第 4 篇請點此30個方法教你如何用A/B測試改善網站的UI設計!!(4)

更多關於UI或其他類型文章請點閱下方連結~

 

 

 

其他閱讀

特效不夠AI 來湊!迪士尼換臉技術達百萬畫素

Google Analytics「工作階段」定義與範例一次解析!

亞馬遜人工智慧出包 搞混國會議員與罪犯

人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼

為何各個UI設計師都愛用圓角矩形?真的有比較好?()

考取APCS認證非知不可的攻略秘笈就看這篇!!()

人工智慧也會騎重機飆車?!頂尖車手擔憂快失業!!

30個方法教你如何用A/B測試改善網站的UI設計!!(2)

30個方法教你如何用A/B測試改善網站的UI設計!!(2)
30個方法教你如何用A/B測試改善網站的UI設計!!(2)

身為UI 設計師~知道如何使用A/B測試來改善網頁設計嗎?今天的文章依次交給你!!(2)

本篇為第 2 篇,第 1 篇請點此30個方法教你如何用A/B測試改善網站的UI設計!!(1)

範例9:清楚描述 TA (目標客群),而不是宣稱「適合所有人」

網站是瞄準特定族群還是面向普羅大眾?即使鎖定客群的策略有風險,讓網站在短期內失去一些潛在客戶,但誠實與公開透明才是與消費者信任的基礎。

網站清楚描述產品或服務的目標族群畫面,可以讓網站吸引到相似特質的使用者,同時透露出的「排他性」會讓使用者感到自己是被重視的,並建立出親近感。

範例10:不會有人被優柔寡斷吸引,多使用肯定語氣吧!

當你收到一封語句充滿「也許、可能、說不定」的信件,以及收到一封肯定且充滿信心語句的信件,哪個寄件人會讓你覺得比較能信任?相信大部分的人都會認為答案明確的信能讓人安心吧!

優柔寡斷會降低信任感,如果網頁上常使用問句或不確定性的字詞,例如:有興趣嗎?想購買嗎?會讓消費者覺得你對產品或服務信心不足,這時候可以使用更具權威性、專業性的語句,像是如何帶給顧客良好的產品或最佳的 UX 使用者體驗。

範例11:善用色彩對比度來凸顯號召性用語

醒目的行動呼籲性(CTA,Call-to-action)可以使你的 UI 介面更加強大。有多種方式能輕鬆提高 CTA:如透過深淺色調、陰影、漸層或對比色的手法來增加畫面上的對比性,提升被使用者注意到的機會。

範例12:標示出產品的原產地

為產品添加名稱、圖片與原產地標示都展現出獨特性方法。特別是提到國家、地區或城市,因為這正如人們自我介紹來自哪裡一樣,是一個非常人性化的交流方式,也會顯得更加友善。

另外,說明原產地故事也能讓產品與產地名聲達到雙贏。

範例13:別讓使用者填太長的表單

人類天生就牴觸勞動密集的行為,這個理論同樣適用於讓顧客填寫表單,每多一個表格就增加使訪客轉身放棄的風險!並不是每個人都能飛快地打字,更別說在移動裝置上打字仍然不輕鬆。檢視是否每個表格都有必要回答,並盡可能減少表格數量。

如果必填欄位真的為數眾多,可以嘗試讓最重要的資訊先讓使用者填寫完,提交後再出現一個單獨的頁面,請使用者繼續填寫第二重要的資訊。

範例14:別隱藏頁面上的選項,大方展現吧!

下拉式選單的優點在於可以增加頁面的空間,若是要選擇可預期、已熟悉或高度重複操作的項目(如:生日、日期或地區)那使用下拉式選單是個不錯的策略。

但對於使用者來說,下拉式選單隱藏了一組他們要努力去發現的選項。這些選項若是跟產品有關,而且是交易流程中必經的,那你可以考慮不要隱藏這些選項,這樣可以提升網頁著轉換率

範例15:別讓使用者覺得已經「滑到最底了」

長型的一頁式網站是趨勢,但若是 UI 設計不良、看到一半就讓使用者誤以為「已經滑到最底了」,這可是會大幅扼殺轉換率的。

UI 設計師可以建立一種固定的視覺模式或節奏,例如圖標或是小動畫,來引導使用者「網頁還沒看完,下面還有內容」。設計時也需注意欄位之間留白區域的尺寸:過大的空隙會讓人誤以為已經沒有內容了。

範例16:保持焦點,不要用連結淹沒使用者

為了滿足使用者可能的所有需求,有的網頁會在上下左右都貼上「連結」,但其實每多安插一個的連結(例如:「按這裡以了解更多」),就會增添讓使用者分心的風險,讓他們沒辦法滑到最後、看到你的 CTA(行動呼籲)。

附上連結不是錯誤,只是數量與位置都要妥善規劃。減少多餘的連結,可增加讓使用者注意到頁尾 CTA(行動呼籲)的機會。

 

 

本篇為第 2 篇,第 3 篇請點此30個方法教你如何用A/B測試改善網站的UI設計!!(3)

更多關於UI或其他類型文章請點閱下方連結~

 

 

 

其他閱讀

特效不夠AI 來湊!迪士尼換臉技術達百萬畫素

Google Analytics「工作階段」定義與範例一次解析!

亞馬遜人工智慧出包 搞混國會議員與罪犯

人工智慧再突破!史上最強解馬賽克技術 64倍解析度還原成無碼

為何各個UI設計師都愛用圓角矩形?真的有比較好?()

考取APCS認證非知不可的攻略秘笈就看這篇!!()

人工智慧也會騎重機飆車?!頂尖車手擔憂快失業!!