Wednesday, October 23, 2013

Julie Dirksen, #DevLearn "Interface Design: Tips and Tricks for Designing for Learning Environments"


This are my liveblogged notes from Julie Dirksen's (@usablelearning) session at the eLearning Guild DevLearn Conference, happening this week in Las Vegas. Forgive any incoherence or typos. I am in Vegas, after all...

How do you make an interface that works for people?

Stephen Anderson -- her favorite UX guy.  He says, at base the UI needs to be functional, reliable, needs to be convenient (easy to use -- it works like I think it should), pleasurable and meaningful.

The purpose of good interface design: makes it usable, keeps the user from getting frustrated, making the interface invisible -- it needs to reduce your cognitive load.  

If a user interface is really hard to figure out, you're maxing out the learner's cognitive load.

Intrinsic cognitive load: the content, what you want people to worry about.

All the UI, etc -- that's extraneous cognitive load -- it's taking up time and attention that your learner should be spending on the content. So how do we reduce that cognitive load? How do we make the user interface invisible -- so the learner can focus on the content.

A good UI makes the user feel like they are in control.

Donald Norman, The Design of Everyday Things and Emotional Design (asks the question do attractive things work better? in fact attractive things do produce positive affect in people. A learner who is pleased is more open)...

So hopefully, if we do this right, we get learners who are more open and get better learner outcomes.

UI Design...what are the rules? Not that many...

Fitts' Law -- big buttons take less time to figure out than 
Don't put red and blue text alternating against a black background...
and not much more than that..

Jakob Nielsen's Usability Engineering book -- says it's all about the testing...

There aren't a lot of rules because they really don't exist.

Three big chunks to your elearning interface:

  • Learning content
  • Local navigation/instructions
  • Global navigation
Some tips...

Reading patterns:
People (in the west) -- read from top left to bottom right...your content layout should support that.

(A big issue out there is that a lot of elearning designers don't get to see real people going through their courses.)

Print out your screen and draw a line to show where the learner's eye/attention needs to go.  Are you taking them on a big zig zag route or is it a good pattern?

Screen instructions:
Purpose of them might be to set up the situation and the scenario/context; tell them what they're going to need to do; then what they need to do next.

Screen instructions = cognitive instructions -- where do I need to go -- how can you bring that down to the fewest words possible (that you could read in one eye blink).  So for a drag and drop exercise have: Read:, Click:, Drag Here.

Fitts' Law: "The time to acquire a target is a function of the distance to a size .... http://en.wikipedia.org/wiki/Fitts's_law

Make the things that are annoying easier and the things that are important easier.

If the learner has to stop and think about what they're doing and get their mouse to a very small click area, that's taking a lot of their mental resources.

Create high context interfaces
"Embed the triggers for behavior in the interface itself."
The environment in which we learn something because embedded in the memory of the content itself.

Put yourself in the context in which the memory was formed so you can trigger it again...

Set up triggers -- if you are faced with this trigger, use this behavior...in your learning environment, create association between stimulus and response...

Text bullets on a screen are very low context and don't match the environment at all...

UI Design Patterns
Jared Spool -- ui-patterns.com

Templates are a problem...

Prototyping is your friend
Prototype in simple tools:
  • Use PowerPoint to hyperlink -- build a prototype in 10 mins.
  • Storyline can be good. 
  • Balsamiq mockups good for webstuff.
  • Axure
User Testing
Find out how people are really using your learning.
Steve Krug book: Don't Make Me Think

You can find 80% of the issues with the first five or so users. You don't need twenty testers. One hour or so...

Do NOT help the learner figure it out -- let them bump into things and have them talk out loud.

The five second usability test: where am i? what do i do next? how do I get out of here?


No comments: