使用者介面設計與評鑑
===

###### tags: `courses meow`

:::info
:::spoiler click to open TOC
[TOC]
:::

## 使用者介面應該達到的目標
### 使用者經驗的目標
- 較為主觀
- e.g. 亞洲人喜歡淡黃色，英國人覺得淡黃色太亮
- 需要為不同客群特別設計
- 即為使用者使用上的體驗
- 使用者對這項產品應有什麼樣的期待
#### 要達到的目標
- 令人滿意的
- 具有美感的
- 要有目的性的
- 驚喜的
- 享受的
- 有娛樂性的
- 有幫助的
- 互動性的
- 有回報的
- 避免白做工的感覺
#### 應避免的目標
- 挫折的
- 在使用上感到難用、不知道怎麼用
- 失望的

### 使用者可用性的目標
- 較為客觀的
- Do the right thing(Effective)
- 達到任務
- Do thing right(Efficient)
- 具有成本上的考量
- 避免浪費時間、金錢
- 安全的
- 功能多寡(Utility)
- 學習性
- 避免花費太多時間去了解系統使用
- 避免讓人忘記如何使用
- 腳踏車學了就不會忘
- 即使學了機車還是知道怎麼騎腳踏

# 提問
- facebook
- Easy to learn
- 老年人?
- Efficient

- Gmail
- Efficient
- Have a good utility
- Yahoo news
- Effect to use
- Safe to use
- 使用者在 use 的過程中並不會感受到個資被取用的問題
- Google meet
- Easy to learn
- 有點道理
- 真的
- Have good utility
- Google Scholar
- Efficient

- Easy to remenber how to use
- 1⃣️ 我覺得就是因為使用頻率不高，他不會讓使用者忘記才是重要的
- 我想順便說
- 之所以不會有個資安問題，是因為google設計的不會有這個問題，Google大可以設計的變成個資很危險，搜尋功能方便也是
- 我就是指說，之所以不用學，是因為google設計得很簡單
- 所以我覺得重要阿XD
- 因為這件事重要，google才會設計的簡單
- 這東西根本不用學啊那不矛盾他說的 他說就是不重要
- 好吧你講講看 我找不到反擊的點
- 就是會被找出問題的點
- 反擊的點?什麼意思XD
- Youtube
- Easy to remenber how to use
- 相反 1⃣️， 使用率高，所以不會忘記
- 同意
- Efficent to use
-

### Norman
- Affordance
> 預設的用途指的是一個物品它實質上某些特質，能讓使用者直接了解其的用途。就材料而言，像玻璃提供了透明、可被看穿、易碎的特質。而物品的造形也有其特質，像是圓棒提供了握取的特質。但是預設的特質並不侷限於實質的物品，隨著今日軟體工業的發達，也衍生了許多大家所習慣遵循的法則，例如「視窗」及「捲軸」這些軟體中的物件都有它特定的操作方式與用途。另一個例子是滑鼠上面的按鍵就是表示這是可以按下的(並且會完成點選這個動作)[name=老師講義]

- Confgnifive
- 直接知覺論
- 看到一個什麼東西，就知道她如何操作
- 一個介面要透漏線索，讓使用者知道物件該如何操作、啟動
- 標示、設計的特色
- 直覺式的讓使用者知道如何操作
- 使用者感覺的跟實際的效果是類似的
- e.g.按鈕是可以按的、卷軸可以移動
- 使用者做一個操作達到他期望的結果
- Physical
- 根據相對的位置，來預測其他操作的行為
- 例如 copy 你就知道另外一個按鈕是 paste
- 例如 align top 你就知道另一個是 align bottom？
- Visibilty
> 讓使用者能一目了然地知道產品目前的狀態、及產品可能的操作方法與功能。反過來說，假使初次使用者無法由產品外觀看出該如何使用、或如何下手，錯愕與不便就產生了。因此，可視性的重點並不在於強調圖像化或視覺的表示方式，而是強調把產品設計的明顯易見，只要使用者一旦接觸到該產品，即時可得到產品功能與操作的提示。而不是靠令人眼花撩亂的標籤與說明。[name=老師講義]

