當你有一個複雜的解決方案時如何設計一個簡單的 UI

這篇文章得到了我們在 Flatfile 的親愛的朋友的大力支持，他們創造了以人為中心的美好體驗，以消除人與數據之間的障礙。 謝謝！

他們說什麼？ 複雜的問題需要復雜的解決方案？ 在開發應用程序和軟件時確實如此。

但是你如何確保複雜的後端不會流到前端呢？

一般來說，複雜的 UI 足以讓許多人放棄網站或移動應用程序。 但是，當涉及到付費或訂閱用戶時，不要指望他們中的任何一個人會滿足於您的軟件複雜的界面。

不管你的產品有多棒。 如果它的外觀讓你的用戶發瘋，你可以期待大量代價高昂的用戶流失作為回報。

Flatfile 團隊對這個問題非常熟悉，他們構建了一個成功的數據導入器，這是許多設計師自己努力構建的一項技術。 下面，我們將看看一些幫助他們克服這個 UI 設計挑戰的技巧，也可以幫助你。

如何為複雜的解決方案設計簡單的 UI

在設計解決方案的前端時，您的目標是向用戶（有時也為他們的最終用戶）呈現一個非常簡單和直觀的界面。

那麼，Flatfile 是如何做到這一點的呢？ 單獨的數據載入過程可能是一個複雜的過程——必須從各種來源、文件類型和用戶中獲取數據，然後將其轉換為應用程序內的可用數據。 讓用戶在前端準備、驗證和清理他們的數據也不是一件容易的事。

除了標準的軟件設計過程之外，Flatfile 還採取了額外的步驟來確保用戶永遠不會察覺到他們的產品到底有多複雜。 這是他們學到的：

1. 弄清楚你的用戶的目標，這樣你就可以設計一個用戶至上的 UI

為了構建用戶認為有用的產品，您必須針對他們的目標並從他們的角度進行設計。 如果你忽略了這一點，你最終可能會得到一個 UI，它會優先考慮你的目標和優先級，這會讓幕後的複雜性得以體現。

讓我們看看這個失誤如何對您的應用程序或軟件產生嚴重影響。

Instagram 最近更新了其長期存在的界面的頁眉和頁腳。 以下是 2020 年 11 月前後標題的樣子：

早期的設計包含兩個符號/動作：

• 用於拍攝或上傳照片的相機圖標。
• 與連接聊天的 Messenger 圖標。

最新的設計已將所有圖標向右旋轉。 現在有三個：

• 用於創建 Instagram 帖子、故事、捲軸和生活的加號。
• 查看活動的心形符號（即發布參與、新關注者等）。
• Messenger 圖標保持相同的設計和位置。

查看標題，您可能不會認為這裡有什麼問題。 然而，Instagram 可能並沒有重新設計其導航以提高美觀或可用性。 新的頁腳證明了這一點：

查看中間和倒數第二個圖標。 11 月之後，加號和心形圖標移至應用程序的右上角，並替換為以下內容：

• Instagram reels 的鏈接，該功能的作用類似於 TikTok（並且可以說會增加平台的成癮性）。
• Instagram 購物的鏈接，該功能使用戶能夠從熱門商店（不是他們積極關注的商店）購物。

UI 不再（主要）鼓勵用戶從他們最喜歡的帳戶中管理內容或與其他用戶建立有機聯繫。 相反，用戶界面優先考慮平台的新付費遊戲方面，有利於在其上花錢的品牌和影響者。

因此，應用程序的可用性受到了影響，因為通知和創建按鈕已移出拇指區域並進入應用程序的一角。 它不僅使應用程序的使用更具挑戰性，而且這進一步引起了人們對幕後發生的事情的認識。 如果 Instagram 用戶沒有考慮工作中的複雜算法和業務決策，那麼 UI 現在會引起他們的注意。

在您做任何其他事情之前，請弄清楚您的用戶想要完成什麼以及他們期望它如何發生。 然後，總結用戶的目標，類似於 Flatfile 產品負責人 Randy Wiafe 的做法：

“Flatfile 用戶的目標是順利導入客戶數據。 Flatfile 的用戶需要將數據從一個軟件產品轉移到另一個軟件產品，這個過程需要盡可能簡單，因為這是新客戶將擁有的第一個產品體驗之一——導入他們的數據。”

你不能忽視這一點。 因為如果你沒有設計一個符合用戶目標和他們喜歡的旅程的 UI，那麼你很可能會揭示幕後發生的一些複雜性。

2. 評估比賽的產品以創建您的 MVP

每當您構建應用程序時，絕對需要最低限度的可行產品。 您不僅可以通過僅開發最簡單的產品版本來節省時間和金錢，而且實時和有效的測試版可以讓您在迭代時收集真實的用戶反饋。

這就是 Flatfile 所做的。 Wiafe 解釋了 MVP 的價值：

“就客戶及其最終用戶如何與產品進行交互而言，測試版確實讓我們大開眼界。 能夠理解用戶被屏蔽的原因和方式幫助我們大大改善了體驗。”

