優化討論區的推文功能

chinginge認為:

在2014年時,站上就有針對文章內頁推文按鍵做優化,該次的優化主要是從樣式與位置來做調整,經過四次實驗後,得到了下面幾個結論:

  1. 分析文普遍會吸引較多的推
  2. 同時有上下推文按鍵的版面可獲得更多的推數
  3. 手機使用者比較不會去按推
  4. 不同的推文按鍵樣式,並不影響使用者按推的行為

而在這幾個結論中,手機使用者比較不會去按推是讓我最先想要解決的問題,因為使用手機上玩運彩的比例已佔80%以上(在2014年的實驗數據中,手機使用者佔約31%),而目前的推文功能在2014年專案結束後,就沒有在進行相關優化了,以現在手機用戶是主流的狀況下,如何讓手機使用者去點擊推文按鍵是一重要課題。

在過去的訪談經驗上,我們雖然沒有針對推文這議題做相關的訪談,但在與使用者談論如何使用討論區時多少也會提到,如有在關注的發文者會提高推文動機、文章內容好壞會影響推文意願、覺得發文就該鼓勵、沒有推文習慣等等。至於為何手機使用者比較不願意推文,這點在過去訪談中並沒有相關資訊,但如依據一些相關經驗來說,在此先假設「手機操作較不方便,因此推文數降低」做為優化的方向。

首先來看一下手機版的文章內頁,基本上介面與電腦版沒有太大的差異(圖一),不過手機版的推文按鍵是有放大的,一進入文章內頁就能看到放在左上方的推文按鍵,隨著看文的移動,來到文章的末端也能看到左下方的推文按鍵,簡單的與電腦版介面比較,個人認為手機版的推文按鍵,是比電腦版更容易被看見的,因在手機螢幕小,加上按鍵被放大,整體就較容易聚焦,如此一來認為推文按鍵在手機上容易被忽略的假設就不成立。不過因他是放在文章內頁一樓左下角,個人在用單手操作時覺得推文按鍵不太好點擊,所以如將推文按鍵改放置在中間,這樣無論是用左右手操作時,在點擊都會比較容易點擊(圖二)。

 

圖一:左-電腦版,右-手機版

 

圖二

而另一個使用情境是滑動著手機螢幕,看完發文內容後,也順著將下方的相關回文看過,等滑到頁面最下方,看完了也就離開了。因為推文按鍵只出現在一樓文章內,所以當使用者只要沒有在一樓完成推文這件事情,那麼接下來他會回去點擊推文的機率就很低了。在上述的實驗結果有提到一點”同時有上下推文按鍵的版面可獲得更多的推數”,或許是因多一個點擊的機會,而讓推文數較單一個推文按鍵多,因此如能在離開了一樓範圍後,還能有其他的推文點擊機會,對於促進推文數應該是會有助益。

所以為能讓離開一樓文章後還能推文,有兩個優化方向:

第一點:新增推文按鍵,放在最後一篇回文下方,如一上面的操作情境,當看完回文後,在下方也出現推文按鍵,除能有再次提醒推文的功用外,更讓使用者不用拉回到一樓點擊推文,更為便利。(圖三)

圖三

第二點:按鍵固定在螢幕下方,該方式的優點是使用者無論觀看哪個樓層文章、頁數,都會一直出現在螢幕上,並且也可合併回文功能,讓使用者不用拉到最下方才能回文。缺點就是需佔螢幕一些空間,此外因一直出現在上方,觀看文章時受到的干擾也會較大。(圖四)

圖四

影響推文的因素有許多,如上述所提到的與發文者關係、文章內容好壞、使用者偏好、習慣等等,都是影響推文的動機或意願,但在這些情感層面之前,如介面能更為方便、易用,解決使用者在操作時可能面臨的問題,就有機會促進手機版推文增加。而推文數之於玩運彩討論區為何重要,是因看文者會用推文數來選擇觀看的文章,而發文者更是需要有推文來鼓勵,進而分享更多文章,所以如建立良好推文機制,就能創造良好的討論區互動關係。

 


seven認為:

