發(fā)布時間:2024-05-08 13:35:36 瀏覽量:206次
最近在體驗(yàn)一些產(chǎn)品時,發(fā)現(xiàn)很多交互設(shè)計(jì)上的坑都可以歸納到“所見非所得”上。
所見非所得
我們可以首先來看一下“所見非所得”的案例:上周寄件去北京,在填寫收件人信息時候,發(fā)現(xiàn)了一個“智能填寫”的功能很有意思。所謂“智能填寫”就是OCR識別技術(shù),系統(tǒng)可以識別圖片上的地址。例如,你的收件人地址正好是身份證上的住址,那么你就可以上傳身份證照片,系統(tǒng)直接識別照片上的地址而不需要手動去輸入。

用戶具體的操作流程是:
1 拍攝/上傳照片;
點(diǎn)擊“上傳圖片”按鈕,用戶可以選擇拍攝或者上傳相冊里的照片,框選合適的識別區(qū)域;
2 系統(tǒng)識別并展示結(jié)果;
系統(tǒng)會自動識別圖片中的地址信息,并且在輸入框中展示,如果有識別錯誤的地方,用戶可以手動編輯修改;
3 用戶確認(rèn);
用戶對地址信息確認(rèn)無誤了,點(diǎn)擊“智能填寫”按鈕,輸入框里的地址信息會自動回填到地址欄;

了解了大致流程,我們來看一下兩款競品。產(chǎn)品A和B都提供了“智能填寫”的功能,但是在交互設(shè)計(jì)上存在差異。產(chǎn)品A,當(dāng)用戶上傳完圖片才會出現(xiàn)“智能填寫”按鈕;產(chǎn)品B是全程展示“智能填寫”按鈕的。我個人更加偏愛產(chǎn)品A的處理模式,因?yàn)楫?dāng)用戶都沒有上傳圖片時,給用戶展示“智能填寫”按鈕是沒有任何意義的,這里的“智能填寫”雖然可見但是不可得,用戶也不能點(diǎn)擊。當(dāng)然有人會說,雖然不可點(diǎn)擊,但是展示了也沒什么問題吧?當(dāng)然有問題,它會給用戶帶來兩個痛點(diǎn):
1) 增加了用戶的學(xué)習(xí)成本;對于新用戶來說,產(chǎn)品A肯定更加容易上手。因?yàn)樾掠脩粢贿M(jìn)入這個頁面,只能看到上傳圖片的按鈕,用戶明白了我首先要上傳圖片。產(chǎn)品B是直接一股腦的把所有選項(xiàng)展示出來,用戶不知道這些選項(xiàng)之間的聯(lián)系和操作順序。
2) 阻斷正常操作流程;給用戶展示了他們本不應(yīng)該看到的元素,可能會阻斷正常的操作流程。用戶如果還沒上傳圖片,就點(diǎn)擊“智能填寫”按鈕會直接報(bào)錯,“所傳參數(shù)不能為空”,用戶哪里看懂這是什么意思。

之前在火車站取票,發(fā)現(xiàn)一個“所見非所得”案例:大嬸的票取不了。因?yàn)闆]有關(guān)閉購買保險(xiǎn)的彈框,誤以為“確認(rèn)打印”按鈕可以點(diǎn)擊,結(jié)果無法正常完成取票流程。
了解到這些痛點(diǎn),那么如何才能在交互設(shè)計(jì)上實(shí)現(xiàn)“所見即所得”原則呢?我總結(jié)了兩個方法:限制和就近。
限制原則
了解限制原則,我們需要回答兩個問題:
1)為什么要限制?因?yàn)槎嗖乓拗?,多會帶來哪些壞處??nèi)容多,用戶處理不過來;選項(xiàng)多,用戶挑花了眼;時間多,優(yōu)惠券沒有有限期限制用戶懶得用。
2)限制什么?限制用戶與界面交互的觸點(diǎn)。還是以智能填寫為例,當(dāng)前界面有三個觸點(diǎn):上傳圖片按鈕、輸入框、智能填寫按鈕。這三個觸點(diǎn)分別對應(yīng)著步驟一、步驟二和步驟三。如果我們在步驟一的階段給用戶提供了步驟三的觸點(diǎn),會有用戶嘗試去交互,從而觸發(fā)報(bào)錯場景。根據(jù)用戶所處的階段,分析用戶可能進(jìn)行交互操作,提供可交互的觸點(diǎn)。
罔顧用戶的操作階段,一股腦的把所有觸點(diǎn)都提供給用戶會給用戶帶來困擾。用戶需要花時間去判斷和分析每一個觸點(diǎn)的作用和聯(lián)系。我們應(yīng)該分析用戶處于不同階段所需要的功能觸點(diǎn)。
舉個知乎的例子,知乎有一個“向知友提問”的功能。但是這個按鈕只會在用戶滑動搜索結(jié)果頁3屏后才會出現(xiàn),引導(dǎo)用戶去提問。
限制原則不僅僅是限制交互觸點(diǎn),還可以應(yīng)用到產(chǎn)品邏輯中,幫助用戶解決問題。比如判斷用戶為高風(fēng)險(xiǎn)用戶,就直接不展示相關(guān)優(yōu)惠券。
就近原則
“所見即所得”最根本目的是為了節(jié)省用戶操作時間,提升產(chǎn)品易用性。就近原則分為位置就近和形式就近兩類:
1) 位置就近用戶的視線常停留在上一個交互觸點(diǎn)附近。例如,填寫發(fā)件人信息時可以使用附近地址功能,但操作和反饋不在同一視覺區(qū)域。
2) 形式就近形式就近特指反饋形式,彈框的通用性導(dǎo)致用戶無法立刻理解反饋信息。通過改變觸點(diǎn)形態(tài)來完成信息傳遞,用戶感知更容易。比如密碼輸入錯誤時,抖動輸入框告知用戶密碼錯誤。

