Another dot in the blogosphere?

Posts Tagged ‘design

I am evaluating the lesson plans of future facilitators. Normally I wait till the end of the semester to reflect on the common misconceptions that arise. However, critical patterns have already emerged.

One mistake is not articulating how they form student groups using pedagogical principles. Novice instructors often assume that students will form groups, know how to form different types of groups, and/or know what to do in those groups. This is not true even with learners who have worked in loose cooperative groups before. This is because context and content change the strategy for the type of cooperative work.

What might work with heterogeneous grouping in one context might not work with another class learning the same content. The second class might need different-sized groups, more homogeneous groups, or different group strategies.

I model these strategies in my workshops. Here is one example.

As my learners come from different schools in a university, I make them find peers of similar backgrounds so that they are in more homogenous groups. I get them to play an academic dating game by asking each person to write their school and teaching topic on a piece of paper. Then I ask them to use that paper sign to find birds of similar feather and to flock together. The rest of the session then looks something like this.

My design rationale is simple: My learners uncover generic cooperative and learner-centric strategies during my workshops. However, they need to apply them in specific teaching contexts. What works in one context might not work in another. So the more similar their backgrounds and shared histories, the less cognitive burden my learners have to shoulder when they unpack and repack the strategies.

There is value in using more diverse groups, of course. The cross-fertilisation of ideas when an language historian shares strategies with a theoretical physicist can be wonderful, but this is more likely to work for a group of more advanced participants.

Depending on the group of learners I have that day, I facilitate a rise above of the experience so that we analyse the design of grouping for cooperative learning. Perhaps I should not assume some groups get it and others do not. I should set aside time and space for all groups to rise to this lofty ideal.

Last year I outlined how the poorly designed McCafe app could be used to learn design principles. Missteps and mistakes are often the best sources of learning.

My StarHub is an app that I use to check my data consumption and it is a wellspring of lessons on how NOT to design a mobile app.

The app claims to let users customise what they see. Currently, there are four fixed cards and six selectable ones. The latter are selected by default.

One cannot actually customise as 1) there are fixed selections (including ads), and 2) if deselected, the optional cards return after restarting the app.

The people behind the StarHub app might have forgotten (or do not care) that the customer likes to customise. Perhaps they need to adopt a new custom and repeat it as a mantra.

The app also breaks the old web page three-click rule. This is the rule that states that a user should be able to find what they need within three mouse clicks. In the mobile app universe, this should be a one or two tap rule given the nature of the platform.

Once I open the app, I need to make six taps to know how much data I have consumed in detail. I need to tap on:

  1. My Account.
  2. Mobile usage.
  3. The filter option (I manage and pay for my family’s numbers and mine does not appear by default and I have no option to choose my mobile number as default.)
  4. My number in the filter.
  5. The done button.
  6. Data usage to view current usage.

The app offers a minimalist graphic on main page that looks nice, but 1) it does not always appear, 2) when it does, it sometimes happens after a delay, 3) it is not detailed enough for my needs.

All this puts form over function and the needs of the designers over that of the user. This makes for a terrible app experience and I am reminded of it every time I use it.

Designers of user interfaces should be familiar with the concept of user-centric design. I wish more were passionate about the practice of the same. This is particularly important for designers of educational apps, especially those that provide access to content and learning management systems. No one wants angry, frustrated, or anxious users even before the learning begins.

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?


http://edublogawards.com/files/2012/11/finalistlifetime-1lds82x.png
http://edublogawards.com/2010awards/best-elearning-corporate-education-edublog-2010/

Click to see all the nominees!

QR code


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

My tweets

Archives

Usage policy

%d bloggers like this: