首頁

設(shè)計交互-用戶體驗之心得篇

前端達人

1.為什么用戶使用對齊標(biāo)簽填寫表單的速度更快


想象一下,一個用戶已經(jīng)準(zhǔn)備好注冊您的站點了。他們會進入你的表格并輸入他們的信息。字段標(biāo)簽對齊的方式會影響用戶填寫表單的速度。


你是想給用戶提舒適體驗,還是想給他們一個麻煩?

如果您想讓他們的體驗更快更容易,請使用輸入框上面的字段對齊標(biāo)簽.或輸入框內(nèi)的對齊標(biāo)簽?zāi)J健?


與左對齊和右對齊的標(biāo)簽相比,頂部對齊或內(nèi)部左對齊標(biāo)簽填寫起來更快、更容易。這是因為標(biāo)簽只需要有一半多的視覺固定物。

頂部對齊標(biāo)簽還允許用戶以一個可視方向向下移動輸入框。左對齊和右對齊的標(biāo)簽需要兩個視覺指示才能填寫。


頂部對齊標(biāo)簽的唯一缺點是,它們可以使表單變得很長。但是現(xiàn)在用戶滾動的頻率越來越高,所以這不是問題。

通過減少字段之間的空白,可以減少表單長度。您還可以將表單拆分成多個頁面,以使表單更短。


頂部和左/右對齊標(biāo)簽之間的差異很明顯。頂部對齊標(biāo)簽更容易在眼睛上,并使表格更容易填寫。雖然他們可以使表單更長,

但用戶將從完成表單所需的時間和精力的減少中獲益更多。


如果頂部對齊的標(biāo)簽?zāi)軌蚪o用戶提供更好的表單體驗,那么它是值得采用的。設(shè)計師應(yīng)該更多地考慮他們的字段標(biāo)簽對齊。

它可以區(qū)別于用戶填寫表單還是放棄表單。


2.為什么對話框中的“確認(rèn)”按鈕在右邊工作得最好


有很多設(shè)計經(jīng)常會問我一些關(guān)于按鈕上的問題那我今天也來獻丑講以下我對按鈕的一些理解,這段時間針對這些東西研究了很久,在對話框中放置“確認(rèn)”和“取消”按鈕的位置?!按_認(rèn)”按鈕是完成任務(wù)的主要操作。


“取消”按鈕是在沒有完成任務(wù)的情況下將用戶帶回原來屏幕的輔助動作。

根據(jù)它們的功能,最好的順序是什么?“確定”按鈕應(yīng)該出現(xiàn)在“取消”按鈕之前還是之后?


許多人提到了以下幾點平臺約定作為答案。雖然這似乎是一個解決問題的方法,但實際上并非如此。它不能回答哪個位置對用戶更好,以及為什么。為了一致性而遵循平臺慣例的建議是不夠好的,給設(shè)計師留下了空手而歸的機會。


“一致性”是設(shè)計師們常用的一個詞。不深入考慮用戶面臨的設(shè)計問題也是一個流行的借口。如果一個人不知道為什么會存在,遵循設(shè)計慣例有什么好處呢?


如果某個設(shè)計約定對用戶有害呢?設(shè)計師應(yīng)該為了一致性而盲目地遵循嗎?糟糕的設(shè)計實踐是否應(yīng)該持續(xù)下去,因為設(shè)計師們希望通過平臺設(shè)計的一致性來解決每一個問題?


今天,有一些平臺設(shè)計約定被廣泛使用,因為它們是為用戶工作的。但這里的要點是,平臺設(shè)計的一致性永遠(yuǎn)不應(yīng)該讓設(shè)計師滿意,因為這是做某事的唯一理由。理解為什么您應(yīng)該以一種方式而不是另一種方式來設(shè)計您的用戶界面的原因是關(guān)鍵。


按鈕放置事項


人們可能會說,讓你的動作按鈕突出給它更多的視覺重量和一個清晰清晰的標(biāo)簽比它的位置更重要。雖然動作按鈕的視覺重量和標(biāo)簽是一個重要的設(shè)計方面需要考慮,但它不是唯一的方面。


只關(guān)注一個設(shè)計方面而不是其他方面是一個粗心的設(shè)計師的行為。一絲不茍的設(shè)計師會思考每個設(shè)計方面是如何影響用戶的。

對于設(shè)計師來說,最難搞清楚的是主動作和次要動作是如何放置的。這就是為什么“確認(rèn)”/“取消”按鈕的爭論在設(shè)計師中如此流行的原因。


為什么‘確認(rèn)’按鈕在右邊工作得最好?


當(dāng)你通過了平臺慣例的爭論后,你會質(zhì)疑哪個位置最有效。您可以通過分析設(shè)計如何影響用戶來解決這個問題。


減少視覺固定


一些設(shè)計師認(rèn)為,在第二個操作之前將主操作放在左邊對用戶更好,因為它更接近,因此,點擊的時間更少。


這是有意義的,但您不能忽視這樣一個事實,即用戶在選擇要采取的操作之前將查看他們的所有選項。

這意味著大多數(shù)用戶不會盲目地單擊主操作按鈕而不查看它旁邊的輔助操作按鈕。


他們將首先看到左邊的主要動作,然后查看右邊的次要動作。然后,他們會把眼睛移回主要的動作,點擊它。這將在多個方向上總共創(chuàng)建三個視覺固定。


將其與放置在對話框右側(cè)的主操作和放置在左側(cè)的輔助操作進行比較。用戶從第二個動作的眼睛開始,然后將眼睛移到主動作上單擊按鈕。這在一個方向上總共創(chuàng)建了兩個視覺固定,給用戶一個更快的視覺流。


用戶只關(guān)注每個按鈕一次,并在主動作按鈕上結(jié)束。將主操作放在左邊可能會使用戶更容易到達,但是當(dāng)您從用戶的思維過程和視覺固定的角度來看速度時,將主操作放置在對話框的右側(cè)實際上更快。



用戶點擊或操作按鈕的心里狀態(tài)


當(dāng)用戶單擊輔助操作按鈕時,他們期望應(yīng)用程序什么也不做,并將它們帶回到原來的屏幕。因此,“取消”按鈕的功能類似于“后退”按鈕。


當(dāng)用戶單擊主操作按鈕時,他們期望應(yīng)用程序執(zhí)行按鈕所述的操作,并將其轉(zhuǎn)到下一個屏幕。因此,“確認(rèn)”按鈕的功能類似于“下一頁”按鈕。將輔助動作按鈕放置在左側(cè),主動作按鈕在右邊映射到用戶可以期待的‘后退’和‘下一步’按鈕功能。


它類似于分頁按鈕的放置方式。將用戶帶到下一頁的按鈕位于右側(cè),將用戶帶回其早期頁面的按鈕位于左側(cè)。這個按鈕的放置工作是因為它映射到用戶從左到右的閱讀和導(dǎo)航方向,其中右是前進的方向,左是后退的方向。


對話框中的“確認(rèn)”和“取消”按鈕應(yīng)該遵循類似的交互模式,因為它們的功能類似于分頁按鈕。

不僅如此,在中國用戶習(xí)慣了左右方向的模式。

將您的主要操作放在右側(cè),將次要操作放置在左側(cè),將使您的對話框按鈕更容易、更直觀地為用戶所理解。


為用戶提供更有效的視覺流暢度


將您的按鈕放置在終端區(qū)域可以讓用戶看到他們最后需要采取的主要操作。這不僅改善了視覺流,也改善了任務(wù)流。

用戶在掃描時不會跳過主動作按鈕。當(dāng)他們通過時,他們的眼睛就會盯著它,所以他們可以立刻點擊它。


按鈕放置在中間還是放置在左右兩邊?


另一個問題是設(shè)計師經(jīng)常想知道他們是應(yīng)該把按鈕放在角落里,還是把它們放在一起。當(dāng)您將主操作和輔助操作放置在對話框

的角中時,它將很好地映射到左右方向。但是,由于‘取消’和‘確認(rèn)’按鈕不是導(dǎo)航按鈕,所以沒有必要遵循方向映射。有時它弊大于利。

如果應(yīng)用程序要執(zhí)行用戶無法撤消的關(guān)鍵操作,那么用戶可以看到“取消”按鈕和“確定”按鈕是很重要的。在這種情況下,“取消”按鈕的功能可能像“先前”按鈕,但更重要的是,因為它充當(dāng)安全按鈕,以防止任何更改。


在左下角放置“取消”按鈕的危險是,由于兩個按鈕之間的視覺分隔很大,它可能導(dǎo)致用戶忽略它。將“取消”按鈕和“確定”按鈕放在一起,可以使用戶更容易在一次凝視中查看和比較這兩個動作,從而選擇最佳的操作和點擊。

我們經(jīng)常卸載軟件的時候一不留神就會點錯,或者是我們在裝某一個軟件的時候全家桶一擁而上。所以在不同場景當(dāng)中我們所用的按鈕形態(tài)也是不一致的。


3.下拉菜單加圖標(biāo)和不加圖標(biāo)的區(qū)分在哪里!


大的側(cè)邊欄菜單甚至?xí)層脩艨雌饋砗懿浑p我們應(yīng)當(dāng)如何解決這一個問題。

其原因是設(shè)計人師在做顯示菜單項的時候會出現(xiàn)的問題。

當(dāng)它們都有相同的視覺處理時,菜單項很難進行識別與區(qū)分。

如果不修復(fù)這個問題,會導(dǎo)致用戶放慢他的瀏覽速度從而導(dǎo)致用戶的流失在大的層面來講,小的層面來講閱讀不爽導(dǎo)致關(guān)閉頁面。


菜單欄沒有主次之分

當(dāng)您對菜單項進行全文本或全圖標(biāo)處理時,問題就會出現(xiàn).當(dāng)用戶掃描他們想要的項目時,他們的注意力分散在菜單周圍。這是因為沒有層次來吸引他們的注意力。


通過將用戶的注意力引導(dǎo)到您的主要項目,使您的菜單可掃描。

要實現(xiàn)這一點,我們可以看下面設(shè)計形式來強調(diào)重點內(nèi)容


主項圖標(biāo)


與其在每個菜單項上放置圖標(biāo),還不如將其放置在主菜單項上。視覺強調(diào)首先將用戶的注意力引導(dǎo)到這些項目上。

次要項目上缺少圖標(biāo),這使得它們能夠得到其余的關(guān)注。


略大一點的圖標(biāo)


如果要使所有圖標(biāo)處,請稍微放大需要突出的圖標(biāo)。

稍微的增大會使視覺效果有很大的不同,同時字形更容易辨認(rèn),每一行的線高也會增加。讓整個看起來更加有空間感一些。

讓用戶瀏覽閱讀起來也會更加舒暢一些。

4.在按鈕上避免顏色對比度錯誤


想象一下,當(dāng)用戶在您的界面上遇到一對按鈕時,他們猶豫不決。

用戶向左看,然后向右看,比較它們。經(jīng)過一番思考,他們做出了選擇。

他們的選擇按鈕做出決定,而且不確定,因為你的按鈕沒有層次結(jié)構(gòu)。


不要使用相同的顏色輪廓按鈕


甚多的設(shè)計師設(shè)通常喜歡使用主按鈕的輪廓形狀作為輔助按鈕。按鈕樣式看起來可能不一樣,但還不夠。

他們?nèi)匀粫偁?,因為他們的顏色對比度相等?

為了給主按鈕更多的注意,削弱輪廓按鈕的對比度。與其使用重顏色,不如使用它的色調(diào)。你可以通過降低重顏色的亮度和飽和度來制作。確保對比度足夠高,以達到主要的按鈕突出性。


