0755-26913476
您的當前位置:主頁 > 經驗交流 > 視覺設計 >

以實例講產品改版(下):需求與設計

時間:2017-11-27

《以實例講產品改版方法論》系列,是一個時間跨度接近半年的全站改版大項目,留下的一點經驗,共分為兩個部分:上篇《改版的立項與推動實操經驗》;本文為下篇,主要講改版語境下的需求規劃與交互設計方法技巧。

1. 改版需求規劃:要打擒王戰、攻堅戰、殲滅戰

我們首先要明確一個概念:大改版就是要樹立好靶子,抓核心要點進而重點擊破。因為改版立項后,通常開發資源充足,跨部門協調師出有名,如果不能打擒王戰、打攻堅戰,不能解決好關鍵問題,不能集中資源克服疑難問題,那就是浪費資源,不痛不癢。
那么具體如何辨別好靶子呢?

  • 首頁明顯可見的問題。
  • 關系產品核心價值的問題(例如UGC缺乏有效的生產者引導機制)。
  • 核心體驗流程的問題(例如資訊媒體的內容導航、搜索功能效率低下)。
  • 影響業務轉化的問題(如業務表單體驗很差)。
  • 技術上的疑難問題、牽一發動全身的問題。

經過對需求池的分類統計,我們定義了原版web端最主要、優先級也最高的四大問題,大家可以參照上述原則看例子:

  1. 首頁子欄目混亂,曝光欠缺。
  2. 首頁、資訊詳情頁停留時長較短,跳出率高。
  3. 導航混亂且過載,快速迭代期陸續加了多個重要欄目和業務入口,小屏幕用戶的導航條都已經不夠用了。
  4. 業務表單的組織結構混亂,有用戶反饋找不到入口,也有用戶填寫遇到障礙。在是否要求登錄上沒有一致的規則,頁面邏輯有錯,跳轉會讓人疑惑。

那么為什么說改版又是殲滅戰呢?
這是因為我發現,通常在開發中,會遺留一些邊緣用例產生的問題處于pending狀態。按照現在互聯網公司的迭代和變更速度,延遲解決約等于不解決,那么改版,就是掃除這些蒼蠅的絕佳推進機會。每個細枝末節的遺漏、特殊狀態、像素級的誤差甚至是文案標點,都可以在改版中做到一個不留,全部殲滅。

以上就是我在做改版需求規劃時的原則,結合工作量,就可以確定改版需求的范圍和比重。

2. 修復信息架構:正骨和消腫

針對1、3、4的問題,我們重新梳理了全站的信息架構。

2.1 板塊/信息的分類與組織

信息架構中最核心的就是分類法,以下是我總結的分類維度。

  • 關聯:在業務上有緊密相關的。如“投資人”和“投融資項目”板塊,屬于從同一業務線中的方向不同的兩條流程,向不同的用戶群分別提供服務。
  • 從屬:信息的邏輯歸屬關系。如文章的兩級分類。
  • 同類:屬于同一類信息的不同表現形態。因信息豐度、來源、時效性、外來屬性等因素不同而產生的呈現差異,如“資訊”、“快訊”與“熱文”,都是新聞資訊類信息,同一個事件可能會在這三者中的任意出現,但展示的字段與布局完全不一樣。應注意區別于從屬,但有時候和從屬的概念相容,這取決于產品目的。
  • 同質:信息的抽象概念相同,此時通常用戶對其操作模式和預期也是相同的。宏觀上依據這個分類,可以將信息放入對應的布局區域如焦點區、熱銷位、板塊窗口位、入口按鈕菜單、用戶菜單等。
  • 等重:在某個產品階段內,信息的重要性相近。這種分類結果會隨產品發展而變化,比如新功能剛推出,你需要超越重要性去給它更強的引流入口。

整理出來之后,大至功能板塊、小至信息布局,都有了清晰的依據和約束條件。

接著細化的工作:

  • 組織信息的方式(按標簽、按分類、按來源等)
  • 呈現信息的規則(顯示條件、排序、分頁、隱藏與轉移、加載方式、特殊布局位、默認/缺省設置等)

2.2 收納箱:處理導航過載的良方

舊版產品的首頁主導航,導航標記多達13個,11寸下的顯示已經無法調整。我依據等重信息分類,將全產品不重要的功能統統隱藏進【發現】里面。這時候發現,公司的2個主要線下業務流程的表單入口,也會跟著線上不重要的信息板塊被扔進去,層級會非常深。于是又將他們提出來,利用“同類”分類法,放在【服務】里面。今后如果還有更多的非主線板塊/欄目,在上線一段時期過后,也會將考慮是否放到【發現】里面。

2.3 建立統一的操作認知

原版產品的表單,分處于3種不同狀態的菜單導航中:需要登錄、不需要登錄、已經登錄。造成的問題是,我們有的業務無法被曝光在未登錄用戶的菜單里,并且在使用時看見同一頁面中有的入口時有時無,很容易迷惑,進而找不到之前提交的信息在何處更改。
針對這個問題,我從建立產品各方面的一致性來解決,包括入口樣式與位置、操作路徑、操作反饋、文本提示等,以保證用戶對同質信息或操作,符合其心智模型,或者能建立正確的理解模型。

2.4 考慮改版對SEO的影響

作為資訊類web產品,一定會考慮每次改版或者頁面調整對SEO的影響。對于主要內容要慎用ajax,即使因為體驗優化的方案或者反爬蟲決定要使用,那么也要用其他頁面補充上,只不過這個入口,不一定被用戶發現和經常使用。實例大家可以分別點擊下列紅框的效果,并觀察頁面地址變化。

2.5 延后復雜輸入操作

