Online Form

UI Flow / Wireframe / UI Design / Design Guide

產品簡述

起初以易用的問卷工具為產品發想的起點,逐漸發展為「表單」的構想-開發多種常用題型,供使用者組成適用的表單。例如滿意度調查、客訴表單、考核評估表等。此外,免費的問卷提供的題型較少,相對的,分析的象限也較侷限,因此本產品期盼能透過增加題型與線上即時數據分析,提供易於編輯、易於填寫、易於反饋的線上表單系統。

期間
2017/Jan - 2017/Jun

團隊
前端2位、後端2位、QA1位

My Role
UI Design,了解使用者需求,並將使用者語彙轉換成產品功能,規劃架構與流程、介面及規範

TingYeh | UI Designer

設計過程

Design Process

TingYeh | UI Designer

需求定義

Define Problems

使用者需要(User Requirement):

  • 簡潔的操作介面,常用與少用的工具要區分開來
  • 線上數據分析,分為預設與使用者自訂的深度分析
  • 可設定及時通知,掌握關鍵時刻

資訊架構

Information Architecture

TingYeh | UI Designer

操作邏輯流程

Logic UI Flow

TingYeh | UI Designer
TingYeh | UI Designer
TingYeh | UI Designer

主要畫面

Main Screens(Version one)

TingYeh | UI Designer
TingYeh | UI Designer
TingYeh | UI Designer
TingYeh | UI Designer

UX規劃的考量

避免意外狀況:讓使用者無法觸發錯誤

例如:
1) 問卷至少需要有一題題目,當使用者在編輯時,若刪除到僅剩一題,刪除按鈕則沒有作用。
2) 若設定跳題,則被設定為要跳過的題目也不允許刪除。
3) 尚未發佈前則不顯示連結,避免出現空白畫面。

動機較不明確時告知使用者,讓使用者自行決定

例如:尚未儲存就離開,不能確定使用者是忘記儲存,或是想要放棄此份問卷的編輯。

引導使用者

例如:尚未使用(設定)時的提示、系統發生錯誤時的說明等。(更多畫面)


Design Guideline

TingYeh | UI Designer

UI Components

TingYeh | UI Designer

使用者測試

請受試者執行問卷任務,並採用放聲思考方式,將所想的立刻說出來。施測者計算花費時間,並觀察使用者在操作中的情況。

TingYeh | UI Designer

第一位受試者測試時每一題都思考比較久顯得很沒自信,對題型相對應的樣子似乎不太能掌握。測試後他表示本次測試有點緊張,但他認為介面很單純簡單,流程也很便捷,下次再用就很有自信。認為不只有首次使用才需稍微學習,下次使用就不需使用成本了。

TingYeh | UI Designer

第二位受試者測試時明顯很俐落,很快能完成任務。測試後他表示由於介面很輕巧,大概第二題就能了解整個介面的基本操作模式了。也覺得不太需要學習成本。

TingYeh | UI Designer

第三位受試者的使用情況介於前兩位受試者之間,某幾題很快完成,也很有自信,但有些題型探索很久,思考該選哪種題型來邊寫題目,例如矩陣題,對於這個詞彙明顯感到陌生。另外,對於「發佈」的概念明顯很困惑。

重新定義設計 & 優化

Redefine

在測試中發現三位受試者均有「看到題型名稱,不能聯想到題型的模樣,因此需要看過所有題型才能做判斷。」及對於流程中重要步驟「發佈」,不能很明確地了解用意,因而忽略執行。因此在下一階段將進行迭代式精進:


1.題型的預覽

增加功能:選擇題型時可預覽題型的模樣

2.調整設定流程與佈局

調整設定流程,凸顯「發佈」的重要性

重新設計:題型架構與配置

首先,為了減少使用者選擇時的心智負荷,我們將原先第一層選單的14項重新整理成9大項,並重新思考題型的名稱是否能更貼近使用者的認知。於是將原先「矩陣」題型更名為「題組」;將原先「文字方塊」題型更名為「問答」;並把較少使用的題型調整至「特殊題」的次選項內。


TingYeh | UI Designer
TingYeh | UI Designer

其次,在使用者測試時,我們觀察到使用者在填寫題目,並填內選項後,接著選擇題型時會造成系統清空選項資料的情況。於是優化也會調整介面配置:將題型與題目的位置對調,提升操作的便捷性。


TingYeh | UI Designer
TingYeh | UI Designer
TingYeh | UI Designer
TingYeh | UI Designer
TingYeh | UI Designer

重新設計:發佈流程

重新整理設計完表單後的使用行為,將「發佈」的按鈕從「設定」頁籤中的一頁內獨立為第一層級的按鈕,凸顯重要性。


Next Pjoject

AnswerMe官方網站