如果我是PM|改造墨刀官網

以前一直都是用Axure做原型圖,最近因為工作需要,接觸了墨刀這款產品。這里無意對比兩款軟件到底哪個好用,只想吐槽一下,墨刀的官網實在是有些混亂,討論區實在是太難用了。

在我瀏覽這個網站的過程中,充斥著:“這個到哪里去了?我怎么跑這里來了?怎么又回去了”這樣的疑問。

其實墨刀這個軟件還是非常好用的,但是不成體系的學習教程和討論區,以及較為混亂的布局無形之中增大了墨刀的學習成本。

本文按照我自己的理解對墨刀官網進行一定的改版和整理。

頂部導航區域改版(未登錄狀態)
墨刀首頁(未登錄狀態)
改動一:去掉左上角的中英文切換功能

一般來說,選擇語言時在使用軟件一開始就確定下來的,之后很少會修改它。因此這個功能沒有必要放到這么明顯的位置。

改動二:去掉功能導覽

在非首頁的其他頁面,功能導覽這個導航菜單都是沒有的。而唯獨出現在首頁的功能導航,點擊進去之后竟然還是首頁,實在是一個多余的設置。

改動三:去掉博客

從博客的內容來看,這實在是一個比較雞肋的功能。
首先是內容非常雜亂,有新功能介紹,操作答疑,線下活動推薦,產品經理知識……
其次從文章發布時間來看,最新的文章是兩個月之前,再往前,有一個月連發好幾篇的,有一個月一篇也沒的。感覺墨刀官方也沒有很用心的經營這個版塊,說是官方精品文章,但是文章內容和討論區中墨刀官方發布的文章看不出來明顯區別,且有重合之處。
還有一個最大的問題是,當用戶登錄墨刀進入工作區之后,這個版塊就不見了!
因此,在墨刀官方不是很能保證文章質量和更新頻率的情況下,完全可以將這些文章整合到討論區中,而無需獨立出一個版塊增加運營負擔。

改動四:增加“套餐介紹”版塊

我在一開始注冊墨刀的時候,墨刀贈送了我十幾天的創業版賬號使用權限。然而墨刀官網中有關收費項目的介紹不是混雜在入門教程和討論區中的,就是隱藏在個人設置中。由于墨刀沒有在注冊流程中給予引導性的說明,因此一開始我并不知道創業版和免費版有什么區別,這就導致即使后來我對創業版這個詞產生了興趣,也無法快速找到關于不同套餐區別的全面介紹。
這就好像有一個商品,你想要賣給我,但是你不告訴我這個商品是干嘛的,其實是不利于銷售的。

改動五:將頁面導航與登錄注冊按鈕分開

目前的登錄按鈕采取了和其他導航菜單一致的樣式,這個頁面上唯一的登錄入口太不明顯,容易導致用戶登錄流程出現問題。具體請看第三部分:注冊和登錄流程的改版。

改動六:增加導航菜單選中樣式

以討論區這個導航菜單為例,目前當切換到討論區的頁面時,采取的是特大標題加一句話描述的形式,告知用戶當前所在位置。
但是這樣的形式會占據太大區域,壓縮正式內容顯示空間。讓當前頁面對應的導航菜單顯示不同的樣式,則可解決這個問題。


討論區頁面(未登錄狀態)

綜合以上,頂部導航區改版如下:


改版后頂部導航區
入門教程頁面改版

除頂部導航區和底部區域外,這個頁面一共分為兩個大版塊:視頻和文檔,同時提供電子書下載和搜索的功能。


入門教程頁面--視頻部分

在墨刀網站的視頻版塊中,加入了免費電子書和搜索文檔的按鈕。但是從邏輯上來看,免費電子書和視頻應該屬于平級的內容,不應混雜在視頻版塊。同樣的搜索文檔功能,與視頻功能是沒有關系的,也不應該放在這里。


入門教程頁面--文檔部分

查看文檔中的內容,會發現這些文章都是討論區的帖子。使用搜索功能搜索文檔,更是會直接跳轉到討論區。
另外,當我們從入門教程中通過預覽文章或搜索進入討論區后,并沒有回到入門教程的路徑,導致用戶只能通過非正常路徑(點擊導航菜單重新進入)回到入門教程板塊,影響用戶體驗。

我改版的原則是:精簡用戶獲取學習教程的方式和內容,以一種學習方式為主,構建從入門到進階的學習體系。




