A/B測試如何改善網站?為何讓UI設計師都說讚?!(4)

A/B測試如何改善網站?為何讓UI設計師都說讚?!(4)
A/B測試如何改善網站?為何讓UI設計師都說讚?!(4)

UI設計師都說讚的A/B測試有多厲害?看完範例終於明白為什麼了!(4)

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 4 篇,第 3 篇請點此連結

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

 

 

 

 

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


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


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


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


UI設計用”圓角”,超人氣背後的祕密竟是?(上)


人工智慧機器人最佳導師竟是狗狗?!(上)


人工智慧MOTOBOT,竟讓重機賽車手冠軍都讚嘆不已!?

A/B測試如何改善網站?為何讓UI設計師都說讚?!(3)

A/B測試如何改善網站?為何讓UI設計師都說讚?!(3)
A/B測試如何改善網站?為何讓UI設計師都說讚?!(3)

UI設計師都說讚的A/B測試有多厲害?看完範例終於明白為什麼了!(3)

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 3 篇,第 2 篇請點此連結

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 3 篇,第 4 篇請點此連結

 

 

 

推薦文章:
Google Analytics「工作階段」定義與範例一次解析!


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


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


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


UI設計用”圓角”,超人氣背後的祕密竟是?(上)


人工智慧不用擔心被騙!捷克新創AI,輕鬆揪出金融駭客(上)


Python與人工智慧關係匪淺!?聽說和大數據還有一腿!?

A/B測試如何改善網站?為何讓UI設計師都說讚?!(2)

A/B測試如何改善網站?為何讓UI設計師都說讚?!(2)
A/B測試如何改善網站?為何讓UI設計師都說讚?!(2)

UI設計師都說讚的A/B測試有多厲害?看完範例終於明白為什麼了!(2)

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 2 篇,第 1 篇請點此連結

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 2 篇,第 3 篇請點此連結

 

 

 

 

 

 

推薦文章:
亞馬遜人工智慧出包 搞混國會議員與罪犯


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


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


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


人工智慧MOTOBOT,竟讓重機賽車手冠軍都讚嘆不已!?


人工智慧機器人最佳導師竟是狗狗?!(上)


UI設計用”圓角”,超人氣背後的祕密竟是?(上)

A/B測試如何改善網站?為何讓UI設計師都說讚?!(1)

A/B測試如何改善網站?為何讓UI設計師都說讚?!(1)
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 體驗。

 

本篇為「使用 A/B 測試來改善網站UI 設計的 30 個例子」的第 1 篇,第 2 篇請點此連結

 

 

 

 

 

 

 

 

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


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


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


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


UI設計用”圓角”,超人氣背後的祕密竟是?(上)


連重機賽車手冠軍都佩服的存在!人工智慧做到了!


人工智慧反詐騙成功!捷克新創AI,揪出金融駭客不費力!(上)
 

科技始於人性!最新版UI設計身分證10月份問世!(下)

科技始於人性!最新版UI設計身分證10月份問世!(下)
科技始於人性!最新版UI設計身分證10月份問世!(下)

科技始於人性!最新版UI設計身分證10月份問世!(下)

本篇為上篇,下篇請點此連結

卡面設計簡約質感,劃出你的隱私空間

新式身分證除了極簡風的 UI 介面之外,到底還有哪些亮點呢?

翻翻我們手中的現有身分證吧!現有的卡面樣式是 14 年前的設計,在今日文武百業都數位化的時代,早已不適合現況使用。政府為展現數位化決心、並因應逐日被重視的個資隱私,卡面與功能都已大幅變化,讓我們逐一細說如下:

一、隱私保護升級、遺失也不怕洩個資

除充滿質感的外觀,資訊呈現上也做不少調整。伴隨著個資保護意識抬頭,新版 ID 的 UI 介面一改過去拿出身分證便個資全都露的尷尬感,會將大多數的個人資訊儲於晶片內。

新式 ID 僅會保留個人基本資料:姓名、身分證字號、出生日、人像等,至於其他更私密的資訊如父母姓名、出生地等,都於晶片內加密保護,且需經本人同意、輸入身分證後 6 碼及自訂的 2 組密碼後,機關才能讀取資料。

萬一不小心遺失身分證,更可直撥「1996」專線掛失,自然人憑證就立即停用!失主也可申請紙本臨時證明,供掛失補辦期間使用。

而原有的身分證因為有密碼保護機制,所以毋需擔心晶片內容被讀取、盜用; 而晶片則是封裝後無法再取出、無法被側錄或複製偽造。

除此之外,數位身分證沒有儲存的功能,所以使用時不會留下紀錄,避免被第三方監控,真正保障各資安全。

二、兼具駕照健保卡功能,還可綁定手機!

今年 10 月後,假設數位身份證執行狀況順利的話,政府將進入開發「行動身分證 APP」的階段,並將身份證與健保卡、駕照等證件「多卡合一」!如此一來,出門就真的不用帶一堆證件在身上,無論是要看病、驗車、遇到警察臨檢等等,只需一機在手便可搞定要各項大小事,是不是很方便!

