最近做了一個(gè)項(xiàng)目，遇到一個(gè)經(jīng)典的用戶體驗(yàn)案例，所以決定拿出來(lái)和大家分享一下。當(dāng)然，因?yàn)樯婕暗巾?xiàng)目保密的問題，所有素材都是我臨時(shí)重新制作的。由于只是用來(lái)說(shuō)明問題，所以制作的比較隨意，難看了點(diǎn)，希望各位見諒。
這是一個(gè)h5套殼的手機(jī)APP設(shè)計(jì)，我所負(fù)責(zé)的部分是設(shè)計(jì)——我屬于設(shè)計(jì)外包，程序是客戶方自己實(shí)現(xiàn)的。當(dāng)然，這個(gè)項(xiàng)目比較曲折，因?yàn)榉N種原因，到后期我并沒有繼續(xù)參與下去，然而，問題就是這么發(fā)生的。
關(guān)于那個(gè)引發(fā)慘案的切換按鈕，是一個(gè)極小的功能，小到我們平時(shí)都不會(huì)關(guān)注到，但是卻在主流程里的一個(gè)按鈕。這個(gè)按鈕只有兩種狀態(tài)，所以在設(shè)計(jì)上其實(shí)并不復(fù)雜。但是恰恰就是這么一個(gè)小小的按鈕，結(jié)果鬧出了大亂子。讓我們先來(lái)看看第一稿的樣子：
這個(gè)設(shè)計(jì)很土，但是功能性上，至少并沒有產(chǎn)生什么歧義。點(diǎn)擊按鈕，切換當(dāng)前狀態(tài)，邏輯上非常容易理解。唯一的問題：丑！于是，調(diào)整了一個(gè)版本，提交了過去：
滑槽設(shè)計(jì)，設(shè)計(jì)中比較常見的方式，現(xiàn)實(shí)生活中也有原型，相對(duì)而言，比較容易理解。只是程序?qū)崿F(xiàn)上，為了圖效率，圖方便，效果打了很大的折扣。
這個(gè)版本提交完成以后，感覺這個(gè)項(xiàng)目太累，客戶對(duì)于用戶體驗(yàn)這塊的干涉過多，卻又有很多問題。所以提交完了這個(gè)完整版本以后，果斷結(jié)單。后續(xù)的設(shè)計(jì)修改，移交給了客戶方的設(shè)計(jì)師——當(dāng)然，費(fèi)用上，也適當(dāng)做了一些讓步，畢竟，這是由于我個(gè)人原因終止合作了——雖然提交了完整版本。
客戶設(shè)計(jì)師改的版本，我并沒太在意，想來(lái)是客戶希望這個(gè)按鈕能夠“高端大氣上檔次”，所以讓自己的設(shè)計(jì)改了個(gè)看起來(lái)復(fù)合時(shí)代潮流的扁平版本，但畢竟是個(gè)小功能，我也并沒有覺得問題有多大。但是，沒想到的事情發(fā)生了。
上線后沒幾天，當(dāng)時(shí)對(duì)接我的pm突然找到我。堅(jiān)稱我設(shè)計(jì)的這個(gè)界面結(jié)構(gòu)有問題，要我找到問題改掉。我也納悶了，中規(guī)中矩的設(shè)計(jì)，怎么可能有問題。pm說(shuō)是進(jìn)入后的用戶完成主流程的概率太低，流失率很高。根據(jù)以前的經(jīng)驗(yàn)，我判斷了下，應(yīng)該是主流程里某幾個(gè)環(huán)節(jié)發(fā)生了問題。
于是，我說(shuō)服了pm，讓程序在主流程的每個(gè)節(jié)點(diǎn)、每個(gè)功能按鈕里埋了采樣點(diǎn)，持續(xù)觀察了兩天，終于確定了問題——問題就出在了上面那個(gè)按鈕上。
拿著數(shù)據(jù)，找到了pm，告訴他，讓他們的設(shè)計(jì)師重新修改這個(gè)按鈕的設(shè)計(jì)，就能改善這個(gè)問題，看到了數(shù)據(jù)，pm將信將疑，讓設(shè)計(jì)又改了一稿。本以為事情到此告一段落了，但是沒過幾天，pm又來(lái)找我了，說(shuō)問題沒改善，反而更嚴(yán)重了！于是我看了下他們修改的界面......
這個(gè)調(diào)整，簡(jiǎn)直就是災(zāi)難......pm表示無(wú)法和自己的老大交代了——畢竟，這個(gè)按鈕的設(shè)計(jì)是他們老大定的。于是拉著我去找了他們的老大。一翻解釋和交涉后，最后在客戶老大的深思熟慮下，又用回了第一稿（對(duì)于設(shè)計(jì)師而言，這個(gè)場(chǎng)景是不是很熟悉？）——當(dāng)然，這次終于happy ending了，用戶的數(shù)據(jù)在新版本上線后，終于快速回升了——我不確定是否真的是因?yàn)檫@個(gè)按鈕方案的調(diào)整，但是我相信，應(yīng)該是有很大關(guān)系的。
為什么這么一個(gè)很小的切換按鈕會(huì)出現(xiàn)這么大的問題？之前說(shuō)了，這是一個(gè)很小的功能，但卻是主流程上的功能。但凡是功能按鈕，無(wú)一例外的是需要謹(jǐn)慎對(duì)待的——更何況是在主流程上的。
在任何功能性的頁(yè)面上，設(shè)計(jì)的核心是滿足功能的需求，美觀只能排第二位。功能的需求分幾方面：1、必須要為功能設(shè)計(jì)合適的UI；2、必須要讓用戶看到圖標(biāo)后，對(duì)于圖標(biāo)能夠無(wú)障礙理解，并正常使用。
第一個(gè)版本的設(shè)計(jì)雖然土鱉，但是至少不會(huì)出錯(cuò)，用戶一看就知道，理解成本相對(duì)比較低。
第二個(gè)版本的設(shè)計(jì)似乎好看了一些，但是實(shí)用性上來(lái)說(shuō)相對(duì)不高，并且實(shí)現(xiàn)成本上比較高。好在現(xiàn)實(shí)生活中，類似的滑槽設(shè)計(jì)比較多，所以理解成本相對(duì)也是比較低的。但是由于實(shí)現(xiàn)成本提升以后，為了妥協(xié)進(jìn)度，去掉了滑動(dòng)的動(dòng)效，在某種程度上，其實(shí)是降低了用戶體驗(yàn)的。
第三個(gè)版本，其實(shí)是第二個(gè)版本的一個(gè)簡(jiǎn)化——應(yīng)該說(shuō)是所謂的“扁平化”，但是問題也由此出現(xiàn)了，“扁平化”之后，圖表意性被降低了，用戶看到這個(gè)按鈕的第一反應(yīng)，是需要理解“這是個(gè)什么”？一旦理解成本提升了，那么歧義就會(huì)產(chǎn)生，就會(huì)干擾用戶的正常行為。所以，數(shù)據(jù)不好看，和這樣的調(diào)整脫不開關(guān)系。
至于第四個(gè)版本，原本是希望通過增加提示文字的方式提升“扁平化”以后帶來(lái)的圖表意性的缺失。但是事與愿違，問題反而擴(kuò)大了：在這樣一個(gè)按鈕上，你無(wú)法分辨什么是當(dāng)前狀態(tài)，什么是可切換的狀態(tài)。用戶理解成本再次提升，歧義變得更嚴(yán)重了。
所以，最終回到了第一稿，雖然丑，但是至少能夠說(shuō)明問題。
總結(jié)了這次項(xiàng)目遇到的問題，以下幾點(diǎn)是值得思考的：
1、任何視覺設(shè)計(jì)方面的東西，都必須把實(shí)用與信息傳達(dá)放在第一位，美觀是其次考慮的問題；當(dāng)然這不是說(shuō)美觀不重要，而是在取舍的時(shí)候，這是一個(gè)衡量標(biāo)準(zhǔn)。
2、扁平化的確能夠去除不必要的視覺干擾，但是需要防止過度扁平后帶來(lái)的圖表意性的缺失；
3、設(shè)計(jì)的再好看，程序無(wú)法實(shí)現(xiàn)，依然是白搭。甚至由于不恰當(dāng)?shù)耐讌f(xié)，會(huì)產(chǎn)生用戶體驗(yàn)上的干擾。所以設(shè)計(jì)師的工作，并不是psd提交了就結(jié)束了。
4、沒有數(shù)據(jù)，就無(wú)法驗(yàn)證設(shè)計(jì)的好壞。甚至出了問題，你也只能干瞪眼白挨鍋。所以，不重視數(shù)據(jù)的設(shè)計(jì)師，不是好運(yùn)營(yíng)；
5、這個(gè)項(xiàng)目并沒有做小規(guī)模的abtext，也正因?yàn)闆]做abtext，所有調(diào)整，只能用正式版本做小白鼠，這種行為相當(dāng)危險(xiǎn)；
6、接外包的時(shí)候，最好有自己合作熟悉的程序員一起合作接整包。盡量避免接單包設(shè)計(jì)的單子，以免后續(xù)扯皮；
7、永遠(yuǎn)準(zhǔn)備好第一稿，萬(wàn)一哪天第一稿復(fù)活了呢？
13450931319
微信登錄
QQ登錄
微博登錄
售前咨詢
