UI/UX CCUeat

為中正大學學生設計的飲食健康記錄APP
註冊
聯絡我們
黃姿婷林柏宇蔡婷伊趙韋淳莊于瑩
粉正點
註冊

動機、設計使用者調查 UI設計、功能
User Test
情境、任務
Pros & Cons
1構想 2準備 3執行 4分析 5結論
Contents
動機、設計使用者、市場調查 UI設計、功能
User Test
情境、任務、訪談
Pros & Cons

01構想動機_大學生
• 外宿
• 外食
• 《大學生體型和健康自覺與
飲食習慣之相關分析》

01構想動機_健康意識的抬頭

01構想動機_熱量控制
為什麼是熱量？使用者調查

01構想 APP
粉正點
粉正點
• 台灣用戶下載意願高
• 具有多元化、個性化的管
理
• 使用者體驗高、實用性、
可靈活運用
• 使用者群體較大，可較高
效的推廣

01構想設計研究方法步驟
曾經使用過熱量紀錄APP
「未」曾使用過熱量紀錄APP
使用者調查
原型設計
Adobe XD
訪綱擬定
任務設定
原型測試
（放聲思考法）
滿意度調查
半結構式
訪談法
SUS系統易用性
量表

02準備使用者、市場調查
簡易人物誌
客群分析
使用者痛點與功能規劃
競品分析

02準備 2.客群分析
•有使用過飲食app
•對於自我健康意識較高
•習慣會記錄飲食的營養資訊
•飲食前會考慮餐點營養相關資訊
•平常不考慮營養資訊會選擇均衡飲食
•主動找尋飲食相關知識學習如何正確飲食

02準備 2.客群分析
Roles Demogr
aphics
Psychographics Experience
使用者a 女生、
23歲、
大學
因重視健康和體重
管理，而想了解每
餐飲食的資訊
使用過記錄卡路里的app，
認為已經很方便了但資訊、
種類不夠齊全，所以除了使
用app外還是會自己上網找
更多資訊。
使用者b 男生、
26歲、
碩士
因有健身習慣，需
要控制飲食而想了
解每餐的飲食資訊。
使用過與訪談者A一樣的app，
沒有像訪談者A一樣記錄的
很詳細，因為有時候app內
找不到資料時，就不會記錄
了，但還是會參考app內提
供的資訊。認為app很好用，
只是資料庫不夠齊全。

02準備 3.使用者痛點與功能規劃
User Needs Client Needs
Who
中正大學在校學生
人口統計描述
1.外食頻率高(3餐皆外食)
2.每周運動次數至少1次以上
3.父母教育程度較高(高中、大學)
4.每月平均可用金額為5000-10000元
5.住校內宿舍，不與家人同住
Who
中正大學附近的餐飲店家
1.有意提供餐點營養成分
2.希望透過合作吸引更多
對健康有意識且注重飲食的顧客

User Needs Client Needs
Needs
• 使用者的飲食需求
•
提供餐點(菜色/熱量/價格)
• 詳細的店家分類(大吃/中吃/小吃)
與店家資訊(地址/電話營業/時間
等等)
• 提供餐點營養成分(蛋白質/澱粉等)
• 透過程式紀錄每餐食用熱量(每週)
• 輸入食物相關資訊便能算出熱量
Needs
• 餐飲店家
• 提供店家基本資料以利於用戶查找
• 上架菜單及餐點資料提供用戶選擇
• 標示餐點價格與熱量方便用戶查詢
• 建立篩選系統以利用戶用種類查找
• 紀錄用戶資料提供數據給後臺優化
意識且注重飲食的顧客

Content Functionality
姓名:
使用者名稱(文字)
頭貼:
使用者相片(圖片)
熱量百分比:
數字顯示已吃與能吃之
熱量
本日記錄:
文字顯示累積熱量與餐
點名稱
本週紀錄:
數據折線圖顯示當週累
積熱量
記錄:
可記錄每日、每月的熱
量，並匯出成圖表供使
用者參考。

基本資料(文字):
身高、體重、性別、年
齡、壓力因子、工作
量。
每日所需熱量(數字):
透過上述用戶資料計算
而成
計算:
透過個人基本身體資訊，
計算每天所需熱量，幫
助使用者清楚每天的熱
量消耗。

狀態顯示列(文字):
選擇/數量/Kcal/價錢/餐
點/刪除鍵
加入比較(圖片/方塊):
顯示店家/數量/熱量/
價格/名稱/餐點
比較清單內餐點數:
(數字浮標)
比較/記錄:
從搜尋結果中將納入參
考的餐點加入到此頁面，
使用者可比較或紀錄熱
量、價錢、菜色等資訊

