I want to learn about

      Why you need to mind the gap between UI and UX in eLearning

      by James Quilty

      elearning design

      What is the difference between usability design and user experience design? How are both important in elearning? At Logicearth, we pride our selves on great UI and UX and have gathered some tips for getting them right.

      Understanding UI and UX design and why that is important

      At Logicearth, UI (usability) and UX (user experience) are among our favourite topics. If you have read our blog on UX before, you know how essential to eLearning we think they are for the end user. 

      science-behind-elearning-free-ebook

      You might not be clear on the difference between UI and UX, as often they are used to mean the same thing. If you are commissioning great digital content be sure to ask your eLearning provider how they address these two important aspects of design. This quote from Moreno shows the need for a balance between the two elements to improve design.

       

      The difference between UI and UX

       

      Getting the UI and UX balance right

      It’s no good designing a custom icon set and beautiful interface in any eLearning authoring tool, without first planning the usability and user journey.  The very definition of this imbalance can be found in the image explained here - the very silly, entirely under-thought Phillipe Starck lemon juicer.
      Juicy Salif 78365
       
       

      " Take a moment to bask in its audacious lack of usability, it is almost impressively difficult to use. It wobbles uncontrollably when attempting to render any juice like material from a lemon.

      The Starck Lemon Juicer has been known to damage even the sturdiest countertops, and the lemony icing on the cake is the fact that this gold plated version corrodes into ugliness when any drop of acidic lemon juice goes near it. Does it look splendid? Certainly, it’s an iconic piece of mid-century aesthetics.

      Does it do what it’s supposed to? Barely. Is it enjoyable to use? Ex-squeeze me? No, no it is not.

      Of course the opposing imbalance is equally upsetting, where your new course might function perfectly, and be a thoroughly engaging piece of learning that delivers all the right knowledge to a user, but resemble a 90’s website for your local carpet warehouse. Again, without balance between UI and UX your content will not attain that elusive label of ‘enjoyable’.


      Preparing for UI and UX design

      At this stage in a blog it’s customary to lay down a number of bullet points, 7 rules, 10 steps, 13 essential things… let’s buck the trend here slightly. There is only one critical thing to remember when balancing your UI and UX: Preparation.

      But what about, communication, or testing or *insert valid point here*…Yes, you need lots of things down the line, but without time to prepare and form a unified strategy of what you intend to build, everything else falls down.

      Preparation will draw out the best version of success from your clients. If you are designing your own content, encourage your writers and instructional designers (IDs) to talk to the digital designers before work begins - discover who will be using the content, and on what devices. This type of preparation will help to create an instinctive feeling of usability from the entire team, which in turn will help the designers create a look and feel for your digital content that’s a perfect fit for clients and engaging for the users.

      The idea during this prep phase is that you give both UI and UX your equal attention, never losing sight of either. Imagine a set of precocious twins on a dull Saturday morning, focus on one too closely and you’ll turn around to discover the other has set fire to the drapes and is attempting to douse the inferno with baked beans. In other words an avoidable and costly cleanup operation is coming your way.

      Putting UI and UX preparation into practice

      The pinnacle of preparation work is the prototype. The structure of a digital learning resource can be played with, navigation types explored, icon and image examples displayed all before work on the main content is started. It also helps that there is little to no focus on the content in these example builds, which is understandably the main focus of clients when building proper begins. Prepare (that word again) a set of questions to ask the client specifically about both UI and UX concerns in the prototype and will you have a solid foundation to work from moving into the next phase.

      The problem, of course, with prep work is that it is rarely fun. Designers love to design, IDs love to write - whats the harm in getting something down right now while my ideas are flowing freely? Remember those twins…Take the time to prepare for that Saturday morning and no furnishings need be harmed.

      So what should a successful UX/UI process yeild? This.

      UI UX

      Learn more about UI and UX

      If you want to get into UI and UX in more detail, there are are couple people and books that we'd recommend:

      On Twitter - have a look at this blog for who to follow for great insights into UX

      Here is a free online UX course from the Interaction Design Foundation

      A conversation with Julie Dirksen - a guru on all things eLearning and design

      science-behind-elearning-free-ebook

      Get a demo of excellent UI and UX

      We design all of our eLearning content with UI and UX excellence in mind - from our Compliance solutions to our new intelligent learning platform - Percipio, we invite you to try it out for yourself. 


      Was this article helpful?

      Related posts

      If someone in your office were to succumb to cardiac arrest, would you be confident enough to use a defibrillator, would you know where to find one?..

      James Quilty
      Read Article

      The word ‘objective’, as used to describe an aim or goal, is a 19th century military term, but the field of learning is not a battlefield, so we..

      David Cameron
      Read Article

      It’s exciting to watch eLearning evolve over time. New tools and trends are blossoming, while others fade into buzzword-infamy. But one design..

      Kate Middleton
      Read Article

      I've recently been involved with a project that had two key animations explaining the key concepts of the course. Of all the elements in the course..

      Niamh Williams
      Read Article