體驗(yàn)設(shè)計(jì)核心概念之約束
在體驗(yàn)設(shè)計(jì)中,約束也是重要的一環(huán)。本文將從四個(gè)方面講述約束的概念,并聊聊如何利用這些約束來(lái)提升用戶體驗(yàn)。推薦對(duì)用戶體驗(yàn)設(shè)計(jì)感興趣的朋友閱讀。
在之前的文章里,向大家介紹了示能、意符和映射,這篇文章我們接下去要聊一聊約束。
聽(tīng)到“約束”這個(gè)詞,但從字面意思大家可能會(huì)覺(jué)得它有多層含義,比如你小時(shí)候,媽媽總是約束你不能吃很多的糖,不能在地上滾來(lái)滾去,這是來(lái)自父母的約束。那么我們?cè)谏钪羞€有很多的約束,比如道德約束、法律約束、規(guī)則約束等等。
所以從字面意思上約束的意思就是:限制管束使不越出范圍。
在體驗(yàn)設(shè)計(jì)中,約束也被分為了4個(gè)大的類(lèi)型,分別是:物理約束、文化約束、語(yǔ)義約束以及邏輯約束。接下去我們通過(guò)對(duì)這四個(gè)約束類(lèi)型來(lái)聊一聊在設(shè)計(jì)中,如何利用這些約束來(lái)提升用戶體驗(yàn)。
一、物理約束
這個(gè)很好理解,一個(gè)圓形的井蓋只能用對(duì)應(yīng)尺寸的圓形來(lái)覆蓋住,其他形狀或者尺寸就不能匹配。一把鎖也只能通過(guò)相應(yīng)鑰匙才能打開(kāi)。所以物理約束取決于物體本身外部的特性,決定了其操作方法。設(shè)計(jì)師們?cè)谠O(shè)計(jì)一些產(chǎn)品、界面的時(shí)候,務(wù)必要考慮物體的物理特性,例如不同的設(shè)備、不同的材料等等。
諾曼老師在設(shè)計(jì)心理學(xué)中舉了一個(gè)電池正負(fù)極放置的例子,我打算換一個(gè)手機(jī)的例子。大家是否有想過(guò)為什么手機(jī)是豎著操作的,橫著操作不行嗎?當(dāng)然不排除我們?cè)谕嬗螒蚩措娪皶r(shí)一些特殊場(chǎng)景需要將手機(jī)橫過(guò)來(lái),但是日常我們通過(guò)手機(jī)來(lái)使用應(yīng)用的時(shí)候為什么不是橫過(guò)來(lái)的。
大家可以嘗試著單手橫過(guò)來(lái)去發(fā)一個(gè)微信給好友信息,或者在淘寶買(mǎi)一件商品,首先這倆產(chǎn)品在移動(dòng)端的手機(jī)上都沒(méi)有支持橫版適配的設(shè)計(jì),因?yàn)闄M置無(wú)法有效進(jìn)行導(dǎo)航,而且很難瀏覽內(nèi)容,更不要提用單手橫過(guò)來(lái)去做一些交互行為。
所以我們發(fā)現(xiàn)移動(dòng)端手機(jī)本身的物理特性和受到的約束來(lái)自于我們?nèi)祟?lèi)的手,四根較長(zhǎng)的手指在一側(cè),一根較短的拇指在另一側(cè),這種自然生物的進(jìn)化就告訴我們,我們的祖先是習(xí)慣通過(guò)“握”這個(gè)行為來(lái)對(duì)物體進(jìn)行交互的,而手機(jī)除了滿足人手的特性約束以外,也要滿足日常使用的場(chǎng)景:單手手持(單手握比單手托省力很多)、打電話(如果你的聽(tīng)筒和麥克在屏幕的兩側(cè),腦補(bǔ)一下打電話的樣子)……
所以手機(jī)的外形設(shè)計(jì),是受到了使用者本體的物理約束,我們的手、我們的耳朵、嘴巴等等,大家也可以再試想一下,如果我們要設(shè)計(jì)一款專(zhuān)門(mén)為沒(méi)有手的殘障人士用的通訊工具,我們?cè)撛趺丛O(shè)計(jì)?例如他們習(xí)慣用鼻子操作、用腳掌操作等等。
好了,講完了人類(lèi)對(duì)手機(jī)的約束后,我們?cè)賮?lái)看手機(jī)本身對(duì)我們數(shù)字界面有哪些物理約束。即然手機(jī)現(xiàn)在被設(shè)計(jì)成了豎著的樣子,于是我們的口袋也變成了豎著的,同時(shí)我們數(shù)字界面的內(nèi)容也變成了自上而下的內(nèi)容顯示順序。觸摸式智能手機(jī)也將原來(lái)只支持點(diǎn)擊操作的手勢(shì)進(jìn)化出支持滑動(dòng)、3d觸摸的更豐富的交互手勢(shì)。
我們?cè)谠O(shè)計(jì)界面中元素、組件的時(shí)候其實(shí)也可以把他們理解為一種“物體”,既然是“物體”那么必然有其特性,例如屬性、狀態(tài)、布局規(guī)則….,具有一定特性的組件就只能使用在其固定的位置,并給予一定的尺寸范圍和交互方式。
例如現(xiàn)在我們有這樣幾個(gè)信息,人物頭像、人物昵稱(chēng)、個(gè)人簡(jiǎn)介、關(guān)注按鈕這四個(gè)元素,我們需要做一個(gè)用戶信息模塊,我們會(huì)怎樣布局。很顯然將這幾個(gè)元素通過(guò)排列組合放進(jìn)一個(gè)容器里,有無(wú)數(shù)種排列方法,但如果我們提前給這個(gè)模塊加上一些物理約束,比如它的高度和寬度是30px*100px,同時(shí)滿足信息閱讀的順序和效率最優(yōu),那就只有一種排列方式。如果這個(gè)容器的尺寸變成100px*100px,那么就會(huì)有更多的布局,例如居中對(duì)齊,個(gè)人信息與關(guān)注按鈕上下分布等等。而且不同的排列布局、呈現(xiàn)位置給受眾帶來(lái)的視覺(jué)感知、瀏覽效率也是不同的。如果這個(gè)容器是可折疊、可滑動(dòng)的呢?那么布局又會(huì)發(fā)生什么變化?
所以物理約束在生活中可能是一種硬約束,但是在數(shù)字化設(shè)計(jì)中,我們用的更多的是“偏軟”的物理約束,例如一張卡片的大小、圖文的間距、控件的展開(kāi)面積等等,無(wú)法用硬約束來(lái)控制,因?yàn)槭艿礁嘁蛩氐挠绊?,不適合用硬約束來(lái)規(guī)范這些設(shè)計(jì)元素。
設(shè)計(jì)師們?cè)谧龇桨傅臅r(shí)候要學(xué)會(huì)尋找最優(yōu)解,做設(shè)計(jì)不像是用鑰匙開(kāi)門(mén)或者拼圖這樣每一塊都有他固定的位置,有時(shí)候就像是你身邊有幾根不同粗細(xì)和長(zhǎng)短的木棍,你需要插到一個(gè)洞里,不可能有非常完美契合的情況,那我們就要考慮你更在乎的是插緊?填滿?還是堵住?要靈活運(yùn)用。
二、文化約束
文化約束在書(shū)中的原話是:每種文化都有一套社交行為準(zhǔn)則,如果置身于不熟悉的文化環(huán)境,原有的準(zhǔn)則和行為就會(huì)不適用。
例如大陸的駕駛室在左側(cè),但是香港地區(qū)就是在右側(cè)。再例如日本東京和大阪搭乘電扶梯的站位也有左右的區(qū)別。所以文化的約束就更像是不同的社會(huì)認(rèn)知、習(xí)慣、歷史造就人群的行為差異。
例如在不同文化中,信息閱讀的順序并不一樣,就像阿拉伯地區(qū)在閱讀時(shí)順序是從右往左。再例如國(guó)際版本的amazon在新增收貨地址的時(shí)候,無(wú)論哪個(gè)國(guó)家,只提供輸入框讓用戶自己填寫(xiě),但是在本地化產(chǎn)品中,就會(huì)針對(duì)中國(guó)用戶的特殊地址進(jìn)行設(shè)計(jì)。文化差異還有很多,例如不同國(guó)家有不同國(guó)家的禁忌和喜好,例如顏色,俄羅斯比較極忌諱黑色、黃色,巴西比較禁忌紫色、黃色,而英國(guó)則不喜歡墨綠色。同樣還有手勢(shì)、動(dòng)植物、數(shù)字、肢體語(yǔ)言、信仰等等。
文化約束不僅僅存在于國(guó)家、宗教之前,人與人之間都會(huì)有不同的文化差異。所以文化說(shuō)白了就是不同群體的認(rèn)知與共識(shí)。
說(shuō)起文化約束讓我又想起了設(shè)計(jì)師與業(yè)務(wù)方之間的交流,為什么總是會(huì)存在障礙?;蛟S一部分原因就是因?yàn)槲覀兏髯杂兄幕町惡土?chǎng)。業(yè)務(wù)方在自己的文化認(rèn)知中會(huì)提出同時(shí)放大并縮小、五彩斑斕的黑這樣的需求,而設(shè)計(jì)師聽(tīng)到這樣的需求就會(huì)覺(jué)得有點(diǎn)無(wú)理取鬧,其實(shí)這很正常,這就和我們?cè)谘b修時(shí)給設(shè)計(jì)師提出的要求一樣,想要在10平方米的空間打造出多個(gè)大面積的空間一樣。其實(shí)這些都是我們對(duì)另一方的一種期望,只是在表達(dá)的過(guò)程中不那么專(zhuān)業(yè),作為專(zhuān)業(yè)的設(shè)計(jì)師,我們要學(xué)會(huì)理解客戶/業(yè)務(wù)的真實(shí)需求,并幫助他們?nèi)ゲ鸱帜繕?biāo),一步一步接受最后的結(jié)果。
三、語(yǔ)義約束
語(yǔ)義約束在書(shū)中提到的不多,但是我想展開(kāi)聊一聊。諾曼老師在解釋語(yǔ)義的時(shí)候是這么說(shuō)的:語(yǔ)義約束是指利用某種境況的特殊含義來(lái)限定可能的操作方法。舉了一個(gè)例子就是摩托車(chē)的擋風(fēng)玻璃之所以這么設(shè)計(jì)是因?yàn)槿笋{駛摩托車(chē)的方向位置從而使得擋風(fēng)玻璃必須這么設(shè)計(jì)。所以一個(gè)事物被設(shè)計(jì)后的結(jié)果取決于它是為誰(shuí)而設(shè)計(jì)的,同時(shí)語(yǔ)義約束依據(jù)的是我們對(duì)現(xiàn)實(shí)情況和外部世界的理解。
現(xiàn)在我們可以通過(guò)門(mén)把手的轉(zhuǎn)動(dòng)來(lái)開(kāi)啟門(mén),那么如果我通過(guò)人臉識(shí)別認(rèn)證后,是否可以自動(dòng)開(kāi)門(mén)而不需要再設(shè)計(jì)一個(gè)門(mén)把手呢?這種案例其實(shí)很多了,例如醫(yī)院的手術(shù)室等場(chǎng)所。隨著科學(xué)技術(shù)發(fā)展,人與物的交互方式在不斷的改變,從小屏幕到大屏幕的發(fā)展,我們觀察到移動(dòng)端設(shè)計(jì)中的返回上一頁(yè)、滾動(dòng)至頂部、鍵盤(pán)的拆分等等設(shè)計(jì)應(yīng)運(yùn)而生。
我再拿數(shù)字產(chǎn)品中的一些組件給大家舉個(gè)例子,在以前的文章中,我找到了一個(gè)產(chǎn)品的交互有些問(wèn)題,就是在某個(gè)界面的頂部導(dǎo)航中嵌入一個(gè)下拉的控件。
在這里,無(wú)論該控件本身示能表達(dá)還是用戶的預(yù)期理解,都表示這當(dāng)我們點(diǎn)擊下拉按鈕后,會(huì)展開(kāi)更多同類(lèi)型的選項(xiàng),并且導(dǎo)航欄是保持固定位置的,而不會(huì)將導(dǎo)航欄給頂下去,出現(xiàn)原本不存在的新模塊。那么為什么就不可以像后者一樣,點(diǎn)擊下拉控件后將導(dǎo)航給頂下去呢?
這就要?dú)w結(jié)于頂部導(dǎo)航和下拉控件本身的用法與規(guī)則。
導(dǎo)航欄嵌入下拉實(shí)際上就是導(dǎo)航+下拉控件,那么該控件就具備了兩個(gè)屬性,那就是原本導(dǎo)航欄的屬性和下拉控件的屬性,導(dǎo)航欄需要固定在頂部。在移動(dòng)端本身的組件定義中,它是一種固定在頂部不可動(dòng)搖的一個(gè)bar,所以很早以前的移動(dòng)端、web端設(shè)計(jì)的時(shí)候,頂部導(dǎo)航欄在視覺(jué)上也是優(yōu)先級(jí)很高的,例如微信、淘寶等頂部導(dǎo)航欄在舊版本都是帶有顏色的,就像是一個(gè)盒子必須有一個(gè)蓋子,沒(méi)有蓋子的容器不嚴(yán)謹(jǐn),不安全。
同時(shí)這個(gè)“蓋子”有幾個(gè)作用:
- 當(dāng)前定位/說(shuō)明 ,可以放單個(gè)頁(yè)面的標(biāo)題也可以放幾個(gè)tab來(lái)切換頁(yè)面。
- 當(dāng)前界面輔助操作 ,例如分享。
- 可以嵌入入口,例如搜索框、設(shè)置等等。
這個(gè)蓋子看起來(lái)很包容很多元對(duì)吧,我們也可以把他理解為一個(gè)小區(qū)樓下的商鋪,商鋪可以開(kāi)餐飲店、美甲店,只要符合要求你可以在這個(gè)區(qū)域里干很多事,但是商鋪只是允許你在這個(gè)空間約束中完成你自己的行為,但是你的行為不能影響我的商鋪,也就是你即然是一個(gè)下拉控件,那么你要下拉的是你本身,而不是我整個(gè)導(dǎo)航。所以導(dǎo)航本身就有它自己語(yǔ)義,導(dǎo)航+下拉控件,也必須滿足這些約束條件。
話又說(shuō)回來(lái),現(xiàn)在的設(shè)計(jì)其實(shí)沒(méi)有那么嚴(yán)謹(jǐn)了,例如頂部導(dǎo)航欄被越來(lái)越弱化,我們可以看到微信、淘寶、餓了么這樣的首頁(yè)都有“二樓”的設(shè)計(jì),當(dāng)我們整個(gè)首頁(yè)后就會(huì)出現(xiàn)隱藏導(dǎo)航欄或者導(dǎo)航欄被拉到下面的場(chǎng)景。同時(shí),下拉也不再是“下拉”,只是告訴用戶這里有可以展開(kāi)的內(nèi)容,但具體怎么展開(kāi),就已經(jīng)不是在當(dāng)前坐標(biāo)進(jìn)行展開(kāi)的意思了。
語(yǔ)義約束需要設(shè)計(jì)師們時(shí)刻觀察當(dāng)下用戶的認(rèn)知水平以及設(shè)計(jì)的發(fā)展階段,去做更合理的運(yùn)用,我們之前說(shuō)創(chuàng)新,其實(shí)也只是在不斷的跟著科技、文化、用戶習(xí)性在進(jìn)行同步更新,保守未必是錯(cuò)的,但是想要有所突破不能一味墨守陳規(guī)。
四、邏輯約束
這個(gè)概念諾曼老師在書(shū)中舉的是一個(gè)修水龍頭的例子,說(shuō)的是當(dāng)你把水龍頭修好,最后發(fā)現(xiàn)有一個(gè)零件沒(méi)有安裝上去,那么顯然是裝錯(cuò)了。這個(gè)和我們之前講的映射是一個(gè)道理,自然映射為我們提供邏輯的約束,元素的組成可能存在空間或功能上的邏輯關(guān)系,例如不同的開(kāi)關(guān)控制不同的燈。
那么我們還是簡(jiǎn)單的來(lái)看一下“邏輯”這個(gè)概念,我們是不是經(jīng)常會(huì)遇到這樣的場(chǎng)景,當(dāng)我們把方案或者一個(gè)事情講述給別人,會(huì)聽(tīng)到別人說(shuō):你這個(gè)邏輯不對(duì),那到底什么是邏輯呢?這里不進(jìn)行長(zhǎng)篇大論的解釋?zhuān)壿嫷母拍詈艽?,但是我們可以?lái)比較形象的了解一下。
首先我們要知道在邏輯推理的過(guò)程中需要先對(duì)概念進(jìn)行客觀描述,例如男人喜歡女人,這是一種自然的客觀規(guī)律。其次我們要對(duì)事物中的對(duì)象進(jìn)行判斷是否為真,例如,老王是男人。當(dāng)我們已知這兩個(gè)條件后,可以推導(dǎo)出一個(gè)結(jié)論,那就是老王喜歡女人。但是這樣的推理并不嚴(yán)謹(jǐn),因?yàn)槔贤蹩赡芟矚g女人或者都喜歡。如果有其他的條件,結(jié)論才會(huì)更準(zhǔn)確,例如老王交往過(guò)5個(gè)女朋友。
設(shè)計(jì)中,也會(huì)存在很多的邏輯,例如業(yè)務(wù)邏輯、交互邏輯、視覺(jué)邏輯等等。業(yè)務(wù)邏輯指的是商品的展示排列規(guī)則、每簽約一個(gè)供應(yīng)商就會(huì)展示該供應(yīng)商的詳情、權(quán)限角色的類(lèi)型不同導(dǎo)致判斷順序不同等。交互邏輯指的交互過(guò)程中出現(xiàn)的狀態(tài)變化和規(guī)則,例如點(diǎn)擊卡片跳轉(zhuǎn)至xxx界面,點(diǎn)擊后若用戶未登錄則跳轉(zhuǎn)至登錄頁(yè)。而視覺(jué)邏輯則是指根據(jù)用戶的瀏覽順序和信息的優(yōu)先級(jí)進(jìn)行視覺(jué)布局的設(shè)計(jì)。
這里我們來(lái)舉一個(gè)美食產(chǎn)品的智能組菜的功能設(shè)計(jì),來(lái)看看在這個(gè)方案中,邏輯約束是如何影響到我們整個(gè)設(shè)計(jì)過(guò)程的。智能組菜這個(gè)功能是這樣的,用戶可以將想要烹飪的食材進(jìn)行自由組合成為一道美食,進(jìn)而衍生出了該功能。在做這個(gè)方案之前,我們要對(duì)這些概念進(jìn)行描述和解析
1. 解析概念
智能組菜:
- 智能:通過(guò)什么算法,如何通過(guò)算法呈現(xiàn)給用戶?如何讓用戶感知到智能?(業(yè)務(wù)邏輯)
- 組菜:組是什么意思?(把食材搭配到一起)怎么組?(用戶選擇食材后生成)組什么(各種食材)?(交互邏輯)
2. 設(shè)計(jì)策略與交互邏輯的思考
- 怎么把食材搭配到一起:讓用戶自由選擇食材。
- 怎么才能讓用戶自由選擇食材:提供食材的搜索、分類(lèi)。
- 怎么提供食材的分類(lèi)和搜索:設(shè)計(jì)搜索功能流程、食材分類(lèi)功能流程。
特殊場(chǎng)景思考:對(duì)于食材的名稱(chēng)用戶是否知道,如果不知道該如何搜索?可以提供食材分類(lèi)和拍照識(shí)別這樣的功能。
我們先做的簡(jiǎn)單一點(diǎn),只做食材的搜索。然后接下去思考他的交互邏輯當(dāng)用戶進(jìn)入搜索流程后狀態(tài)會(huì)發(fā)生什么變化?選擇的食材會(huì)出現(xiàn)在哪里?如何新增繼續(xù)新增、刪除食材?這里有兩種做法:
- 用戶選擇完食材后就進(jìn)入一個(gè)新界面,界面中可以繼續(xù)添加食材。
- 用戶選擇完食材后在當(dāng)前界面出現(xiàn)“菜籃”模塊用來(lái)承載已經(jīng)選擇的食材。
如果是你會(huì)選擇哪種方式?這兩種交互方式在邏輯上都是正確的,但是邏輯正確并不意味著交互體驗(yàn)和效率是最優(yōu)的。
例如搜索場(chǎng)景中需要考慮鍵盤(pán)遮擋的問(wèn)題,如果是第一種,那么沒(méi)有鍵盤(pán)遮擋的困擾,但是每次選完都要重新點(diǎn)擊新增按鈕,并且新頁(yè)面的版面利用率很低。而第二種在當(dāng)前界面出現(xiàn)菜籃則會(huì)被鍵盤(pán)遮擋,只能在頁(yè)面上方出現(xiàn),但上方的內(nèi)容比較飽和,需要再進(jìn)一步思考。那么當(dāng)前遇到了兩個(gè)問(wèn)題比較難以權(quán)衡,于是我們需要根據(jù)更多的條件來(lái)約束最后的結(jié)果:
- 用戶在選擇食材的時(shí)候大概率是目標(biāo)明確的,搜索類(lèi)目不會(huì)很寬泛,例如青菜、排骨,所以搜索結(jié)果不會(huì)很多。
- 大部分用戶的手機(jī)為某為p40、某果12,頁(yè)面較長(zhǎng),空白區(qū)域比較充裕。
- 大部分情況一道菜的主要食材在3種左右。
也有小伙伴會(huì)問(wèn),會(huì)不會(huì)出現(xiàn)批量選擇的情況。基本不會(huì),因?yàn)榫拖裎覀儎偛耪f(shuō)的,組菜是基于用戶對(duì)當(dāng)前已有的食材進(jìn)行組合的行為,所以用戶的目標(biāo)是單一、明確的,我有什么菜,我看看能組合出什么。而不是直接搜一個(gè)蔬菜,然后批量選擇蔬菜類(lèi)目下的其他食材,這不符合用戶場(chǎng)景。所以不需要提供批量選擇。
最后結(jié)論是第二種方式有足夠的區(qū)域來(lái)放置需要選擇的食材。
3. 最后的方案
當(dāng)我們確定好了策略后,我們可以大致繪制一下原型方案。用戶通過(guò)在當(dāng)前頁(yè)面搜索后選擇搜索結(jié)果的食材,顯示在鍵盤(pán)上方。鍵盤(pán)收起后會(huì)置于底部。食材搜索的結(jié)果不需要分類(lèi),用宮格形式鋪開(kāi),盡可能的利用頂部的面積去展示,不要用列表。然后不需要做搜索按鈕,因?yàn)檫@里的數(shù)據(jù)量很小,直接輸入完文字后就可以自動(dòng)聯(lián)想匹配。同時(shí)我們?cè)侔呀M菜記錄和拍照識(shí)別的功能放進(jìn)去。
做完這些基本的交互后我們不要忘了思考一些異常流程和場(chǎng)景,例如搜不到內(nèi)容怎么辦?用戶同時(shí)搜索了兩種不同的食材怎么辦?用戶第二次選擇了同樣的食材怎么辦?選擇超過(guò)5個(gè)怎么提示?等等。
好了,這個(gè)案例講完后,大家有沒(méi)有發(fā)現(xiàn),其實(shí)一個(gè)方案的產(chǎn)生,其中要思考很多的條件、邏輯來(lái)約束不同的設(shè)計(jì)結(jié)果。
假如我們需要加入食材的分類(lèi)模塊,那么現(xiàn)在的方案和流程還合適嗎?如果業(yè)務(wù)覺(jué)得用戶使用智能組菜是不知道吃什么,一種“窮途末路”的場(chǎng)景,那么我們是不是可以提供一種送即食菜肴的服務(wù),例如最近在電梯廣告里看到了一個(gè)“舌尖英雄”的app,他就是將一道菜的食材進(jìn)行單獨(dú)包裝,然后賣(mài)給用戶,把烹飪的步驟也用線上視頻的方式教給用戶,用戶一學(xué)就會(huì)。這也是一種業(yè)務(wù)創(chuàng)新,同時(shí)在智能組菜的場(chǎng)景種插入也不失為一種辦法。
#專(zhuān)欄作家#
應(yīng)駿,人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家,公眾號(hào):應(yīng)謀鬼計(jì)(shejishiyj)
本文由 @應(yīng)駿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于CC0協(xié)議
”每種文化都有一套社交行為準(zhǔn)則,如果置身于不熟悉的文化環(huán)境,原有的準(zhǔn)則和行為就會(huì)不適用?!皩W(xué)到了學(xué)到了