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課程找好工作:品保花了一年順利轉職程式設計師!!

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設計!!(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認證非知不可的攻略秘笈就看這篇!!()

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

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

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

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

UI 設計的知識網站「GoodUI.org」整理分享了許多已經 A/B 測試的 UI 設計,先幫忙把常見的網頁排版都測完,幫助 UI 設計師/網頁設計師們省下許多功夫!

什麼是A/B測試

A/B 測試(A/B Test)運用了統計學的原理,顧名思義就是眼前有「A 版」與「B 版」兩種方法,為了測試哪種方法能獲得更好的市場反應,將 2 種版本同時上線,將消費者導入 A 或 B 版網頁做測試。

A/B 測試的優點在於可以得到實際的數據,而非依靠主觀意見來決定網站的架構與UI 設計,也能不落傳統思維的俗套。只是各個版本需運行一段時間,待累積足夠的數據,才能確保測試的準確性,也需耗費不少成本。

範例1:嘗試使用單欄排版取代多欄

多欄式排版的 UI 設計有分散頁面焦點的風險,而單欄式排版可以更好地安排內文敘述,同時從上而到下引導讀者的視覺動線也更加直覺,也能避免於閱覽者分心。最後可以安排醒目、富有號召力的內容做結尾。

範例2:在行動呼籲前先給予誘因

UI 排版上,先給予像是「送禮」等誘因,是一種基於互惠原則的有效說服策略,同時也是能優化 UX 使用者體驗、改變顧客想法的最簡單方式。即使聽起來似乎很理所當然,但嘗試表現出友善的態度,如一封感謝信、小紀念品等,也能讓網站受眾的 UX 體驗更佳。這個微小的 UI 調整,也許會在未來帶來出乎意料的好處。

範例3:嘗試合併類似功能的欄位,避免版面破碎化

 

 

範例4:讓社群證明價值,不要自吹自擂

社群的廣泛好評對於提高轉化率是很好的說服策略,當客戶看到其他用戶支持並討論您的產品服務,會增進他們想深入了解的動機。

嘗試蒐集過往客戶的推薦文、滿意度證明或各種可以佐證的數據證明,並放在網頁上吧!

範例5:不要害怕重複顯示引導指示,只要放在不同位置就好

在跨度大或多分頁的網站中,重複出現讓使用者點擊的行動呼籲是可行的,但當然不是指讓「購買」等按鈕在同一畫面重複顯示10次,這麼做肯定會惹惱使用者……。

重點在於合理規劃欄位分配,因長長的一頁式網頁已相當能被大眾接受,不需像過去一樣,把所有網頁元素都壓縮在一個螢幕大小。所以在一頁式網頁的最上方設置一個適中的點擊按鈕、最下方放置一個醒目的點擊按鈕,也是符合UX使用者體驗的原則。

根據 A/B 測試出來的使用者習慣,當使用者「滑」網頁到最底時,看到可點擊的按鍵,他們會停下來思考接下來要做什麼 —— 例如點下那個「購買」鍵。

範例6:讓「可點擊」和「可選擇」的外觀有差異

為了清楚的引導訪客使用網站介面,UI 設計師要明顯區分出「可點擊」(如連結或按鍵)、「可選擇」(如選單)和純文字的樣式,不只在設計上要有所區別,同時上方描述文字也必須簡潔清楚。可以利用視覺元素,例如:顏色、深淺和對比度等,來達到又美觀又可以區分的效用。

例如以圖例來看,設計師選擇「藍色」做為網站上可點擊按鍵的色調,而選擇「黑色」為當前所在頁面的名稱。簡明扼要的顏色應用就能達到不言而喻的效果。最重要的是:千萬別使用過多的顏色混淆使用者。

推薦閱讀:為落實“數位優先”的UI設計…Audi,福斯竟將LOGO壓扁了!

範例7:突顯最推薦的項目,避免讓所有項目都看起來相同

有心理學研究表示,當人們眼前的選擇越多,反而會陷入一種「分析癱瘓」的狀態,導致從選擇中挑選的機率越低。

UI 設計師為了避免這個困境,比起單純陳列所有的項目,強調突出最主要的商品或服務是更好的做法。

推薦閱讀:UI設計師的配色攻略:5個黑色的設計意義/用法

範例8:讓使用者主動選擇「復原」,而不是重複詢問意圖

想像一下,當按下按鍵或連結,網頁可能會出現兩種提示:第一種是在介面底部出現「復原」(undo)鍵,讓你回復至上一步;另一種則是跳出視窗要你「確認即將要進行的操作,確認後無法復原」。這兩者會帶給消費者什麼不同的使用者體驗 (UX)?

跳出視窗要你「確認自己在做什麼」會讓使用者覺得備受質疑,而「復原」提供使用者就算操作錯誤也可以回復到上一步的功能,則會讓人感到友善、包容與尊重。

另外,若使用者需重複的進行某項操作,網頁不斷跳出提示視窗,也讓使用者感到操作效率低下,產生不佳的 UX 體驗。

 

 

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

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

 

 

 

其他閱讀

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

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

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

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

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

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

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