藍藍設(shè)計( tweetduck.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里
來源:莫貝網(wǎng)
初入交互設(shè)計工
作,最常見的需求就是——放按鈕。放按鈕看起來是超級簡單的事,無非就是設(shè)計按鈕的樣式、擺放按鈕的位置、確定按鈕的狀態(tài)與反饋等,但殊不知其『麻雀雖
小,五臟俱全』,小小的按鈕設(shè)計中也蘊含了很多交互設(shè)計的思維,當然除了設(shè)計本身之外,還能看到如何平衡開發(fā)、產(chǎn)品以及用戶各方的需求。
所以,本文章會通過三個真實但抽象的例子說明工作中『放按鈕』是怎么做的。真實說的是案例來源于實戰(zhàn),抽象就是提煉出思維但講的場景都是虛擬的,免得透露機密。有趣的是,三個按理都和時間、時效有關(guān)。
案例一
虛擬場景:某訂單頁面,商品訂單以卡片的形式羅列,每個卡片下方有若干操作按鈕,如支付、取消、投訴等。根據(jù)規(guī)則,投訴按鈕必須在訂單產(chǎn)生2天后才可使用。
現(xiàn)狀:目前產(chǎn)品線上的設(shè)計方案是,幾個按鈕同時呈現(xiàn)可點擊狀態(tài),當投訴按鈕處于可用時間段內(nèi)時,點擊就會去往一個投訴頁面填寫投訴申請;當目前處于不可投訴時間段內(nèi),投訴按鈕點擊后彈窗提醒用戶:還有 XXX 時間才可發(fā)起投訴。
目標:提出這個案例時,我們希望讓這個操作過程更加自然,不要讓用戶點擊了之后才告訴用戶這個功能不可用,而不要脫離用戶的交互期望(如果按鈕可用,交互期望就應(yīng)該是實現(xiàn)相應(yīng)的功能)。
設(shè)計過程:
最開始考慮這個案例時,我的第一反應(yīng)就是如果一個按鈕當前是不可用的,就應(yīng)該隱藏起來,這個場景按鈕還是挺擠的,明明不能用的東西為什么要放在界面中吸引視線呢?
但是很明顯,這個第一感覺有嚴重的硬傷。首先,對于一個按鈕或功能,告訴用戶這個東西不可用,和不告訴用戶有這個功能,是完全兩碼事。尤其是一個存在可用/不可用兩種狀態(tài)的按鈕,在特定時間將其隱藏的風險非常大——你不知道這個功能的被需要度多高。
于是,我們?nèi)ゲ殚喠艘幌聰?shù)據(jù)和之前的設(shè)計方案。首先得出的結(jié)論是,這個按鈕的點擊率不低(超過10%的用戶,而且這個頁面的總 pv 非常高),其次,以前有嘗試過把這個按鈕直接在不可用時隱藏的設(shè)計,但是立刻引來了大量的客服投訴——用戶找不到投訴入口在哪里了。
所以,似乎數(shù)據(jù)和歷史方案幫助我們排除了第一種做法,也就是直接隱藏按鈕。那在不可用期間把按鈕置灰怎么樣?
置灰的好處在于,用戶一眼就能看到這個功能的存在,同時又能知道這個功能暫時是不可用的。但是問題也來了,怎么知道這個按鈕什么時候可點什么時候不可點?一個解決方案是在置灰的按鈕中加上文案提醒,另一個是點擊置灰的按鈕后給出文案提示,但是前者似乎沒有足夠的空間進行展示了,而后者看起來不錯……但是好像又回到了原點?(后來還討論過一些更復(fù)雜的方案,比如最后半天置灰,更早的時候隱藏等,但我們并無法判斷用戶對時間點的真實感受和期待。)
所以最終的結(jié)論就是,由于當前的線上形式并沒有什么致命的問題,也沒有收到太多關(guān)于體驗方面的投訴,而考慮到開發(fā)成本、設(shè)計成本和迭代周期,還是選擇保持線上的樣式不變。
感覺走了一圈走回原地?在實際工作中經(jīng)常遇到這樣的情況,設(shè)計師通過本能和直覺判斷某些內(nèi)容的體驗可能不是最佳的,但經(jīng)過資料搜集、自我批判、成本評估后發(fā)現(xiàn),似乎保持現(xiàn)狀是最好的做法。
總結(jié):這個案例告訴我們,設(shè)計時不要總想著找茬,第一反應(yīng)往往可能漏過了諸多細節(jié),思考清楚再做行動。
案例二
虛擬場景:對商家或商品進行投訴之后,需要用戶選擇投訴原因,如態(tài)度不好、價格變動、缺貨等。其中,在某些特殊時間段內(nèi),如該商品本身就是秒殺商品,用戶發(fā)起投訴時則不能選擇『缺貨』原因。
現(xiàn)狀:線上目前沒有這個功能,即所有的投訴原因都是可選的,選擇組件使用的是 picker,大概如下圖的樣式(最常見的就是選擇時間啦)。
目標:對于『缺貨』這個投訴原因進行交互處理,令其在特定時間段內(nèi)(商品秒殺階段)無法選擇,并給用戶相關(guān)提醒。
設(shè)計過程:
乍一看和案例一非常相似,但其實差別還是挺大的。案例一屬于設(shè)計師自
發(fā)嘗試對體驗改進,而案例二確實明確的業(yè)務(wù)需求,需要把沒有的功能融入到現(xiàn)有方案中。拿到這個需求時,首先看到大概會涉及兩個頁面可以用來設(shè)計,分別是投
訴頁面和投訴原因選擇頁(這兩個通常不會直接在一起,但是后者有可能以彈層的形式出現(xiàn),當然也可能新開頁面),于是閃過幾種可能的處理方案。
方案一,在投訴頁面提前進行文案披露,告訴用戶『缺貨』原因不可選,同時進入原因選擇頁時將『缺貨』選項置灰;
方案二,原因選擇頁的『缺貨』按鈕正常可選,選擇后通過彈窗提醒用戶該原因不可用,并恢復(fù)默認待選原因狀態(tài);
方案三,僅設(shè)計原因選擇頁,在『缺貨』選項內(nèi)提供文案如『暫不可選』,并且置灰該選項。
詳細了解需求背景之后,方案三首先被排除了。原因很簡單,本身置灰就已經(jīng)表示不可選了,『暫不可選』文案所表達的內(nèi)容太少,既沒有展示出不可選的原因,也沒有告訴用戶什么時候恢復(fù)該投訴選項。同時,我們得知反饋的文案會比較長,大約有十幾個漢字,按鈕本身的空間有限,并且直接在原因字段內(nèi)拼接『暫不可選』也會有點技術(shù)成本。
方案二在流程上是順暢的,但是和案例一中提到的類似,我們一般希望用戶在操作之前就能預(yù)期到交互的結(jié)果,而不是讓可選的按鈕點擊后出現(xiàn)提醒再告訴用戶不可選。
同時考慮方案一,對于按鈕置灰有一個問題需要考慮,可以看到無線端使用的是這種滾輪式的選擇組件,其本身置灰能不能做是要打個問號的,事實上和開發(fā)溝通之后發(fā)現(xiàn)確實無法實現(xiàn)。最后,綜合考慮下,還是采用了方案二。
總結(jié):通過案例二可以看到,設(shè)計中常常會有一個最優(yōu)解,但又總會因為技術(shù)成本、其他業(yè)務(wù)原因的影響去妥協(xié),最后得到的方案也許不是交互上最佳的,但確實整體效率最高的。這也說明了,新人不要輕易對其他產(chǎn)品做體驗分析,因為你并沒有這些真實限制,所得出的結(jié)論也是空中樓閣。
案例三
虛擬場景:某些操作是有時效的,比如某個商品限量銷售,如果還沒有到付款的時間節(jié)點,付款功能是不可用的,那么付款按鈕能否優(yōu)化處理。
現(xiàn)狀:當商品不在支付時間段內(nèi),付款按鈕隱藏。
目標:不要讓用戶找不到付款按鈕,令操作更加順暢,可見性更強。
設(shè)計過程:
和案例一一樣,這也是一個設(shè)計師自發(fā)想要改善體驗的過程,正好有其他業(yè)務(wù)需要對這些頁面進行改造,能否把這個按鈕隱藏的過程優(yōu)化呢?原因相信大家都能理解,把不可用的功能藏起來,總歸不是最好的做法。
仔細查看線上的樣式我們發(fā)現(xiàn),這個案例和案例一還不太一樣。最重要的一點是,付款的時間是有倒計時的,也就是說即便付款按鈕本身是隱藏起來的,但其附近依然有文案提醒現(xiàn)在不在支付時間內(nèi),所以用戶不太容易迷惑。
比較簡單的解決辦法就是,把支付按鈕暴露出來,并且置灰??磥斫裉烊齻€案例都和置灰杠上了。經(jīng)過交互小組和產(chǎn)品小組的討論,都一致覺得把不可用的支付按鈕置灰更加合適,并且線上已有文案提醒說明,用戶也更容易理解。
但是這個案例最后的結(jié)論有些出乎意料,首先,因為線上所有類似業(yè)務(wù)都采用了隱藏不可支付按鈕的做法,所以如果這類交易要改,其他全都要改(時間成本);其次,這個按鈕組件在早期開發(fā)過程中,并沒有設(shè)計、開發(fā) disable 的狀態(tài),也就是沒有置灰的樣式,如果要做,需要重新設(shè)計和開發(fā)(開發(fā)成本);最后,線上這個隱藏的樣式已經(jīng)存在很長時間了,用戶大部分都其已經(jīng)習(xí)慣,并且沒有發(fā)生普遍的反饋表示認知困難(用戶理解成本)。所以,結(jié)論還是保持線上的樣式。
總結(jié):有時候設(shè)計是對的,所有人都認可,但是依然會有各種因素前來制約。尤其在較大的產(chǎn)品團隊,業(yè)務(wù)節(jié)奏快、需求多、上線緊,這類優(yōu)化體驗的工作常
常優(yōu)先級不夠高。與此同時,很多朋友可能會說一個按鈕而已,加一個 disable
的樣式又有何難?然而很多團隊的流程規(guī)則導(dǎo)致業(yè)務(wù)工作是一條線,組件優(yōu)化新增樣式又是另一條線,想要一步把兩件事都做了并沒有想象中的容易。
怎么樣,簡單的三個按鈕,是不是讓你有些暈了?交互設(shè)計的難點常常就在于體驗、產(chǎn)品、開發(fā)各個內(nèi)容的協(xié)調(diào),相互妥協(xié),最后達到一個平衡的狀態(tài)。由小見大,小按鈕我們能應(yīng)付了,慢慢就可以面對大問題啦。