地區/類別/卡路里/店
家(文字):
被選取之數值會使用粉
紅色顯示
品項(圖片+文字):
將游標移至品項遮色片
便會消失
搜尋:
提供三種搜尋方式，分
別為地區、類別、卡路
里，被選取之數值用粉
紅色顯示，選取數值呈
現之資訊有店家與品項
(圖片)，店家部分可連
結至店家主頁面，而點
擊品項會跑出「餐點比
一比」或「記錄個人熱
量」兩個功能。

辨識掃描(條碼/熱量):
以按鍵形式呈現提供用
戶做選擇
右下角方框 (照片)
以照片形式呈現提供用
戶選擇個人相簿
掃描:
提供要吃便利商店的使
用者，可以直接掃描條
碼取得詳細飲食資訊，
或是直接從餐點獲得熱
量

02準備 4.競品分析
客群
FoodyLife
吃貨人生
吃貨主義者追求營養均衡卻不想被熱量數字束縛
FatSecrt
卡路里計算機
重度外食族最愛連鎖餐飲品牌
MyFitnessPal
卡路里計算
想呼朋引伴增加執行動力者
薄荷健康追求精準身體密碼自我要求嚴格者

03執行原型介紹
粉正點
加入頁面首頁個人頁比較清單篩選掃描關於我們
登入
註冊
基本資料填寫
名稱
建議熱量
已攝取熱量
本週紀錄
本日紀錄
品名
價格
數量
餐點照片
地區
類別
熱量
店家資訊
從相簿選圖片
熱量辨識掃描
訂購專線
店家地址
營業時間

03執行功能設計_加入頁面

03執行功能設計_基本資料填寫
• 臥床躺著不動
• 幾乎很少或坐著沒運動
• 每週運動1-2次
• 每天重度運動或重勞力者
• 正常無疾病
• 發燒
• 住院患者
• 懷孕
• 小手術

03執行功能設計_篩選頁面

03執行功能設計_掃描頁面

03執行功能設計_比較清單

04分析 User Test
受測者背景
A女 B女 C女
AGE 23-27
中正大學
研究生、大學生
1. 飲食控制者 2.想控制飲食者 3.無特定飲食控制者

04分析 User Test
測試前規劃
地點: 社科院 LAB 2
時間: 30-40 min
硬體: 手機、觸控平板
軟體: Adobe XD 模擬器
測試設計: 情境+任務導向
測試方法: 放聲思考法+讀出情境、觀察法、
半結構訪談、滿意度問卷、SUS

04分析 User Test
粉正點 Ver.1
測試方法
A女 B女
粉正點 Ver.2
C女

04分析 User Test
測試步驟
APP測試說明→開始測試→填寫滿意度問卷→測後訪談

04分析 User Test
測試步驟
測試粉正點ver1.（APP測是說明→開始測試→填寫滿意度問卷→測後訪談）→
小組討論→檢討APP及任務→修改任務及APP→測試粉正點ver2.

04分析情境、任務
剛下課，小美與她的朋友一邊收
拾東西，一邊討論著午餐要吃什
麼，有人提火鍋、有人提滷味，
不過小美最近吃了太多大餐，所
以她想要找到便宜又低熱量的餐
點，經過一番討論後，還是沒有
結果，此時，同學小明說：「我
最近有在用一款APP，叫『粉正
點』，它可以讓我們比較餐點熱
量跟價錢，推薦你們使用」，小
美：「好啊，我來下載」。

由於小美是第一次使用，因此他
先註冊了一組新帳號，並完成基
本資料的填寫(點擊方框會自動鍵
入資訊)，而小明是第一次使用，
因此他直接登入帳號，進到首頁。
請告訴我們
小美每日所建議的攝取熱量是多
少卡: ______________ Kcal
任務01

小明簡單向小美敘述APP的操作方
式後，小美這週都會用APP的篩選
功能進行餐點的熱量比較。

某天早上，小美從大吃的租屋處
出發要到學校上課，她想在離家
不遠處的早餐店買早餐，然後希
望熱量負擔不要太大，盡量控制
在100大卡以內，小美用篩選功能
來找店家，於是她選擇了「歐伊
系」並找到了抹茶蛋餅，小美把
抹茶蛋餅加進了每日熱量紀錄中。
任務02

此時，電話響起，室友小冰請小
美順便幫他去中吃的布格買早餐，
小美心想，如果不快一點，可能
會來不及上課，所以小美用app找
到店家布格的電話。
請告訴我們
布格的電話是: ______________
任務03