最簡單的一層是延后登錄等,將注冊、登錄操作延后到要將用戶行為或數據與ID綁定起來的時候。
還有一些是,將原本不適合放在線上、不適合放在移動端的操作,轉移到線下人工處理或是利用文件傳輸處理,僅保留能保證主線流程不中斷的信息填寫,這樣可以得到更低的跳出率。

3. 打磨交互細節

3.1 使用動效來表達路徑、連續性、從屬關系

為了使復雜設計、新設計更易于理解,我們經常使用動效來表達功能的操作原理。

路徑很好理解,典例如將商品添加到購物車后,會有圖像元素從按鈕處以拋物線為軌跡,移動到購物車按鈕。其余還有改版后的操作引導等,可通過軌跡、次序來暗示路徑或方向。

連續性是指當有元素在橫向、縱向空間中被隱藏,那么可以用對應軸向的運動來表達元素的連續。例如下圖中的導航,我在web端大膽借鑒了移動端的設計方式。

完成這個動效設計時候,還要注意3點:

  • 關注初態:利用格式塔原則中的“閉合”概念,用殘缺的初態來提示用戶。
  • 運動方式符合基本概念:該處導航是一個有頭有尾的線條,一定不要做成循環,那樣會給用戶帶來認知和操作的困擾。
  • 降低對普通用戶的干擾:導航點到第五個以后,才會有動效,在用戶點擊前面幾個高頻分類的時候,如果也做橫向移動,會干擾正常瀏覽,故做起來盡量克制,不干擾正常使用。

最后講講動效表達從屬關系的例子。還是如圖的導航,只有一個一級分類有子分類,那么子分類菜單就隱藏到父級分類被選中之后吧。

3.2 通過用戶的注意力焦點決定元素位置

改版設計遇到一個細節爭論,“首發”和“獨家”這兩個重要標簽,到底放在哪里,在資訊列表中,是放在資訊頭圖上還是資訊標題前呢?此時產品目標是讓它們顯示在最重要的地方。那么我需要觀察或模擬用戶在本產品內注意力焦點的流動,來決定元素位置。通過簡單用研的最終方案如下圖所示。

后來想了一想,要講出道理的話,應該是由于垂直類資訊閱讀,用戶的行為偏理性,且配圖的目的通常只是稀釋文字密度,降低閱讀壓力,用戶的注意力焦點,以及選擇進入哪篇資訊的依據,不在圖片上,都在標題上。如果有眼動圖,那我有把握猜測是用戶焦點大部分是在標題與標題之間移動。

3.3 將數據分析融入設計過程

數據分析會涉及改版前、中、后,前定問題,中助設計,后有反饋驗證。
這里僅談對設計的幫助。舉個例子,設計內容板塊時,可以先用SQL去拿到自家數據庫的關鍵字段,再用webscraper等爬蟲工具爬同類競品,并統計分析內容的如下屬性:

  • 極值:極大、極小、空值,以及其成因、實例。
  • 平均值、中位數
  • 分布范圍、離散度

一口能答出這些數據,那么你的設計在落地的時候就避免了絕大多數問題。并且,這些數據有時候除了二次處理,還需要結合場景目標來分析,如資訊閱讀時間預估提示功能,有以下兩個問題:

  1. 上萬字的統計和超過一定分鐘數(如15分鐘)的提示是無意義的,還會嚇走用戶。
  2. 分布范圍非常集中于某幾個區間,線性的映射函數會失去分離度。

那么對分段函數的處理,不能采用直觀數據,需要結合數據分布范圍和離散度映射出一個“更有吸引力”的數據組合來顯示。

3.4 默認規則、數據來源缺失的處理

改版可能會動到一些根基功能,沒有數據來源,則需要增加支線功能來讓老用戶過渡到新版,比如之前沒有嚴格綁定手機號,現在要求手機號必填,但又有微信直接注冊和郵箱注冊且遺失郵箱的極端場景。我們就遇到了用戶使用企業郵箱注冊后離職,無法再次使用郵箱驗證并綁定手機號,這樣的一個場景。

4. 打造產品的萬用基石

4.1 填充空白,利用動靜變化占據注意力

在首頁新設計了一個填充性區域,來專門做關鍵業務的曝光。在首頁向上滾動到大概第三屏的位置(此時右側邊欄已經完成網站的主要功能板塊的遍歷),右邊欄的塊級元素會靜止在頁面上,直到視區窗口滾動到最下方或起點高度以上。

該區域的理念是,用戶翻到第三屏的時候,認為其對內容需求有一定深度了,此時利用動靜的變化引起注意,有目的地推薦一些內容板塊,不會招致反感。
該區域定位很明顯,當前階段什么東西重要,或者想解決什么問題,提升什么數據,直接放上去就會有效果。
目前在這個區域,放了3個內容:

  1. 主要業務轉化入口
  2. 快訊 & 熱文(內容閱讀延伸)
  3. 廣告位(當沒有廣告時,增加快訊&熱文的條數以達到剛好填充屏幕)

三個內容均是對癥下藥,均取得了首頁及相應版塊數據上的大提升,如提交數量、停留時間、PV等,其中快訊板塊的日均PV同比有78%的提升。

并且要注意的是,這個區域也是可以往水平軸向擴展的,比如利用輪播、tab、走馬燈等組件,但同時要注意擴展也會分流。有了這個填充性組件,如果以后會豐富功能或者提升曝光,那無疑我們已經提前先把框架搭好了。

4.2 利用抽象模型使產品可擴展

我們還可以分析一些高頻同質的新需求,并設計一些通用性很強的模塊,提煉出核心內容的范式,提供標準化、組件化需求擴展迭代方式,為以后新欄目的快速上線創造條件,并減少部分開發成本,長遠上解決問題。

例如上圖,就是一個首頁資訊欄目擴展的標準容器。

相關閱讀

以實例講產品改版:準備與推動篇