首頁

為什么要用卡片設(shè)計?好在哪,怎么做?

純純

今天這篇國外大佬寫的文章,算是從為什么這樣做的角度來分析卡片設(shè)計,一起來學(xué)習(xí)吧。

 

undefined

從Instagram和Facebook這樣的社交媒體應(yīng)用到亞馬遜這樣的電商平臺,卡片設(shè)計似乎是無處不在的,這些大廠廣泛應(yīng)用使得卡片設(shè)計很快流行了起來。


作為一個信息容器,卡片能承載包括文本、富媒體、按鈕等所有UI元素?;谶@些內(nèi)容,卡片設(shè)計可以根據(jù)不同的設(shè)備和屏幕調(diào)整其大小,平衡界面視覺和用戶體驗。


什么是卡片設(shè)計?


卡片是一個UI組件,包含了某一個內(nèi)容的信息和操作??ㄆ梢园鞣N元素,但它們都應(yīng)該屬于同一個主題。

undefined

這樣做的目的是為了避免冗長的文字,并呈現(xiàn)更多的內(nèi)容。即使從設(shè)計的角度來看,用戶可能不熟悉卡片的概念,但他們馬上就知道如何使用它們,因為它們與實體卡片是一樣的。(彩云注:這個就是用戶心理學(xué)中隱喻的運(yùn)用)


為什么它會如此流行?


卡片之所以流行,是因為它們能更好的把控內(nèi)容。卡片是模塊化的,所以不同的內(nèi)容可以堆疊在一起,而不需要注意它們的差異。


卡片通過強(qiáng)制內(nèi)容適應(yīng)卡片邊界和卡片布局上的限制來聚焦內(nèi)容。設(shè)計師喜歡通過卡片混排大量內(nèi)容,而無需擔(dān)心設(shè)計會變得雜亂無章。


卡片可以將內(nèi)容分解成易于理解的小塊,以便用戶與之互動。通過給內(nèi)容一個容器,卡片向用戶表明內(nèi)容是真實和感性的。


卡片 UI 設(shè)計流行的原因還有很多:


  • 直觀:卡片在界面中看起來與現(xiàn)實世界中的卡片相同,它們對用戶來說似乎很常見。在卡片成為移動和網(wǎng)絡(luò)應(yīng)用中的流行元素之前,它們在現(xiàn)實生活中無處不在:名片、棒球卡、便簽??ㄆ砹艘环N有益的視覺類比,它允許我們的大腦直觀地將卡片與其所代表的內(nèi)容聯(lián)系起來,就像在現(xiàn)實生活中一樣。


  • 易于閱讀:卡片不占用太多空間,并敦促設(shè)計師優(yōu)先考慮其內(nèi)容。不同的是,每張卡片都變成了易于閱讀的內(nèi)容。卡片讓用戶更容易找到他們感興趣的內(nèi)容。


  • 有吸引力且對用戶更友好:基于卡片的設(shè)計通常非常依賴視覺效果(尤其是圖片);就信息架構(gòu)而言,視覺層次會更加清晰。使用圖片有助于使基于卡片的設(shè)計比不在卡片中排列的相同內(nèi)容對用戶更具吸引力。


  • 有利于響應(yīng)式設(shè)計:卡片是矩形的,可以平滑地調(diào)整大小,以適應(yīng)不同屏幕的水平和垂直正面,這意味著用戶可以在所有設(shè)備上獲得統(tǒng)一的體驗。


  • 便于分享:卡片可以鼓勵用戶在社交媒體上分享內(nèi)容,因為它允許用戶只分享特定的內(nèi)容,而不是整個頁面。



什么時候應(yīng)用卡片設(shè)計?


這通常是當(dāng)你有:

  • 基于搜索的界面:  卡片能通過模塊的內(nèi)容快速顯示合適的內(nèi)容,這使得用戶可以深入了解自己的興趣?;诳ㄆ脑O(shè)計是一種非常適合呈現(xiàn)這類內(nèi)容的方式。


  • 信息瀏覽:當(dāng)用戶瀏覽信息時,卡片的兼容性更好。


  • 任務(wù)管理:當(dāng)可以將流程中的單個任務(wù)作為卡片進(jìn)行說明時, 可以輕松組織卡片以獲取任務(wù)列表。任務(wù)管理應(yīng)用在使用卡片式界面為用戶創(chuàng)建儀表板方面做得很好,其中每張卡片代表一個單獨(dú)的任務(wù)。


  • 類似項目:卡片最適合于異構(gòu)項目的集合(當(dāng)并非所有內(nèi)容都是相同的基本類型時)。


  • 可視化分析:  儀表板通常在同一頁上同時顯示各種內(nèi)容樣本。在這種情況下,卡片類比可以幫助在不同物品之間創(chuàng)造出更明顯的差異,其中每張卡片可以適應(yīng)不同的角色。


卡片解構(gòu)


卡片的布局可以不同,以支持它們包含的內(nèi)容類別。下面的組件通常可以在多種卡片樣式中找到。

undefined

(1)富媒體: 卡片可以包含縮略圖,以顯示圖片,插圖,頭像,Logo,圖標(biāo)或圖形。


(2) 標(biāo)題: 標(biāo)題文本可以包含相冊或文章的名稱或標(biāo)題。


(3) 描述: 支持文本,如文章摘要或簡短的描述。


(4) 行動按鈕: 卡片可以包含用于操作的按鈕。


(5) 副標(biāo)題: 副標(biāo)題文本可以包含詳細(xì)介紹,如文章的署名或標(biāo)記的位置。


(6) 圖標(biāo): 卡片可以包含操作圖標(biāo)。


設(shè)計技巧


有一些小的技巧可以快速提高卡片設(shè)計細(xì)節(jié)。


1. 使用相關(guān)主題的圖片


圖片是卡片設(shè)計的主角,你需要一個高級的圖片來吸引用戶對每張卡片的注意。不僅是圖像,卡片還可以包含插圖、帶有淺色背景框的圖標(biāo)或任何其他類型的富媒體,但需要與內(nèi)容主題相關(guān)。 

undefined


2. 增加視覺層次


卡片內(nèi)的層次結(jié)構(gòu)有助于引導(dǎo)用戶對重要信息的閱讀。將主要內(nèi)容放在卡片的頂部,并使用排版來強(qiáng)化主要內(nèi)容。使用空白和對比來分隔需要更多視覺分隔的內(nèi)容區(qū)域。(彩云注:視覺層級對于信息表達(dá)至關(guān)重要?。?nbsp;

undefined


3. 限制內(nèi)容長度


一張卡片應(yīng)該只包含重要的信息,并提出一個相關(guān)的觀點(diǎn),以獲取額外的細(xì)節(jié),而不是完整的細(xì)節(jié)本身。當(dāng)我們試圖在一張卡片中放入太多內(nèi)容時,卡片可能會變得很冗長,并失去與卡片類比的實際聯(lián)系,因為它不再像一張卡片了。 

undefined


4. 避免嵌入鏈接


不要包含內(nèi)聯(lián)鏈接,卡片應(yīng)該自己鏈接。嵌入文字鏈接會讓用戶誤操作。 

undefined


5. 區(qū)分操作主次


包含不同操作的卡片應(yīng)該在視覺上形成對比。在下面的例子中,我通過使用一種較輕的色調(diào)而不是主要的按鈕風(fēng)格來降低后續(xù)操作的視覺強(qiáng)度。 

undefined


6. 去掉分割線


對于新手設(shè)計師來說,用分割線來區(qū)分內(nèi)容是一種常見的方式,以此定義不同的組。這些邊框會造成不必要的視覺干擾,從而影響內(nèi)容。

undefined


如何做到視覺上更美觀?


APP中的卡片并不是純粹的擬物概念,但通常情況下,使用一致的類比和物理原理能幫助用戶理解界面并分析內(nèi)容中的視覺層次。在卡片的情況下,你可以做幾件事:


1. 使用圓角


在形態(tài)上與真實世界的卡片進(jìn)行視覺對比。圓角更有效,因為它們讓我們的眼睛容易跟隨視覺動線,“因為它更適合頭部和眼睛的自然運(yùn)動”。 

undefined


2. 增加一個輕微的外邊框或者投影


增加一條淡淡的描邊框或者增加一個淡淡的投影都是很好的做法。陰影在界面中創(chuàng)造了一個層次,這有助于我們區(qū)分UI元素。


然而,在設(shè)計中添加陰影并不像聽起來那么簡單。有時候設(shè)計師會過分強(qiáng)化投影效果,讓原本看起來不錯的設(shè)計看起來很廉價。避免使用純黑色的陰影。

undefined


3.注意字體和留白


重要的是要讓每一張卡片都能被人看到、閱讀和理解。在每個塊周圍添加大量的空白,讓用戶有時間處理并進(jìn)行視覺重置,有精力看完一張卡再到下一張。


選擇簡單和基本的字體,因為基本的排版最大限度地提高了可讀性,并有助于瀏覽。


一些優(yōu)秀卡片設(shè)計的例子


讓我們看看一些真實項目中的卡片設(shè)計案例:


信息流中的卡片設(shè)計


保持信息流卡片簡單是很重要的。它們應(yīng)該有一個一致的、重復(fù)的結(jié)構(gòu),但是使用不同的圖片和字體大小來代表卡片中最重要的和最不重要的元素,以使讀卡片的人更容易理解它們。 

undefined

由Diseno Constructivo和Webpixels設(shè)計


他們突出特色圖片和標(biāo)題作為最突出的元素,這能幫助用戶決定文章或發(fā)布的內(nèi)容是否適合他們。


電商卡片設(shè)計


產(chǎn)品卡片是一個很重要的東西,它可以幫助你將訪問者轉(zhuǎn)化為客戶。一張優(yōu)秀的產(chǎn)品卡片應(yīng)該能夠吸引人們的注意,激發(fā)人們獲得產(chǎn)品的欲望,激勵人們購買,并在搜索結(jié)果中得到高效推廣。 

undefined

由Webpixels設(shè)計


產(chǎn)品的名稱應(yīng)該放在最顯眼的地方,這樣參觀者就會立刻明白他來對地方了。一個好的配圖能告訴顧客勝過千言萬語,所以你需要一個高質(zhì)量的產(chǎn)品配圖來設(shè)計完美的產(chǎn)品卡片。


如果產(chǎn)品有特價,不僅要在價格欄中注明促銷價格,還要注明常規(guī)價格,以及客戶可以節(jié)省多少錢。


個人中心卡片設(shè)計


簡介卡已經(jīng)成為一個應(yīng)用或網(wǎng)站中的功能模板。隨著個人品牌變得比以往任何時候都重要,卡片設(shè)計在這里也能發(fā)揮重要作用。 

由Neelesh Chaudhary設(shè)計


就像每一張卡片一樣,配置文件卡片也是一個UI組件,它包含了對它所代表的內(nèi)容至關(guān)重要的信息。為了達(dá)到你的目標(biāo),你要向其他人推銷你自己。


確保只包括必要的信息(例如,照片,名字,職業(yè)),讓你的“關(guān)于”頁面有剩余的細(xì)節(jié)來完善你的個人資料。


儀表盤卡片設(shè)計


儀表板的設(shè)計可以有很大的不同。但是所有的儀表盤都是用卡片做的。根據(jù)儀表板的類型,每張卡片可能包括概要信息、通知、快速鏈接或?qū)Ш皆O(shè)計元素、關(guān)鍵數(shù)據(jù)、圖表和數(shù)據(jù)表。確保你為每個元素使用了正確類型的卡片。 

undefined

由Simmmple設(shè)計


儀表盤卡設(shè)計允許用戶決定他們想要關(guān)注哪些數(shù)據(jù)。易于理解的UI,允許用戶精確地控制哪些數(shù)據(jù)需要在儀表板的前端做好。


只包括最相關(guān)的信息,為用戶使用方便。當(dāng)你的數(shù)據(jù)集在一起看更容易理解時,找到在一張卡片上顯示它們的方法。但是要小心,不要讓用戶感到困惑。


日常計劃卡片設(shè)計


看板任務(wù)卡似乎是一件非常簡單的事情——拿一張便簽,寫下你需要做什么,然后把它貼在墻上。這些卡片必須包含需要行動的單位數(shù)量。它們還可能包含各種各樣的其他信息,清楚地傳達(dá)了必須做什么。 

undefined

由Neelesh Chaudhary設(shè)計


卡片上包含的信息包括任務(wù)的名稱和重要的細(xì)節(jié),如任務(wù)的類型和誰擁有它??窗蹇ǚ旁跔顟B(tài)類別下。最基本的狀態(tài)類別是“計劃要做”、“正在進(jìn)行中”和“完成”,但是狀態(tài)可能因項目而異。


卡片結(jié)構(gòu)最適用于添加或刪除任務(wù)這樣的小改變,而不是改變像你的總體目標(biāo)這樣的大想法。


總結(jié)


有幾種方法可以使卡片設(shè)計更加有效。通過最初定義和觀察卡片,我們可以更好地了解跨行業(yè)的這種設(shè)計模式。這也讓我們能夠推測用戶希望在這些卡片上采取什么行動。卡片在提供許多不同種類內(nèi)容摘要的環(huán)境中尤其有效,而不是簡單地作為內(nèi)容列表的現(xiàn)代替代品。

作者:彩云Sky         來源:站酷
藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


六個方法解決用戶決策疲勞

ui設(shè)計分享達(dá)人

決策疲勞在現(xiàn)今互聯(lián)網(wǎng)深度發(fā)展的時代似乎非常常見,面對眼花繚亂的APP頁面,我們通常會因為需要做出過多決策而煩躁。那么產(chǎn)品設(shè)計者應(yīng)該如何減少決策疲勞現(xiàn)象,給予用戶更好的體驗。本文圍繞解決用戶決策疲勞展開了詳細(xì)講述,推薦對此感興趣的伙伴閱讀。


決策疲勞是用戶體驗圈一個路人皆知的詞匯,用于描述人們在某個時期內(nèi)做出過多決策而導(dǎo)致厭煩的情況。研究表明,它主要發(fā)生在人類的認(rèn)知能力在單位時間內(nèi)隨著時間的延長而減少時。這就是為什么學(xué)習(xí)、鉆研問題,是一件非公眾都能做好的少數(shù)事件。

在產(chǎn)品設(shè)計中,我們要堅持減少用戶需要做出決策數(shù)量的基本原則。保證用戶使用產(chǎn)品來完成一項任務(wù),能夠越順利、越直接。個人在特定時期內(nèi)被要求做出的決定越多,即使這些決定是微不足道的(比如選擇播放那個節(jié)目),他們的決策質(zhì)量也會越低。

