Another dot in the blogosphere?

Posts Tagged ‘design

Yesterday I shared some visual design considerations I take for my talks. Today I focus on interaction design.

My latest effort is a step down from what I normally do. I am designing for lower grade interaction by leaving out a backchannel throughout the session and one-minute paper at the end.

I am doing this because I understand my overseas audience. It is a place I have been invited to every year since 2013 and the mobile connection is unpredictable. It is not that they are unresponsive; they just cannot reliably connect to the Internet.

That said, I am still relying on two online tools that require low bandwidth from the participants.

My go-to presentation platform is Google Slides because it is free, flexible, and online. I can edit the content up to the last minute and share the slides with my audience.

Video source

In terms of interaction, I intend to try Google Slide’s “new” Q&A tool since I am not relying on my preferred tool, TodaysMeet. The audience can participate by suggesting and ranking questions.

I will also use Google Form’s quiz and auto-grading feature (similar to Flubaroo). I will create this experience for my participant as an introduction to being information literate and to establish the themes of my session.

Mobile access to online quiz and themes of my session.

I anticipate that most participants will be armed with their own phones and this will also be message about leveraging on BYOD and personal forms of learning.

Most talks seem to focus on the talk. I plan mine with lessons from educational psychology and visual design principles. I try to focus on listening as I talk in order to change minds. This is effort that often goes unappreciated, but I know that it matters.

As I draft this reflection, I am facing an impasse with an organiser of a talk I am due to give overseas*. The issue is whether or not I should use the organiser’s PowerPoint template (complete with corporate branding) as the background of my slides.

My conversation with the organiser is between them and me. However, I realised this was a learning opportunity, not on how to negotiate in such situations, but how and why I design slides to visually deliver subtle yet powerful messages.

Visual design: Quote.

I often opt for a minimal look instead of heavy text and bullet points. I have learnt that I should tell the story, not the slides; they are there to back me up.

In this set of slides, I took minimalism one step further by relying on black, white, and the shades between.

Visual design: Themes.

The slide above is early in the sequence and shows the themes of my presentation. The slide below is near the end and highlights a closing message.

Visual design: Conclusion

The theme slide follows an online activity and the words scaffold what I lead participants to reflect on. The conclusion slide helps me deliver a closing mantra. The difference between the two is their lateral alignment.

The anglosphere is used to reading left to right. The conclusion slide is expected and easy to read. This is critical at the end of talk if you want the audience to focus on takeaways and temporarily put aside questions, dissonance, and tiredness.

The reflection slide might cause a bit of visual dissonance because the header and text are not where they usually are.

Visual design: Step back, reflective elements.

Here is another slide from the same deck that uses my switch-to-the-right theme. I use this visual technique to highlight dissonance.

When you look in the mirror, you see yourself laterally inverted. It is you, but not quite you. The reflection is an opportunity to examine yourself and focus on what needs improvement.

So my normal left-aligned layouts are messages I share while the right-aligned ones are for dissonance and reflection. My presentations tend to be iterative cycles of presenting forward and stepping back.

This is subtle and I do not explain this design to my audience. But I will invariably get feedback that the slides are visually impactful.

Visual design: Colour punches.

Before my audience can get comfortable with soothing greyscale, I provide the occasional punches of colour. If I go on a storytelling stretch or a series of slides to make a point, I emphasise these presenting forward elements with colour shouts to make sure that the main question, point, or challenge is clear.

Tomorrow I share how I design talks for interaction.

*Update: The issue is resolved and I am using my own visual design instead of a corporate template.

No, it is not a new word. I call a mobile app experience, particularly a bad one, an apps-perience.

I share some thoughts on using a commercial app by McCafe in Singapore. I hope to illustrate how edu app designers might learn from the negative examples McCafe has generously offered.

I provide screenshots from an iOS and Android phone because I used both to make sure that the experience was consistent. It was consistently bad.

Lesson 1: Bare-essentials registration
Most apps require user registration. The McCafe app requires your name, gender, full date of birth, email address, and phone number. As it only requires your phone number to tie the app to you and to send an SMS verification, this is the only data it actually needs.