- 電梯要拿卡刷機器 不刷電梯不會動
- 讓使用者知道他有什麼選擇、相關的東西放一起
- current choice
- 使用者知道現在的選擇
- current state
- 使用者知道現在的狀態
- e.g.數位學習系統，知道完成第幾章
- 現在要刷卡才能按電梯的按鈕要如何才能讓使用者知道
- 亮燈
- 聲音
- Mapping
> 這是有關於控制與所產生效果間的對應關係。也就是控制與效果間呈現一個良好的對應關係。因此，每一個操作動作都直接匹配到想要達到的功能，必須考慮到使用者控制、系統接受控制與真實世界所產生的結果之間的關係。藉由合理的對應性，人們可輕易地找出產品上的控制單元與它所影響的功能之間的關係。例如，以紅色和藍色分別來代表溫度的熱冷，這種對應關係是自然且能普遍被使用者認同的。另一個例子是鍵盤上個別的上與下的指示箭頭用來代表螢幕上游標的上與下的移動。[name=老師講義]
- e.g.根據電燈開關的位置，知道關掉哪裡的燈
- 更具現況對因他所在的東西
- 3個重點
- 使用者對他的控制
- 使用者對她的結果
- 控制過後，跟實際的結果是可行的
- e.g.燈關了就該熄掉
- 不符合叫 miss mapping
-
- Constraints
> 限制性乃是縮小操作的可行性，限制使用者的動作。也就是在特定的時刻限制使用者的互動或是發生的地點，例如，電腦與監視器的連結線用不同的形狀設計，使其能正確連接起來。在使用者介面上常見以灰色表示不能選擇的選單的操作功能，而使用者只能使用被限制下所允許執行的功能。[name=老師講義]
- 有階層式的
- 用之前就要告訴使用者限制，而不是用之後
- 有些限制是為了保護安全
- 告訴使用者，你現在可以做什麼、不可以做甚麼
- 線上測驗，要先輸入答案，才可以看到正確答案
- 三種限制
- physical 操作上的限制
- e.g.驗票口只有一個方向可以進去
- logical 根據你的常識
- e.g. 你開很多視窗 系統就會卡
- culreal 文化上的理解
- e.g.日期 日/月/年 月/日/年
- Feedbeck
> 將使用者執行一個動作的影響持續地反映給使用者知道，這包括了確認使用者的操作被該物品接收到、表示這個物品是否正在執行使用者的指令、以及將動作的結果訊息傳回給使用者知道。例如：按觸控式面板產生的「嗶聲、控制面板的燈示；及電腦計算時，視窗內360 度轉動的沙漏等等，這類將無形的訊息適時的呈現出來，在電子及資訊產品上亦顯得重要。[name=老師講義]
- 根據回饋知道下一個動作要做什麼
- 要給使用者一個輸出 告訴 user 什麼完成了
- 圖像、聲音、文字、hightlight
- 讓 user 知道3個東西
- where they being？？？
- where they go
- where they come???？？
- 要讓 user 知道3個東西
- 系統收到使用者輸入時要給回饋
- 系統的處理需要時間，要讓使用者知道我在等待
- e.g.進度條
- 系統在等待使用者的 input
- e.g.表單漏填了什麼
- 給 user 的東西要明確
- Consistency
> 一致性是指將界面設計為具有相似的操作，並使用相似的元素來完成相似的任務。一致的界面設計是遵循特定規則，例如使用相同的操作，選擇所有物件。舉個例子，一致性的互動使用相同的輸入操作來與界面上可視的物件進行互動，例如始終點擊鼠標左鍵。另一方面，一致性不高的界面會經常有規則之外的互動操作。[name=老師講義]
- 相似的任務用相同的操作
- 不會上上下下
- 2種一致性
- 內部一致性
- 同一個Application
- micrasoft設計的都長一樣 按鈕都在上方
- 外部一致性
- 不同Application
- ms ppt word 操作是相似的

## 3/10 作業

### 說明你們預計設計的簡介 (如：開發的環境、型式)
我們的靈感來自於蘋果發佈會的簡報，希望可以透過方塊的方式整理資料，使得資料有階層。大小來表示資料的重要性，並且告訴 user 這是一個階層比較深的內容。在 user 交互的方面，我們希望當 user 懸停時，方塊可以抖動，讓 user 知道這是可以點擊的。點擊以後，會將方塊放大，讓 user 聚焦在他所感興趣的內容。為了讓比較猴急的 user 一次看到所內容，我們將設計一個全部展開的按鈕。並且我們會在螢幕的上方增加一個麵包屑的功能，告訴 user 現在在什麼階層，若使用者在很深的階層，也可以直接點擊麵包屑的文字，跳回到首頁。

- 可以加個無障礙的方框？

### 描述 Norman 的 Interaction Design Principles 中的每一項準則將會如何被整合到你們將要設計的簡介
- Affordance
1. 抖動的方塊
2. 從方塊位置放大，讓 user 感受出階層
3. 2 個對稱的頭像，並且一暗一亮提示 user 現在看誰的資料
- Visibilty
1. 麵包屑 title 表示現在的階層
2. 若使用者點擊空白處非可點擊物件，會在可點擊的物件顯示藍色方框，提示user
3. ~~首頁就能看到所有會有什麼資料~~
- Mapping
1. 方塊大小 -> 階層深淺
2. 以色調來表示內容的屬性
3. 麵包屑階層可點擊，點擊就到那一層
- Constraints
1. 點擊後放大聚焦
2. 到自己頁面時，頭像是灰的不能再點，表示使用者已經在此頁
3. ~~不能 scroll 避免有些元素 不在畫面上 讓 user confuse 現在畫面是啥~~
- Feedbeck
1. hover & click 增加音效
2. 點擊方塊，文字會動畫移到麵包屑導覽列，告訴 user 開的是哪個方塊
3. ~~點擊方塊，會從方塊位置放大，告訴 user 開的是哪個方塊~~
- Consistency
1. 方塊的操作都相同，點擊就看內容
2. 所有操作都可以返回
3. 只有 2 種操作：
1. hover 看物件是否有 action
2. click 執行 action

