交互課程信息架構(gòu)與流程

如何搭建信息架構(gòu)與用戶流程導(dǎo)師@楊超（微信公眾號：互聯(lián)網(wǎng)設(shè)計獅）introduction導(dǎo)師介紹楊超

東華大學(xué)碩士微信公眾號@互聯(lián)網(wǎng)設(shè)計獅現(xiàn)任上市公司UED團(tuán)隊(duì)負(fù)責(zé)人，曾任職網(wǎng)易、攜程、中國移動，負(fù)責(zé)過億級用戶量產(chǎn)品，也做過還沒面市就夭折的產(chǎn)品。起點(diǎn)學(xué)院講師，設(shè)計夾、浙大特邀分享嘉賓，愛民謠也愛騎行，騎車環(huán)過中國最南的島，亞洲最美的湖...我的口號：為中華之崛起而努力填坑3一零基礎(chǔ)入門互聯(lián)網(wǎng)交互設(shè)計師交互設(shè)計師必懂得需求那些事如何搭建信息架構(gòu)與用戶流程輸出交互原型與文檔二三四交互設(shè)計溝通與發(fā)展五431信息架構(gòu)的重要性如何進(jìn)行信息架構(gòu)設(shè)計24如何確定用戶流程信息架構(gòu)與用戶流程公司前臺候客區(qū)辦公位休閑區(qū)茶水間洗手間會議室儲物間公司前臺候客區(qū)辦公位休閑區(qū)茶水間洗手間會議室儲物間信息架構(gòu)的重要性信息架構(gòu)“信息架構(gòu)的主體對象是信息，由信息架構(gòu)師用以設(shè)計結(jié)構(gòu)、決定組織方式以及歸類，好讓使用者與用戶容易尋找與管理的一項(xiàng)藝術(shù)與科學(xué)。”—理查德.所羅.烏曼通俗一點(diǎn)的講，讓用戶更容易找到自己想要的東西和產(chǎn)品。主要包括：頁面內(nèi)容組織、整體導(dǎo)航框架。組織歸類好的信息架構(gòu)讓用戶一眼知道你的產(chǎn)品是做什么的不用或極小學(xué)習(xí)就知道怎么使用產(chǎn)品當(dāng)想使用某個功能時，能預(yù)知產(chǎn)品功能在哪最終到達(dá)更好的留存與轉(zhuǎn)化1031信息架構(gòu)的重要性如何進(jìn)行信息架構(gòu)設(shè)計如何確定用戶流程24信息架構(gòu)與用戶流程用戶端業(yè)務(wù)端卡片分類訪談測試業(yè)務(wù)需求競品分析12如何搭建信息架構(gòu)①業(yè)務(wù)需求13信息架構(gòu)—業(yè)務(wù)需求產(chǎn)品市場運(yùn)營老板其他推廣客服原則：可擴(kuò)展性你要知道未來你的產(chǎn)品可能不止現(xiàn)在這樣印象筆記列出業(yè)務(wù)需求架構(gòu)圖根據(jù)層級嵌套關(guān)系寫出一層層功能點(diǎn)根據(jù)情況控制細(xì)度，如整個產(chǎn)品與單