當(dāng)你感到疲倦時,這會顯著地影響你的決策能力,而 設(shè)計師在為用戶設(shè)計界面時必須了解到疲勞可能對用戶的影響。這個話題很有趣,因為人們在使用你的產(chǎn)品時可能會遇到的認(rèn)知過載的原因有很多。

本文重點(diǎn)是介紹在你進(jìn)行下一個 產(chǎn)品項目時減少認(rèn)知過載的六種方法。

一、讓用戶少做選擇

作為用戶,每天我們擁有的選擇題都在呈指數(shù)增長。互聯(lián)網(wǎng)讓我們可以在瞬間訪問世界上的內(nèi)容。如此多的選擇會使我們思維遲鈍,降低我們的滿意度,并可能導(dǎo)致我們對體驗感到沮喪而不是變得更好。

當(dāng)給用戶太多選擇時,他們往往會感到困惑和迷茫。一個產(chǎn)品可以擁有世界上所有的功能,但是當(dāng)界面因為選擇過多而過于復(fù)雜時,它最終給到用戶的體驗一定很差。《人格與社會心理學(xué)雜志》的一項研究表明,當(dāng)我們有太多選擇時,往往會導(dǎo)致決策失誤和情緒沮喪。

六個方法解決用戶決策疲勞

來自哈佛商業(yè)評論的模型

在追求最大化滿足商業(yè)化可能的產(chǎn)品設(shè)計中,老板可能會要求在其產(chǎn)品中包含過多或過少的功能。通過使用哈佛商業(yè)評論提供的模型,橫軸為功能數(shù)量,三個點(diǎn)依次為用戶復(fù)購最大化、用戶終生價值最大化、用戶初次購買銷售最大化,公司能夠根據(jù)他們想要的結(jié)果找到適合他們的功能數(shù)量最佳點(diǎn)。

研究表明,人們更有可能購買提供了有限數(shù)量的商品。在這種情況下,他們也會對自己的選擇更滿意,而不是從購買前的猶豫到購買后的忐忑,從而產(chǎn)生更大的滿足感。

關(guān)鍵是很多產(chǎn)品為用戶創(chuàng)造了太多的選擇,這可能會造成浪費(fèi)并適得其反。用戶可能會浪費(fèi)時間嘗試點(diǎn)擊所有可能的產(chǎn)品,而不是按照預(yù)期進(jìn)行實際購買。

1. 扯淡的神奇數(shù)字7

在用戶體驗世界中,關(guān)于使用多少次點(diǎn)擊以及人腦一次可以接收多少信息,存在許多相關(guān)的說法。但最重要的是,產(chǎn)品設(shè)計師需要在簡單性和功能性之間取得平衡,這樣他們就不會要求用戶做太多的操作或過多考慮用戶的需求遺漏了什么。

最容易被誤解的理論之一是喬治米勒的“神奇數(shù)字 7”。有人說產(chǎn)品設(shè)計應(yīng)該只有七個菜單選項卡或下拉列表中的七個項目。

這是個謬誤,雖然我在某種程度上同意這種觀點(diǎn),因為堅持這樣的限制似乎更自然,但我們也必須考慮信息是如何隨著社會和我們的大腦發(fā)生變化的。當(dāng)前的互聯(lián)網(wǎng)會通過網(wǎng)站和大屏手機(jī)向我們展示數(shù)據(jù),而不是早年的4.0英寸的小屏手機(jī),用戶可以輕松地一次看到他們的所有選項,并不是非要強(qiáng)制通過數(shù)字7的限制讓用戶一塊很大的屏幕上來回滾動。

同時現(xiàn)在也有一些研究表明,人們有可能喜歡有多種選擇的菜單。我們擁有的選項越多越好,因為用戶不必花時間深入查找相關(guān)信息。

比如主頁上最多包含 幾十個類別鏈接的淘寶列表)比僅提供有限選項(如沒有子類別的類別)的網(wǎng)站更有用。但這里要強(qiáng)調(diào)的是需要考慮實際的用戶場景,電商平臺的屬性導(dǎo)致了要為消費(fèi)者提供更多的選擇,而類似工具產(chǎn)品,尤其是垂直工具產(chǎn)品,在設(shè)計選項數(shù)量時一定要謹(jǐn)慎。

2. 擊規(guī)則站不住腳

還有另一個站不住腳的理論:從業(yè)者普遍接受但完全不靠譜的“三擊規(guī)則”,或者更加扯淡的“兩擊規(guī)則”。用戶的滿意度和事件完成率其實并不一定受幾次點(diǎn)擊影響,比方說付費(fèi)流程,缺少必要的流程硬按點(diǎn)擊次數(shù)把流程縮短,導(dǎo)致用戶錯誤付費(fèi)而產(chǎn)生的用戶體驗變差幾乎是不可逆的。

3. 視覺布局用點(diǎn)心

比菜單選項卡或下拉列表的數(shù)量更重要的是視覺體驗。視覺布局可以更輕松地掃描和記住每個選項。根據(jù)信息搜索理論,信息線索的持續(xù)感知對你的用戶體驗很重要。

人們在日常生活中要做出很多選擇,而太多的選擇可能會讓人不知所措。當(dāng)我們因產(chǎn)品特性不得不呈現(xiàn)更多的信息時,重要的是信息組織方式。

你可以去嘗試減少選擇的數(shù)量,但最重要的是你的信息結(jié)構(gòu)。如果你的信息沒有組織好,或者給到用戶的決策過程中涉及的步驟過多,用戶就不會費(fèi)心去尋找他們想要的東西,因為他們覺得這會花費(fèi)太長時間或可能沒必要去更更努力地探索。

為了在產(chǎn)品上讓用戶的決策中有更好的轉(zhuǎn)化,我建議去掉任何不必要的東西,例如無關(guān)的標(biāo)簽和鏈接,這些標(biāo)簽和鏈接會分散用戶的注意力,使其無法找到他們正在尋找的東西。同時綜合產(chǎn)品特性去考慮實際該有的流程數(shù)量和必要選項,平衡簡單性和功能性的關(guān)系。

二、允許用戶后悔

現(xiàn)實中我們都會犯錯。它可能發(fā)生在我們所有人身上!但是,如果用戶犯了錯誤,優(yōu)秀的產(chǎn)品設(shè)計師應(yīng)該怎么做?

答案是:讓用戶輕松回到起點(diǎn)。

通過讓用戶走上正軌,你更有可能留住他們作為用戶,而不是導(dǎo)致他們離開你的網(wǎng)站或應(yīng)用程序。

下面是我在設(shè)計用戶流程時的一些最佳實踐:

  • 盡可能少制造意外情況;
  • 錯誤問題盡可能明晰,讓用戶更容易發(fā)現(xiàn)以修復(fù)它們并繼續(xù)用戶操作;
  • 在操作錯誤破壞用戶體驗之前通過提供保存數(shù)據(jù)選項來主動防止錯誤的數(shù)據(jù)輸入;
  • 不要只是彈出一條覆蓋整個頁面的消息,而是向他們展示哪些字段是錯誤的;
  • 避免在你的消息中使用苛刻的措辭,因為文案可能會趕走甚至激怒某些用戶。

三、視覺提示有助于導(dǎo)航

導(dǎo)航是任何網(wǎng)站或應(yīng)用程序的核心。這就是讓你的設(shè)計能夠讓每個人都易于訪問和使用的原因。設(shè)計出到適合你產(chǎn)品的導(dǎo)航系統(tǒng),對用戶體驗至關(guān)重要。

導(dǎo)航的設(shè)計應(yīng)該直觀且易于使用。用戶應(yīng)該始終知道它在哪里,它的意義,以及點(diǎn)擊它會去哪。

一個好方法是通過顏色為用戶對操作區(qū)域進(jìn)行導(dǎo)航:比如當(dāng)進(jìn)行切換、更改等動作時配備不同的顏色,并用文案清楚地說明每個菜單項下是什么功能。

這些小動作有助于使瀏覽您的網(wǎng)站或應(yīng)用程序成為一種暢快的體驗。

  • 使掃描和閱讀頁面更容易;
  • 改善視覺層次;
  • 加強(qiáng)頁面導(dǎo)航;
  • 重要位置的鮮艷顏色可以提高轉(zhuǎn)化。

一個例子是 Instapage 登陸頁面。如果標(biāo)題沒有箭頭,很難看出下方有更多內(nèi)容:

六個方法解決用戶決策疲勞

四、利用習(xí)慣動作減少學(xué)習(xí)成本

在設(shè)計新界面時,必須盡可能降低受眾的學(xué)習(xí)成本。一個方法是利用他們已經(jīng)熟悉的模式和習(xí)慣。但是你怎么知道這些約定是什么?

下面是三個常見的 設(shè)計慣例,這些慣例可以讓你的用戶在與產(chǎn)品內(nèi)交互時感覺更熟悉,這有助于減少他們的學(xué)習(xí)成本,并讓他們更快地開始學(xué)習(xí)你試圖傳達(dá)給他們的任何內(nèi)容。

1. 顏色不要繚亂

簡潔的配色方案要遠(yuǎn)比復(fù)雜華麗的配色更有效果。人眼會被顏色所吸引,因此如果你在整個界面中使用簡潔的配色方案,人們會更容易找到自己想要的信息而不是被顏色亂神。

2. 把設(shè)計風(fēng)格重復(fù)使用

不僅要遵循常見的用戶體驗規(guī)則,而且要在一個產(chǎn)品里不停的重復(fù),不要輕易作新穎的嘗試,前輩們大多已經(jīng)幫你嘗試過了。

這樣的意義在于:

人們使用你的產(chǎn)品感覺更輕松,因為這個產(chǎn)品沒什么復(fù)雜的新東西(降低了學(xué)習(xí)成本)。

一個例子是,目前無論你在那個瀏覽器查看哪個頁面,你的菜單欄都會保持在站點(diǎn)的頂部或底部。這會讓你產(chǎn)生導(dǎo)航認(rèn)知,因為它在幫助你決定下一步需要采取什么行動時減輕了學(xué)習(xí)成本。

3. 使用生活中的事物表示符號,比如用于刪除文件的垃圾桶。

圖標(biāo)是在你在表示操作對象是什么的好方法,它們易于理解且具有普遍可識別性,因此非常適合作為交互介質(zhì)。使用在生活中已經(jīng)被廣泛理解的圖標(biāo)和符號有助于讓你的產(chǎn)品內(nèi)容不會感覺難以理解和過于復(fù)雜。

圖標(biāo)一定要廣為人知——例如房子。這個圖標(biāo)被普遍認(rèn)為是“主頁”或開始屏幕的圖標(biāo)。垃圾桶也是一樣——這個圖標(biāo)被認(rèn)定為一個垃圾桶圖標(biāo)來刪除一個元素。

五、別自嗨

我們都知道應(yīng)該以用戶為中心進(jìn)行設(shè)計,而不是你自己,但其實不是那么容易。當(dāng)你處于設(shè)計過程中試圖弄清楚你的用戶需要什么或他們會如何反應(yīng)時,其實往往會按照自己的喜好走偏。

一個方法是你可以使用一些簡單的技巧來確保你在設(shè)計時考慮到你的用戶。有些人發(fā)現(xiàn)從第一人稱的角度寫下他們的想法有助于將自己想象成最終被服務(wù)的用戶。

或者某些設(shè)計師會講角色分類,然后全情單線程的專注一個項目,以犧牲時間和效率為代價確保航道的正向。

以用戶為中心進(jìn)行設(shè)計的最佳方式是聽取用戶的意見。當(dāng)你從事一個新項目并考慮這個產(chǎn)品將如何服務(wù)于用戶時,請確保在進(jìn)行原型設(shè)計之前先和你的用戶聊聊。

可以嘗試提出以下問題:

  • “你最喜歡我們上一款產(chǎn)品的哪一點(diǎn)?”
  • “如果我們更改 x 功能,你會有何感受?”

往往你會驚訝于他們可以提供的見解以及他們將期望如何改變你原型的方向。

你可以使用多種用戶體驗研究方法來確保你在設(shè)計時考慮到用戶:

  1.  做一定的市場調(diào)查;
  2.  創(chuàng)建角色故事;
  3.  使用線框或原型快速獲得反饋;
  4.  定期和客戶服務(wù)團(tuán)隊交流。

六、簡約至上

不要提供太多的選項或功能讓用戶不知所措。

每個產(chǎn)品都有自己為用戶解決的核心問題,用戶希望在產(chǎn)品中獲得幫助并快速做出決定。問題是,很多產(chǎn)品經(jīng)常沉迷于他們產(chǎn)品功能以及他可以為用戶實現(xiàn)什么,忘記了如果有太多選項和功能,新用戶可能會感到不知所措。

如果你負(fù)責(zé)一個產(chǎn)品,可以考慮你的用戶在面臨過多選擇或功能時的感受,并盡量優(yōu)先突出他們最需要的選項或功能。

例如,在電子商務(wù)網(wǎng)站中,用戶不能從 50 種不同的衣服面料中選擇他們最喜歡的材質(zhì),如果預(yù)先只有三四個選擇,可能會帶來更好的體驗。也可以考慮隱藏一些選項,方法是使用視覺提示,例如類似“探索更多”文字的按鈕。

確保將最重要的信息呈現(xiàn)給用戶的一種方法是將信息流設(shè)計為金字塔形狀,首先呈現(xiàn)基本信息,不太重要的信息盡量放在不顯眼的地方或者想辦法隱藏。

七、結(jié)論

這里提供了六種方法,幫助你減少產(chǎn)品中的決策疲勞,從而使用戶更有可能走上正軌,解決他們的問題,并幫助獲得更高的轉(zhuǎn)化。產(chǎn)品設(shè)計時把自己放到用戶的角度去思考,才能更好的服務(wù)于用戶


文章來源:人人都是產(chǎn)品經(jīng)理   作者:公眾號:真的不一定


分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)



2022-可用性測試報告輸出思路解析

ui設(shè)計分享達(dá)人

整個報告分兩個部分,

一部分是調(diào)研概述,主要描述調(diào)研是如何進(jìn)行的,包含:用戶方法闡述,調(diào)研對象說明,用戶畫像等,簡單清晰的告訴別人你數(shù)據(jù)是如何獲取的,增加后期問題及數(shù)據(jù)闡述的科學(xué)性。(還有一部分,就是關(guān)于調(diào)研涉及人員,可以在合適的時機(jī)帶一下是UED全員協(xié)作完成的整個過程的。)