三、辦事不用往外跑,數位 ID 網上搞定!

身分證數位化的最大特點就是,任何需要證件才能辦理的業務,也都同步數位化,能在線上直接辦理。透過政府骨幹網路 (T-Road) 串接政府各機關、部門的獨立系統資料股,民眾最快在今年 10 月之後,就能在網路上辦理公投連署、健保、社福、津貼、勞保、年金、護照簽證等 16 項業務!這樣就不需要為了印身分證、臨櫃申辦事務而東奔西跑了

新版身分證不僅在 UI 介面的設計有乾淨利落、資訊分明的特點,更在技術、使用、便民性上有著巨大的突破!未來在其他功能上的結合,更是指日可待!就讓我們一同期待 10 月份新卡的蒞臨吧!
 

 

推薦文章:
APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!


JavaScript入門教學#18|創造JavaScript物件(Objects)


差點被拋棄的冠軍程式語言-Java入門教學(一)
Java 身世之謎/寫出第一個Java程式


你是我的眼!Google AI 眼鏡助視障朋友「看見」世界


落實”數位優先”只靠UI?!看看奧迪跟福斯怎麼辦到的!!(上)


UI設計與”數位優先”的完美結合-福斯篇


UI/UX不單單只是設計?!還搞心理學?!

科技始於人性!最新版UI設計身分證10月份問世!(上)

科技始於人性!最新版UI設計身分證10月份問世!(上)
科技始於人性!最新版UI設計身分證10月份問世!(上)

新版UI設計的身分證預計10月問世,聽說會讓生活更便利!?(上)

睽違14年,今年10月即將入手的 eID,新功能你期待嗎?

還記得在 2018 年內政部舉辦的「新版身分證」設計競賽嗎? 當時任職 HTC,參與 HTC Sense UI 介面設計與 HTC Themes 設計的魯少綸,他的作品「形|SHAPE」以簡潔的 UI 廣獲評審們青睞,獲得「設計獎」,更成為新式身分證的設計依據呢。

▲ 新身分證得獎做品:左圖為設計獎、右圖為人氣獎

不過在網路票選過程中,「形|SHAPE」卻僅僅獲得 46 票,與獲得近 10 萬票卻只得了一個「人氣獎」的作品「嶼民在地」票數相差懸殊,引發網友們不滿。「不禮貌鄉民團」在臉書上貼出比較,質疑為何 9 萬 6 千票的作品卻輸給僅有 46 票的作品,引發激烈論戰。

對於爭議不斷的新身分證競賽結果,設計師聶永真表態:千萬不要用民粹霸凌設計獎得主!究竟新式身分證除了極簡風的 UI 介面之外,到底還有哪些亮點,值得設計師為它發聲呢?

新身分證 UI:高延展性、整齊易讀、具包容性,獲評審青睞

▲ 新身分證版面切成單純的左右兩塊,給予長短不一的字數有很大的延展性,版面也更整齊易讀。

左右區塊排版,簡潔易讀

據「身分證再設計官網」所寫的官方勝選理由,「形|SHAPE」以整齊的排版勝出。其實由上圖不難發現:「形|SHAPE」無論是正面、反面,都只有切成單純的左右兩個區塊。正片的左區塊約佔了整體版面的 2/3、背面則占了約 3/4。

延展性強:無論文字多長都能排進去!

作者將姓名、地址以及「中華民國國民身分證」的中英文字樣⋯⋯等等字數較多的資訊,巧妙的置於較大的左區塊,讓整張身份證有整齊分明的排版;且左區塊的文字內容有足夠的空間可以延展,因此不管地址、姓名的長度有多長,都能在雙語的排版上明暸易讀。

低調呈現台灣意象 質感律動感都到位

另外,作者也將代表台灣土地的圖樣,低調的詮釋在細節中:身分證簡約的白底,搭配玉山山脈的等高線圖的壓紋,上頭還印有台灣島狀的光影變化箔膜。對比其他直白地使用具體的台灣島外型、101 等圖樣,兼具律動感與藝術感的等高線線條作為背景,確實是十分令人玩味的呈現方式。

本篇為上篇,下篇請點此連結

 

 

 

推薦文章:
JavaScript入門教學#18|創造JavaScript物件(Objects)


APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!


差點被拋棄的冠軍程式語言-Java入門教學(一)
Java 身世之謎/寫出第一個Java程式


你是我的眼!Google AI 眼鏡助視障朋友「看見」世界


錯過可惜!!究竟奧迪跟福斯如何靠UI落實”數位優先”?!(中)


UI/UX設計心理學,教你抓住客戶的心!!


落實”數位優先”只靠UI?!看看奧迪跟福斯怎麼辦到的!!(上)

誰說UI/UX只是設計?!心理學還要會咧!!

誰說UI/UX只是設計?!心理學還要會咧!!
誰說UI/UX只是設計?!心理學還要會咧!!