It collects more information than it requires and this tells you that it wants your data for more than just providing you with a good deal. You are the deal for McDonald’s and its third party allies.

If you use this app, be sure to deselect all the options under the Personal Data Protection Act (PDPA) section. If you are lonely and like spam, select them all.

Part of the McCafe app registration process.

The registration process feels unnecessarily long, burdensome, and intrusive because of the amount and type of information it seeks. For example, it could have left out the date of birth details while including the age declaration option. After all, there was no way to verify a user’s age.

For that matter, there was no way to check the user’s name, gender, or email. If establishing identity is the purpose of registration, the phone number is enough. After all, our phone numbers are already tied to our identities when we sign up for mobile subscriptions.

The lesson for edu apps designers is the same. Respect the privacy of the user. If an edu user has an institutional ID number or email address, use just that. If not, get the bare minimum, e.g., email address, for setting up and verifying an account.

Lesson 2: Do not nag
When I start the app on iOS, I get this reminder. I cannot deactivate it unless I let the app notify me and allow it to track my location.

Nagging reminders by the McCafe app.

I choose to allow neither. All other apps I use stop nagging me once I choose no. This screen does not provide a “no” option and appears each time I launch the app. You can imagine how much joy this brings me. Not.

Lesson for edu apps designers: Reminders can be important, e.g., project deadlines, and you should give the user a choice to be reminded or not. If so, the type of reminder should also be an option. These reminders can be built into the OS, e.g., app badge, notification area, slider, or popup. Alternatives to these might be a reminder feed to a calendar, email, or messaging app.

Lesson 3: Mind your language
After the nag screen, I get this warning message (see screenshot below). This is two unwanted reminders to tap on before I can start using the app.

The McCafe app thinks that my iPhone is jailbroken — the app prefers jailborken — even though it is not.

The McCafe app thinks my phone is

The only good thing about this message is that I get a chuckle every time I see it.

Maybe the app developer has Scandinavian roots. Maybe there is a sneaky collaboration with IKEA for new line of toddler barriers, Jaīlbørkën. You heard it here first.

Lesson for edu app designers: You might not be providing an English learning experience, but if that is the language of the app, use it properly. No “borken” English, please.

Lesson 4: Put the user experience first
This lesson is hard to describe with a screenshot because it is the process of using the app to 1) claim stamps (five add up to a free drink) or 2) use coupons. Both use a QR code system that appears on the user’s screen.

The process seems simple enough. Pull up a QR code that identifies you or the coupon, then scan it. The problem is that the setup is designed for the cashier and not the user.

Every other app interface I have used that requires a user-generated QR code allows the user to align the code to the reader. This is like tapping your EZ-link card to the reader.

However, at McCafe the reader is positioned so that you cannot see where you are aiming the QR code app; only the cashier can. I experienced this for myself and I watched people after me doing the same thing. Each time the cashier had to guide the user’s hand left or right, up or down, and forward or back.

Two-step verification of QR code in McCafe app.

This process is even more awkward when you have to use a coupon because you have to scan the QR code twice. You try to scan it the first time. You then have to tap a “Next” button on screen for another QR code to appear.

When you do this, you have to turn the screen towards you, tap the button, and start aiming again. Watching a line of people do this can be mildly amusing if it did not look so stupid.

Lesson for edu app designers: Do not make your users feel stupid or make them do stupid things. Your users have experienced other apps and quite a few of these will feel slick or even sophisticated. Those other apps are no less secure and it is no shame to learn from other app makers.

Bonus lesson
This app rant is not about getting a free cup of coffee or poking fun at a mega corporation. One cup or small pokes are not going to make a dent in a company that used to have a clown for a mascot and now aligns itself with the passé Angry Birds.

This is about learning not just from a textbook or highly theoretical principles. With keen observations and critical questions, educators can deconstruct and reconstruct lessons from everyday phenomena.

Such lessons bring fresh perspectives to old issues and are fun and meaningful to the learner. That is the most important lesson of all: It is more about the learner and learning, less about the teacher and teaching.

Have you ever wondered what mobile apps might look like if they existed in the 1990s?

I got an answer when my son’s school authorities provided a notice for parents to download a “notification and attendance” app.

