Creating your App's Secret Sauce, Global Learning XPRIZE Team Summit Presentation


At the Global Learning XPRIZE Team Summit during UNESCO Mobile Learning Week in Paris France, Jason discusses concepts and strategies to create mobile app user interface designs (UI/UX) that both engage the user and ensure the developers are equally invested in app development and success, creating a closed win-win loop from development to engagement.



Jason: Hi. Can everyone hear me?

Audience: Yes.

Jason: Perfect. I’m Jason Bavington again from Midnight Illusions and what I’m going to talk about is more of a high-level conceptual conversation about user interface and creating your platform’s secret UI sauce. The presentation is geared more toward a platform approach to development but you can also use it for a high-end user basic app as well.

I’m not going to speak to you about us because they already did that. So the next 5 or 7 minutes I’m going to talk about user interface crowd control, user interface gamification, and also Apple’s secret UI sauce because how many people have have an “i” something? Almost all of us, right? They’ve done something really magical and I’ll have part of the secret about that. And then I’ll open it up to questions. Ok.

Who wants to push that Play button?

All of you, ok. First up is user interface crowd control. So, the best apps allow you to focus on the content for the content or task at hand. So, when you’re working within that user interface, the user interface allows you to focus on the tools that you’re going to present, allows you to focus on the library that you will present, allows you to focus on the processes that you will present.

And the device and interface do not impeded usability. It’s often the case where you’re working on a particular piece of software and it’s like how the heck do I just make it full screen or how do I get this file just to appear where I want it to appear? We’re trying to prevent the user interface from interfering with the goals and objective of the tool.

And when this happens, the device and the interface, they essentially “disappear.” It’s no longer about the interface. It’s about the tool itself and just getting done what you need to get done. When that happens, the user interface is exceeding in its goal, not just achieving it.

I’m going to give you some examples. One is called Buildbox. And in Buildbox, you have very simple category navigation on the left, you have tools, here’s your main working screen. And on the right you can get into a more granular view. You can get very granular with this tool. You can also stay really, really simple. So, if people just want to put a boulder on the screen, they can do that. Or if they want the boulder to rotate, bounce, and all of these things, it can do that as well. The interface matches the user’s level of complexity and capability.

So, this interface is very clean yet granular. They automate a lot of processes. You don’t have to worry about how to make your character fly or jump; it simply happens. And they have a massive library of images, so you don’t need to bring another on board, you can just use the one tool.

The next example is Sploder. And the reason I like this one is they just have two buttons. One is “click this ” button to get going. It’s just really, really simple. And you can do the same thing; you can drag tools in, you can make levels, make worlds. And it’s all very drag and drop.

What I love about this is the user interface allows you to build a game in five minutes. In five minutes, you can have a character running through the world, jumping and shooting enemies, and it took 300 seconds. You can drag and drop into the world, which is really great. There’s not a lot of dialogue boxes that pop up. There’s drag and drop again, and the engine automates a lot of what the tool does so the thing you can focus on is building the world and making new characters.

Now, Scratch. Scratch is the final one I’m going to present. And what I like about this one is they gamify the tutorials. There’s a tutorial at the beginning and as you’re walking through it and when you’re done there’s fireworks and high five you did a fantastic job. The tutorial is part of the user interface, and they did a really, really good job of it.

The other thing they do really well is they colour code the programming elements. So blue is one function, orange is something else, red is something else, green is something else, and, again, it helps keep the user organized. Knowing where they are while they’re programming without having to worry about the actual programming. They just know that blue means, say, designing and character, and green means action and making the character move or something.

And, they also group and nest objects. So, similar to the first example I showed, if you want to keep it really simple, you can, and if you want to go really granular and deep, you can. And that’s grouping and nesting in the process.

I’m going to skip WordPress. So, in summary, with the user interface Keep It Simple Simon. Keep your interface simple. It’s not complicated. Keep your interface spacious and uncluttered, so it allows users to navigate very easily and get to where they want to go efficiently. Use nesting and levels, as we saw in the previous example.

And, finally, I’m really encouraging you to obsess over user experience design. You know, if you spend tens or hundreds of hours on your practical interface, this comes across at the end of the day and users can really see that and will appreciate it and your platform will work that much more effectively.

Finally, abuse the novice. Find someone who doesn’t have a lot of computer experience. Find someone who’s not in your segment and your target market, and get them to use the interface. See how they use it; some things will work great, some things won’t. Tweak accordingly. At the end of the day, we’re designing it for our audience, as opposed to for ourselves.

The next section is user interface gamification. So, why gamify? You can engage the user. More effectively, you can retain the user. You can give the user a sense of accomplishment. And, it’s simply fun to gamify a user’s experience.

How we do this is with first-time walkthroughs, through tutorials, through a rewards system, and also making sure all of you guys have fun as well designing your system.

So, first up is the first-time walkthrough. In the first-time walkthrough, you can introduce the user to the basic sections and features; you’ve probably all seen this in apps that we use. Just walk through the app and see what it can do.

