當(dāng)設(shè)計一個頁面/功能時,先從設(shè)計用戶流程開始吧

8 評論 15487 瀏覽 123 收藏 9 分鐘

在激烈的比賽中取勝的往往是那些把技能鍛煉得更深刻的選手。我們能成為頂尖選手并沒有什么秘訣,而是對可能是基本技能的東西有更深的理解。每天都要學(xué)得更深一點而不是更廣一點,因為學(xué)得更深可以讓我們把潛力中那些看不到、感受不到但又極具創(chuàng)造力的部分挖掘出來?!獓H象棋大師&業(yè)余太極推手世界冠軍,喬希?維茨金

最近在Udacity學(xué)習(xí)老美的產(chǎn)品設(shè)計課程,我以為會吸收不少先進的產(chǎn)品理念,但只是一再強調(diào)那些我早就「看不起」的基本概念、基礎(chǔ)注意事項。

他們特別強調(diào)對于這些基本功的嚴格執(zhí)行。就像一開頭我引用國際象棋大師說的那句話一樣,「我們能成為頂尖選手并沒有什么秘訣,而是對可能是基本技能的東西有更深的理解」。其中一個讓我印象深刻的是關(guān)于用戶流程圖的設(shè)計。

流程圖,我相信在互聯(lián)網(wǎng)公司待過的同學(xué)再熟悉不過,產(chǎn)品會用到流程圖、設(shè)計會用到流程圖、開發(fā)測試也會用到流程圖。

在我工作的時候,沒有做出過一次讓設(shè)計/碼農(nóng)0疑問的流程圖,我把大部分的精力放在了產(chǎn)品/網(wǎng)站的視覺表現(xiàn)上,甚少思考流程里有什么改進空間,甚至有時候因為功能簡單連流程圖都懶得去想去弄了。

這個課程里提到我們在產(chǎn)品設(shè)計開始時會犯的兩個典型錯誤:

  1. PM因為舊版本不夠時髦/好看,進行產(chǎn)品設(shè)計;
  2. PM用堆積木的方式來設(shè)計產(chǎn)品,比如LOGO放上邊,登錄模塊右上角,界面采用左右布局等等。

看了以后內(nèi)心特別慚愧,自己就是這么干的。

順序錯了。我們應(yīng)該從「完成商業(yè)目標(biāo)」和「幫助用戶完成任務(wù)」開始,你希望用戶來到這里干什么,他們要經(jīng)歷多少艱難險阻的操作才能最終完成你的任務(wù),你怎么設(shè)計這些操作使得用戶減少用戶投降放棄的比例。

設(shè)計不只是設(shè)計它長得漂不漂亮,更重要的是設(shè)計它好不好用。當(dāng)我們設(shè)計一個頁面/功能時,先從設(shè)計用戶流程開始吧。

時刻提醒自己的兩件事情:

  1. 產(chǎn)品/項目目標(biāo)是什么,這是你讓一堆設(shè)計師程序猿加班加點圍著你團團轉(zhuǎn)的原因;
  2. 用戶目標(biāo)是什么,他們有什么需求要滿足。

留意用戶的來源

用戶從四面八方過來,質(zhì)量參差不齊,對于產(chǎn)品和信息的了解程度也不同,設(shè)計流程的第一步就是為不同的客源設(shè)計流程(也許到后面你發(fā)現(xiàn)他們的流程都一樣)。

他們可能是:

  • 搜索引擎主動找過來的;
  • 你發(fā)布的廣告騙過來的;
  • 被朋友圈微博吸引來的;
  • 正在使用你網(wǎng)站/產(chǎn)品發(fā)現(xiàn)的;

……

這些人各自「心懷鬼胎」,你得把他們的需求和你的訴求想辦法匹配起來,提升轉(zhuǎn)化率。

舉一個之前迅雷會員開通(但我們沒做好的)的流程為例,我們的流程是:

高速通道試用→ 試用效果展示/會員介紹→點擊「開通會員」→登錄/注冊→支付頁面→完成支付、開通會員

這里我們思考得就不夠勤快,沒有針對不同用戶設(shè)計流程,也不愿意給自己添麻煩。我隨便舉一下針對不同用戶群改進思路:

1、曾經(jīng)是會員但現(xiàn)在沒續(xù)費的

沿用上面流程,但在支付時候可以記住上次支付方式,或者是在支付時提供給老會員買年費的折扣;

2、沒有賬號的用戶

他可能只是想看看價格再決定買不買,但登錄/注冊的流程會擋掉一大部分人。

提供用QQ登錄的接口,或者是直接直接到支付頁,在頁面填寫自己的郵箱/手機,支付完成給他們的郵箱/手機發(fā)送密碼(當(dāng)然涉及到已經(jīng)有賬號或者這個郵箱手機被注冊了怎么辦的邏輯分支)。

如果把流程圖更細化、更多一點思考,我相信還能想到更多提升轉(zhuǎn)化率的改進方法。