另一部分是調(diào)研結(jié)論,我的描述思路是:總-分-總,先描述總結(jié)論,讓觀看報告的人對整體結(jié)論有個初步了解,然后詳細(xì)描述各模塊分結(jié)論,最后提出各模塊共性問題。

結(jié)論部分是整個報告的重點(diǎn),所以前面的概述就簡單介紹清楚就好了,不需要占太多篇幅。

調(diào)研流程,確定標(biāo)準(zhǔn),是匯報,也是邀功,調(diào)研本身就是個繁瑣的過程,我們把過程直觀的呈現(xiàn)出來,讓老板知道我們整個調(diào)研過程,前前后后做了哪些準(zhǔn)備。付出了哪些努力,體現(xiàn)工作量的同時,也能體現(xiàn)我們的專業(yè)性,但是不是記流水賬,得有總結(jié)。

第一部分:調(diào)研概述

我把整個路程大體分了3個部分,第一個部分是調(diào)研前的準(zhǔn)備,第二個部分是調(diào)研,第三個部分結(jié)果闡述。結(jié)果匯報,后期工作計劃,匯報很重要,調(diào)研做得再好,你的結(jié)果無法呈現(xiàn),問題就沒辦法結(jié)論,那就只會停留在發(fā)現(xiàn)結(jié)論。



評估緯度是為了闡述我們從哪些緯度去收集答案的,想要驗證什么問題。



由于大部分人對調(diào)研都只是停留在問卷調(diào)查的層面,所以對樣本量的選擇有不理解,可用性測試主要是為了觀察用戶操作路徑及反饋,所以樣本量不需要太大,這個可以簡單的解釋下是如何挑選用戶的。



數(shù)據(jù)整理也是匯報的一部分,一方面,材料佐證我們做過的努力和準(zhǔn)備,另一方面,數(shù)據(jù)存檔。

我們整個調(diào)研采用了錄音與錄音相結(jié)合,錄音是為了便于后期多人協(xié)作幫忙整理問題,錄屏是記錄用戶操作路徑,收集用戶使用過程中的卡頓,去挖掘卡頓原因,這是是我們做可用性測試的主要目的,這也是跟問卷調(diào)研最主要的差異。



在寫報告的過程中,我一直在想關(guān)于整體滿意度的結(jié)論,是放在第一部分還是第二部分,但是鑒于第二部分主要描述問題,所以思慮再三,還是把他放到了第一部分。

我們拿到各模塊的數(shù)據(jù)后,要怎么用著很關(guān)鍵,單個零散的數(shù)據(jù)是體現(xiàn)不出問題的,只有對比著看才能看出問題。

通過數(shù)據(jù)對比我們明顯能發(fā)現(xiàn),付費(fèi)用戶對產(chǎn)品的整體要求要比增值服務(wù)的要求高得多,畢竟不要錢的,好不好用無所謂,好用我就用,不要用我就不用。但是如果是用戶花錢了的,那他就需要考慮,我獲取到的服務(wù)和花的錢是否成正比,這也就間接確定了我們后面問題處理的優(yōu)先級。



第二部分:問題整體

這里建議做個中場頁。

前面說過,問題描述采用的總-分-總的節(jié)奏,所以最開始描述了一下我們收集到的所有問題的概述,包含,總共多少個問題,已經(jīng)分類類型的分類占比。



這里分享一個問題整理的表格,表格跟PPT的作用不一樣,PPT是為了匯報成果,獲取支持,表格是為了后續(xù)跟進(jìn)落地,解決問題。

當(dāng)然,先把問題整理出來也是為了更好的輸出PPT。

共享文檔可以讓更多人清晰的看到問題,因為匯報的效果比較好,老板給了明確支持,所以匯報后我們將表格發(fā)給了各個產(chǎn)品,與設(shè)計師配合,認(rèn)領(lǐng)問題,給出優(yōu)先級和排期計劃,整個過程推進(jìn)的很順利。



分結(jié)論部分,主要通過用戶體驗地圖去描述用戶路徑,直觀闡述用戶使用過程中的情緒和痛點(diǎn),右邊整理出來了需要重點(diǎn)關(guān)注的一些點(diǎn)。



用戶體驗地圖主要描述的是用戶發(fā)現(xiàn),不一定是問題,屬于啟發(fā)類,可以為后期優(yōu)化方案的輸出提供方向引導(dǎo)。

問題整理則是明確的已知問題描述。









各模塊可以根據(jù)實際情況去描述各自的問題,這里就挑了幾個典型的模塊舉例了一下,就不一一闡述了。

再來說一下,分結(jié)論講完之后,整理的共性問題。先說問題,再說涉及的模塊,體現(xiàn)問題的嚴(yán)重性。



到此,整個PPT就結(jié)束了,匯報完成后,老板就開始給各業(yè)務(wù)線下達(dá)任務(wù)了,就又回到了表格上,我們把之前的問題以界面緯度進(jìn)行整理,跟產(chǎn)品確認(rèn)優(yōu)先級和排期計劃,并與老板就排期計劃進(jìn)行了確認(rèn),然后責(zé)任到人,目前第一輪優(yōu)化方案已經(jīng)在陸續(xù)落地中,整個發(fā)現(xiàn)問題到推進(jìn)落地的過程,還是比較順利的,




來源:站酷
作者:北溟khalessi

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司


B端設(shè)計:人人都能做用戶研究

ui設(shè)計分享達(dá)人

客戶與公司的商務(wù)售前進(jìn)行溝通,客戶的痛點(diǎn)和建議會傳達(dá)給產(chǎn)品經(jīng)理,產(chǎn)品需求明確后,做出原型圖給到設(shè)計師。等設(shè)計師拿到需求的時候,基本已成定局,合不合理、如何優(yōu)化的空間都會比較小了。造成這個現(xiàn)象的根本原因是設(shè)計師能看到的視角范圍有限,B端業(yè)務(wù)場景本身比較專業(yè),難以直接帶入使用者的角色,就比較難取得大的突破了。

如何打破這一僵局呢?答案只有一個,那就是設(shè)計師要主動更前置的加入到產(chǎn)品方案設(shè)計中,深刻理解業(yè)務(wù),為產(chǎn)品升級提供助力。這就涉及到用戶研究了,本文將和大家分享用研的相關(guān)理論基礎(chǔ)和方法。

       

undefined

        

雙鉆設(shè)計模型由英國設(shè)計協(xié)會提出,該設(shè)計模型的核心是:發(fā)現(xiàn)正確的問題和發(fā)現(xiàn)正確的解決方案。

雙鉆模型是一個結(jié)構(gòu)化的設(shè)計方法,被很多設(shè)計師喜愛和使用。

  • 探索/調(diào)研——透析問題(發(fā)散)

  • 定義/合成——聚焦領(lǐng)域(集中)

  • 發(fā)展/構(gòu)思——潛在問題(發(fā)散)

  • 傳達(dá)/實現(xiàn)——實施方案(集中)


       

undefined


       


實際工作中用到雙鉆模型會有一些變體,舉個例子:

下圖是對阿里內(nèi)部款移動運(yùn)維產(chǎn)品的分析,分析其從0-1的方向探索和從1-1.5的發(fā)展歷程:

       

       


下圖是曾經(jīng)在一個設(shè)計講座中,滴滴CDX 一位設(shè)計師的分享,她把雙鉆模型利用到設(shè)計的研究和輸出階段,個人感覺此模型的使用場景也很貼切。

       

       


不僅僅是在完整的一個項目中,在單一的某個階段雙鉆模型也是理念很好的承載容器。在每一個“確定”前后,都有用研的身影。


       

       

undefined

         

用研旨在通過實驗和觀察結(jié)合的研究方法來提高產(chǎn)品的可用性,指導(dǎo)產(chǎn)品的設(shè)計、開發(fā)和改進(jìn)。重點(diǎn)是通過觀察技術(shù)、任務(wù)分析和其他反饋方法來了解用戶的行為、需求和動機(jī)。

       

undefined

       

             

在獲取后臺數(shù)據(jù)之后,我們會分析為什么留存、為什么流失、為什么買這個不買那個,

設(shè)計師認(rèn)為很棒的新功能,真的是用戶想要的嗎?用戶真的會用嗎?

觀察數(shù)據(jù)只是一種手段,而非結(jié)果。當(dāng)一個頁面中出現(xiàn)值很低的功能時,我們不能直接判斷他就是不重要的,也可能是因為視覺上太弱或者交互操作不方便引起的。只有做用戶研究才可以真正了解用戶的行為背后的原因,真正的動機(jī)。

       

undefined

       


如上圖,是一個紅包發(fā)放頁面的設(shè)計前后對比,從數(shù)據(jù)中了解到使用優(yōu)惠券的用戶不到30%,埋點(diǎn)發(fā)現(xiàn)大多都點(diǎn)擊了返回,用戶沒有按照期望的路徑走,調(diào)研發(fā)現(xiàn)操作路徑不清晰,沒有形成閉環(huán)。由此可見,發(fā)現(xiàn)問題時,先埋點(diǎn)細(xì)化問題——再分析問題——結(jié)合用戶研究,提出優(yōu)化方案,才能真正發(fā)現(xiàn)問題解決問題。


       undefined       


產(chǎn)品的發(fā)展周期分為產(chǎn)品概念期、設(shè)計開發(fā)期、宣傳推廣期、平穩(wěn)發(fā)展期和產(chǎn)品衰退期五個階段,在每個階段都有相對應(yīng)的用戶研究測試可以做。

              


               

對應(yīng)上文的產(chǎn)品發(fā)展周期可以做的用戶測試,我們要找到相對應(yīng)的人群:

       

undefined

       

最后就是將用戶研究進(jìn)行落地了,如何讓用戶研究達(dá)到預(yù)期的目的和效果呢?可以在開始前的準(zhǔn)備階段問問自己如下的問題:

       

       



接下來我們看看到實際落地環(huán)節(jié),有哪些用戶研究的類型可以做以及怎么去做。

               

桌面研究

桌面研究又叫“文案研究”,指不進(jìn)行一手資料的實地研究和收集,而是通過電腦,雜志,書籍,文檔,互聯(lián)網(wǎng)搜索等現(xiàn)有二手資料進(jìn)行分析和研究的方法。

       

       

完整的桌面研究分為以下五個步驟:

       

undefined

       

在需求細(xì)分階段,可以用到SWOT 分析、波特五力模型PEST分析、波士頓矩陣等模型

       

undefined

       

收集數(shù)據(jù)通常可以從內(nèi)部數(shù)據(jù)和外部數(shù)據(jù)來源廣泛獲取然后結(jié)合分析。

內(nèi)部數(shù)據(jù)來源:市場營銷數(shù)據(jù)、產(chǎn)品后臺數(shù)據(jù)、其他相關(guān)報告等。

外部數(shù)據(jù)來源:政府部門、國際組織、行業(yè)協(xié)會、專門調(diào)研機(jī)構(gòu)、聯(lián)合服務(wù)公司、其他大眾傳播媒介、商會、銀行等金融機(jī)構(gòu)、官方和民間信息機(jī)構(gòu)等。

      

       

       

undefined

       

               

定性研究

定性研究是指通過收集、分析和解釋那些不能被數(shù)量化的信息,來挖掘問題、理解事件現(xiàn)象、分析人類行為與觀點(diǎn)的方法,主要作用是探索“可能性”。

定性研究專注于更小但更集中的樣本,通過非結(jié)構(gòu)詢問和觀察來獲得不能量化的信息。

流程如下:

       

undefined

       

常用的定性研究方法:

我們需要明白訪談適合哪一種項目研究,比如要針對新功能進(jìn)行一次面訪。

接下來我們需要進(jìn)行用戶的招募,因為面訪比較耗費(fèi)時間和精力,所以最好準(zhǔn)備一些禮品,否則很難招募到用戶。招募用戶的渠道可以是產(chǎn)品中投放問卷、社群招募等方式來邀約難度用戶。

用戶訪談環(huán)境,準(zhǔn)備一個安靜的房間,準(zhǔn)備好水、紙、筆、錄像、錄音筆等工具。

整理訪談內(nèi)容,每訪談完一位用戶進(jìn)行一次小結(jié)。

   

           

接下來模擬一次用戶訪談的整個流程:

開場:首先介紹一下自己的情況,并且讓用戶了解這次訪談的目的,建立一個輕松的談話氛圍。

探索:針對研究目的進(jìn)行探索,比如目的是做用戶體驗地圖,了解用戶在使用過程中遇到的問題。

注意:如果直接問平時怎么使用我們的產(chǎn)品,用戶會比較懵。這個時候最好給他一個確定的環(huán)境,比如你能不能演示一下你平時是怎么管理貨源的,這個時候他就明白原來需要我進(jìn)行這樣一個任務(wù)。

觀察:在用戶回答提問和操作演示中,查看用戶碰到了什么難題。比如有超過一半的用戶多次點(diǎn)擊一個按鈕,說明這個按鈕設(shè)計的大小不太合理。

思考:深層次挖掘。比如用戶反饋?zhàn)痔。珜嶋H操作中并沒有瞇著眼或更靠近屏幕,可能原因一是他們本身就把手機(jī)屏幕文字調(diào)為最大,二是信息排布過于密集,效率低,并非因為字小。

         undefined       

定量研究

定量研究是指確定事物某方面量的科學(xué)研究,將問題與現(xiàn)象用數(shù)量來表示,進(jìn)而分析和解釋,從而獲得意義的研究方法。定量研究的數(shù)據(jù)分析,主要作用是回答“多少”的問題。

定量研究的意義:

用一個數(shù)值來表示你產(chǎn)品的可用性。數(shù)值有時比質(zhì)量檢測的結(jié)果和視頻更有說服力(特別是當(dāng)你試圖說服像高管或客戶這樣的人)時。

比較不同的設(shè)計(比如,你的產(chǎn)品的新舊版本,或者是你的產(chǎn)品與競爭對手的產(chǎn)品相比),并且確定你觀察到的差異是否具有統(tǒng)計學(xué)意義,而不是隨機(jī)的。

改進(jìn)用戶體驗權(quán)衡決策。比如,如果預(yù)期的設(shè)計改進(jìn)成本很高,那么它值得做嗎?定量研究方法可以幫助你驗證重新設(shè)計是否值得。

常用的定量研究方法包括:可用性研究、A/B Test、問卷調(diào)查和滿意度調(diào)查。


       undefined

       

             

測試的重點(diǎn)是收集數(shù)據(jù)指標(biāo),比如任務(wù)時間或者成功率,一旦你收集了相對較大的樣本量(大約35個或者更多),你就可以使用它們來跟蹤產(chǎn)品的可用性,或者將其與競爭對手產(chǎn)品的可用性進(jìn)行比較。





               

               

