Mockups of dialog boxes designed for children as part of my Master's thesis. More information can be found in the presentation http://www.slideshare.net/mohanrajrm/designing-adaptive-interfaces-for-children Prototyping was done by modifying the open-source TuxPaint program (tuxpaint.org). More info http://www.cs.ubc.ca/~mohanr/
1. One way informational dialogs
Your picture has been
Printed.
Figure1. Call-outs that originate from the related icon. Non-modal. Disappears after n seconds.
2. One way informational dialogs
Your picture has been Printed.
Figure2. Call-outs that originate from the penguin in the help-section. Non-modal. Stays until replaced by another message.
3. Two way dialogs
Save your picture first? No,
Yes, Save it
Don’t bother
Figure3. Visually portraying the two way nature of dialogs involving two entities – computer and child.
4. Illustrating consequences
Your Picture will be
SAVED
Save your picture first? No,
Yes, Save it
Don’t bother
Figure4.1 Visually illustrating the consequences of the choices. Mouse pointer hovering over “Yes..”.
5. Illustrating consequences
You will LOSE your picture
Save your picture first? No,
Yes, Save it
Don’t bother
Figure4.2 Visually illustrating the consequences of the choices. Mouse pointer hovering over “No..”.
6. Illustrating consequences
No,
Save your picture first? Yes, Save it Don’t bother
Figure5. Visually illustrating the consequences of the choices. Static version – doesn’t animate on hover – information presented statically.
7. Layering information
1 4
Confirm Quit? x Confirm Quit? x
Do you really want to Quit ? Do you really want to Quit ?
Yes No Back Yes No Back
2 5
Confirm Quit? x Confirm Quit? x
Do you really want to Quit ? Do you really want to Quit ?
Yes No Back Yes No Back
3 6
Confirm Quit? x Confirm Quit? x
Do you really want to Quit ? Do you really want to Quit ?
Yes No Back Yes No Back
Figure6. Gradually revealing/highlighting information to reduce cost of decision.