不要使用黑色輔助按鈕


設(shè)計師的另一個趨勢是把第二個按鈕變成黑色。他們認(rèn)為,使用中性的顏色,它是不會競爭的。然而,黑色按鈕更為突出,因為它有一個更高的對比度。



不要使用黑色,而要使用重顏色的色調(diào),以使輔助按鈕比主按鈕更弱。要做到這一點,增加亮度和降低飽和水平。



不要在主色調(diào)上使用淺色


將彩色按鈕與中性灰色配對并不總是意味著彩色按鈕會得到更多的關(guān)注。如果主按鈕的顏色太輕,則中性輔助按鈕將更加突出


要避免這一錯誤,請選擇不太明亮的顏色。明亮的顏色可能看起來很有吸引力,但它與白色背景或文字的對比不太好。在主按鈕上使用更暗的顏色,這樣第二個按鈕就不會引起注意。




5.復(fù)選框的設(shè)計與使用方式哪種更好


在界面上使用復(fù)選框之前,您必須先問自己幾個問題。復(fù)選框是否是在此上下文中使用的正確組件?如果是的話,最有用的顯示方式是什么?


許多設(shè)計師沒有問這些問題,自動使用復(fù)選框,沒有太多的事先考慮。

因此,它們通過在錯誤的上下文中使用它們而產(chǎn)生可用性問題。


不僅如此,許多設(shè)計人員都很懶惰,期望前端寫成默認(rèn)選框完成這項工作,而不是

自定義復(fù)選框設(shè)計。但問題是,前端默認(rèn)的復(fù)選框不能完成這項工作,因為它們的

可用性很差。


大多數(shù)設(shè)計人員在復(fù)選框上會犯的幾個可用性錯誤,這些錯誤會破壞用戶體驗。



單選與重復(fù)的選擇


在設(shè)計當(dāng)中我們經(jīng)常會遇到做選擇性的勾選,往往很多設(shè)計師會犯的一些錯誤問題和選擇障礙問題。

通過更大的目標(biāo)來明確與用戶進行選擇更為明確

我們設(shè)計單選框的時候這不是秘密而是讓用戶做出選擇,復(fù)選框是很難點擊,因為他們的小擊中目標(biāo)。


設(shè)計師通常會讓標(biāo)簽點擊,但如果它不是直觀的,那也于事無補。


通過將復(fù)選框轉(zhuǎn)換為復(fù)選標(biāo)記,您可以為用戶提供更大的命中目標(biāo)和更清晰的交互提示。



重復(fù)物品的重量及數(shù)量選擇


有時你可能想提供不同數(shù)量的商品。使用多個復(fù)選框復(fù)制它會產(chǎn)生更多的文本來讀取,并使界面混亂,且讓用戶難以進行選擇。對于增量輸入更改使用數(shù)字選擇器一次顯示該項會為更好些。


undefined


總結(jié)以上兩點,實際商用應(yīng)用案例如下所示


6.在設(shè)計當(dāng)中我們該如何控制內(nèi)容的突出性與閱讀性


新聞卡片的設(shè)計怎么才能突出信息內(nèi)容


卡片內(nèi)容有幾種文本類型,提供不同的信息功能。讓我們看看基本內(nèi)容卡的文本類型。

首先是眉毛,它是一個明確的詞或短語,用來描述內(nèi)容的主題。

還有一個標(biāo)題,它用一個句子中的幾個單詞告訴用戶內(nèi)容是關(guān)于什么的。

在此之后,就會有一個描述內(nèi)容的正文。

最后,就是時間與操作的按鈕

必須通過確定哪些文本類型對用戶更重要,從而為您的卡片新聞建立文本層次結(jié)構(gòu)。

此內(nèi)容新聞卡片的適當(dāng)文本層次結(jié)構(gòu)為:

1.眉毛-可以是時間,可以是新聞分類

2.標(biāo)題-最重要的是,因為它描述的內(nèi)容最快。

3.正文-包含一個描述性段落,但閱讀時間最長。

4.描述內(nèi)容的正文對內(nèi)內(nèi)容的簡要描述。

您的內(nèi)容卡應(yīng)指導(dǎo)用戶按此順序瀏覽文本類型。要實現(xiàn)這一點,您需要使用瀏覽控制對文本類型應(yīng)用適當(dāng)?shù)囊曈X強調(diào)。


控制用戶的瀏覽順序


通過適當(dāng)?shù)囊曈X強調(diào),可以控制用戶瀏覽的順序,并指定反映文本層次結(jié)構(gòu)的瀏覽模式。

當(dāng)掃描遵循文本層次結(jié)構(gòu)時,用戶會浪費更少的眼球運動,并且可以更快地處理信息。


下面的示例說明了瀏覽控制如何讓眼球工作比較。不同的是強調(diào)不同的文本類型。

其他文本類型具有相同的強調(diào)度,這使得它們爭奪用戶的注意力。

其他設(shè)計形式及瀏覽方式


在內(nèi)容顏色的控制上我們可以為三種,重要的突出的需要用戶重點進行關(guān)注的就用黑色

例如:#333333      #222222   #454545     等等色值

在不需要突出的內(nèi)容上我們可以用稍微淺一點的色值保證用戶能夠進行閱讀即可,

例如:#999999      #787878   #666666     等等色值更加容易記住

其他輔助的內(nèi)容表達比內(nèi)容正文更淺

例如:#bbbbbb      #A8A8A8    等等色值

說到這里我要說一用戶體驗關(guān)于文字的事情如果做出來的設(shè)計文字是給自己看的隨意設(shè)計讀沒人會說你,有句話說的好:現(xiàn)在

是內(nèi)容為王的時代,如果在內(nèi)容上不夠吸引或者顏色不夠吸引眼球那就是一個很失敗的案例。


轉(zhuǎn)自:站酷

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


如何量化用戶體驗?

資深UI設(shè)計者

互聯(lián)網(wǎng)下半場,所有的比拼都在產(chǎn)品體驗;然而“體驗”是一個非常抽象的詞,我們怎么把一個抽象的概念拆解成可落地執(zhí)行的策略,作用到企業(yè)中后臺產(chǎn)品上,怎么衡量策略的有效性,這一直是我們團隊面臨的重大課題。

1.

業(yè)界關(guān)于體驗度量的經(jīng)驗

目前關(guān)于“體驗度量”比較成熟的理論模型當(dāng)屬 Google 的 HEART 模型,另外還有 ISO 9126 軟件質(zhì)量模型和Davis 的 TAM 技術(shù)接受模型。后人在此基礎(chǔ)上進行了很多實踐,譬如 SAP 的用戶體驗問卷(UEQ)、Oracle 的客戶體驗價值公式(CX)等。公司內(nèi)部各個 BU 也在不斷的嘗試和探索,譬如新零售技術(shù)團隊的 TES 模型。技術(shù)團隊研發(fā)效能的 DEVA 模型,國際 UED 語音設(shè)計的 HII 模型,阿里云的 QoUE 模型。縱觀這些模型和實踐,大多是主觀數(shù)據(jù)和客觀數(shù)據(jù)的結(jié)合。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

我們團隊也曾提出過 TECH 、PTECH 模型,但由于模型的操作門檻較高、對埋點數(shù)據(jù)有不少要求,難以推廣到各條業(yè)務(wù)線。痛定思痛后,我們決定重新回歸業(yè)務(wù),回歸“體驗度量”的初心,去繁從簡,提高通用性。

2.

企業(yè)中后臺產(chǎn)品的特點

企業(yè)級中后臺產(chǎn)品最大的特點是任務(wù)性質(zhì)非常明確;用戶使用這類產(chǎn)品通常是為了解決某個確定的問題點,期待用新的解決方式降本增效。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

桌面研究也表明:可用性問題是軟件行業(yè)的普遍問題:在英國,一般商用計算機用戶只有30%-40%的有效生產(chǎn)率;軟件缺陷中,48%是可用性問題。

正是基于上述原因,我們嘗試提出了“兩章一分”的標(biāo)準(zhǔn),分別從設(shè)計驗收、可用性測試、易用度分?jǐn)?shù)等三個維度對產(chǎn)品體驗進行體檢和把關(guān)。

3.

什么是「兩章一分」

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

1. 設(shè)計驗收章

“設(shè)計驗收章”主要有 3 個維度:產(chǎn)品還原度、任務(wù)流程跑通率、單頁面加載時間。

產(chǎn)品還原度:指技術(shù)同學(xué)的最終產(chǎn)出與設(shè)計稿之間的差異;

匯總?cè)斯ぶ悄芫€、技術(shù)風(fēng)險線等 5 個產(chǎn)品近 1 年的可用性測試結(jié)果。除功能、性能問題外,高頻體驗問題主要集中在“幫助引導(dǎo)”、“操作反饋”、“任務(wù)流程”、“概念術(shù)語”、“功能入口”這 5 個方面。同時,結(jié)合之前項目沉淀的設(shè)計經(jīng)驗和設(shè)計工具,我們最終將“產(chǎn)品還原度”的子維度定為“信息導(dǎo)航”、“幫助引導(dǎo)”、“操作反饋”、“文案名詞”;每個子維度用 2-3 句描述來進行評分。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

任務(wù)流程跑通率:驗收確認(rèn)能跑通的主干任務(wù)流程數(shù),在所有主干任務(wù)流程數(shù)中的占比;舉個例子,設(shè)計稿中枚舉了 10 條主干任務(wù)流程,驗收發(fā)現(xiàn)其中 9 條已跑通,那么任務(wù)流程跑通率就是 9/10*100%=90%。

單頁面加載時間:接入雨燕性能指標(biāo)數(shù)據(jù)的產(chǎn)品看“首次有效渲染時長 fmp”這個指標(biāo);未接入的產(chǎn)品直接主觀判斷,超過 3 秒的視為不合格。

2. 可用性測試章

“可用性測試章”也在驗收階段執(zhí)行,同樣有三個參評維度:最終完成率、人均求助次數(shù)和高阻礙頁面。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

我們沒有考慮將可用性測試的常用指標(biāo)——操作時長作為參評維度,主要原因是企業(yè)中后臺產(chǎn)品類型多、使用場景復(fù)雜程度各自不同:用語雀創(chuàng)建企業(yè)空間只需要 5 分鐘;用云鳳蝶搭建一個后臺頁面可能需要 60 分鐘,用 sofa stack 創(chuàng)建并發(fā)布一個應(yīng)用可能需要 2-3 個小時……難以確定可以作為標(biāo)準(zhǔn)的具體操作時長。

3. 易用度分?jǐn)?shù)

“易用度分?jǐn)?shù)”標(biāo)準(zhǔn)為 5.5 分。

4.

「兩章一分」的實踐

1. 案例實踐現(xiàn)狀

截至 2020 年 9 月,已有 58 個 產(chǎn)品實踐過“兩章一分”系列方法,基本覆蓋平臺設(shè)計團隊支撐的重點項目及 UV 超過 100 的產(chǎn)品。詳細(xì)數(shù)據(jù)如下圖:

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

完整體驗“兩章一分”的 18 個產(chǎn)品,僅可用性測試就幫助發(fā)現(xiàn) 364 個問題,平均每個產(chǎn)品發(fā)現(xiàn) 20 個問題;其中,“九州2.0 發(fā)布部署”發(fā)現(xiàn)問題數(shù)多達 53 個。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

2. 實操經(jīng)驗提煉

設(shè)計驗收:共創(chuàng)式驗收

企業(yè)中后臺產(chǎn)品生產(chǎn)階段中,由于一般沒有專門的測試同學(xué),因此設(shè)計驗收都是由設(shè)計師或 PD 單獨執(zhí)行,沒有作為必選環(huán)節(jié),有時候甚至?xí)驗殚_發(fā)周期緊張而直接略過;既沒有方法論,又缺乏儀式感。

