編輯導(dǎo)語：針對不同的用戶人群和使用場景，設(shè)計師需要作出對應(yīng)考量，以提升用戶體驗，更好地契合用戶需求。本篇文章里，作者就對如何提升虛擬校園產(chǎn)品的用戶體驗案例做了分析解讀，一起來看看吧。

一個關(guān)于我如何讓大學(xué)生的虛擬校園生活體驗更有趣、真實的小故事。

免責(zé)聲明：這是由 Hallparty 提供的畢業(yè)設(shè)計個人項目。

一、Hallparty 是什么？

盡管大學(xué)時光有限，但校園的社交媒體平臺仍蓬勃發(fā)展。前所未有的疫情導(dǎo)致了社交媒體轉(zhuǎn)向虛擬互動模式。

像以往的其他大學(xué)社交媒體應(yīng)用程序一樣，Hallparty 匯集了 Facebook、Instagram 和 Clubhouse 等社交平臺的元素，意在捕捉大學(xué)生活的精髓。

Hallparty 是一款專門針對大學(xué)校園的社交媒體應(yīng)用——囊括校園里的所有事務(wù)。想象你在校園里會做的任何事情，從參加有趣的俱樂部到與朋友在食堂聊天，它們都包含在這個應(yīng)用程序中。這簡直就是“口袋里的校園”。

二、問題所在

Hallparty 目標(biāo)是提供一個虛擬的大學(xué)的社交平臺，包含在語音室里聊天、設(shè)立有趣的俱樂部、提供創(chuàng)新機(jī)會等。但由于種種因素，應(yīng)用程序仍未能包含大學(xué)生活的精華部分，某種意義上來說，它無法吸引用戶。

因此，我決定重新設(shè)計用戶體驗以滿足用戶的需求。

雖然這款應(yīng)用程序無法連接現(xiàn)實和虛擬，但也許并不影響實現(xiàn)目標(biāo)。

三、我是如何得出這個結(jié)論的呢？

我對 Hallparty 的使用者進(jìn)行了調(diào)研，并對正在上大學(xué)的人進(jìn)行了一些采訪。之后，我開始觀察一些問題，比如：

• 是什么讓用戶跳過了登錄頁面？
• 為什么用戶沒有像使用其他社交媒體那樣頻繁使用 Hallparty？
• 用戶最喜歡使用 Hallparty 的什么功能？
• 是否有一些功能用戶根本就不知道它們是什么？
• 在用戶旅程中的種種痛點是什么？

等等……

我從研究中收集了所有的信息，并將其繪制成用戶旅程圖，以了解用戶。因此我明白了用戶在整個體驗旅程中所思考的各種問題。比如說：

• 我在這里應(yīng)該做什么？
• Hallparty 與 Facebook、Instagram、Clubhouse 或 Discord 等應(yīng)用有什么不同？
• 我為什么要填寫所有這些關(guān)于我自己的細(xì)節(jié)信息？
• 它有什么作用？
• 它的功能是什么？
• 這些按鈕大多是做什么用的？
• 為什么讓我看到一些空白屏幕？那是什么意思？

等等……

四、缺少什么？

一旦我得到了用戶在整個體驗旅程中經(jīng)歷的各種痛點，我就開始集思廣益，尋找缺少的東西。之后，我提出了以下需要解決的問題：

• Hallparty 需要傳達(dá)的目標(biāo)。
• 界面能與用戶產(chǎn)生共鳴。
• 引導(dǎo)用戶了解 Hallparty 功能是很重要的，根據(jù)研究，功能并不明顯。
• 最重要的是，Hallparty 必須推銷 “虛擬校園生活” 的概念。

五、設(shè)計范圍

在觀察了用戶的想法和行為后，我確定了需要解決的關(guān)鍵點，即：

1. 最初的新用戶引導(dǎo)體驗

新用戶引導(dǎo)是將用戶轉(zhuǎn)化為付費(fèi)客戶的最關(guān)鍵環(huán)節(jié)之一。第一印象即是最終印象，事實確實如此。在這種情況下，新用戶引導(dǎo)有著巨大的改進(jìn)和創(chuàng)新的空間。

2. 應(yīng)用內(nèi)體驗

