99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

懂后臺的產品經理更值錢!3周線上課程,帶你掌握電商后臺12個子系統模塊設計要訣。了解一下>

你是否留意過B端產品中彈窗的應用?你是否曾猶豫過該用彈窗還是頁面呢?

可能很多產品經理覺得這是一個無關緊要的點,只要功能實現了就可以了,畢竟只是一種展示形式而已。

其實不然,我們之前在用戶調研中收到這樣的反饋:感覺流程很長,操作太復雜了。但是該有的功能不能少??!怎么辦?我們把很多頁面改成了彈窗,用戶說:我覺得這樣流暢多了。

之前我們也一直在強調B端產品的精細化設計,本文就這個小點來深入地探討下,可能會讓你有所啟發,讓產品設計更加的人性化。

彈窗 VS 頁面

彈窗和頁面就是2種展現形式,沒有絕對的好和不好,只有怎么應用會帶來更好的用戶體驗。

1. 減少跳出感:彈窗勝

我們點擊按鈕后,如果是跳轉到新頁面,就會有很強的跳出感,特別是當加載速度慢時感受尤為強烈。

比如說患者到診所后的登記流程,從登記頁面到完成掛號收費,再回到登記頁,要跳轉4次,讓前臺感覺操作很繁瑣:

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

如果我們把其中2個頁面做成彈窗,用戶感知上流程就變成了下圖這樣,2步就可以完成登記,比之前少了2步操作,簡單多了。

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

2. 減少跳轉引起的錯誤:彈窗勝

因為頻繁的跳轉,有些用戶跳出去以后不知道怎么回去了。我們可以看下面這個小視頻,本來是在醫生門診的,因為點擊了預約,直接跳到了新頁面,然后點擊預約頁面上的返回按鈕,返回到了預約列表頁面,而不是原先的醫生門診頁。

我估計很多醫生都懵了,明明只想簡化操作,直接在門診時就給患者約好下次看診時間,卻在跳出后還要找到入口重新進去。

更糟糕的情況是,如果頁面上的內容填寫到一半沒有保存,跳出回去之后全軍覆沒了,醫生還要重新填寫一遍,真是欲哭無淚啊。每次在點擊這個按鈕前都要仔細地想想:我的內容都保存了嗎?這是最后一步操作了嗎,一會還要回來嗎?如此左思右想的時間,直接拉低了工作效率。

為了驗證我的猜想,我去看了下后臺的埋點數據,果真使用率很低,不排除說開展預約服務的用戶數量少,也不排除直接在門診時就約下次的情況少,但這功能做的我也不敢用啊,一點就有膽戰心驚的感覺。

后來設計的時候就把這個功能改成了彈窗,不管任何時候想進行預約,都不用擔心找不到回來的路,也不用擔心沒有保存了。

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

當然還有一種做法是不直接覆蓋原頁面,新開窗口進行跳轉,這種能減少很多錯誤。但有一個缺點是:當新開頁面很多時,用戶想要點擊回去的那個頁面也得找一下,有時還沒直接點擊左側菜單欄快。

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

但畢竟不是所有的功能都適合做成彈窗形式的,比如我在門診時想看下患者的完整資料,這個時候就適合新開窗口跳轉,因為病人資料庫里面的內容太多了,而且兩個頁面可以對比來看,更加清晰。

新開窗口跳轉的方法也是很常用的,但要注意的是不要太多,否則就會像上面那個密集的tab了。

3. 信息承載量:頁面勝

從面積來看,彈窗會比頁面小,故容納的信息量也比較少,如果內容較多,彈窗要么會看起來很擠,要么需要滾動,會減低用戶的使用效率,畢竟大部分的B端用戶恨不得一頁上能顯示所有的東西。這也是上面說到的病人庫不適合做成彈窗形式的原因。

