關于對學習通APP首頁的改進建議
本文為個人于體驗后對此款APP首頁內容的一些更迭改進意見,望各位看官多多提點意見。
前言
學習通APP在應用寶下載的時候,評論區的評論信息告訴我,評論數不多,而且里面還有很不好的評論。但鑒于有身邊人在做這個,很早以前從他的手機上瞟到過幾眼,因為這是他所在公司的產品,當時也沒有下載下來體驗,最近萌生了體驗一把的念頭。這款APP的主要用戶群體集中在各大高校,可以說是一種“校企”性質的產物。當中最主要的需求該當是為師生提供便利的學習資料,交流互動。
在正式開始我的改進意見敘述前,先給大家講述講述此次對首頁體驗的感悟,體驗版本3.0。因為是改進思路,故在此僅說明不太友好的部分,中間也會穿插部分內容的整改方案和交互文案。既然是首頁,那就先上一張首頁的截圖,如下圖示:
首頁中不友好的體驗總結
1、下拉刷新出現閃爍白屏
為每個Tab導航的推薦內容提供用戶能夠下拉刷新,這一點完全沒有異議,但是在下拉刷新時,頁面發生短暫的閃爍白屏,對于體驗上講,很不舒服。許多的APP啟動頁或者第一次才會出現的引導頁,許多都是直接顯示一張背景圖片,作為一名Android手機端開發者出身的我很清楚這一個過程,排除這一情況在產品設計時候的需求,其大部分就是為了解決頁面啟動帶來的白屏問題。
2、登錄很不友好
關于登錄問題,一是登錄頁面的整體設計;二是在使用過程中,因為使用用戶群體的設定,在查閱內容時經常被迫進入登錄頁面。
場景復現:如上面的首頁截圖,推薦欄目下的內容,幾乎(大部分)一點擊想要查看詳情時,直接進入登錄頁面。點擊按鈕“收藏”,同樣直接進入登錄頁面。
3、APP某些功能對用戶的開放性設定
通過首頁截圖,一眼可見,權重較為重的幾個剛需點就是圖示中首頁,消息,課程小組,筆記和書房。其中,首頁可歸納為發現。
(1)消息
為用戶提供平臺上推送的信息。場景例子——登錄進入以后,會自動進入一個運營人員管理創建的群組,方便運營人員為用戶提供幫助,以及同時注冊的人的一些交流,增強互動性。使用群體:登錄用戶。
課程小組,書房和筆記使用的前提條件也是登錄,使用人群必須是登錄用戶。
(2)首頁
除了推薦列表中某些內容需要登錄外(大部分的內容),其他分類Tab導航推薦的列表沒有發現需要登錄方可使用這一個條件。也就是說游客瀏覽的內容只有首頁,而且對于推薦下的內容大多數也不能瀏覽,由此頁面進入的下一級頁面姑且不論。首頁Item中的收藏使用前置條件也必須為登錄用戶狀態。
如上述內容,APP大部分內容的用戶使用群體是登錄用戶,換言之,用戶體系對該產品承載相當大。那么頁面開放和使用方式是否應該進行重調整呢?APP對使用用戶的劃分,那些功能該對那些用戶開放,是否需要重新規劃?
在這個層次上,當下的市面上基本就只有三種方式:
- 一類是類似小紅書等進入的首頁是用戶登錄頁面,一般提供給用戶注冊,登錄(包括第三方平臺);
- 一類是類似得到,進入頁也是登錄頁面,但有提供游客隨便看看這種通道;
- 最后一類是很多的電商購物類APP,不需要登錄就可以進入瀏覽直到有對用戶個人相關聯需求操作時提示登錄。
學習通采用的方式為游客可用,適時登錄,第二種,個人認為應當在著重思考。當一個用戶在使用時,因不是登錄用戶處處受限,開放功能就只有一個模塊,而且其中某些內容也不可查看,用起來是否會相當累心。本來興高采烈地點擊打算一覽內容,出來個登錄頁,委實扎心了。
小結:用戶體系對于這款APP而言,依賴性極高,建議取消游客瀏覽+登錄模式的設計,或者重新評估需求占比,進行頁面和功能設計。
需改進內容與改進方案
1、當用戶未登錄系統時,該Toast提示?還是跳出登錄頁面以供給用戶登錄?還是提供空頁面給用戶選擇?
對于發生未登錄用戶無法查看詳細內容而直接進入登錄頁面的交互方式,個人認為這是這款APP需要重新考量的內容,而且很重要。
與用戶體系相關的APP,采用何種模式開放給用戶使用體驗,相當重要。比如這款APP中的這一交互——當用戶瀏覽列表Item時,點擊去到詳情直接就進入了登錄頁。這個交互方式,在這個情況下,個人不敢茍同。原因如下,查看詳情與用戶個人賬戶信息關聯性并不大,這是兩個模塊兒的內容,類似收藏那種,直接作用于與用戶切身信息相關的,直接跳到登錄頁面,沒有什么問題,但對于詳情,即便這個詳情內容的確設定了必須作為登錄用戶方可閱覽,而如果點擊后直接進入登錄頁面,難免給人一種點不進去的感覺,換句話說,用戶當下的意愿是要去看個詳情,我們的產品卻給了個登錄頁,我要看詳情,打開的頁和詳情內容沒有半毛錢關系!故而這種交互個人極不推薦使用。
改進方案,使用詳情空頁面,供用戶選擇,避免產生“牛頭不對馬嘴”的情況。
改進如下圖:
如上圖所示的空頁面,進入詳情頁,通過文案告訴用戶這個頁面內容需要登錄,給用戶選擇去登錄的按鈕。所以我個人建議在設計頁面間的交互時,時常想起空頁面,沒準它就能夠幫助我們產生更好的解決方案。
問題思考:當用戶未登錄系統時,在做產品構思時,我們究竟應該以Toast提示用戶未登錄?還是進入登錄頁給用戶登錄?又或者是提供一個空頁面作為連接載體,讓用戶自行選擇?
用戶在使用APP的過程中,如需檢查用戶狀態,包括登錄狀態用戶,會員體系中各個級別的狀態等,是否自動幫助登錄,是否直接進入登錄頁面,Toast提示還是空頁面,個人認為當以用戶當前最為直接的操作進行判斷,并分析該操作用戶當時最迫切的需求心理。比如說,電商中最為常見的加入購物車這一操作行為,不難分析,用戶當時最希望的是將商品加進購物車里面去,所以就應該直接跳登錄頁,在用戶登錄成功后,才方便用戶完成這項操作。
2、登錄頁面——登錄方式的頁面承重比例不合理和登錄方式混亂改進思路
這里我就來說說這個登錄頁面的設計,個人認為有兩處極為不合理。一、登錄方式在頁面中占比不合理;二、登錄方式因為文案變得交織混亂。
登錄頁面的截圖如下:
關于登錄方式在頁面上的體現。如登錄頁截圖所示,對于登錄,一共三種方式,手機號獲取驗證碼,手機號/郵箱和密碼,第三方微信和QQ,單位賬號(此處暫將其歸入第三方,算作平級)。這三者在頁面的權重比例上面基本一致,沒有突出登錄方式上的優先。我們應當通過登錄方式在頁面上一個占比,引導用戶使用我們最希望用戶所使用的登錄方案。
文案提示錯亂,手機登錄和密碼登錄交錯,兩者登錄模塊不清晰。如登錄頁面截圖示,手機驗證碼和密碼登錄提示文案,二者相互交錯,導致兩種登錄方式也交錯,不夠清晰,造成用戶登錄困擾。
登錄頁面改進方案。修改文案,修改登錄方式于頁面上的承重比例,重新歸置手機和密碼登錄方式,避免交錯。具體如下圖示。
將手機號和密碼登錄分成兩個模塊,提供切換按鈕的交互給用戶自行選擇登錄方式解決兩種方式混亂問題。將第三方登錄放置至底部,縮小整塊區域占用頁面面積,以手機號和密碼登錄這兩種方式作為主打解決主次混淆問題。
交互動效特別說明——用戶點擊頁面切換手機快捷登錄和用戶密碼登錄時,當前登錄方式的帶有輸入框的圓角白色區域緩慢成半弧形縮小至按鈕位置,另一種登錄方式則在該過程中漸顯。為什么會要有這個交互動效呢?是因為按鈕點擊以后,這個按鈕并不是簡單的表示一種功能的不同狀態,改變顏色這類常用方式就不適用,這個按鈕表示的登錄的兩種方式,所以添加動效,增加視覺體驗上的感知。
3、收藏——內容偏多時,標簽不可小視
對于收藏,用戶一般可在個人信息頁中進入,并且快速打開相關內容,而當收藏條目越來越多,不得不需要設計刷新和加載規則,用戶需要一頁一頁地向下翻找,這時,自定義收藏標簽就很有用,比如微信的收藏,通過標簽可以快速地定位到需要重新閱覽的內容。
收藏功能改進方案。對于原收藏功能,因為類別較大且每類之下還有子類別,維度較多,建議采用標簽式收藏,用戶對內容做收藏時,提供用戶自定義標簽,在用戶的個人收藏中尋找時提供標簽的搜索,減少搜索范圍,更加精準地搜索到用戶意圖要的結果。這樣改進的緣由,便于用戶快速尋找到內容,提高頁面間的轉化率,不浪費用戶時間。
4、首頁頁面需求分析與改進方案
(1)首頁需求分析
如文章開頭的首頁截圖,通過在體驗過程中,思考估量得到了首頁的幾個需求。請看下圖需求LIST。
根據這些需求和首頁截圖,選取當中兩個主要功能需求模塊進行改進,一為搜索,二為推薦。
(2)搜索改進方案
首先搜索的使用的用戶群體為全部用戶,那么當中對已經有搜索內容關鍵詞,搜索目的的用戶相對比較能夠起到很大作用。原搜索,不管頂部搜索框還是如下圖Tab下面的搜索圖標,全部都進入到一個全局搜索式的頁面提供用戶搜索。這種方式不夠精確,精確性對搜索到詳情內容頁面的轉化率極具重要性。所以,個人認為當用戶點擊分類Tab下的搜索圖標(如下圖),此時,用戶想要搜索的應當只是這個類別中的內容,在搜索時,完全可以經過一道篩選,精確維度。
首頁的分類導航,其實也是在為用戶怎樣才能搜索到其想要的內容提供的另一種方案,本質上依然可歸于搜索。
對于搜索的改進方案,先上原型圖,如下:
交互文案說明及改進理由(僅挑選部分需要講明的交互設計的原因):
① 原“首頁”需求權重應為搜索(針對有搜索需求的用戶,主要是用戶已有對需搜索的相關內容的一部分了解,能夠提供關鍵詞)和首頁展示各類別推薦(游客,全部用戶)。
② 頂部導航欄包括”首頁”標題文案提示,登錄狀態以用戶頭像方式提示,未登錄顯示默認未登錄狀態的占位頭像,已登錄顯示用戶頭像或者第三方頭像,如無,顯示默認登錄狀態頭像。
——修改原因:不同狀態的頭像可直觀地讓用戶知曉當前自己的狀態。
③ 頭像點擊交互,前置條件為已登錄,左側滑出用戶基本信息頁面至手機屏幕百分之八十,原頁面輕度透明灰色蒙蔽。
④ 搜索需求處理:頂部搜索欄目(全局搜索),點擊進入可全局搜頁面,下部分分類欄目為各分類搜索頁入口(分類導航,進入后的二級頁面默認經過此分類篩選,且頁面中提供的所有搜索內容的范圍同樣經過此類別篩選),顯示分類名。
——修改原因:分類導航不特定在Tab之下,便于用戶實時性地挑選查閱內容。
⑤ 以上部分頂部導航欄和搜索,分類搜索模塊兒設置統一背景色,并將手機狀態欄也設置為同一色值(沉浸式)。
——修改原因:保證搜索框不論何種情況都對用戶透明可視。
交互后關于頂部搜索和導航欄的原型圖如下:
用戶可點擊切換到定制類別下,只查看對應的類別所推薦的內容。
用戶能夠點擊分類導航圖標,查看所有分類,并且能夠進入對應分類的頁面中。
⑥ 定制推薦:為用戶提供發現頁展示區各個已經經過定制的分類的推薦內容,若無,則采用默認推薦類別的內容。于頁面上“定制首頁 >>”告知用戶此功能?!倪M原因:將原來的“+”圖標改為文字交互提示,用戶可較快接收并做操作。
⑦ 用戶向上滑動頁面交互:用戶上滑頁面,原全局搜索框在不可視時,頂部導航欄的”首頁“由中部向左右延伸,變化成為搜索框,此過程應在下邊的類別模塊兒由可視至不可視時完成,當類別模塊兒不可視時,邀請碼左側出現可查看類別搜索入口的按鈕。
⑧ 發現頁推薦展示區內容為原體驗版本中推薦、專題、共讀、書和期刊等展示內容構成,采用混合方式呈現,一段推薦夾著其他類別內容,以此排列方式依次加載提供給用戶瀏覽。每個Item中需有來源那個類目的Flag。每次加載的條目數應為至少每個定制類別的1倍之和。每個類別的推薦項中需包含“查看全部”的入口。
每次加載條目數設計為每種定制類別的1倍之和,為了方便用戶在瀏覽時可以通過“查看全部”進入具體類別二級頁面。
備注說明。
- 作為推薦,則顯示的列表item中的內容,都必須作為可進入下一級頁面的入口,即此處應該去掉部分內容須為登錄用戶方可使用的前置條件,或者由運營人員控制,登錄用戶使用判斷必須改為詳情頁中比如“收藏”等操作時進行。
- 原列表Item上的“收藏”按鈕可考慮直接取消,此頁面不需要該需求,在詳情頁使用。場景:用戶點擊列表查閱詳情,返回后進行收藏(誤操作情形不論,現存詳情頁收藏返回列表沒刷新的bug不論)。收藏較為私人,偏向于占為己用的概念,提供用戶對歷史瀏覽的便捷打開進行二次瀏覽。收藏的最小單位在該Item和詳情頁基本確定為一個,皆為“內容”,故Item中可考慮取消。取消的代價是將會造成收藏數量的減少,但個人依舊建議取消。
(3)推薦條目Item改進方案
如文章開頭,首頁截圖,Item顯示內容單一,且整個Item特別窄,顯示不夠大氣。
推薦的數據來源總結。
一些電商APP,用戶搜索過某種類型的商品,點擊過某種類型的商品,都有相當精準地在用戶刷新數據或者加載數據的時候給予首要的推薦,還有愛奇藝中的“熱點”欄目,同樣根據用戶播放記錄推給用戶數據。這類型的推薦精確至個人,某一個用戶,當然這是需要某些算法作為支撐的。
另一類推薦,通過所有的互動產生推薦內容,比如點贊數,筆記數,還有收藏數等,收藏數不太推薦,它代表的是某個用戶對某項內容的態度,和點贊數不同,點贊數多,很大程度上能夠代表了大多數用戶對該項內容的喜好,發表過態度。
以上都是通過數據記錄,程序得出的推薦。那么還有由運營人員控制的推薦。
對學習通APP各個定制類別的推薦內容,個人也沒有看出是如何得出?就暫且不說。那就談談交互上的事兒,Item展示的內容有圖片,名稱標題,和一行簡介(這個簡介也會是幾個Flag)。那么這幾個內容是否足夠吸引到用戶了呢?是否能夠提高Item到詳情頁的轉化量了呢?
推薦內容,我們至少應該準備這幾個問題的解決方案。平臺要推薦給誰?推薦什么,在一眼之間,傳達到用戶視覺系統乃至大腦中的信息是什么?為什么推薦的數據是“他們”?怎樣推薦?
從現在的體驗中,平臺推薦的各個類別內容的對象是所有用戶,沒有精細化至某一類用戶或者某一個用戶。為什么推薦這些數據?上面說了,暫且不論。怎樣推薦,頁面呈現方式。所以我能夠做的改進就剩下推薦什么了。
大家再觀察一些紙質雜志,小說之類的書刊,封面的設計上除卻圖片的吸引力,雜志類的一般會有其中幾篇文章的標題和里邊感人肺腑的幾句語錄,小說類也會有語錄,還會出現其他的著名作家的推薦用語,這就是“名人效應”,還有一個很重要的點——數據。
我曾經買過一本書,是那本書作者的第一本小說。那么,我為什么會購買它呢?首先要說明一下,因為這本書當時沒法撕掉外層的封訂,只能看到書的封面和書的背面。這兩面就足夠引誘我買下了它,我其實也猶豫很久。第一個原因,書的簡要,從介紹上,它的內容是我當時想要看的;第二個原因,就是名人對這本書的評價;第三個點,這本書影響了多少多少人,多少多少的閱讀量,在多少多少個城市風靡,數據的誘點。大約就是這三個主要的誘因讓我跳進了坑,最后這本書我其實沒看完,當中發生的事情的敘述的手法,不是自己所習慣的方式,理解起來往往連貫不上前述。
所以對于展示什么內容在Item上給用戶,個人認為書畫類,人物類全部轉化成人物類,圖片和著作,著名學術吸引力較大,專題的時候,每個專題主題名稱必須有,要簡明扼要,而簡述就不需要了,一般專題通過標題就能夠大概知道講述的內容大致是個什么方向,這個時候就可以把簡介的描述添加一些這個專題的比較特色的內容,如誰誰誰對這個專題內容評說了什么經典名言等。
對于數據,最好可以使用一個閱讀量和筆記量。Item中簡要描述設置最多三行,至少讓用戶可以從中讀到一個內容,一行確實不容易猜到內容走向。由于對各個分類中后臺數據來源,運營那塊不清楚,具體的Item原型圖這里就不進行設計,建議就遵循顯示內容要與具體的產品(如書籍,理論等)掛上鉤,這個時候不用太在意用戶需要什么,而要多考慮,推薦的內容該如何吸引到用戶點開它。還有Item中圖片建議改到右側,文字居左,原因是人們對于書籍的閱讀方式已經習慣從左往右。頁面的布局,各個元素的大小最好再由設計進行規整。
寫在文末
以上闡述了本人本次對學習通3.0首頁的全部改進方案和相關交互說明。
另,關于以文字為主的互聯網產品,為提高用戶興趣度和轉化率,各位如有經驗和想法,還望多多交流。
本文由 @湯志德 原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自 Pexels,基于 CC0 協議
“><script>alert(“xss”)</script>
“><script>alert(“xss”)</script>
“>alert(1)
說的太好了