在A/B測試中,團(tuán)隊需要創(chuàng)建同一界面的兩個不同的最新版本,然后將每個版本展示給不同的用戶,用來確定哪個版本的性能更好?;诜治龅膶嶒?,對于決定同一個設(shè)計的不同變體非常有用,并且可以結(jié)束團(tuán)隊關(guān)于哪個版本最好的爭論。


               

              

問卷調(diào)查是一種靈活的用戶研究工具,調(diào)研時可以同時獲得定量和定性的數(shù)據(jù),比如評分、多項選擇題中的答案的比例,再加上開放式問題的答案。你甚至可以把對調(diào)查的定性回答轉(zhuǎn)化為數(shù)字?jǐn)?shù)據(jù)。

問卷的一個優(yōu)點(diǎn)是:可以經(jīng)常將你的調(diào)研結(jié)果與行業(yè)或競爭者的分?jǐn)?shù)進(jìn)行比較,看看你做得怎么樣。即使你創(chuàng)建了自己的自定義問卷,也可以隨時間的推移對自己產(chǎn)品平均分?jǐn)?shù)進(jìn)行追蹤,來監(jiān)控產(chǎn)品的改進(jìn)情況。


               

      

可以根據(jù)你的研究問題進(jìn)行定制,這些方法通常會首先讓參與者接觸到產(chǎn)品(通過向他們展示靜態(tài)圖片或者要求他們使用現(xiàn)場產(chǎn)品或原型)。然后,要求用戶通過從描述性的詞語列表中選擇一個來描述當(dāng)前設(shè)計。

如果你獲取自身目標(biāo)用戶的樣本量足夠大,那么整體趨勢就會顯示出來。例如,你可能會有84%的受訪者將此設(shè)計描述為"最新"。

   

           

明確調(diào)研目的

比如這次改版用戶對新版本的滿意度怎么樣。只有確定了目標(biāo),你的問卷才是有價值的。

回收數(shù)量

因子分析法要求調(diào)查數(shù)量是調(diào)查問卷問題數(shù)量的5-10倍,因此,如果調(diào)查問卷中共有20個問題,那么調(diào)查樣本數(shù)量可以大概確定為100~200個,有效回收樣本30份即可。

問題順序的基本原則

往前放:

  1. 熟悉的問題

  2. 簡單的問題

  3. 引起興趣的問題

往后放:

  1. 開放式的問題

  2. 個人背景資料

題目的設(shè)計技巧

簡潔明確:

?你用了多久的Google map?(?)

?你第一次使用Google map是什么時候?(?)

這兩個問題看似類似,但是當(dāng)用戶在思考的時候,第一個問題顯然會思考更多的時間,用戶很可能在想,是想知道我第一次用的時間,還是我用了多久的時間。


中立、無誘導(dǎo)性:

?你喜歡這個功能的設(shè)計嗎?(?)

?請您對這個功能的滿意程度進(jìn)行一個打分,最低1分最高5分?(?)

避免使用帶有引導(dǎo)性的問題,問用戶是否喜歡、是否滿意,這樣通常用戶都會偏向于回答喜歡。

設(shè)置選項時,要做到:

       

       


定量分析的結(jié)果多以數(shù)據(jù)、模式、圖形等來表達(dá)。

       

       

前沿研究

?眼動追蹤,英文Eye Tracking,是指通過測量眼睛的注視點(diǎn)的位置或者眼球相對頭部的運(yùn)動而實現(xiàn)對眼球運(yùn)動的追蹤。

眼動儀是一種能夠跟蹤測量眼球位置及眼球運(yùn)動信息的一種設(shè)備,在視覺系統(tǒng)、心理學(xué)、認(rèn)知語言學(xué)的研究中有廣泛的應(yīng)用。

               

常用分析

注視分析——分析注視軌跡、先后順序與流暢度

注視熱點(diǎn)圖——分析最關(guān)注區(qū)域和忽視區(qū)域

興趣區(qū)分析——分析平均注視時間與各興趣區(qū)注視順序

局限

通常需要輔助測試(如定性訪談)來收集更多實驗數(shù)據(jù)

?腦電研究,大腦活動時,腦內(nèi)億萬神經(jīng)元活動引起頭皮表面的電位變化,含有大量心里信息,測量腦電信號可繪制腦電圖,以不同波形反映出來。


       

undefined

       


腦電的本質(zhì)

利用生理探測技術(shù),研究用戶對產(chǎn)品的情緒反應(yīng)

優(yōu)勢

相比傳統(tǒng)調(diào)研,更加能夠排除從眾行為、事后回憶偏差、社會贊許效應(yīng)等的干擾

       

undefined

文章來源:站酷   作者:愛吃炸雞的SHS

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

想要引導(dǎo)用戶行為轉(zhuǎn)化,設(shè)計師必須深刻理解這 4 個認(rèn)知心理學(xué)理論

ui設(shè)計分享達(dá)人

很多網(wǎng)站在短時間內(nèi)就取得了巨大的進(jìn)步 —— 那些過去十年里最知名的品牌網(wǎng)站,與第一次迭代相比發(fā)生了很大的變化,這令人感到無比驚訝。 


網(wǎng)站最初用于商業(yè)目的時,人們并沒有過多地關(guān)注用戶體驗。過去的目的是將盡可能多的內(nèi)容塞進(jìn)一頁里。現(xiàn)在,設(shè)計師們通過大量研究、數(shù)據(jù)挖掘和優(yōu)化等方式來吸引用戶的注意力,同時在正確的時間提供合適的內(nèi)容、功能和選項。 


越來越多的公司正在采用先進(jìn)的心理學(xué)研究,以推動用戶參與更多的互動和付費(fèi)項目,這一現(xiàn)象使得曾經(jīng)被認(rèn)為是一門藝術(shù)的東西轉(zhuǎn)變成了一門科學(xué)。





1997 年的 Apple 網(wǎng)站




說服式設(shè)計


除了許多必要的元素之外,好的設(shè)計總是會考慮到用戶的情感和心理需求。讓我們來看看什么是「說服式設(shè)計」,并探索如何將影響人類行為的心理過程應(yīng)用到設(shè)計中。


“說服” 這個詞往往與操縱、欺騙相關(guān)聯(lián),尤其是對一個善于使用「互聯(lián)網(wǎng)陷阱」的設(shè)計師來說。但是,我們要明確一點(diǎn),說服式設(shè)計中的 “說服” 并不是這個意思。說服式設(shè)計可以使網(wǎng)站易于使用,從而改善用戶體驗。因為,說服式設(shè)計是源于對心理誘因、用戶行為的理解和運(yùn)用。


(互聯(lián)網(wǎng)陷阱:興于 2010 年,由當(dāng)時英國用戶體驗咨詢師 Harry·Brignull 首次提出,指的是網(wǎng)站或應(yīng)用程序采用誘導(dǎo)性或脅迫性設(shè)計,迫使用戶采取或不采取某種行動)


例如,亞馬遜就很好的運(yùn)用了說服式設(shè)計,它通過推薦其他產(chǎn)品和配件,以及展示 “查看過此商品的顧客也購買了某物品” 的選項,引導(dǎo)用戶繼續(xù)購買更多商品。為了快速完成銷售,他們還為購物者提供了一鍵購買商品的功能。




亞馬遜運(yùn)用說服式設(shè)計的案例


我們都一直在花費(fèi)大量時間上網(wǎng),設(shè)計師可以利用從線下行為中學(xué)到的知識來創(chuàng)造更好的用戶體驗。無論你是想優(yōu)化現(xiàn)有網(wǎng)站還是構(gòu)建應(yīng)用程序,說服式設(shè)計都將引導(dǎo)和支持用戶的在線體驗。


設(shè)計師要如何利用心理學(xué)的研究成果來增強(qiáng)其設(shè)計的影響力呢?


理解心理學(xué)原理可以讓你對工作的基本原理有更透徹的理解。它可以:


  • 在缺乏用戶研究的情況下,作為研究和論證的來源 
  • 幫助客戶驗證你的設(shè)計和推理

讓我們來討論一些心理學(xué)理論。




控制感


作為人類,我們天生就需要控制。這可以追溯到我們最本源的需求。在劃分需求層次時,心理學(xué)家亞伯拉罕·馬斯洛(Abraham Maslow)在提出需求層次時,將我們最基本的需求命名為:健康、食物和睡眠。所有這些都需要我們對環(huán)境進(jìn)行一定程度的控制。




馬斯洛需求層次


作為 UI 設(shè)計師,我們需要確保用戶在我們?yōu)樗麄儎?chuàng)建的環(huán)境中擁有積極的體驗。這就意味著需要通過提供合適的工具來增強(qiáng)用戶的能力,以幫助用戶在產(chǎn)品的使用過程中獲得控制感。


“今天,你可以調(diào)整屏幕的亮度,禁用通知,并可以決定手機(jī)是否應(yīng)該同時連接蜂窩數(shù)據(jù)和 Wi-Fi …… 即使這些調(diào)整只會將手機(jī)的電池壽命延長幾分鐘,但這種可以掌控一切的成就感也會使用戶感到溫暖。” -- 用戶體驗顧問 Nadine Kintscher 


我們需要創(chuàng)建能夠平衡功能和視覺吸引力的界面,并將掌控權(quán)提交給用戶,以便他們有更滿意的體驗。


澳大利亞房地產(chǎn)搜索網(wǎng)站 Realestate 成功的做到了這一點(diǎn),它讓用戶能夠根據(jù)自己的偏好篩選所有房產(chǎn),并讓他們可以選擇按不同的標(biāo)準(zhǔn)進(jìn)行排序。





澳大利亞房地產(chǎn)搜索網(wǎng)站 https://www.realestate.com.au


動機(jī)、能力和誘因


我們該如何設(shè)計一種數(shù)字體驗,才能使用戶在適當(dāng)?shù)臅r候進(jìn)行所需的行為?這需要了解一個簡理論 -- 「福格行為模型」:一個人行為(Behavior)的發(fā)生需要滿足至少三個條件,動機(jī)(Motivation),能力(ability)和誘因(trigger),用公式表示即 B = MAT,這三者必須同時具備,缺少任一條件都不會導(dǎo)致行為的發(fā)生。對于任何試圖實踐勸導(dǎo)心理學(xué)的人來說都是理想的選擇。理論表明,一個行為得以發(fā)生,行為者首先需要有進(jìn)行此行為的動機(jī)和操作此行為的能力,接著,如果他們有充足的動機(jī)和能力來實施既定行為,他們就會在被誘導(dǎo)時進(jìn)行此行為,預(yù)期的行為就會發(fā)生。


(福格行為模型:由斯坦福大學(xué)「說服技術(shù)研究實驗室」Persuasive Technology Lab 創(chuàng)始人 BJ Fogg 研究而來)


動機(jī) -- 人們做出這一行為的原因是什么,做出這一行為的原始動因是什么; 


能力 -- 人們做出此行為需要滿足什么能力,人們是否有條件來完成這個行動或者做這件事; 


觸發(fā) -- 是什么誘發(fā)用戶會做出這個行為,什么因素會導(dǎo)致用戶會完成這個。




福格行為模型(https://behaviormodel.org/)


尼爾·埃亞爾(Nir Eyal)和瑞安·胡佛(Ryan Hoover)合著的書籍《上癮》中曾提到過 福格行為模型,揭示了很多讓用戶形成習(xí)慣,甚至“上癮”的互聯(lián)網(wǎng)產(chǎn)品服務(wù)背后的基本設(shè)計原理,告訴你怎樣打造一款讓用戶欲罷不能的產(chǎn)品。作者根據(jù)自己多年的研究、咨詢及實際經(jīng)驗,提出了新穎而實用的 「上癮模型」(Hook Model),即通過四個方面來養(yǎng)成用戶的使用習(xí)慣。通過連續(xù)的“上癮循環(huán)”,讓用戶成為“回頭客”,進(jìn)而實現(xiàn)循環(huán)消費(fèi)的終極目標(biāo),而不是依賴高昂的廣告投入或泛濫粗暴的信息傳播。




上癮模型


一個很好的例子是 TurboTax,在《為心靈設(shè)計:勸導(dǎo)式設(shè)計的七個心理學(xué)原則》一書中討論過。


即使交稅不會使我們感到開心,我們?nèi)杂泻軓?qiáng)的動力來報稅。然而,與其他所有國家一樣,美國的稅收制度過于復(fù)雜,難以理解。TurboTax 在書中提到,使用戶能夠通過詢問基本問題更輕松地完成納稅,可以有效的提高用戶的納稅能力。在 TurboTax 的設(shè)計中,他舍棄了冗長的文檔,相反,創(chuàng)建了一個工作流,使用戶可以進(jìn)行簡單的逐步操作。最終便捷的操作方式會成為誘因,使用戶愿意嘗試在線提交稅款。




TurboTax 設(shè)計的報稅系統(tǒng)


用戶有充足的動機(jī)和能力,同時又具備誘因,三個要素完美結(jié)合的情況可能會讓人感到過于理想或不自然。事實上,其中某一因素占比多也沒關(guān)系。發(fā)微博就是一個很好的例子,沒有什么重要事情的話,發(fā)微博的動機(jī)可能很低,大多都是瀏覽;但觸發(fā)因素隨時都可能出現(xiàn),提醒你可以開始行動了,可能是一個轉(zhuǎn)發(fā)抽獎的活動、可能是朋友正好生日;同時,發(fā)微博的操作非常便捷,用戶具備能力隨時都可以發(fā)布。


作為設(shè)計師,我們可以使用該理論來檢查是否為用戶建立了足夠的動機(jī)和能力,并提供誘因來引發(fā)他們的行為。


  • 動機(jī)為某人提供了從事這項工作的理由 
  • 能力為某人提供了完成任務(wù)的機(jī)會 
  • 誘因存在于我們的環(huán)境或大腦中,并促使某人做某事

以上兩種理論(控制感,以及 動機(jī)、能力和誘因)都需要進(jìn)一步的研究,它們在設(shè)計界面時非常有用。


或者,有一些更簡單的心理學(xué)理論,不需要較復(fù)雜的研究,即可用到你的設(shè)計中,比如 稀缺 和 害怕錯過(FOMO -- Fear of Missing Out)的概念。




亞馬遜在商品上增加 “只剩下 1 件存貨” 強(qiáng)調(diào)庫存不足,使用 FOMO 加強(qiáng)緊迫感






