 What's the difference between user interface, user experience and a bottle of ketchup? And what does any of that have to do with Moodle? Let me share with you a story. Before I do that, I need to give you a little bit of background information. In 1876, American food company Heinz started manufacturing tomato ketchup. By 1948 they introduced this iconic glass bottle design. It remains the world's best-selling ketchup, shipping more than 650 million units every year. Fast forward more than half a century, in 2002 Heinz introduced this upside down, squeezable plastic bottle. With the new and improved plastic bottle design, ketchup became easier to dispense and there was less waste left behind. It overall resulted in a better user experience. Okay, so that's the background. Here's the story. I headed off to the local supermarket to conduct my own field research. I wanted to see these bottle designs for myself. I wasn't able to locate the glass bottle design, the original iconic. However, I did come across the new inverted plastic bottle design in all of its glory. You can see it right there, two rows of it. More to the point, there were other Heinz products using this exact same new bottle design. I'm talking about mayonnaise, aioli and even tartare sauce. Okay, this new design was so popular that rival competing brands had imitated it. And you can see them there on the lower shelves. Back at home, as you do, I rated the pantry and discovered yet another redesign by the geniuses at Heinz. This time it was the humble tin can of soup in sachet form. But I was thinking, well, whatever happened to that original iconic glass bottle design was gone forever because I couldn't locate it in the supermarket. It certainly wasn't in the pantry. And I even went to the Heinz website, no sign of it there either. As you can appreciate by this stage, I was coming to the conclusion I was rather obsessed by this whole bottle redesign thing. In case you missed it, there was a curious meme during the rounds on social media a couple of years ago. Now, the meme was all about trying to illustrate the difference between user interface and user experience by way of an analogy which involved the Heinz tomato ketchup bottle. These were predictably some of the response memes. Now, my honest thought is that the original meme got it wrong and so too did many of these response memes. They didn't clearly differentiate between user interface and user experience. I especially like this response meme, however, I think they got it right. Now, the idea that the old glass bottle design and the new inverted plastic bottle design were examples of user interfaces with resulting user experiences. So the old was, I guess, a poor UX and the new was a positive. So, again, what does a bottle of ketchup have to do with Moodle? Are there any thoughts on that? Perhaps a quick show of hands or if someone would like to say something? What's the connection here with Moodle and this bottle of ketchup? Well, let me answer that for you. I believe it was all about human-centered design, a user-centered approach to the design. So that's the commonality here between tomato Heinz ketchup and Moodle. Very good. We should recognize a couple other things while we're at it. Firstly, interface is not experience, but on the same token, interface may impact experience, okay? And we've said a little bit about users, we're educators, so in the context of education, I think we'll start talking about learners. So it might be LI or Rolex for learner interface or learner experience, okay? As far as LI is concerned, I've put together a quick list there of what I would say is six key categories of interface elements in the context of Moodle. So just have a quick skim of that list if you could. Okay, and then as far as learner experience or Alex is concerned, it's very easy to describe the Alex in terms of positive or negative qualities. And I've done the same thing here by way of this table. So from an Alex perspective, think about your own Moodle and your own courses and where do you sit from an Alex perspective? Positive, positive quality, certainly that's where we need to be aspiring, isn't it? Gold directed, learner centric, appropriate, timely, collaborative and so forth. What if the Alex is negative? Ask yourself, who's at fault? Is it the educator or is it the learner? By way of definition, this is learning experience design. Just have a quick read of that. I like this idea of it being or LXD being a science and an art. We can be alchemists creating or transforming the learning experience through some magical process. Can we be part of that? X factor, okay, the human element. And this is it. We said that interface is closely related to experience. However, they're not the same thing. So, we as learning experience designers need to sit at that juncture between interface and experience. It's no secret, robots have been replacing humans in the workplace for decades now. Routine, industrial tasks in particular. And a similar thing is happening now with the advent of artificial intelligence, but for more complex cognitive tasks. Are our jobs safe? Only if we can design engaging human experiences for our learners. I believe the key is to develop competencies that are not easily replicated by intelligent machines. All right, so back to our friends at Heinz, the makers of the world's best selling catcher. They got me thinking. I mean, what was their motivation? You know, they're shipping 650 million units of this product annually. Yet something drove them to change and redesign their iconic bottle design. Any thoughts on that? And please feel free to stick your hand up. I'd value some input if you've got any ideas around it. There's no right or wrong answers. Why redesign the iconic glass bottle design? Yes, sir. Absolutely. Just say it once more. To enhance the user experience? To enhance the user experience. So, it may or may not have been a combination of other things. You know, I did a quick brainstorm and you might have done the same thing just there. Would they have wanted to modernize the brand? Not sure about that. Was it about the environment? Quite possibly. You know, I'd read some articles talking about the plastic bottle being derived from recyclable sources. Was it about new manufacturing technologies that didn't exist back in the 1800s or the 1900s? Quite possibly. Was it profits? Well, again, that might have been a result of, again, an improved customer or user experience. So, thank you very much. And yes, Heinz was about wanting to deliver an exceptional user experience, a happy customer, and obviously that could impact the bottom line. But what design thinking strategies might they have used as part of this redesign process? Here's three quick examples or possibilities. Empathy interviews. So, this is about asking questions of users, seeking stories and uncovering emotions. Personas, identify user groups, define personalities and needs. And then observation through user testing. It's an opportunity to gather data and gain a deeper empathy into the users. All right, so that's just three possibilities for design thinking. What about in the context of Moodle? All of what we've covered is fine but, you know, we need a specific context for us as Moodlers and Educators. So, here's seven quick ideas. We need to minimise what I would call friction points for our learners. So, that means, you know, minimising or minifying things such as clicks and scrolls or it would be taps and swipes if we're using tablets and mobiles. Reducing unnecessary decision-making for learners wherever possible. So, typically the learning journey starts here on the login page, doesn't it? So, you would be aware. There's one or two options upon login. We've got this dashboard, oh, pardon me, we've got the front page. This is a fairly generic, in this case one size fits all, front page. Now, the learner may or may not be enrolled in training. In any case, they may have to either search or browse to find what they're looking for. And in fact, there's a couple of courses there that are asking for an enrolment key and then a couple of others requiring payment. Is that introducing unnecessary friction, as I would call it, and unnecessary decision-making, when alternatively upon login we direct users to the dashboard. It's more personalised, it lists the training that the learner has enrolled in and in a single click they can navigate to the course or to an activity contained within it. How do you make learning digestible? You break it down into bite-size bits. This is an example of a course I would say may result in, let's say, learner indigestion. All sections on one page, it's referred to as, I refer to it as the scroll of death. We want to try and avoid this situation. This is better, more digestible. This course layout is, you know, one section per page. And better still, this is very visual, isn't it? And displaying sections or topics of weeks in bite-size digestible bits. We, as learning experience designers, need to be more visually quiet, let's say. Make less visual noise for our learners so they can focus on the task at hand. This particular course is akin to a rock concert, I would say. You know, it's noisy learning experience design. There's a lot going on, a lot of potential distractions for the learner and with that, you know, it carries significant cognitive load. And we could have the learner focusing that cognition on the intended task. By comparison, this is quite a bit of a challenge. This is quiet learning experience design. It can do a zen garden, I would say. You know, it's clean, it's simple, it's minimalist. The learner will be better able to focus on the task at hand. I believe we've got to adopt this lean-in approach to our design. So instead of the learner sitting back, they lean in or lean forward. And, you know, they're forced to think and interact and engage. So I'll show you quickly three potential approaches. Three pages from any moodle. And just think to yourself, if you were the learner, which of these pages would best engage you? And perhaps the reasons behind that, and I'll ask for a quick show of hands. So this is page one, page two, page three. All right, I'll quickly go back. Show of hands for one, no hands. Two, a few hands, maybe 10%, and three. The remaining say 80%, 90%. Any thoughts around that? Why did the majority of us choose three? Perhaps someone who chose three, just who would like to maybe explain a few motivations for that. Things look clickable. It's more image-based and text-based. You want to, you're drawn straight to the images rather than being intimidated by a page full of text. Very good. So you answered my next question as well. So not only the reason to choose this, but perhaps why not page one in particular, which is just a sliver text. Thank you. Okay, we need to signpost the learning journey. So with that comes a sense of progression toward an end destination. So be it a competency, a goal, or an outcome. This is what I'd refer to as learning limbo. There's no endpoint in sight. In fact, the learner may not know where they're at or where they need to be to complete the course. There's no completion tracking, no progress indicators. By comparison, the learner ought to have a better sense of goal and progress in this sort of course, in this layout. So you can see activities and course completion are being tracked through their entirety. I don't know if you're aware, 80% of international or global internet use is mobile. We need to seriously consider mobile as part of our learning experience design approach. Let's face it, many of our learners are very familiar with this kind of technology. So we've just got three screenshots, portrait mode, side by side there. You can see an example of what Moodle can look like on a mobile web browser, incidentally, using the default boost theme. Very clean, very simple, and it comes up quite nicely. Three screenshots, side by side. Alternatively, if you enable and configure the freely available Moodle mobile app, it can look like this for your learners. Let me ask you, what are you doing to motivate and incentivize your learners? Because the reality is we need to be doing more to recognize and reward learner achievement. I've said more carrots, I guess, by way of a metaphor. Badges is one such example. You may be familiar with it. It's inbuilt within Moodle, and this is an example of a badge. It's bright and it's shiny. It may be part of a bigger family of badges that can be earned and issued. And beside it is the text, the metadata that is appended to it. Righto, so just bringing it all together, perhaps one final question. Just to close the loop here. What can we take from the Ketchup story that will enable us to design a better learner experience for Moodle? Here's some food for thought. So listen to your learners and observe their interactions with your Moodle. We need to develop a deeper empathy and understanding into their thoughts and feelings and motivations. Be open to give and receive feedback. And then importantly integrate that into a refined solution, which means better or a better Moodle learner experience. And I'll leave the last words to Greek philosopher Socrates. Thank you.