Indigo.Design 可用性測試如何消除網頁設計中的猜測

本文得到了 Infragistics 親愛的朋友的大力支持，他們以提供加速設計、開發和協作的解決方案而聞名。 謝謝！

可用性對於網站的成功至關重要，但如果沒有一點幫助，在早期設計和開發階段就很難確定。

並不是說您為新站點所做的研究和準備不會讓您了解如何構建既美觀又實用的東西。 擁有堅如磐石的設計系統和設計師-開發者的交接肯定會幫助您為您的網站帶來質量控制和一致性。

然而，這並不總是足夠的。

雖然您可以對訪問者如何響應您的網站或應用程序做出有研究支持的假設，但在您將其交到真實用戶手中之前，這都是理論。

今天，我想看看可用性測試的過程：它是什麼，什麼時候應該使用它，以及在使用 Indigo.Design 開發網站時如何生成數據支持的見解。

什麼是可用性測試？

可用性測試是一種用於評估繞過網站或應用程序並完成特定任務的難易程度的方法。

它把重點放在人們做了什麼，而不是收集關於他們喜歡設計的意見。 換句話說，可用性測試允許您收集行為反饋，以確保該站點確實做了它應該做的事情。

要進行可用性測試，您需要將您的網站或應用程序交到目標用戶手中。 然後，從這些測試中收集的數據將幫助您將網站重塑為更精簡且更適合您的用戶首選旅程的網站。

有節制與無節制的可用性測試

有幾種方法可以解決這個問題：

如果在您的網站或應用程序上運行審核測試是不可能或不可行的，那也沒關係。 使用 Indigo.Design，您可以進行任何一種測試，輕鬆地從用戶那裡收集準確、可量化的數據，並消除設計中的猜測。

可用性測試允許您收集行為反饋，以確保該站點確實做了它應該做的事情。

“

使用 Indigo.Design 進行可用性測試

您可以早在原型設計階段就開始進行可用性測試。 而且，實際上，最小可行產品是最適合測試的網站和應用程序，因為在開發過程中進行迭代更便宜。 此外，在這個早期階段的用戶反饋將使您避免浪費時間構建用戶不想要或不需要的功能或內容。

需要明確的是，我們不是在談論徵求利益相關者的意見。 我們需要知道的是真實用戶是否可以成功使用您的網站或應用程序。

請記住，您需要將可行的原型帶到桌面上。 這意味著：

• 一個足夠豐富的原型來支持你要測試的可用性任務。
• 一種中等保真度的解決方案，在網站的空殼和準備啟動之間取得適當的平衡。 它可能不漂亮，但它必須是交互式的。

一旦你的產品達到了這一點，你就可以開始可用性測試了：

1. 將您的原型添加到 Indigo.Design

將原型添加到 Indigo.Design 很容易。 你有兩個選擇：

第一個選項是從您的計算機上傳原型。 接受以下文件格式：

• PNG，
• JPG,
• 動圖，
• 草圖。

第二個選項是將 Indigo.Design 插件添加到 Sketch 並將您的原型同步到雲端。 如果你打算使用這個工具來簡化切換，這個插件將是一個巨大的節省時間。

加載原型後，將鼠標懸停在其上並單擊“編輯原型”。

如果您尚未確認在 Sketch 中正確設置了所有交互，您可以在 Indigo.Design 雲中執行此操作並在那裡編輯您的交互：

如果交互設置不正確，請立即處理。 在左側界面創建熱點，然後將其拖到右側對應的卡片上，即可創建交互。

2.創建一個新的可用性測試

從上傳原型的同一個儀表板開始，您將開始您的第一次可用性測試。 您可以從兩個位置之一執行此操作。

您可以將鼠標懸停在要測試的原型上並創建一個新原型：

另一個選項是轉到可用性測試選項卡並在那裡開始測試：

您最終將在這裡管理您的可用性測試並查看您的測試結果。

啟動新的可用性測試後，您首先會看到：

本質上，您需要使用此工具做的是：

確定要測試的“任務”。 這些應該是讓您的用戶完成預期目標（他們的和您的）的重要步驟。

例如，作為一個財務管理應用程序，我希望用戶主要使用它來為自己創建新的預算。 所以，這是我要測試的第一個任務：

要創建“預期的成功路徑” ，您必須完全按照您的預期與您的原型進行交互，並希望您的用戶在現場產品上進行交互。

以下是“創建新預算”路徑的示例以及如何構建它：

在屏幕右側瀏覽您的網站或應用程序。

完成後，請在左側確認您的工作，然後再繼續創建您將包含在測試中的其他任務。

3. 為你的測試做最後的潤色

僅創建任務不足以從用戶那裡收集您想要的數據。

例如，如果這是一個 MVP，你可能想解釋一下體驗可能有點粗糙，或者提供解決方案本身的背景（你為什麼要構建它，你想用它做什麼），所以他們'不要被設計分心。

不要擔心您的用戶在他們的電子郵件邀請中放錯了這些詳細信息。 有一個地方可以在可用性測試的上下文中包含這些註釋。

轉到“測試設置”選項卡：

