表單第三趴

人人都是產品經理 發佈 2022-05-24T01:54:21.598598+00:00

編輯導語:表單的存在可以讓用戶更加清晰地獲取反饋結果,進而推動系統與用戶之間的信息與數據傳遞。但表單的每一個細節都是設計師一點點分析修改出來的。本文作者分享了開會過程中關於表單的十個靈魂拷問,希望能給你帶來幫助。早上9:30,A產品的產品設計規範評審會如期展開。

編輯導語:表單的存在可以讓用戶更加清晰地獲取反饋結果,進而推動系統與用戶之間的信息與數據傳遞。但表單的每一個細節都是設計師一點點分析修改出來的。本文作者分享了開會過程中關於表單的十個靈魂拷問,希望能給你帶來幫助。

早上9:30,A產品的產品設計規範評審會如期展開。

設計師、產品經理、研發小哥哥悉數到場。

產品經理主持會議,說明了今天的會議主題後,設計師開始介紹產品設計規範的設計理念了。

當設計師介紹到表單規範時,大家問了很多問題。

設計師一臉懵,但只得一個個問題耐心解釋著……

這些問題,很多B端設計師都遇到過,今天,我們一起來看看吧~

一、必填項的*「要」還是「不要」

靈魂拷問場景:

拷問者說:我們的表單項默認都是要填寫的,還有必要在label前加個「*」嗎?我們覺得沒必要。

設計師說:要「*」。

1. 「要*」的理由

  1. *是用戶判斷表單項是否必填的符號,如果不帶*,會給用戶產生模稜兩可的感覺,不利於用戶明確任務目標。
  2. 若用戶沒有填寫某一項,點擊了表單提交後才發現該表單項為必填,用戶會感覺人與系統交互的過程是滯後的。而通過加*,會讓人感覺系統更人性化。

2. 「不要*」的場景

雖然以上場景建議加上*,但也有一些場景例外。比如,表格查詢區域、註冊登錄、默認選項等的場景。

結果:採納設計師的建議。

二、必填項用「*」還是「必填、選填」

靈魂拷問場景:

拷問者說:實在想不好必填項用「*」還是「必填、選填」,說說你為什麼用「*」吧。

設計師說:「*」比「必填、選填」在視覺上明顯,且不會加長label的長度。

1. 用「必填、選填」的場景

大部分設計規範是用「*」來表示必填,但也有一些產品選擇了「必填、選填」,原因在於:假如總共有10個表單項,有9個表單項必填,1個選填,那麼為了界面整潔,就可以給選填的表單項備註「選填」。

假設剛好相反,那麼給必填的表單項備註「必填」。如果它倆勢均力敵,那就標註「必填」項。

結果:採納設計師的建議。

三、必填項在label「左邊」還是「右邊」

靈魂拷問場景:

拷問者說:我們現在表單label都是右對齊,把必填項「*」放右邊,顯得整齊。

設計師說:還是把必填項「*」放左邊好。

1. 放「右邊」的理由

由於「*」位置統一,用戶直接在一個位置掃一眼,就知道必填項的多少,很方便。

2. 放「左邊」的理由

用戶是從左往右閱讀文字,因此「*」放label放左邊,符合用戶閱讀習慣,讓用戶閱讀時一眼明了哪些必填。並且目前公司大部分上線的產品均採用必填項「*」放左邊,還未有用戶提出問題,運行良好。

結果:採納設計師的建議。

四、用「select」還是「radio」

靈魂拷問場景:

拷問者說:這個場景下,「是、否」選項用戶已經習慣通過select來操作了,不要用radio。

設計師說:只有「是、否」兩個選項,直接展示給用戶操作更直觀,用戶操作路徑也短。

1. 「select」的使用場景

用戶需要通過點擊輸入框喚出下拉麵板來選擇自己需要的選項,通常選項數多於5項,可以考慮使用選擇器。建議選項按照業務需求進行排序,使用戶可以快速找到,並儘量讓內容顯示完整。