也就是說，你怎麼知道你的 MVP 的 UI 有多大？ 因為最小和不可用之間存在巨大差異。

我建議不要從頭開始設計過程，而是花時間研究競爭對手的軟件。

顯然，我並不是在提倡你竊取別人的設計。 然而，我的建議是，您可以獲得一些第一手經驗。

對於初學者來說，這將使您能夠識別整個 UI 的趨勢——您的潛在客戶已經習慣並自信地參與其中的設計趨勢。 其次，您可以使用這些演示將您的 MPV 削減到所需的絕對最小值。

假設您正在構建一個支付網關軟件。 你可以從 Stripe 開始：

和2結帳：

我已經從這些儀表板中刪除了所有數據，只留下了主要組件、導航和標籤。 我們在兩個 UI 之間看到的共同線程是什麼？

• 標題中心附近的搜索欄，
• 右上角的用戶設置或帳戶信息鏈接，
• 一個左對齊的控制面板，佔據頁面的 ⅙ 或 ⅕ 之間，
• 在獨立的塊中呈現的數據，
• 用於標記的中性無襯線字體，
• 顏色對比度很小，僅存在於儀表板中以指示選定的選項卡或區分數據集。

這只是一個基本的分析，但你明白了。 通過去除細節並有效地將競爭對手的產品轉化為線框，您可以確定用戶在您的軟件中看到的設計細節會感到舒適和自信。

您還可以利用這段時間花在他們的產品上來找出他們的複雜性體現在哪裡。 數據的層次結構是否不合邏輯？ 是否包含因出現在錯誤屏幕上而使事情過於復雜的元素？ 您是否要求用戶採取太多步驟來實現他們的主要目標？

Wiafe 建議的一件事是不要將您的 MVP 嚴格地視為線框：

“我們關注的另一個領域是如何讓這種體驗讓我們的用戶感覺良好。 我們不想讓測試版變得冷酷無趣。 我們希望給人留下良好的第一印象，這意味著我們需要花時間為軟件賦予一些特色，然後再將其推出。”

所以，是的，您將使用競爭對手的軟件來充實設計規範，以保持 UI 簡單。 但是，您的 MVP 仍然需要是用戶想要使用的可行產品，這意味著將其設計為具有吸引力。

3. 逐步引入複雜性並通過用戶測試確認

您是否曾經通過外賣應用程序從餐廳訂購食物，並想知道為什麼需要這麼長時間？

您在晚上 8 點下訂單 該應用程序說餐廳在幾秒鐘後確認了訂單，您將在 8:45 左右吃到食物。 8 點 40 分，你打開應用查看送貨司機在地圖上的位置，你想知道他們為什麼不動。 或者，更糟糕的是，為什麼他們正朝著錯誤的方向前進。 你的胃開始發牢騷，你後悔沒有自己接訂單。

如果你不熟悉這個，你很幸運。 但是如果你谷歌“送貨司機在應用程序上的方向錯誤”，你會明白我的意思：

對於外出就餐的人來說，這是一個新問題。 過去，他們收到的只是訂單確認信息，然後他們會在食物到達時接到電話、短信或敲門。

但交付應用程序在過去一年左右發生了變化，不僅可以全面了解餐廳烹飪食物的進度，還可以向您顯示送貨司機的確切下落。

這是交付應用程序成功不可或缺的功能嗎？ 如果它激怒了用戶，以至於他們遇到了大量的客戶服務投訴、訂單退款或用戶流失，那麼不，不是。

這就是為什麼應該一點一點地向您的 MVP 引入複雜性，並且只有在用戶測試確認它是值得添加時才完全集成。

正如 Wiafe 解釋的那樣：

“根據產品的用戶，產品的複雜性會有所不同。 使用我們的 Portal 產品，我們更頻繁地與開發人員合作，因此增加導入程序的複雜性不是問題。 然而，Concierge 是為客戶成功和實施團隊而設計的，他們往往缺乏技術意識。 因此，在對軟件進行測試之前，我們非常謹慎地向軟件添加任何復雜的功能或組件。”

剛開始時，了解用戶的目標和期望是很有價值的。 但是，一旦您擁有一個實時應用程序或軟件，就不要假設了解用戶的所有想法。

除非您站在用戶的角度，完全按照他們的方式體驗它，否則您真的不知道新的複雜層會對他們所感知的可用性產生什麼影響。

因此，當您向 UI 引入更多複雜性或刪除您認為過於復雜的內容時，制定與會發生什麼相關的工作假設非常重要。 一旦有了數據支持的想法，您就可以開始徵求用戶的反饋並改進您的產品。

包起來

為了構建您的客戶將使用的應用程序，您實際上必須為他們提供一些可以使用的東西，而不是需要他們每週聯繫客戶支持尋求幫助的東西。 或者這讓他們質疑為什麼他們使用的東西會給他們帶來比以前更多的壓力和沮喪。

因此，請注意允許感染前端的後端複雜性。 如果 UI 太複雜而無法導航或太複雜而無法理解，用戶會反抗並集體逃離。