在“向參與者發送消息”下，這使您有機會在測試中包含歡迎消息。 這可以是一個籠統的歡迎聲明，或者如果您認為需要，您可以提供有關任務的更多背景信息。

感謝語句也很有用，因為它為測試提供了結束語。 您可以感謝他們的時間，也可以向他們提供後續步驟或對產品的期望信息（也許會有更多的可用性測試）。

在繼續之前，我想快速提醒您注意本節頂部的“成功標準”切換：

啟用後，此設置僅允許兩種結果：

• 經過
• 失敗

如果您希望此工具幫助您檢測替代路徑，我會說您應該將此切換設置為“關閉”。 我稍後會告訴你這意味著什麼。

現在，是時候獲取您的可用性測試鏈接並開始與您的參與者分享了。 當您單擊屏幕右上角的“開始測試”按鈕時，您會看到：

複製此鏈接並開始與您的參與者分享。

如果他們是 Chrome 用戶，系統會要求他們安裝一個瀏覽器擴展程序來記錄他們的屏幕、麥克風和攝像頭。 他們可以啟用或禁用其中任何一個。

然後用戶將進入測試：

收集完所有需要的數據後，單擊屏幕右上角的“停止測試”按鈕並開始查看結果。

4.查看你的可用性測試結果

您始終可以在 Indigo.Design 的可用性測試儀表板下找到您的測試結果。

如果您登錄該平台，您會發現所有測試結果的概覽，包括過去和現在。

您可以通過打開測試更深入地查看結果：

在左側，您將按任務查看測試結果。 它們分為：

• 成功率：執行您為任務定義的確切步驟的用戶百分比。
• 已完成任務：完成任務的用戶數。 如果您沒有啟用“成功標準”，此結果將顯示所有採用預期成功路徑以及替代成功路徑的用戶。
• 平均任務時間：用戶完成任務所花費的時間。

僅憑這一點，您就可以大致了解您在用戶面前鋪設的道路，以及它與他們的心態和需求的契合程度。

但是，屏幕右側讓我們可以更好地了解哪裡出了問題以及原因：

屏幕的頂部向我們展示了我們制定的原始步驟。 任何有紅色標記和紅色數字的地方都是我們的測試對象偏離該路徑的地方。

這比熱圖測試更有效，熱圖測試只能讓我們大致了解用戶的關注點在哪裡。 這清楚地向我們表明，要么頁面佈局有問題，要么內容本身標籤不佳且令人困惑。

讓我們仔細看看屏幕底部和我們必須使用的路徑數據：

• 藍色圓圈表示預期的交互，
• 紅色鑽石像徵著意想不到的互動，
• 橙色方塊表示參與者請求幫助。

這向我們展示了預期的成功路徑是什麼樣的，以及平均需要多長時間才能完成。

您可以單擊“Alt”的統計信息。 Success Path”和“Failed Path”查看其他參與者的情況：

當我們在成功標準方面留有餘地時，我們就有機會看到替代的成功路徑。

出於幾個原因，這很有用。 首先，如果有足夠多的用戶選擇了相同的路徑，並且比成功路徑上的用戶多，那麼完全重塑路徑可能是值得的。 如果替代路線更合乎邏輯且更有效，那麼擺脫人跡罕至的路徑將是有意義的。

其次，替代的成功路徑和失敗的路徑向我們展示了沿途發生摩擦的地方。 這使我們能夠看到我們的用戶真正的突破點在哪裡。 並不是說我們想要將我們的用戶推向邊緣，但是了解哪些類型的交互不起作用是件好事。

例如，假設其中一個按鈕需要右鍵單擊而不是常規單擊。 我知道這是我在某些工具中遇到的問題，它讓我發瘋，因為它幾乎總是出乎意料且違反直覺。 我不會放棄對它的體驗，但您的用戶可能會。

因此，通過將替代的成功路徑與失敗的路徑進行比較，您可以更容易地找出這些類型的交易破壞者。

看得更深一點

我知道數字和途徑步驟非常重要，但不要忘記研究參與者留下的其他信息。

例如，如果您的用戶啟用了瀏覽器錄製功能，您可以“播放視頻”並觀看他們實際播放的視頻。

如果沒有，您仍然可以使用“查看路徑”鏈接查看他們採取的實際步驟（如果它們不是預期的藍圈步驟）。

這是您將看到的每個測試對象的內容：

此特定視圖可能比視頻對您更有用，因為您可以跟踪每個靜態頁面上的實際點擊次數。 您不僅可以看到他們點擊的網站的每個部分，還可以看到他們點擊的順序。

就像我之前說的，如果你能確定這些替代的成功路徑或失敗的路徑帶走了你的用戶的趨勢，你就可以更快地消除網頁設計中的問題。 只有當這些點擊無處不在或用戶放棄完成任何任務時，您才會遇到真正的問題。

包起來

使用設計系統並不自動意味著良好的可用性。 您需要能夠設計的不僅僅是始終如一的漂亮 UI。

這就是我們剛剛看到的解決方案的好處所在。 通過 Indigo.Design 中內置的可用性測試，重點不僅僅在於交付像素完美的網站。 無論您計劃進行有節製或無節制的可用性測試，您現在都有一個工具可以準確地映射用戶的旅程以及他們將面臨的困難。