“兩章一分”的實踐中,我們首次踐行“共創(chuàng)式驗收”,以項目組會議的方式,邀請各個角色共同參與到驗收環(huán)節(jié)中:如果產(chǎn)品沒有什么技術(shù)門檻,那么各個角色分別獨立操作核心流程;如果產(chǎn)品有一定的技術(shù)門檻,則由技術(shù)同學(xué)操作核心流程,同時共享屏幕,其他同學(xué)從旁觀察。操作完畢后,項目組內(nèi)共同討論發(fā)現(xiàn)的體驗問題,并將問題落地到 Aone 中進行排期管理落地。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

可用性測試:引入“技術(shù)支持”+圈定測試人數(shù)+ 線上測試降成本

  • 引入“技術(shù)支持”

企業(yè)中后臺產(chǎn)品通常有一定的技術(shù)門檻,以 SOFAstack的測試任務(wù)為例:

使用 sofaboot 技術(shù)棧,創(chuàng)建 “hello world” 應(yīng)用,通過“經(jīng)典版”發(fā)布部署模式發(fā)布成功。

測試過程中經(jīng)常會出現(xiàn)一些涉及到底層技術(shù)系統(tǒng)的問題,非設(shè)計同學(xué)能解決,因此我們建議做企業(yè)中后臺產(chǎn)品的可用性測試時,需要配備至少一名技術(shù)支持同學(xué),以備不時之需。

  • 圈定測試人數(shù)

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

Jakob Nielsen 在 2000年提出測試 5 人就能發(fā)現(xiàn) 85%的可用性問題;結(jié)合我們的實際業(yè)務(wù)場景:有些產(chǎn)品真實客戶非常難找;前期“共創(chuàng)式驗收”已跑通核心主干流程;因此我們將測試人數(shù)限制為 3 人。

  • 線上測試降成本

我們開始實操案例時,恰逢疫情期間,于是就引入了線上遠(yuǎn)程測試的方式;后續(xù)實踐下來,發(fā)現(xiàn)遠(yuǎn)程測試能在觀察、分析階段顯著降低執(zhí)行成本。

通過釘釘或阿里郎發(fā)起視頻會議,邀請參加測試和觀察的同學(xué)入會,請測試用戶共享操作屏幕,主持人錄屏捕捉用戶操作軌跡,PD、技術(shù)等項目組成員從旁觀察。測試結(jié)束后,使用語音轉(zhuǎn)文本工具,快速將音頻轉(zhuǎn)成文字。這種模式最大的好處有兩點:

  • 突破了距離和觀察人數(shù)的限制;從實踐來看,現(xiàn)場測試結(jié)合遠(yuǎn)程測試的模式,至少能同時對 2-3 人進行測試,執(zhí)行成本減半;
  • 語音轉(zhuǎn)文本后,顯著提升了分析效率。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

執(zhí)行階段的多樣化

最開始提出“兩章一分”的時候,我們原本希望這套標(biāo)準(zhǔn)能被作為判斷產(chǎn)品體驗是否好用,能否上線的標(biāo)準(zhǔn)之一;但實際并未推動成功。這里面有很多原因,其中一個非常實際的問題是很多產(chǎn)品需要調(diào)用線上數(shù)據(jù)庫才能跑通核心流程,在測試階段沒法跑通;這就導(dǎo)致在測試階段做可用性測試無法真實還原用戶場景。

此外,設(shè)計師或 PD 新接手某款產(chǎn)品時,也希望能通過可用性測試的方式來快速了解產(chǎn)品問題?;貧w到“兩章一分”的初心——幫助產(chǎn)品發(fā)現(xiàn)體驗問題,因此,我們拓展了方法的執(zhí)行階段,不再局限于測試或驗證階段,只要場景適合,都可以用。

3. 典型案例:LinkE 研發(fā)運維中心一期

產(chǎn)品簡介

LinkE 研發(fā)運維中心是云通未來 Serverless 戰(zhàn)場的重要產(chǎn)品;業(yè)務(wù)方希望用該產(chǎn)品來整合研發(fā)同學(xué)日常高頻使用的研發(fā)、運維、中間件平臺,大幅減少平臺割裂和跳轉(zhuǎn),提供沉浸式的產(chǎn)品體驗。

目前該產(chǎn)品還處于 0-1 建設(shè)的階段。

實踐過程

  • 為了確保產(chǎn)品體驗良好,設(shè)計師在驗收階段引入“兩章一分”,進行共創(chuàng)驗收和可用性測試;
  • 共創(chuàng)驗收階段,邀請 PD、技術(shù) 等 8 名同學(xué)一起參與,最終結(jié)果為“通過”;
  • 可用性測試階段,設(shè)計師根研發(fā)通用場景,招募 6 名研發(fā)同學(xué)參與兩個可用性測試任務(wù),分別為:任務(wù) 1,基于代碼變更完成研發(fā)自測聯(lián)調(diào);任務(wù) 2,基于發(fā)布完成分支的集成、預(yù)發(fā)、灰度、生產(chǎn)

結(jié)果用戶在任務(wù) 2 遇到高阻礙頁面,導(dǎo)致可用性測試結(jié)果為“不通過”,任務(wù) 2 的易用度分為僅 4.4 分,顯著低于 5.5 分的參考標(biāo)準(zhǔn);最終發(fā)現(xiàn) 30+ 問題點,并推動 PD 思考產(chǎn)品邏輯設(shè)置是否合理。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

實踐效果

  • 經(jīng)過兩次完整實踐,LinkE 設(shè)計師已能完全獨立操作執(zhí)行“兩章一分”;
  • 業(yè)務(wù)方的參與度 & 認(rèn)知度提升明顯:已開始習(xí)慣將“兩章一分”設(shè)為項目里程碑,并全員參與進來。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

4. 實踐總結(jié)

在實踐過程中,我們發(fā)現(xiàn)企業(yè)中后臺產(chǎn)品的典型場景大致可以分為 4 個場景;不同場景面臨的設(shè)計項目有所偏重;不同設(shè)計項目在體驗度量方面的切入點也有所不同。譬如:云鳳蝶是一個典型的沉浸式畫布頁面,所有操作幾乎都是通過編輯器屬性面板來調(diào)整,那么如何來評估編輯器的效率呢?通過一系列實踐和思考,我們提出可以通過“高頻屬性查找、配置的步驟數(shù)和時間”、“設(shè)置相同組件屬性的耗時變化”等指標(biāo)進行衡量。以下是我們根據(jù)不同典型場景、設(shè)計項目提出的體驗度量切入點。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

5.

「兩章一分」的未來

經(jīng)過 S1 長達幾個月的探索:我們制定了“兩章一分”的標(biāo)準(zhǔn);對 30+ 產(chǎn)品進行了易用度分?jǐn)?shù)的測試,捕捉分?jǐn)?shù)基線;提煉實操方法技巧,并賦能給各位設(shè)計師;聯(lián)合設(shè)計師和業(yè)務(wù)方跑通近 20 個案例。不管是問題發(fā)現(xiàn)數(shù)量,還是設(shè)計師、業(yè)務(wù)方的主觀反饋,都讓我們堅定“兩章一分”在企業(yè)中后臺產(chǎn)品體驗優(yōu)化中是一個相對有效的模式。為此,S2 我們打算繼續(xù)深化。

如何量化用戶體驗?試試阿里這個新出的「兩章一分法」!

  • 落標(biāo)準(zhǔn):在關(guān)鍵業(yè)務(wù)線將“兩章一分”落地到業(yè)務(wù)生產(chǎn)環(huán)節(jié)中,不過“兩章一分”就不能上線;
  • 分基線:區(qū)分不同產(chǎn)品類型和迭代大小,制定不同的易用度分?jǐn)?shù)基線;
  • 升方法:針對跨產(chǎn)品、跨域等難以推動的橫向體驗項目,我們考慮升級方法,如將可用性測試升級為“用戶體驗日”,以便更好地推動問題落地;
  • 閉案例:針對 S1 已跑通的業(yè)務(wù),我們會在 S2 進行案例閉環(huán)測試,以驗證優(yōu)化效果是否真的能在“兩章一分”上體現(xiàn)出來;
  • 始運營:我們會挑選一些案例在公司內(nèi)外發(fā)聲,找相關(guān)業(yè)務(wù)領(lǐng)域的團隊進行交流和探討;并從案例中總結(jié)和提煉設(shè)計技巧,幫助業(yè)務(wù)成長。

總結(jié)

我們團隊當(dāng)前支持的企業(yè)中后臺產(chǎn)品以 0-1 階段產(chǎn)品為主,PD 通常缺少用戶意識和體驗優(yōu)化手段,這就導(dǎo)致了設(shè)計稿還原度較差、產(chǎn)品上手門檻較高。針對這一現(xiàn)狀,我們嘗試性地提出了“兩章一分”這個評價標(biāo)準(zhǔn),從設(shè)計驗收、可用性測試、易用度分?jǐn)?shù) 3 個維度來評價產(chǎn)品當(dāng)前的體驗現(xiàn)狀。

通過 S1 50+ 產(chǎn)品的實操,我們一邊不斷完善評價標(biāo)準(zhǔn)和實操經(jīng)驗,一邊總結(jié)體驗度量經(jīng)驗;共幫助 18 個產(chǎn)品發(fā)現(xiàn) 364 個產(chǎn)品,并在 link 、sofa 等重點產(chǎn)品線中落地到業(yè)務(wù)生產(chǎn)環(huán)節(jié)中,在業(yè)務(wù)方層面收到良好反饋。

在這過程中,我們總結(jié)了適合不同場景、不同設(shè)計項目的體驗度量切入點,驗證了這種方式在當(dāng)前企業(yè)中后臺產(chǎn)品中確實有效。后續(xù)我們將嘗試細(xì)化標(biāo)準(zhǔn),閉環(huán)案例,對內(nèi)對外發(fā)聲等方式,更好地推動體驗思維在企業(yè)中后臺產(chǎn)品生根發(fā)芽;同時,也期待能跟對這塊感興趣的同行朋友們多多交流。


文章來源:優(yōu)設(shè)   作者:
AlibabaDesign

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

摁不住的拼多多

周周


編輯導(dǎo)讀:當(dāng)各大電商平臺忙著雙十一的時候,拼多多似乎是個獨特的存在,不慌不忙,圍觀在旁。拼多多為什么不重視雙十一?他們主要在忙什么?文章從這兩個問題出發(fā),對此展開了分析解讀,一起來看看~

孫悟空是石頭縫里蹦出來的。阿里系幾位P8Plus的朋友和阿德哥聊時說,拼多多也是石頭縫里蹦出來的!

“打京辦”成立這么多年,沒承想打出個拼多多。剛剛發(fā)布的拼多多Q3財報顯示:首次單季度盈利,第三季營收142億元;GMV達1.45萬億,同比增長73%;活躍買家達7.31億……

在資本市場上,拼多多迅速趕超京東300億美元達1600億美元市值,成為國內(nèi)僅次于阿里、騰訊、美團的第四大互聯(lián)網(wǎng)公司。

自2014年起,投資界便開始流傳“電商已是死賽道”的共識,拼多多的崛起給了投資界一記響亮的耳光,也再次說明了“長江前浪推后浪,江山代有才人出?!?/span>

與當(dāng)年打京辦、投蘇寧等手腕比,似乎阿里對拼多多已無招可施,重啟聚劃算、推淘寶低價版眼看也只是“補課動作”。而拼多多,卻正在暗暗部署更多領(lǐng)域,圈內(nèi)人說,“誰如果小看黃錚的野心,就等承認(rèn)自己是一個傻X”是同樣的邏輯。