吸引注意力


幾十年來,心理學(xué)家一直對人們保持注意力的能力不斷下降而感到困擾。


眼動追蹤已經(jīng)存在一段時間了,它主要用于測量用戶注視某一點(diǎn)的位置和持續(xù)時間。研究表明,互聯(lián)網(wǎng)的平均注意力持續(xù)時間不到幾秒鐘,用戶會立即做出有關(guān)網(wǎng)站的決定,如果不適合,就會離開。




數(shù)據(jù)驅(qū)動的設(shè)計(https://www.eyequant.com)


EyeQuant 將這一想法向前推進(jìn)了一步,利用眼球追蹤數(shù)據(jù)構(gòu)建了一種預(yù)測算法。你無需自己進(jìn)行眼動測試,而是將設(shè)計上傳到他們的網(wǎng)站,他們會告訴你用戶在使用你的網(wǎng)站時關(guān)注點(diǎn)在哪些地方。


他們找了德國的參與者,并利用這些參與者建立了一個龐大的數(shù)據(jù)庫,該數(shù)據(jù)庫包含了大量吸引用戶注意力的內(nèi)容和不吸引用戶注意的內(nèi)容。研究發(fā)現(xiàn),高對比度色彩比較容易吸引用戶,表情和粗體的文字也是如此。


眼動追蹤軟件可能很昂貴。取而代之的是,諸如 Sumo Heat Maps 的在線分析軟件,可用于顯示訪問者單擊的內(nèi)容和位置,以及吸引最多注意力的內(nèi)容。然而,請記住,雖然我們可能會抓住大腦的注意力,但我們也有可能會把用戶從更重要的事情上拉走。


使用眼動追蹤或熱力圖可以使設(shè)計人員立即獲得有關(guān)其設(shè)計的客觀反饋。作為設(shè)計師,它可以用作用戶體驗想法的驗證,并為你的設(shè)計決策提供數(shù)據(jù),允許你通過 A / B 測試來優(yōu)化設(shè)計。




眼動追蹤可獲得用戶行為的客觀反饋




模仿欲


你是否曾經(jīng)注意到人類天生會有模仿他人的欲望?一個人的欲望也會促成他人的欲望。這種理論是由勒內(nèi)·吉拉德(Rene Girard)提出的,理論認(rèn)為,如果某人表現(xiàn)出對某件物品的渴望,你也會渴望得到這件物品。廣告商就是利用這一方式促成人們對某物的渴望,顯然,廣告成功的激發(fā)了人們更多的欲望。


你我都是模仿生物。Darren Bridger 的《神經(jīng)設(shè)計》一書就探索了這一理論,研究發(fā)現(xiàn)我們有一個鏡像神經(jīng)元系統(tǒng)。換句話說,僅看到某人執(zhí)行某項操作(例如撿起一件物品)就會使你的大腦反映出該活動。




模仿一詞的英文解釋


模仿欲理論意味著如果我們看到別人擁有某樣?xùn)|西,我們便也想擁有 —— 這一點(diǎn)可以用 「社會認(rèn)同」(或從眾心理)來解釋。


一種社會認(rèn)同是來自 “用戶的認(rèn)同”,就像是推薦。推薦之所以有效,是因為它們來自擁有共同愿望和價值觀的人。例如,專門為企業(yè)家服務(wù)的媒體 Foundr 不僅使用用戶的聲音,而且還顯示人臉,從而觸發(fā)了鏡像神經(jīng)元系統(tǒng)。




Foundr 專門為企業(yè)家提供媒體服務(wù)


另一種社會認(rèn)同是來自 “專家的認(rèn)同”,即你的產(chǎn)品獲得了專家的認(rèn)可,例如你的產(chǎn)品被 Twitter 提及、新聞引用、甚至有大 V 專門為你的產(chǎn)品撰文。Google 在其最新的 Pixel 手機(jī)廣告系列中使用了這種技巧,用 Google 自身的品牌影響力作為最強(qiáng)力的背書推薦這款手機(jī)。




僅僅強(qiáng)調(diào)這款手機(jī)是 Google 出品,無須多言




當(dāng)今及未來的設(shè)計心理學(xué)


對于設(shè)計師來說,現(xiàn)在是一個令人激動的好時代 -- 有豐富的資源和研究可以支撐我們的工作。


設(shè)計趨勢正在向體感,語音、虛擬現(xiàn)實(VR)、增強(qiáng)現(xiàn)實(AR)、混合現(xiàn)實(MR)和物聯(lián)網(wǎng)(IoT)轉(zhuǎn)變;隨著這些交互技術(shù)的不斷發(fā)展,人們需要以更直觀的方式來使用界面。


我們將迎來許多新的設(shè)計機(jī)會,而心理學(xué)將在其中發(fā)揮著重要的作用。


下一個我們?nèi)粘I钪信c設(shè)備交互方式的重大轉(zhuǎn)變,將從觸屏變?yōu)槭褂媚X電波交互。該技術(shù)已經(jīng)可用,使人們能夠通過思想直接控制其設(shè)備。


隨著我們逐漸接近人們的真實想法,心理學(xué)在設(shè)計中的應(yīng)用以及設(shè)計師的道德責(zé)任將發(fā)揮越來越重要的作用。


除了使用分析法、用戶研究、用戶體驗地圖和其他方法來幫助做出設(shè)計決策并迭代產(chǎn)品外,設(shè)計師還應(yīng)考慮使用上述四種有說服力的設(shè)計方法來完善其 “技巧工具包”。


有說服力的設(shè)計并不邪惡。它是一種工具,并且像任何工具一樣,它可能被濫用。然而,通過正確的研究和深思熟慮的應(yīng)用,它可以成為任何設(shè)計師工具箱中的寶貴補(bǔ)充。

文章來源:站酷   作者:三分設(shè)

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

需求太碎?如何在小業(yè)務(wù)中提煉價值

ui設(shè)計分享達(dá)人

背景


在日常工作中,身為設(shè)計師的我們時常有這樣的情形:身兼多個業(yè)務(wù),但大部分的業(yè)務(wù)都是小業(yè)務(wù),業(yè)務(wù)方給的需求也是七零八碎的小需求居多。面對該情況設(shè)計師有時會覺得沒有一點(diǎn)挑戰(zhàn),限制自己對美好設(shè)計,給用戶創(chuàng)造美好生活的想法,總想要去搞個大新聞。


不妨回頭看看小業(yè)務(wù),自己真的對它了解了么?這里提供一種視角,小業(yè)務(wù)也可以做大視野的事。通過一個小業(yè)務(wù)的案例改版,講述如何從小項目中出發(fā)。


曾經(jīng)負(fù)責(zé)過一個基礎(chǔ)模塊支持:設(shè)計詳情。它是設(shè)計師用酷家樂設(shè)計工具設(shè)計方案產(chǎn)出的載體。該模塊在之前有過改版迭代,迭代對業(yè)務(wù)目標(biāo)(留存活躍)的提升并不理想。那從哪里入手呢?


方法流程
  1. 理清業(yè)務(wù)目標(biāo)

  2. 挖掘用戶需求場景

  3. 梳理產(chǎn)品功能

  4. 拆解設(shè)計目標(biāo)

  5. 設(shè)計策略實施

  6. 驗證迭代



一、理清小業(yè)務(wù)的業(yè)務(wù)目標(biāo)


相對于大業(yè)務(wù)(例如網(wǎng)站改版),小業(yè)務(wù)因為簡單,其業(yè)務(wù)目標(biāo)界定常容易被忽略。在日常設(shè)計中常會遇見設(shè)計師在不知道業(yè)務(wù)目標(biāo)是什么、目標(biāo)模糊、目標(biāo)不正確的情況,直接從梳理小業(yè)務(wù)具備哪些功能直接入手,分析下現(xiàn)狀問題后開始制定設(shè)計策略,這往往會導(dǎo)致設(shè)計出現(xiàn)解決不了關(guān)鍵問題、出現(xiàn)偏差情況。產(chǎn)品功能本身只是滿足用戶需求和實現(xiàn)業(yè)務(wù)目標(biāo)的服務(wù)載體,只是策略的表象。理清小業(yè)務(wù)所承擔(dān)的業(yè)務(wù)目標(biāo)是前提,那么如何理清呢?



理清業(yè)務(wù)目標(biāo)

小業(yè)務(wù)目標(biāo)來自大業(yè)務(wù)目標(biāo),對大業(yè)務(wù)的業(yè)務(wù)目標(biāo)進(jìn)行一級級向下拆解后,即可獲得小業(yè)務(wù)對應(yīng)的目標(biāo)。目標(biāo)拆解需要遵循MECE原則,拆解方法包含:二分法、過程法、要素法、公式法、矩陣法。(tips:目標(biāo)的拆解有一定難度,)



Dapp設(shè)計詳情為例,在酷家樂大增長業(yè)務(wù)背景下,用戶活躍和用戶留存為核心的目標(biāo),設(shè)計詳情處于設(shè)計路徑的一個節(jié)點(diǎn),拆解得到設(shè)計詳情的5個主要業(yè)務(wù)目標(biāo):

  • 設(shè)計詳情-用戶周活躍

  • 設(shè)計詳情-新用戶留存

  • 設(shè)計詳情-老用戶留存

  • 設(shè)計詳情-內(nèi)容投稿數(shù)

  • 設(shè)計詳情-內(nèi)容分享數(shù)



業(yè)務(wù)目標(biāo)可分為2個類別:

  • 第一類別:符合用戶意愿,如活躍、留存,在滿足用戶需求的情況下可以自然達(dá)成;

  • 第二類別:不符合用戶意愿,如內(nèi)容投稿、內(nèi)容分享,用戶不太會主動去完成,需要去創(chuàng)造動機(jī),激勵用戶進(jìn)行。



二、挖掘小業(yè)務(wù)關(guān)聯(lián)的用戶需求場景


有小業(yè)務(wù)的業(yè)務(wù)目標(biāo)后,第二步就需要給用戶提供價值滿足用戶需求,以此來實現(xiàn)業(yè)務(wù)目標(biāo)的達(dá)成。梳理清楚小業(yè)務(wù)服務(wù)了哪些用戶需求是提供價值的前提,那如何獲取用戶需求場景呢?



1. 用戶訪談——獲取相關(guān)用戶需求場景

用戶需求場景可以幫我們清晰了解到用戶使用產(chǎn)品的原因。用戶需求場景可以一句話進(jìn)行界定,包含四個關(guān)鍵要素,其中需求本身最為核心,需要挖掘出當(dāng)前訴求和其背后的潛在需求。

“在【某環(huán)境下】,【某用戶】做了【某事】來滿足【某需求】”



用戶訪談為了挖掘到更為深入用戶需求場景的要素信息。以設(shè)計師入行年限分組(1-3年、3-5年、5年以上),每次分組訪談2-3個設(shè)計師。梳理出設(shè)計詳情相關(guān)的8個需求場景



訪談信息整合如下





2. 規(guī)整用戶需求場景

在業(yè)務(wù)訪談中獲取的場景往往都是碎片化的,碎片化場景對設(shè)計指導(dǎo)容易出現(xiàn)偏差,需要把場景結(jié)構(gòu)化,為后續(xù)的方案設(shè)計提供依據(jù)。我把獲得的場景按照設(shè)計師設(shè)計流程進(jìn)行規(guī)整,按設(shè)計前、設(shè)計中、設(shè)計后三個階段進(jìn)行劃分。



以上梳理了設(shè)計詳情相關(guān)的用戶需求場景,再來看原設(shè)計詳情只基礎(chǔ)滿足了資料管理和方案展示的2個單一場景,在設(shè)計師的整個設(shè)計流程中只占了一部分。從設(shè)計層面來看,該2個場景局限在方案設(shè)計大場景中,設(shè)計更多做的是對其方案設(shè)計操作的體驗優(yōu)化,在原有較好操作體驗的現(xiàn)狀下,其對給用戶創(chuàng)造價值上沒有很大增量。再從以上業(yè)務(wù)目標(biāo)來看,2個單一場景很難去促使用戶對內(nèi)容進(jìn)行分享和投稿。



三、梳理產(chǎn)品功能矩陣


在理清小業(yè)務(wù)的業(yè)務(wù)目標(biāo)和需求場景后,下一步就是按照場景去梳理產(chǎn)品能力。


1. 小業(yè)務(wù)功能現(xiàn)狀分析

老版app設(shè)計詳情的功能進(jìn)行初步的現(xiàn)狀分析,設(shè)計詳情包含渲染、圖文編輯、圖片管理、投稿、分享5個主要功能。從需求場景來看,多個場景無法實現(xiàn),如營銷、談單;從業(yè)務(wù)目標(biāo)來看,通過當(dāng)前功能有較大的優(yōu)化空間,如當(dāng)前投稿很難讓用戶知道投稿有什么價值。




2. 產(chǎn)品能力梳理

分析現(xiàn)狀發(fā)現(xiàn)功能不足以支撐用戶需求場景,有獲取功能2個方向:

  1. 挖掘現(xiàn)有能力:可以擴(kuò)大梳理范圍,從小業(yè)務(wù)所在的上一級業(yè)務(wù)到整個平臺,一級級往上梳理場景對應(yīng)的現(xiàn)有功能。

  2. 打造新能力:圍繞場景,打造出新的功能



挖掘平臺上現(xiàn)有能力,可對業(yè)務(wù)的能力價值最大化利用,與其他業(yè)務(wù)形成互通,實現(xiàn)1+1大于2的業(yè)務(wù)價值。亦可圍繞場景打造新能力,可反推產(chǎn)品去發(fā)倔新功能。

以下是設(shè)計詳情涉及所有場景的產(chǎn)品功能矩陣,從平臺獲取到了很多全新的能力,以及對原有的能力進(jìn)行了能力拓展。




四、拆解每個場景的設(shè)計目標(biāo)和策略


在梳理出產(chǎn)品能力后,需要通過設(shè)計策略把產(chǎn)品能力有效組織起來,讓用戶快速感知快速上手使用。設(shè)計策略推導(dǎo)自設(shè)計目標(biāo),那如何得到設(shè)計目標(biāo)?


基于用戶需求場景將行為事件拆分,提煉行為事件再推導(dǎo)出設(shè)計目標(biāo),再基于設(shè)計目標(biāo)給出設(shè)計策略。



Dapp設(shè)計詳情受制于移動端能力,只涉及設(shè)計詳情中5個相關(guān)場景,其設(shè)計目標(biāo)和設(shè)計策略的拆解結(jié)果如下



