調查結果頁面具有清晰的層次結構

調查結果頁面具有清晰的層次結構

將超過20個調查問題分組,配有明確的未讀標記和頂部標籤欄以方便切換,改善了移動體驗。

概述

概述

簡介

玩轉 Verto,是一個來自英國的遊戲化數據收集平台。此次重新設計項目的主要目標是為行動裝置優化調查結果頁面,通過精簡多個問題、提供更豐富的見解,以及在有限的屏幕上直觀地比較個人與公共數據。

角色

作為UI/UX設計師,我分析了客戶的目標,並將其重新構建為以使用者為中心的問題。我設計了一個適合移動設備的佈局,並重新編排內容以提高可用性、可讀性和可發現性。

期間

5 個月

本作品集中顯示的螢幕僅供示範使用,並不代表實際專案介面。所有權利均屬於原所有者。

需求 → 問題啟發評估 → 問題點 → 解決方案

需求
→ 問題診斷評估
→ 問題
→ 解決方案

需求 #1

檢視手機版的多個問題

需求 #2

優化篩選功能

優化篩選功能

需求 #3

獲取數據洞察

獲取數據洞察

啟發式評估

靈活性與使用效率

問題一

過度滾動
失去上下文

啟發式評估

系統狀態的可見性

問題 #2

隱藏篩選器
不明確的應用狀態

啟發式評估

系統與真實世界的一致性

問題三

同步圖示
誤導性的互動

解決方案#1

分塊的問題與未讀的提示

將問題分解成易於理解的部分,並顯示未讀指示器,以減少認知負荷。

解決方案 #2

具有清晰狀態的關鍵過濾器

將常用的過濾器放在第一層,並對活躍狀態提供明確的反饋。

解決方案 #3

澄清數據訪問,推動探索

將模糊的同步圖標替換為我/其他人切換按鈕,並添加預覽見解以推動探索。

高效的行動裝置問卷瀏覽

高效的行動裝置問卷瀏覽

頂部標籤欄可快速切換,並將 20 多個調查問題分組,配有清晰的未讀標記。

頂部標籤欄可快速切換,並將 20 多個調查問題分組,配有清晰的未讀標記。

問題

行動裝置使用者發現難以查看和導航多個問題,這導致認知過載和較低的完成率。此外,問題的可見性不完整和缺乏明確的進度指標,降低了清晰度和參與度。

挑戰

早期的線框圖為每個圖表提供了引人注目的封面照片,並將相關問題捆綁在一起以激發使用者的興趣。雖然這提升了情感吸引力,但也帶來了重大的缺點:

  1. 內容策劃需要高強度的人工投入

  1. 增加的開發複雜性和成本

解決方案

重新設計了調查結果頁面,將下拉選單替換為分組標籤,將超過20個問題分解為易於消化的小塊。這不僅減少了垂直滾動和認知負荷,還通過完整的問題文字和未讀指示提高了清晰度,指引使用者探索未瀏覽的區域。

簡化複雜數據以獲得無縫的見解

簡化複雜數據以獲得無縫的見解

優化的篩選器和比較功能,確保所有裝置上的見解清晰且具有擴展性。

優化的篩選器和比較功能,確保所有裝置上的見解清晰且具有擴展性。

問題

多樣的數據類型讓結果難以閱讀和萃取洞見,同時使用者還需要跨多個有價值的數據集進行比較。

解決方案

調整了界面過濾器,使選擇的選項更加清晰;引入了一鍵比較功能,並預覽見解以突顯主要差異;精簡按鈕層次結構,以強調主要動作;建議將主要按鈕標籤從“更多信息”更改為“分享結果”,以更好地符合產品激發使用者好奇心並促進數據互動的目標。

學習

學習

認識重新設計過程中的限制,例如現有的材料或技術限制,是順利開發的關鍵。在腦力激盪中,產生多個構想並至少提出兩個方案,有助於利害關係人比較不同的方法;即使不是所有方案都被採用,強大的要素亦可結合起來激發更好的解決方案。

五個人在桌邊觀察開啟的白色 iMac 電腦
五個人在桌邊觀察開啟的白色 iMac 電腦

讓我們攜手合作成為UIUX夥伴。歡迎分享與交流想法!

讓我們攜手合作成為UIUX夥伴。歡迎分享與交流想法!

讓我們攜手合作成為UIUX夥伴。歡迎分享與交流想法!