個頁面顆粒度會不同18如何搭建信息架構(gòu)②競品分析19信息架構(gòu)—競品分析競品功能架構(gòu)圖至少5個競品的信息架構(gòu)圖20信息架構(gòu)—軟件工具應(yīng)用雷達(dá)/以網(wǎng)易云音樂為例21什么樣的算競品直接競品間接競品在同一領(lǐng)域中的競爭對手，如易貨嘀同類貨運(yùn)類競品：藍(lán)犀牛、GOGOVAN、貨拉拉、58速運(yùn)、速派得等。其中產(chǎn)品之前版本也屬于競品之一?？赏ㄟ^同事溝通、行業(yè)報告獲得?？此撇辉谕活I(lǐng)域中，但對用戶習(xí)慣產(chǎn)生重要影響的競品：如客運(yùn)類APP，Uber、滴滴等?？赏ㄟ^前期調(diào)研、搜索相關(guān)等獲得。標(biāo)注出梳理時的吸引點(diǎn)及想法信息架構(gòu)樹狀圖23信息架構(gòu)—競品分析總結(jié)不同點(diǎn)相同點(diǎn)尋找設(shè)計的機(jī)會點(diǎn)遵循行業(yè)及用戶習(xí)慣24信息架構(gòu)—競品分析總結(jié)25如何搭建信息架構(gòu)③卡片分類26信息架構(gòu)—卡片分類前期需準(zhǔn)備的目標(biāo)用戶/功能卡片/便利貼/錄音筆/安靜的環(huán)境27信息架構(gòu)—卡片分類卡片分類流程介紹卡片用戶歸類歸類名字繼續(xù)歸類用戶訪談存檔讓用戶理解每個卡片功能含義，不理解中途可詢問。為什么把這些卡片放在一起？根據(jù)歸類原因，給這些歸類起個名字。某類卡片過多，是否可以細(xì)分，某類卡片過少，是否可以放在一起。分類過程中是否有糾結(jié)的地方，以及一些自己想問的問題。是否確定這是最后結(jié)果。確定的話拍照存檔。信息架構(gòu)—卡片分類分類、整理確定是你的目標(biāo)用戶29如何搭建信息架構(gòu)④訪談測試30信息架構(gòu)—用戶訪談用戶訪談測試1、在不介紹的情況下說出產(chǎn)品是做什么的2、讓用戶走一遍核心流程3、讓用戶使用細(xì)枝功能，如設(shè)置頭像31產(chǎn)出信息架構(gòu)根據(jù)分析結(jié)果列出相關(guān)優(yōu)先級根據(jù)優(yōu)先級產(chǎn)出最終信息架構(gòu)不同方法配合使用根據(jù)場景使用不同方法整個產(chǎn)品信息架構(gòu)單個頁面信息架構(gòu)不同331信息架構(gòu)的重要性如何進(jìn)行信息架構(gòu)設(shè)計如何確定用戶流程24信息架構(gòu)與用戶流程3用戶流程是個什么東東用戶流程是個啥玩意？用戶從打開APP到完成任務(wù)關(guān)閉APP的使用全過程包括了用戶看到什么，做了什么用戶流程36用戶流程-打開小程序查看行動查看行動查看37用戶流程-對比流程查看行動查看行動查看查看行動查看?用戶流程長??用戶流程短用戶流程優(yōu)化體驗(yàn)用戶流程越短越好，操作流程盡量不超過5步如何確定用戶流程呢基于用戶的使用場景如何確定用戶流程呢41查找朋友圈信息場景1：知道誰發(fā)的場景2：忘了誰發(fā)的基于用戶的使用場景如何確定用戶流程呢是基于目標(biāo)用戶完成某項(xiàng)任務(wù)的體驗(yàn)故事了解用戶看到什么，想到什么，做了什么頭腦風(fēng)暴如果不能去實(shí)地調(diào)研用戶44用戶場景—頭腦風(fēng)暴熱身主題發(fā)散輪流展示分類整理二次發(fā)散存檔1.找6人以內(nèi)成員；?2.告訴大家你的主題，比如這次我們要腦暴搬家的用戶流程，你希望搬家的過程是什么樣？1.每人5-10個idea。腦海中的任何一個想法都可以寫下來；?2.每張條記錄一個idea，盡量用簡約表達(dá)，字要足夠大，可以用畫的。3.注意撕下條的方式，是橫向，這樣可以保證條的平整，不會卷曲，能貼的牢固。1.團(tuán)隊(duì)成員圍墻站立,展示者面向著大家，介紹自己的idea，每介紹一個idea往墻上貼一個。3.語言盡量精煉，每個idea的表達(dá)盡量在20秒以內(nèi)。3.這個過程中其他人以聆聽和理解為主，不要討論，更不要評判。1.大家把相似的條貼在一起;2.過程中鼓勵大家都動手，相互之間不要用語言溝通。遇到想法不一致，再進(jìn)行簡短溝通。1.換一個顏色的便利貼。2.在聽別人講idea的時候，讓大家手上拿著筆和條，鼓勵大家在別人的idea上進(jìn)行發(fā)展，直接記在條上。3.在貼自己條的時候，有意識的把相同or相似的貼在一起。1.所有有價值的信息，都在墻上，所有直接拍照就可以啦。2、整理所有的接觸點(diǎn)。例子：搬家背景：曉紅近期換了工作，今天要搬家從A點(diǎn)到B點(diǎn)，于是準(zhǔn)備從搬家APP下單叫個貨車。1、因?yàn)榻裉炀鸵嶙?，曉紅比較擔(dān)心有沒有車，打開APP，看到周邊車輛信息，頓時放心了不少；2、曉紅設(shè)置了起始地和目的地，看到貨車參照標(biāo)準(zhǔn)知道自己的東西一個小面車就可以拉了，于是選擇了一輛小面，順便看了下計費(fèi)標(biāo)準(zhǔn)；3、這時APP顯示金額58元，加上首單優(yōu)惠8元，只需要50元；4、曉紅設(shè)置了搬家時間，并支付了金額…例子：搬家背景：曉紅近期換了工作，今天要搬家從A點(diǎn)到B點(diǎn)，于是準(zhǔn)備從搬家APP下單叫個貨車。1、因?yàn)榻裉炀鸵嶙?，小明比較擔(dān)心有沒有車，打開APP，看到周邊車輛信息，頓時放心了不少；2、曉紅設(shè)置了起始地和目的地，看到貨車參照標(biāo)準(zhǔn)知道自己的東西一個小面車就可以拉了，于是選擇了一輛小面，順便看了下計費(fèi)標(biāo)準(zhǔn)；3、這時APP顯示金額58元，加上首單優(yōu)惠8元，只需要50元；4、曉紅設(shè)置了搬家時間，并支付了金額…梳理接觸點(diǎn)設(shè)置目的地查看計費(fèi)標(biāo)準(zhǔn)明確起始地支付看到車型參照標(biāo)準(zhǔn)更多選擇車型車源信息看到資費(fèi)和優(yōu)惠信息選擇搬家時間明確起始地設(shè)置目的地看到資費(fèi)和優(yōu)惠信息車源信息看到車型參照標(biāo)準(zhǔn)選擇搬家時間查看計費(fèi)標(biāo)準(zhǔn)選擇車型支付加入業(yè)務(wù)流程比如服務(wù)協(xié)議、收集用戶數(shù)據(jù)等明確起始地設(shè)置目的地看到資費(fèi)和優(yōu)惠信息車源信息看到車型參照標(biāo)準(zhǔn)選擇搬家時間查看計費(fèi)標(biāo)準(zhǔn)選擇車型支付貨物類型不需要用戶操作的需要用戶操作的根據(jù)需要放在用戶流程中間，做默認(rèn)操作放在用戶流程最后，不影響用戶主流程根據(jù)流程來設(shè)計交互頁面確保每個接觸點(diǎn)的過渡是自然的531信息架構(gòu)的重要性如何進(jìn)行信息架構(gòu)設(shè)計如何確定用戶流程24信息架構(gòu)與用戶流程354交互設(shè)計流程需求分析信息架構(gòu)用戶流程原型設(shè)計交互文檔55信息架構(gòu)與用戶流程信息架構(gòu)用戶流程信息架構(gòu)

確定廣度讓你知道功能和信息放在那里用戶流程

確定深度讓你確定用戶完成任務(wù)的順序57信息架構(gòu)與用戶流程廣度深度平衡功能信息過深，用戶不易找到功能信息過多，增加認(rèn)知負(fù)擔(dān)支