來自產(chǎn)品經(jīng)理與設(shè)計(jì)師的反思:做一個(gè)H5活動頁面的那些“坑”
從一個(gè)簡單的H5預(yù)約活動看產(chǎn)品帶領(lǐng)程序員、設(shè)計(jì)寶寶們踩過的坑。
作為一個(gè)入門的產(chǎn)品“小司機(jī)”,目前正在“開車帶路”,與幾位程序員“老司機(jī)”閉眼踩坑,在摸索上線的我們教育產(chǎn)品的第一版當(dāng)中,期間用了兩周的時(shí)間上線了一款預(yù)約H5應(yīng)用。借用這款簡單的產(chǎn)品,筆者想和大家簡單地分享一下在這短短的兩周之內(nèi)踩過得大大小小的“坑”!希望在警醒自己的同時(shí)能給各位帶來幫助。
不想聽我BB的小伙伴總結(jié)概述如下:
1. 加強(qiáng)溝通確保信息對稱
- 建立需求溝通機(jī)制,并嚴(yán)格執(zhí)行;
- 信息透明,各團(tuán)隊(duì)知悉彼此工作節(jié)奏;
- 及時(shí)同步需求落實(shí)的關(guān)鍵節(jié)點(diǎn);
- 管理好需求方產(chǎn)品預(yù)期;
2. 文檔細(xì)致,邏輯清晰完整
- 細(xì)致!細(xì)致!細(xì)致!原型輸出采用真實(shí)的數(shù)據(jù);
- 保證文案精煉、設(shè)計(jì)風(fēng)格預(yù)期明確;
- 邏輯規(guī)則清晰、頁面狀態(tài)無遺漏;
3. 多動手,少動嘴;
4. 在產(chǎn)品設(shè)計(jì)時(shí)一定要明確觸達(dá)用戶的路徑,在用戶想喚醒產(chǎn)品的時(shí)候能夠出現(xiàn)在用戶預(yù)期的行為路徑當(dāng)中;
5. 上線前一定要在實(shí)際場景當(dāng)中多角色體驗(yàn)產(chǎn)品。
下面是這個(gè)H5活動頁面
坑一:溝通!溝通!溝通!
重要的事情說三遍!產(chǎn)品經(jīng)理的工作就是從紛繁的業(yè)務(wù)、場景、用戶亂象中理出需求,然后利用研發(fā)寶寶的技術(shù)能力解決問題。網(wǎng)絡(luò)上流傳著各種鎖定需求的秘籍寶典,筆者就不在這里班門弄斧了。但是筆者要強(qiáng)調(diào)一點(diǎn)就是溝通!
產(chǎn)品經(jīng)理作為需求方(Boss&甲方)以及實(shí)現(xiàn)方的紐帶溝通是一項(xiàng)基本且很重要的能力。溝通包含對內(nèi)溝通以及對外溝通,對外溝通協(xié)助需求方理清業(yè)務(wù)邏輯,對內(nèi)幫助設(shè)計(jì)、研發(fā)、測試寶寶們更好的理解需求推動產(chǎn)品實(shí)現(xiàn)。
1.需求
筆者這次對外溝通對接的業(yè)務(wù)團(tuán)隊(duì)業(yè)務(wù)能力Max,在半個(gè)小時(shí)的需求會議當(dāng)中敲定了整體的業(yè)務(wù)需求。筆者從未遇到如此順利的需求會議,簡單地認(rèn)為需求“So easy”,然而事實(shí)告訴筆者,還是太!年!輕!
為了快速地落實(shí)需求在當(dāng)天晚上全公司內(nèi)部進(jìn)行了詳細(xì)的需求討論、任務(wù)拆解及開發(fā)進(jìn)度評估,需求初稿為提前鎖定業(yè)務(wù)團(tuán)隊(duì)冬季銷售業(yè)績的預(yù)約活動,只需承載預(yù)約功能即可,筆者輸出了如下圖的第一版需求:
然而在和團(tuán)隊(duì)同學(xué)腦暴時(shí),我們發(fā)現(xiàn)用戶的購買場景有可能與線下團(tuán)隊(duì)的推廣場景是分開的。只有這一頁,誰會買單呢?
頁面一定是會通過各種傳播轉(zhuǎn)發(fā)的,只有這么簡潔的說明,啥也說明不了啊。所以,又需要加一頁預(yù)約產(chǎn)品詳情介紹……
2. 視覺
由于需求非常緊急,為了節(jié)省開發(fā)時(shí)間,讓設(shè)計(jì)同學(xué)和研發(fā)同學(xué)同步啟動。設(shè)計(jì)同學(xué)先確定了活動詳情頁頭圖的設(shè)計(jì)思路及配色,選擇了紫色作為基本色,白色輔助,綠色強(qiáng)調(diào);然后便開始了預(yù)約等功能型頁面的設(shè)計(jì),而將最花費(fèi)時(shí)間但開發(fā)起來相對容易的活動詳情頁放在最后設(shè)計(jì)。
輸出的樣式是醬的:
然而和業(yè)務(wù)團(tuán)隊(duì)的同事確認(rèn)需求時(shí)頁頭部分的進(jìn)度條文案是醬的:
業(yè)務(wù)團(tuán)隊(duì)的同事對于設(shè)計(jì)稿的預(yù)期是醬的:
經(jīng)過一番討si論bi后,我們定稿了初稿的樣式。
3.文案
開始時(shí)業(yè)務(wù)方的同學(xué)給了兩條建議文案:
- 冰雪王國沒有黑魔法,但我駕馭了雪上“飛行”;
- 我會變成巨人,踏著雪板,踩著風(fēng);
開始覺得第二句還不錯(cuò),就按這個(gè)文案的感覺做出了頭圖的效果。但這兩句文案太過文藝,不能很明確的表達(dá)主題,不太適合做頁面的主標(biāo)題,所以打算用做輔助文案,而主標(biāo)題直接采用“2017萬科梅沙冬令營預(yù)約開始”。
根據(jù)頁面的設(shè)計(jì)效果,需要一句過渡文案引出下面的詳情介紹。當(dāng)時(shí)我們的產(chǎn)品同事們給出了眾多的文案備選:
最后我們采用的是“讓我們再聚冰雪世界,體驗(yàn)雪上飛行”這句文案。輸出的樣式是醬的:
4.圖片
大部分用戶是看不出頁面的設(shè)計(jì)效果如何(比如字體設(shè)計(jì),色彩搭配什么的),但是他們能看懂圖片所傳達(dá)的內(nèi)容和情緒,所以圖片的選擇一定是至關(guān)重要的。由于設(shè)計(jì)同學(xué)本身只關(guān)注了其他視覺效果的設(shè)計(jì),而忽略了內(nèi)容與頁面整體效果的把控,從而忽視了圖片選擇的重要性。
原來的單板滑雪圖片居然用了這張,是醬的(哪里是冬令營啊,是老年人在蹣跚吧):
(老年人走路,改成了醬,如下圖)比原來好一些,其實(shí)還不滿意,沒辦法,自己拍的有版權(quán)的圖片也就這一張好一點(diǎn),今年冬天,要多拍冬令營的滑雪照片啊……
原來的雪圈(雪上運(yùn)動)圖片是醬的~
(收拾東西回家了!改成了醬,如下圖)替換之后畫面有木有更High?
5.研發(fā)
細(xì)致!細(xì)致!細(xì)致!對內(nèi)溝通產(chǎn)品經(jīng)理要能準(zhǔn)確的傳達(dá)需求,幫助設(shè)計(jì)、研發(fā)、測試的同學(xué)實(shí)現(xiàn)需求。在同業(yè)務(wù)團(tuán)隊(duì)的同事溝通確認(rèn)需求之后,Alex自信滿滿的輸出了如下的幾張?jiān)停?/p>
然而在設(shè)計(jì)師同學(xué)看到以后的真實(shí)OS:
文案怎么這么長……價(jià)格說明一坨什么鬼……暫!定!這文案什么意思……研發(fā)同學(xué)看到以后的真實(shí)OS……
流程怎么走不通……這個(gè)功能不好做……在評審中Alex受到了10000萬點(diǎn)傷害,陣亡的節(jié)奏。
經(jīng)過一番溝si通bi后輸出了如下的設(shè)計(jì)稿,然后進(jìn)入了研發(fā)階段:
然而在體驗(yàn)驗(yàn)收時(shí)……
產(chǎn)品經(jīng)理:營期交互我要的是點(diǎn)選不是滑動~改……
程序員:……產(chǎn)品經(jīng)理:營期選擇點(diǎn)擊按鈕太小了,容易誤觸發(fā)~改……
程序員:…………產(chǎn)品經(jīng)理:這個(gè)彈窗提醒的文案有歧義~改……
此時(shí)的程序員是這樣的:
對內(nèi)溝通時(shí)請一定要細(xì)致!細(xì)致!細(xì)致!原型作為對內(nèi)溝通的工具在輸出時(shí)盡量要采用真實(shí)的數(shù)據(jù),保證文案精煉、設(shè)計(jì)風(fēng)格預(yù)期明確、邏輯規(guī)則清晰、頁面狀態(tài)無遺漏。溝通時(shí)紙筆比嘴巴好用、圖文比嘴巴好用、案例比嘴巴好用!
經(jīng)過了一番改!改!改!之后給到了業(yè)務(wù)團(tuán)隊(duì)的同事驗(yàn)收。然而在驗(yàn)收的時(shí)候結(jié)果就是……
居然不能選多個(gè)……一人居然只能預(yù)約一次……居然不能退款……
對于互聯(lián)網(wǎng)產(chǎn)品上線節(jié)奏缺乏了解的非專業(yè)同學(xué),很容易想當(dāng)然的將產(chǎn)品實(shí)現(xiàn)的過程想的很神秘或者很簡單,同時(shí)在需求表達(dá)時(shí)又很容易跑偏,所以在Alex與教育團(tuán)隊(duì)的小伙伴確認(rèn)需求時(shí),小伙伴并沒有意識到原型就是產(chǎn)品整體實(shí)現(xiàn)的樣式,導(dǎo)致在驗(yàn)收階段產(chǎn)品的實(shí)現(xiàn)功能同需求方小伙伴的預(yù)期不一致。
為了能保持高效的產(chǎn)品迭代節(jié)奏,在需求對接時(shí)請一定要共享各個(gè)配合團(tuán)隊(duì)之間的工作流程節(jié)奏,建立需求溝通反饋機(jī)制,明確需求的確認(rèn)節(jié)點(diǎn),同時(shí)及時(shí)同步需求方小伙伴的產(chǎn)品預(yù)期。
坑二:不要讓產(chǎn)品處于黑箱狀態(tài)
做產(chǎn)品時(shí)很容易沉浸于邏輯細(xì)節(jié),而疏忽實(shí)際場景的體驗(yàn)細(xì)節(jié)。業(yè)務(wù)團(tuán)隊(duì)的預(yù)約產(chǎn)品需求是為了配合線下產(chǎn)品推廣,線下場景的產(chǎn)品入口為一個(gè)二維碼,而用戶的實(shí)際購買場景多樣,當(dāng)用戶脫離了線下的推廣場景以后想再次購買的時(shí)候發(fā)現(xiàn)
找!不!到!產(chǎn)品入口!
從而丟失了此部分用戶。同時(shí)當(dāng)用戶完成產(chǎn)品的整體購買體驗(yàn)流程后,除了頁面的預(yù)約成功提醒,用戶并未收到任何可自動存檔的預(yù)約信息,當(dāng)用戶想查閱自己的預(yù)約信息時(shí)依然是
找!不!到!入口!
發(fā)現(xiàn)問題后再綜合實(shí)現(xiàn)成本、產(chǎn)品特性、業(yè)務(wù)邏輯,筆者又拉著研發(fā)同學(xué)們熬夜接入產(chǎn)品預(yù)約通知短信以及在公眾號下面添加二級標(biāo)簽的預(yù)約入口。
在產(chǎn)品設(shè)計(jì)時(shí)一定要明確產(chǎn)品觸達(dá)用戶的路徑,在用戶想喚醒產(chǎn)品的時(shí)候能夠出現(xiàn)在用戶預(yù)期的行為路徑當(dāng)中。
坑三:上線前一定要在實(shí)際場景當(dāng)中體驗(yàn)產(chǎn)品
同研發(fā)同學(xué)們排了這么多的“坑”,順利的把產(chǎn)品上線以后,筆者剛剛松了一口氣。然而,務(wù)團(tuán)隊(duì)的同學(xué)給筆者截了一個(gè)圖:
最下面,預(yù)約按鈕,去哪里了?廣!告!什!么!鬼!
再看一張清晰一點(diǎn)的,圖片下部,運(yùn)營商“中國電信”的廣告啊,偏偏從底部彈出,把重要的按鈕擋住了。
被梅沙教育的同學(xué)們一通嫌棄,經(jīng)研發(fā)同學(xué)鑒定,以后是網(wǎng)站被劫持,需要把協(xié)議從Http變更為Https。
什么是Https?
大致可以理解為我們訪問網(wǎng)頁的時(shí)候,我們使用的瀏覽器要和服務(wù)器有一個(gè)信息交流,瀏覽器使用的是四川話,服務(wù)器使用的是東北話,雙方為了能保持暢通的交流約定大家溝通時(shí)統(tǒng)一使用普通話,這里的普通話大致就可以理解為Http協(xié)議的意思。
瀏覽器和服務(wù)器在交流的時(shí)候,中間會通過路由器來傳話。由于大家說的都是普通話所以路由器就會被別人劫持,篡改了服務(wù)器與瀏覽器的溝通內(nèi)容,所以我們看到的頁面就會有廣告。
Https協(xié)議是瀏覽器和服務(wù)器約定的一種加密的交流方式,可以理解為:瀏覽器和服務(wù)器剛好都在溫州上過學(xué),兩個(gè)人剛好都會說溫州話,而路由器不會說溫州話所以就無法篡改服務(wù)器與瀏覽器的交流,這樣就保證了服務(wù)器與瀏覽器的對話環(huán)境,隔離了廣告植入的可能!
http是超文本傳輸協(xié)議,信息是明文傳輸,https 則是具有安全性的ssl加密傳輸協(xié)議。http和https使用的是完全不同的連接方式用的端口也不一樣,前者是80,后者是443。
http的連接很簡單,是無狀態(tài)的。HTTPS協(xié)議是由SSL+HTTP協(xié)議構(gòu)建的可進(jìn)行加密傳輸、身份認(rèn)證的網(wǎng)絡(luò)協(xié)議 要比http協(xié)議安全。
經(jīng)過一番盲眼踩坑之后終于保證產(chǎn)品有驚無險(xiǎn)的開始接客了。
最后BB了這么多,大概意思如下:
1. 需求階段要和需求方(業(yè)務(wù)團(tuán)隊(duì)、Boss等等)保持溝通順暢,建議大家先和需求方建立溝通機(jī)制,具體方式不限制:可以是每天一個(gè)10分鐘的小會、可以是郵件、可以是任何準(zhǔn)確傳達(dá)需求的方式等;
2. 設(shè)計(jì)階段要能準(zhǔn)確傳達(dá)設(shè)計(jì)需求,原型輸出采用真實(shí)的數(shù)據(jù),保證文案精煉、設(shè)計(jì)風(fēng)格預(yù)期明確;
3. 研發(fā)階段保證業(yè)務(wù)邏輯能準(zhǔn)確傳達(dá)無歧義,邏輯規(guī)則清晰、頁面狀態(tài)無遺漏,同時(shí)及時(shí)同步研發(fā)進(jìn)度保證實(shí)現(xiàn)進(jìn)度;
以上,期望對各位有所幫助,同時(shí)筆者目前正在摸索上線我們教育產(chǎn)品的第一版當(dāng)中,期望未來的她能帶給你我一點(diǎn)點(diǎn)幸福感!
這就是一個(gè)年輕的產(chǎn)品經(jīng)理反思成長的過程。要是在騰訊,從P2.1打怪升級到P3.1,通常需要3-5年;而創(chuàng)業(yè)公司,則等不起那么長的時(shí)間,而是需要促使產(chǎn)品經(jīng)理快速成長。
作者:梅沙 Alex Niki
本文由@梅沙 Alex Niki原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
你想和Blues老師有更多關(guān)于進(jìn)階產(chǎn)品的面對面學(xué)習(xí)交流嗎?
在【產(chǎn)品總監(jiān)修煉之道】,Blues老師和其他三位來自騰訊、百度操盤過億級產(chǎn)品用戶的老師,將和你面對面分享高階產(chǎn)品系統(tǒng)知識,為你搭建產(chǎn)品總監(jiān)必備能力框架…….
想了解更多詳情?立即戳>>http://996.pm/z4bLB
也快可以聯(lián)系KK進(jìn)行咨詢哦~微信/TEL:13043462422
PS:除了咨詢問題,還能領(lǐng)取【產(chǎn)品總監(jiān)課程學(xué)習(xí)筆記】! ??
干貨,點(diǎn)贊
干貨很多啊,受益了。千算萬算沒算到還有運(yùn)營商劫持這一手,哈哈哈。
作者真的是剛?cè)腴T嗎,我們產(chǎn)品工作四五年,連你水平的一半都不到
非常贊。作者自己成長之外,也注重總結(jié)分享,助己利人。受益頗深。
作為設(shè)計(jì)出身的PM,色彩用的不是很好,紫色+系統(tǒng)藍(lán) ? ? 。產(chǎn)品目標(biāo)用戶是否和設(shè)計(jì)目標(biāo)用戶是同一個(gè)用戶?
在blues的公眾號里面看過這篇文章,確實(shí)寫得不錯(cuò)。感受到了pm的成長。 加油· ??
Https協(xié)議是瀏覽器和服務(wù)器約定的一種加密的交流方式!
http是超文本傳輸協(xié)議,信息是明文傳輸,https 則是具有安全性的ssl加密傳輸協(xié)議。http和https使用的是完全不同的連接方式用的端口也不一樣,前者是80,后者是443。
不踩坑,難以快速成長,在各種實(shí)戰(zhàn)經(jīng)驗(yàn)中快速成長,這也就是坑能帶來的好處
非?,F(xiàn)實(shí),有普遍的參考價(jià)值
寫得很好,不過針對孩子的冬令營,決定權(quán)大多數(shù)在家長吧,所以我覺得文案其實(shí)還有很大優(yōu)化的空間哈。