Kurt LarsonJordan HofkerMichael GuthmannDavid Kim

Problem High-level solution Representative tasks Design evolution Description of UI and demo Final usability test Reflection on project

Problem: No tool for remote battlemat game play

Distance is an issue Cost of tokens, battlemat, etc. could be

prohibitive

Create web based battlemat system Replicate tabletop game System has battlemat backdrop

Place tokens on map

Move tokens

Draw on the map

Drag the map

Determine spell area

Join a game Upload a token Place a token Move a token Draw on battlemat Select a spell template Erase battlemat

Exercised almost all the system functionality Most common tasks for a player or dungeon

master Most dependent on the clarity of the icons

and tool tips

Icon clarity and tool tips were the riskiest parts of the system

Alternative designs

Login first or battlemat first?

Battlemat that is full screen or within a frame?

Inclusion of cursor icons?

Paper prototype

Icons were not clear

First prototype

Added tool tips

Revised the icons

Final prototype

Added more functionality

Re-revised the icons and tool tips

Built using Silverlight 2.0 Beta

C#

XAML

Gave the rich experience of a desktop application in a web app

Very full implementation

Out of scope: saving uploaded images, hosting shared sessions

Key problems

Erase functionality was unclear

▪ Reworked erase functionality

Image upload had no feedback

▪ Added immediate feedback

New Insight

Affirmed our tool tips and icons

Affirmed the zoom and center functionality

Affirmed cursor icons

Most important was immediate feedback Specific feedback

▪ Tool tips

▪ Clear button icons

▪ Changing the cursor icons

▪ Image upload

Maintaining conventions Grab and drag

Drag and drop

Drawing tools, etc.