Redesign:Lofter的信息架構改版設計
信息架構,是交互設計師成長的一個關鍵點,也是交互設計大局觀的錘煉基石。
在做信息架構改版的時候分為前期調查,中期產(chǎn)出和后期評判。值得注意的是,在你開始著手做改版工作的時候很容易陷入其中而忘記思路,所以需要一個清晰的方法指導你完成整個改版設計而不迷失自己。除了上篇文章提到的在設計方案之前要做好需求分析,競品分析之外,還需要靈活運用各個研究方法,比較卡片分析法,用戶訪談,尼爾森十項原則等等,這些方法很好的幫助你完成你的設計,也讓你的設計更專業(yè)有理可循。
什么是信息架構?
信息架構是對信息進行結構,組織方式以及歸類的設計,好讓使用者與用戶容易使用與理解的一項藝術與科學。簡單來說,就是讓用戶更容易理解你的產(chǎn)品,容易上手,被用戶接受。那作為交互設計師,這方面是交互設計師成長的一個關鍵點,也是交互設計大局觀的錘煉基石。
為何產(chǎn)品需要合理的信息架構?
第一,讓用戶明白產(chǎn)品做什么,怎么用。
第二,用戶都能在需要的時候容易找到功能。做到這些,會提高你的產(chǎn)品的留存率和體驗度。
信息架構為何需要設計?
信息架構不是功能的簡單堆疊,所以我們需要更有邏輯的方法。從前中后期去設計一個合理的信息架構。
一. LOFTER產(chǎn)品信息架構的前期
1.了解用戶,場景,習慣
在產(chǎn)品信息架構的前期,【persona】和【用戶場景】能夠幫助自己很好的了解產(chǎn)品,了解用戶。那么“persona”是一個很好的方法。
【persona】是用戶角色模型。就像經(jīng)濟學家創(chuàng)造模型來描述市場,物理學家創(chuàng)造模型描述亞原子粒子行為一樣,研究發(fā)現(xiàn),用研究結果來創(chuàng)建關于用戶的描述型模型,是交互設計中一個獨特而強有力的工具,這些用戶模型叫做“persona”。
用戶的行為如何?他們怎么思考?他們的預期目標是什么?為何制定這種目標?對于這些問題,人物模型會提供一種精確思考和交流的方法。而人物模型并非真正的人,但它們來源于研究中眾多真實用戶的行為和動機。
【用戶場景】是用戶如何使用你的產(chǎn)品。從persona和用戶場景中提取用戶習慣并且尊重用戶的習慣。往往我們會先問自己四個問題:用戶通常用你的產(chǎn)品做什么?用戶用這列產(chǎn)品最關心什么?用戶有哪些思維定式?用戶用什么類型的產(chǎn)品?
- 用戶通常用LOFTER 做什么?
發(fā)圖片、看圖片,偶爾發(fā)點文字、音樂。這些人以前大多看攝影類的圖片,現(xiàn)在對二次元、時尚、明星有興趣的人也慢慢增多。女性較多,約占七成,年輕人較多,一半都是 95 后。他們共同在移動互聯(lián)網(wǎng)上聚集一群年輕人形成了一個圖片社區(qū)。
- 用戶用這一類產(chǎn)品最關心什么?
從產(chǎn)品架構開看,用戶比較關注有共同興趣(標簽)的人都關注什么,都發(fā)布了什么?從產(chǎn)品內容來看,用戶比較關注圖片質量(高),原創(chuàng)度(高),信息來源是否和別的平臺內容不重復有個性。
- 用戶有哪些思維定式?
社交圖片類APP 都有“關注”“發(fā)布”“發(fā)現(xiàn)”“消息”“我的”“話題”等功能。具體參考競品分析。
- 用戶用什么類似的產(chǎn)品?
Ins,nice,in,pinterest 等等。具體參考競品分析。
2.了解業(yè)務需求
只有很好的了解業(yè)務需求才能結合在信息架構的設計中,加入足夠的思考,把握重點,不突出與業(yè)務無關的內容。而好的信息架構可以在業(yè)務和運營的推廣,有更好的拓展性。
從LOFTER 的不斷更新可以看出,LOFTER 從最開始的“專注興趣,分享創(chuàng)作”到現(xiàn)在的“記錄生活,發(fā)現(xiàn)同好”已經(jīng)從關注原創(chuàng)到不只為創(chuàng)作者服務的角度定位產(chǎn)品。更多的關注人類深層次的自我表達和群體認同的本質需求。
從LOFTER ART 和LOFTER 印品的探索,不難推測LOFTER 正在進軍電商領域,整合網(wǎng)易電商的供應鏈優(yōu)勢,以“生活美學消費平臺”為核心,打造“興趣領域+達人+粉絲”的社區(qū)生態(tài),探索一種社區(qū)和泛設計師品牌相結合的電商模式。作為一個以內容出眾的UGC 產(chǎn)品,除了延續(xù)自傳播的方式運營之外,還應符合中國市場。(下圖來自百度百科)
”意見領袖人物”的概念在電商產(chǎn)品“良品”中是一個很好借鑒。而LOFTER的“達人”也起到同樣的作業(yè),在LOFTER 探索的新領域中,對于社區(qū)用戶來說,大量的互動數(shù)據(jù)能夠精確分析用戶需求,幫助他們買到自己心儀的商品;對于泛設計師們來說,圖片變現(xiàn)的方式更加多元同時也提高了用戶忠誠度。
LOFTER 正探索以內容營銷為核心的移動營銷新模式。精準營銷是LOFTER 商業(yè)化探索中的重要一環(huán),技術上標簽廣告和信息流廣告的精準投放是重中之中。那么從設計的角度來看,除了最大限度的將廣告推送給該領域的精準目標用戶以外,如何投放,如何將業(yè)務需求和用戶需求完美融合也是交互設計的重要突破點。
3.調研競品的信息架構
調研競品分析非常重要,一般會找3-5個同類競品分析他們的信息架構,并用MindMap整理出來樹狀圖體現(xiàn)產(chǎn)品信息架構。如果是做改版迭代工作,那么過去的版本也是很好的競品,同樣也需要做競品分析。
而做競品分析的目的便是為了歸納整理共性和差異性。找共性是為了遵循用戶習慣而差異性是可以找到創(chuàng)新點,設計的機會點。
1)競品選擇
我們可將目前市場中的主流圖片社交產(chǎn)品歸為以下三大類,他們剛好覆蓋了不同特征的用戶群體:
- 分享+社區(qū)類(Instagram、Flickr、LOFTER)——創(chuàng)作型用戶
- 找圖+存圖類(Pinterest、花瓣、堆糖)——消費型用戶
- 標簽+貼紙類(in、nice)——消遣型用戶
所以選擇現(xiàn)版本的LOFTER(5.3.1.1)Instagram 和nice 作為競品。
2)信息架構
- Instagram 的信息架構
- Nice 的信息架構
- LOFTER 現(xiàn)有版本的的信息架構
對比現(xiàn)有的三個競品的信息架構,都分為 “首頁”“發(fā)現(xiàn)”(搜索)“發(fā)布”“消息”“我的”這五項。這就是前面要思考的用戶的思維定式。從中也可以看到和更多共性和差異性,下面具體分析。
3)共性分析
如下圖,分別是Ins,LOFTER 和nice 的首頁視圖。
共性1:一級導航的選擇上,都使用了底部TAB 切換式導航。并且首頁都集中展示在所關注的人的更新內容,展示方式高清大圖,多樣化。
原因:圖片社交類產(chǎn)品的有一個共同的業(yè)務需求就是吸引更多人來使用,并且提高用戶的留存率。將關注的動態(tài)信息放在首頁能大大提高用戶的日活指數(shù)。
共性2:競品都強調了核心功能——“發(fā)布”按鈕。Ins 在左上角設置了快捷功能“快拍”。LOFTER 和nice 則是將底部的按鈕突出化,做了顏色的區(qū)別。
原因:強調“發(fā)布”按鈕則是因為鼓勵用戶多發(fā)布圖片內容來達到社交的作業(yè)。
共性3:添加好友頁或者標簽頁都有多個入口,不止在“發(fā)現(xiàn)”里。以LOFTER為例,在“首頁”和“發(fā)現(xiàn)”都有入口以此來強化其作用。
原因:產(chǎn)品的業(yè)務需求所決定了“添加好友”的重要級比較靠前。
共性4:個人主頁,圖片展示頁和標簽頁是圖片社交應用的基礎頁。關注,喜歡(收藏),評論都是這些基礎頁的基本操作。所以在首頁,發(fā)現(xiàn)和搜索等多個頁面和流程中都會提綱這些功能的入口。
原因:產(chǎn)品性質所決定。
4)差異性分析
首頁
首頁的不同在lofter 有分段式的二級導航,關注和訂閱。訂閱用戶和訂閱標簽,因為lofter 偏輕博客,再則后期加入很多二次元同人文的用戶需求,在查看文字方面“標簽”可以兼顧所有用戶的需求。
發(fā)現(xiàn)頁
1.如圖2,在發(fā)現(xiàn)頁里,都為展示內容為主,形式不同。Ins 和nice 都是平鋪形成瀑布流。Ins 主推圖片和短視頻。Nice 主推直播,這和最近nice 的產(chǎn)品轉型和市場熱點有關。Lofter 則注重圖片的展示分類,標簽主題活動的形式主動讓用戶形成社群也符合lofter 的定位,一個綜合性的興趣社區(qū)。同時可以注意到的是,國內應用更注重標簽化的呈現(xiàn),nice 通過標簽無形中將用戶聚攏,而lofter 更積極的利用標簽形成主體活動社群。
2.這里值得一提的是,作為圖片設計類應用,都有引導用戶發(fā)現(xiàn)好友關注相似用戶的設置。三則都有,但方式則完全不同。
ins 是搜索iocn 推薦更多猜你喜歡的視頻和圖片。從發(fā)現(xiàn)頁進入點擊后轉入推薦列表,仍可以上下滑動關注更多人。同事推薦頁可以橫向滑動更多相似好友。無論是在推薦好友列表還是點擊進入用戶主頁的推薦都可以看到推薦好友橫向滑動這個頁面。路徑為圖片/視頻>發(fā)現(xiàn)頁列表>點擊圖片>個人主頁>點擊關注>跳出更多推薦(橫向滑動)。
LOFTER 的發(fā)現(xiàn)頁面結合業(yè)務目標,加入了banner 展位,推薦相應的專題或話題。和ins 相同的是,利用標簽進入推薦用戶列表后,依舊可以上下滑動查看相似好友。不同的是,需要點擊進入個人主頁才可以跳出查看更多相似好友的推薦。路徑為精選分類(繪畫)>分類推薦用戶(插畫)>參與詳情頁>個人主頁>關注>推薦更多。
Nice 的路徑最短但是過程不可逆轉,跳入推薦用戶列表后只能點擊查看一個用戶關注。關注后從下方彈出推薦,而且并不是每一個用戶都會田處推薦,存在空白的盲區(qū)。可以直接點頭像查看也可以直接關注。路徑同樣需要反復折返。路徑為圖片標簽>個人主頁>用戶頭像>關注>推薦關注(并不是每一個用戶都有相似好友推薦)這方面的細節(jié)ins 做的更好,恰當好處的引導用戶關注,同時也不影響其他內容的閱讀,很巧妙。
發(fā)布頁
ins 為分段式的導航,分為圖庫,照片,視頻。在最初ins 以濾鏡獲得了大量用戶,降低了目標用戶的門檻。而Lofter 以圖庫為主,考慮到最初的目標用戶是一群審美較好的攝影師設計師和插畫師等,他們的用戶場景多為直接選擇已經(jīng)編輯好的高質量圖片發(fā)送即可。拍照被梳理在圖庫中只為滿足基礎用戶的需求。Nice 的發(fā)布分為照片,拍攝和直播。當點擊到直播的時候,界面直接開啟全屏直播模式,這符合nice 的產(chǎn)品定位和當下直播APP 大熱的需求。
消息頁
在消息頁的位置,ins 和lofter 都放置了好友聯(lián)系的基本操作。而nice 則將其設置為私聊,可能和他之后的產(chǎn)品發(fā)展方向有關。
個人主頁
個人詳情頁是圖片社交應用很關鍵的一部分,ins 注重展示用戶的內容,lofter 和nice 的界面將用戶信息和用戶內容一比一展示。
4.卡片分類法
從用戶側了解用戶的心智模型。讓用戶對功能卡片進行分類,組織,并給相關功能的結合重新定義名稱的一種自下而上的整理方法。是設計師可以很好上手的簡易方法。
需準備:目標用戶,功能信息卡片,2只筆,空白的卡片(在測試過程中需要添加的卡片做備用),筆記本。
第一次卡片分類
第二次卡片分類
經(jīng)過調整整理出第二次卡片分類。將信息架構中的第二層樹葉作為卡片的主要來源,同時經(jīng)過第一次用戶簡單的調查和分析,提取了一些用戶覺得是主要關注點的功能拆分加入其中,以此更好的找到信息架構改版的突破點,同時也避免了第一次卡片過多的現(xiàn)狀。但經(jīng)過用戶測試對比,均認為第一次卡片分析比較好分類和理解。最終卡片測試采用了第一次的分類。
目標用戶的選擇
關于目標用戶的選擇,選擇了三個不用職業(yè)的用戶,但都是lofter 的目標用戶。對lofer 有不同的需求,兼顧發(fā)布型用戶和瀏覽型用戶。
整理用戶心智模型
經(jīng)過訪談后用戶1 充分理解的第二次卡片整理:
總結用戶心智模型
1. 對比分析,可以看出,3 位目標用戶對“發(fā)布”“我的”“消息”“首頁”的理解大致相同,這也應證了用戶對圖片社交應用的認知有哪些慣性思維。
2. “發(fā)現(xiàn)”頁面有差異。用戶3 的發(fā)現(xiàn)頁命名為搜索,比較偏向ins 的信息架構,但又明顯具有l(wèi)ofter 的特色。其實我們對比ins 和lofter 的發(fā)現(xiàn)頁都有同城熱門的功能。只不過在ins 里叫“地點”放在和搜索標簽下。同時用戶1表示,現(xiàn)有l(wèi)ofter 的“發(fā)現(xiàn)”頁在剛開始使用的時候很暈,用了好久才理解和清楚怎么用這一部分。進一步溝通分析是因為分類太多,二而自己并不是關心所有分類。Lofter 的橫向滑動雖然很有趣,但是太多而導致不知道該看哪一類,每一類都想點進去看一下。跳轉到下一個頁面,和上一頁面的布局又不一樣了,剛開始很困惑。
3. 用戶2 將“攝影課堂”“福利市集”“樂乎印品”放在了發(fā)現(xiàn)頁面里。結合用戶職業(yè)可以知道,用戶本身比較關心攝影這一部分。采訪得知,用戶比較希望在lofter 看到更多的特色功能,并且愿意去嘗試。
二.產(chǎn)出產(chǎn)品信息架構(改版)
總結改版優(yōu)化點
1. 針對用戶1 和用戶2 提出的困惑。將在“發(fā)現(xiàn)”的“分類”模塊變?yōu)橛脩艨勺远x的添加或減少。讓用戶根據(jù)自己的習慣來調整,同時又能保證lofter 對綜合興趣社區(qū)的需求不變。并在用戶第一次使用的時候添加用戶引導。
2. 增加“添加好友”入口。在我的>我的關注>添加好友
3. 發(fā)現(xiàn)頁-精選分類-達人推薦頁面改為卡片式設計。利用手勢向上向下滑動讓用戶做出選擇。
分析主要改版模塊
1. 發(fā)現(xiàn)頁-精選分類
a. 將原有的精選分類做減法。
根據(jù)用戶心智模型中的調研發(fā)現(xiàn),用戶的興趣點多數(shù)為2-5 個,過多會導致用戶迷失于信息海洋中。所以對原有的精選分類部分默認為3個常用的分類卡片。用戶可以根據(jù)自身需求添加更多。相應的“添加更多”頁面也將分類改為縮略圖,勾選即可添加。
b. 精選分類里加入LOFTER 的特色功能“攝影課堂”“樂乎印品”“福利市集”,放置在“添加更多”頁里最低端。
相當于在“發(fā)現(xiàn)”頁面給這樣功能添加了一個入口,滿足了對這些功能有頻繁需求的用戶,在同一個頁面里就能獲取自己最想了解的內容,無需再切換Tab 到“我的”。以“攝影課堂”為例,添加此功能到精選分類的卡片里,滿足“攝影課堂”作為LOFTER 的特色功能的業(yè)務需求,增加一個入口獲得很多的點擊量。而對攝影師設計師也是LOFTER 的一直以來最核心的目標用戶,屬于大基數(shù),也都較為重視。對于那些對此功能沒有特別需求的用戶,將這些功能添加在最低端并不影響他們的正常操作?!皵z影課堂”等功能的標題做顏色標示,第一突出了這些功能是產(chǎn)品的特色功能,第二也創(chuàng)造了讓一開始對此功能并沒有需求的用戶有想點擊了解的動機。
c. 精選分類卡片增強和用戶之間的互動。
用戶可根據(jù)需求(最關心的興趣卡片是放在中心位置)長按移動位置,向上滑動刪除。
d. 同時“發(fā)現(xiàn)”-精選推薦的二級導航頁面也會相應更改。根據(jù)用戶對分類添加的數(shù)量依次排列在二級導航上。
2. 發(fā)現(xiàn)頁-精選分類-達人推薦
原有的達人推薦頁的設計模式為頭像宮格列表,推薦6 個達人或者查看更多。改版后為卡片式設計,和精選分類一樣,用戶可以橫向滑動卡片。推薦6 個達人,或者發(fā)現(xiàn)更多。結合手勢向上滑動卡片為“關注”此達人,向下滑動卡片為“對此用戶不感興趣”不關注。
優(yōu)點分析:
利用手勢微交互增強了和用戶之間的互動,展現(xiàn)形式更有趣,同時卡片能承載了更多達人的信息和縮略圖,是達人更有感染力。讓用戶愿意主動關注更多用戶,而不是原有版本的一眼而過。
缺點分析:
“達人推薦”在“發(fā)現(xiàn)”頁面的最低端,在整個頁面中的重要級較低,用戶有可能看到的幾率小。并不是整個頁面想要特別強調的部分。但是基于前面對精選分類卡片改版后,相比之前大大減少了用戶看的信息量,瀏覽速度提升,向下瀏覽的幾率就會有所提升。
缺點的初步解決方案是可以在用戶前幾次的使用中,添加模態(tài)化窗口,引導并告知用戶下面還有更多,如下圖。綜上,優(yōu)點大于缺點。
3. 我的-我的關注-添加關注入口
結合業(yè)務需求分析“添加關注”的重要級比較高,所以在LOFTER 設置了多個入口,路徑為:
- 首頁>添加關注
- 發(fā)現(xiàn)>添加關注
- 我的>我的關注>添加關注
(此路徑為改版后添加的入后,考慮到用戶在查看我的關注的時候,如果用戶關注的人過少,有添加用戶的需求時,不再需要直返到“首頁”或者“發(fā)現(xiàn)”頁面。
驗證核心流程
主要改版在“發(fā)現(xiàn)”里,所以以用戶在發(fā)現(xiàn)頁里添加興趣標簽,進入精選分類瀏覽達人內容完成并找到感興趣的達人完成關注為例,來驗證核心流程。此操作流程層級較多,能很好的檢測用戶是否能通過改版的信息架構來完成任務。詳細頁面流程說明圖請查看第三部分“評判產(chǎn)品信息架構”。
新版本提示各個場景下的原型圖
三. 評判產(chǎn)品信息架構
畫出頁面流程圖,以便查看,同時為討論做好準備。
四. 關于改版各部門的任務預測
Step1:產(chǎn)品經(jīng)理根據(jù)業(yè)務需求和用戶心智模型重新整理需求。
Step2:交互設計師和產(chǎn)品經(jīng)理討論后共同確定信息架構并產(chǎn)出原型圖交付視覺設計師和開發(fā)人員。
Step3:視覺設計師和開發(fā)人員根據(jù)改版后的內容制定任務完成時間表。開發(fā)人員對技術實現(xiàn)做難易判斷。
Step4:交互設計師根據(jù)各自提供的任務完成時間表,跟進進度并完善過程中遇到的問題。
Step5:對來不及改版的內容排入下一個迭代中。
Step6:用戶測試-反饋-調研修改-確認改版完成-更新版本。
五. 關于信息架構改版的思考
滿足“帶著不同需求而來”的用戶,使他們能在相同的內容中尋找各自想要的東西。雖然還有很多不足,但是這也是成長的必經(jīng)之路。就像信息架構,是交互設計大局觀的最好錘煉基石。
作者:糖糖Eilin ?個人博客:http://eilinchen.sxl.cn/blog/848ebdd0074
本文由 @糖糖Eilin 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉載。
謝謝,比較好奇怎么找的三種類型用戶進行訪談的呢?
第一點挺好的,我確實想這么改,不過每個版塊都凝聚了小編的心血,把它們折疊起來最后還是于心不忍
第二點不是特別有必要,1是因為該頁面流量很低,你在這里放一個按鈕的點擊幾乎沒有 2是因為用戶進到這個頁面一般是用來尋找自己某個好友的,不會在這個場景下出現(xiàn)添加新好友的需求
第三點的話,交互方式挺有意思的,不過從整體考慮,我更傾向于把整塊全部拿掉,讓內容推薦有更大的曝光露出
?? 我是LOFTER的產(chǎn)品經(jīng)理 很高興和你交流
謝謝您的分析和建議??我會多多思考,繼續(xù)努力的。我看到LOFTER 現(xiàn)在改了挺多了
親,謝啦,不過這好像是網(wǎng)易微專業(yè)的作業(yè)啊,