Keep one item per popup. So one concept, one popup. Any more than that and it tends to confuse the user. You’re taking them to the next step. And at the end of the walkthrough, you can direct them to the next main action in your solutions. Maybe it’s you need to open a file, maybe it's downloading a photo, maybe it’s download a tutorial. This guides them to what the next step is, and then they can take it from there.

Now, in your tutorial, it’s always ideal to have them build something. In this room yesterday, the Microsoft guys made a storybook app in five minutes. It was really amazing. So you want to do that with the users. You want to give them a sense of accomplishment in ten minutes. Congratulate them on the success. Make sure they’re enjoying the process.

And, above all, the user must not fail. You must design a tutorial that guarantees success at the end because if the user is successful, they’re going to come back to your tool again and again and again. Related to the first-time walkthrough, if their first experience is good, they’re going to want to come back.

And, beyond the tutorial, always be helpful. Have the tutorial available as a menu item, with a question mark. Always tell the user along the way to continue to use the tool and the benefits that come with it.

Now, with rewards systems, rewards can be many things. They can be achievements, stickers, badges, stars, kittens, leprechauns, flying monkeys. It doesn’t really matter what the particular reward is but you give them a reward. It’s something they can work towards. Khan Academy has done this very well where they have badges, they have stars; they have all sorts of things. You can earn badges all day long. And kids love this because they collect their badges and then they share it with their friends.

That brings us to Step 2: social sharing. This really introduces a viral marketing component if you choose to have this in your platform and help spread the word.

Finally, FUN. This is where you guys come in. So, I always encourage my team. You know, are you guys enjoying what you’re doing? Are you enjoying creating a new platform? Is your platform memorable? Is there something about it that users recall? When you’re testing and watching users, are they smiling? Are they genuinely enjoying themselves? Is the word spreading about your solution?

And, being able to answer yes to one or more of these questions then that helps guarantee the success of your solution. Because you know that genuinely people are enjoying it, they’re sharing it; they want to keep using it.

And, finally, Apple’s secret UI sauce. So, what we’ve come to determine as one of the success metrics of Apple and their i-anything is that they pretty much do the majority of what we’ve just discussed. They’re fun, they’re clean, attention-holding, they’re consistent, and they’re simple. And people just simply love holding an iPhone and an iPad and using an iPhone and iPad and app because they simply feel good. So, the more that we can incorporate some of these elements in our user interface, it’s a really effective way of getting your platform out there, getting people to use it, enjoy it, and see what happens after that.

So, if you’d like a PDF of the presentation, it’s there. And, that’s my info.

We have one minute for questions. Any questions? Yes.

Woman in Audience: How would we do social sharing within this context?

Jason: Sure. Social sharing in the context of developing a platform? Because educators, say you’re going to be developing a platform, educators could still social share their achievement and content on Facebook, Instagram, Twitter, LinkedIn and all of that sort of stuff. It’s not the end user; it’s the content user.

Any other questions?

Man in Audience: There seems to be a tension between design, good design like Apple or Facebook, and customization. Do you think users like a customized thing or do you think they like to be in the same place like everyone else?

Jason: So I would take a page from Facebook on that one. So we have our Facebook page, we can update our cover photo on our profile, but we can’t change the colours, we can’t change that you know the newsfeed is always on the right and the chat is always on the bottom.

So, in order to guarantee a consistent user experience with multiple users within your platform, let’s say you want to check out the chat, it’s always on the bottom right. Or check out that, it’s always in that location. But when you want to customize it and make it look, you know, more customized, then it allows users to do that but only to a certain extent. You don’t want it to compromise the UX component of your platform. That’s just my opinion. It might work on different platforms.

Staff: Nice job. Okay. Okay, one quick question.

Second Man in Audience: Yeah, you mentioned about badges and some sort of motivation, but there’s some example when you introduce some external motivation at the same time you increase motivation. For example you start to “pay” the child, for example, to make a drawing or something like that after that you stop paying and children know they don’t want to lose those things, but what do you think, how to manage this?

Jason: Are you talking about monetizing the user?

Second Man in Audience: No, no. I said, you mentioned about external motivation like badges and points and something like that but at the same time learning has some intrinsic motivation for the children. You can start as it is. So when you introduce some external motivation in terms of badges or something like that, how do you manage this with some intrinsic motivation for learning?

Jason: Yeah, I think it’s a combination of the two. So, you know, you can incentivize on something, you do A, B, and C, you’re going to get ten stars. But over the course of doing A, B, and C, they’re going to learn something as well. So I think it’s really based on the solution itself and whether achievements make sense within the solution or not. It won’t work for all cases, right?

But, yeah, at the end of the day you don’t want it to affect the learning process, you just want to be complementing the learning process. The goal you want them to achieve is the goal to learn, and you incentivize them with the stars if that is the best decision. Okay.

Staff: Okay.

Jason: Thank you.


< < <  Return to miBlog Index


0 Comment

Write a comment