自己平常在找一篇文章時,首要為文章主題,但最能支持、鞏固文章內容的要素,是瀏覽數與推文數這兩個幕後推手,不僅提升文章可信度吸引其他讀者,也給予發文者無形的鼓勵,成為發文動力來源,也關係到平台流量增長,可說是三方互惠的循環效益。我們於產品中做實驗,從操作體驗到介面細節,一直不斷尋找使用者最便利的模式並優化,固然是已更新過的版本,也會因應當下符合使用者需求再進行調整。

【從視覺設計角度】

推文功能適合放在頁面何處?Web與APP該一致嗎?

圖片來源:討論區APP設計檔案,文章內頁推文按鈕
  • 依按鈕屬性放在使用者預期可以找到的位置,討論區APP於底部放置推文按鈕,並顯示推文數,乍看之下資訊量只有兩種,但設計排列卻可模擬數種,因為我們並不知道,使用者認為最便利的操作是哪一種,拆分變因後可做實驗收斂。
    • 按鈕語意:市面產品應用皆不同,如評分、讚、推、最愛、星號等等,原本已使用”推”,避免大幅度變更。
    • 擺放位置:內容並排為資訊集中,拆分則偏向個人習慣,再評估視覺與操作易用性,如單手操作放置中間較適合。
    • 外觀形式:無論最終樣式為何,後續相似操作按鈕可一致性;加入大頭照辨識發文者,或許在推文目標數為1人的狀況下可再簡化。
  • Web推文功能放置於內文頭尾處也是一種手法,或許有些人針對發文者而來,未看先推;APP因畫面緊縮,介面排版空間處處是黃金地段,推文功能則適合放置內文結尾處,若為需求可在內文上頭僅顯示推文數,避免重複性按鈕。

外觀樣式與回饋效果/微互動

左側樣式是否更像按鈕?

按鈕必須長得像按鈕嗎?經歷過不少設計與實驗,頁面上新按鈕的確需要直覺設計,更多立體化元素如陰影、文字敘述,可減少使用者花時間理解,對直覺操作是加分的,或者採用一般按鈕常見的外觀,如圓角、留白空間。

  • 按鈕元素如線框外型、字體、顏色,整個產品有一致性樣式,就算是扁平化按鈕,使用者也會知道它可以點擊。
  • 使用者習慣影響甚大,頁面舊有常駐形按鈕,從立體化迭代演變為扁平化、純文字樣式,使用者也能直覺操作,但需要配合頁面整體視覺,導入適合的外觀樣式,像文章內頁圖文交織複雜畫面內,純文字按鈕就不適合,必須突顯按鈕本身、考慮擺放位置,每個按鈕細節皆會影響最終成效。
  • Web可點擊/連結熱區,可加入滑鼠游標變化效果,無論何種形式外觀,只要動一動游標便能知道可否點擊。APP則較難實現hover效果,通常會使用提示或強化外觀。
  • 玩運彩產品每一項優化,都必須經實驗證明,以一顆小按鈕來說,可參考過去相關測試經驗與規範設計,透過使用者測試數據判斷,是否達到按鈕本身該具備的“互動”目的。
模擬討論區APP讓按鈕產生微微抖動
  • 對於初次使用或新增按鈕,可顯示幾次說明提示按鈕用途,或一個直覺性圖標就足以傳達;趣味性動態回饋,個人認為可提高點擊次數,甚至直接在按鈕處就以動態方式稍稍搶奪目光,點擊後產生微互動回饋,最後停止;畫面直接顯示動態效果,因爲常駐狀態,則不適合過量使用,按鈕也能透過畫面滑動至某處時產生抖動。
  • 強化互動氛圍,是否能在閱讀文章時,於角落出現推文數增加的效果。
  • 需注意按鈕大小,保持合適熱區範圍,按鈕越大代表重要性越高。

推文功能的機制

FB、Line推文時附加更多情緒
  • 版主與回文者都需要提供推文按鈕嗎?個人認為可視平台發展方向考慮,提供推文功能給予發文者,主要塑造發文者、催生實用性文章,如分析文類型屬可保存、未來具參考價值;另一種則是回文者內容另起篇幅互動,如FB、巴哈回文模式,討論中的討論,很適合提供推文功能給予回文者。(與FB、巴哈相比,mobile01的回文者推薦數,意義上較前兩者薄弱)
  • 承上,如FB點讚功能,提供更多不同情緒選擇,同樣是豐富討論區的做法,區分推文數給予者的心情,就像表情符號一樣,操作更快速,提供正向的推文情緒選擇,或許可營造互動氛圍。
  • 對於APP而言,文章分享功能可間接擴大閱讀目標群,可進行實驗是否影響推文數;此外,推文功能可偵測閱讀者關注哪些文章類型、推文的頻率,累積相關數據,針對使用者給予不同熱門文章。

【市面產品個人觀點

Mobile01

Mobile01:Web、APP
  • 依照規範樣式執行,其實很難讓使用者發生偏誤,mobile01 Web與APP的評分按鈕,樣式、操作模式明顯不同,APP位於底部左側,直覺可點擊評分,利用顏色深淺表示給分多寡,容易讓人想點滿,Web則很難理解為什麼要換頁才能評分,且無顯示評分數;個人測試容易發現的問題,或許在mobile01本身使用者導向,兩個版本皆有不同族群。
  • 承上,測試Web與APP評分數同步好像有點久,不過主要讓使用者確實理解“評分”目的,並操作完成>提示回饋,這樣就夠了,資料庫寫入與網頁更新則其次。(應該很少有人在推文後,換裝置確認推文是否成功吧)
  • 另外,APP引用按鈕置於底部似非常合乎邏輯,若回文內容較多時,閱讀動線結束順勢到底部右側;Web則有畫面優勢,統一將功能收納於右上方。

巴哈姆特資訊站

巴哈姆特資訊站:Web、APP
  • 使用推文功能需先完成手機認證,能防止有心人刻意衝高推文數,某些平台則會判定帳戶安全性問題,由系統暫時鎖定短時間頻繁使用的功能;除了按鈕設計以外,推文功能也有許多狀況畫面,如無法使用功能時該出現提示訊息、帳號被封鎖時無法使用、與其他串聯功能使用時,GP數增加可獲得巴幣越多(虛擬幣),得謹慎策畫推文機制。
  • 如果是APP使用者,應該會發現內文頭尾的推文按鈕樣式不同,是否有其他功能差異?Web內文右上方則有FB”點讚”按鈕,並未特別標示出讚數,用意不明會讓人產生疑惑(雖然知道是點讚,但是結果未知),與推文按鈕擺放不同位置,有種刻意孤立的感覺,回到APP,AB分享功能則是放置於文章底部,按鈕樣式一致,觀察實用性方面,似乎與推文功能落差巨大,即使是熱門文章,FB分享數幾乎掛蛋。
  • APP文章內頁在發文、回文量偏少情況下,推文按鈕的數量會變得非常搶眼,讓畫面顯得雜亂,其實可以替換更多選項內的常用功能。

其他平台,如YouTube

  • 推文功能已是家喻戶曉的機制了,不同平台以不同方式呈現,其核心目的皆為獲得他人認同度,如在YouTube內生存是非常吃重瀏覽率,但按鈕本身設計平凡容易理解,作為影片的重要資訊,擺放易於操作與注目的位置,無數網紅、直播主,除了定期發佈影片,創造自身人氣形象,就靠累積主要指標數(觀看、我喜歡、分享、訂閱),後期吸金效益可觀。
  • 影片本身會吸引特定族群觀賞,或者為其他利益交換而來,如抽獎、贈品、Donate,影片、文章同樣都是藉由內容來獲得認同度,相較於網頁論壇,討論區能採用類似作法嗎?個人認為必須透過實驗,因使用者到每個平台想得到的東西不同,確認推文數是否被當作指標性依據,閱讀內容對使用者有幫助,從獲得利益角度思考,推文功能可做後續延伸,巴哈幣可做其他交易用途、YouTube有異業合作/廣告,讓推文數顯得更為重要,依討論區性質來決定是否塑造推文功能其他用途。
  • 干擾性跳窗,如畫面內以蓋版方式詢問”點讚”了嗎,除非是慣用平台、或內容非常吸引人,否則容易造成困擾。

