UX Design for Work and Play

TechKnowFile 2018

Press space to navigate

Hi, I'm Laura.

UX Designer in the NGSIS program (EASI)

Next Generation Student Information Services


What is User Experience Design?

Design process that keeps users at the centre to create useful, enjoyable experiences.

Today's Topic

Let's compare a contact form to a video game.

  • Contact Form: Staff want fewer emails, students want help.
  • Video Games: Players want fun, challenge, immersion and more.
  • Everyone wants a good user experience.

Old ACORN Contact Form

✨New & Improved Contact Form✨

✨New & Improved Feedback Form✨

Game: "Fortress of Lanterns"

UX Design Guidelines For Work and Play

Testing is at the Core of UX Design

  • You are not the user.
  • Sketch and prototype your ideas.
  • Test early and often.

NGSIS Usability Lab

Contact Form: Low-fidelity Sketches

Contact Form: Early High-Fidelity Prototype

Sample Test Flow: Contact Form

  • Provide a persona and context.
  • Give your participant a goal, or some individual tasks.
  • "You're trying to enrol in courses, but ACORN is preventing you. Show me what you would do in this situation."

Game: Low-fidelity Sketches

Game: Early Prototype


Sample Test Flow: Game

    "Hey, please play my game."

Lessons From Testing

Testing the Contact Form

People can't use something that they can't find.

Testing the Contact Form

"Who do I ask for help anyway?"

Testing the Game

What can I interact with?

Testing the Game

What can I interact with? (Tree Edition)

Be Consistent & Follow Standards

Make actions predictable and follow platform conventions.

Mental Models: Contact Form

Familiar elements of a UI.

Mental Models: Game

Familiar surfaces in a platformer.

UI: More Room To Be Playful

Allow For Recognition, Not Recall

Don't force users to remember possible actions & outcomes.

A Classic Example of Affordances

"The Norman Door"

Photo: thmostinept (Flikr)

Affordances: Contact Form

Buttons afford clicking or tapping.

Affordances: Game

Platforms afford jumping on, lanterns afford lighting.

Affordances: Game

Can't force people to read documentation.

Aesthetic & Minimalism

If something doesn't need to be there, it shouldn't be there.

Minimalism: Contact Form

Minimal text, clear actions, clear progression.

Minimalism: Game

Simple art and intentional object placement.

Provide Feedback

Tell users what's going on.

Feedback: Contact Form

Success toasts answer the question "did it work?".

Feedback: Game

Visual and auditory feedback.

Feedback: Every Little Bit Helps

Use hover, focus and active states.

Areas For Improvement

Where these guidelines could be followed more closely.

Affordance/Recall: Contact Form

We still get questions meant for registrars.

Affordance/Internal Consistency: Game

Chains are platforms, but don't look like other platforms.

Feedback: Game

Lantern could use more visual feedback.

That's it!

Contact: laura.klamot@utoronto.ca

Game: lauraklamot.com/lanterns.html