案例分析 | 「頁(yè)面跳轉(zhuǎn)」引發(fā)的思考

5 評(píng)論 14049 瀏覽 64 收藏 9 分鐘

編輯導(dǎo)語(yǔ):如何做出正確的設(shè)計(jì)決策?這要求設(shè)計(jì)師站在用戶(hù)的角度,基于用戶(hù)場(chǎng)景和用戶(hù)需求進(jìn)行抉擇,給出相對(duì)更合理的、更有效解決問(wèn)題的設(shè)計(jì)方案。本篇文章里,作者結(jié)合實(shí)際案例,聊了聊他對(duì)設(shè)計(jì)決策的思考,不妨來(lái)看一下。

同一個(gè)需求,設(shè)計(jì)師可以提出各種設(shè)計(jì)方案,如何才能做好設(shè)計(jì)決策呢?

一方面要做好前期的設(shè)計(jì)研究、競(jìng)品分析、數(shù)據(jù)分析等,另一方面也要基于設(shè)計(jì)經(jīng)驗(yàn),從設(shè)計(jì)本身出發(fā)尋找到更加理想的設(shè)計(jì)方案。今天就結(jié)合一個(gè)案例聊聊我個(gè)人的思考。

一、案例背景

最近在產(chǎn)品測(cè)試時(shí),有同事提出”查看詳情”跳轉(zhuǎn)到新的頁(yè)面,返回時(shí)不是跳回當(dāng)前的列表頁(yè)碼,而是返回到列表首頁(yè)。用戶(hù)必須要再次切換到之前的瀏覽頁(yè),才能在選擇下一條信息繼續(xù)查看詳情。使用起來(lái)非常不方便,有些“反人類(lèi)”。

聽(tīng)了他的說(shuō)法后,我實(shí)際操作了一下,確實(shí)是存在這個(gè)問(wèn)題。內(nèi)心不禁感嘆“竟然漏了這個(gè)細(xì)節(jié)”,但是仔細(xì)思考了一下,總覺(jué)得這個(gè)需求有些不妥。

所以按照設(shè)計(jì)的常規(guī)流程,進(jìn)行了一些競(jìng)品調(diào)研和場(chǎng)景分析。

二、競(jìng)品調(diào)研

首先查看了一些后臺(tái)管理類(lèi)產(chǎn)品,發(fā)現(xiàn)大部場(chǎng)景“返回”都是回到列表首頁(yè),個(gè)別是回到當(dāng)前頁(yè)面的。這說(shuō)明技術(shù)上不存在問(wèn)題,那為什么會(huì)有不同的設(shè)計(jì)呢?

這就需要回歸用戶(hù)場(chǎng)景,刨根問(wèn)底了。

三、場(chǎng)景分析

對(duì)于B端產(chǎn)品,用戶(hù)面對(duì)的可能是海量的數(shù)據(jù),主流的數(shù)據(jù)呈現(xiàn)形式就是表格。為了提高用戶(hù)效率,搜索也就成為了標(biāo)配功能。用戶(hù)可能只會(huì)有耐心看完前2頁(yè)的數(shù)據(jù)內(nèi)容,如果不滿(mǎn)足用戶(hù)的需要,則會(huì)選擇搜索查找。

所以B端產(chǎn)品可以看作是“重搜索”的場(chǎng)景,基于這樣的分析,我們認(rèn)為用戶(hù)不會(huì)不停地翻頁(yè)尋找自己的操作目標(biāo)。

另外B端用戶(hù)主要目標(biāo)是為了完成業(yè)務(wù)工作,如果是非職責(zé)所在,不會(huì)像C端用戶(hù),主動(dòng)去“閑逛”查看頁(yè)面內(nèi)容。所以我們首先要保證用戶(hù)能夠快速定位目標(biāo)數(shù)據(jù),完成詳情查看。

而測(cè)試場(chǎng)景下的用戶(hù)行為和真實(shí)用戶(hù)是有區(qū)別的,兩者的操作目標(biāo)也不相同。最終我們決定這個(gè)需求降級(jí)處理,暫不修改,還是將返回功能跳轉(zhuǎn)回表格首頁(yè)。后續(xù)根據(jù)用戶(hù)的實(shí)際反饋再做處理。

四、交互的深度思考

后來(lái)我又做了進(jìn)一步思考,發(fā)現(xiàn)“返回第幾頁(yè)”只是表象問(wèn)題。這個(gè)問(wèn)題的本質(zhì)在于用戶(hù)需要什么樣的信息,如何獲取所需的信息,信息該如何呈現(xiàn)給用戶(hù)。轉(zhuǎn)化為設(shè)計(jì)需求,主要是以下幾個(gè)問(wèn)題:

  • 詳情信息可以通過(guò)什么其他方法,更好的呈現(xiàn)給用戶(hù),避免頁(yè)面刷新?
  • 有沒(méi)有可能將用戶(hù)想要的信息展示在表格首頁(yè)?
  • 設(shè)計(jì)側(cè)能否給出更好的解決方案,減少用戶(hù)返回,實(shí)現(xiàn)連續(xù)操作?

我們可以將以上問(wèn)題歸集到用戶(hù)體驗(yàn)五要素中去尋找答案。

1. 框架層

1)頁(yè)面跳轉(zhuǎn)的方式