“摁不住的拼多多!”阿里的多位朋友如是說。

低調(diào)的雙11

今年的雙11因為“你懂的”原因而顯得波瀾不驚,除了天貓交出4982億元、京東交出2715億元的答卷之外,似乎乏善可陳……

“拼多多天天都是雙11!”

拼多多的朋友告訴阿德哥,所以他們不希罕宣布成績。

當(dāng)然,這并非拼多多的官方回應(yīng),官方回應(yīng)說,拼多多更在意消費者的購物體驗。拼多多的Slogon是,多實惠,多樂趣。

一個小混混有了另立山頭的志向后,并非馬上另立山頭,他首先做的,不是去激怒原有的老大,而是,開辟自己的新陣地,帶自己的小弟。

拼多多只是不公布成績,并非沒有參與“雙11”盛宴。

曾國藩說,聰明的人都懂得“藏拙”,但只有少數(shù)人懂得“藏鋒”。

沒有滿減、蓋樓、升級列車、養(yǎng)貓……只有簡單的“低價”,拼多多副總裁陳秋說,本次雙11,拼多多的一切優(yōu)惠都將以最簡單的方式面向用戶,消費者不用做滿減計算題,看到的即是最優(yōu)價。

前幾天,夫人非要去郵局給小侄子寄一堆童裝,這與阿德哥的習(xí)慣大相徑庭。可到了郵局,除了服務(wù)的眼神不對之外,價格真讓我驚喜:30多斤一大箱的衣服,郵寄費30元。

總說國企服務(wù)沒跟上,可價格也真是“良心價”啊。“自古真情留不住,總是套路得人心”,黃崢說。

總是低價得人心!

阿德哥曾做過了多次田野訪問,得出兩個基本結(jié)論,一是老家很多親朋基本都知道淘寶,但大都卻正用拼多多;另一個是阿里、京東多年的鐵粉,居然瞬間被拼多多“拉走”。

“618”期間,一個朋友在京東購買售價1099元的Beats solo3藍(lán)牙耳機,已準(zhǔn)備在京東下手的他,突發(fā)異想去拼多多“多看了一眼”,499元。你沒看錯,不要599元!

這個朋友今天已是拼多多的優(yōu)質(zhì)用戶,幾個月時間里,貢獻了近三萬元的GMV。

打開拼多多APP,限時秒殺、斷碼清倉、XX特賣、9塊9特賣……不要小看這樣的戰(zhàn)陣:因為大量的特價版塊,外加重頭推出的“百億補貼”,拼多多給用戶展示出的,可不就是天天雙11嘛?

而其背后的玄機則在于:通過不斷上新的各種大促,拼多多對于品牌的露出與銷量拉動,早已遠(yuǎn)超傳統(tǒng)電商“泛賣貨”模式,它一改小商家陪煉大玩家的傳統(tǒng)模式變成了“讓更多的商家可以雨露均沾”。

如果非得去探尋一下拼多多的崛起路徑,吃瓜瓤的多半會說,沒有淘寶就沒有今天的拼多多,沒有微信也沒有今天的拼多多。

這可以視為正確的廢話。

當(dāng)年抗美援朝的路上,也曾有不少志愿軍睡著了。

移動互聯(lián)網(wǎng)大潮來臨的時候,互聯(lián)網(wǎng)的生態(tài)發(fā)生了全新的變化,拉長時間線,誰臨陣換了大將,誰展開了整風(fēng)運動?

江山代有才人出,丁磊的知音,段永平的弟子,黃崢當(dāng)立。

簡而言之,阿里為中國的電商事業(yè)立下了汗馬功勞,基本讓國人實現(xiàn)了在“消費互聯(lián)網(wǎng)”端的揚眉吐氣;而騰訊的QQ、微信,則讓國人實現(xiàn)了網(wǎng)絡(luò)“非主流意見市場”上聚集了最多的人。

創(chuàng)業(yè),天時、地利、人和。黃崢不會都得,但都掙得了。

淘寶“開卷考試”帶來了最初的商家和貨品,微信“熱鬧人群”帶來了交易場景,砍價、拼單激發(fā)了社交流,拼多多,用了不到三年的時間,創(chuàng)造出了“新電商速度”。

隨后是C2M新品牌計劃,百億補貼的大品牌計劃,而快速上市帶來的則不僅是高光,更是贏得了“黃金時間”。

按照傳統(tǒng)電商資本套路,拼多多三季實現(xiàn)單季贏利之后,還有一年到一年半的“高增可虧損”黃金時間。換而言之,拼多多依然可以繼續(xù)實現(xiàn)補貼、營銷推動,而不必太在意贏利。

這樣的時間窗口,縱觀天下電商,唯拼多多有之。

有疑問的人,不妨多看看拼多多今年的前二季財報的營銷費用率,答案擺在那兒呢。

恐怖的是,黃崢的野心并非只在“實物電商”,據(jù)說,在拼多多,更多的大殺器正在路上。

上天并非偏心,了解黃崢的人,知道,他只是大器晚成,而非天縱其才。

賣菜

并非拼多多不重視雙11,而是黃崢不重視,一是因為拼多多已上了軌道;二是因為黃崢最近只關(guān)注另一件事——賣菜。這便是多多買菜。

疫情期間,拼多多便推出了線下團購工具“快團團”,協(xié)助各地商家收集社區(qū)需求,從而實現(xiàn)在線下單。

此前8月,多多買菜正式上線,開始與興盛優(yōu)選、美團買菜展開直接競爭,先是APP端出現(xiàn)多多買菜頻道,更是迅速推出同名小程序與“多多買菜門店端”服務(wù)號:采取的是與本地商超合作,線上賣菜、線下提菜的路徑。

與別家合作前置倉自建供應(yīng)鏈模式不同的是,多多買菜采取了只幫“合作商家”在線賣菜的方式,換而言之,多多買菜把實惠送給了合作商家,而它想要的似乎只是“用戶”。

在這一邏輯下,拼多多采取了極為激進的補貼方式,以更高方式補貼團長,打出的旗幟是10億量級,除此之外,還采取了“三高”戰(zhàn)術(shù):高補貼拉新、高頻率回訪、率入駐。

賣菜熱不熱?

阿里、騰訊、美團、滴滴、字節(jié)跳動盡數(shù)入局,而當(dāng)前跑得最猛的是拼多多——多多買菜。

多位競品人士告訴阿德哥,多多買菜團隊更加年輕,除了在品控方面并未實現(xiàn)良好管控之外,其犀利程度、其執(zhí)行力,遠(yuǎn)超阿里鐵軍。

騰訊陣營拉出了興盛優(yōu)選、食享會;而阿里系除了為十薈團、你我您合并之后的新十薈團打通阿里供應(yīng)鏈之外,更是在近期有了新動作:菜鳥驛站團購接入了大潤發(fā)的商超,盒馬推出了盒馬mini和盒粉群,據(jù)傳零售通事業(yè)部亦正在籌備新的社區(qū)團購部門。

實際上,今年的互聯(lián)網(wǎng),除了5G軟硬概念之外,最大的賽道是賣菜,它超過了前幾年前輩造出的“新零售”概念。

今年,以賣菜為核心的生鮮賽道上,目前已宣布和匯聚的資金已超過200億元。

黃崢?biāo)坪蹩礈?zhǔn)了這條賽道,而現(xiàn)在的增量搏殺,僅僅是開始。

“此一時”的策略,是黃崢鐵了心要拿下僅比外賣吃飯稍弱的剛需——買菜,既高頻,又具備想像力。

要知道,首先撬動農(nóng)村及五環(huán)外的,是拼多多。而拼多多C2M端的大成,其實在農(nóng)產(chǎn)品,賣空一個地方的農(nóng)產(chǎn)品,早已在拼多多持續(xù)實現(xiàn)。

而在未來嫁接進自己的供應(yīng)鏈,顯然在邏輯上已是必須。而當(dāng)務(wù)之急,是拿下更大規(guī)模的“增量”用戶。

黃崢絕非魏延,僅僅是有反骨,他也更不會是鄧艾、鐘會,他是司馬一族。

黃崢如是說,我認(rèn)為最好的利用營收的方式就是投資R&D、基礎(chǔ)設(shè)施、用戶認(rèn)可度、品牌知名度。重要的是,

培養(yǎng)人們的消費習(xí)慣,讓人們以拼多多為最主要的消費平臺。

黃崢之野心,蒼天可鑒,近在咫尺的數(shù)據(jù)是:年活躍買家已增至7.313億人,第三季度平均月活躍用戶為6.434億人。

與之對應(yīng)的是,阿里最近的數(shù)據(jù)是:年活躍買家7.57億,2020年9月,中國零售市場移動月活躍用戶8.81億人。

有人在意ARPU值、GMV,但拼多多似乎更在意客單量、復(fù)購率和用戶數(shù)。

依阿德哥判斷,電商格局正在乾坤大挪移。

嗯,了不起的蓋茨比,摁不住的拼多多。




文章來源:人人都是產(chǎn)品經(jīng)理           作者:韓志鵬


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


亞馬遜成功背后的體驗設(shè)計邏輯:成功的設(shè)計并不需要美觀

周周

亞馬遜作為一個知名的電商平臺,它的成功背后卻有一個很難讓人理解的設(shè)計邏輯:成功的設(shè)計不一定是美觀的。為什么會這么說呢?本文將從四個維度展開分析,希望對你有幫助

谷歌的 10 個“Material Design”設(shè)計要點(下)

周周

編輯導(dǎo)讀:如今,谷歌可以說是科技領(lǐng)域最大、最具有影響力的公司之一。正因為如此,它們的數(shù)字產(chǎn)品設(shè)計會對整個行業(yè)產(chǎn)生巨大的影響,成為人們競相模仿的榜樣。在該公司的UI&UX(用戶界面&用戶體驗)設(shè)計指南中,設(shè)計師們提到了10條原則,不管是iOS還是安卓系統(tǒng)都同樣適用。在這篇文章中,作者從這10條指南出發(fā),加上自己的經(jīng)驗和相關(guān)案例,在設(shè)計方面為大家提供一些建議,希望對大家設(shè)計產(chǎn)品有幫助。

6. 利用聲音和觸感喚起用戶的情感

這里的聲音特指“Hero sounds”,用于襯托一些喜慶的、重要的高光時刻,它們常被用來激起用戶的情感,或烘托一種喜悅的氣氛,從而塑造產(chǎn)品或品牌在用戶心中的形象。以下場合適合使用 Hero sounds:慶祝用戶進行了某項操作;歡迎用戶使用新的應(yīng)用程序或體驗;確認(rèn)用戶成功使用某款產(chǎn)品。——《谷歌聲音設(shè)計指南》

聲音可以被用來傳遞成功、成就或獲得回報等信息。谷歌指南中提到,Hero sounds出現(xiàn)的次數(shù)不應(yīng)該頻繁,否則無法突出其重要性。通過在同樣的環(huán)節(jié)提供同樣的聲音,久而久之用戶會將這種提示音與成就感掛鉤,從而增加對產(chǎn)品的粘性。如每成功更新一次應(yīng)用程序就會出現(xiàn)慶祝的聲音,或者每次待辦事項標(biāo)記為完成后就會出現(xiàn)慶祝的提示音。

不管我們是否注意到這一點,我們所聽到的產(chǎn)品的聲音與自己的感覺都是相掛鉤的。無論是手機發(fā)出的“叮咚”的消息提示音,還是MacBook的廢紙簍在清空時發(fā)出的揉紙的聲音,都在某種程度上影響著我們的情緒,也幫助我們更加了解用戶界面上發(fā)生的一切。

