2018-9-3 資深UI設計者
如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里
很多產品設計師,在畫原型或者設計 UI 的時候癡迷于工具的使用,拿到需求文檔之后急于動手畫圖,忽略了信息架構設計對于產品的作用。
信息架構作為一個產品的骨架,是產品非常重要的一部分,它決定了一個產品
的布局和未來的發(fā)展方向以及用戶對一個產品的最初印象和整體體驗。毫不夸張的說,好的產品信息架構是產品成功的一半。
那么到底什么是產品的信息架構呢?該如何設計產品的信息架構?如何評判一個產品信息架構的好壞?我們接著往下看:
讓我們來看一個例子:
一個飯店需要有哪些設施,如果你是飯店的老板如何合理的排布這些設施,可以讓客戶感覺很舒服的用餐,這個過程就是一個信息架構的過程。他可以讓客戶對你的飯店產生好感,從而下次用餐的時候還會想到來你這里吃飯。
在排布飯店設施的過程中我們要遵循一些規(guī)范,比如用戶的習慣或者施工規(guī)范等,正是因為需要遵循這些規(guī)范,所以我們需要一個信息架構來體現(xiàn)這些。
比較官方的信息架構解釋是這樣的:信息架構設計是對信息進行結構、組織以及歸類的設計,好讓使用者與用戶容易使用與理解的一項藝術與科學。
簡單來說,信息架構設計就是讓用戶可以 容易地理解你的產品是怎樣的。讓他們在使用你產品的時候可以更順利更自然。就像一進入飯店就會有一種感覺,門口是等餐的地方,進去就應該吃飯,如果找洗手間一定不會往門口走,而會往深處走。這就是信息架構的好處:他讓用戶使用同類產品時更容易上手和理解,讓產品更容易被接受。
那對于線上產品來說為什么需要合理的信息架構呢?大家來看下邊3組 app 的 tab欄截圖。你能僅僅從 tab欄就看出這款 app 是什么類型的 app,如何使用嗎?
很明顯的,第一個是一款購物類 app,第二個是一款圖片社交類的 app,第三個是微信的 tab,雖然首頁名稱是微信,但是我相信如果把名稱換成「聊天」,你還是能認出這是微信的 tab欄。
從底部標簽欄就可以大致看出產品是用來干嘛的,這就是信息架構的作用。一個合理的信息架構可以讓產品非常容易被用戶理解,可以讓用戶第一眼對產品有一個簡單的認知,指導自己可以用產品做什么事,指導產品提供什么服務。
再看一組反例:
這三組 tab欄就讓人很困惑了,看了半天你也許根本不知道這幾款 app 是做什么用的,以及如何使用。如果你讓用戶很困惑,他會分分鐘拋棄你的 app。
所以信息架構的核心目標是為用戶提供更好的體驗,獲得更高的留存率。
一款信息架構良好的產品必然遵循以下兩個標準:
我們通過這兩個標準來印證下上邊3個正面案例的信息架構:
相信你能很快速的識別出這款軟件的用途和用法,這就給提升留存提供了基礎。
那么如果信息架構像架構一個飯店一樣簡單,那么信息架構為何需要設計?
因為你的實際產品功能可能有這么多:
畢竟我們不是支付寶,沒辦法把功能像豆腐塊一樣堆疊起來,我們需要一些科學的設計方法。
合理的信息架構設計需要考慮5個步驟:
下面我來分步講解一下。
首先你的產品是給到用戶用,你當然要最大限度的了解你的用戶,我們先來看下一個概念:「心智模型」。
心智模型是經由經驗及學習,腦海中對某些事物發(fā)展的過程,所寫下的劇本。人類在經歷或學習某些事件之后,會對事物的發(fā)展及變化,歸納出一些結論,然后像是寫劇本一樣,把這些經驗濃縮成一本一本的劇本,等到重復或類似的事情再度發(fā)生,我們便不自覺的應用這些先前寫好的劇本,來預測事物的發(fā)展變化。心智模型是你對事物運行發(fā)展的預測。再說得清楚一點,你「希望」事物將如何發(fā)展,并不是心智模型,但你「認為」事物將如何發(fā)展,就是你的心智模型了。
假設你從沒見過 iPad,而我剛遞給你一臺并告訴你可以用它來看書。在你打開 iPad 使用它之前,你頭腦里會有一個在 iPad 上如何閱讀的模型。你會假想書在 iPad 屏幕上是怎樣的,你可以做什么事情,比如翻頁或使用書簽,以及這些事情的大致做法。即使你以前從沒有使用過 iPad,你也有一個用 iPad 看書的「心智模型」。你頭腦里的心智模型的樣式和運作方式取決于很多因素。
用戶往往帶著以往使用 APP 的一些習慣來使用產品;線下做同一件事的習慣、生活習慣、心智模型等。要考慮哪些是可以創(chuàng)新的,哪些是用戶習慣,要在不妨礙用戶習慣的情況下作出更能讓用戶接受的創(chuàng)新。
你要考慮清楚4個問題:
用戶通常用你的產品做什么?
用戶用你的產品來做什么?用來看新聞還是用來聊天?一定要考慮清楚用戶的核心流程。從核心流程中提取信息架構的基礎形式。
用戶用這類產品最關心什么?
用新聞app 時咨詢的真實性實效性,購物類app 精準搜索和售后功能,就是你的用戶關注點在哪里,這是一個很好的突破口。
用戶有哪些思維定式?
和用戶年齡身份相關的屬性,產品體驗符合相應用戶的思維模式,心智模型,用戶就會比較容易接受。
用戶用什么類似的產品?
類似的產品也會帶來一些用戶習慣,迎合這些習慣也會讓用戶快速上手接受產品。
了解了你的用戶場景和使用習慣之后你會知道如何做出符合用戶心智的,容易被接受的產品,你不需要擔心做的產品沒有差異性或者沒有競爭力,我們可以在核心流程之外做出創(chuàng)新點,讓用戶覺得你的產品又好用又有些不一樣。
這里的業(yè)務包括與產品接觸的內部及外部的人提出的需求,比如公司的運營,市場,銷售,BD,公司的外部合作伙伴等。
這些人的需求我們也要收集,比如運營人員想更方便的管理注冊用戶,銷售想更多的添加廣告位,市場推廣人員要求能統(tǒng)計不同渠道帶來產品的下載量,注冊數(shù),活躍數(shù),合作伙伴需要進行賬號,內容互通等,總之只要與業(yè)務有關的人的意見,盡可能的在產品設計前多收集,即使做不了,也告訴他們原因,要不然產品上線后就等著被他們吐槽吧。
在做一款 app 時,我們面臨了和無數(shù)競品爭搶用戶的局面,這時候分析競品就非常必要,我們需要在知己知彼的前提下,做好核心流程功能,再思考如何在差異功能上做好突破。
首先我們需要把競品功能梳理成思維導圖:
其實思維導圖就是信息架構比較基礎的形式了,但是光有思維導圖沒用,我們需要對思維導圖進行分析。
我以前做過的一款人脈 app 為例,當初對比了領英、赤兔和脈脈,分析了這4款 app 的思維導圖后得出的共性和差異點:
共性就是要符合用戶使用習慣的地方,如果你調研的3-5個產品都這么做了,很可能這里是產生用戶習慣的地方,是我們需要去遵循的,這是獲得用戶好感度的基礎。
分析產品時你一定也會得出一些產品差異的地方,而這些差異就是你的產品競爭點,也是別人用你的 app 不用其他 app 的理由。比如人脈軟件都會有社交相關的功能,但是脈脈會比較注重職場招聘、直播等互聯(lián)網職場人比較關心的點,這樣對應的用戶群體就比較會吃你這套,會提升用戶的粘性。
相信你在梳理了競品的信息架構,總結了共性和差異點之后對產品的信息架構已經有一個比較清晰的認知了,在做自己產品信息架構的時候也會更胸有成竹。但是最后還有一件事我們可以做,就是對我們的要做的產品功能做卡片分類。
卡片分類法是我們工作中常用到的一種方法,它可以在用戶側再一次印證和檢測我們的產品信息架構。
卡片分類法就是讓用戶對功能卡片進行分類,組織,并給相關功能的集合重新定義名稱的一種自下而上的整理方法。
說直白點就是準備一堆卡片,在這些卡片上寫上你所需要包含的功能名稱,然后給到用戶側,讓用戶進行分類,讓用戶進行組織,來了解用戶到底覺得這些功能應該怎么合并怎么歸類的一種方法。它可以幫助你站在用戶角度去了解用戶是怎么認定這些功能的,也可以在卡片分類法的過程中更加了解用戶是怎么想的。
卡片分類法大概的步驟和注意點是這樣的:
卡片分類法最終會產出這樣的一個樹形圖:
其實到這一步信息架構大概的雛形已經有了,你可以用 axure 或者類似 mindnode 的軟件把信息架構梳理出來。
接下來你要對信息架構進行重要性分級,這樣在產品開發(fā)的前期可以幫助梳理產品研發(fā)的優(yōu)先級,集中精力解決用戶的最大痛點。在產出頁面時也可以更好的把控頁面元素的大小層級,位置關系等。
最后你需要注意層和度的平衡:層一般不超過5層,超過操作困難。度過多會讓用戶認知成本增加,容易找不到想找的內容。這里的度指的是同一頁面展示的信息量。
藍藍設計( m.sillybuy.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。