一些改進用戶流程的思考方法:

  • 用戶來這里有什么需求?他們有什么問題要解決?(空虛寂寞孤獨冷的夜晚怎么打發(fā))
  • 他們?yōu)槭裁葱枰闾峁┑臇|西?(提供給他一段美好的個人時光)
  • 你的產(chǎn)品/服務(wù)對于他們最重要的特性是什么?(速度快?立即能看片?)
  • 用戶有什么擔(dān)心,他們猶豫什么?(太貴了,有沒有效果?)
  • 什么信息能夠幫助他們做決定?(3天無效退款)
  • 有什么情緒或者沖動能幫他們做決定?(精蟲上腦)

這些問題靠自己YY肯定是不夠的,這就促使你要多跟用戶交流了。交流的時候,你發(fā)現(xiàn)會有千奇百怪的用戶,如果你為每一類人定制專門的流程,就算你不累死設(shè)計開發(fā)也會把你打得半死.

這其中的取舍就依賴于你的判斷了(要不然老板給你的工資是干啥用的?。?。

「流程」里要有些啥?

我自己以前畫的用戶流程,著重點是不同狀態(tài)間的邏輯跳轉(zhuǎn)。課程提供了另外一種方式提升可用性,我覺得非常贊。它將一個流程分成上下兩部分,上面是「用戶看到什么」,下面是「你要用戶做什么」。比如:

微博桌面截圖_20161013105845

使用這種方式,可以讓你專注于怎么提升用戶的行動上。給其他同學(xué)看的時候可讀性也更好(不像我之前的流程圖,實際看的人沒幾個)。

做的時候可能會比較痛苦,以往的流程只需要考慮狀態(tài)之間的跳轉(zhuǎn)就好,而這種方式增加了用戶可見內(nèi)容跟要用戶行動的內(nèi)容。但這種工作量的增加是值得的,我自己在做練習(xí)的時候,就會時刻提醒自己不忘最后的目標(biāo),這些信息是不是有助于提升用戶的點擊、哪些動作要簡化哪些要增加。

值得模仿的網(wǎng)站

作者提供了兩個在用戶流程方面很不錯的網(wǎng)站作為學(xué)習(xí)對象,一個是tastebuds.fm,一個是codecademy,都不需要翻墻就能直接訪問。計算是花個5分鐘瀏覽一下,也能給你帶來不少的收獲哦。

1、https://tastebuds.fm//

2、https://www.codecademy.com/

#專欄作家#

黎晨,微信公眾號xiaochenxiangtaiduo。人人都是產(chǎn)品經(jīng)理專欄作家,畢業(yè)后在迅雷服役8年,從零開始參與迅雷史上最賺錢業(yè)務(wù)(迅雷會員)的大部分工作。做過c++工程師、數(shù)據(jù)分析師、迅雷會員運營總監(jiān),在付費用戶運營上有很多一線實戰(zhàn)經(jīng)驗,可惜還沒能把工作當(dāng)玩耍。

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 可以做個案例分析下您的理論用法么?添加了用戶分層、前端展示和用戶操作的維度,豈不是泳道圖(表述業(yè)務(wù)流程圖的一種圖)的做法?
    用戶流程圖到底是什么?用來做什么?盼解析

    回復(fù)
  2. 我總結(jié)流程圖有四個元素:對象、動作、數(shù)據(jù)、狀態(tài)。
    對象:指操作動作的人、系統(tǒng)等,提前搞清楚哪些對象需要執(zhí)行(查看)動作來修改數(shù)據(jù)或者狀態(tài)。
    動作:對象通過對象來改變數(shù)據(jù)或狀態(tài)。
    數(shù)據(jù):數(shù)據(jù)是核心。
    狀態(tài):狀態(tài)是一種特殊的數(shù)據(jù),它的作用在流程圖中就是用來判斷執(zhí)行不同的動作。

    流程圖多修改,若畫出復(fù)雜的流程圖,從全局一看,減少其中多余的對象或動作或數(shù)據(jù)或狀態(tài),可能流程就清晰了。

    其實我有空還是喜歡做原型,通過設(shè)計、產(chǎn)品、開發(fā)一起來做動態(tài)的原型,更加直觀。但比較耗費精力,那得配一個高效精干的團隊才能駕馭。

    回復(fù)
    1. 可以詳細再講講嗎

      來自上海 回復(fù)
    2. 不實用的邏輯思維

      回復(fù)
  3. 說的都很“正確”,總結(jié)下來就是以實用為核心,考慮不同的場景狀態(tài)。其實,越往深處走,應(yīng)該是大而全的整體性思維,它或許是一種固定的思考模式。

    來自廣東 回復(fù)
  4. 有啟發(fā)??

    回復(fù)
  5. 如果可以把那兩個網(wǎng)站也舉例分析一下就更好啦!

    來自北京 回復(fù)
  6. ?? 您好,我在站酷網(wǎng)上轉(zhuǎn)發(fā)了您的文章,已經(jīng)注明轉(zhuǎn)發(fā)自您的文章 ?? 并附上了這里的地址。如果您想刪除請聯(lián)系我。我會自行刪除。感謝您的分享。

    來自山東 回復(fù)