觸覺可以和聲音配合使用,也可以單獨使用。舉個例子,在手機黑屏的時候,觸覺是唯一一種可以對用戶提供反饋的方式。和其他配合使用時,觸覺應(yīng)該強有力、傳達愉悅的情緒?!栋沧坑|覺設(shè)計指南》

除了聲音之外,觸覺設(shè)計(如震動)也是一種刺激感覺的好方法,可以為用戶提供更加完整的體驗。用戶可以通過觸覺提示來嘗試、學(xué)習(xí)使用某一款產(chǎn)品。在有了不同的觸覺體驗后,我們將會對產(chǎn)品的某些功能有更加深入的了解。

舉個例子,如果某個用戶通過APP進行付款,但在付款過程中出現(xiàn)了錯誤。這時候APP會進行一連串緊張、短促的震動,對用戶進行錯誤反饋。當(dāng)用戶熟悉了這種震動模式之后,下一次再感受到這種震動,就會立刻知道付款出現(xiàn)了問題。

產(chǎn)品設(shè)計師很容易忽略聲音和觸覺這兩個板塊,而過度專注于畫面。但這兩個板塊卻也扮演著非常重要的效果,可以為用戶體驗錦上添花。

7. 通過動圖表達獨特的風(fēng)格、塑造個性化品牌體驗

圖片來自Material

動圖可以增加用戶的好感,在互動中為用戶增加個性化體驗,也可以表現(xiàn)品牌獨特的風(fēng)格?!豆雀枋謩菰O(shè)計指南》

動圖是我自己設(shè)計的產(chǎn)品Confetti中一個非常重要的因素,這是一款運動追蹤APP,是為那些追蹤自己生活習(xí)慣的用戶設(shè)計的。在設(shè)計這款產(chǎn)品時,我希望可以為用戶創(chuàng)造出一種滿足感,鼓勵他們培養(yǎng)好習(xí)慣。在這款A(yù)PP中,我大量使用切換功能,通過不同的手勢,界面或進程可以平滑過渡,使用起來非常便捷。當(dāng)一個好習(xí)慣完成時,還會出現(xiàn)彩屑動畫飛舞的,加強用戶的滿意度。

簡言之,動圖可以應(yīng)用于不同的場景,通過過渡和變化的吸引用戶。

動圖可以強化兩種元素之間的聯(lián)系,實現(xiàn)快速切換,迅速解決特定的任務(wù)。動圖可以讓用戶專注于眼下最重要的事,不被其他因素所干擾?!豆雀枋謩菰O(shè)計指南》

在2020年,你的產(chǎn)品可以在一秒之內(nèi)激怒用戶。正如塔拉斯·斯凱斯基(Taras Skytski)在《用戶體驗設(shè)計中動畫使用的終極指南》中指出的那樣:“眾多研究發(fā)現(xiàn),界面動畫的最佳速度在200到500毫秒之間。這一數(shù)字是通過研究人類大腦運行機制所得出的。100毫秒及以下的動畫因為速度太短而無法被識別,而超過1秒的動畫則會造成一種延遲感,讓用戶感到不舒服?!?/span>

通過動圖及產(chǎn)生的動畫效果(如切換)可以改善用戶體驗,同時保證可以迅速找到需要的版面,而不被其他信息干擾。但如果動圖及切換畫面的過程增加了不必要的等待時間,又不能改善體驗,那么這種環(huán)節(jié)就沒有必要存在。

8. 通過圖像進行交流,并區(qū)分和突出產(chǎn)品特性

圖片來自Bribble|制圖Elena Petkovska

我們或多或少都有這樣的體驗:打開一個界面,里面充斥著太多文字和太少的圖像。在用戶體驗設(shè)計中,展示畫面比閱讀文字效果更好。用戶不希望通過閱讀來理解一款產(chǎn)品,而是希望通過圖像對一款產(chǎn)品進行直觀的視覺理解。

你所選擇的圖像應(yīng)該能夠清晰地展示產(chǎn)品特點,不管是用戶自己上傳的圖片,專業(yè)攝影師的圖片,還是插畫風(fēng)格的圖片,它們都應(yīng)該能直觀展示產(chǎn)品外觀,反應(yīng)產(chǎn)品的特點?!豆雀鑸D像設(shè)計指南》

APP里的插圖和所有的視覺元素一樣重要,好的圖片可以讓用戶界面更加生動,使用戶體驗更加完善。恰當(dāng)?shù)膱D片還能展示品牌風(fēng)格,成為無聲的“故事講述者”。

我們應(yīng)當(dāng)有目的地使用圖像,作為總體內(nèi)容的補充而非替代。照片或者插圖最好能夠傳達足夠的信息,如產(chǎn)品外形、風(fēng)格,APP的用途,狀態(tài)等。媒體界有這么一句話:一張圖片抵得上1000個字。你可以在Unsplash、Pexels、Adobe Stock等網(wǎng)站上找到高質(zhì)量的圖片。

9. 關(guān)注產(chǎn)品的像素密度

圖片來自Material

用戶界面設(shè)計中應(yīng)該關(guān)注產(chǎn)品的像素密度,讓界面可以適應(yīng)不同的屏幕?!豆雀柘袼孛芏仍O(shè)計指南》

像素密度(PPI)是用來衡量每物理英寸的像素數(shù)。另一個常用的單位是DP(Density-independent pixels,有時候簡稱為DIP)。像素密度=屏幕寬度或高度(以像素為單位)/屏幕寬度或高度(以英寸為單位)。

在設(shè)計界面時,我們不應(yīng)該只關(guān)注像素,還應(yīng)該關(guān)注不同設(shè)備的像素密度。這樣可以讓我們在做設(shè)計時保證元素適當(dāng)縮放,以適應(yīng)不同屏幕的尺寸。

舉個例子,我們現(xiàn)在有一個按鈕素材資源,大小為200 x 50 px。在一個160ppi的屏幕上可以原畫顯示;在一個320ppi的屏幕上它就會擴大成400 x 100 px,相當(dāng)于原始素材的兩倍大。

通過以上例子我們可以了解,在像素密度不同的屏幕上,素材呈現(xiàn)的狀態(tài)是不一樣的。在實際應(yīng)用中,素材可以會被放大三倍甚至四倍,如果素材不夠清晰,就會在拉大后虛掉。這就需要我們在選擇素材時格外謹(jǐn)慎,嘗試在不同設(shè)備上打開并檢查。

素材密度如何適應(yīng)屏幕尺寸?舉個例子,iPhone XS Max的屏幕是414 x 896 pt,注意這里的尺寸是物理尺寸pt,而非像素。如果以像素為單位計算,那么它的屏幕是1242 x 2688 px。所以當(dāng)我們?yōu)閕Phone XS Max設(shè)計應(yīng)用產(chǎn)品時,我會首先考慮用414 x 896 pt的素材,然后在輸出素材時將其乘以3。

10. 考慮設(shè)計在線/離線狀態(tài)

圖片來自Material

離線狀態(tài)可以讓用戶知道這款應(yīng)用程序沒有連接網(wǎng)絡(luò)。如果你的產(chǎn)品有一些功能需要聯(lián)網(wǎng)使用,你最好能向用戶明確顯示連線狀態(tài)?!豆雀桦x線設(shè)計指南》

離線訪問功能是設(shè)計師經(jīng)常忽略、對用戶體驗影響卻非常重要的一環(huán)。雖然有些功能離線也可以使用,但是在能聯(lián)網(wǎng)的時候,最好還是主動提示用戶,推薦他們連接網(wǎng)絡(luò)。

如果有可能的話,要提前告知用戶下載相關(guān)信息,以便脫機訪問。最常見的例子就是Spotify等音樂應(yīng)用程序,它允許用戶下載歌曲,以便在沒有網(wǎng)絡(luò)的時候也能繼續(xù)聽歌。

假如你的產(chǎn)品不像Spotify或者Netflix那樣需要下載具體內(nèi)容,你可以發(fā)揮創(chuàng)意來設(shè)計在線、離線兩種模式。

谷歌瀏覽器在離線頁面提供恐龍游戲就是一個著名的例子(在谷歌瀏覽器連網(wǎng)的過程中,離線畫面會出現(xiàn)一只霸王龍,按空格鍵或者向上的箭頭就能控制霸王龍——譯者注)。這個小游戲填補了用戶等待連線的時間,將消極體驗轉(zhuǎn)變成了積極體驗。

11. 總結(jié)

我希望這份設(shè)計指南可以為你提供一些想法。除了谷歌的設(shè)計指南之外,我們還可以在IEM Carbon、Zendesk Garden、Workday Canvas等網(wǎng)站找到關(guān)于用戶界面和用戶體驗的設(shè)計指導(dǎo),在這一領(lǐng)域進行更深入地探索。


文章來源:人人都是產(chǎn)品經(jīng)理           作者:Danny Sapio           譯者:Michiko


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

用戶行為分析和以用戶為中心的設(shè)計

ui設(shè)計分享達人

用戶行為分析,認(rèn)識用戶滿足用戶最直接要求為設(shè)計中心


用戶行為分析

用戶行為是指用戶在使用產(chǎn)品時的行為,針對網(wǎng)站而言,就是用戶在進入網(wǎng)站后所有的操作。網(wǎng)站用戶行為分析,就是在獲得網(wǎng)站王文量基本數(shù)據(jù)的情況下,對有關(guān)數(shù)據(jù)進行統(tǒng)計、分析,從中發(fā)現(xiàn)用戶訪問網(wǎng)站的規(guī)律,并將這些規(guī)律與產(chǎn)品目標(biāo)及策略相結(jié)合,從中發(fā)現(xiàn)目前網(wǎng)站存在的問題,為進一步改善網(wǎng)站,滿足用戶需求,提升用戶體驗提供依據(jù)。


常見的用戶分析內(nèi)容包含以下幾個方面內(nèi)容:

(1)用戶在網(wǎng)站的停留時間、跳出率、回訪率、新用戶、回訪次數(shù)、回訪相隔天數(shù);

(2)注冊用戶和非注冊用戶,分析二者之間的瀏覽習(xí)慣;

(3)用戶所使用的搜索引擎、關(guān)鍵詞、關(guān)聯(lián)關(guān)鍵詞和站內(nèi)關(guān)鍵詞;

(4)用戶選擇什么樣的入口形式(廣告或者網(wǎng)站入口鏈接)更有效;

(5)用戶訪問網(wǎng)站流程,用來分析頁面結(jié)構(gòu)和網(wǎng)頁覆蓋數(shù)據(jù);

(6)用戶在頁面上的網(wǎng)頁熱點圖分部數(shù)據(jù)和網(wǎng)頁覆蓋圖數(shù)據(jù);

(7)用戶在不同時間段的訪問量情況等;

(8)用戶對于網(wǎng)站的設(shè)計及字體配色的喜好程度等。


通過研究發(fā)現(xiàn),80%的用戶僅僅使用了軟件20%的功能,而那些沒用的功能不僅浪費開發(fā)時間,也使軟件更加難以使用。一個成功的軟件應(yīng)該是簡練精干的,可以單獨職能化的化解決的單個問題,要以滿足用戶最直接要求為 i設(shè)計中心。


一、了解用戶需要什么

很多網(wǎng)站往往為了滿足不同用戶的需求而增加功能,增加的功能必然需要再界面中用視覺呈現(xiàn)出來,這就會使網(wǎng)頁內(nèi)容越來越多,很多的功能摻雜在一起,如果不經(jīng)過過濾,必然會違背原來閱讀的初衷,所以每一個功能的增加都要慎重。