If you cannot remember what web pages looked like in the 1990s, this rude reminder might help.

The app reminded me of the web-based Java applets of old. It was plain and perfunctory. If the app could have an odour, it would be that of a musty attic or a mouldy basement. If it had an introductory screen, it would be to swipe cobwebs from its interface.

That is my way of saying it was unappealing. It was as if the app maker resented creating it.

The app was awful in form and function:

  • It constantly nagged you to log in.
  • It looked like it was ported from a desktop for point-and-click instead of swipe-and-tap.
  • As a phone app it was meant for portrait use, but it seemed to be designed from a landscape point of view.
  • It seemed to have borrowed its layout from a backward webmail programme. (Cough, iCON, cough!)
  • The designer might have taken paper prototyping too seriously. The layout and buttons look like paper outlines and stickers.

I share two screenshots and offer more specific comments with the examples below.

Snaapp app critique 1.

Screenshot 1: 

  • This is an example of the app’s blocky and monotone design.
  • Note its poor use of English.

Snaapp app critique 2.

Screenshot 2: 

  • The tappable icons or hotspots are inconsistently designed. 
  • The notification is incomplete: Saved to what location?
  • The landscape photo is saved in very low resolution as a portrait with black letterbox bars.

Local app makers need better design sense. For example:

  • Visual design: The look and feel should be modern or at least current, not a throw over from the Geocities web page era. A tight review of the five most popular communication apps should reveal a mountain of design clues.
  • Usability design: The mobile app should be a dedicated app instead of a wrapper of a web app. Good apps focus on what the user wants and needs, not on designer or desktop hangups.
  • Social design: A communication app should be designed for people to interact. It is not just for one party to disseminate. Users expect to be participants and to provide feedback. Build and promote those affordances.
  • Current design: Today’s design is flat and avoids skeuomorphism. Instagram recently changed its Polaroid-like camera icon to a modern, flat icon. Old design is like Microsoft clinging to the diskette “save” icon even though no one uses diskettes anymore.
  • Language: An app can look gorgeous and be user-friendly, but if its prompts are in broken English, its design is broken. This is not nitpicking; this is about taking pride in work.

Old and complacent design encourages old and complacent practice. Perhaps this is a strategy the app provider is using with schools. It looks safe and familiar to decision makers, so more schools might adopt it. But the app makers ignore other stakeholders and users at their peril.

Tags: , ,

How many people would sit through an almost 10-minute YouTube video about the history of Japan? I wager not many.

In 2013, EdX crunched some numbers and found that 6-minute-long educational videos were optimal for motivated students. Earlier that year, another researcher presented his own numbers for other videos:

  • 11% of viewers watch just 10 seconds of an online video
  • a third of viewers leave the video 30 seconds in
  • half the viewers will not stay beyond the first minute of the video
  • only 9% will watch a 5-minute video

Video source

I showed my wife and son this video when it was released earlier this month. As of today, it has surpassed its 6 millionth view.

We watched the video all the way through. A few days later, my son asked to watch it again and we did so together on our living room TV.

The number of views this video has garnered and the interest of a child who is not quite interested in the history of Japan is testament to how good it is. It is a very good example of how to lecture without lecturing.

It is also a good example for educators to deconstruct and critique so that video design principles emerge. For example:

  • Less can be more (leave learners wanting more)
  • Tell a story (which might comprise of shorter stories)
  • Be interesting (use emotion to create learning anchors)
  • Quip and be quick (the viewer can pause and replay)
  • High fidelity and top-notch video production is not always necessary (tight editing and post-production is)

The illiterate of the 21st century.

At a keynote I delivered in December last year, I mentioned that there are only three core 21st century competencies for educators. They need to learn, unlearn, and relearn.

There will be times that an educator needs to be a sage on the stage. But that does not mean that s/he has to be the shah of blah. Can today’s educators learn how to tell stories that teach by unlearning lectures and relearning new strategies?

Take a lesson from this attempt by the SMRT to improve travel experience. One of the ideas is to redesign cabins in order to create happy commuters.

The article also reported that:

