怎樣設(shè)計一個難用的后臺運營工具?

21 評論 17770 瀏覽 253 收藏 16 分鐘

讓我手把手教你3個絕招,做一個超級難用的后臺運營工具。

15年7月-17年3月,我主要在做的是個人中心菜單、賬戶體系、客服系統(tǒng)等前端工作,相關(guān)的工作總結(jié),可以瀏覽我的其他文章:《怎樣設(shè)計一個不好的注冊流程》、《怎樣設(shè)計一個不好的“紅點”邏輯》(很高興看到騰訊社交用戶體驗部的文章《“煩人的小妖精”,小紅點是怎么來的》有引用)、《“PRD之道:4個撰寫PRD的關(guān)鍵思路”》。

上述文章的思路都是按“Via Negativa”來撰述的,本篇也是。

我個人比較喜歡讀Nassim Nicholas Taleb的書(著有《隨機漫步的傻瓜》、《黑天鵝》、《反脆弱》、《Skin in the game(新書,還沒出中文版)》)。

他在《反脆弱》中翻新了一個概念叫做“Via Negativa”。這個詞是拉丁文,含義可以理解為“negative way”或 “by way of denial”。

這個概念主張的是:負面的信息遠比正面的信息高效——找到一只“黑天鵝”,就可以立刻推翻“只有白天鵝”的假設(shè)(詳細闡述去看書)。同樣的,對于一些產(chǎn)品新人,如果有前人指出坑在哪里,會比告訴一堆怎么做,會更有幫助。

《反脆弱》

言歸正傳。17年3月,我通過內(nèi)部轉(zhuǎn)崗到了運營工具團隊,做一個唯品會內(nèi)部稱為“專題系統(tǒng)”的賣場搭建系統(tǒng)。

先大概解釋一下這個系統(tǒng)是干嘛的。

這種系統(tǒng),在業(yè)內(nèi),通用一些,有人稱之為CMS(Content Management System-內(nèi)容管理系統(tǒng))。準確一些,可以對標京東的“通天塔”系統(tǒng)(或老版的goshop),在淘寶估計也有類似的,但我沒有接觸過,淘寶的店鋪系統(tǒng)也比較相似了——區(qū)別只是在淘寶店鋪系統(tǒng),一個店鋪只能售賣店鋪內(nèi)的商品。

但“通天塔”或者“專題系統(tǒng)”是可以跨品牌、跨品類,多維度自定義搭建頁面的。實現(xiàn)方式就是運營通過拖拽一些模塊化的組件、配置特定的數(shù)據(jù),搭建一個H5賣場頁面,用來展示不同維度運營的貨品信息。

唯品會的大促活動頁面(也包括日常的小活動、或自定義的H5信息展示頁面),都是通過專題系統(tǒng)搭建的。

京東“通天塔”界面

淘寶旺鋪界面

唯品會 專題系統(tǒng)(舊)

唯品會 Nova專題系統(tǒng)(新)

這個系統(tǒng)在我接手的時候,已經(jīng)有接近2年的生命周期了,近幾個月在我們團隊的努力下,做了大幅優(yōu)化,重新命名為“Nova”專題系統(tǒng)。(“Nova”是天文學(xué)概念,中文譯為“新星”,但實際上準確來講,一顆行星衰亡時刻最后迸發(fā)出的強光,不過一般人在用這個詞的時候,都會忽略它的真實意義,詳細知識自行百度)。

Nova概念圖

專題系統(tǒng),最初始版本是:運營提需求,產(chǎn)品、設(shè)計、交互撰寫方案,開發(fā)按需開發(fā)H5頁面。由于活動需求變化快,每次開發(fā)的功能復(fù)用性差。很多小的公司,沒有工具化的系統(tǒng),依然在采用這用方法。

隨著電商行業(yè)進入頻繁大促的運營節(jié)奏后(大概從2015年開始),這種模式完全跟不上業(yè)務(wù)節(jié)奏,因此專題系統(tǒng)誕生了。

在我接手的時候,專題系統(tǒng)已經(jīng)是唯品會的一個核心運營系統(tǒng)了,服務(wù)的對象是全公司的運營團隊(目前暫時也沒有開放給第三方的計劃),涉及300多號人,大促、小促都離不開它。從技術(shù)性能上來講,它可以扛住大促的高并發(fā)流量,從業(yè)務(wù)使用上來講,前端開發(fā)可以快速上線HTML樣式,無需發(fā)版本,極其靈活。

但是,它有一個弊病——媽呀,太難用了。

接下來,讓我手把手教你3個絕招,做一個超級難用的后臺運營工具。

絕招一:必須要慢出翔

接觸過互聯(lián)網(wǎng)的人,應(yīng)該都接觸過旋轉(zhuǎn)的菊花:

天下武功,唯“慢”不破。

此招入門快,實現(xiàn)容易,卻可領(lǐng)運營痛苦不堪,為第一絕學(xué)。最好運營的每一步操作,都能讓菊花轉(zhuǎn)一轉(zhuǎn),就再好不過了。