用戶對于互聯(lián)網(wǎng)功能需求也和對軟件的功能要求一樣。既喜歡簡單的,也喜歡復(fù)雜的。而且用戶的體驗需求也會隨時隨地的發(fā)生變化。這里的復(fù)雜不是指很難用、流程超級復(fù)雜、容易出錯的用戶體驗,而是指豐富的功能。


首先如何讓用戶體驗更簡單呢?當(dāng)然將復(fù)雜的功能去除是最好的,如果實在無法去除某個復(fù)雜的功能,那就應(yīng)該將其隱藏。因為大多數(shù)情況下,不常用的功能要比經(jīng)常使用的功能占據(jù)更多的空間。


真正好的用戶體驗其實是給用戶所需的任何功能,為用戶設(shè)計一款“復(fù)雜”的產(chǎn)品,并將這款產(chǎn)品從表現(xiàn)上簡化,讓基礎(chǔ)功能操作簡化,給擴展功能保留使用入口即可。這個設(shè)計思路最具代表性的例子就是Microsoft Office和Adobe

系列產(chǎn)品。

              


用戶的需求并不是一層不變的,短期內(nèi)用戶會因為某種強烈的需求要一個產(chǎn)品。隨著市場和行業(yè)的不斷發(fā)展,用戶對于一個產(chǎn)品的評價也會隨之發(fā)生變化。例如肯德基剛進入中國市場,被人們認(rèn)為是一種的象征,小朋友以吃一次肯德基為榮。隨著經(jīng)濟條件的發(fā)展,人們對于肯德基的體驗就完全不一樣了,熱量過高,不利于健康。這是一個很典型的對一個產(chǎn)品評價的變遷的過程。


用戶的期望值會因為因素而發(fā)生變化,有的來自外部的環(huán)境,有的來自產(chǎn)品自身,有的來自用戶成長。這些影響期望值的因素都會相輔相成的影響。有的時候不是我們的體驗或者產(chǎn)品變了,而是用戶發(fā)生了變化,所以用戶體驗的設(shè)計,除了要考慮產(chǎn)品本身以外,還要考慮用戶所需要的。


二、遵循用戶的習(xí)慣

用戶通常會根據(jù)個人喜好做事,這就是習(xí)慣。習(xí)慣沒有好壞之分,關(guān)鍵要看根本的是什么。從用戶體驗的角度來說,任何產(chǎn)品都可以分兩種:遵循現(xiàn)有用戶習(xí)慣的產(chǎn)品和顛覆用戶習(xí)慣的產(chǎn)品。


在設(shè)計網(wǎng)站時可以在技術(shù)上創(chuàng)新,在業(yè)務(wù)模式上改變,也要在以下幾點上遵循用戶的習(xí)慣。


1、用戶的生活背景及文化背景

生活和文化背景是必須要遵循的習(xí)慣。想去顛覆或是磨滅一個群體甚至是民族的習(xí)慣,基本上會付出慘重的代價。例如使用紅色表現(xiàn)喜慶,白色表現(xiàn)悲傷,是中華民族幾千年的一種傳統(tǒng)習(xí)慣。如果想去改變這個習(xí)慣,使用其他顏色肯定起不到好效果。比如:可口可樂官網(wǎng)就是用紅色做的主色調(diào),而紅色也與“可口可樂”品牌主色調(diào)相統(tǒng)一,點綴少量黃色,非常符合中國的傳統(tǒng)文化,也更容易使中國人接受。


2、用戶的生理狀況與需求狀況

在設(shè)計網(wǎng)站頁面時,還要考慮到網(wǎng)站用戶群體的基礎(chǔ)屬性,例如年齡層、身體承受力等??梢詫㈨撁嬷械奈淖趾蛨D片做放大處理,使老年人可以清楚的看到內(nèi)容。比如一些老年網(wǎng)站,會采用大號字體,強對比色便于閱讀,而且在設(shè)計的時候也不會使用過多的色彩,雖然整體視覺可能顯得簡陋不夠豐富,但是充分的考慮了老年人人群的特點。


2、以“自我為中心”的心理

人在評定事情好壞的時候,通常喜歡以自我為中心,所以用戶體驗設(shè)計時,必須滿足用戶這種需求。使每個用戶可以體會到以“自我為中心”的優(yōu)越感,這樣用戶就會成為最忠實的客戶。例如很多人沉迷于網(wǎng)游就是因為在現(xiàn)實生活中會受到各種各樣的限制,而無法實現(xiàn)真正的以自我為中心,而在網(wǎng)游的世界里卻可以完全實現(xiàn)。


二、顛覆用戶的習(xí)慣


在設(shè)計網(wǎng)站時,設(shè)計師通常會根據(jù)網(wǎng)站內(nèi)容把網(wǎng)站劃分為不同的區(qū)塊,然后在分別進行美化。設(shè)計師在思維定勢中 自我感覺良好,一旦突破了思維定勢就會有新的收獲。作為用戶體驗的設(shè)計師來說,有下面兩個方面可以顛覆。


1、改變一些有獨特性的頁面設(shè)計

 在設(shè)計網(wǎng)站時,有很多頁面都具有獨特性,例如注冊頁、登錄頁和搜索頁。這些頁面用戶只會訪問一次或者幾次,而且這些網(wǎng)頁本身也是在網(wǎng)站發(fā)展的同時逐步完善的。所以,在用戶體驗的設(shè)計中,這些習(xí)慣就可以顛覆的。設(shè)計師可以根據(jù)個人的喜好對這些頁面進行設(shè)計、優(yōu)化和修改,而不會影響用戶的習(xí)慣。


2、發(fā)展中的知識和技術(shù)

在網(wǎng)站設(shè)計中需要結(jié)合當(dāng)前的潮流趨勢和的技術(shù)來表現(xiàn)網(wǎng)站,這樣才能給用戶帶來全新的體驗。頁面中流暢惡化便捷的交互應(yīng)用,可以給用戶帶來良好的體驗。

尊重用戶秀感可以快速讓用戶接受網(wǎng)站,同時也會由于尊重了用戶的習(xí)慣而減少產(chǎn)品對用戶的刺激,會使得用戶很難成為網(wǎng)站的忠實用戶。另一方面,如果不尊重用戶習(xí)慣,用戶可能很難馬上接受。所以在用戶體驗設(shè)計時,要根據(jù)網(wǎng)站具體情況自我權(quán)衡。

最好的辦法就是在網(wǎng)站核心用戶體驗不變的基礎(chǔ)上,增加新功能、設(shè)計風(fēng)格逐步變化、進行網(wǎng)站整體融合。

轉(zhuǎn)自:站酷-忻蕓



用戶體驗升級指南—規(guī)避用戶“無意識錯誤”的防錯法則

ui設(shè)計分享達人

用戶在使用軟件時不可避免的會進行誤操作;
應(yīng)如何通過設(shè)計,使得犯錯變得困難,從而提升產(chǎn)品易用性。


大綱要點:

1.行為預(yù)判     

2.多重保險 

3.限制行為      

4.唯一性原則

5.默認(rèn)項復(fù)用      

6.特征明顯

7.感官反饋



1.行為預(yù)判,走在用戶前面

通過固定場景,判斷用戶接下來的操作,或?qū)δ承┎僮髯鍪欠駡?zhí)行的處理。

①.輸入銀行卡號,軟件在你輸入完成時自動識別發(fā)卡行,避免手動選擇錯銀行導(dǎo)致轉(zhuǎn)款失敗。 


②支付寶轉(zhuǎn)賬,在聊天窗口輸入純數(shù)字,系統(tǒng)會自動彈出“給對方轉(zhuǎn)賬xx元”的懸浮條提示,點擊懸浮條即可進行轉(zhuǎn)賬操作。對用戶誤把轉(zhuǎn)賬發(fā)送成信息的行為進行預(yù)判,提升產(chǎn)品易用性。 



2.多重保險 ,二次確認(rèn)執(zhí)行。

生活中很容易產(chǎn)生對文件進行誤刪或提交的誤操作,多重保險是對不可逆的操作進行雙重確認(rèn)后再實施執(zhí)行。

如ios信息刪除頁面,刪除信息需進行以下三個操作:

①左滑調(diào)出刪除按鈕(把“隱性”特征轉(zhuǎn)化為“顯性”特征)

②點擊刪除,“確認(rèn)刪除”彈窗彈出

③確認(rèn)刪除,多重”確認(rèn)“降低誤操作 



3.限制行為,使錯誤無法發(fā)生。


在固定字符的表單中。對其輸入的內(nèi)容自動格式化,

如支付寶注冊頁面,只提供數(shù)字鍵盤且只能輸入11位數(shù),從而限制用戶行為。

直接從源頭杜絕誤觸其他字符或多輸入的誤操作。

當(dāng)你開始輸入時,系統(tǒng)會自動將手機號隔成XXX XXXX XXXX的格式,方便用戶以最快的速度核對已輸入的手機號,畢竟相對于一長串的數(shù)字,被分成小塊的數(shù)字組合更容易被記住和看懂。



4.唯一性原則,一個頁面干一件事

按照順序分步進行,避免用戶在一個頁面完成多個任務(wù)。

如接收驗證碼時,保持頁面的功能性是唯一的,手機號注冊頁只能填寫手機號,驗證碼頁面只能填寫驗證碼。利用頁面的唯一性減少誤操作率。



5.默認(rèn)項復(fù)用,優(yōu)先預(yù)知用戶所想

同一件事做兩次出錯的幾率肯定比做一次要大得多,對用戶已錄入過的信息儲存,以便如需再次錄入時的直接填充。

如寄快遞購物時的填寫地址,定機酒時輸入人物信息,直接復(fù)用歷史信息,省時又不會出錯。 



6.特征明顯,對比突出可適當(dāng)夸大

視覺效果上,夸大功能性特征,能夠有效地使用戶準(zhǔn)確獲知該區(qū)域可實現(xiàn)的功能,向用戶呈現(xiàn)清晰的行為結(jié)果。


①如刪除彈窗,按鈕中文字的描述應(yīng)決定用戶接下來的行為。

“確認(rèn)刪除”是用戶行為,”確定“則是對該彈窗內(nèi)容的時間判斷,用戶是不會對彈窗內(nèi)容進行細(xì)看的,所以在按鈕文字上就應(yīng)明確用戶,準(zhǔn)確地告知按按鈕所對應(yīng)的行為。

②如Iphone的關(guān)機界面,app 內(nèi)各個入口刪除等可操作按鈕



7.感官反饋,視覺外的強化輔助

解鎖界面不同狀態(tài)下的震感反饋,提示警告類的聲音反饋,警示錯誤的發(fā)生。







 轉(zhuǎn)自:站酷-假裝不是設(shè)計師




不要讓我思考: 20 句可用性設(shè)計名言

周周

編輯導(dǎo)讀:想要做好一個設(shè)計師,就要多研究優(yōu)秀人士的作品,取長補短?,F(xiàn)在互聯(lián)網(wǎng)的發(fā)達,很容易就能在網(wǎng)上找到相關(guān)的學(xué)習(xí)資料。本文以史蒂夫·克魯格的名著作為引入,分享20句關(guān)于界面可用性設(shè)計的名言,希望對你有幫助。

設(shè)計,以及許多其他領(lǐng)域,都是建立在優(yōu)秀專業(yè)人士的作品和發(fā)現(xiàn)之上的,每個想要成為某個領(lǐng)域?qū)<业娜私?jīng)常尋求指導(dǎo)來學(xué)習(xí)如何把事情做好。專業(yè)導(dǎo)師的各種書籍和文章現(xiàn)在都可以在互聯(lián)網(wǎng)上免費閱讀,讓努力學(xué)習(xí)知識的人很方便的找到。

