Please enable JavaScript.
Coggle requires JavaScript to display documents.
Chapter 11 User Interface Design (介面設計工作流程 (review分析模型中的資訊，並根據需求進行優化,…
Chapter 11 User Interface Design
Golden Rules
Place the user in control
替使用者減少不必要的操作 (e.g.拼寫檢查)
提供flexible interaction (e.g. 鍵盤、滑鼠)
減少使用者的memory laod
減少short-term memory的需求 (e.g. visual cues)
定義直觀的快捷鍵 (e.g. Ctrl+C )
介面的layout盡量base ond現實世界
介面盡量一致
盡量與同一系列的應用程式保持介面的一致
若過去的interative model用戶已經用的習慣了，就盡量不要修改 (e.g. Alt+S for saving a file )
User Interface Design Models
必須考慮到四個層面
User model
: 所有終端使用者的profile(by 工程師)
Design model
: user model的實現 (by軟體工程師)
Mental model (system perception)
: 用戶對介面的心理認知 (by終端使用者)
Implementation model
: the interface “look and feel” coupled with supporting information (by 實作者)
使用者介面設計流程
4個步驟
介面分析(Interface analysis)
介面設計Interface design)
介面建造(Interface construction)
介面驗證(Interface validation)
可以使用螺旋式模型+prototyping，以利與客戶溝通
Interface Analysis
內容
User analysis
說明
分析使用對象、identity user categories (分為沒有使用經驗的(Novices)、非常有經驗的人、介於中間的)
了解用戶、他們想要的是什麼(可透過User interviews、Sales input、Sales input、Support input)
Task analysis
說明 : 了解用戶為完成工作，所需執行的任務
分析技巧
Use-cases
: define basic interaction
Task elaboration
: refines interactive tasks (e.g. 磁磚材質、窗戶樣式)
Object elaboration
: identifies interface objects (classes)
Workflow analysis
: 描述涉及多人時的工作流程(使用Swimlane diagram )
Content analysis
: 了解在介面中要顯示什麼內容
Environment analysis
: 了解會在什麼環境下執行工作(e.g. 使用者手勢、使用者對環境的特殊要求)
Interface Design Steps
Define interface objects and actions (operations)
: 使用介面分析時所得到的資訊(寫下 use-case 進行分析)
Define events (user actions)
: 找出會導致使用者介面狀態改變的事件
Depict each interface state *
: 最終會向使用者呈現
Indicate how the user interprets the state of the system
: 使用者如何透過系統提示來得知目前的系統狀態
設計議題
Response time、Help facilities、Error handling、Menu以及命令標籤、Application accessibility(可在甚麼設備上運行)、Internationalization
WebApp Interface Design
三大問題
Where am I?
告知用戶她目前在content hierarchy中的哪個位置
What can I do now?
有哪些function可以用、有哪些url可以連、有哪些相關內容
Where have I been, where am I going?
The interface must facilitate navigation.讓客戶理解它目前所處的位置、如何移動到其他地方
介面設計工作流程
review分析模型中的資訊，並根據需求進行優化
開發出WebApp的layout草圖
將user objectives對應到特定的interface actions
定出與action相關的一組user task
替每個action Storyboard screen images
使用美學設計優化layout與storyboard
美學設計
不要害怕留白
凸顯重點
排版盡量由上到下，由左到右
可以的話盡量不用拉動卷軸
在設計layout時考慮到解析度、瀏覽器大小
Interface Design Patterns : 完整UI、頁面layout、表單與輸入、表格、搜尋等