Category: Tips

Has Material Design nailed Mobile Tooltips?

I received a question from a recent uxdesign.cc post on Cognitive Overload in mobile app design. (It was a variant of my last post here).

Has Material Design already answered the need for reducing cognitive overload?

Material Design is a unified system that combines theory, resources, and tools for crafting digital experiences.

This initiative from Google (and gift to the world) is widely embraced but Apple is sticking with their own Human Interface Guidelines (and the battery efficient Flat Design). I won’t go down the rabbit hole of comparison but predictability, elegance and delight in design are all great cognitive tools for reducing negative human-computer interactions. (Also it didn’t hurt that Google clobbered Apple by having wide-spread tools and libraries for both web and mobile).

Material Design’s strength was sticking with a cognitive design balanced with device performance, processing power and battery efficiency — an acknowledgement that human perception uses light to interpret the physical world.

BUT — where Material Design stops short is that it solves “the current moment”. Its really a design tool, NOT a user experience tool.

It does not consider the user journey and the contextual nature of a design for the current user’s needs.

Material Design’s Approach to Mobile Tooltips

They take a well-meaning of hiding tips (similar to desktop where its hover that delivers the tip). The advocate the long-press (press-and-hold).

The problem for long-press is that:

a) mortals don’t know that gesture, only UX nerds.

b) confused use. Historically long press) gesture on a mobile devices mimics the secondary button press on a computer mouse. Traditionally it gave you the same alternative options as the secondary mouse click on a computer. So long-press for tips is competing with another function. Frankly, allowing the user to access “less, commonly used functions” is a far better pattern. “Help” could be one of the options provided.

c) gesture dissonance: the user has to drop their uncertainty of clicking the button in order to learn what the button does — wtf?!!!

d) Perhaps the greatest challenge is that nobody knows how to communicate it (contrast with the “Like” button that was self-marketing). Swiping could be illustrated in a sketch and also mimicked existing human behavior of swiping or dismissing something no longer needed.

e) not many apps use it. I long-pressed a bunch of Google Apps and can’t get a tooltip to show. Naturally if Apps don’t use it, then user’s won’t use it.

IOW — Long-press for mobile tips are dead. Sorry material.io 🙁

November 11, 2017
10 Common App Prompts That Convert
Mobile App user retention rate is <10%. That is largely attributable to not “Activating” user engagement quickly and at relevant times.

If users don’t find utility and value from the product quickly, they rarely stick around. Figures for user churn are over 70% within first 3 days.

To give your users the best chance of extracting utility, there are a few common use cases we see in successful Apps. Its no coincidence these use-cases are recurring – take note!

In this post we cover 10 common app prompts that really make a difference to retention, activation and growth.

1. The ‘Get Started’ Tip

User activation is about getting the user to an “a-ha” moment as quickly as possible.

So one of the simplest and most obvious things to do is place a tip pointing at the one action to deliver “instant-gratification” returns.

e.g In a real-estate App it might be the first filtered search. In a social App it’s often sharing your first picture.

In many applications, this is called “Empty State” – the single-player mode where the App is absolutely empty until the user gets started.

Todo-lists, CRMs, Mailboxes all have empty states. In this situation, you will probably design into the application but you may still want to iterate different A/B tests on messaging.

You design a product, you’ve been staring at it for months and you’ve developed a habit that would make Pavlov’s dogs drool. You click happily and assume that your users will automagically guess how to use it.

Not so. The value this simple understated tip is triggering the user’s first action. The tip is never seen again because the user now has started the habit!

2. Feature/Intro Tour

There are different names:

tours, flows, walkthroughs

But they all mean the same thing. Building on the simple tip, you introduce the user to a set of key features and explain how to initiate those actions.

In earlier posts we’ve discussed how targeted tips in a tour is superior to using a carousel that users will forget. This little animation shows how you can advance a user during early App experiences.

3. Targeted Nudge for unused Feature

Its common for popular apps to have a loyal user base but some of the users are missing key utility available in the application.

With Contextual, you can target these users, to start using the feature. You can use an attractive prompt. That may lead to the screen in the App or kickoff a walk-through/tour.

4. New Feature Announcement

Here is 2 cool simple examples:
1. Skype takes a smart approach to user education by telling me I can have more fun now because they support “sharing photos”, “locations”, “GIFs” tasks. Read more here.
2. Netflix’s 2-prong approach to prompt users to start using off-line video playing is a great re-inforcing approach. We’ve seen Slack do that too. Learn more…
5. Launchers

As we mentioned in the last post, these valuable tip bubble app prompts can help clarify the purpose of a field or action without clogging up the screen.

The user can simply tap/click on them, help the user understand and then get out of the way.

6. Invite a friend

Increase your virality or k-factor with app prompts to get a team mate or friend on board the app as well. Sometimes this sharing might have a referral incentive – we’ve written before why Uber and AirBnB use shared rewards as the most effective conversion. If only the referrer gets the reward, the recipient is suspicious of their motives. Remember that Uber gives new users free credits anyway via advertising or postcard handouts, so giving them a referral credit is easily within their cost-of-acquisition calculations.