現(xiàn)代運營管理(Operations Management)的精益運營(Lean Operation)理論分支提出過7種浪費:

  1. 生產(chǎn)過剩(Overproduction):To produce sooner or in greater qualities than what customers demand.
  2. 無效運輸(Unnecessary Transportation):Unnecessary movement of parts or people between.
  3. 返工(Rework):”Do it right at the first time, rework is a pain”—— Repetition or correction of a process.
  4. 過程繁復(fù)(Over-porcessing):Processing beyond what the customer requires.
  5. 無效動作(Unnecessary Motion):Unnecessary movement of parts or people within a process.
  6. 庫存積壓(Inventory):”Product has to flow like water”.
  7. 無效等待(Waiting):Underutilizing people or parts while a process completes a work cycle.

這里說的“慢出翔”,屬于第7個:無效等待。它不產(chǎn)出任何價值,而且會打斷運營的操作,如果走神干其他的去了,回神過來,估計還要一陣功夫。

“要等到什么時候!”

(對運營管理——不是“互聯(lián)網(wǎng)運營”,感興趣的,可以去Coursea上一下University of Pennsylvania的課程《Introduction to Operations Management》,花點錢,還可以搞個Certificate)

Coursera證書

造成無效等待的最大原因,其實是技術(shù)上“緩存”應(yīng)用不足的體現(xiàn)。如果產(chǎn)品不注意這個問題,開發(fā)一般也不會特意關(guān)注,最后就導(dǎo)致坑了運營。

具體來講,就是用戶操作中,每一步的操作,如果都需要與接口服務(wù)進行交互,那必然涉及到數(shù)據(jù)請求、數(shù)據(jù)返回的耗時。就好比你做一道蛋炒番茄,如果每個原料(番茄、雞蛋、油),都需要你走一次菜市場,一個一個買(注意不能帶菜籃子哦),絕對慢出翔啊。

但實際上,很多時候的操作,并不需要實時請求接口。大媽的菜籃子,就是緩存應(yīng)用的實例——你可以先挑菜呀,挑好了所有的,再一并帶回家。

大媽的菜籃

這個問題,從交互上,產(chǎn)品經(jīng)理是可以提出要求的,可操作性還是比較強的。在唯品會舊的專題系統(tǒng),操作復(fù)雜頁面時,像大促主會場涉及上百個組件,一個簡單的組件順序調(diào)整或增、刪,有時候就可以load幾十秒。

但在新的Nova專題系統(tǒng),我們的設(shè)計取消了布局操作的接口請求,運營的操作達到了實時響應(yīng),當需要保存操作整體結(jié)果的時候,點擊“保存”按鈕,才會一并請求接口、保存數(shù)據(jù)。

此外,有一篇David H.H(編程語言Ruby on Rails的創(chuàng)造者,37signals的創(chuàng)始人之一,有Basecamp等知名互聯(lián)網(wǎng)產(chǎn)品)的博客文章,推薦可以看一下,名字叫《How Basecamp Next got to be so damn fast without using much client-side UI

(37signals團隊有博客,有英文閱讀能力的,可以直接看,他們團隊的文字功底還不錯,甚至出版諸如《Rework》等對于工作效率方面的著作,他們比較倡導(dǎo)極簡主義。)

絕招二:不允許出錯(或低容錯)

是人,就會犯錯。

那就只給他一次機會,讓他提心吊膽,悔青腸子。

具體做法諸如:

  1. 操作一保存,立即發(fā)布上線,實時生效;
  2. 操作無法回退為上一次保存的情況,錯了,要從頭開始;
  3. 上傳項、填寫項,不校驗數(shù)據(jù)格式;
  4. 后臺的登錄狀態(tài),長時間不操作,會斷線,沒提示,斷了之后做過的東西都白搭。

對于唯品會的專題系統(tǒng):

  • 第1點,其實無論新舊系統(tǒng),我們做的都不錯。所有關(guān)鍵操作,都有二次確認。頁面制作好后,需要先預(yù)覽、復(fù)核數(shù)據(jù)正確后,再發(fā)布到先上。
  • 第2點,無論新舊專題系統(tǒng),都還沒有實現(xiàn),主要原因是技術(shù)實現(xiàn)成本較大——相當于要存儲多個數(shù)據(jù)備份,每個數(shù)據(jù)備份實際上都是要占用服務(wù)器空間的。
  • 第3點,舊的專題系統(tǒng),做得特別不好(Nova得到了較好的解決)——受系統(tǒng)限制,組件配置中的文本框被濫用,被開發(fā)定義了各種奇奇怪怪的數(shù)據(jù)格式,但都不會做規(guī)范校驗。比如:某個組件,必須傳750*480px的圖片才能正常展示,但運營在后臺可以成功上傳其他格式的圖片,最終導(dǎo)致前端展示異常。
  • 第4點,舊專題存在,需要刷新整個頁面,才能重連登錄狀態(tài),之前做的東西都白瞎。Nova解決掉了,具體實現(xiàn)方式是:重連登錄態(tài),改為請求任意后臺接口時進行,并不需要重新刷新整個頁面。

