UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability...
-
Upload
ariel-heath -
Category
Documents
-
view
214 -
download
1
Transcript of UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability...
![Page 1: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/1.jpg)
UI Designwireframe
![Page 2: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/2.jpg)
Things to add next time
• discuss the 4 aspects from the readings– Learnability– Simplicity– Efficiency– Asethetic
![Page 3: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/3.jpg)
Model Hierarchy
component architecture data architecture
analytical models/prototypes
architecture
specification
UIUIfunctionalinterfaces
external dataspecification
componentrequirements
component design
design
![Page 4: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/4.jpg)
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
![Page 5: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/5.jpg)
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
![Page 6: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/6.jpg)
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
![Page 7: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/7.jpg)
UI Design
Too much Too little
![Page 8: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/8.jpg)
UI Experience
As pairs list:
• 5 Good Designs
• 5 Lousy Designs
![Page 9: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/9.jpg)
UI ExperienceAs 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
![Page 10: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/10.jpg)
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
![Page 11: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/11.jpg)
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
![Page 12: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/12.jpg)
Tic Tac Toe
Use cases:
1. Start game
2. Play game
3. Take turn (sub-case of 2)
4. Save game
5. Reload saved game
6. Play new game
![Page 13: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/13.jpg)
1. Select Play from main menu
2. Take turn
3. If three in a row player wins (win use case)
4. AI responds with 0
5. If three in a row player loses (lose use case)
6. Repeat from 2.
Elaborated use cases includes cognitive aspects as well as UI components
UI component
![Page 14: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/14.jpg)
1. Select Play from main menu
Loads of FunFast Paced Adventure
Play Load Quit
wireframe
![Page 15: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/15.jpg)
Task: Play game
1. Select Play from main menu
2. 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.
3. Click empty square to enter X
4. If three in a row player wins (win use case)
5. AI responds with 0
6. If three in a row player loses (lose use case)
7. Repeat from 2. Elaborated use cases that includes cognitive aspects as well as UI components
cognitive process
Take turn
![Page 16: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/16.jpg)
Play game, take turn
New
Load
Quit
Save
Click square
wireframe
![Page 17: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/17.jpg)
Lose game
New
Load
Quit
Save
You lose!
wireframe
![Page 18: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/18.jpg)
Assess
tasks
Loads of FunFast Paced Adventure
Play Load Quit
wire frames
EXPERT EVALUATIONSUSER TESTS
![Page 19: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/19.jpg)
User Test
User: Play a game of Tic Tac Toe
• Do they know what to do?
New
Load
Quit
Save
Click square
click? what my fingers?
square? like the red one?
![Page 20: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/20.jpg)
User Test
User: Play a game of Tic Tac Toe
• Do they know what to do?
• Do they know how to do it?
New
Load
Quit
Save
Hmmm I’m using thearrow keys but I
don’t see a cursor. How am I supposed
to make an X.
![Page 21: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/21.jpg)
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
![Page 22: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/22.jpg)
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!
![Page 23: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/23.jpg)
tasks
Loads of FunFast Paced Adventure
Play Load Quit
Different UI Designs
USER TEST
Problems redesign
![Page 24: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/24.jpg)
Users’ conceptual model
• Especially important for novice users
• Especially important for educational games
![Page 25: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/25.jpg)
tasks
Loads of FunFast Paced Adventure
Play Load Quit
Different UI Designs
USER TEST
Problems redesign
You will user test yourselfYou will user test another teamYour user test may be videotaped
![Page 26: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/26.jpg)
Phase 2
• UI Design & Test
• Implement as much as you need for alpha
![Page 27: UI Design wireframe. Things to add next time discuss the 4 aspects from the readings –Learnability –Simplicity –Efficiency –Asethetic.](https://reader035.fdocuments.us/reader035/viewer/2022062713/56649ccf5503460f9499a5c4/html5/thumbnails/27.jpg)
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