## Nielsen heuristic（啟發式） evaluation

### H5 錯誤預防
是讓“使用者”不要有錯誤，不是我們系統不要有錯誤

### H6 辨識而非回想
URL、顏色、Email account

### H7
快捷鍵、
for 重度使用者
減少跟系統互動的次數
快速完成任務
區分新手及專家
新手簡便的畫面
專家 方便的工呢個

### H8 簡約的設計美學
吸引人的圖像及動畫 要與內容有關係
不是每個 user 都有高階的工能
高階功能分開放
不要讓畫面擁擠
要給一些 space

### H9 幫助使用者辨識
白話文解釋犯了什麼錯誤
提供 solution 如何從錯誤恢復
如果使用者沒輸入完整的資料
要告訴他哪個欄位錯了 錯了什麼
使用者操作記錄紀錄檔

### H10 文件
調查使用者的 Q&A FAQ
實用非理論

### 專家評鑑
受過訓練的專家來評鑑

<!--
所以Utility 是指功能多嗎?
實用性，有包含吧
了解!
他們都有票票的圖片QQ
發錯文很尷尬欸哈哈哈
哥 傳一下我們的 ppt tg
我覺得他們全部都本末倒置
之所以不會有個資安問題，是因為google設計的不會有這個問題，Google大可以設計的變成個資很危險，搜尋功能方便也是👍
為什麼它們的 safe 都是資安= =
我以為safe to use 是使用者操作誤觸之類的
可能都算嗎?我覺得都是?
這個人好會報告上一個？
現在這個 我覺得他的節奏頓點很舒服
畢竟是碩班生 應該要比我們厲害一點
畢竟被教授摧殘過?😆
你要問哪一個？
還是妳要2個
要問這麼多嗎？
一人問一個？
看起來是一組一個
那問題你要先講清楚欸

3/3
去 eeclass 把 3個 檔案載下來
助教剛剛有點名
其實我昨天有看過講義了XD
👍
Word要怎麼作互動性啊?
他說要符合NOorman
所以要有互動性?
沒看題目欸
做一份簡介？
一份符合Noeman設計心理學的互動性簡麗(介紹我們兩個)
word 也可以做簡單一點的吧
不然我們也可以來寫 HTML
我覺得可可👍
但等等 我發現一件事
task1好像是回家作業?
一組做一份
講義最後一業有Exersice
我考慮一下
我沒設計聲音 或是你口頭說點了會有聲音
我原本想說抖動的那些也可以算
好 我會稍微提到 但我不太想當主要的
so所以有配音麻？
這很重要那就配
然後 figma 可以做出讓使用者點擊、懸浮、滾動的操作
並且也可以做一些過渡的動畫
可以補充 看你
但補充就沒有用ＰＯＷＥＲＰＯＩＮＴ的裡由了（？
有道理
大家都用ＰＰＴ
沒上一組做網頁
我很抱歉
# 靠你這第2張 slide 我們要拿 A++++++++++++ 了

100000000000000000
133131
等等
為啥他是綠色
啥語法嗎
主題？
褲欸 我沒有

剛剛忘了講了 我們跟ppt 不同的是
使用者有更大的自由度去看裡面的內容
因為scrolling 讓使用者不只點擊而已
BTW 剛剛 ppt 字體沒改到????????

-》 有沒有辦法做到一個效果 滑鼠滾輪上就圖片網上滑動
這是啥
動作設定滑鼠滾輪上 然後葉面動畫界整體往上移動
方塊嗎？
對啊 scrolling 就是
對阿 我是說PPT感覺可以(?
真的假的
是不是要actionX 嵌入網頁
那有點醜
我想的是說
設計一張長條圖片
不要一次出現全版
然後action設定滑鼠滾輪上的時候 往上華
WHY？
或是 助教電腦沒有這個字體 我千的不完全(?
有可能
剛剛我清楚看到黑板 沒有
可能改了不清楚
自己做的？
在忙會想學C++
你不是 JAVA 派嗎
A+++++++++
對阿 但現在還很少東西
可是要打CPE
我記得CPE不只c/c++
有這回事嗎？
演算法對其實不會差很多
真的不然就不會用 JAVA 開發很多軟體了
有差 但沒差那麼多 也是啦
我以為是跨平台性跟穩定性的問題
完蛋
但C++比較好過吧XD
JAVA慢至少三倍吧(?
還是CCPE不看時間
真假 也是 常數時間
組員真他媽優秀
鬼之PPT
有啦 從 powerpoint 匯出圖片也行
不過禿想到
CPE的時候
C++
寫比較快吧
JAVA物件導向設計 程式碼都她媽常
不是
我們沒有真的要用兩種工具QQ
--!>