案例分析:表單錄入頁面過長,我們?cè)撊绾蝺?yōu)化?

2 評(píng)論 6301 瀏覽 72 收藏 8 分鐘

本文以線上貨運(yùn)app為例,發(fā)現(xiàn)這款app在發(fā)布貨源頁面存在表單內(nèi)容錄入過多,貨主可能沒有耐心全部填完等問題,于是開始對(duì)其進(jìn)行簡化優(yōu)化,并和我們分享了其中的要點(diǎn)。

因?yàn)閞uby姐從事的是線上貨運(yùn)行業(yè),一個(gè)貨源的產(chǎn)生的最源頭其實(shí)是我們的貨主爸爸,他是站在我們服務(wù)的食物鏈的頂端,沒有他發(fā)布的貨源,平臺(tái)上就沒有吸引司機(jī)的目標(biāo)物,就無法形成一個(gè)需求的閉環(huán)。所以當(dāng)貨主在一些關(guān)鍵流程中有使用不爽的地方,那分分鐘可能就想“踢館”,也會(huì)對(duì)我們的業(yè)務(wù)以及獎(jiǎng)金產(chǎn)生致命的影響(嚴(yán)肅臉)。

今天我們要研究的一個(gè)案例就是貨主在使用app進(jìn)行貨源發(fā)布的使用場景,發(fā)貨爽不爽也真的很重要哦,它就是金爸爸對(duì)我們平臺(tái)的第一印象,咱也千萬別掉鏈子嘞

0、背景概述

線上貨運(yùn)的一個(gè)基本流程是:

  1. 貨主在線上發(fā)布貨源;
  2. 司機(jī)看到合適貨源,與貨源溝通并承運(yùn);
  3. 貨主跟蹤運(yùn)輸,司機(jī)按貨主要求承運(yùn)后上傳相應(yīng)的憑據(jù)提交平臺(tái)結(jié)算
  4. 貨主及平臺(tái)審核后打款;
  5. 運(yùn)輸完成。

好了,不廢話,直接上一個(gè)ruby姐在競調(diào)發(fā)現(xiàn)的同行案例~

就問你怕不怕(仰天長笑三聲)~好了,言歸正傳,下面我們來一步步分析這個(gè)頁面是否還有的救。

一、分析整理

目前ruby姐發(fā)現(xiàn)這個(gè)發(fā)布貨源頁面的問題如下:

內(nèi)容錄入過多,貨主可能沒有耐心全部填完(就問你有沒有被嚇跑吧)~

所以我們的目標(biāo)是需要對(duì)已有的發(fā)布流程進(jìn)行流程的簡化、交互的優(yōu)化和引導(dǎo)。

二、流程/交互優(yōu)化

1. 內(nèi)容錄入過多,進(jìn)行步驟拆分

從現(xiàn)有的頁面來看,貨主點(diǎn)擊發(fā)貨后給貨主羅列了所有發(fā)貨目前需要的字段信息,沒有對(duì)發(fā)貨的信息進(jìn)一步的梳理。對(duì)平臺(tái)發(fā)貨規(guī)則不清楚的新生貨主可能看到這個(gè)頁面就被嚇跑了(內(nèi)心os:我選擇不發(fā)貨還不行么,求放過啊o(╥﹏╥)o)

對(duì)于這種頁面布局較長的頁面,需要信息的優(yōu)先級(jí)展示并且分步驟的引導(dǎo)用戶完成發(fā)貨的操作。

我們來分析一下:發(fā)一個(gè)貨,首先最重要額基礎(chǔ)信息就是:

  1. 這個(gè)貨需要運(yùn)往哪里,需要什么樣的車來運(yùn)輸;
  2. 貨物什么時(shí)候運(yùn)輸?shù)?,以及這個(gè)貨運(yùn)輸我能給到多少錢;
  3. 貨物其它相關(guān)信息(是否需要購買保險(xiǎn)、押回單、油氣等)

分析后我們發(fā)現(xiàn)如果能夠?qū)l(fā)貨進(jìn)行信息層級(jí)分布,引導(dǎo)用戶進(jìn)行一步步的設(shè)置,并對(duì)交互進(jìn)行優(yōu)化后,發(fā)貨這個(gè)動(dòng)作對(duì)于貨主也會(huì)更加友好哦
好了,坐穩(wěn)了,我們開始拿起手中的工具來做一番改造吧(捂臉)

三、優(yōu)化后的方案呈現(xiàn)

先上一個(gè)動(dòng)圖吧~大家一起動(dòng)起來(gif源文件太大壓縮后勉強(qiáng)看一下叭)

提煉發(fā)貨的重要信息,引導(dǎo)貨主去先行錄入貨源基礎(chǔ)信息,隱藏部分關(guān)聯(lián)信息、讓信息更加聚焦。

下面讓我們一步步分解吧~

1. 信息層級(jí)梳理

信息表單的呈現(xiàn)也分為信息的分層與信息的關(guān)聯(lián)度,在信息框架搭建中要有一條清晰的主線,我們呈現(xiàn)信息的邏輯是什么以及我們的設(shè)計(jì)目的? 而不是一股腦把眾多的信息放在用戶面前讓他們自己去做選擇(不要給用戶選擇題,特別是我們的貨主爸爸)。

2. 控件的優(yōu)化

在表單的設(shè)計(jì)中,有一個(gè)不容忽視的就是我們的控件(劃重點(diǎn)),一個(gè)好的控件設(shè)計(jì)不僅僅能引導(dǎo)用戶錄入信息,也在一定程度在保持信息的簡潔。

3. 信息的聯(lián)動(dòng)設(shè)計(jì)

信息與信息也有聯(lián)動(dòng)關(guān)系,即A的信息觸發(fā)聯(lián)動(dòng)B的信息展示,這樣設(shè)計(jì)的好處讓用戶視覺和動(dòng)作上更加集中,不過多的去干擾到用戶,在一定程度上也減少了信息的冗余性。

四、總結(jié)

1. 幫用戶記憶,減少用戶的輸入

就像我們常去一家餐館吃飯,當(dāng)年坐下來的時(shí)候,老板可能就已經(jīng)知道你想吃什么,自動(dòng)就會(huì)給你使一個(gè)顏色把你愛吃的常備的菜給你端上來一樣。我們?cè)谧霎a(chǎn)品設(shè)計(jì)時(shí),也要考慮到哪些信息用戶更改的頻次較少,也可以在本地存儲(chǔ),減少用戶的操作。

2. 信息有層級(jí),有重點(diǎn)

同樣以吃飯為例,我們要知道我們最想讓用戶買單的菜品是什么,其它小菜附加值較低的甜品可以在最后再擺上。你距離米其林大廚只差一步擺盤,同樣一道菜怎樣才吸引受眾值得我們深思。

3. 設(shè)計(jì)產(chǎn)品的同理心

當(dāng)你都拒絕和延誤一個(gè)東西的時(shí)候,怎么去推銷并吆喝讓你的受眾買單呢。

最后的最后,ruby姐碼字真的不容易(尊重每一個(gè)碼字的作者,真心的),給個(gè)贊唄

 

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

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

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

    來自廣東 回復(fù)
  2. 有幫助,感謝分享

    來自北京 回復(fù)