Category: Launcher

  • Announcing the New Contextual Web Creator

    In the upcoming weeks we are releasing an update to our Chrome Extension for web apps.

    This is a great addition and actually shoots past the current mobile guide creation interface which will adopt some of the elements here. Specifically:

    • New design for a user friendly experience & navigation
    • New targeting tool for tip placement & repositioning
    • New guide settings interface with improved selection criteria process for a more streamlined experience
    • Tight point-and-click selection of targets and launchers with css/class/DOM overrides.
    • Search & filter guides easier with the new guide home screen
    • Edit guide name easily

    There are so many great features here, we’ve split it into two videos. If you’ve got any questions, hit us up on support@contextu.al or our on-site chat!

    https://vimeo.com/566908938/641fa71371https://vimeo.com/568797474/a90ded76ab

  • 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 🙁

  • Cognitive Overload & Feature Discovery in Mobile UX

    I’m a dabbler in matters of neuroscience and cognition, I listen/watch things from Sapolsky, Dennet, my kindle is loaded with Sam Harris, Metzinger and love to torture my Sunday breakfast partners about what our fear of snakes teaches us about App design.

    A little knowledge is dangerous, but can be applied to Mobile App design and human interaction — particularly how Apps help us and stress us. From years of mobile product experience, I believe a design’s balance cognitive overload and resultant stress should be a major counter-balance to a Product Manager’s KPI’s to moooaaaar session time in the App.


    Cognitive overload from mobile devices is an “un-understood” problem for users.

    The results of a recent survey of 14,000 people revealed statistics that imply “the more competent you are with Apps, the more trapped you are”.

    The clear sufferers (“I feel more stressed”) are the most powerful adopters — the 26–55 year old range and in particular 36–45. These people are mid-career, mid-family and if they are like me they have more than 5 chat Apps with business and social conversations appearing in all of them. The chat is happening while dropping the kids at soccer and their colleague on the chat wants an immediate response (they are sitting at their desk).

    Older age groups likely have less Apps on their phones and less competing social signals.

    The problem is “Un-understood” because we are all frogs slowly being boiled in the pot — more Apps, more usage and the stress (temperature in the frog metaphor) will keep increasing. Each App has initially been optimized for single purpose flow but:

    • Shouting: each App now contains notifications forcing the user to context switch (at massive impact to flow and stress production). Moreover, Apps compete exacerbating the stress.
    • Feature Discovery: any successful App has more than one feature which the Product Manager wants to introduce to deepen engagement and utility.
    • Visual Clutter: Features need to be JTBD-focussed when a user wants them, otherwise “out of the ways” when not. Its well understood that desktop design does not map to Mobile App design, but users still expect the same features in the Mobile App.

    I propose a solution for designers that leverages the existing cognitive processing hardware humans have without creating overload.

    What snake detection teaches us about layers of cognition

    A fascinating example of visual cognition is the “Snake Detection Theory”. Simply stated: when we were monkeys, snakes (or their giant predecessors) were an evolutionary threat.

    Our evolutionary response was:

    • natural selection: the survivors (us) developed visual detection wiring to accelerate response to “snake-like” shapes hidden in the leaves.
    • Signals sent to the adrenals (all the way down in the kidneys) trigger life-preserving flight/fight response.
    • This acts waaaaaay faster than prefrontal cortex (PFC) rationalizing, this which spins up a few hundred milliseconds later and provides more sophisticated analysis of the threat. (“ahh, its just a stick”).
    • today we retain that biological ability and will startle if a rope or stick is lying across our path.

    Another layering example (unrelated to stress) is our in-built facial symmetry detection as a gene preservation trait. (“If I can mate with this symmetrical partner then my offspring will have greater chance of doing the same”).

    So our visual machinery has innumerable layers processing below our consciousness: performing edge detection, pattern matching, classification etc. App designers can take advantage of this knowledge and apply it.

    Layering for Cognition

    The solution to cognitive load in Mobile Apps has been to “dumb-things-down”. A well-designed mobile App should assume the user’s IQ is halved: recognition that mobile Apps serve people on the run, getting out of cars, crossing streets — these activities split their attention and effective IQ. Therefore UI JTBD is a primary design goal.

    This does not mean the App should be less rich or have subtracted (or unbundled) features. Throughout the user’s journey, the unlocking of new features can be done outside the initial use-case — enriching value to the user.

    I propose user’s already understand the presence of a “signal layer” that is separate and distinguished from App design. In our blog, we cover a lot of tear-downs and examples where Facebook, Google, LinkedIn are already using a well-understood layer that users’ recognize and process automatically.

    Just as the brain has high speed “Snake Detection” that executes well before the PFC gets involved — by “layering” in a UI design we are consciously reducing cognitive stress. Users already understand this layer and cost zero processing power, context switching and interruption to flow to be aware of them.

    Users automatically know they exist and can return back to them as clues, guides and signals from App complexity. This is a far better solution than notifications, visual cluttered UI or removing the feature from the mobile UI completely!

    Common Signal Layer elements

    The good news about layers is that we use them already. We just don’t have an organized way of talking about distinguishing engagement (or journey) elements from App objects at the design phase.

    Here are some common engagement object in Mobile and Web UIs.

    Modals — the classic disruptive stop to flow. (“do this now”).

    Tips — less intrusive “clues” that should be presented contextually to aid a users understanding

    Placeholders — the light gray text that provides a clue in an empty text field. This is a nice use of screen real-estate to offer help without visual clutter.

    Launchers (tooltips) — graphic clues that offer expanded help to the user in the context of a specific object, field or actions.

    These objects cognitively sit in this signalling layer above (or distinct from) the application functon. Great Apps have layer of content and a layer of guidance (“signalling”). See our tear-downs for examples.

    Lets take a look at how Launchers play a role as a “signalling layer”.

    Launchers are one of the most common tool-tips and 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 Look at me 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: I cognitively know Netflix telling me, or even urging me, to find out what special gift is awaiting me when I touch the badge.

    Small things are underrated

    As mentioned earlier, our evolutionary survival has benefited from negative biases. So usually we only give significance to things that annoy or threaten us. So tooltips and launchers are taken-for-granted. That’s fine but is it a clue to how we should design.

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


    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!

    In summary, launchers are like a great waiter at a great restaurant….A launcher never over-services, never shouts, is available when needed and delivers the goods.

    • Get the Job Done
    • Get out of the way
    • Measure the success
    • No Code

    Too Subtle? (Your Apps undiscovered features)

    As a Product Manager, you have to defend your design from your management team. If you are too cautious in alienating users by over-burdening them, then risk them not graduating to activated users.

    Bad actors like Facebook have set precedent for spammy behavior but they are the in rare position that their spam is perceived as a communication from a friend, so the dopamine shot

    Discovery — we think that contextual, temporal feature discovery is the antidote to cognitive overload. The delivery mechanism is on different layer that the user can readily access and understand that its separate to the Apps utility but can unlock more utility (at will).

    The UX analog of MVC

    Programming radically changed (improved) with the introduction of Model, View, Controller (MVC) and its subsequent variants. Separation of Concerns allowed programmers to organize code according to recurring roles (data representation, date presentation).

    To my knowledge User Journeys and engagement are still largely considered “more art than science”. I challenge that at a minimum model is an “App Layer” and an “Engagement Layer” — and that this model already exists but is not formalized.

    A slightly more radical approach is an “App Components Layer” and an “Engagement Layer” and the user has access to the latter.

    The Long View — add/subtract App components

    Components — Why shouldn’t Apps be more like a dashboard? Why can’t they be componentized to allow users to show/hide/discover/unlock elements. If I don’t user UberEats, then the presence of it in the App is clutter to me. We know it serves Uber’s interests to have it in my face — but I pay the cognitive tax for that?

    In devop’s lingo: this is “Docker for App features”.

    Many Apps/sites already use a capability called “Feature-Flags” that allow add/subtract of components (and component versions) under developer control. It allows for A/B tests — but its not at the user’s option, its something that could be put under the control of users. We don’t know the pattern for that. As an extension of layering I’m excited about this area as a major shift in app design and delivery.

    If I decide I want to get UberEats back in my app, then the engagement layer pattern allows me (the user) to easily select that.

    User Access to the Engagement layer — using the layer diagram above, a user gesture would allow a user to access the orchestration capabilities of the App. To show/hide features and to strip back the interface to the utility they supports their JTBD. Such a gesture and orchestration UI

    Uniformity and Predictability —Consumerism has programmed product designers into thinking about fixed designs. There is nods to “Customerization” in Volkswagon bugs, Mini’s and Shoes of Prey. However, Apple has built the most valuable company in the world by avoiding Paradox of Choice.

    Temporality and Context — In the early days of the mobile push notification space, we learned that intersecting location context with user interest had far higher push notification open rates than normal (or spammy) marketing pushes. Basic design for “whats in it for me”. All Apps should be using contextual computing to add value to a user. The most obvious consumerizations are stories around amazon/netflix recommendations, youtube home suggestions (with many arguments for/against personalization).

    Push notifications, Alerts and Popups — Even in 2017 we still get bad Apps that ignore Temporality and Context in push notifications and emails. Contrast this with good apps like Slack that makes a nice job of snoozing alerts and EASILY setting office hours.

    User Retreat — If we don’t solve this problem, user will retreat:

    1. by uninstalling (good-bye relationship)
    2. disabling key parts of the product to escape shouty applications, I’ve mentioned in previous posts about increased happiness by simply uninstalling Facebook and Twitter apps from my phone. (Even today Facebook emails me every-bloody-day to “get back onto facebook”).
    3. Tech detox — a relatively new term but one that will increase if App design continues to be driven by harmful UX patterns.

    Summary

    App designers and Product Manager can organize their thinking into layers:

    1. Design and Experience Layer (where all the code gets done)
    2. Signal and Engagement Layer (which maps a user’s journey and orchestrates what “nudges”, clues and help move a user into deeper engagement and understanding of the application).

    It makes sense that the cognitive discoveries should be used productively to help make less stressful and more useful applications.

  • 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. 

    common app prompts - get started tip

    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.

    common app prompts - guided tour

    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.

    common app prompts - 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…

    SkypeInCallOptions
    LD_1 (2)
    common app prompts - new feature

    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.

  • 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