交互設(shè)計原則在數(shù)據(jù)中臺中的應(yīng)用
編輯導(dǎo)讀:交互設(shè)計直接決定用戶使用產(chǎn)品過程中的體驗,其重要性不言而喻。本文作者依據(jù)在數(shù)據(jù)中臺產(chǎn)品設(shè)計中的所思所想,結(jié)合案例等分享了自己對8個交互設(shè)計原則的理解和應(yīng)用,供大家一同參考和學習。
之前做了很多2C的UI&UE產(chǎn)品設(shè)計,后來轉(zhuǎn)來做中臺的產(chǎn)品,對于產(chǎn)品設(shè)計來講,差異還是比較大的,但不變的是設(shè)計師們對大量用戶行為的研究、對美學的追求。
Lawsofux的UX原則是UI&UE設(shè)計的典范,大家日常使用的大流量產(chǎn)品亦或是小眾但有設(shè)計感的產(chǎn)品都將這些原則應(yīng)用到自己的產(chǎn)品中,在設(shè)計數(shù)據(jù)中臺產(chǎn)品時,也時刻考慮到這些原則把那個應(yīng)用到工作項目中。
現(xiàn)分享一下在我設(shè)計數(shù)據(jù)中臺相關(guān)產(chǎn)品時對交互設(shè)計原則的理解和應(yīng)用。
01 費茨定律 Fitts’s Law
費茨定律是指到達目標的時間是目標的區(qū)域距離和大小的函數(shù),距離越大,尺寸越小,所需要的時間就越長。這個法則特別適用于設(shè)計按鈕,按鈕通常會放置在用戶上一步操作的附近,讓用戶更容易找到并進入下一步操作。
一個特別有意思的事情,我的小區(qū)有北門、南門。門外還有一圈護欄,我的目的地是公交站,但目前的設(shè)計方式我必須要按照藍色線路走過去(如下圖),非常不方便,于是靠近南門附近的護欄總是被不明人士開了個“小門”。
單從設(shè)計上來說,該設(shè)計方式就違背了費茨定律 ,到達目標的時間和當前位置距離太大,讓用戶體驗大打折扣。
在設(shè)計數(shù)據(jù)中臺設(shè)計規(guī)范時,就特別明確了這一點,例如表單填寫頁面, “下一步”“完成”操作均放在底部,而非右上角,避免用戶找不到或者還需要花很長的路徑去找,尤其是表單較長時,用戶滿意度會更差。
02 雅各布定律 Jakob’s Law
該定律是指“用戶將大部分時間花在別人家的網(wǎng)站 (產(chǎn)品) 上,而不是你的”。顯而易見,這也意味著用戶已經(jīng)習慣于“別人家的產(chǎn)品”交互設(shè)計方式,如果你的產(chǎn)品不采用著相似的模式,就打破了用戶已培養(yǎng)的習慣,會引起用戶的不舒服感。
就好像我已經(jīng)習慣了按照A路線上班,今天由于各種原因只能走從未走過的B路線,會讓我時刻開導(dǎo)航,擔心今天會不會遲到等等慌張感和焦慮感。
因此在設(shè)計自己的產(chǎn)品時,一定要進行競品或同類產(chǎn)品的調(diào)研分析,在大框架的交互上保持一定的相似性。
在進行數(shù)據(jù)中臺門戶相關(guān)頁面設(shè)計時,也參考了業(yè)界通用的界面布局和交互方式。登錄前是數(shù)據(jù)中臺各產(chǎn)品介紹,登錄后為各產(chǎn)品功能使用。產(chǎn)品介紹頁也采用了banner+特性+功能+場景應(yīng)用幾大板塊設(shè)計。
03 ??硕?Hick’s Law
希克定律只是決策所需要花費的時間會隨著選擇的數(shù)量和復(fù)雜性增加而增加。在設(shè)計中經(jīng)常會遇到這樣一個問題:“我想在這個頁面承載A、B、C、D….功能”,但多不等于好,反而讓用戶失去聚焦點,增加了用戶的決策成本。
舉個例子,你像領(lǐng)導(dǎo)匯報你提出了五個方案,讓領(lǐng)導(dǎo)去做選擇,領(lǐng)導(dǎo)的內(nèi)心OS是會夸你“真棒”么。
在培訓競賽平臺的權(quán)限申請頁面,界面承載的功能有:權(quán)限申請、培訓競賽平臺的介紹、操作手冊等。而權(quán)限申請是最為核心的功能點,因此在設(shè)計時,按鈕并配有底色突出展示,聚焦用戶的最核心功能,而其他入口則選擇下劃線等設(shè)計方式弱化。
04 伯斯塔爾法則 Postel’s Law
該法則是說用戶更容易記住系列中的出現(xiàn)的第一項 (首因效應(yīng)) 和最后一項 (近因效應(yīng))。例如在行業(yè)設(shè)計中,LOGO一般都會放在網(wǎng)站的左上角,更容易讓用戶記住。
而且點擊LOGO可以回到網(wǎng)站的首頁,這種固定的設(shè)計和操作模式每次都是首先出現(xiàn)在我們的視野里,并已經(jīng)儲存在了長期記憶之中,我們能在第一時間反應(yīng)出來這里是什么東西,有什么作用。
05 特斯勒定律 Tesler’s Law
特斯勒定律(又稱為復(fù)雜性守恒定律)指出,對于任何系統(tǒng),都存在一定程度的復(fù)雜性,無法降低。但是針對這種復(fù)雜性,我們可以相應(yīng)轉(zhuǎn)移到其他方式中,例如通過更為復(fù)雜的后端代碼設(shè)計來提升前端的交互體驗,將復(fù)雜的功能按照優(yōu)先級展示,將功能簡化,替用戶做選擇等等方式。
數(shù)據(jù)中臺的功能非常多,導(dǎo)致菜單布局混亂,為了讓整體菜單更簡潔,用戶更容易找到相應(yīng)的入口,交互方式為用戶在主菜單選擇功能后,主菜單自動收起,展開輔菜單,并通過UI設(shè)計在視覺上保證平臺的一致性和整體性。
同時針對簡單的功能點,可采用在頁面頂部Tab切換的方式展示多個功能點,該方式很好的避免了多重菜單混亂的問題。
06 美即好用效應(yīng) Aesthetic Usability Effect
當界面被設(shè)計得足夠美觀時,用戶往往會容忍一些較為輕微、影響較小的可用性問題。例如在可視化大屏產(chǎn)品介紹中,我們加入了大量的圖、視頻等來說明功能點,這時候頁面的邏輯布局交互就相對會弱化。
07 多爾蒂門檻 Doherty Threshold
系統(tǒng)需要在 400ms 內(nèi)對使用者的操作做出響應(yīng),這樣才能夠讓使用者保持專注,并提高生產(chǎn)效率。
在設(shè)計權(quán)限申請時,在用戶提交完信息后,通過頁面的形式提示用戶權(quán)限已開通,并在交互上執(zhí)行自動跳轉(zhuǎn),無需用戶任何操作即可進入下一步。
08 簡潔法則 Law of Pr?gnanz
間接法則是為了更方便的理解這個世界,人類會將接受到的大量信息進行過濾和簡化!
在設(shè)計公告列表時,默認按照時間倒序排序,并通過UI上區(qū)別已讀公告和未讀公告,讓用戶在大量的信息列表中,快速聚焦在未讀且最新的公告中,以防用戶遺漏重要消息。
Lawsofux的UX原則還有很多,奧卡姆剃刀原則、帕金森定律、多爾蒂門檻等等,詳情可以參考https://lawsofux.com/,在產(chǎn)品設(shè)計中這些原則都發(fā)揮著潛移默化的作用,而作為設(shè)計師更應(yīng)該掌握其精髓并運用到產(chǎn)品設(shè)計中。
在我接觸了中后臺產(chǎn)品后發(fā)現(xiàn),中后臺項目會優(yōu)先考慮“能不能用”而不是“好不好用”,因此這也要求產(chǎn)品設(shè)計師要多維度去考慮,既要滿足基本的用戶體驗,又要保證研發(fā)成本和系統(tǒng)性能,從而打造出讓用戶覺得爽、讓開發(fā)覺得爽、讓老板覺得爽的產(chǎn)品。
作者:?ella,微信公眾號:穎子懂了
本文由 @ella 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載
題圖來自Unsplash,基于CC0協(xié)議。
“伯斯塔爾法則”里的內(nèi)容是“系列位置效應(yīng)”原則,作者搬書的時候不認真啊
自動駕駛調(diào)度系統(tǒng)
費茨定律這塊沒明白,是允許把button放到上面還是不允許
用戶一般從上往下填寫表單,表單很長的情況下button放上面需要用戶回滾的最頂部進行操作,增加用戶使用負擔了,不允許放上面