Houseparty has become very popular during the COVID-19 period because it helps you connect with others in a fun way. The concept is simple, you open the app and jump on a video call with your friends. You can even play online games with them (UNO?, Trivias, etc).

Houseparty在COVID-19期間非常受歡迎，因為它可以幫助您以有趣的方式與他人聯系。 這個概念很簡單，您打開應用程序并與朋友進行視頻通話。 您甚至可以與他們一起玩在線游戲(UNO?，Trivias等)。

So although I love the app, I found myself often confused on how to use it. In this article, I want to explore an alternate design.

因此，盡管我喜歡該應用程序，但我發現自己經常對如何使用它感到困惑。 在本文中，我想探討一種替代設計。

方法 (Approach)

My approach follows the double diamond framework (read more about here): we find the problem(s) then we come up with solutions that we test with users before we implement them.

我的方法遵循雙菱形框架( 在此處了解更多信息 )：找到問題后，我們提出了在實施之前要與用戶一起測試的解決方案。

Finally, before we get started, this is not supposed to be a complete app redesign (which would take months), but a simple exercise on how the user experience could be improved.

最后，在我們開始之前，這不應該是一個完整的應用程序重新設計(需要幾個月的時間)，而是一個有關如何改善用戶體驗的簡單練習。

問題 (The problem)

Although the concept behind the app is simple, the problem that I encountered is that the interface is confusing to use. Let me explain further by looking at usability heuristics (created by Norman Nielsen):

盡管該應用程序背后的概念很簡單，但我遇到的問題是該接口使用起來很混亂。 讓我通過查看可用性啟發法( 由Norman Nielsen創建 )進一步說明：

1. No navigation, no home screen: Relating to flexibility and efficiency of use, the screen on the left is what you see when you open the app. There is no navigation, which is probably intended this way, but left me confused because there are a lot of things going on.

   沒有導航，沒有主屏幕：關于靈活性和使用效率，打開您的應用程序后會看到左側的屏幕。 沒有導航，可能是這種方式的目的，但是讓我感到困惑，因為發生了很多事情。

2. Vague icons (1,2,3,4,5,7): Relating to consistency and standards, what does the smile or the plus sign or the camera symbol or paper plane or the hand mean? This seems trivial, but clicking on the hand sends a wink to my boss (for example) who now knows that I am playing Houseparty during work hours! So icons need to be very clear on what they do (error prevention).

   模糊的圖標(1、2、3、4、5、7)： 關于一致性和標準 ，微笑或加號，相機符號或紙飛機或手是什么意思？ 這看似微不足道，但是單擊手上的手勢會眨眨眼給我的老板(例如)，他現在知道我在工作時間內正在玩Houseparty！ 因此，圖標必須非常清楚其功能(預防錯誤)。

3. Duplicated screens: Clicking on the smiley or the plus sign brings me to similar pages (see above) where I can invite friends. Is there a difference?

   屏幕重復：單擊笑臉或加號會將我帶到相似的頁面(請參見上文)，在這里我可以邀請朋友。 有區別嗎？

So although I had a hunch that a better UX is needed, as a designer, I need to resist the temptation to jump to conclusions and back up any hunches with proper user research.

因此，盡管我有預感，需要一個更好的用戶體驗，但作為一名設計師，我仍然需要抵制誘惑，以得出結論并通過適當的用戶研究來支持任何預感。

用戶研究 (User Research)

To confirm that the above points actually represent challenges for users, I checked the Google Play Store to see what users are saying. The app has a 3.9 star rating which is lower than other apps in this category. But the negative comments focus mostly on bugs in the app, which is not part of this exercise.

為了確認以上幾點對用戶而言確實構成挑戰，我檢查了Google Play商店以了解用戶在說什么。 該應用程序具有3.9星評級，低于該類別中的其他應用程序。 但是負面評論主要針對應用程序中的錯誤，這不是本練習的一部分。

So I needed another approach: I invited 15 friends, family and colleagues to Houseparty and then asked them what they think of the app.

因此，我需要另一種方法：我邀請15個朋友，家人和同事參加Houseparty，然后問他們對應用程序的看法。

Almost all of them mentioned (without me prompting them) the same problems that I highlighted above.