嘗試調整推文按鈕

01 Web、Web-mobile
02 Web、Web-mobile
03 Web、Web-mobile
04 Web、Web-mobile

 


 

uirater認為:

討論區是玩運彩網站的重點項目,也是少數未曾大幅改版的單元。過去曾有嘗試改版的提案,但是到了用戶測試的階段,仍是跨不過使用習慣的高牆,所以目前討論區的畫面異動仍鎖定局部範圍,以免一次改太多引起大批反彈聲浪。

像圖 1 文章內頁的推文按鈕,也算歷史悠久了,經過 A/B testing 證實,推文按鈕同時常駐於一樓內文的前後,推文數的表現最好,所以這個看似多餘的設定是有典故的。

另外,當推文數達到 30,按鈕會變成紅色(如圖 2 ),代表多人擁戴。

推文按鈕目前就這兩個分級。

圖1 文章內頁的推文按鈕 預設樣式
圖2 文章內頁的推文按鈕 達30推的樣式

再來,回到上一層的文章列表,文章標題左側預留空間給高推文數的標籤(圖 3 ),從 30 推開始顯示,後續門檻依序為 60、90、120 推,顯然空出左側的黃金版位,比既有最右側的計數欄位顯眼。2015 年的 A/B testing 數據證實,將高推文數的標籤放在標題左側,會提高用戶閱讀高推文數文章的比例,所以推文功能可以促進討論區的正向循環,況且操作簡單、快速,以同樣是登入會員來說,完成推文只要一次點擊,回文可就不只了。

圖3 討論區文章列表的標文數標籤

優化 1:統整推文數、推文按鈕樣式

當越來越多版位陸續出現推文數的標示,首先出現了樣式不一致的情況,如圖 4~6。當然,改良做法並不是把圖 3 的推文數標籤原封不動塞進其他版位,而是以一組樣式為基礎,發展出周邊應用,如圖 7 的方式,再依照版位的特性挑選合適的元件來用,這樣既可以保留推文數分級的符號意義,也不至於喧賓奪主,導致整個頁面的重點失焦。

圖4 討論區文章列表上方的今日最多推版位
圖5 討論區 今日最多推文榜
圖6 個人頁下方的文章相關版位
圖7 推文標籤的延伸樣式

看完整個推文數版位的大致輪廓,再回到圖 1、2 的文章內頁,顯然推文數的分級與按鈕樣式,已不同於文章列表了。因為文章列表的推文標籤已獲得 A/B testing 加持,在位置不變的前提下,可先調整內頁的按鈕樣式、分級規則與文章列表同步,再以 A/B testing 檢驗是否造成負面影響。若沒有扣分,可將內頁推文按鈕代換為新的樣式。

 

優化 2:簡化版面

雖然文章內頁同時存在兩個推文按鈕,已經過 A/B testing 認證,版面佈局仍顯得多餘,特別是在寸土寸金的手機版(圖 8 )。其實可以依據頁面捲動的位置,控制按鈕的顯示,達到精簡畫面的目的。

圖8 手機版文章內頁

 

第一個概念如影片中的原型,維持原本推文按鈕的位置,僅依據頁面捲動位置切換兩個按鈕的顯示,未改變使用者的操作習慣,算是小幅度的調整。

第二個概念如下列影片,保留上方的按鈕,當按鈕將要移除可視範圍外,可採用 sticky navbar 的原理,將推文按鈕固定在畫面上緣,如此使用者可以在任何樓層點擊推文按鈕,推文後按鈕不再固定於頁面上緣。這個方法看似比第一個理想,但仍有缺點:一旦放大螢幕,sticky navbar 會跑位。另外,將 sticky navbar 固定在頁面上緣,已經超出單手方便點擊的範圍了。

優化 3:加點微互動的樂趣

前兩個方法是優化點擊前的介面,以下概念則是優化點擊後的反應。

在短暫的操作過程中加入更細膩的微互動,使人機互動變得溫暖、有趣,產品的精緻度會提升,也可能形成招牌特色,就像 medium 的鼓掌效果。至於成效如何,就有待驗證了。