UI/UX竟然如此深奧?設計前還要先懂客戶心理學?!

最近學習了米勒定律和希克定律。 其中關於如何提升視覺感知,有對我很有很大的幫助,其中有一條:平均每個人在記憶時候最大數量為7個。

另外一條則是:眼睛是獲取大量信息的強大工具。 大部分數據被無意識地吸收。 視覺感知可說是UI設計領域的重中之重,特別是產品設計師,作為UI設計師需要去了解和運用這些定律,提升用戶視覺感知。

什麼是視覺感知

視覺感知是人們能夠獲得信息,並由大腦進行處理的最有成效的方法。 人的眼睛有著接收及分析視像的不同能力,從而組成視覺。 腦部將眼睛接收到的物象信息,分析出四類主要信息就是有關物象的空間、色彩、形狀及動態。 有了這些數據,我們可以辨認外物和對外物作出及時和適當的反應。

視覺感知的特點

速度快,所有信息以圖形存儲,人眼閱讀圖像比文字更快,在大部分的情況下,人們感知圖標和插圖的圖片元素比文字更快。 大部分用戶是視覺驅動的,所以視覺感知機制通常應該在設計過程中考慮,研究裡面有幾條規則挺有意思:1.人眼閱讀圖像比文字更快。 2.人們需要約1/10秒來獲得視覺場景或元素的一般感知(該速度對於文字表達基本不可能的)。 3.大腦儲存重要的信息片段通常由固定為視覺圖像,即使它們是通過文字感知得到的。

視覺感知規律心理學家提到的視覺記憶感知三個核心規律,很簡單也好記憶:

1.集中:要記住一件事情或大量的數據,需要集中精力。 否則,數據將在短期記憶裡上被丟棄的機率很高。

2.聯想記憶:大腦裡其實有個巨大的網絡連接,我們會自動將感知到的新的片段能和舊的片段聯繫關聯,感知就會越強,也在設計中也就是常說的用戶習慣。

3.重複:不斷去重複激活一些片段,直到達到長期識別為主。 基於這3個點的的規律我們需要在視覺中可以去運用,通過設計強調突出我們想表達的內容,突出重要信息,通過簡單的交互讓用戶和他之前的經驗關聯。

視覺感知如何運用

1.通過圖標加強感知

2.減少數量加強感知關注度在設計中很重要,如果同時提供了幾個選項,按鈕,選項,用戶的短期記憶會花費更多的時間和精力來考慮,這時候隨時可能會讓用戶跳失。 米勒定律:每個人在工作記憶時候最大數量為7個。 人的大腦短時記憶容量約為“7”。

希克定律:人​​們選擇的元素越多,往往越難選擇。 一但選擇點很多,越是猶豫,分散,特別在電商設計裡面,我們需要平衡所有的信息,給予用戶最有用信息和行動點。

3.通過圖像強化感知

除了圖標,還可以通過圖像來強化感知力,我們應該掌握圖像處理的手法,透過不同的形式來組織內容,圖片沒有秘密也最直接,也最能被記憶。

4.通過導航強化感知

導航是可用性的關鍵因素。 通過tab移動,能記住用戶路徑和數據;因此,設計導航時候,交互和視覺一致和清晰很重要。

5.通過直接的表達加強感知

關於顯示或隱藏的各種菜單的討論目前有很多,我們重要的是要記住,界面的關鍵目標應該是用戶清楚地了解發生了什麼。 他想要的操作在那裡。 因此,關於漢堡包菜單,滑塊,隱藏層次的導航和內容的操作設計應該梳理好頁面功能層級設計,不要去隱藏一些核心操作。

6.通過多媒體藝術加強感知除了以上,還可以通過視頻,音頻,動效,3D等。 通過這種刺激,不僅設計師可以創造更多創意,而且對不同的人記憶加強,比如618,雙11, 造物節一些動效,音頻對大家記憶刺激很強。

視覺感知心理學,更多幫助我們在做UI/UX設計時候,了解人們是如何與世界互動,哪些元素影響他們的行為。 通過設計去改變引導用戶,管控好用戶使用路徑,能夠更好幫助產品成功。

免責聲明:文章內容轉載自公開網絡,如有侵權,請聯繫我們刪除。

 

 

推薦文章:
讓UI課程等等的電腦課程幫你打造一份完美有實力的超強履歷!!


色彩也有魔力?!UI設計師告訴你關於黑色的5個秘密!(上)


重新學習UI UX Python課程 打好基礎輕鬆領高薪


Python是什麼?跟人工智慧有什麼關係?


微軟的麻將人工智慧更勝Al的phaGo?今天揭曉真相!-上


讓你實現目標與夢想的技術實力-Java課程


達內教育海外合作企業


擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師


零基礎如何花 14 小時考取 GoogleAds 認證?五種 GoogleAds 廣告不藏私攻略


44歲媽咪順利轉職網頁設計師, 家庭事業都得意


2天考取Google Ads證照!新手廣告投放攻略


從無到有 挑戰14小時取得Google證照