我們經(jīng)常會分享來自數(shù)字設(shè)計領(lǐng)域最優(yōu)秀專家的名言和睿智的想法。你會在邁克·蒙泰羅(Mike Monteiro)所著《設(shè)計是一項工作(Design Is a Job)》里找到有關(guān)設(shè)計的短暫洞察,奧倫·沃特爾(Aarron Walter)的《為情感而設(shè)計》(Design for Emotion)以及排版大師埃里克·斯皮克爾曼(Erik Spiekermann)的一系列智慧思想也是如此。

下面我們要分享的是史蒂夫·克魯格(Steve Krug)的名著《不要讓我思考(Don’t Make Me Think)》中的一組引言。

2000 年初版,14 年后再版,《Don’t Make Me Think》在今天仍然切合時代發(fā)展,符合實際需要。史蒂夫·克魯格為界面可用性設(shè)定了一些基本原則,并與該領(lǐng)域的專業(yè)人士分享,這使得本書成為 UX 設(shè)計師推薦的最重要的資源之一。

可用性第一定律——“不要讓我思考”描述了關(guān)于網(wǎng)站可用性的要點、案例和見解。創(chuàng)造不需要用戶過多思考的界面設(shè)計,不僅可以解決問題,而且易于使用。這里有 20 句名言,反映了“不要讓我思考”的一些關(guān)鍵點。

1、如果某件事需要大量的時間投入——或者看起來會這樣——它就不太可能被使用。

2、讓每一頁或每一個屏幕都不言自明,就像商店里都有良好的照明:它會讓所有的商品看起來更好。訪問一個不需要我們思考的網(wǎng)站會讓人感覺毫不費勁,相反,為不相關(guān)的事情多花心思會浪費我們的精力、熱情、還有時間。

3、無用的客套話(“happy talk”)都是一種沾沾自喜的宣傳,你可以在蹩腳的小冊子里找到。與好的宣傳文案不同的是,它沒有傳達任何有用的信息,它一個勁的說我們有多棒,而不是描述是什么讓我們這樣棒的。指示說明必須被消滅。

4、可訪問性(Accessibility)非常重要,它不僅僅是正確的做法,而且是非常正確的做法。關(guān)于無障礙訪問,如果沒有引起足夠的重視,你就無法意識到,它能顯著的改善一些人的生活。僅僅通過把工作做得更好就能顯著改善人們的生活,這難道還不夠厲害嗎?

5、另一個讓人困惑的來源是那些看起來不太明顯的鏈接或者按鈕。作為一個用戶,我永遠(yuǎn)不應(yīng)該花哪怕一毫秒的時間來考慮這些東西是否可以點擊。

6、最近幾年里,讓產(chǎn)品更加易用成為幾乎所有人的責(zé)任?,F(xiàn)在,視覺設(shè)計人員和開發(fā)人員常常要做交互設(shè)計(決定用戶單擊、按下或滑動時下一步會發(fā)生什么)和信息體系結(jié)構(gòu)(確定應(yīng)該如何組織所有內(nèi)容)之類的事情。

7、可用性(Usability)就是確保讓一個能力和經(jīng)驗一般(甚至低于平均水平)的人,能夠想出如何使用并完成任務(wù),而不必費事。相信我:事情就是這么簡單。

8、可用性是有關(guān)人們?nèi)绾卫斫夂褪褂檬挛?,而與技術(shù)無關(guān)。

9、關(guān)于指示說明,你只需要知道一點就夠了:除非“蒙混過關(guān)”多次嘗試失敗,沒有人會去讀它們。

10、你越仔細(xì)觀察用戶,并傾聽他們明確表達他們的意圖、動機和思考過程,你就越會意識到,他們對網(wǎng)頁的個人反應(yīng)是基于許多變量的。試圖用一維的“喜歡”或”不喜歡”來描述用戶是徒勞的,而且會適得其反。另一方面,好的設(shè)計會考慮到這種復(fù)雜性。

11、那些設(shè)計網(wǎng)站的人并不在乎讓事情變的明顯和容易,這會削弱我們對網(wǎng)站及其背后公司組織的信心。

12、然而在現(xiàn)實中,大多數(shù)時候我們不會選擇最佳選項,而是選擇了遇到的第一個合理的選項,即所謂的“滿意”(satisficing)策略。

13、大部分的網(wǎng)頁設(shè)計問題(至少是對重要的那些問題來說)都沒有一個簡單的“正確”答案。有效的答案是那些運作良好的、滿足需求的綜合設(shè)計,它們往往經(jīng)過了仔細(xì)思考,良好的執(zhí)行和測試。

14、刪掉每頁上一半的文字,然后把剩下的再刪掉一半。

15、設(shè)計師喜歡微妙的線索,因為微妙是復(fù)雜設(shè)計的特征之一。但網(wǎng)絡(luò)用戶通常都很匆忙,經(jīng)常會錯過這些線索。

16、如果你在設(shè)計了很多不同的網(wǎng)站之后只發(fā)現(xiàn)一件事,那應(yīng)該是:幾乎所有的設(shè)計理念——無論一開始多么糟糕——都可以通過足夠的努力,在合適的環(huán)境下變得可用。

17、你的主要職責(zé)應(yīng)該是分享你所知道的,而不是告訴人們應(yīng)該怎么做。

18、你的目標(biāo)應(yīng)該是完全刪除說明文字,讓每項內(nèi)容不言自明,或者盡可能做到這一點。當(dāng)說明文字絕對必要時,把它們減少到最少。

19、和遵循慣例去設(shè)計相比,設(shè)計師們面臨很大的誘惑去重新發(fā)明輪子。很大程度上是因為他們覺得自己被雇來是要做一些新的、不同的事情,而不是做原有的舊事情。更不用說,來自同事的贊揚、獎勵和高級職位很少是基于“最好地利用慣例”這樣的標(biāo)準(zhǔn)。雖然少數(shù)時候,在重新發(fā)明輪子上花的時間足以制造出新的革命性滾動設(shè)備,但通常情況下,這只是浪費時間而已。

20、如果你想要一個很棒的網(wǎng)站,一定要測試。因為你在這個網(wǎng)站上工作了好幾周,已經(jīng)失去了新鮮感。你了解的太多了。要想知道它是否真的有效,唯一的方法就是測試它。

 

文章來源:人人都是產(chǎn)品經(jīng)理           作者:Alina Arhipova


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

谷歌的 10 個“Material Design”設(shè)計要點(上)

周周

編輯導(dǎo)讀:如今,谷歌可以說是科技領(lǐng)域規(guī)模最大、最具有影響力的公司之一。正因為如此,它們的數(shù)字產(chǎn)品設(shè)計會對整個行業(yè)產(chǎn)生巨大的影響,成為人們競相模仿的榜樣。在該公司的UI&UX(用戶界面&用戶體驗)設(shè)計指南中,設(shè)計師們提到了10條原則,不管是iOS還是安卓系統(tǒng)都同樣適用。在這篇文章中,作者從這10條指南出發(fā),加上自己的經(jīng)驗和相關(guān)案例,在設(shè)計方面為大家提供一些建議,希望對大家設(shè)計產(chǎn)品有幫助。

1. 通過圖標(biāo)和動畫傳達意思

圖片來自Material

在沒有其他方法的情況下,圖標(biāo)可以成為理想的指示工具?!豆雀璨牧显O(shè)計指南》

在《Design of Everyday Things》一書中,有“以人為本的設(shè)計之父”之稱的唐·諾曼(Don Norman)闡述了他對圖標(biāo)的理解:圖標(biāo)就是代表動作、同時可以指示該動作以何種方式完成的元素。在數(shù)字產(chǎn)品中,我們很少會出現(xiàn)“左滑-刪除”這樣的文字指示,而是通過左滑的動作引出一個紅色的小垃圾桶來闡明“左滑就會刪除”這樣的設(shè)定。

在用戶和產(chǎn)品交互之前,插入動畫效果?!豆雀璨牧显O(shè)計指南》

如果我們希望一款數(shù)字產(chǎn)品有著極簡主義外觀,那么我們可以借助動畫來達到這一點。在上圖的例子中,最開始畫面中甚至不會出現(xiàn)垃圾桶的圖標(biāo)。在我們手指滑動后,也就是人機交互的動作產(chǎn)生之后,才會出現(xiàn)這一垃圾桶,同時也會強化“滑動表示刪除”這樣的信息。動畫效果有效簡化潔面、改善用戶體驗的功能。

2. 有動畫效果的圖標(biāo)

圖片來自Medium|制圖Eddy Gann

動畫可以展示圖標(biāo)所代表的執(zhí)行動作,從而增加流暢感和愉悅感。在兩個視覺效果之間插入帶有動畫效果的圖標(biāo),可以反映這兩個視覺效果之間的關(guān)聯(lián)?!豆雀璨牧显O(shè)計指南》

在兩個動作之間增加一個過渡的動畫,這個效果我們應(yīng)該很熟悉。最簡單的例子就是“播放/暫停”按鈕。在點播放后,該圖標(biāo)變成了暫停按鈕;點下暫停按鈕,該圖標(biāo)又變成了播放按鈕。這個變化的圖標(biāo)展示了播放和暫停兩個動作之間的關(guān)系。

這只是一個簡單的案例?,F(xiàn)在想象一段更加復(fù)雜的經(jīng)驗:比如將某個產(chǎn)品添加到購物車中,購物車圖標(biāo)會出現(xiàn)裝進貨物的動畫效果;或者想象某一功能無法使用時圖標(biāo)的彈出效果。

帶動畫效果的圖標(biāo)本身并不復(fù)雜,我們可以在Adobe XD中完成:通過給圖標(biāo)添加預(yù)設(shè)效果,或者加入淡入、淡出的效果即可。

動畫效果可以根據(jù)需要設(shè)計出簡單或復(fù)雜的運動軌跡。圖標(biāo)雖然小,卻是影響用戶體驗非常重要的一環(huán),我們可以通過設(shè)計復(fù)雜的運動軌跡來強調(diào)它的重要性?!豆雀璨牧显O(shè)計指南》

請記住,如果界面上所有的元素和圖標(biāo)都在動,那么用戶可能會不知所措。過度使用這一方法反而會削弱你想強調(diào)的重點。給圖標(biāo)添加動畫應(yīng)該適可而止。

3. 調(diào)色板的生成和使用

調(diào)色板生成工具|圖片來自Medium

調(diào)色板生成工具(Material’s Palette Generator)可以調(diào)出任何你需要的顏色,色相,亮度,色度等都可以通過一系列算法調(diào)節(jié)出來,通過算法調(diào)出的色彩實用又美觀?!豆雀璨牧显O(shè)計指南》

如果我們無法使用谷歌的調(diào)色板生成工具,手動調(diào)色就會變成一件非常麻煩的事。調(diào)色板生成工具最大的好處就在于它自動給你調(diào)出了同一種顏色的不同形態(tài)(如藍(lán)色從暗到明、從深到淺的形態(tài)),你就不需要再對照標(biāo)準(zhǔn)調(diào)色板一點點矯正了。不過即使沒有這樣的自動生成工具,你也應(yīng)該仔細(xì)檢查并矯正自己的調(diào)色工具。

4. 顏色

  • 在考慮如何使用顏色或顏色相關(guān)的問題時,指南中還提供了給界面選色相關(guān)的技巧和工具。——《谷歌材料設(shè)計指南》
  • 選擇令人難以忘記的色彩,以增強產(chǎn)品的品牌風(fēng)格?!豆雀枭试O(shè)計指南》

