交互實(shí)戰(zhàn)|Web端表單項(xiàng)目總結(jié)

0 評(píng)論 17499 瀏覽 81 收藏 9 分鐘

本文作者分享了其所參與的Web端表單項(xiàng)目,enjoy~

一、項(xiàng)目背景

1.1 背景

CRM?用戶(hù)在使用「客戶(hù)」輕應(yīng)用的時(shí)候,反映我們預(yù)設(shè)給他們的表單字段不能滿(mǎn)足他們的需求。比如,一些用戶(hù)希望能錄入客戶(hù)的傳真號(hào)碼,而我們沒(méi)有提供此字段。

1.2 目標(biāo)

(1)用戶(hù)目標(biāo)

能夠添加、刪除以及修改「客戶(hù)」表單內(nèi)容。

(2)設(shè)計(jì)目標(biāo)

實(shí)現(xiàn)添加、刪除和修改表單字段功能

優(yōu)化Web端客戶(hù)自定義字段界面體驗(yàn)。

1.3 體驗(yàn)指標(biāo)

二、?現(xiàn)狀分析

2.1 發(fā)現(xiàn)

(1)基本需求得不到滿(mǎn)足,需要適配舊版瀏覽器

目前用戶(hù)只能使用默認(rèn)模板,無(wú)法自定模板,所以用戶(hù)反饋需求得不到滿(mǎn)足。 很多企業(yè)用戶(hù)使用的是筆記本電腦,屏幕可能相對(duì)比較小。同時(shí),對(duì)于某些企業(yè)用 戶(hù)來(lái)說(shuō),電腦系統(tǒng)可能會(huì)很好舊,需要適配一些?IE?用戶(hù)。

(2)用戶(hù)沒(méi)有反饋渠道

CRM?產(chǎn)品是全新的產(chǎn)品,還沒(méi)有用戶(hù)反饋渠道。

2.2 推測(cè)與建議

(1)完成整體需求設(shè)計(jì),滿(mǎn)足添加、刪除以及修改表單字段需求。

(2)構(gòu)建用戶(hù)反饋通道。

三、設(shè)計(jì)方案

我在設(shè)計(jì)界面的時(shí)候,我使用了大量的「拖放」設(shè)計(jì)。 用戶(hù)可以通過(guò)拖拽的形式,將左側(cè)預(yù)設(shè)的一些控 件拖到界面中的手機(jī)內(nèi),同時(shí)用戶(hù)還能修改控件的標(biāo)題及提示語(yǔ)等。這樣用戶(hù)就可以根據(jù)自身需求,增添、刪改表單。(少部分系統(tǒng)默認(rèn)的字段用戶(hù)無(wú)法刪改。)

四、 方案總結(jié)

在設(shè)計(jì)的過(guò)程中,我發(fā)現(xiàn)拖放看似很簡(jiǎn)單。但事實(shí)上,拖放過(guò)程涉及了大量細(xì)節(jié)。比如:

  • 用戶(hù)怎么知道可以拖動(dòng)
  • 拖放對(duì)象的目的是什么?
  • 在哪里可以或不可以放置拖動(dòng)的對(duì)象?
  • 通過(guò)什么視覺(jué)元素來(lái)表示拖動(dòng)能力?
  • 拖動(dòng)期間,怎樣表示有效和無(wú)效的放置目標(biāo)?
  • 是否允許用戶(hù)拖動(dòng)實(shí)際的對(duì)象?
  • 還是只允許用戶(hù)拖動(dòng)實(shí)際對(duì)象的幻影?
  • 整個(gè)拖動(dòng)與放置期間,要對(duì)用戶(hù)給出哪些視覺(jué)反饋?

在設(shè)計(jì)的過(guò)程中,我參考了Bill Scott & Theresa Neil(2015)所著的《Web界面設(shè)計(jì)》。在此書(shū) 中,作者在第26?中提到:

在拖放期間,需要處理許多特定的狀態(tài)。我們把這些狀態(tài)稱(chēng)為趣味瞬間(interesting moment)。書(shū)中提到,趣味瞬間是由15個(gè)事件與6個(gè)相關(guān)元素組合而成。