7. App updates and Service Alerts

Either by push or inApp, content, you may want to tell users something thats happening immediately that may affect them.

I like this one because its human and fun (who wouldn’t love a sad wrench!) and its a clear CTA. Notice also its a nuclear option, there is no dismiss on the modal so the user performs the CTA or presumably backgrounds the App and won’t be a live user until this step is completed.

8. Welcome Popup or Carousel

We’ve talked a lot about carousels before and our mixed feelings about them. If this is how you define “on-boarding” then you are NOT thinking about the full-user journey. BUT a welcome is good for orienting and informing the purpose of your App in terms of the user’s needs.

9. Upsells, Offers & Rewards

Converting Free to Paid or Upselling a plan is a key part of the the App economy. Allowing users to progressively unlock new capabilities is an action worth “testing”.

When you test you are allowing the data to tell you what converts most effectively.

A/B testing different prompts and messaging with a tool like Contextual can be done before hard-coding into the application. This “test-and-learn approach is the iteration speed Prodict Managers need to achieve growth.

10. Action Needed

Different to the “Empty State” requirements of first-time on-boarding is driving more “sunk cost bias” into the user’s experience of the application. This sounds evil but is usually to reap returns for the users. LinkedIn is famous for driving users to complete their profile, they bread-crumbed ways that a user could enhance their profile and thus sinking more investment into the App and what it would return to the user.

The red-box (I added for emphasis) shows how LI devotes a large amount of screen real-estate embedded to guilt users to complete this task.
October 17, 2017
The peculiar lure of launchers for App engagement
Cognitive overload in mobile Apps is a real problem for designers. My general rule-of-thumb for a well-designed mobile App is to assume the user’s IQ is halved.

This is not intended as malicious or critical of users, its a recognition that mobile apps serve people on the run, getting out of cars, crossing streets – so that splits their attention and IQ.

So if a “desktop design” approach is shoe-horned into a mobile App, the cognitive overload conflicts with a “Jobs To Be Done” (JTBD) imperative.

So great Apps have layer of content and a layer of guidance. This is where Launchers play a role.

You’ve seen…

One of the most common tool-tips is universally understood, its usually small, unobtrusive but in a moment of confusion, the user knows there is access to more information.
Of course the other variation of this is the standard button.
The benefit of a button is that obviously its known as a clickable element but the downside is the screen-estate and conflict with the App’s own features. Perhaps the button starts to look more like the application and that probably not what you want.

This pattern is also now understood by everyone, even your grandmother. Specifically This is Netflix telling me, or even urging me, to find our what special gift is awaiting me when I touch the badge.

In fact, Slack took it a step further by actually icon-ing messages as gifts 🙂

Now in 2016/2017 has emerged “the Hotspot” what might eventually be remembered as helpful as the HTML <blink> tag! (they are usually more subtle than this).

This new indicator is pretty compelling and is used as an alternative to throwing up a mandatory tip when you enter the page.

The great cognitive benefit is that the pulse means:
- I’m more important than a tooltip
- Come back to me when you are ready
- but you won’t miss me!
Usually these pulses settle down to be simple dots, so our brain makes the connection that help is available without being distracted by the pulse.

Deceptively simple

One of my all-time favourite acts of design genius beats anything that Jony Ive came up with.

Can you guess what it is?

Wait for it…..

The Facebook like is deceptively simple, but it punched directly through to human reward systems. That little icon has injected more dopamine into human blood streams than ever before!

Simple but Powerful

So little icons might seem lightweight or trivial, but the congnitive connection that matches “Job To Be Done” to a simple icon is both:
1. cognitively efficient (remember our low-IQ users)
2. efficient use of real-estate
3. stands separate to your App’s functionality.
The Magic of Launchers

In summary, launchers are like a great waiter at a great restaurent….A launcher never over-services, never shouts, is available when needed and delivers the good.
- Get the Job Done
- Get out of the way
- Measure the success
- No Code
UPDATE:

One of our advisor’s Henry Cho* wrote me with the following insightful comments on the post:

It’s touching on affordance and status indication.

and

you are saying that there will be a tension between overloading users cognitively and providing system status and call-to -action.

and

Be to clear and paradoxically the message can add to cognitive overload. Too subtle and the message is not conveyed to the user and engagement forfeit.
There is another element to add to this which I think you are well placed to support. Temporality, meaning the way that you signal can change over time, triggered by time or user interaction.

In these comments, Henry nails the key issues we aim solve about contextual engagement. I’m going to grill him more about what “Temporality” means to him 🙂

** Henry is a leader in Mobile UX and been involved in one of the most highly regarded banking applications. He’s currently Head of UX and AI at Upwire and you can follow him on at @hankatronic
October 10, 2017
Skype’s new look mobile onboarding
Given there are so many options these days for chat + voice, you may have already abandoned Skype. Facebook, WeChat, Slack, Hangouts are just some of the contenders and many of us have all these plus WhatsApp running concurrent threads.