whether a stranger gives up their seat to someone who needs it more has more impact on a commuter’s mood than infrastructural factors such as layouts and signs. A total of 43 per cent of respondents said they were affected by other commuters’ behaviour, 29 per cent by personal comfort and space, and 28 per cent by infrastructure and the environment.

Less than a third of the commuters think the physical environment made for a better ride. Compare this to under half who were more concerned with commuter behaviour. Despite the data that SMRT has, it is going ahead with the idea to make cosmetic changes to train cars.

Decision makers, particularly those that may not travel on trains every much, will realize how much easier, faster, and concrete it is to decorate a train interior. It takes more time and effort to change human behaviour and the results are harder to measure.

An effort that is more efficient is not necessarily more effective. A redesigned physical environment might change behavior, but it does not ensure it.

There are companies and vendors who make a big business of designing learning environments for schools. Like the transport decision makers, they often go for the low-hanging fruit and not many take the perspective of educators or learners.

A rigorous review of who the people are in such companies should be one of the first things school leaders can do. Doing this is just as important as having blueprints, funding, and good ideas.

Even more important is having data from kids and teachers to base decisions on and then making wise decisions. Above all, it is about putting the learner and learning first. It is not about a shiny new plan or doing what only looks good.

Equally as important is learning from the mistakes of the past or from other seemingly unrelated projects. The same article reported how SMRT train redecoration projects did not work as well as expected. The data indicated that cosmetic changes were not high on the list of commuters. Researchers even concluded that “We basically realised that we needed a paradigm shift that goes beyond just infrastructural or policy-type service”. Yet they barrel down the same tracks.

It is easy to look at another system and make judgements about it. We should cast an equally critical eye on our own and not make the same mistakes.

Short read: I am not saying that improving the physical environment is not important. I am saying that it is obvious, but obvious is not necessarily effective in itself.

This is a continuation of the design advice I started offering yesterday on the design of e-learning and teaching resources.

The five main points were:

  1. Send consistent messages. Do not send mixed signals.
  2. Give learners a compelling reason to consume your resources. Do not assume the user wants to consume them.
  3. Give your learners choices. Do not assume the user is stupid by providing defaults.
  4. Design with student perspectives. Do not design for teacher eyes only.
  5. Make your resources social and open. Do not make it hard to share elsewhere.

4. Design with student perspective
STonline is still designed for a physical newspaper first and the desktop computer second. There is little thought for mobile access and consumption.

Content consumption and creation are increasingly mobile. You need only collect data among your learners to determine this. Alternatively, mine open data sources like SingStat or rely on research by comScore or other similar groups.

The learners of today, both youth and adult, are mobile. Your eyes tell you this every day; your mind should convince you of that with data from reputable sources.

The graphic above is from the WSJ and illustrates how reliant the major social media platforms are on mobile (orange bands). The only exceptions are LinkedIn (arguably an older person’s platform) and Tumblr (arguably a platform that is struggling with an identity).

My contacts in emerging economies confirm what I know from my own travels and research: Mobile is king. Serve the new king: Design for smaller screens, bite-sized content, and interstitial [1] [2] and just-in-time learning.

5. Make your resources sharable
Ideally make them free, open, and social. But if not, make them usable elsewhere for use and manipulation by the learner.

STonline does not design its headlines for easy sharing on social media. If you try to tweet a resource, you are likely to run over the 140 character limit. The MOE Press Releases website is even worse with long titles and equally long attribution add-ons.


If the blurbs do not go past 140 characters, they come so close that you cannot add your thoughts. You can only pass along as intended. This goes against the grain of the sharing, reusing, and remixing culture of today’s learner.

If copyright or the nature of content is an issue, then provide tools or options that allow users to collaborate and manipulate the information in private platforms. Learning does not take place simply in controlled consumption, but in its deconstruction, reflection, and reconstruction.

The latter three processes tend to happen more naturally in open and social spaces, not in tightly regulated ones. As a parallel, consider the benefits of rote chanting over the social negotiation of meaning.

What I have shared is not rocket science. These are the low-hanging fruit of lesson and e-resource design. These are within easy reach of any instructional design or teacher. The fruit are ripe for picking.

Click to see all the nominees!

QR code

Get a mobile QR code app to figure out what this means!

My tweets


Usage policy

%d bloggers like this: