以手機(jī)淘寶為例,看原型圖易缺失的交互場景

UX
11 評論 20186 瀏覽 165 收藏 8 分鐘

以iOS版手機(jī)淘寶歷史搜索為例,本文作者希望通過展示的原型圖來討論易遺漏的交互場景,讓讀者得到收獲,并總結(jié)出以后如何避免遺漏交互細(xì)節(jié)與定義。

手機(jī)淘寶搜索欄出現(xiàn)歷史搜索旨在減少用戶文本輸入,可快速查看以前搜索的商品。搜索發(fā)現(xiàn)通過用戶的操作行為智能推薦用戶感興趣的商品,增加用戶的訪問深度和購物興趣。

目前手機(jī)淘寶的搜索初始界面iOS 和Android版對歷史搜索的交互采取兩種不同的形式。iOS版通過用戶長按歷史搜索的關(guān)鍵詞,出現(xiàn)叉號,用戶點擊叉號進(jìn)行刪除關(guān)鍵詞,刪除過程中無需用戶進(jìn)行二次確認(rèn)。Android版用戶通過長按,出現(xiàn)彈框,需要進(jìn)行二次確認(rèn)。

iOS版優(yōu)點:相對于Android版,iOS 用戶在刪除過程中可以快速刪除,長按之后,手指立刻可以觸控到叉號icon進(jìn)行刪除。

iOS版缺點:

  1. 用戶在長按出現(xiàn)刪除icon,但是用戶如果不刪除關(guān)鍵詞,則無法恢復(fù)正常狀態(tài)。
  2. 叉號icon過小,有時候可能會出現(xiàn)點不中的情況。

Android版缺點:

  1. 通過長按刪除關(guān)鍵詞,出現(xiàn)彈框,從長按到出現(xiàn)彈框手指操作跳躍過大。
  2. 彈框僅僅起到了防錯功能,無法起到二次確認(rèn)刪除某個關(guān)鍵詞的作用(彈框提示語沒有標(biāo)明刪除的是哪個關(guān)鍵詞)。

手機(jī)淘寶中的歷史搜索,一個看似簡單的交互流程,可能蘊(yùn)含著很多的交互場景,但如果交互設(shè)計師/產(chǎn)品經(jīng)理首次設(shè)計類似的需求交互時可能會遺漏很多交互場景。

我以iOS版手機(jī)淘寶歷史搜索為例。通過展示的原型圖來討論易遺漏的交互場景,希望通過這篇文章可以讓讀者得到收獲,并總結(jié)出以后如何避免遺漏交互細(xì)節(jié)與定義。

1. 歷史搜索原型圖

目前手機(jī)淘寶的搜索初始界面iOS 和Android版對歷史搜索的交互采取兩種不同的形式。

iOS版通過用戶長按歷史搜索的關(guān)鍵詞,出現(xiàn)叉號,用戶點擊叉號進(jìn)行刪除關(guān)鍵詞。刪除過程中無需用戶進(jìn)行二次確認(rèn)。

2. iOS版歷史搜索原型圖

歷史搜索原型圖展示分三個小場景:1.歷史搜索的關(guān)鍵詞全部刪除。2.歷史搜索的關(guān)鍵詞單個刪除。3.搜索發(fā)現(xiàn)的關(guān)鍵詞處理。

2.1 歷史搜索的關(guān)鍵詞全部刪除

原型圖上面的交互定義有以下:

  1. 極限值的定義:確定歷史搜索和搜索發(fā)現(xiàn)最多關(guān)鍵詞為10個
  2. 刪除出現(xiàn)二次確認(rèn)的警示框
  3. 全部刪除后,搜索發(fā)現(xiàn)位置移動定義

2.1 歷史搜索的關(guān)鍵詞單個刪除

原型圖上面的交互定義有以下:

  1. 對單擊關(guān)鍵詞操作的交互說明
  2. 長按之后刪除,其他關(guān)鍵詞的移動定義

2.3 搜索發(fā)現(xiàn)的關(guān)鍵詞處理

