Download presentation
Presentation is loading. Please wait.
1
UI Design
2
component architecture
Model Hierarchy architecture component architecture data architecture analytical models/ prototypes specification UI functional interfaces component requirements external data specification design component design
3
Importance of UI UI design can make or break an application.
4
Properties of good design
Familiar and consistent familiar contexts, objects, actions consistent icons, positions, styles, metaphors Intuitive and understandable current context is clear available actions obvious all important information is obvious
5
Properties of good design
Simple and convenient user doesn’t have to remember too much doesn’t overwhelm user with info anticipates needs but doesn’t force down path Helpful and robust error response meaningful help when user is lost Adaptable and configurable supports different users/goals
6
UI Design Too much Too little
7
GOMS Goals (use cases) Operators (mental, physical, …)
Methods (sequence of operators) Selection (different ways of doing the same thing)
8
GOMS Procedure Select user goals (use cases) Choose interface design
Write out procedures user must learn and execute Assess design informal: unneeded complexity, slow or difficult steps formal: calculate predicted times to learn/execute
9
Tic Tac Toe Use cases: Start game Take turn Save game Reload save game
Play new game
10
Task: Play game Select Play from main menu
Take turn Select Play from main menu Choose empty square to make 3 in a row or stop opponent from making 3 in a row. Click to enter X If three in a row player wins (win use case) AI responds with 0 If three in a row player loses (lose use case) Repeat from 2. Elaborated use cases but includes cognitive aspects as well as UI components
11
Splash screen Tic Tac Toe Loads of Fun Fast Paced Adventure Play Load
Quit wireframe: screen mockup
12
Play game, take turn New Load Quit Save Click square
13
Play game, take turn New Load Save Quit Click square
14
Lose game New Load Save Quit You lose!
15
Assess Tic Tac Toe EXPERT EVALUATIONS USER TESTS tasks Play Load Quit
Loads of Fun Fast Paced Adventure Play Load Quit wire frames
16
User Test User: Play a game of Tic Tac Toe Do they know what to do?
click? what my fingers? square? like the red one? New Load Quit Save Click square
17
arrow keys but I don’t see a cursor. How am I supposed to make an X.
User Test User: Play a game of Tic Tac Toe Do they know what to do? Do they know how to do it? Hmmm I’m using the arrow keys but I don’t see a cursor. How am I supposed to make an X. New Load Save Quit
18
User Test User: Play a game of Tic Tac Toe Do they know what to do?
Do they know how to do it? Compare different UIs
19
User Test User: Play a game of Tic Tac Toe Do they know what to do?
Do they know how to do it? UNDERSTAND CONCEPTUAL MODEL OF YOUR APPLICATION: it is not likely to be the same as your!
20
Tic Tac Toe Different UI Designs tasks Play Load Quit USER TEST
Loads of Fun Fast Paced Adventure Play Load Quit USER TEST redesign Problems
21
Users’ conceptual model
Especially important for novice users Especially important for educational games
22
Phase 2: You will user test Phase 3: You will user test
Different UI Designs tasks Tic Tac Toe Loads of Fun Fast Paced Adventure Play Load Quit Phase 2: You will user test another team Phase 3: You will user test 6th – 7th graders USER TEST redesign Problems
23
Agile UI development Does not lend itself to iterative design Page 1
24
Agile UI development User-centered design Agile development Page 1
25
Phase 2 UI Design & Test Implement as much as you need for now
26
Exercise Choose a mid-level goal for your game
Construct an elaborated use case incorporating cognitive aspect Come up with an initial UI design Assess it
Similar presentations