1,改變原來選項卡的展示形式,將入門視頻和進階視頻分為兩個獨立的區域。
2,對于已經登錄的用戶,視頻左上角記錄學習進度,標記已學狀態。
3,當用戶學完后,引導用戶點擊頁面底部的完成圖標,顯示出其余學習方式和內容。如下圖:
注冊登錄流程相關改進

墨刀的首頁除了內容展示,還提供一個注冊的功能。點擊第一屏的“立即體驗”,會定位到倒數第二屏,也就是下圖。


首頁立即體驗部分

看到這個頁面,你認為他是一個注冊的頁面還是登錄的頁面呢?
站在產品經理的角度,我們會認真的分析一下,這里應該是個注冊的頁面,點擊立即體驗后會創建一個新的賬號。
但是在不仔細分析的情況下,如果我將這個頁面理解為登錄頁面,其實也是合理的。畢竟這個頁面的標題和提交按鈕上的文字,是完全可以適用于已有賬號的登錄者的。而且墨刀官網唯一的登錄入口實在是太不顯眼了,被忽略掉也是有可能的。
我嘗試著輸入了一個已經注冊的賬號,點擊立即體驗按鈕后,頁面跳轉到了如下圖:



提示我郵箱已經被占用。這里存在兩個問題:
如果郵箱已經被占用,其實應該設置登錄頁面為跳轉鏈接才對。

如果默認用戶輸入錯誤導致的郵箱被占用,還是需要引導用戶繼續注冊,那么只需要在輸入郵箱的時候在本頁面給出提示,而不用跳轉到專門的注冊頁面,否則用戶不僅要重新輸入郵箱信息,還要重復輸入本來已經輸入正確的姓名和密碼。
針對以上問題,對這一塊的改進有如下幾點:

突出顯示登錄按鈕

將頂部導航中登入按鈕與其他導航區分開(在頂部導航改版部分已經說過),讓登錄入口明顯一些。

調整表單順序

讓用戶先輸入郵箱地址。用戶輸入完成光標離開之后,程序在當前頁面檢測,如郵箱已注冊,則給出提示。

加入登錄引導

加入“已有賬號,立即登錄”的提示,讓用戶明確理解此處的表單是注冊行為,如果需要登錄,用戶可以通過這里的登錄入口進入。
綜合以上,此處的改版如下圖所示:


改版后立即體驗部分
討論區列表頁改版
墨刀討論區

討論區是整個墨刀網站最重要的部分,因為墨刀的很多功能都是直接鏈接的討論區文章,包括:
1,入門教程的文檔部分;
2,網站底部導航中的“功能更新”;
3,網站底部導航中的“常見問題”;
但是這里的邏輯其實是非常混亂的,具體表現在以下幾方面:
1,版塊區分混亂。
從導航來看,墨刀將討論區分為了:精選,分享,書單,功能請求和功能答疑五個小版塊。
但是實際上,當你從功能更新導航進入討論區的時候,你會發現一個叫做“系統更新”的標簽,意味著系統更新其實也是討論區的一個版塊,但是你無法在討論區的導航中找到它。



然后,當你點擊發布帖子的按鈕進入帖子編輯界面的時候。你會發現多出了一個招聘的板塊。而討論區列表的書單板塊,這里并沒有出現了。



2,各版塊內容混亂
各版塊之間的界定沒有非常清楚,不僅用戶沒有按照既定規則發帖,墨刀官方團隊也沒有很好的執行內容分區規則,導致討論區各版塊一度非常混亂,給想在討論區獲取信息的用戶造成很大困擾。
比如說分享版塊,理論上來說應該是用戶分享自己墨刀作品的地方,但僅僅從第一頁來看,這里就不僅有:新手指南,用戶吐槽,還有墨刀官方發言人發布的墨刀相關新聞……


再拿書單這個版塊來說,官方對于書單版塊的介紹是這樣的:
Paste_Image.png

然而這個版塊的文章和其他版塊的文章并沒有什么差別,沒有投票功能,也不能提交新書。這個版塊的帖子不多,基本都是墨刀官方自己發的,從時間來看也很久沒有運營了。

在改版過程中,我將討論區重新整合為六個板塊,如下圖:


改版后討論區分區