通常B端產(chǎn)品頁(yè)面跳轉(zhuǎn)是路徑下鉆式的,也就是說(shuō)表格頁(yè)面和詳情頁(yè)面是不共存的。而傳統(tǒng)的網(wǎng)頁(yè)瀏覽都是新開(kāi)瀏覽器標(biāo)簽頁(yè)的形式,實(shí)現(xiàn)內(nèi)容的并行獨(dú)立展示,從而避免跳轉(zhuǎn)和返回的問(wèn)題。例如電商平臺(tái)的詳情頁(yè)面展示,通過(guò)新開(kāi)瀏覽器標(biāo)簽的方式,允許用戶(hù)多條詳情的并行查看。

這種新開(kāi)頁(yè)面的形式在管理系統(tǒng)中應(yīng)用較少,主要用于跨產(chǎn)品的頁(yè)面跳轉(zhuǎn)或者訂單購(gòu)買(mǎi)頁(yè)面。例如阿里云、騰訊云產(chǎn)品功能之間的相互跳轉(zhuǎn),都是采用新開(kāi)標(biāo)簽頁(yè)的形式,可以保證用戶(hù)并行操作,方便信息間的對(duì)比、參考等。

案例分析 | 「頁(yè)面跳轉(zhuǎn)」引發(fā)的思考

▲瀏覽器標(biāo)簽頁(yè)

2)系統(tǒng)內(nèi)標(biāo)簽頁(yè)

系統(tǒng)內(nèi)標(biāo)簽頁(yè)同樣是相互獨(dú)立的,互不干涉,多窗口自由切換,并且信息保留在系統(tǒng)內(nèi)部,用戶(hù)的視覺(jué)動(dòng)線相對(duì)集中,交互操作成本更低。當(dāng)然標(biāo)簽頁(yè)欄屬于框架層級(jí),始終都會(huì)占據(jù)頁(yè)面位置,會(huì)進(jìn)一步壓縮屏幕縱向有效空間。

案例分析 | 「頁(yè)面跳轉(zhuǎn)」引發(fā)的思考

▲系統(tǒng)內(nèi)標(biāo)簽頁(yè)

框架層屬于頂層設(shè)計(jì),決定了產(chǎn)品的信息架構(gòu)和交互邏輯,考慮的更多是一致性,需要綜合考慮確定。不能因?yàn)橐粋€(gè)頁(yè)面的交互形式就隨意做出更改,否則會(huì)帶來(lái)較高的開(kāi)發(fā)成本。

2. 結(jié)構(gòu)層

結(jié)構(gòu)層更多的是信息的組織形式,特別是信息量較大的表格,除了搜索功能外,還需要通過(guò)拆解、篩選、過(guò)濾、排序等功能,讓用戶(hù)可以更加方便的縮小信息范圍,結(jié)合列表的基礎(chǔ)信息,準(zhǔn)確定位所需的信息,做出查看決策,從而減少錯(cuò)誤判斷帶來(lái)的非必要操作。

例如電商平臺(tái)的商家后臺(tái)訂單管理中,將訂單根據(jù)不同的狀態(tài)拆分為不同的表格,并且通過(guò)關(guān)鍵字過(guò)濾、排序策略等,幫助用戶(hù)篩選出目標(biāo)內(nèi)容。

案例分析 | 「頁(yè)面跳轉(zhuǎn)」引發(fā)的思考

▲搜索篩選精準(zhǔn)定位內(nèi)容

3. 表現(xiàn)層

1)浮層組件

頁(yè)面來(lái)回跳轉(zhuǎn)確實(shí)會(huì)造成用戶(hù)效率下降,如果頁(yè)面內(nèi)容不多,可以采用彈窗和抽屜替代。這兩種方式都是在當(dāng)前頁(yè)面出現(xiàn)的浮層組件,可以避免返回帶來(lái)的頁(yè)面刷新問(wèn)題。

案例分析 | 「頁(yè)面跳轉(zhuǎn)」引發(fā)的思考

▲抽屜組件避免返回操作

2)連續(xù)查看信息

對(duì)于用戶(hù)日常高頻操作信息,可以在詳情頁(yè)面增加連續(xù)操作按鈕,讓用戶(hù)不必返回即可完成信息查看。例如郵箱內(nèi)容詳情頁(yè),用戶(hù)可以通過(guò)“上一條、下一條”功能,在固定頁(yè)面逐條查看郵件,用戶(hù)效率更高。

案例分析 | 「頁(yè)面跳轉(zhuǎn)」引發(fā)的思考

▲郵箱上一封,下一封切換功能

五、寫(xiě)在最后

以上就是關(guān)于頁(yè)面跳轉(zhuǎn)的一些個(gè)人思考??偟膩?lái)說(shuō),設(shè)計(jì)形式和交互邏輯可以多種多樣,但是設(shè)計(jì)必須要圍繞用戶(hù)需求和業(yè)務(wù)場(chǎng)景展開(kāi),只有抓住根本性問(wèn)題,才能做出正確的設(shè)計(jì)決策。

#專(zhuān)欄作家#

子牧先生。公眾號(hào):子牧UXD(HelloDesign),人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。產(chǎn)品體驗(yàn)設(shè)計(jì)師。8年互聯(lián)網(wǎng)行業(yè)經(jīng)驗(yàn),擅長(zhǎng)體驗(yàn)設(shè)計(jì)思維、設(shè)計(jì)方法論、交互設(shè)計(jì)研究。

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

題圖來(lái)自 Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. C端

    回復(fù)
  2. 績(jī)效

    回復(fù)
  3. 結(jié)構(gòu)層和框架層是不是反了?

    來(lái)自江蘇 回復(fù)
  4. 如果沒(méi)有特殊的好處,保持一致性就是最佳選擇

    來(lái)自北京 回復(fù)
  5. 設(shè)計(jì)形式和交互邏輯可以多種多樣,確實(shí)如此,都不同的

    來(lái)自廣東 回復(fù)