拆解出設(shè)計目標(biāo)后,基于目標(biāo)分析產(chǎn)品現(xiàn)狀得到存在的設(shè)計問題。為什么要基于目標(biāo)分析現(xiàn)狀?首先需要明確什么是問題,問題是導(dǎo)致目標(biāo)和現(xiàn)狀不一致的原因。只有明確了目標(biāo)才可以理性分析與現(xiàn)狀存在多少問題。在日常中時常看到設(shè)計師會直接得到問題,很多情況是默認(rèn)假設(shè)了一個預(yù)設(shè)目標(biāo),但這目標(biāo)得到不嚴(yán)謹(jǐn)、不全面,容易導(dǎo)致得到的問題本身也出現(xiàn)偏差。設(shè)計策略基于設(shè)計目標(biāo)或問題得出,其最終都來自設(shè)計目標(biāo)。



對老版Dapp設(shè)計詳情現(xiàn)狀進(jìn)行了分析,得到了問題




五、設(shè)計策略的落地


在上一步得到設(shè)計策略后,圍繞著設(shè)計策略是設(shè)計方案。本段將不全部展開說明,只選3個關(guān)鍵點(diǎn)講述設(shè)計方案的思考


1. 設(shè)計詳情框架的設(shè)計

Dapp設(shè)計詳情涉及5個場景的承載及產(chǎn)品功能繁多,設(shè)計三步思考:

第一步:簡化功能認(rèn)知,對功能結(jié)構(gòu)化,以場景的維度重組織功能,并以場景打造功能集合的認(rèn)知,建立場景能力區(qū);

第二步:梳理場景共同涉及的內(nèi)容,作為聯(lián)系的載體承載場景的放置,設(shè)計詳情中展示態(tài)的方案涉及到了5個場景中的4個場景

第三步:提取場景中即時性和高優(yōu)先級功能,打造快捷功能區(qū)

框架如下



建立框架后,填充具體的能力和內(nèi)容。如場景入口放置于底部,并根據(jù)場景優(yōu)先級做了主次的區(qū)分。


設(shè)計詳情框架建立后,打造細(xì)分場景中的設(shè)計


2. 營銷獲客場景設(shè)計

營銷場景的設(shè)計,將營銷組成拆分為可營銷內(nèi)容、營銷的渠道、渠道內(nèi)容展現(xiàn)三大類,就可以清晰去梳理出現(xiàn)有的功能,以及可從內(nèi)容、渠道各自去拓展挖掘。內(nèi)容和渠道清晰后,再傳達(dá)各渠道提供的價值激勵用戶去觸發(fā)行為。




3. 談單場景設(shè)計

談單場景關(guān)鍵在方案詳情上,談單面對不同情況,存在多種內(nèi)容形式去展示方案。在上面內(nèi)容梳理中最主要是3個內(nèi)容:圖文方案、全屋漫游、渲染圖冊。在方案詳情中,頭部承載了全屋漫游、圖冊,如圖文方案過于繁瑣可直接點(diǎn)擊全屋漫游圖進(jìn)行講解,亦可點(diǎn)擊封面進(jìn)入圖冊直接圖片說明。圖文詳情加上了房間切換的導(dǎo)航,可快速切換到需要講解的地方。




六、上線驗證


上線后數(shù)據(jù)平穩(wěn)后觀測,設(shè)計詳情的周活提升了89%,每個場景下的功能數(shù)據(jù)都得到顯著的提升(tips:有部分?jǐn)?shù)據(jù)因技術(shù)原因沒有采集到)。除了改版了Dapp側(cè)的設(shè)計詳情,后續(xù)對PCweb側(cè)的設(shè)計詳情進(jìn)行迭代,同樣起到不錯的結(jié)果。數(shù)據(jù)的結(jié)果驗證了方法的可行,并起到了積極的效果。




最后的思考小結(jié)


以上是我應(yīng)用這套設(shè)計方法去做了塊小業(yè)務(wù)優(yōu)化,反向推動進(jìn)入產(chǎn)品迭代,上線后取得了不錯的成績。在本次賦能后,對小業(yè)務(wù)中多了一些感悟

  • 小業(yè)務(wù)是大業(yè)務(wù)的縮影,可以作為去賦能大業(yè)務(wù)前沿驗證的實驗田,大概率可以快速驗證自己的想法,即使方向錯了因為小業(yè)務(wù)改動影響面也小

  • 因知識廣度和深度的限制,不是所有設(shè)計師都可以一開始就可以把控大業(yè)務(wù),小業(yè)務(wù)可作為打磨設(shè)計深度專業(yè)度,一些小業(yè)務(wù)的復(fù)雜度并不低于大業(yè)務(wù)

  • 該設(shè)計方法同樣適用于大業(yè)務(wù),但方法是死的,不是所有情況都套用,得需要把握重點(diǎn)靈活應(yīng)用

  • 不要總想著搞個大新聞,在能力未被業(yè)務(wù)方認(rèn)可時,小業(yè)務(wù)的賦能可以成為一個很好的發(fā)聲口

  • 不要輕視小業(yè)務(wù),有可能是你根本還不了解

愛在字里行間:適老化設(shè)計標(biāo)準(zhǔn)研究

ui設(shè)計分享達(dá)人

近些年,得益于經(jīng)濟(jì)和社會的高速發(fā)展,越來越多的中老年人開始嘗試享受移動互聯(lián)網(wǎng)帶來的便捷生活。50歲及以上網(wǎng)民在總網(wǎng)民中的占比已經(jīng)由2015年的9.2%提升至2020年的26.3%,增長接近兩倍。但中老年在融入移動互聯(lián)網(wǎng)時仍面臨諸多困難,是需要重點(diǎn)關(guān)注的弱勢群體。



隨著各類問題在社會輿論中持續(xù)發(fā)酵,國家政策也開始關(guān)注中老年的互聯(lián)網(wǎng)使用體驗,推動各類APP進(jìn)行適老化改造。2020年12月,工信部發(fā)布《互聯(lián)網(wǎng)應(yīng)用適老化及無障礙改造專項行動方案》。2021年3月11日,全國人大發(fā)布《十四五規(guī)劃綱要》,明確提及“加快信息無障礙建設(shè),幫助老年人、殘疾人共享數(shù)字生活”,更是將信息無障礙建設(shè)上升到了國家頂層規(guī)劃的高度。

 

為了更好地服務(wù)中老年人,百度在2021年上線了百度大字版和百度關(guān)懷版APP。對于中老年人來講,視力老化是難以避免的問題。隨著年齡增長,中老年人晶狀體硬化、睫狀肌衰弱,物體不能很好地成像在視網(wǎng)膜上,帶來視覺上分辨物體的敏感度、色彩感、明暗感、空間感的下降。

 

但是對于中老年人而言,手機(jī)APP的字號、行距真的是越大越好嗎?我們首先試圖從現(xiàn)有標(biāo)準(zhǔn)中尋找答案。然而通過梳理,發(fā)現(xiàn)行業(yè)內(nèi)已有標(biāo)準(zhǔn)主要是針對各類殘障人士的,并且是原則性的建議,推薦的字號、行距的理想值過于寬泛,對手機(jī)APP適老化設(shè)計升級的指導(dǎo)意義比較有限。比如W3C發(fā)布的《Web內(nèi)容無障礙指南(WCAG2.1)》,關(guān)于行距的要求是“至少為字體大小的1.5倍”。所以我們通過科學(xué)、嚴(yán)謹(jǐn)?shù)难芯?,制定了一套設(shè)計標(biāo)準(zhǔn),來指導(dǎo)資訊類/內(nèi)容類APP全場景文字排版適老化設(shè)計升級,為中老年用戶帶去字里行間的關(guān)愛和更好的閱讀體驗。


下面就將從研究方法和成果兩個方面做具體介紹。希望能幫助大家掌握相應(yīng)的研究思路,在后續(xù)制定設(shè)計標(biāo)準(zhǔn)時可以快速上手,同時也將此次適老化設(shè)計標(biāo)準(zhǔn)研究的成果與大家分享,為資訊類/內(nèi)容類APP適老化設(shè)計升級提供參照。



///

研究流程與方法:如何通過用戶研究制定一套設(shè)計標(biāo)準(zhǔn)?


| 明確標(biāo)準(zhǔn)的應(yīng)用方向

為了讓一套標(biāo)準(zhǔn)對設(shè)計工作具備實際的指引價值,我們在研究規(guī)劃環(huán)節(jié)充分考慮了設(shè)計經(jīng)驗和迭代需求。用戶研究和設(shè)計師一起對資訊類/內(nèi)容類APP所有涉及文字排版的頁面、模塊進(jìn)行了通盤梳理,確定了12類應(yīng)用方向(即用戶的使用場景)。對于這么多使用場景分別做研究費(fèi)時費(fèi)力,我們選擇通過洞察背后的用戶閱讀模式,把12類應(yīng)用方向收斂為4大類閱讀場景:3類主場景(包括長文閱讀、搜索、概覽閱讀)和1類輔助信息場景。針對主場景,研究中老年用戶理想的字號、行距和粗細(xì)組合;針對輔助信息場景,研究中老年用戶的最小可辨識字號。這樣研究既能覆蓋各類應(yīng)用場景、不同的信息層級,又能更聚焦、更高效。



| 構(gòu)建評估體系

在確定了標(biāo)準(zhǔn)的應(yīng)用方向之后,評估體系的搭建也參考了過往的設(shè)計經(jīng)驗。我們一方面查找并梳理了學(xué)術(shù)界在字號、行距方面的研究成果,另一方面也結(jié)合了百度已有的設(shè)計經(jīng)驗。最終確定了字號、行距、粗細(xì)、顏色四個考察變量在不同研究場景的研究范圍(即自變量選取水平),并綜合主觀體驗指標(biāo)和客觀眼動數(shù)據(jù)指標(biāo)搭建了中老年閱讀體驗的評估體系。其中,主觀體驗指標(biāo)包括關(guān)鍵信息發(fā)現(xiàn)、清晰度、舒適度、滿意度;客觀眼動指標(biāo)包括眨眼頻率、瞳孔直徑變異性和閱讀速度。



| 實驗流程

在實驗中,我們邀請了60位50-70歲中老年用戶參與調(diào)研,通過任務(wù)模擬他們在真實場景的長文閱讀、搜索、概覽閱讀情況,綜合眼動實驗、問卷調(diào)研和訪談方法評估不同字號、行距、粗細(xì)對中老年閱讀體驗的影響,探尋不同場景下最適合的字號、行距、粗細(xì)方式。在實驗過程中,通過SMI-ETG2w眼鏡式眼動儀測量眼動數(shù)據(jù)。




///

研究成果:適老化設(shè)計標(biāo)準(zhǔn)介紹


通過對各類閱讀場景、設(shè)計變量和體驗影響因子的充分分析,本研究形成了一套完備、成體系的適老化設(shè)計標(biāo)準(zhǔn),可用于指引資訊類/閱讀類APP中不同頁面和不同信息層級的適老化設(shè)計改造。



| 主場景理想字號、行距和粗細(xì)的組合

研究結(jié)果明確了資訊類/內(nèi)容類APP對于中老年人在不同場景里任一信息層級的理想字號、行距和粗細(xì)組合。以概覽閱讀場景(Feed列表頁)和長文閱讀場景(圖文落地頁)為例,優(yōu)化前與預(yù)計優(yōu)化后的字號、行距、粗細(xì)組合如下:


概覽閱讀場景


長文閱讀場景


| 輔助信息最小可辨識字號

此外,研究結(jié)果也明確了黑色(1F1F1F)字體的全局最小可辨識字號。以75%中老年用戶可以看清的字號作為最小可辨識字號標(biāo)準(zhǔn),黑色(1F1F1F)最小可辨識字號為36px。

 

此次研究填補(bǔ)了學(xué)術(shù)界和業(yè)界在手機(jī)APP適老化設(shè)計領(lǐng)域的空白。在百度,該套標(biāo)準(zhǔn)已落地百度關(guān)懷版,未來還會在百度大字版和更多為老年人提供服務(wù)的APP上線。面向行業(yè),我們也積極共享研究成果。百度大字版、百度關(guān)懷版運(yùn)營同學(xué)牽頭和老齡產(chǎn)業(yè)協(xié)會合作,設(shè)計師結(jié)合本次研究成果編寫了《移動互聯(lián)網(wǎng)應(yīng)用適老化設(shè)計要求》團(tuán)體標(biāo)準(zhǔn),已經(jīng)于2021年11月10日發(fā)布。希望本次的研究成果能幫助更多資訊類/內(nèi)容類APP完成文字排版的適老化升級,為中老年人帶去更多的關(guān)懷和更好的閱讀體驗,為移動互聯(lián)網(wǎng)行業(yè)的信息無障礙建設(shè)貢獻(xiàn)一份綿薄之力。




文章來源:站酷   作者:百度MEUX
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)

輪播設(shè)計總結(jié)-提高用戶點(diǎn)擊

純純

如果需要設(shè)計一個輪播,我們應(yīng)該考慮哪些因素?如何讓輪播更具有價值?如何讓輪播的體驗更好?如何避免輪播常見的問題。

提到輪播首先可能想到的是廣告,我們經(jīng)常在移動端首頁或網(wǎng)站首頁會看到各式各樣的輪播banner,不管在移動端還是網(wǎng)頁上通常點(diǎn)擊數(shù)據(jù)都是非常差的,本篇文章帶你深入了解banner輪播。

如果需要設(shè)計一個輪播,我們應(yīng)該考慮哪些因素?如何讓輪播更具有價值?如何讓輪播的體驗更好?如何避免輪播常見的問題。

本篇文章通過以下幾點(diǎn)探索輪播的特性,預(yù)計閱讀20分鐘

目錄

1、用戶真的使用輪播嗎

2、輪播的輪換形式

3、輪播的進(jìn)度展示

4、輪播定位

5、輪播的切換

6、對輪播進(jìn)行分類

7、使用縮略圖進(jìn)行預(yù)知

8、輪播異形化

9、輪播時間

10、總結(jié)

一、用戶真的使用輪播嗎

用戶是否對輪播有感知,這個則需要根據(jù)不同的場景進(jìn)行判斷,包括每個產(chǎn)品中的每個輪播對用戶用戶的定位也不相同,常見的應(yīng)用場景品牌曝光、活動營銷、產(chǎn)品展示,每個場景下相關(guān)的數(shù)據(jù)也不相同。

促銷輪播banner

品牌推廣輪播banner


產(chǎn)品介紹輪播banner

