1 / 27

UI Design

UI Design. wireframe. Things to add next time. discuss the 4 aspects from the readings Learnability Simplicity Efficiency Asethetic. Model Hierarchy. architecture. component architecture. data architecture. analytical models/ prototypes. specification. external data specification.

ginger
Download Presentation

UI Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. UI Design wireframe

  2. Things to add next time • discuss the 4 aspects from the readings • Learnability • Simplicity • Efficiency • Asethetic

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

  4. Properties of good UI design • Familiar and consistent – easy to learn • familiar contexts, objects, actions • consistent icons, positions, styles, metaphors • Intuitive and understandable • current context is clear (middle school) • available actions obvious • all important information is obvious • enjoyable

  5. Properties of good UI 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. Process of UI Design • Identify needs and establish requirements • Develop alternative designs that meet requirements • Build prototypes of the UIs • Test and Evaluation of UIs

  7. UI Design Too much Too little

  8. UI Experience As pairs list: • 5 Good Designs • 5 Lousy Designs

  9. UI Experience As pairs list: • 5 Good Designs • iPad tools interface • Direct TV recording • 5 Lousy Designs • Portal • VCRs • AC controls at school, actually any AC controls • Southwest Airlines notification method

  10. GOMS Used as a model for analysis of UIs • Goals – what the user intends to accomplish • Operators – actions to accomplish Goals (cognitive, physical, perceptive) • Methods - sequence of operators to accomplish goal • could be more than one method for a goal • Selection - different ways of doing the same thing, i.e., different methods

  11. GOMS Procedure • Select user goals • 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 • Issues in GOMS • user behavior being affected by fatigue, social surroundings, or organizational factors. • apply to experts, not novices...user suppose to know what to do

  12. Tic Tac Toe Use cases: • Start game • Play game • Take turn (sub-case of 2) • Save game • Reload saved game • Play new game

  13. UI component • Select Play from main menu • Take turn • 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 includes cognitive aspects as well as UI components

  14. Tic Tac Toe Loads of Fun Fast Paced Adventure Play Load Quit Select Play from main menu wireframe

  15. Task: Play game cognitive process • Select Play from main menu • Choose empty square with goal of (a)creating 3 X’s in a row, or (b)stopping opponent from making 3 O’s in a row. • Click empty square 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. Take turn Elaborated use cases that includes cognitive aspects as well as UI components

  16. Play game, take turn wireframe New Load Save Quit Click square

  17. Lose game New wireframe Load Save Quit You lose!

  18. Tic Tac Toe Loads of Fun Fast Paced Adventure Play Load Quit Assess EXPERT EVALUATIONSUSER TESTS tasks wire frames

  19. New Load Save Quit Click square 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?

  20. 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

  21. 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

  22. 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 yours!

  23. Tic Tac Toe Loads of Fun Fast Paced Adventure Play Load Quit Different UI Designs tasks USER TEST redesign Problems

  24. Users’ conceptual model • Especially important for novice users • Especially important for educational games

  25. Tic Tac Toe Loads of Fun Fast Paced Adventure Play Load Quit Different UI Designs tasks You will user test yourself You will user test another team Your user test may be videotaped USER TEST redesign Problems

  26. Phase 2 • UI Design & Test • Implement as much as you need for alpha

  27. 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

More Related