從第一性原理看界面設(shè)計(jì)的一致性

一致性,不是形式與形式保持一致,而是形式與用戶認(rèn)知保持一致。
誰與誰一致
設(shè)計(jì)原則都是有理可循的。很多設(shè)計(jì)原則是由人對(duì)大腦和人體工程學(xué)的認(rèn)識(shí),加上實(shí)際經(jīng)驗(yàn),總結(jié)得來的,例如7±2法則、費(fèi)茲定律等等。設(shè)計(jì)師如果不知道對(duì)這些原則追本溯源,理解它最根本是要解決什么問題,只是應(yīng)用,難免會(huì)偏離初衷,遇到問題。
下面以一致性設(shè)計(jì)原則為例,講述在應(yīng)用原則的過程中我們可能遇到的問題,以及為什么會(huì)遇到這些問題。
產(chǎn)品經(jīng)理A:“這個(gè)頁面的視覺焦點(diǎn)有點(diǎn)跳,還有優(yōu)化的空間嗎?”
設(shè)計(jì)師B:“因?yàn)槠渲幸粋€(gè)模塊在其他頁面也有,為了保持統(tǒng)一和可復(fù)用性,所以產(chǎn)生了你說的問題。”
產(chǎn)品經(jīng)理A:“這三個(gè)前后頁面太像了,用戶會(huì)不會(huì)迷路???”
設(shè)計(jì)師B:“不會(huì)吧,這三個(gè)頁面的內(nèi)容都是關(guān)于xx的,前后保持一致,應(yīng)該更好理解吧?!?/p>
通過這些對(duì)話發(fā)現(xiàn),設(shè)計(jì)師B經(jīng)常用來闡述自己設(shè)計(jì)思路的一致性,在面對(duì)產(chǎn)品經(jīng)理A以用戶視角發(fā)起的疑問時(shí),不能很好地解釋說明,原則似乎“不靈了”,原因出在哪里?其實(shí),從設(shè)計(jì)師B的說辭可以分析出,他提出的一致性的出發(fā)點(diǎn)是存在偏差的。
一致性的第一性原理
如何糾偏,我將從第一性原理來重新解讀一致性。
所有設(shè)計(jì)原則的出發(fā)點(diǎn)是用戶。為了讓用戶更好地使用產(chǎn)品,我們才通過設(shè)計(jì)原則來指導(dǎo)完成好用的設(shè)計(jì)方案。它不是為了方便設(shè)計(jì)師對(duì)照原則畫界面,提高設(shè)計(jì)效率,或輸出一套遵循原則的漂亮規(guī)范,或成為與產(chǎn)品經(jīng)理爭(zhēng)論時(shí)的有力依據(jù)。它是為了方便用戶,讓用戶能夠理解界面中的信息時(shí)不會(huì)困難,在屏幕中操作時(shí)不會(huì)覺得麻煩。理解了這一前提,我們?cè)俑钜粚涌?,一致性到底解決了用戶什么問題?
用戶在瀏覽界面信息時(shí),是通過大腦處理信息,這一過程和大腦的運(yùn)行機(jī)制有關(guān):人類大腦的運(yùn)行是建立在經(jīng)驗(yàn)的基礎(chǔ)上。以往的記憶和認(rèn)識(shí)會(huì)影響對(duì)當(dāng)下新事物的判斷,大腦會(huì)尋求新事物與已有經(jīng)驗(yàn)的聯(lián)系,將它們關(guān)聯(lián),一視同仁地去理解,從而降低大腦的負(fù)擔(dān)。對(duì),人類就是這么懶,一致性簡(jiǎn)直就是人類大腦的福音。
綜上,從第一性原理解讀后的一致性原則為:與用戶已有的認(rèn)知保持一致。在此基礎(chǔ)上延伸,才有了我們常說的那些道理:“我們要讓用戶再次看到xx時(shí)能夠很快明白它的用途,才將這個(gè)元素或模塊在多處保持統(tǒng)一”;“我們通過運(yùn)用映射物理世界的方法去設(shè)計(jì)表現(xiàn)層,為的是讓用戶更容易理解xx”等等。
所以,我們常用的一致性也沒錯(cuò),只不過是核心思想落地到具體情況的具體表現(xiàn),它是多樣的,但我們不應(yīng)該將多樣的表現(xiàn)總結(jié)為規(guī)律,去遵循,而應(yīng)該探究到本質(zhì),再從本質(zhì)出發(fā),解決多樣的問題。
下面舉兩個(gè)實(shí)際工作中應(yīng)用一致性和選擇不用一致性的例子。
應(yīng)用一致性的例子:背景是顧客在餐廳就餐后,用手機(jī)掃描桌臺(tái)上美團(tuán)點(diǎn)評(píng)提供的二維碼即可查看訂單直接支付,如果商家提供會(huì)員服務(wù)且顧客還不是商家會(huì)員,即可看到申請(qǐng)成為會(huì)員的入口,如下左圖,如果顧客已是會(huì)員,則看到的是右圖。
這里的一致性體現(xiàn)在前后頁面會(huì)員模塊的位置上,都位于頁面的頭部,與商家信息在一塊兒。原因是,顧客從商家信息下方的申請(qǐng)入口完成申請(qǐng)流程后,重新進(jìn)入支付訂單頁時(shí),想確認(rèn)自己是否已是會(huì)員,這時(shí),根據(jù)之前已有的認(rèn)知,會(huì)先入為主地從頭部的商家信息附近開始尋找,故將會(huì)員標(biāo)識(shí)也與商家信息放一塊兒,與用戶的認(rèn)知保持一致。
再來看一個(gè)選擇不用一致性的例子:背景是顧客在餐廳就餐后選擇美團(tuán)智能POS機(jī)進(jìn)行支付,并且該顧客支付時(shí)使用了會(huì)員余額,剩下的零頭使用了微信支付,如下左圖是顧客完成支付后手機(jī)上的支付結(jié)果頁,右圖是商家完成收款后POS機(jī)上的收款結(jié)果頁。
這里的不一致體現(xiàn)在頁面頭部重點(diǎn)展示的金額上。大家一定會(huì)疑問,同一筆消費(fèi)的支付結(jié)果頁,為什么要展示不一樣的金額呢?同樣的金額難道不也會(huì)讓顧客和商家達(dá)成某種一致嗎?通過詢問商家的想法發(fā)現(xiàn),商家更關(guān)注訂單的總金額,因?yàn)檫@才是他們實(shí)際得到的收益,并且在對(duì)賬時(shí)也需要訂單總金額才能對(duì)平。反觀顧客,作為注重優(yōu)惠的消費(fèi)者自然更在意自已實(shí)際付了多少,有沒有多付或者少付,并且,顯示減去各種優(yōu)惠的實(shí)付金額,在心理感受上也有撈了大便宜的快感。由此可見,一致性在這里,并沒有認(rèn)知上的重合,也就沒有必要遵循了。
延伸思考
除了一致性原則,很多其他設(shè)計(jì)原則,甚至設(shè)計(jì)工具和設(shè)計(jì)方法都可以用第一性原理的思路去剖析:做可用性測(cè)試的本來目的是什么?用戶場(chǎng)景分析究竟為的是什么?HEART模型是怎么來的又可以衍生出什么?馬斯洛需求層次理論的本質(zhì)是什么?
相信通過第一性原理的層層剖析后,你會(huì)對(duì)這些平時(shí)常用的知識(shí)產(chǎn)生全新的認(rèn)識(shí)。
本文由 @王文俊 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自PEXELS,基于CC0協(xié)議
不能單純的用一致性去解決用戶體驗(yàn),還是要應(yīng)用到具體場(chǎng)景里,通過一致性的大原則,去調(diào)整具體的
很有啟示,有個(gè)小問題,當(dāng)一致性和用戶體驗(yàn)發(fā)生沖突時(shí),產(chǎn)品經(jīng)理如何說服Ui
這個(gè)前提可能就存在問題~一致性是服務(wù)于用戶體驗(yàn)的,怎么會(huì)沖突呢?我能想到的可能是與業(yè)務(wù)目標(biāo)發(fā)生沖突,如果是這樣,建議體驗(yàn)在可接受的范圍內(nèi)以業(yè)務(wù)為先~
顧客支付結(jié)果頁和商家收款結(jié)果頁是不寫反了
確實(shí)反了,已糾正