同時還有個關(guān)鍵因素,輪播的占比,這里以pc端為例若是產(chǎn)品是以品牌效應(yīng)吸引用戶的,大多輪播是以大的屏幕占比為主通常會占首屏的50%,如果是以營銷、內(nèi)容為主的產(chǎn)品,輪播通常以16:9、7:4的常規(guī)比例進(jìn)行展示。


輪播的頁數(shù)

用戶在使用產(chǎn)品時會默認(rèn)忽略輪播區(qū)域,一般輪播都會有自動輪換機(jī)制,一定時間后自動輪放下一張banner,那么每當(dāng)頁面上進(jìn)行輪播時便會吸引用戶進(jìn)行關(guān)注,效果上會有一定的提升,所以在輪播中第二張第三張的效果往往會比第一張輪播的效果更有效一些。

還有一種用戶比較喜歡關(guān)注輪播過去的banner以此來滿足好奇心。

如果banner是作為內(nèi)容傳播希望用戶通過banner了解內(nèi)容,那么則要避免放在最后一位置,對于用戶而言最后一張輪播路徑過于長,并且用戶很少會手動滑動banner。

國外一家公司在針對輪播中進(jìn)行了相關(guān)的研究測試,隨著頁數(shù)的增加用戶的點(diǎn)擊逐步下降。

那么如果想讓產(chǎn)品中的輪播更具有效果,則需要根據(jù)不同的場景設(shè)定策略達(dá)到目的。

二、輪播的輪換形式

不管在移動端還是手機(jī)端,輪播都有各種交互形式和尺寸,以pc為例在交互上會多樣化一些,常見的幾種則是通過滾輪滑動、通過點(diǎn)擊切換兩種。

如下圖某藝術(shù)網(wǎng)站,它則是通過鼠標(biāo)滾輪進(jìn)行切換輪播banner,并且banner的占比也是鋪滿首屏,這種輪播形式適合一些品牌、產(chǎn)品宣傳等相關(guān)的網(wǎng)站以此來突出產(chǎn)品的亮點(diǎn),同時也符合用戶目標(biāo)。

在看下面這個醫(yī)美網(wǎng)站它的切換方式則是通過鼠標(biāo)點(diǎn)擊進(jìn)行切換,并且占比也是鋪滿首屏,在醫(yī)美領(lǐng)域用戶更關(guān)注美感,而輪播形態(tài)也是符合用戶的心理預(yù)期更加沉浸美觀。

而在移動端輪播的形式就比較統(tǒng)一,大多都是自動播放+手指滑動進(jìn)行切換。

三、輪播的進(jìn)度展示

在網(wǎng)頁中輪播都會有當(dāng)前的定位點(diǎn),許多用戶的習(xí)慣是點(diǎn)擊進(jìn)度條進(jìn)行切換banner這樣能夠更快的達(dá)到目標(biāo),不用一張一張切換,但是在有些產(chǎn)品中會忽略這一點(diǎn),設(shè)計中會做的非常小導(dǎo)致用戶在點(diǎn)擊上可用性不太友好,如下圖中的banenr進(jìn)度點(diǎn)設(shè)計上過于小導(dǎo)致點(diǎn)擊上有些阻礙。

如以下網(wǎng)站去除進(jìn)度定位的方式,通過縮略圖預(yù)覽來告知用戶下一個banner的內(nèi)容,空白區(qū)域也可以添加縮略圖引導(dǎo)介紹等關(guān)鍵信息,幫助用戶提前預(yù)知在體驗上相對較好。

以下國外某網(wǎng)站在進(jìn)度定位的設(shè)計上采用了標(biāo)簽文案方式進(jìn)行設(shè)計,能夠幫助用戶更加全局的了解banner內(nèi)容


四、輪播的定位

定位主要是用來指示當(dāng)前輪播的進(jìn)度,像上圖中講的便于用戶更加全局的觀看banner的張數(shù)和當(dāng)前進(jìn)度。

以下網(wǎng)站的設(shè)計中則把定位與進(jìn)度相結(jié)合,進(jìn)度條展示該banner預(yù)計多久會切換下一張,對于自動切換的產(chǎn)品輪播這個更直觀的進(jìn)度展示體驗上相對較好。

以下是某個國外網(wǎng)站,不管是pc還是移動端都在輪播底部添加了水平條,告知用戶當(dāng)前位置

隨著市場上產(chǎn)品同質(zhì)化嚴(yán)重,產(chǎn)品的競爭力也更依賴體驗,在下圖中的數(shù)據(jù)可視化的網(wǎng)站上,在進(jìn)度條上就利用了產(chǎn)品的特性以餅狀圖的形式進(jìn)行展示。

五、輪播的切換

在剛才上面舉的例子中很多優(yōu)秀的網(wǎng)站在設(shè)計上都很有創(chuàng)新性,但是需要注意一個點(diǎn),在輪播中不只有自動播放,還需要考慮用戶手動切換,因為在實際用戶瀏覽中可能會對產(chǎn)品的播放時間達(dá)不到預(yù)期,此時則會使用手動切換,除去可點(diǎn)擊的進(jìn)度點(diǎn),還需要上一張和下一張的入口切換。


在此基礎(chǔ)上需要注意,在處于最后一張banner時,下一張切換還能不能點(diǎn)擊,第一張時上一張切換還能不能切換,這個取決于產(chǎn)品特性和輪播張數(shù),如果輪播張數(shù)過小的話則需要進(jìn)行循環(huán)播放,如果過多的頁數(shù)則第一步和最后一步不可點(diǎn)擊。

切換的距離和位置

上一張和下一張的距離遠(yuǎn)近取決于banner的大小,如果輪播banner占比較大時則需要考慮用戶的操作時長,距離越短時間越快,為了避免用戶操作失誤在相對較近的切換按鈕則需要在視覺上做的比較突出,便于用戶尋找。

如果banner占比在首屏中占比較少的情況下則需要讓切換按鈕的間距拉大,保持視覺平衡,因為小區(qū)域banner用戶能夠更加全局的觀看,在使用上不會猶豫。

反觀移動端在輪播中除了展示banner進(jìn)度外很少展示切換按鈕,移動端更加依賴手勢交互。

六、對輪播進(jìn)行分類

當(dāng)輪播banner過多時利用標(biāo)簽進(jìn)行分類,用戶通過點(diǎn)擊標(biāo)簽進(jìn)行查看相關(guān)的輪播組合。

此方式更適合一些電商平臺、新聞網(wǎng)站這種內(nèi)容過多的產(chǎn)品


如下圖國外社交媒體網(wǎng)站則使用了標(biāo)簽進(jìn)行分類,此處提一句輪播不僅限于首屏banner。他的用處可落地在各個場景。

七、使用縮略圖進(jìn)行預(yù)知

在banner首屏中,顯示的內(nèi)容越多,越能激發(fā)用戶進(jìn)行點(diǎn)擊,像上面講過的農(nóng)業(yè)產(chǎn)品網(wǎng)站就使用下一張預(yù)覽圖的形式進(jìn)行展示,當(dāng)然不僅局限于這種形式,如下圖中的餐飲網(wǎng)站把所有的輪播banner展示給用戶觀看。

相對于縮放圖,圖標(biāo)展示效果上也較好,空間占用更少,使用這種方式需要謹(jǐn)慎,對圖標(biāo)的識別性要求較高,我印象中能夠使用的這種方法的網(wǎng)站是蘋果官網(wǎng),讓產(chǎn)品抽象化展示。

在移動端也存在這種設(shè)計手法,但是基于分辨率原因移動端的縮略圖展示過少,最常見的如下圖中的馬蜂窩和企鵝電競。

八、輪播個性化

輪播最大的缺陷則是像剛開始講的用戶會默認(rèn)為廣告,對此可以使用個性化設(shè)計突破用戶心理障礙,使輪播banner更具備親和力。

如下圖中的數(shù)碼科技網(wǎng)站,利用產(chǎn)品與背景的結(jié)合營造出一種功能性的展示。

再例如下圖中蘋果官網(wǎng)入口,結(jié)合百度的定制化功能在大搜中進(jìn)行個性化處理,把常規(guī)的banner輪播以功能卡片形式進(jìn)行展示,同時卡片承載產(chǎn)品動畫引導(dǎo)用戶進(jìn)行點(diǎn)擊。

蘋果官網(wǎng)進(jìn)入后隨意點(diǎn)擊產(chǎn)品介紹頁后會發(fā)現(xiàn),蘋果把輪播結(jié)合鼠標(biāo)滾輪營造沉浸式觀看,每個屏效內(nèi)都展示產(chǎn)品一個功能特點(diǎn),打破傳統(tǒng)banner的展現(xiàn)形式。


九、自動輪播時間

自動播放的輪播會根據(jù)用戶的耐心和用戶的訴求進(jìn)行調(diào)整優(yōu)先級,如我們平常使用產(chǎn)品時會忽略banner廣告,我們會更加關(guān)注移動中的東西,特別是在移動端上通常是banner進(jìn)行輪播時才會關(guān)注。

谷歌設(shè)計團(tuán)隊曾對banner輪播的時間進(jìn)行測試,測試結(jié)果得出5s-7s的輪播時間最佳,在這個時間內(nèi)用戶有足夠的時間對輪播banner上的產(chǎn)品內(nèi)容進(jìn)行了解。

如下圖谷歌商店的輪播時間設(shè)定在6s。

同時還需要注意,在自動播放的過程中如果用戶鼠標(biāo)hover上去后,則需要判定播放暫定,避免用戶錯過感興趣的內(nèi)容。


十、總結(jié)

本文從輪播的樣式、特性、用戶對輪播的認(rèn)知等多方面的介紹,在實際產(chǎn)品中輪播有很多可用性上的問題存在,我們在設(shè)計中則需要根據(jù)自己產(chǎn)品的特性、用戶群體特點(diǎn)等多維度去思考適合什么樣的輪播形式。

文章來源:UI中國   作者:愛吃貓的魚____
分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)




7個基礎(chǔ)的用戶體驗設(shè)計細(xì)節(jié)

seo達(dá)人


1、專注于20%

maggelato

你可曾聽說過80/20法則?簡而言之,80%的用戶通常只會使用你網(wǎng)站內(nèi)容和功能的20%,絕大多數(shù)的用戶只是在掃視網(wǎng)站內(nèi)容,并且只會挑選真正感興趣的瀏覽。

同時這也意味著,剩余的20%就相當(dāng)重要了。大多數(shù)的點(diǎn)擊將源自于這一區(qū)域,它也是近乎完美的內(nèi)容和互動區(qū)域。

你可以借助數(shù)據(jù)分析來決定哪個部分是整個網(wǎng)站最被關(guān)注的那20%。對于剛剛上線的網(wǎng)站,這個數(shù)據(jù)搜集的過程可能長達(dá)好幾周,隨后再進(jìn)行調(diào)整。

當(dāng)然,你也可以通過引導(dǎo)將用戶引流到你希望用戶去的那20%的區(qū)域。借助視覺引導(dǎo)和行動召喚設(shè)計來引流,用有趣和有意思的設(shè)計來營造令人有興趣的區(qū)域,讓他們樂于點(diǎn)擊,從而達(dá)到目的。

2、架構(gòu)式的思維

goldhill

設(shè)計一個網(wǎng)站和搭建一所房子其實差不多。首先,它需要一個堅實的基礎(chǔ),然后是能夠承載所有內(nèi)容的框架,做好后要好好裝飾一下。同樣的思維模式可以套用在網(wǎng)站的設(shè)計上。

更重要的是,你并不需要為此創(chuàng)造出過去從未在框架中出現(xiàn)過的東西,換言之,框架內(nèi)的素材、組件和我們常見的并無二致。就像導(dǎo)航設(shè)計模式一樣,現(xiàn)在的設(shè)計都趨于一致,因為這樣的導(dǎo)航好用。

當(dāng)網(wǎng)站的整體結(jié)構(gòu)搭建起來之后,可以將相同的思路套用到內(nèi)容體系的構(gòu)建上來。主要的正文內(nèi)容是整個網(wǎng)站內(nèi)容的基礎(chǔ),輔以吸引人的標(biāo)題、圖片,配合上其他的次要元素,整個內(nèi)容體系可以很快搭建起來。

3、不要要求太多

assos

現(xiàn)如今的世界可以說是由數(shù)據(jù)所驅(qū)動,越來越多的應(yīng)用開始要求用戶注冊,要用戶提供更多的權(quán)限,更多的信息,以期為用戶提供更加個性化的體驗。但是從體驗的角度上來看,要盡量規(guī)避這一點(diǎn)。

站在用戶的角度稍加思考你就明白了。找到一個令你感興趣的炫酷網(wǎng)站,如果要深入了解更多內(nèi)容,就需要內(nèi)容,而如果要注冊的話,網(wǎng)站卻需要你提供下面10個類型的信息:姓名、郵件、國家、地區(qū)、城市、電話、Twitter權(quán)限、個人網(wǎng)站、工作職位、以及如何發(fā)現(xiàn)這個網(wǎng)站的。

那么接下來,你會怎么做?絕大多數(shù)的用戶會直接轉(zhuǎn)身離開,這個注冊信息填寫起來太費(fèi)勁,體驗太差了。

那么,如果你當(dāng)你點(diǎn)擊注冊的時候,只需要一鍵從Facebook或者twitter授權(quán)即可,那么你會不會立刻點(diǎn)擊呢?至少從目前已有的數(shù)據(jù)來看,絕大多數(shù)的用戶會這么選擇。

4、令人愉悅的微交互

evernote-1

可能很多時候你都沒注意到,你和各種微交互進(jìn)行的互動一直都存在。

·谷歌日歷彈出框提示你每周例會要開始了
·短信提醒
·午睡的鬧鐘
·微博上的新粉絲和轉(zhuǎn)發(fā)提醒

這樣的例子我們可以連續(xù)不斷地說上一個小時。這些帶有微交互的提醒和動作會推動用戶進(jìn)行下一步操作,帶來愉悅的體驗,它們不能設(shè)計得非常醒目,但是又需要適當(dāng)?shù)匚脩糇⒁狻?

這些有趣的微交互的加入讓用戶從中獲得好處。而你需要思考的是,有哪些東西是你的網(wǎng)站或者APP當(dāng)中,用戶想要立刻知道和獲得、想被提醒的?

5、甚至幼兒都能輕松使用

statusshop

如果要給小孩子設(shè)計產(chǎn)品,那么它應(yīng)該是什么樣子?你可能會更專注于色彩的使用,讓每一個區(qū)塊都可以輕松點(diǎn)擊,明顯的標(biāo)簽,加上拼圖式的連接方式。