通過限制和就近原則,優(yōu)化交互設(shè)計(jì),實(shí)現(xiàn)更好的用戶體驗(yàn)。
熱門資訊
1. 10個免費(fèi)學(xué)習(xí)UI設(shè)計(jì)的網(wǎng)站 提升你的設(shè)計(jì)能力
怎樣可以提升你的UI設(shè)計(jì)能力!第一個:站酷站酷想必是設(shè)計(jì)師都知道的一個網(wǎng)站,里面不止有UI設(shè)計(jì)的資源,還有其他設(shè)計(jì)的,不如:平面設(shè)計(jì)、網(wǎng)頁設(shè)計(jì)、字體...
2. iPhone6的UI設(shè)計(jì)尺寸規(guī)范,原來如此重要!
想要了解iPhone6界面設(shè)計(jì)的尺寸規(guī)范嗎?這里為您詳細(xì)介紹iPhone6的UI設(shè)計(jì)尺寸規(guī)范,包括界面尺寸、圖標(biāo)尺寸、可點(diǎn)擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
3. 移動端UI設(shè)計(jì)中常見的5種APP界面類型,你get到了嗎?
通過介紹移動端UI設(shè)計(jì)中的閃屏頁、引導(dǎo)頁、浮層引導(dǎo)頁、空白頁和首頁等5種APP界面類型,幫助大家更好地了解UI設(shè)計(jì)的基本知識
4. 12個絕佳的UI設(shè)計(jì)網(wǎng)站,助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設(shè)計(jì)網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學(xué)習(xí)新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設(shè)計(jì)師的...
5. 移動端列表頁和表單頁設(shè)計(jì)秘訣:讓你的APP點(diǎn)擊率翻倍
在移動端設(shè)計(jì)中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設(shè)計(jì)能夠讓用戶輕松地獲取信息并產(chǎn)生點(diǎn)擊欲望,從而提高點(diǎn)擊率。本文將為你...
6. 史上最全,平面設(shè)計(jì)UI設(shè)計(jì)必備的77個國內(nèi)外素材、設(shè)計(jì)資源網(wǎng)站
ui設(shè)計(jì)社區(qū),大神太多了。3、behance: https://www.behance.net/ ,著名設(shè)計(jì)... 對于品牌設(shè)計(jì)師來說,除了圖案素材收集之外,還有一個很重要的,就是設(shè)計(jì)故...
7. 推薦10本適合UI設(shè)計(jì)師看的書籍,輕松掌握技能!
對于想要提高自己的設(shè)計(jì)能力和創(chuàng)造力的小白和UI設(shè)計(jì)師來說,這本書是一個很好的選擇。4.《設(shè)計(jì)的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
8. 設(shè)計(jì)中的色彩心理學(xué):淺析中西方色彩的歷史演變與設(shè)計(jì)應(yīng)用
摘要:本文探討了色彩的歷史演變和設(shè)計(jì)應(yīng)用。通過對色彩在早期文明社會中的實(shí)用運(yùn)用、不同文化背景下色彩觀念的差異、色彩在設(shè)計(jì)中的重要性以及新興技...
9. 武漢UI設(shè)計(jì)培訓(xùn)班費(fèi)用怎么樣?想學(xué)UI設(shè)計(jì)要多少錢?
想了解武漢UI設(shè)計(jì)培訓(xùn)班的費(fèi)用是多少嗎?不知道學(xué)UI設(shè)計(jì)要花多少錢?不妨看看這篇文章,了解UI設(shè)計(jì)培訓(xùn)班的學(xué)費(fèi)價(jià)格以及學(xué)習(xí)內(nèi)容。
10. 零基礎(chǔ)學(xué)UI設(shè)計(jì)要多久?培訓(xùn)完能拿多少工資?
探索零基礎(chǔ)UI設(shè)計(jì)培訓(xùn)的時長與薪資前景。了解數(shù)字藝術(shù)教育領(lǐng)域的專業(yè)課程,以及培訓(xùn)后的職業(yè)發(fā)展機(jī)會。
最新文章
同學(xué)您好!