這15個(gè)事件分別是:

  1. ?面加載:在所有操作發(fā)生之前,可以預(yù)告拖放功能。例如,可以在?面上顯示一條提示信息,告 訴用戶(hù)可以拖放某些元素。
  2. 鼠標(biāo)懸停:鼠標(biāo)指針懸停在可拖動(dòng)的對(duì)象上方。
  3. 鼠標(biāo)按下:在可拖動(dòng)對(duì)象上按下鼠標(biāo)鍵。
  4. 拖動(dòng)啟動(dòng):鼠標(biāo)開(kāi)始移動(dòng)。(在對(duì)象被拖動(dòng)3像素或鼠標(biāo)按下超過(guò)0.5秒時(shí)啟動(dòng)拖動(dòng)。)
  5. 拖動(dòng)離開(kāi)原始位置:可拖動(dòng)對(duì)象離開(kāi)了原來(lái)的位置或包含它的容器。
  6. 拖動(dòng)重新進(jìn)入原始位置:可拖動(dòng)對(duì)象又進(jìn)入了原來(lái)的位置。
  7. 拖動(dòng)進(jìn)入有效目標(biāo):可拖動(dòng)對(duì)象位于有效的放置目標(biāo)上方。
  8. 拖動(dòng)退出有效目標(biāo):可拖動(dòng)對(duì)象離開(kāi)有效的放置目標(biāo)。
  9. 拖動(dòng)進(jìn)入無(wú)效目標(biāo):可拖動(dòng)對(duì)象位于無(wú)效的放置目標(biāo)上方。
  10. 拖動(dòng)進(jìn)入非特定目標(biāo):可拖動(dòng)對(duì)象位于放置目標(biāo)和非放置目標(biāo)之外的區(qū)域。取決于是否將有效目標(biāo) 之外的區(qū)域全都看成無(wú)效目標(biāo)。
  11. 拖動(dòng)懸停于有效目標(biāo):可拖動(dòng)對(duì)象暫時(shí)停駐于有效目標(biāo)之上,但用戶(hù)沒(méi)有釋放鼠標(biāo)。此時(shí),有效的放置目標(biāo)通常會(huì)突然打開(kāi)。例如,拖動(dòng)并在一個(gè)文件夾上方暫停,文件夾會(huì)打開(kāi)以示可以接受上方 對(duì)象。
  12. 拖動(dòng)懸停于無(wú)效目標(biāo):可拖動(dòng)對(duì)象暫時(shí)停駐于無(wú)效目標(biāo)之上,但用戶(hù)沒(méi)有釋放鼠標(biāo)。這個(gè)事件有用 嗎?也許可以在此時(shí)對(duì)用戶(hù)給出反饋,說(shuō)明為什么下面不是一個(gè)有效目標(biāo)。
  13. 放置被接受:可拖動(dòng)對(duì)象位于有效目標(biāo)之上,而且放置已經(jīng)被接受。
  14. 放置被拒絕:可拖動(dòng)對(duì)象位于無(wú)效目標(biāo)之上,而且放置已經(jīng)被拒絕。此時(shí)用不用把被拖動(dòng)對(duì)象移回原處?
  15. 放置在父容器上:拖動(dòng)對(duì)象時(shí)的位置一般來(lái)說(shuō)不會(huì)有什么特殊之處,不過(guò)在個(gè)別情況下,不同位置會(huì)有不同的含義。

在上述的每個(gè)事件發(fā)生時(shí),都可以在視覺(jué)上操作一些相關(guān)元素,這些元素包括:

  1. ?面(例如,在?面上顯示靜態(tài)消息)
  2. 光標(biāo)
  3. 工具提示條
  4. 拖動(dòng)對(duì)象(或拖動(dòng)對(duì)象的某個(gè)部分,例如模塊的標(biāo)題區(qū))
  5. 拖動(dòng)對(duì)象的父容器
  6. 放置目標(biāo)

最后,將這些事件與元素放進(jìn)一個(gè)表格中,就會(huì)得到:

每一個(gè)事件與元素的交叉點(diǎn),都是可實(shí)現(xiàn)的行為。而上表就像一個(gè)備忘錄,可以確保不遺漏交互期間需要 處理的任何情況。但是,考慮到簡(jiǎn)潔的需求,我們不一定需要為每一個(gè)交叉點(diǎn)都設(shè)計(jì)一個(gè)行為。同時(shí),在 設(shè)計(jì)行為的時(shí)候,我們還需要考慮該行為是否適合拖放。

《Web界面設(shè)計(jì)》中也提到,適合拖放的情況有以下五種:

  1. 拖放模塊(重新排列?面上的模塊)
  2. 拖放列表(重新排列列表項(xiàng)的順序)
  3. 拖放對(duì)象(改變對(duì)象間的從屬關(guān)系)
  4. 拖放操作(在被放置對(duì)象上執(zhí)行操作,比如:拖動(dòng)上傳功能)
  5. 拖放集合(通過(guò)拖放操作集合,比如:購(gòu)物?功能)

如果你設(shè)計(jì)的界面是屬于以上幾種,那么拖放操作會(huì)是很好的選擇。

五、 項(xiàng)目落地后

1. 最后項(xiàng)目落地,因?yàn)闀r(shí)間的原因只完成了需求部分——添加、刪除以及修改表單字段。而反饋通路的搭建則因時(shí)間與資源的原因,被擱置。不過(guò)現(xiàn)在仍然在推動(dòng)中。

2. 也因?yàn)闀r(shí)間的原因,沒(méi)有適配較舊的?IE,以及特別小的或奇怪的屏幕(比如正方形的屏幕)。

3. 在經(jīng)過(guò)一對(duì)一的可用性測(cè)試后,也發(fā)現(xiàn)在沒(méi)有引導(dǎo)的情況下,「拖拽」這一交互動(dòng)作的功能可供性特別弱。很多用戶(hù)一上來(lái)就是「點(diǎn)擊」。所以也考慮未來(lái)會(huì)將「拖拽」動(dòng)作改為「點(diǎn)擊」。

 

作者:王梓銘,云之家用戶(hù)體驗(yàn)部交互設(shè)計(jì)師。前產(chǎn)品汪, 還能偷偷擼幾行代碼。時(shí)常做夢(mèng),想改變世界。懷揣著這個(gè)夢(mèng)想,跌跌撞撞嘗試了各種各樣的東西。錄過(guò)視頻,開(kāi)過(guò) Podcast,玩過(guò)博客。 最后發(fā)現(xiàn),其實(shí)改變世界并不難。從小事做起,幫助能幫助的人,改變能改變的人就已經(jīng)足夠了。

本文來(lái)源于人人都是產(chǎn)品經(jīng)理合作媒體@金蝶云之家體驗(yàn)中心(微信ID:UXD-Cloudhub),作者@王梓銘

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!