Friday, 10 January 2020

Wireframing page layouts

When considering a page layout I have been applying some UX (Users Experience) rigor to help reduce potential usability issues.

I ask myself a few questions to work out user stories (usage scenarios) which inform the page layout:

Who is looking at the page and why?
E.g. The GM... because the group have just stumbled on a Skelemaster! They need to know how to run that encounter?

What information is the user (GM) looking for?
1. What is a Skelemaster in a nut-shell?
2. How does the Skelemaster react to the group?
3. How do you 'roleplay' them?

4. How do you they interact with the combat/negotiation/game mechanics?
5. How does this or that ability work?

6. What do they find on the body?

What is the best way to communicate this information quickly?
What is the best way to arrange the content to address the above needs?
What do they need to know first?
What is the best visualisation of the data?

Once I'm confident about with how players will interact with the page I've been using wireframes!
A quick way to iterate layout ideas and validate if the information structure is practical/efficient.

The end result will produce a template, which can occasional result in some structural editing (chopping and changing) for a smoother experience at the table.