幾乎所有人都提到了(而我沒有提醒他們)與我上面強調的相同的問題。

Plus, many were bothered that the camera was on by default when the app starts (the camera is actually on but hidden behind the UI elements, so you get surprised when you find out it was on the whole time). It makes sense for apps like Snapchat to turn on the camera by default. Here you want to try out the AR filters and you expect the camera to be on, but I don’t see a need for the camera to be on in Houseparty right away. In a world where people value their privacy this seems scary.

此外，許多人為應用程序啟動時默認情況下相機處于打開狀態感到困擾(相機實際上處于打開狀態，但隱藏在UI元素后面，因此當您發現相機一直處于打開狀態時，您會感到驚訝)。 對于像Snapchat這樣的應用程序，默認情況下開啟相機是有意義的。 在這里，您想嘗試使用AR濾鏡，并且希望可以打開相機，但我認為沒有必要立即在Houseparty中打開相機。 在人們重視隱私的世界里，這似乎很可怕。

角色 (Personas)

First I thought this app is for the Gen Zs, but based on the imagery on their website and on the Google Play Store, it seems they are targeting people in their 30s. The users from the research above were within this age range, which is assured me that the feedback is valid.

首先，我認為該應用程序適合Z世代，但基于他們網站和Google Play商店上的圖像，看來他們的目標受眾是30多歲的年輕人。 以上研究的用戶都在這個年齡范圍內，這使我確信反饋是有效的。

任務和電匯 (Task & Wire Flows)

Before jumping into wireframes, I recommend to spend some time on crafting the general flow of the user, which depends on their goal (here is a great article that explains the whole process).

在進入線框之前，我建議花一些時間來設計用戶的總體流程，這取決于他們的目標( 這是一篇很好的文章 ，解釋了整個過程)。

For this exercise, I focused on two of the main tasks that a user will do in Houseparty: start a video chat and play a game with friends.

在本練習中，我重點介紹了用戶在Houseparty中要完成的兩個主要任務：開始視頻聊天和與朋友玩游戲。

Task Flow: I like to start with the simplest exercise which is designing task flows (boxes below).

任務流程：我想從最簡單的練習開始，即設計任務流程(下面的框)。

Tip: The easier the design exercise, the faster you can iterate. In this case, you are drawing boxes that you can quickly shift around or rename. This could even be a group exercise to get everyone on the project aligned.

提示：設計工作越輕松，迭代越快。 在這種情況下，您正在繪制可以快速移動或重命名的框。 這甚至可以是一個小組練習，以使項目中的每個人保持一致。

Also, this really forces you to think of the steps that are involved to reach the goal without worrying about screen content/layout. This give you a good foundation for everything that follows.

另外，這確實迫使您考慮實現目標所涉及的步驟，而不必擔心屏幕內容/布局。 這為后續的所有操作奠定了良好的基礎。

Wire Flows: These are the black and white frames you see below. This does not have to be the final layout, but is a good exercise to think about what kind of content (UI elements) you need on each screen, which will ultimately lead you to the layout.

線流：這些是您在下面看到的黑白幀。 這不一定是最終的布局，而是一個很好的練習，考慮每個屏幕上需要什么樣的內容(UI元素)，最終將您帶到該布局。

線框 (Wireframes)

Once you have finished the wire flows, you know how many app screens you need. Now It is time to go into more details and layout our screens. Below a couple of iterations of the home screen. During this phase, I also look at other popular apps (Facebook, Spotify, etc) to take cues on how they structure their pages (profile pic in upper left corner, bottom navigation, etc). Following certain standards will ensure that your app is user friendly.

一旦完成了流程，就知道需要多少個應用程序屏幕。 現在是時候進入更多細節并布局屏幕了。 在主屏幕的幾個迭代下面。 在此階段，我還將研究其他流行的應用程序(Facebook，Spotify等)，以提示它們如何構造頁面(左上角的個人資料圖片，底部導航等)。 遵循某些標準將確保您的應用程序易于使用。

設計 (Design)

I use Adobe XD to design websites and app. There are a couple of tools out there (Figma, Sketch, etc), but at the end of the day it is really what you make out of the tool. XD allows me to create interactive prototype, which is great for presentations, user testing or handover to developers (click here to try out the prototype).