信息量多不代表只能用頁面,比如說這個系統,雖然患者信息很多,但還是用了彈窗的形式,因為他在很多地方都調用到了這個彈窗,為了減少跳出率,也為了使多處的體驗一致且更流暢,他在原先有頁面的情況下還是做了個彈窗。

現在有些系統為了讓彈窗的信息承載量變大,做成了全屏彈窗。這個下面會講到。

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

如何選擇合適的彈窗?

當我們決定使用彈窗了,下面就要挑個漂亮的彈窗了。根據頁面信息量的多少,我們會給出幾個彈窗大小的標準。

1. 根據信息量選擇

(1)全屏彈窗

這種和頁面相比肩,又有彈窗性質的彈窗,真是讓人又愛又恨。完美解決了頁面跳出的問題,也解決了信息量承載少的問題。但在現實中發現,有些用戶剛用時比較懵,右上角的叉號小且不明顯,菜單欄還被遮住了,不知道該如何操作。

這也是因為全屏彈窗還不夠普遍的原因,用戶習慣還沒有被培養起來。你可以試下培養用戶習慣,不然的話就還是縮小一點,用個超大屏彈窗,四周留點底,用戶認知更輕松點。

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

至于大、中、小、提示彈窗大家都很好理解,這邊只是提示一下,系統里面要制定好這3個彈窗的尺寸標準,千萬不要讓開發隨意發揮,導致每個彈窗大小都不一樣,比如:這是我們定的標準。

(2)大彈窗

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

(3)中彈窗

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

(4)小彈窗

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

2. 彈窗不只能居中

一般彈窗的位置就2種,居中和右側。右側彈窗的好處是:如果比較窄的話,左側內容不會被遮擋住,信息量更大。

如果對覆蓋住的信息展示要求不高的話,居中彈窗就可以了。

居中:

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

右側:

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

彈窗使用小tip

最后提示2個注意事項。

1. 彈窗疊彈窗

這是交互最不喜歡的,他們的理念是:彈窗就是一個最小集合了,不能在彈窗上疊加彈窗,這樣無限制疊加下去,豈不亂了規則。

但對于B端產品來說,哪有那么多規則,效率第一,好用第一。你看下面這張圖,就包含了3個彈窗:全屏彈窗、右側大彈窗、居中小彈窗。并沒有不和諧的感覺。

所以不要多顧慮彈窗疊彈窗的問題,大膽去用吧。

99%的產品會忽視的細節,教你巧用彈窗撬動用戶體驗

2. 彈窗關閉

這個需要注意下,彈窗里面的信息分2類:一類是填寫的數據需要保存的,比如說病歷;一類就是選擇瀏覽的,比如說選擇模板。

需要保存信息的就不能點擊空白處就消失,點擊關閉按鈕時最好也提示下是否需要保存;另一類就可以簡單地處理,點擊空白和關閉按鈕時直接消失。

總結

用彈窗還是頁面,沒有絕對的標準,有的系統很喜歡用彈窗,有的系統很喜歡用頁面,但刨除個人喜好,我們希望彈窗的使用是讓用戶體驗更好,更少的跳出感,更少的錯誤,更流暢的操作。

至于選擇什么尺寸的彈窗,位置怎么放,根據內容量和性質來定就行。

最后,千萬不要被彈窗不能疊彈窗這類的規則束縛住,勇敢的去用吧。

#專欄作家#

司馬特小隊,公眾號:司馬特小分隊,人人都是產品經理專欄作家。8年+互聯網資深產品經驗,多年B端產品管理經驗。具有多個從0到1的大型B端產品的孵化、重構、迭代經驗;主要教授產業互聯網產品相關的硬核知識點。

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

題圖來自Unsplash,基于CC0協議。

給作者打賞,鼓勵TA抓緊創作!
評論
歡迎留言討論~!
  1. 8年B端產品經驗,關注 訂閱號 ”司馬特小分隊“,這里有你想要的各種硬核B端干貨

    回復
钱龙捕鱼漏洞技巧