中午上完課後，小美與朋友想一
起吃午餐，小美剛好有兩家想吃
的店，而且他想吃大約300-400卡
的餐點，後來她選擇的中吃「吉
多多」的鮪魚蛋餅以及小吃「123
早餐屋」的起司蛋餅，於是小美
再次使用APP的篩選功能，將這兩
樣蛋餅一併加入比較。
任務04

小美到比較清單比較了兩家店的
蛋餅後發現兩個熱量差不多，所
以她又看了一下價錢決定選擇價
錢較低，兩個當中熱量較高一點
點的餐點，小美覺得午餐吃一份
蛋餅可能吃不飽，所以打算吃兩
份蛋餅，把午餐加進紀錄後，小
美到首頁查看他今天吃了多少熱
量。
請告訴我們
小美本日吃了多少卡: __________ Kcal
小美本週吃了多少卡: __________ Kcal
任務05

晚餐時間到了，小美在思考要吃
甚麼，後來她決定要去民雄市區
吃。

小美先清空早上的比較清單記錄，
後來他決定要去民雄吃花亭壽司，
餐點來之後，小美用粉正點的熱量
辨識掃描功能拍了他的餐點，得到
餐點的卡路里資訊。
請告訴我們
甘蝦握壽司多少卡: __________ Kcal
生鮭魚握壽司多少卡: __________ Kcal
炙燒鮭魚握壽司多少卡: __________ Kcal
任務06

夜晚的來臨，使得小美飢腸轆轆，
但由於假日中正附近的店家都沒
有營業，於是他走到了全家。

小美買了番茄奶油燻腸焗飯，他
打開了條碼辨識掃描功能，掃了
餐點上的條碼，把番茄奶油焗飯
的卡路里加進紀錄。
任務07

測試現場

04分析訪談
完成各任務所花費的時間
量性分析
在各任務上出現的錯誤
滿意度調查
易用性調查

04分析訪談
介面美觀程度
質性分析：半結構式訪談
上手程度
使用動機
痛點(覺得需要改進的地方)
未來建議

04分析訪談
介面美觀程度
質性分析：半結構式訪談
上手程度
使用動機
痛點
未來建議
A B C
難上手難上手好上手
一個字：美
會想繼續用會想繼續用不會想繼續用
店家電話熱量400卡以下店家類型區分
社群、地圖各國料理類別記帳功能

05結論優缺點
優
點
1.版面簡約
2.介面操作一致性 ( 高
3.定位與現有相關 APP 有所區隔，未來可以複製此模式至各大專學校
4.專為中正大學設計
5.提供使用者比較與篩選功能
缺
點
1.比較圖示不直觀，無法達到隱喻效果
2.店家資訊不明顯，導致使用者不知道該點選何處進行查看
3.使用者點選「加入紀錄」後，儘管於下方圖示處顯示記號，但使用
者仍未感受到其對應關係
4.提供給使用者的類別篩選分類方式與使用者預期有落差，造成使用
上的遲疑

05結論缺點可改善方向
問題類別所屬功能缺陷如何改善
UI 篩選
講到篩選的時候，都會不
清楚要點哪裡
icon 不清楚、沒辨識性
前導教學、提示框
功能篩選大卡區間應該要清楚明瞭修改 APP
UI
篩選
店家資訊
找不到布格的店
家資訊在哪裡
底線或粗體凸顯店家資訊
UI
任務
篩選蛋餅不好找每張圖片都要換一下

05結論缺點可改善方向
問題類別所屬功能缺陷如何改善
UI
功能
比較清單
比較清單、加入比較意義
並不明確。
改變名稱：餐點比一比
UI
功能
紀錄
不知道記錄要幹嘛，也不
知道要按哪個
UI
功能
紀錄
加進記錄，加入比較的名
字很含糊
改變名稱：記錄個人、熱
量
UI
功能
掃描
拍照和條碼太過模糊，不
知道要用哪個
前導教學、提示
或是我們的 app 設計問題

05結論
• 設計給中正大學學生可以記錄卡路里APP 。
• 飲食資訊的篩選、比較以及記錄功能。
• 且訪談結果顯示， APP 功能符合主要客群的需求，且在定位方面確實做
出差異化。
• 若後續想要完善此 APP ，除了針對 APP 不足之處做改進外，還可以增加
APP 的多元性，如：加入運動、社群或食記等功能。
結語

粉正點
註冊
聯絡我們
Thank You !

粉正點
註冊
聯絡我們
Q & A

UI/UX CCUeat

Recommended

Recommended

More Related Content

Similar to UI/UX CCUeat

Similar to UI/UX CCUeat (6)

UI/UX CCUeat