這會是一個需要探索的廣闊空間，但我決定集中于兩個核心的主題，即：填寫個人資料和漸進(jìn)式用戶引導(dǎo)。

我觀察了各類社交媒體平臺，發(fā)覺出“填寫個人資料”是如何在挖掘信息方面為用戶帶來好處。雖然 Hallparty 有一個編輯個人資料的選項，并要求用戶在初次使用時填寫一些信息，但這還不夠。它需要強(qiáng)調(diào)個人資料的重要性。因此，我決定提出一個解決方案。

漸進(jìn)式用戶引導(dǎo)比初始用戶引導(dǎo)使用更廣泛一些，因為它在用戶逐步瀏覽應(yīng)用程序時向他們展示新的信息。指引提示會呈現(xiàn)在用戶所在頁面上，就像一個實時演練。用戶不是預(yù)先得到提示，而是在探索應(yīng)用程序的同時進(jìn)行學(xué)習(xí)。Hallparty 有幾個功能需要一些漸進(jìn)式引導(dǎo)。

3. 空狀態(tài)體驗

這是一個很好的機(jī)會，可以與用戶建立關(guān)系，并傳達(dá)產(chǎn)品的個性。由于目前 Hallparty 沒有為“空狀態(tài)”提供解決方案，我認(rèn)為 “空狀態(tài)” 有很大的潛力值得我們?nèi)グl(fā)掘，讓用戶高興，在關(guān)鍵時刻留住用戶。

當(dāng)我為 Hallparty 設(shè)計體驗時，需要牢記他們的設(shè)計語言，他們使用的字體類型，他們使用的調(diào)色板，布局，間距，以及其他元素。因此在開始設(shè)計之前，我花了一些時間了解 Hallparty 的設(shè)計系統(tǒng)。

六、初始用戶引導(dǎo)

經(jīng)過一些研究，我發(fā)現(xiàn)到 Hallparty 用戶體驗不是很好，缺少氛圍感。用戶應(yīng)該能夠一目了然地了解 Hallparty 的目的，而這一點是缺乏的。實際上 Hallparty 提供了很多很酷的功能，比如：

• 專門為大學(xué)提供的私人空間。
• 虛擬房間，與朋友一起聊天。
• 虛擬社區(qū)將志同道合的人聯(lián)系起來。
• 有機(jī)會發(fā)揮創(chuàng)意，建立用戶自己的主頁。
• 存放用戶想法。
• 消息功能，這不用說，非常有用。

但是，上述的大部分功能只是擺放在那里，甚至無法被用戶發(fā)現(xiàn)。這時我意識到這些功能需要一些介紹。

隨著我們的進(jìn)一步深入，我們分析了改版前的新用戶引導(dǎo)體驗。

1. 現(xiàn)有流程

正如你所看到的，這些屏幕缺乏大學(xué)校園的精華部分。當(dāng)我開始設(shè)計新用戶引導(dǎo)時，我必須重點思考我如何能夠直接提高用戶體驗。

因此，我決定從現(xiàn)實生活中尋找一些靈感。我想象著它在現(xiàn)實世界中是如何運(yùn)作的。迎新會活動是怎樣的？

2. 故事線

所以，讓我們從一個小故事開始。

很久以前，有一個叫 Alex 的男孩，他考上了一所大學(xué)。今天是他在大學(xué)的第一天?？?！那是他的大學(xué)。

由于 Hallparty 的想法是針對每個學(xué)院單獨(dú)推出。所以，我想為什么不利用這個機(jī)會，給用戶一些個性化的體驗。

3. 迭代過程

現(xiàn)在，這是用戶會遇到的第一個界面，我需要確保它能吸引用戶的注意。因此，我在文案和視覺上做了一些迭代。

4. 最終流程

先前的登錄過程很簡單，我不想讓它復(fù)雜化。通過詢問大學(xué)的郵件 ID 來登錄很好用。我想給用戶一種興奮的感覺，所以我決定繼續(xù)使用用戶大學(xué)的插圖，這將給用戶一個個性化的體驗，以及一些 Hallparty 的描述，以便用戶感受到 Hallparty 的氛圍。