2. 「radio」的使用場景

radio組件的所有選項平鋪展現給用戶,方便用戶直接選擇,選項不宜過多,一般在2-5個之間,同時必定會有一個選項處於選中狀態。

結果:採納拷問者的建議。

雖然拷問者認同設計師給出的設計思路,但B端用戶習慣不敢隨意挑戰。用戶習慣是產品疊代與創新路上的大難題、攔路虎,設計師經常被用戶習慣這個理由打回去改設計稿,怎麼破呢?

五、用「線索模式」還是「說明模式」

靈魂拷問場景:

拷問者說:你來說說放在輸入框裡的文字和放在輸入框下面的文字有啥不同,我看都是提示文字。

設計師說:嗯,還是有很大不同的。

1. 線索模式

大家記不記得時間控制項中有「請選擇日期」,搜索框中會有「請輸入IP位址」等線索文字,這就是線索設計模式。假如搜索框中什麼文字也沒有,用戶就會搜索一次錯一次,因為設計者沒有給用戶框定搜索邊界。因此線索設計模式可以讓界面不言自明。

2. 說明模式

說明模式是輸入框下面的文字,該文字是用來解釋輸入框中內容的輸入標準、注意事項、要求等的,會比線索模式的文字更完善和具有指向性。採用信息說明模式時,建議文案精簡、設計直觀,保證用戶在無需猜測,便可以根據說明自己操作和成功完成操作。

結果:採納設計師的建議。

拷問者覺得設計師說的很有道理,這塊上再也不糾結了,直接按照設計師定的設計規範來。

六、說明文字的句號「要」還是「不要」

靈魂拷問場景:

拷問者說:我看好多產品,表單項的說明文字都是不帶「句號」的,但是我覺得它們是一整句完整的話,是不是應該帶句號呢?

設計師說:我覺得應該不帶句號,界面看起來整潔一些,而且就如你說的,大部分產品也確實這麼做。

1. 一番深挖

設計師不放心,會後繼續深挖了一下。

還別說,有類似疑問的小夥伴還挺多的。比如,有人問:插圖(手繪插畫、攝影圖片)下面的說明文字需要加句號嗎?還有人問:「特此通知」「特此證明」究竟要不要加句號?

看來一個小小的句話,讓很多人產生了疑惑啊。

《標點符號用法》(GB/T 15834-2011)標準規定了現代漢語標點符號的用法。該標準適用於漢語的書面語(包括漢語和外語混合排版時的漢語部分)。

其中說到了「圖或表的短語式說明文字,中間可用逗號,但末尾不用句號。即使有時說明文字較長,前面的語段已出現句號,最後結尾處仍不用句號」。

可見,說明類文字,可以不加句號。當然加也可以,只是會顯得多餘。

結果:採納設計師的建議。

七、用「加減」還是「上下」數字選擇器

靈魂拷問場景:

拷問者說:element數字選擇器是「加減」設計;antd是「上下」設計,而且還是滑鼠hover顯示的「上下」圖標,你怎麼看?我們用哪種?

設計師說:我們產品目前兩種都不用,是antd的「上下」設計,但不是滑鼠hover顯示,而是常顯。

1. 理由

唐納德·諾曼在《日常的設計》中說:產品外觀必須能夠說明問題,能自然而明顯地體現外觀與其作用之間的關係,使用戶一看就明白。

「加減」數字選擇器其實是個不錯的選擇,它符合唐納德·諾曼的說法。但「加減」在選擇器的兩端,對用戶來說,需要通過滑鼠左右跨度移動才能完成操作行為,比較費力費時。

而antd的「上下」hover設計,對於用戶來說不夠直觀,用戶並不能一眼知曉這是數字選擇器,表象上來說,就是一個文字輸入框。但優勢是,滑鼠停留在一個區域,就可以完成數字的增減。