But its clear the Skype team want to change that and get back into the game, a massive installed base is shifting to the other platforms and mobile. Skype was truly awful (slow, cumbersome) on mobile and is probably in the minds of most consumers “a desktop product”. Here is some onboarding from their new Mobile App (on Android).

The most common landing page in Skype is your contact list and they’ve provided a basic 2-step tip tour to teach you about the new user interface.
1. Its a nice design to have the personal profile at the top-center but its not a common design pattern, so its smart to tell users.
2. Moving the “call” button is a great “instant gratification” change. But Skype has to retrain old users from going to the contact first and then calling from there. This inversion is smart but teaching us in this tip is smart too.
In Chat/Call

Whilst commencing the call, they provide a few clues for how you can handle chat oriented activities.

To me, this is a bit of a miss. There are at least three other relevant CTA’s on the screen, so adding a tip is only increasing the cognitive load for the user.

Using something like Contextual you can trigger based on certain conditions.

Here is a great example of smart user education. We call this Progressive Onboarding.

Skype has decided that after at least one call, they will help me understand how to get more value out of the product in a chat session.

They may have also only triggered for users who hanve not completed the “sharing photos”, “locations”, “GIFs” tasks already.

Missed Opportunities?

I like Skype’s new design, its reduced some of it’s bloat and the UI is more “instant” as users expect for a modern chat/voice app.

But, there is some missed opportunities for uncovering other features in the application.

For example, these gems are hidden behind the “+” button but we’ve not been told about them.

Group chat: is dead easy in Facebook Messenger and WeChat, but its buried in Skype.

New Highlight: I had no idea what a Highlight is, I still don’t know 🙂 A tip could have educated me.

Find Bots: This feature has been a powerhouse growth factor for Slack, so Skype want to catch up – but its unlikely we can find it here. Also it sounds a little scary.

Contextual could have helped Skype walk the user through a simple explanation of each of these Advanced Features, its more opportunity for Progressive onboarding – perhaps they will target me in the future. If you want to read a good example of how Twitter progressively onboards users, check this blog post.

Also Contextual can put small “?” tooltips next to a new or confusing feature. You can find an example video on this page.
September 26, 2017
LinkedIn’s New Feature by targeted tip
Mobile Tips are everywhere.

Just this morning, I had a flashback to the whole journey that started Contextual. I opened the LinkedIn App and there was an article about our good friend (and fellow 500Startups founder) Holly Cardew of PixC.

Holly has always been generous of her time, her advise and is a great entrepreneur – the Contextual team really value her support!

I wanted to see the comments and touched the comment section. As you can see LinkedIn popped up a contextual tip right at the moment of commenting. This is perfect because:
1. I previously had no idea I could add a picture
2. LinkedIn told me about this new feature
3. They targeted me as a regular commenter who had never posted pictures. Segmentation!
4. LinkedIn have been doing this for a while and so you know their analytics are telling them that contextual, segmented tips deliver uplift.
So what was the flashback???

About a year ago, we were looking for a way to add an onboarding tour to the StreetHawk Dashboard. We’d built a powerful product with many features BUT….our session analytics and exit surveys were telling us people were getting confused.

The onboarding solution we selected was open source built by LinkedIn called HopScotch. It lets you do web tips like this.

So that seemed like a cool idea at the time BUT we failed in our deployment. We should have used something like Appcues that allowed us to iterate faster. Why did we fail with Hopscotch?
1. You have still have to program the tips, tours. You need developers and our developers are busy with our product.
2. Couldn’t iterate. By being locked into a code-based solution we’d need to roadmap small changes – even wording!
3. Inflexible. Initially it seems like a simple set of javascript rules and you are up and running. Wrong. If you want to do something not exactly the Hopscotch way, you get into more complex coding – especially on multipage
4. No segmentation. We were spamming all our users regardless of their familiarity with the product.
5. No analytics. Why do a tour if you don’t know whether it improves performance? How far did a user get into a tour?
6. No A/B splits. Just like analytics, we didn’t know if a tour/flow improved engagement metrics.
So we failed to make a success of Hopscotch and learned the characteristics (from a customer’s point of view) of what an onboarding solution should provide.

We were scratching our own itch and we realized along the way that customer’s in our very own mobile sector were experiencing the same need. We went out and talked to a bunch of people with mobile apps and learned their painpoints. They were often that

Contextual was born!

Contextual has a lot more to do and a huge market need to address. Consumers choose to engage with their vendors via mobile Apps – we aim to help deepen that engagement.

Mobile Tips are everywhere.

Just when I was transferring Holly’s image over for this blog post, Google Drive pops up a “New Feature” Tip. Here it is. The big companies know contextual, unobtrusive tips make sense. Your App could benefit from it too!
July 4, 2017