故事繼續(xù)……注冊成功后，亞歷克斯前往校園。他看著美麗的校園和周圍的學(xué)生。讓我們來看看他接下來做了什么。

??他交了新朋友！

場景 1：連接好友

1）迭代過程

就像現(xiàn)實世界一樣，我想捕捉當(dāng)孩子們第一次進(jìn)入大學(xué)時的新鮮感受。他們在一個完全陌生的地方看到了很多新面孔，他們想做的就是給自己找一個朋友來交談，分享那些共同的感受。

有了這個想法，我繼續(xù)設(shè)計，在一些有趣的插圖的幫助下，我試圖展示出校園中同學(xué)們來來往往，以提示用戶找一個新朋友。

2）最終版本

使用一種更適合 Z 世代的語言是非常重要的，這樣他們就能與產(chǎn)品產(chǎn)生共鳴。下一個界面顯示了他們大學(xué)學(xué)生的用戶名單，這些人已經(jīng)注冊登陸了，可以直接關(guān)注他們。

如果亞歷克斯是第一個進(jìn)入學(xué)校的人呢？

想不到吧！我也有辦法解決這個問題

特殊情況：第一批用戶加入時。

1）迭代過程

這是一個專門為邊緣情況，即第一批用戶制作的界面。我不希望用戶感到孤獨(dú)，因此借助插圖和文字，我試圖為用戶打造成就感，使他們高興。

2）最終版本

在與一些新生聊天后，Alex 繼續(xù)前進(jìn)，發(fā)現(xiàn)很多不同的人群在興奮地談?wù)撝?。讓我們來看看他們在做什?

場景 2：連接社群

和大學(xué)迎新一樣，新生了解并加入有趣的俱樂部和社群。同樣，Hallparty 也提供了各種有趣的社群和俱樂部。

更棒的是，Hallparty 不僅提供這些社群，用戶也可以創(chuàng)建新的社群。Hallparty 通過詢問用戶的興趣，只展示用戶感興趣的內(nèi)容，使得選擇和加入更為簡單。

這不是很酷嗎？

最終版本

使用 Hallparty 的設(shè)計語言，我最終制作了以下的界面，用彎曲的形狀，俏皮的文本和歡快的顏色，與現(xiàn)實世界相連。

如果到現(xiàn)在為止還沒有俱樂部滿足亞歷克斯的興趣呢？

當(dāng)然，我為此提出了一個解決方案

特殊情況 ：沒有符合用戶興趣的社群時。

新生不一定會找到符合他們興趣的俱樂部，也許他們會自己建立一個。但他們不想在搜索后看到空白的界面。我的解決方案如下：

亞歷克斯現(xiàn)在幾乎都準(zhǔn)備好了。哦，等等！那是什么？

正如你們所知，大學(xué)生活繁重，信息量巨大，學(xué)生很容易錯過一些重要信息。在與一群大學(xué)生交談后，我注意到他們有時會錯過校園里發(fā)生的事情，例如系里的辯論賽或一些體育活動。