原型圖上面的交互定義有以下:

  1. 對隱藏和開啟操作的定義
  2. 搜索發(fā)現(xiàn)的關(guān)鍵詞手勢定義

如果以上線框圖。貌似一看沒什么問題。其實遺漏了很多交互場景,大家可以找出存在哪些遺漏嗎?

3. 遺漏的交互場景

(1)用戶長按關(guān)鍵詞,關(guān)鍵詞出現(xiàn)叉號icon。如果單擊其他關(guān)鍵詞,如何交互?缺乏定義說明。如果不做說明,可能會出現(xiàn)以下兩種情況。

(2)用戶長按關(guān)鍵詞,關(guān)鍵詞出現(xiàn)叉號icon。如果用戶長按其他關(guān)鍵詞,之前關(guān)鍵詞叉號icon是否還存在?如果不做說明,可能會出現(xiàn)以下兩種情況。

(3)用戶長按關(guān)鍵詞,關(guān)鍵詞出現(xiàn)叉號icon。如果單擊其他關(guān)鍵詞,進(jìn)入下級界面,返回界面為哪個狀態(tài)界面?如果不做說明,可能會出現(xiàn)以下三種情況。

(4)如果歷史搜索關(guān)鍵詞挨著刪除,最后全部刪完?歷史搜索字段是否保留,如果保留是文案說明歷史搜索關(guān)鍵詞為空?這里又有兩種情況。

以上四種遺漏的交互場景,在設(shè)計過程中都必須要定義說明,不然到了開發(fā)階段,就會出現(xiàn)各種問題。

4. 總結(jié)

為什么會出現(xiàn)如此多遺漏。原因有以下情況:

  1. 因為在歷史搜索中存在長按手勢,那么在整個交互界面時,其他可交互元素也要考慮長按操作
  2. 出口與入口的忽略
  3. 僅僅考慮最大極限情況,卻沒有考慮最小極限

通過一個小小的歷史搜索就遺漏這么多問題。如果涉及到大的產(chǎn)品需求,想全面不遺漏交互場景,需要考慮以下情況:

  1. 明確所有場景和使用人群
  2. 交互邏輯無缺失
  3. 異常場景不遺漏
  4. 異常狀態(tài)有說明
  5. 手勢操作不遺漏
  6. 關(guān)鍵字段有規(guī)則定義
  7. 極限情況有定義
  8. 是否涉及到多種角色和權(quán)限
  9. 刷新、加載、轉(zhuǎn)場說明

PS:如何用科學(xué)方法做出專業(yè)無遺漏的原型圖,我會在后續(xù)的文章中講到,敬請期待哦。

#專欄作家#

UX,微信公眾號:UEDC,人人都是產(chǎn)品經(jīng)理專欄作家。華為ITUX交互組組長。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 趕緊發(fā)吧~期待哈

    來自廣東 回復(fù)
  2. 期待后面的文章!確實在做原型圖的時候經(jīng)常會漏掉不少交互細(xì)節(jié),求教科學(xué)方法避免這些情況~~

    來自廣東 回復(fù)
  3. 說到底 還是要仔細(xì)

    來自廣東 回復(fù)
  4. 很仔細(xì)啊,這種思考方式值得借鑒,不過有些地方其實制定好規(guī)則就可以應(yīng)對很多情況了,不一定要每種情況都舉出來
    比如長按出現(xiàn)的小叉叉,可以規(guī)定這個小叉叉的特性:1、唯一,那么漏掉場景的第二種情況就可以避免。2、切換焦點后清除,或切換場景后清除,那么第一種情況就可以避免

    來自浙江 回復(fù)
  5. echo?

    回復(fù)
    1. 是啊 你是哪位???

      來自廣東 回復(fù)
  6. 關(guān)注了 期待后面的文章

    回復(fù)
  7. 能加你微信嗎?我有幾個交互方面的困惑一直沒想通…

    回復(fù)
  8. 厲害厲害…我得關(guān)注你…

    回復(fù)
  9. 思維好縝密

    回復(fù)