UI Design

component architecture Model Hierarchy architecture component architecture data architecture analytical models/ prototypes specification UI functional interfaces component requirements external data specification design component design

Importance of UI UI design can make or break an application.

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

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

UI Design Too much Too little

GOMS Goals (use cases) Operators (mental, physical, …) Methods (sequence of operators) Selection (different ways of doing the same thing)

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

Tic Tac Toe Use cases: Start game Take turn Save game Reload save game Play new game

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

Splash screen Tic Tac Toe Loads of Fun Fast Paced Adventure Play Load Quit wireframe: screen mockup

Play game, take turn New Load Quit Save Click square

Play game, take turn New Load Save Quit Click square

Lose game New Load Save Quit You lose!

Assess Tic Tac Toe EXPERT EVALUATIONS USER TESTS tasks Play Load Quit Loads of Fun Fast Paced Adventure Play Load Quit wire frames

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

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

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

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!

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

Users’ conceptual model Especially important for novice users Especially important for educational games

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

Agile UI development Does not lend itself to iterative design Page 1

Agile UI development User-centered design Agile development Page 1

Phase 2 UI Design & Test Implement as much as you need for now

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