我想到了校園推送機(jī)器人（Campus Bot）。但等等，我不會把所有內(nèi)容呈現(xiàn)出來，讓用戶在Hallparty中探索一下。(欲知詳情,請看后文）。

場景 3：連接信息

1）迭代過程

插圖輔助我表現(xiàn)出信息量爆炸時的困惑感受。

2）最終版本

Hallparty 初始引導(dǎo)的最終環(huán)節(jié)是一個小小的慶祝。因為初始引導(dǎo)很有趣，很刺激，但也有一點累，所以我想讓用戶有成就感。

七、漸進(jìn)式引導(dǎo)

1. 讓用戶更容易被發(fā)現(xiàn)

1）用戶填寫個人信息優(yōu)化

在一個大約有 5-7 千名學(xué)生的學(xué)校中，不了解學(xué)生詳細(xì)信息，就很難為用戶發(fā)掘新的朋友。但有什么好方法既能要求用戶填寫詳細(xì)個人的信息資料，又不會讓用戶感覺像是在枯燥的工作呢。

進(jìn)入頁面，以下是用戶填寫詳細(xì)個人信息的方式：

現(xiàn)有的面

Hallparty 在新用戶登陸時，要求用戶填寫的個人信息，然而信息維度相當(dāng)有限，且沒有什么意義。

優(yōu)化方案的目標(biāo)：通過巧妙地方式讓用戶填寫詳細(xì)信息，而不是在用戶剛進(jìn)入程序，因為這個過程感覺像是一個任務(wù)，枯燥無味，從而帶給用戶一些反感。

我的解決方案：線框圖

我不想把完成個人資料強(qiáng)加給用戶，但同時，能提醒他們應(yīng)該去填滿信息。

迭代過程

我嘗試了很多方案，確定了界面上可見的每一個元素，尺寸、位置、顏色、間距、層次，所有的一切。

下面是我對解決方案的思考過程：

最終界面

這是最終呈現(xiàn)給用戶的界面，在沒有引起用戶過多注意的情況下，卡片和圓環(huán)起到了提醒和解釋的作用（進(jìn)度提示）。這一點對于用戶而言至關(guān)重要，因為用戶知道如何填寫他們的詳細(xì)信息和操作進(jìn)度，實質(zhì)上可以給用戶掌控感。

一旦用戶完成了個人資料的填寫，卡片和圓環(huán)就消失了。

這就是整體界面的樣子：

2. 讓用戶更接近真實體驗的功能

我意識到，應(yīng)用程序中的功能并不都是那么容易被用戶發(fā)現(xiàn)的，因此，我決定挑選幾個重要的功能，只在應(yīng)用程序里給予用戶指引。

我不在初始引導(dǎo)中介紹這些重要功能的原因如下：

• 讓我們把它與現(xiàn)實世界中的場景相比較，孩子們會在入校時徹底了解校園嗎？不。但他們最終會在入校后逐一發(fā)現(xiàn)。
• 我不想一下子展示所有的功能，而是留下一些驚喜，讓用戶以后去發(fā)現(xiàn)。
• 此外，使初始引導(dǎo)變得冗長，除了激怒用戶之外沒有任何作用。因此用戶傾向于跳過它。而這是我絕對不希望發(fā)生的。

出于上述原因，我決定挑選重要的功能，稍后介紹。以下是我選取的兩個功能。

1）校園推送機(jī)器人

WALLIE，可愛的校園推送機(jī)器人，他將帶來校園里所有的八卦。開個玩笑，但是Wallie 會自動推送校園里的所有重要消息，確保你不會錯過任何事情。這是不是很酷？

校園推送機(jī)器人是用戶的朋友，他不會讓用戶疑惑校園里發(fā)生什么而感到 FOMO。

注釋：FOMO “錯過恐懼”指的是一種感覺或看法，即別人比你更快樂，生活得更好，或經(jīng)歷的事情比你更好。它涉及到一種深深的嫉妒感，并影響自尊。Instagram 和 Facebook 等社交媒體網(wǎng)站往往會加劇這種情況。

迭代過程

校園推送機(jī)器人的功能很酷，但用戶如何找到它？說實話，它并不明顯。但我有個好主意。 我為它引入一個工具使用提示，因為我們得讓用戶看到它最酷的實體。

接下來的操作呢？我不能在這里再放一個工具提示。你知道這意味著什么嗎？是的，是時候先睹為快了。

我需要給用戶一個理由去點擊 “校園”，因此我向他們展示了一個帶有互動的機(jī)器人動效。

介紹頁的優(yōu)化方案。思路如下：

最終版本

這就是最終樣式，簡單而又有趣。任務(wù)完成了！!

我需要弄清楚哪些功能是最受歡迎的，而且要確保它們是容易被發(fā)現(xiàn)的。因此，我開展了調(diào)查，向現(xiàn)有用戶提出一個問題：“他們最喜歡的功能是什么？”我得到的最普遍答案是語音室。

另外我注意到，語音室這個功能并未真正的傳達(dá)它的作用，它需要一些介紹。

2）語音室

將其與現(xiàn)實世界的場景相比較，語音室正如校園里和朋友一起閑逛的地方。當(dāng)你思考時，會發(fā)現(xiàn)語音室有無數(shù)的可能性、無數(shù)可以做的事情。例如，在食堂里休息發(fā)呆，和朋友們聚會，或者約會（Hallparty也提供私人房間），或者練習(xí)公開演講，或者主持播客。語音室有無窮的可能性。

語音室也有同樣的目的，它基本上是虛擬空間，你可以和你的朋友一起玩，玩游戲，聽歌，分享屏幕，以及更多活動。

現(xiàn)有界面

之前是沒有關(guān)于語音室的介紹。Hallparty 沒有展示出語音室是一個多么驚喜的功能，而介紹能充分展示了語音室的完整功能，使虛擬時間變得更加令人興奮。

迭代過程

由于需要維持之前使用的設(shè)計語言，我決定只使用彈出式來引導(dǎo)用戶語音室所提供的廣泛可能性。我更多地強(qiáng)調(diào)了視覺，以抓住用戶的注意，使他們有更好的體驗，并意識到虛擬互動可以是多么有趣。

最終版本

這就是最終界面。從發(fā)光的工具提示開始，以語音室的介紹頁面結(jié)束。

八、空狀態(tài)

空狀態(tài)是指用戶使用產(chǎn)品過程中，沒有任何東西可以顯示的時刻。

雖然空狀態(tài)對用戶體驗很重要，但卻經(jīng)常被忽視。了解它們是什么，如何使用它們，并對它們應(yīng)用最佳體驗方案，可以產(chǎn)生巨大的收益。盡管空狀態(tài)不是典型狀態(tài)，但它們應(yīng)該被妥善設(shè)計以防止混淆。

用戶從注冊登陸到功能操作交互，有很多的場景會使用空狀態(tài)。在這種情況下，我將展示針對那些用戶仍不熟悉，并且大部分界面沒有任何信息顯示的場景。這些可以被稱為漸進(jìn)式引導(dǎo)拓展 / 產(chǎn)品走查。

1. 個人

1）迭代過程

2）最終版本

2. 信息流

1）迭代過程

2）最終版本

3. 探索部分

1）迭代過程

1）最終版本

4. 收件箱

1）迭代過程

2）最終版本

5. 通知

最終版本

就這樣結(jié)束了！

如果你們閱讀至此，非常感謝你們留下來，這對我來說真的很重要（假裝你們很喜歡）?？偟膩碚f，這是一次有趣的設(shè)計旅程，我學(xué)到了很多東西，希望你們在閱讀中感受到樂趣。

九、思考和收獲

整個設(shè)計對我的設(shè)計成長很有幫助，我探索了很多以前沒有做過的新東西，也學(xué)習(xí)了一些新的技能。以下是我在整個過程中面臨的挑戰(zhàn)和學(xué)到的東西。

• 項目的開始和發(fā)展猶如一條巨大的學(xué)習(xí)曲線。我學(xué)會了質(zhì)疑我的每一個決定，我的推導(dǎo)決策能力得到了極大的提高。
• 設(shè)計時最重要的事情之一是移情。對設(shè)計師而言，真正理解用戶的需求和期望是必要的。移情幫助我更深入地了解背景，幫助我思考和提出解決方案。
• 我學(xué)會了如何在數(shù)字產(chǎn)品和現(xiàn)實世界之間進(jìn)行場景比對，從而看到清晰的產(chǎn)品愿景，更有創(chuàng)造力。
• 保持應(yīng)用程序的原有設(shè)計語言是一個挑戰(zhàn)，也是一個限制。
• 最后，迭代是我最大的老師。不滿足于自己做的初設(shè)計。最初迭代是有點挑戰(zhàn)性的，但隨著進(jìn)一步發(fā)展，我開始質(zhì)疑自己的設(shè)計決策，最終設(shè)計也隨之變得更好

十、未來的改進(jìn)

• 本次設(shè)計中的插圖伴隨著動效，提升初始時校園虛擬之旅的真實感。
• 校園推送機(jī)器人不僅能推送重要信息，還能回答學(xué)生的提問。

本文已獲得作者正式授權(quán)，截圖如下：

原文作者：Roopal Agarwal

原文地址：https://medium.muz.li/hallparty-design-revamping-the-virtual-campus-experience-178cfcef8c20

譯者：曹競羽；微信公眾號：三分設(shè)（ID：SFun-Share）；用戶體驗設(shè)計師成長社區(qū)

本文由@三分設(shè) 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議