作品分享與現有分享版塊一致,鼓勵用戶分享優質作品。
墨刀動態用于墨刀官方團隊發布系統更新動態,活動,以及新聞。普通用戶不可在此版塊發布內容
使用教程用來放:入門教程文檔及常見使用問題。鼓勵用戶主動發布功能使用教程,互相交流使用方法和技巧。
PM這事兒:屬于書單的進階版,在不額外設計功能的情況下,為產品經理提供交流的平臺。
意見建議:原來的“功能請求”雖然能讓用戶主動反饋新功能,但定義過于狹義,比如說我發現一個bug,那這又不屬于沒有的功能,此時我應該發在哪個版塊呢?
還有一個版塊就是精選,但這個版塊不在討論區導航中出現。當用戶點擊討論區進入或刷新時,默認屬于精選版塊。當用戶選中指定版塊時,該版塊樣式改變,標記用戶當前位置。

3,討論區列表頁布局排版問題



這個屬于個人看法。
列表頁中展示的內容有:標題,發帖用戶,瀏覽評論點贊人數,還有發布日期。
可以看到當前的列表頁布局中,發帖用戶和發送時間,帖子標簽和帖子標題,瀏覽評論點贊情況三塊內容各占列表項的的三分之一,沒有信息層級之分。
這就導致一條內容占據過大的空間,在普通的筆記本電腦屏幕上面,一頁最多顯示三條內容。
而在以內容為主的討論區中,快速獲取有效信息是非常重要的事情,這樣的布局導致用戶在瀏覽時受到其他非重要因素的影響,很難獲取到有效信息。
因此對此處內容的改版如下:


改版后帖子列表

區分信息層級,標題最為重要,因此字體大小和顏色均突出顯示。其次是發帖用戶,瀏覽評論點贊情況屬于描述性信息,因此縮小字體,減淡顏色。最后是發布日期,除系統更新外,工具類的交流帖子時效性不強,因此放到右側更不顯眼的地方,作為參考信息。

4,搜索按鈕和發帖按鈕布局問題



圖中可以看出,搜索框和發布按鈕離的很近,比較容易造成歧義。因此在改版的時候,我將搜索和發帖分別放到兩個區域中,明晰各自功能。搜索放在討論區分區處,如下圖:



點擊搜索后,搜索輸入框會延長出來,供用戶輸入內容。

發帖則被放入用戶主頁中,具體見下部分內容。

5,用戶個人主頁入口改版
點擊某個用戶頭像或姓名,可以進入這個用戶的墨刀主頁。但是在整個墨刀布局中,沒有進入自己主頁的入口。因此導致:
如果你不發帖,那么你將無法進入自己的主頁。
如果你發過貼,那么你需要按照進入別人主頁的方式,首先找到自己的帖子,然后點擊自己的頭像,才能進入自己的主頁。
這樣的入口對用戶來說無疑是很不友好的。因此在改版中,我在討論區列表頁增加了個人中心板塊,點擊可進入我自己的個人中心。發布帖子的按鈕也被放到這一板塊。具體改版如下:


改版后討論區布局:已登錄

點擊右側頭像或姓名,可進入我的個人主頁。點擊發布新貼,可進入帖子編輯界面。
如果用戶沒有登錄,那么這里顯示如下內容,引導用戶登錄


改版后討論區布局:未登錄情況
討論區內容頁改版
討論區內容頁
返回上一頁改版

首先要強烈吐槽,這個返回上一頁功能是多么的坑爹!因為你一旦點擊了返回上一頁,它給你返回的,是討論區的主頁!!!并且會默認幫你選中“精選”分類!!!這和我點擊頂部導航“討論區”返回有什么區別?
你可以想象,一旦你瀏覽的不是討論區主頁的內容,你就需要不停的返回,翻頁,滾動鼠標定位。特別是當你瀏覽的是其他版塊的內容的時候,你還需要在翻頁之前切換版塊!
我不知道有多少人有耐性做這樣的事情,反正我當時看到第三頁就放棄了。最后的結果是我花了半個小時學習了一下爬蟲插件,然后把討論區的文章爬下來,在本地挑選閱讀。
其實這個的改版主要是功能邏輯的改版:點擊后會退到剛才進入的頁面,而不是統一跳轉到討論區主頁。
我在此處將他的位置放到了右側,且相對屏幕固定,方便用戶鼠標點擊。

文章布局:頭部改版

原來的內容頁,用戶姓名頭像,標題,標簽,發布時間和預覽人數各占一行,導致整個頭部區域占據了整個屏幕的一半,重要的文章正文遲遲沒有到來。