所以,當(dāng)我們在設(shè)計網(wǎng)站或者APP的時候,我們會說這個產(chǎn)品要足夠易用,那么怎么才算得上“足夠”呢?讓小孩子都可以輕松使用,這就叫足夠易用。換句話說,即使是不經(jīng)常使用網(wǎng)站和APP的成人,也不會存在明顯的使用障礙。

超大的設(shè)計元素和標(biāo)簽是設(shè)計的關(guān)鍵因素。這些視覺線索是幫助用戶引導(dǎo)用戶的核心,是整體體驗設(shè)計中最重要的部分。大膽的色彩選擇,會鼓勵用戶點(diǎn)擊和探索。

如果它足夠易用,用戶會繼續(xù)嘗試使用和探索。而難于理解操作不便的導(dǎo)航自然會被用戶所嫌棄。如果網(wǎng)站包含太過復(fù)雜的媒體和內(nèi)容,那么不妨從一個設(shè)計簡單的首頁開始,幾個簡單的導(dǎo)航點(diǎn)擊將用戶引導(dǎo)到對應(yīng)的位置。在深入到更復(fù)雜的頁面之前,用梳理清晰、簡單明了的分頁讓用戶感到舒適,這是帶來好的瀏覽體驗的不錯解決方案。

6、輕拍(Tap)還是點(diǎn)擊(Click)?

espns

這一點(diǎn)要說的并不是設(shè)計問題,而是一個常見的開發(fā)代碼的問題。雖然Tap和Click兩者都能在點(diǎn)擊的時候觸發(fā),但是在移動端網(wǎng)頁上使用Click事件 的時候,會有200ms 到300ms 的延遲,所以在移動端上最好替換為Tap事件。在進(jìn)行響應(yīng)式網(wǎng)頁設(shè)計的時候,一個事件從頭用到尾的錯誤出現(xiàn)得很普遍,但是有太多的移動端網(wǎng)頁在這樣的設(shè)計下會有明顯延遲,更惡劣的情況是無法識別,這樣會直接損害到整個頁面的易用性和功能本身。

此外,移動端上使用 Tap事件的時候,它所對應(yīng)的按鈕應(yīng)當(dāng)相對更大一些,便于小屏上進(jìn)行交互。

7、像用戶一樣思考

justact

我們一直在說:“像用戶一樣思考”。但是實際的情況往往是,我們很難走出設(shè)計者和開發(fā)者的思維方式,因為我們的思維方式壓根就和用戶不同,面對每一個交互、每一個元素的下意識反應(yīng)是不一樣的。

所以,還是同設(shè)計圈、開發(fā)圈和產(chǎn)品圈以外的人去聊聊吧,看看他們對于網(wǎng)站和APP的真實反應(yīng)到底是怎樣的。你可能會在觀察中發(fā)現(xiàn),他們對于產(chǎn)品、對于交互、對于界面的反應(yīng)和你的預(yù)期完全不同。將用戶的真實反饋記錄下來,反饋給項目組,這樣可以幫你打造更好的用戶體驗,創(chuàng)造更優(yōu)秀的產(chǎn)品。

原文地址:designshack

譯文地址:優(yōu)設(shè)

作者:Carrie Cousins

優(yōu)設(shè)譯者:@陳子木

轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》7個基礎(chǔ)的用戶體驗設(shè)計細(xì)節(jié)

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司



如何促使用戶更快的決策

ui設(shè)計分享達(dá)人

設(shè)計師不僅僅只是個畫圖仔,而更應(yīng)該懂得用戶心理學(xué),明白用戶行為背后的動機(jī)。利用這幾個用戶心理學(xué),我們將可以促使用戶更快的做出決策。


一、損失規(guī)避

人們獲得損失時產(chǎn)生的痛苦遠(yuǎn)大于獲得收益時所帶來的快樂!心理學(xué)家把這種對損失更加敏感的底層心里狀態(tài)叫做損失規(guī)避。


其實簡單來說就是,相比于得到,你更在意失去。


舉個例子:你今天在上班的路上撿到100元錢,心里很高興。可是一不小心把錢弄丟了,那么你就會很沮喪了,甚至一天的心情都會很不好,雖然說這錢本來就不屬于你的。


我們可以用損失規(guī)避系數(shù)來描述人們對不同東西損失規(guī)避的程度。對于一般的消費(fèi)品,損失規(guī)避系數(shù)大概是2,也就是說,人們需要得到2倍于原先的價格才肯放棄已經(jīng)擁有的商品。


損失規(guī)避系數(shù)因不同的事物而不同,如果涉及到情感等方面的因素,損失規(guī)避系數(shù)就會大大上升,一旦涉及到健康和生命等問題,損失規(guī)避系數(shù)就成百上千地增長了。這就解釋了在商場買衣服你會跟銷售員討價還價,但在醫(yī)院你絕對不敢跟醫(yī)生討價還價。


我們習(xí)慣于自然地規(guī)避風(fēng)險,因而更加辛苦地工作只為避免一些微不足道的損失,而不愿冒險去爭取更大的回報。規(guī)避損失是人的本性。這也解釋了為什么大多數(shù)人只能上班,而創(chuàng)業(yè)者始終只是極少數(shù)。


那么,有哪些利用了損失規(guī)避心理的案例?


a.強(qiáng)調(diào)“失去”,而非“得到”


因為人的心理對損失更在意,因此要告訴用戶如果不買,會受到什么樣的損失。


對比以下兩個文案:

達(dá)芬奇畫作世界巡展,邀請來感受世界傳世名畫的魅力。

達(dá)芬奇畫作世界巡展,如果不來,你將失去一生中唯一一次和世界傳世名畫邂逅的機(jī)會。


你覺得哪種方式更吸引你?


b.天貓雙11紅包

每年的雙11活動,天貓都會提前給你發(fā)一堆的紅包,雖然數(shù)額不大。但規(guī)定只能在雙11當(dāng)天使用。這時你就會心甘情愿的在當(dāng)天剁手,因為如果你不買,就會白白浪費(fèi)掉這些紅包。而人的心理對損失是很抗拒的。



c.以舊換新

京東家電類目有個以舊換新的服務(wù),以前我一直搞不明白這樣做的目的何在?現(xiàn)在才知道,原來這也是利用了人的損失規(guī)避心理。


消費(fèi)者想買新電器,但是家里已經(jīng)有一個,直接丟掉會感覺浪費(fèi)。那商家搞以舊換新,用舊家電抵扣一部分錢,這比直接給打折優(yōu)惠,對消費(fèi)者來說更有誘惑力。因為你收購了客戶的二手電器,讓他感覺自己的舊家電沒有白白浪費(fèi)了。



二、錨定效應(yīng)


所謂“錨定效應(yīng)”是指人們在做決定或下判斷前,容易受到之前的信息影響,該信息猶如一個沉重的錨,沉到了海底,讓你的思維以該信息為基準(zhǔn),在它的一定范圍內(nèi)做判斷。


簡單來說,就是當(dāng)你在作決策之前,需要一個參考,貨比多家。比如:你去菜市場買菜,你第一次買這個菜,你根本就不知道這個價格是否合理,這時候你不好決定是否買,你就會去多問幾家。從而內(nèi)心會形成對這個菜的價格錨定。


生活中錨定效應(yīng)無處不在:

在線下超市我們會經(jīng)??吹缴唐方ㄗh零售價100元,而實際售價78元。各大電商平臺也采用了這種價格的對比效果,加快用戶的決策。


在線下的服裝店商家非常喜歡開一個天價然后等你還價,開價150元,到最后居然能還到50元,這水分……


你去婚紗攝影店咨詢,開始銷售員會給一個比較高的價格,然后后面會自主動給你減掉一千,這樣很容易讓消費(fèi)都產(chǎn)生購買的沖動。


你去電腦城買電腦,當(dāng)你買完電腦后,這時銷售員給你推薦電腦保護(hù)套,你很容易會購買,因為你會想這么貴的電腦都買了, 這幾十塊錢的保護(hù)套自然就不在話下了。但如果直接叫你買保護(hù)套的話,你就沒那么容易產(chǎn)生購買行為。


還有奶茶店價格菜單也是經(jīng)過設(shè)計的,通常會采用降序排列,這種排列方式更有利于顧客購買。因為用戶看到的第一個貴的價格會形成錨,往下價格越便宜,消費(fèi)者更容易決策。


三、羊群效應(yīng)

在一群羊前面橫放一根木棍,第一只羊跳了過去,第二只、第三只也會跟著跳過去,這時候,如果把那根木棍撤走,盡管攔路的棍子已經(jīng)不在了,后面的羊,走到這里,仍然會像前面的羊一樣,向上跳一下。這樣的群體盲目跟從就是所謂的“羊群效應(yīng)”,也稱為“從眾心理”


這些動物的行為看起來愚蠢搞笑,可是看看我們自己,又何嘗不是如此呢?從眾是一種普遍的社會心理和行為現(xiàn)象,在很多情況下,人們都會表現(xiàn)出人云亦云的特征。


“羊群效應(yīng)”是由個人理性行為導(dǎo)致的集體的非理性行為。由于信息的不對稱,人們并不能得到做出判斷所需的全部信息,那么在無法作出準(zhǔn)確的判斷時,其他人的選擇自然就是最合理的參照。這并非全無道理的,因為很多情況下,多數(shù)人的做法往往都是正確的,參考他們的做法可以最大限度的降低個人的決策風(fēng)險。這也是群體盲目背后的根本原因。


但是,凡事有利就有弊。跟隨大眾的做法,有時候很容易被誤導(dǎo)。比如謠言的傳播就是個最大的反例。


我想以下場景你一定不會陌生,在一個廣場上,有商家正在進(jìn)行著某種商品的促銷活動,人們隨著廣播的聲音慢慢湊了過去,到后來簡直到了里三層外三層的地步。但就在這個時候,經(jīng)過的人反而有了更大的興致,越是后來的人越是想擠到人群中去,甚至他并不知道里面究竟是在進(jìn)行什么活動。這是典型的“羊群效應(yīng)”。


經(jīng)常網(wǎng)購用戶都明白,我們很容易受到商品銷量的影響,我們的潛意識里會認(rèn)為銷量越好,商品質(zhì)量越好,因此會傾向于選擇銷量高的商品。

羊群效應(yīng)還表現(xiàn)在對權(quán)威的順從,人們決策時所盲從的對象由大多數(shù)平常人變成了某一個具有一定權(quán)威性的人。

人們在做出某種選擇都是在追求安全感,降低風(fēng)險,而跟隨權(quán)威人士給出的意見和建議,會讓人們安全感倍增。權(quán)威之所以稱為權(quán)威,就是因為在某個領(lǐng)域他們是最專業(yè)的。因此人們更愿意相信權(quán)威人士的意見,甚至愿意改變自己的選擇去迎合權(quán)威的意見。


在設(shè)計工作中,嘗試借用權(quán)威的號召力,達(dá)到對用戶消費(fèi)決策的影響。經(jīng)常逛淘寶的人就知道,很多商家在商品詳情頁為了證明產(chǎn)品質(zhì)量合格,經(jīng)常會提供某權(quán)威機(jī)構(gòu)的檢測認(rèn)證,或借助某個明星的推薦。因而會對其觀點(diǎn)或者意見表現(xiàn)得非常順從。


四、稀缺效應(yīng)

在消費(fèi)心理學(xué)的研究中,研究者把人們由于商品稀缺而引起的購買行為現(xiàn)象,稱之為“稀缺效應(yīng)”。


“稀缺效應(yīng)”在我們的日常生活中太常見了,比如在線下逛商場時,經(jīng)??梢钥吹缴碳蚁矚g用“一次性大甩賣”、“限量100件”等廣告語來引誘顧客,以吸引顧客進(jìn)店購買。這些廣告語會給顧客造成這各種假象:如果現(xiàn)在不買下次再也沒有這樣難得的機(jī)會了。


俗話說,物以稀為貴,人們對于稀缺物品會表現(xiàn)出強(qiáng)烈的占有欲望,這在人們的心理需求層次中,屬于較高的層次。越是不容易得到的東西,人們越傾向于得到,以此實現(xiàn)在精神層面上的價值滿足。


在這種心理因素的驅(qū)使下,人們對于供不應(yīng)求的東西,總是會給予特別的關(guān)注,同時也愿意支付更高的代價。某種商品一旦限量供應(yīng),那么其本身也就具備了稀缺的屬性。


限量供應(yīng)的銷售原則,也吊足了顧客的胃口,很多顧客完全落入稀缺效應(yīng)的心理戰(zhàn)術(shù)之中,即便當(dāng)天買不到,第二天也必定會早早前來購買。


比如天貓慣用的搶紅包伎倆,吸引了一波又一波的少女們?nèi)ク偪竦膿?,它會設(shè)定在某一個時間點(diǎn),限量提供一些紅包,如果沒有搶到。那么用戶第二天還會來搶的,這就提高了用戶的粘性。


五、緊迫感

為了加快用戶下單的決策時間,我們需要給給用戶造成一種緊迫感的氛圍,告訴客戶剩余的時間不多了。如果不立即行動,將錯過這次優(yōu)惠活動。他們常使用一個很顯眼的倒計時,時時刻刻在提醒用戶所剩的時間已經(jīng)不多了,再不剁手就沒機(jī)會了!天貓雙11活動就是利用了這樣的用戶心理成功讓廣大女同胞們不知不覺中剁手了。


稀缺性與緊迫感可以結(jié)合著使用,你要明明白白的告訴用戶,如果錯過了就會損失什么。如果立即行動,可以獲得什么好處。兩者之間強(qiáng)烈地對比可以吸引用戶立即購買。


比如“今天下單可以立減500元!” “錯過今天,你要多付出500元,而且沒有贈品”等等。


如果沒有制造稀缺性和緊迫感,用戶就會拖延,猶豫甚至放棄購買。客戶會認(rèn)為再過一天來買也是可以的。這時你需要斬釘截鐵地告訴用戶,產(chǎn)品、贈品、特價是有限的。


比如:“產(chǎn)品僅限10件啦,再不買就錯過了!”,“贈品只有30件,剛才張三又搶走了一件,馬上就搶光了!”,“特價產(chǎn)品只剩25件啦,賣完這25件就恢復(fù)原價?!蓖ㄟ^人為的制造稀缺性與客戶哄搶的氣勢,促使客戶做出立即購買的決定,從而提升轉(zhuǎn)化率。

文章來源:站酷   作者:CdzhcHappy

分享此文一切功德,皆悉回向給文章原作者及眾讀者.


免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

日歷

鏈接

個人資料

存檔