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

http://ngsis.utoronto.ca/

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

Playtesting

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