因此在改版時,將發帖用戶相關的信息獨立出來,放在右側。將文章標簽和發布時間統一作為描述信息,放到標題下方,瀏覽量則放到文章末尾和點贊評論數一起顯示。具體如下:


改版后內容頁:頭部
文章布局:底部改版
改版前

改版時,將點贊按鈕提出來,放到底部中央,方便用戶反饋。左下角是閱讀點贊和評論數,點贊或者評論后這里的數據動態改變。右下角是分享功能,鼠標放到對于圖標上面出現二維碼,引導用戶掃描。


改版后

評論區同樣對信息做了整合梳理,并增加了點贊功能。

原型預覽樣式改版

目前,墨刀原型是被嵌入文章中的,但在預覽的時候經常會出現由于屏幕太小,導致墨刀原型顯示不全的情況。



為了解決這樣的問題,做出如下改變:
當用戶點擊播放按鈕時,出現全屏遮罩層。遮罩層上顯示具體的原型。
如果是手機原型,讓手機原型的高度和屏幕高度保持一致。如果是web原型,讓web原型的寬度為屏幕寬度的80%。右上角固定一個關閉圖標,點擊可退出預覽模式。


改版后原型預覽模式
墨刀網站底部導航

這里有兩個小問題。
一是將我在改版頂部導航時去掉的中英文切換放到這里。
二是,改變微信、QQ二維碼出現的方式。目前二維碼的出現會導致整個網頁被撐高,多出來一塊空白無效區域,影響用戶體驗。因此更改二維碼出現的位置為對應圖標的正上方。
其實可以看到,這里的很多功能是重復的,而且放到底部,用戶使用的頻率也不高,因此我這里做出了一個簡化的版本,只保留必要內容。如下圖所示:


登錄后頂部導航改版

登錄墨刀后,會進入工作區。此時墨刀的版式是這樣的:


Paste_Image.png

但是,在某些情況下,墨刀會默認你登錄了但是沒有進入工作區,于是會顯示出下面的樣式,你需要點擊“進入工作區”才能進入。非工作區的樣式和未登錄時的樣式基本一致。



這里存在的問題有:
1,登錄后的工作區和非工作區不能互相切換。可以進入工作區,但是在工作區,沒有退出工作區的功能。因此如果用戶需要在非工作區操作,就不清楚到底該如何退出工作區,只能選擇退出登錄。

2,工作區沒有博客功能(當然這個在前面的討論中被我刪掉了),下載應用的功能也被隱藏的很深。需要先切換到討論區,然后滾動到頁面底部,才有下載入口。對于墨刀用戶來說,下載功能并不是一個用完一次就不會再用到的功能,下載了電腦端之后,也許用戶還有下載手機端和插件的需求,因此這算是一個比較重要的功能。隱藏層級過深會給用戶帶來困擾。
因此這里,我的改進方法是:
1,去掉非工作區的登錄后樣式。因為非工作區的內容工作區都有,因此這樣非工作區存在的意義并不大。
2,在工作區右上角彈出菜單中“功能更新”替換成“下載應用”,點擊后跳轉到下載應用的界面。
(此處沒有大的變動,就不放圖了)
登錄后討論區,入門教程,底部導航版塊改動和上文中相關內容一致。

總結

以上是基于我對墨刀半個月的學習和使用,對墨刀官網,尤其是“討論區”版塊的一些改進想法。
其實墨刀這款軟件是比較好用的,但對比墨刀軟件和墨刀其他附加功能,讓我不敢相信這是一個團隊做出來的產品。
感覺墨刀對自己的社區和內容還是非常重視,無論是討論區還是官方博客,都布局頗大。但是也許是大量人力投入到軟件本身,導致這里的功能設計很不細致,又或許是在內容方面沒有合適的人負責,導致整個討論區的內容給我一種雜亂無章的感覺。
墨刀對于這里的運營也斷斷續續,比如之前我很看好的原型精選版塊,好像只做了一期就沒了。比如最近的新版上線,墨刀的功能更新版塊竟然完全沒有動靜!
在我看來,一個不好用的功能比沒有這個功能更減分。如果暫時沒有精力,是不是可以考慮精簡一些呢?

附上改造過后的墨刀官網低保真原型:https://v3.modao.cc/app/XyHE0eb9caEWjLC5yDWSyvaT6G9zD1t

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容