絕招三:不做任何指引

盲人摸象聽過么。

對的,就是要讓運營像瞎子一樣,猜!

要做到讓運營問這些問題:

“我在策劃一場活動,頁面希望長這樣子,你們系統(tǒng)能提供哪些功能?”

“我看到別人做的頁面,有一個模塊,我也想使用,組件叫什么?該如何配置?”

“這個組件,效果好不好?你們有數(shù)據(jù)經(jīng)驗嗎?”

“這個組件,配置好復(fù)雜,你教一下我?”

“你幫忙看看,我配置的組件無法正常展示,是哪里配置錯了嗎?”

在舊的專題系統(tǒng),由于交互隱晦、沒有操作指引,基本上所有系統(tǒng)能力,都靠口傳心授,耗費多方的人力,系統(tǒng)用得溜的基本上是在公司待了好幾年的,新來的人基本一臉懵逼,熟練上手需要個把月。產(chǎn)品、技術(shù)的日常維護成本極高,一天如果有5個運營來問你,就基本不用干活兒了。

但在Nova,我們打造了【組件樣式庫】——運營點擊,可以彈出詳細的配置介紹、場景說明?!卷撁婺0鎺臁俊容^像QQ空間的換膚,可以由活動策劃或設(shè)計師定義配色、基本的組件結(jié)構(gòu),運營搭建頁面的時候,可以直接套用,不同的模版,經(jīng)過實驗還可以整體迭代、優(yōu)化。

此外,還對界面的交互做了細致的優(yōu)化,比較晦澀難懂的操作,hover會有文案或圖片提示,或者點擊可以跳轉(zhuǎn)介紹wiki。

Nova樣式庫

Nova模版庫

一個不好的運營工具系統(tǒng),運營經(jīng)驗是無法傳承的,好的經(jīng)驗只能憋在幾個資深運營的肚子里,無法分享給別人。一些數(shù)據(jù)效果好的組件,也只有幾個人知道。運營需要幫助的時候,不能自助解答。

這個系統(tǒng)關(guān)聯(lián)的產(chǎn)品、設(shè)計、開發(fā)、運營,都要忙碌在低效的信息溝通中,疲于應(yīng)付瑣碎問題,渾渾噩噩過日子。

總結(jié)一下

如果希望設(shè)計一個難用的后臺運營工具,需要遵守如下步驟:

  1. 必須慢出翔;
  2. 不允許出錯(低容錯);
  3. 不做任何指引。

簡單易學(xué),馬上輕車熟路,司機們請避坑繞行?。?/p>

其他的坑,也歡迎各位補充,本文三個要點,也不能覆蓋所有的情況。

 

作者:張路,微信公眾號“PathsVIVI”

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 關(guān)鍵詞:黑天鵝,精益。適用于任何開發(fā)、設(shè)計、策劃、管理等等過程性的活動

    回復(fù)
    1. 認真閱讀了,感謝,點贊。推薦的幾本書,值得看看。

      來自廣東 回復(fù)
  2. 這個故事告訴我們,后臺有多爛不重要,前臺做得好,有賣相,一樣能成功。

    回復(fù)
    1. 每個產(chǎn)品成長過程中的階段性重點問題不太一樣

      來自廣東 回復(fù)
  3. 瞎說什么大實話,話說這系統(tǒng)屬于SaaS么?

    回復(fù)
    1. 哈哈。不屬于,沒有做開放不算吧。但互聯(lián)網(wǎng)的基礎(chǔ)能力,打包服務(wù)開放出去,我挺看好的。

      來自廣東 回復(fù)
  4. 看起來真是讓人愉快哈哈哈哈

    回復(fù)
    1. 文風(fēng)基本這樣哈哈,希望可以在交流中相互成長 ??

      來自廣東 回復(fù)
  5. 厲害厲害,平時也致力于避開這些坑,騰出時間做有意義的事

    回復(fù)
    1. 共勉之 ??

      來自廣東 回復(fù)
  6. 哈哈,有趣,有些坑我踩過

    來自廣東 回復(fù)
    1. ?? 共勉之

      來自廣東 回復(fù)
  7. 蠻好玩的

    回復(fù)
    1. 文風(fēng)基本這樣哈哈,希望可以在交流中相互成長 ??

      來自廣東 回復(fù)
  8. 這可能是PM網(wǎng)站上很歡樂的文章了吧??!哈哈哈哈

    來自福建 回復(fù)
    1. ??

      來自廣東 回復(fù)
  9. 這個就比較任性了

    來自廣東 回復(fù)
    1. ??

      來自廣東 回復(fù)
  10. hhhhhhhh做過相關(guān)系統(tǒng)的看著表示很爽 ??

    來自廣東 回復(fù)
    1. 哈哈??

      回復(fù)