因此,結合了它們兩者的設計優勢,及抹去了設計劣勢,我們用了現在的數字輸入框。

結果:採納設計師的建議。

拷問者連連拍手稱讚,認為設計師有思考,做的好。

八、用「checkbox」還是「switch」

靈魂拷問場景:

拷問者說:這個「節點復用」欄位不要用「checkbox」,用「switch」,它看著更好看點。

設計師說:不能因為它長得好看而用它,還是要以用戶認知和操作提效角度出發。

1. 「checkbox」的使用場景

checkbox用於在一組選項可以多選時使用。單個複選框可以表示在兩種狀態間切換,例如我們在註冊APP時,APP會讓我們選擇「是否同意該協議」,如果同意,我們在checkbox上打鉤即可。

2. 「switch」的使用場景

switch用於切換單個選項的狀態,類似電燈按鈕的開和關。在開關本身可以表達清楚狀態的情況下,可以不在開關上加文字。若無法表達清楚的情況下,建議在開關內加入例如「禁用/啟用」等說明狀態的文字。

由上我們可以發現:

checkbox(單個複選框)和switch都有讓用戶在兩個狀態下選擇的寓意,但switch最初的設計起源就是與「開和關」相關的,後來才慢慢被拓展使用。在使用switch時,給用戶的感覺更是強調開/關之類的動作態的互斥狀態。

checkbox的優勢是,可以讓整個組件描述會更清晰,就像在做填空題一般。

結果:採納拷問者的建議。

「節點復用」並不需要如做填空題一般,復用/關閉是和開/關一樣的動作態選項。

九、label用「左對齊」還是「右對齊」

靈魂拷問場景:

拷問者說:我看業界產品表單項的label左對齊和右對齊都有,你說說我們該用哪種呢?

設計師說:定義一種,特殊場景再定義。

1. 一番深挖

馬泰奧·彭佐在2006年進行了label對齊的眼動實驗,結果如表所示。

可見,從用戶填寫速度、完成率、認知壓力等方面來說,「label頂對齊」優於「label右對齊」優於「label左對齊」。

對於「label頂對齊」來說:雖然占用大量的垂直空間,但label和輸入框非常緊密,有利於用戶瀏覽和填寫。

對於「label右對齊」來說:人類的閱讀習慣是從左往右讀,而偏偏label左邊是不對齊的,因此會有些影響用戶的閱讀效率,但label與輸入框聯繫緊密,填寫速度也較快。

對於「label左對齊」來說:label與輸入框聯繫不緊密,特別是當label之間的長短差距非常大的時候,還會導致用戶填寫表單的時間過長,但label可讀性較強,且界面整體看起來較為清晰。

除上述外,還有一種「輸入框內label」的設計模式,這種模式會讓界面乾淨整潔,且與輸入框聯繫很緊密,唯一的缺點是,當用戶激活輸入框準備輸入內容時,label會消失,不利於他們回憶表單所需要他們填寫的信息。

結果:採納設計師的建議。

拷問者聽完設計師的闡述,認為這塊在自己的認知範圍之外,聽設計師的沒錯。

十、短頁面表單主次操作按鈕怎麼擺放

靈魂拷問場景:

拷問者說:我看表單的主次按鈕順序有好多種,到底哪種比較合理呢?

設計師說:這個有人做過實驗,我們一起來看看。

1. 一番深挖

Luke Wroblewski和倫敦的可用性專家Etre做過一次實驗,專門對網頁表單設計的主次按鈕進行眼動研究。首先確定什麼是主次按鈕。例如我們期望用戶對表單進行保存的,那麼此就是主按鈕,取消則為次按鈕。

他們還討論了例如「重置」按鈕有無必要,因為很多用戶會誤點,但調查發現,重置按鈕在某些場景下也是有用的,因此,好的辦法是將主次按鈕視覺上區別對待。