顏色對于數(shù)字產(chǎn)品的重要性,就像是鹽和胡椒粉對吐司的重要性一樣——添加太多了,就蓋過了吐司自身的風(fēng)味;太少了,味道就會變得寡淡。在選擇配色以求增加品牌視覺效果時,一定要仔細(xì)考慮清楚給哪里添加什么顏色。

通過有節(jié)制地在APP里添加顏色,你還可以突出相應(yīng)的內(nèi)容,如文本、圖片、按鈕等。你可能已經(jīng)注意到了,Instagram和Twitter上面布滿了色彩鮮艷的圖片和圖標(biāo),與之相對應(yīng),它的用戶界面非常簡潔,不會喧賓奪主。

色彩也可以是一種交互元素,要考慮它們在什么地方交互,希望達到什么效果。最重要的元素要用最突出的色彩?!豆雀枭试O(shè)計指南》

當(dāng)一個元素的色彩與周圍環(huán)境形成對比時,用戶會更理解它的重要性。我們可以給重要的元素增加“色彩權(quán)重”,這個概念是說增加色彩的飽和度,使用更加大膽、更吸引人的色彩,制造視覺沖擊。

另外,我們可以將重要的信息加粗顯示,讓它在第一時間進入用戶的眼睛。簡單來說,如果一種信息比另一種信息更重要,那么前者就要在色彩和篇幅上勝過后者,好讓用戶直觀地進行區(qū)分。

5. 文字類型生成工具

文字類型生成工具|圖片來自Medium

Google Fonts是谷歌研發(fā)的一款文字類型生成工具,可以使用它來調(diào)節(jié)字體、大小等。您可以根據(jù)需要調(diào)整和優(yōu)化產(chǎn)品的文字設(shè)計?!豆雀璨牧显O(shè)計指南》

字體設(shè)計是一門藝術(shù),它不僅關(guān)乎選擇某一種具體的字體,更設(shè)計如何使用、粗細(xì)調(diào)節(jié)、比例調(diào)節(jié)等,目的是增加界面的可讀性,從而增強產(chǎn)品的實用性。谷歌研發(fā)的這款文字類型生成工具為設(shè)計師提供了多樣的選擇和排版支持。通過這一款文字類型生成工具,可以節(jié)省時間,迅速生成段落、標(biāo)題、正文、按鈕等。


文章來源:人人都是產(chǎn)品經(jīng)理           作者:Danny Sapio.    譯者:Michiko


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

拼多多搶走了我媽,從淘寶手里

周周

編輯導(dǎo)讀:對于老一輩人來說,他們沒有趕上互聯(lián)網(wǎng)興起的時候,等到想要主動“觸網(wǎng)”時,才發(fā)現(xiàn)很多操作根本搞不清楚。盡管產(chǎn)品設(shè)計師已經(jīng)極可能考慮到了老人群體的用戶體驗,但在實際操作中,老人家還是一頭霧水。這時,操作越是簡單的產(chǎn)品,越能夠贏得他們的喜愛。本文作者從自身經(jīng)驗出發(fā),對這類現(xiàn)象進行分析,與你分享。

上周某天吃完晚飯,我媽遞過她的華為手機怯怯地問我:你有空嗎?我想叫你幫我跟那個商家說換一個快遞,我們家這邊的百世快遞的站撤了,叫他們不要用這個快遞。

我腦海中閃過一個念頭:嗯?最近我沒有幫她付款啊。但隨即也是接過她的手機打開了淘寶。我媽立刻阻止我:不是淘寶,是拼多多。隨即自己打開了她微信里的拼多多小程序,演示給我她找不到商家客服。我跟她說,這個功能要用APP才行,于是幫她下載了拼多多APP并很快解決了問題。

弄完之后,我們又展開了這樣的對話:

我媽:哎呀,這個拼多多真是太好了,物美價廉,超方便!你怎么不早教我用!

我:我自己都不怎么用拼多多?。?/span>

我媽:這個是我的舞友上周教我的!我打開一看,哇,好多有用的東西,又便宜!第一天我就買了幾百塊的!

我:但是拼多多很多假貨啊!

我媽:我又不像你們追求什么名牌!有什么假貨可言?一條裙子30塊!

我:……

我媽:而且!以前我在淘寶總要你幫我付款,現(xiàn)在我用拼多多自己用微信就可以支付了。

我:我早就叫你開個支付寶賬號,你自己又不開!

我媽:那么麻煩,我不會,你又不教我!而且又要綁定銀行卡,萬一哪天我的錢被人家騙走,那些什么黑客……

我:哪有黑客黑你,你又不是馬云……

我媽:還有,拼多多退貨很方便!以前我在淘寶的時候,退貨要你幫我搞,還要在家等快遞上門,很不自由,現(xiàn)在我自己去菜鳥驛站退就得了。

我:好吧。

我媽:以后我就用拼多多,我那些舞友都在用!

我:你開心就好。

我回頭想了想,這是一個以用戶定位和產(chǎn)品特征為優(yōu)勢搶奪用戶的典型場景。

首先看看以我媽為原型的粗略用戶畫像:

  • 年齡特征:60歲左右
  • 工作與生活特征:退休在家,時間較多
  • 消費能力:退休金4000元左右
  • 家庭情況:已有孫輩
  • 人際關(guān)系:以廣場舞舞友、同學(xué)、工友、插友為主的人際關(guān)系圈,集聚在微信上
  • 消費態(tài)度:不追求牌子,追求低價
  • 網(wǎng)購習(xí)慣:淘寶的老用戶,但沒有支付寶賬號;網(wǎng)購品類主要為衣物及家居用品
  • 觸媒習(xí)慣:微信(微信群、朋友圈)、今日頭條

為什么我說拼多多是從用戶定位和產(chǎn)品特征這兩個維度搶奪走了我媽這樣的淘寶用戶的呢?

首先,我用的是“搶奪”這個詞。

我并沒有用擠占、分流這樣的詞。因為,在跟我媽的交談里,我已經(jīng)感受到她心里估計“從此淘寶一生黑”了。也確實,一個月以來我媽沒有再叫我在淘寶付款過。所以,我想我媽大概率未來不會再用淘寶了,也就是說,淘寶直接流失掉了我媽這個用戶。

其次,來看看用戶定位。

根據(jù)上面我列出的以我媽為原型的用戶,多嗎?我簡單查了一下。

根據(jù)國家統(tǒng)計局官網(wǎng)上發(fā)布的《中華人民共和國2019年國民經(jīng)濟和社會發(fā)展統(tǒng)計公報》,60周歲以上的人口約有2.5億人,60-65周歲的人口約有83250000人,分別占人口總數(shù)的18.1%和6%;根據(jù)中國互聯(lián)網(wǎng)信息中心官網(wǎng)發(fā)布的《第46次<中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告>》,截止2020年6月,我國手機網(wǎng)民用戶規(guī)模達9.4億。

那么,根據(jù)這個比例可以推算,這樣的用戶大約在5千萬—1億的規(guī)模。

這么大的一個用戶群體,實際上是淘寶自己放棄掉的。自從前幾年淘寶打假貨的行動和品牌化(力推天貓)的戰(zhàn)略執(zhí)行以來,實際上大量的縣城以下、60歲以上的用戶都被淘寶放棄掉了。

以我媽為原型的這批用戶,他們大多數(shù)沒有支付寶賬號,但在微信上有錢,但除了平時發(fā)發(fā)紅包,菜市場便利店買點東西,基本上還是沒有用出去。于是,這批用戶沉淀在微信錢包里的海量的錢,很難直接轉(zhuǎn)化到淘寶上。

另外一個關(guān)鍵的地方在于,他們對淘寶是有怨言的,但在拼多多出來之前,沒有替代物。某種程度上來說,對用戶而言,忠誠度是很虛無的。真正對品牌有感情而產(chǎn)生“忠誠”的用戶極少極少,品牌還是得需要不斷優(yōu)化產(chǎn)品,滿足用戶的需求。

品牌也好,產(chǎn)品也好,本質(zhì)上是為用戶提供價值,而不是要跟用戶“談戀愛”。

這是很多品牌的一個誤區(qū)。沒有在自身的產(chǎn)品上下功夫,去了解用戶瞬息萬變的需求,而去打“情懷”,講“文化”。所以,我們可以看到當(dāng)某些品牌醉心于自己的“情懷和文化”之時,其競爭對手在了解用戶需求和優(yōu)化產(chǎn)品而推出競品后,瞬間打垮行業(yè)老大哥的案例。

最后來講講產(chǎn)品特征。

我媽使用淘寶的流程是怎么樣的呢?

挑選商品——下訂單——點擊“找人付款”——發(fā)送需支付的訂單到我的淘寶賬號——退出淘寶——打開微信——告訴我發(fā)了一個訂單——發(fā)紅包給我——我看到微信或淘寶信息——點擊需支付的訂單——支付——退出淘寶——打開微信收紅包。

而她使用拼多多呢?

挑選商品——下訂單——支付。

當(dāng)我列出這兩個產(chǎn)品使用流程之后,我猜如果你是我媽,你也會用拼多多了。

在我媽跟我的對話里,還突出強調(diào)了“退貨難”這個點。實際上是淘寶的物流服務(wù)不好嗎?并不是。我一直覺得淘寶的物流雖然不如京東,但并不差,而且也不斷在優(yōu)化升級。但為什么我媽還是覺得不好呢?這一點不能單純地從物流本身來看,而得回到淘寶的產(chǎn)品來看。

在淘寶上,推出了一個功能,叫“找人付款”。當(dāng)時我覺得這個功能很好,解決了我?guī)臀覌屬I單時,她要跳出淘寶從微信給我發(fā)鏈接的麻煩。但最終卻帶來了一個重要的弊端:當(dāng)要退換貨時,我這邊無法執(zhí)行,她那邊又不知道如何操作。

而當(dāng)我從PC端登上我媽的淘寶賬號之后,PC端的退換貨服務(wù)非常麻煩和繁瑣,讓我都研究了差不多一個小時才解決。而最后,我媽那邊又無法支付退貨費用,我在PC端也支付不了,也不能“找人付款”??傊麄€過程極其麻煩。雖然淘寶也意識到了產(chǎn)品上的缺陷,但目前的情況而言,這樣的產(chǎn)品還是對于我媽這樣的用戶非常不友好。

而拼多多呢?它基于微信這個社交生態(tài)圈。加上沒有什么太多余的功能,我媽很快就能上手了,自己操作還是比別人代操作方便多了。

談到這里,我還意識到一個重要的問題。

從產(chǎn)品對人際關(guān)系的影響而言,淘寶是負(fù)向的,而拼多多是正向的。從某種程度上而言,60歲以上的這代人,是被互聯(lián)網(wǎng)拋棄了,所以當(dāng)他們想搭上這波潮流時,不得不面對自己的兒女,需要向他們請教,怎么用怎么學(xué)。這一點首先就會讓不少子女心煩,不少父母自卑。

再進一步,如果每次父母網(wǎng)購都得“捆綁”上子女時,對人際關(guān)系是正向的嗎?而在拼多多上購物時,他們不僅可以大大優(yōu)化自己的產(chǎn)品使用流程,還能跟自己的老朋友們一起拼單,互惠互利,這對人際關(guān)系的影響有很大的正向作用。

你有什么被別的產(chǎn)品搶走的故事嗎?

一點個人小想法,想到哪寫到哪。

如果你有不同的意見和想法,歡迎評論或留言。


文章來源:人人都是產(chǎn)品經(jīng)理           作者:@源記物語


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

日歷

鏈接

個人資料

存檔