我使用Adobe XD設計網站和應用程序。 那里有幾個工具(Figma，Sketch等)，但歸根結底，這實際上是您使用該工具制作的。 XD允許我創建交互式原型，非常適合演示，用戶測試或移交給開發人員( 單擊此處以試用原型 )。

設計UI時，我的主要想法是： (My main thoughts when designing the UI were:)

Color and Typography: Houseparty uses a lot of different colors and is quite “loud” (even small icons have different colors), so I also tried to reflect this corporate identity in this design with a red background and a bold typeface. At the same time, I reduced the color pallet to red, blue and yellow to create some consistency.

顏色和版式： Houseparty使用許多不同的顏色，并且非常“響亮”(即使小圖標也具有不同的顏色)，因此我還嘗試在該設計中以紅色背景和大膽的字體反映這種公司形象。 同時，我將調色板減少為紅色，藍色和黃色，以保持一致性。

Common UI Elements: Known as design systems, companies like Google, Apple and even Airbnb created UI component libraries that are based on their years of experience designing and testing apps. I used a design system for this exercise, which makes work not only more efficient, but I can be confident that the UI element will be user friendly and I don’t run into problems later.

常見的UI元素： Google，Apple甚至Airbnb等公司都被稱為設計系統，它們基于多年的設計和測試應用程序的經驗創建了UI組件庫。 我為此練習使用了一個設計系統，該系統不僅使工作效率更高，而且可以確信UI元素將是用戶友好的，以后也不會遇到問題。

Bottom navigation: Finally, one of the biggest changes to the UI is the bottom navigation. Most apps follow the practice of showing icons together with text, which according to a lot of research leads to the best user experience (don’t make me guess what this icon means!).

底部導航：最后，UI的最大變化之一就是底部導航。 大多數應用程序都遵循將圖標與文本一起顯示的做法，根據大量研究，這種做法可帶來最佳的用戶體驗(不要讓我猜測此圖標的含義！)。

用戶測試 (User testing)

To test if the new design really works, I used Maze.design, which lets you build a prototype that you can share with users (Try it, here is the link to this prototype). The test was: Can users successfully navigate to the “Word Racer” game?

為了測試新設計是否真的有效，我使用了Maze.design，它使您可以構建可以與用戶共享的原型( 嘗試一下，這里是此原型的鏈接 )。 測試是：用戶能否成功導航到“ Word Racer”游戲？

What I learned

我學到的是

First of all, you actually don’t need a lot of users to detect UX issues. Nielsen Norman Group states that 5 users are enough to find 80% of the issues (more details here).

首先，您實際上不需要很多用戶來檢測UX問題。 Nielsen Norman Group指出，只有5個用戶可以找到80％的問題( 更多詳細信息，請點擊此處 )。

90% of users were able to complete the task (screenshot #1), which gives me confidence that the design is easy to navigate (one of the primary objectives of this exercise).

90％的用戶能夠完成任務(屏幕截圖1)，這使我相信設計易于導航(此練習的主要目標之一)。

A second finding was that there were almost 20% of misclicks (screenshot #2), which means users clicked on the wrong item. Maze.design, allows us to analyze this further with heatmaps (screenshot #3). Most of the misclicks can be attributed to users clicking on the card instead of the button. This great insight and I fixed this by making the whole card clickable.

第二個發現是幾乎20％的誤點擊(屏幕截圖2)，這意味著用戶點擊了錯誤的項目。 Maze.design，使我們能夠通過熱圖進一步分析這一點(屏幕截圖3)。 大部分誤點擊可歸因于用戶點擊卡片而非按鈕。 這種深刻的見解，我通過使整個卡片都可點擊來解決。

Again this was just an exercise to show how an alternate design of the app could look like. This is not to say that this design will perform better on a large scale (users never like big re-designs).

再次，這只是一個演示應用程序的替代設計外觀的練習。 這并不是說這種設計在大規模上會表現更好(用戶永遠不會喜歡大型的重新設計)。

I hope you enjoyed this article and please sign-up for Houseparty (if you have not already). It is a great way to connect with colleagues and friends when working from home and you need a short break.

希望您喜歡這篇文章，如果不是，請注冊Houseparty。 這是在家中與同事和朋友聯系的好方法，您需要短暫休息。