他們的實驗選取了以上6個表單場景。最後發現,ABCDF都能使得用戶成功完成任務,並且用戶完成時間也差異不大,且用戶的滿意度評價也不錯。出乎意料的是,B是表現最好的。

我們常說,主按鈕與次按鈕要區分視覺樣式,加快用戶操作效率,而事實上,不論按鈕是否顏色不同,用戶在做出選擇前,總是會再次確認按鈕上寫的是什麼。

這就像C的一部分用戶所說,將主次按鈕進行區分,反而讓我們認為按鈕怎麼了?減慢了他們的決策,讓他們再次核對自己是否正在點擊正確的按鈕。

結果:採納設計師的建議。

拷問者聽完設計師的闡述,認為這塊在自己的認知範圍之外,聽設計師的沒錯。

十一、RRRA原則

從這10個靈魂拷問我們可以發現,一些看似不同的設計方法之間,對用戶的決策和操作影響不大;而另一些不同的設計之間,對用戶會產生不同的決策影響。我們能做的,就是記錄、假設、驗證、沉澱,我們不能做的就是憑感覺。

這裡知果總結了表單設計的RRRA原則來指導我們的表單設計,分別是:

1. 減少(reduce)用戶思考時間

使用表單需要啟動用戶的邏輯思維,沒有人喜歡使用表單,越讓用戶少思考,對用戶來說他們是越開心的。因此,結構化表單內容、簡化表單信息、清晰排版布局等,有利於減少用戶思考的時間。

2. 減少(reduce)用戶操作時長

必填信息有提示、專業術語有解釋、默認選項有預填等,都可以減少用戶的操作時長。

3. 減少(reduce)用戶操作錯誤

金額、卡號、身份證自動格式化,填錯信息及時友好反饋等,可減少用戶操作錯誤。

4. 提升(improve)用戶操作效率

無必要不亂拆解步驟、簡化及清晰文案表達、扁平化交互等,可提升用戶操作效率。

任何形式的表單設計,符合以上4個原則,那麼距離用戶認為好的表單設計就不遠了。記住,任何表現形式或設計方法,不服務於用戶需求,不能達到用戶所望,都可以說是還值得在進一步思考的設計。

十二、寫在最後

表單是連接產品與用戶的重要橋樑。而表單的設計細節多之又多,每更換一個產品,同樣的表單問題會需要設計師再處理一遍。

通過上述第三趴的表單整理,相信大家對表單又有了進一步的認識。

表單設計不可怕,最怕我們不了解業務場景、流程與用戶訴求,僅僅按照經驗來設計。

很多時候,個場景下驗證有效的設計策略,放在另一個產品中就不適用了。

好了,今天知果的分享就到這裡,我們下期見~

#專欄作家#

知果,公眾號:知果日記,人人都是產品經理專欄作家。浙江工商大學品牌設計專業碩士,《B端思維-產品經理的自我修煉》作者。在產品設計流程、產品設計原則、產品設計方法、產品設計規範方面均有豐富經驗

本文原創發布於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議

關鍵字:

又能清潔又保濕的洗面乳,讓洗臉也變成是一種享受!

2021-07-13T08:21:12.694177+00:00

洗臉的時候最怕⋯ 清潔款|洗完乾巴巴的 保濕款|滑滑的好像沒洗乾淨

 

洗完臉都很不舒服欸⋯

沒有又清潔又保濕的洗面乳嗎~

有!兩者兼具就是它!

34%胺基酸洗面乳

 

剔除缺點,只留下優點:

胺基酸微米泡泡溫和清潔

尿囊素舒緩敏感反應

減少荳刺生成問題

 

開啟一週淨膚模式

滑溜感、光澤度都回來了!

 

商品資訊

第一支專洗毛孔的洗面乳

MAGICOM 34%胺基酸洗面乳》

市售最高日本34%胺基酸x專利補水嫩白因子x尿囊素萃取

 

https://www.cashin.tw/product/000000000034858