5 Important Mobile UX Areas People Usually Forget

5 Important Mobile UX Areas People Usually Forget

At Salty Dog we help clients to define their app. Many clients know how they want their app to solve a particular problem but haven’t figured out how the app will look from the perspective of their customers.  There are some key UX areas they often forget that can have a huge affect on the user experience.

Here are some of the most easily overlooked UX areas:

Login and Registration

Login and registration are usually the first part of an app your user will see. Some commonly forgotten sub-use cases are: forgotten password, registering email, forgotten password but haven’t verified their email, or re-sending email verification.

Forgetting passwords can happen more frequently on mobile devices. It can get really annoying for a user to try a bunch of passwords, then have to go back to the main website to request a new one.  This is amplified if the registration requires email verification, and they are denied a new password because they haven’t completed this process.

The solution to these issues is to remember some of the more subtler use-cases. Here are the  use-cases for a complete login and registration experience.

  • As a user, I would like to register/create a new password-protected account, in case I don’t have one yet.
  • As a user, I would like to authenticate with the app, so that my information is protected.
  • As a user, when I start the app I would like to know if I haven’t validated my email address if I haven’t, so I know to look in my inbox or spam folder.
  • As a user, I would like to be able to resend the email verification in case the old one is expired or lost.
  • As a user, I would like to be able to set a new password via my validated email address in case I’ve forgotten my old one.
  • As a user, I would like to be able to log out of the device, in case I want to restrict access or log in as a different user.
  • As a server administrator or app owner, I want a way to log a user out, in case there is a good reason I want them to re-authenticate.
  • Application Updates

    Sometimes it is necessary to make changes to the way the app works and require users to update. For example, there might be a change to the way the server works that breaks any previous versions of the apps that haven’t updated, or there is a really important security fix.

    The solution for this is to provide a way to make sure the user updates the application, and then gracefully degrade functionality if they do not update. A simple flow outline might work like this:

    1.On app start, connect to the server supplying the version of the application.
    a. If the version does not need to be updated, then respond with an OK.
    b. If the app DOES need to be updated, then respond with a “needs update”.
    2.If the app received an “needs update” response from the server, then:
    a. Inform the user they need to update.
    b. Let the know that functionality of the app will be impaired if they do not.
    c. Give them an easy way to facilitate the update such as a button that takes them to the App Store or Market app to update.

    Important Notices

    It is really important to be able to send notifications/notices to the user. The purpose can be anything from letting them know about planned server maintenance, other companion applications, updates/upgrades to the functionality,  or bug fixes.

    What makes this so critical is because of how difficult it can be to communicate with the user. You need to communicate with them so you can set their expectations about app functions and changes. In the absence of information, the user may jump to negative conclusions that can result in bad reviews, or worse, uninstalling your app.

    The fix is relatively easy and accessible: add a way to send notifications to the user. There are many third party services that can do this. Some even allow targeted notifications to segments of your users.

    Alternatively, you can implement your own solution. The messages can be displayed using webview controls, allowing you to point the user to blog posts or release notes. The app just needs to be smart enough to know if the user has seen the notification before so they don’t get spammed with notifications.

    Network Problems

    Issues related to the network or connectivity are ignored a lot of times, and are only discovered in testing or when a user has issues with it. These fall in three basic categories:

    1.Server issues. The server might have an issue. The cloud provider may decide to reboot your server. Even though the network is functioning correctly, the server may not respond.

    2.Network issues. Sometimes there are outages either at the ISP/provider level or somewhere in the backbone.

    3.Device connectivity. It could simply be an issue with network connectivity from the device. The user is out of cell range, or service quality is low.

    4.Planned outages. The server might need to be upgraded, or the system restarted.

    There are two basic ways of dealing with this. First, design the app with lack of connectivity in mind. For example, if the app cannot reach the server then handle it gracefully. When the network is not reachable, you can give an indication in the app so the user has an idea of what is happening. I’ve seen some apps show an indicator in the title-bar.

    Second, leverage the Important Notices suggestion above. If you’re using a 3rd party notification service, then you can inform users that you’re aware of the outage and when they can expect it to be available again.

    Interacting With Someone Who Doesn’t Have the App (Yet)

    When designing social apps such as chat, it is easy to forget about the case when one person has the app and they wish to interact with someone else who doesn’t. This is important because it can provide a viral way of gaining more users.

    We’ve blogged about this in detail here and here.  The basic problem is how to interact with someone who doesn’t have the app yet. Once you solve the interaction problem, how you can turn that into a seamless onboarding process for a new user.

    The answer is to use something called deep-linking in conjunction with SMS messages and a bit of magic from the iOS web-view control and Android App Store broadcast message. This allows you to send an invite link to someone over SMS, which sends them to a landing page that includes links to the appropriate web-store to install the app. After they’ve installed the app cookies can be used on iOS or broadcast messages from the Google Play Store App, to let the newly installed app know there was an invite from someone else.

    This allows an invite to go to someone without the app, them to install the app, and then pick the invite up from where they left off as if they had the app installed in the first place.

    Summary

    When making your mobile project it is important to remember what happens after the initial release and use. As the overall quality of apps has improved, sensitivity to clunky apps has increased. Failing to include these user stories is very likely to result in a user deleting your app.  These user stories should become a part of your larger release strategy to help you plan for ongoing updates, user engagement, and to ensure that you have the infrastructure in place to support users when they have a problem with the app.

    User Experience:  Inviting users to your Android or iOS app Part 2

    User Experience: Inviting users to your Android or iOS app Part 2

    Previously in (User Experience:  Inviting users to your Android or iOS app Part 1) we explored a way of inviting and onboarding new users to an application. It worked but had some UX issues related to it.

    The solution relied on putting deep links in SMS messages and then sending them to the recipient. Here are the 4 use cases again.

    A ) Bulk invites, or outside of the app, inviting someone who may or may not have the app:

    1.The user’s information, name, phone number and possibly custom message, is captured and inserted into the database along with a unique identifier.

    2.The website then generates an SMS with an url that contains the unique identifier as a parameter.

    3.The SMS is sent. That’s it!

    B ) Someone uses the app to invite someone else who may or may not have the app:

    1. The user selects a name from their contact list.

    2. Optionally, they write a message for the receiving user.

    3. The app then makes an authenticated rest call to the server, where the information is inserted into the database.

    4. The rest call returns the unique id that was generated.

    5. The app formats an url using the unique id, and then sends in in an SMS message to the recipient. That’s it!

    C ) Someone receives an invite who does not have the app installed:

    1. The user receives an SMS with a web url in it. The url has a unique id appended as a query parameter.

    2. The SMS has a short message, asking them to click on the url for more information.

    3. The user clicks on the url.

    5. Since they don’t have the app installed the url starts the default browser and the visit the web page.

    6. The web server, looks up the unique id from 1), and retrieves the details of the invite such as the recipient’s name, or even a custom message. It also includes a link to Apple App Store or Google Play Market for downloading the appropriate app for their operating system.

    D ) Someone receives an invite who does have the app installed:

    1. The user receives an SMS with a web url in it. The url has a unique id appended as a query parameter.

    2. The SMS has a short message, asking them to click on the url for more information.

    3. The user clicks on the url.

    4. Since they have the app installed, and deep linking is enabled, the app is opened.

    5. The app fetches the parameter from the url the performs a REST call to the server and looks up the details for the invite.

    6. The app displays a screen with the details.

     

    A and B dovetail into C and D. The problem is that if they have the app installed the will still be receiving SMS messages and the user has to click on it. That is at least two clicks just to get into the app.  1) Select the notification to open the SMS app. 2) Select the URL to open up our app. Depending on the operating system and version, there might be another step in there to verify that you want to open up the app. That might end up being really annoying! Fortunately, there is a better cleaner way to handle this. Basically, we want the app to automatically open when it receives an event notification.

    We can easily do this using the push notification facilities in iOS and Android. The trick is knowing if we should send an SMS or send a push notification. We have part of the equation solved already. We know the phone number of the person when they originally were sent the invite. We can use that to create a user account that just hasn’t been tied to the information for push notifications. When the recipient installs the app we can associate the phone number with that app installation. This way in the future when we send an event to that phone number, we can check if it is associated with an installation. If it is, we send the push notification instead of an SMS. So we’re almost there. The only question is how do we associate the phone number to the installation. We can ask the phone number, or we can request permission to read it. However, there is a slicker way to handle it.

    The Magic

    iOS 9 comes with some new abilities. The new Safari View Controller can share the same cookie space as the main Safari app. This means you can verify if the install action originated from a click in safari. Google Play has an INSTALL_REFERRER Broadcast. Basically, you just need to append a custom referrer to the query parameter to the end of the Goole Play Store URL when you send the user there. Google Play will fire off a broadcast intent to your app that includes the referrer. Here is an updated use cases for the first time the app is installed

    Someone receives an invite who does not have the app installed:

    1. The user receives an SMS with a web url in it. The url has a unique id appended as a query parameter.

    2. The SMS has a short message, asking them to click on the url for more information.

    3. The user clicks on the url.

    4. Since they don’t have the app installed the url starts the default browser and the visit the web page.

    5. The web server, looks up the unique id from 1), and retrieves the details of the invite such as the recipient’s name, or even a custom message. It also includes a link to Apple App Store or Google Play Market for downloading the appropriate app for their operating system.

    6. The web page sets a cookie (for the iOS case) and the link to the Google Play Market appends a referrer that includes the unique id created in 1.

    7. The user installs the app.

    8. (iOS) When the app is run the first time, it loads the Safari View Controller, then looks for that cookie. If it is there then the user installed via visiting the web page and we can look up the invite and associate the phone number with the user record via a REST call.

    9. (Android) When the app is run the first time, it waits for the broadcast from the Google Market App. If it is received, then the user installed via visiting the web page and we can look up the invite and associate the phone number with the user record via a REST call.

     

    Now you have a very slick invite and onboarding process!

    User Experience:  Inviting users to your Android or iOS app Part 1

    User Experience: Inviting users to your Android or iOS app Part 1

    Often the use cases and implementation around inter-app invites is overlooked. Handling it easily and well can be a bit subtle.

    You have to deal with the situation if an intended recipient has the app installed. If they do not, you will want to do one thing. If they do have the app installed, then the invite notification should be handled in app. It becomes a bit of a chicken and egg problem — how does someone receive an invite if they don’t have the app installed?

    Fortunately, there is a clever thing you can do for invites that handles both cases. It leverages a feature that both iOS and Android have: The ability to map an url to an app, so when the user taps that URL in email or sms (or a web-page) it starts the app if it is installed. This is called Deep Linking.

    In Android this is done using deep linking and an intent filter in the manifest:

    When Android detects that url, it will open up this activity. More details here: https://developer.android.com/training/app-indexing/deep-linking.html

    In iOS 9+, this is done with universal links. Basically you include an apple-app-site-association file that describes what urls your app should open. For example:

    Note: don’t append “.json” to the file.

    See more details here.

    Let’s talk about the use cases in a bit more detail and then walk through how these are solved using the feature I described above.

     

    There are 4 use cases you need to consider:

    1. Someone receives an invite who does not have the app installed

    2. Someone receives an invite who does have the app installed.

    3. Bulk invites, or outside of the app, inviting someone who may or may not have the app.

    4. Someone uses the app to invite someone else who may or may not have the app.

     

    The first are almost the same. It is just a matter where the SMS is sent from.

    Bulk invites, or outside of the app, inviting someone who may or may not have the app:

    1. The user’s information, name, phone number and possibly custom message, is captured and inserted into the database along with a unique identifier.

    2. The website then generates an SMS with an url that contains the unique identifier as a parameter.

    3. The SMS is sent. That’s it!

    Someone uses the app to invite someone else who may or may not have the app:

    1. The user selects a name from their contact list.

    2. Optionally, they write a message for the receiving user.

    3. The app then makes an authenticated rest call to the server, where the information is inserted into the database.

    4. The rest call returns the unique id that was generated.

    5. The app formats an url using the unique id, and then sends in in an SMS message to the recipient. That’s it!

     

    A couple notes about this. In step 3, want the user to be authenticated so that someone couldn’t call the REST api directly and use it to spam. In step 5, the app sends the SMS. The server could send it, and in the future you may want it to, but if the app sends it then the user pays the SMS costs.

    Someone receives an invite who does not have the app installed:

    1. The user receives an SMS with a web url in it. The url has a unique id appended as a query parameter.

    2. The SMS has a short message, asking them to click on the url for more information.

    3. The user clicks on the url.

    4. Since they don’t have the app installed the url starts the default browser and the visit the web page.

    5. The web server, looks up the unique id, and retrieves the details of the invite such as the recipient’s name, or even a custom message. It also includes a link to Apple App Store or Google Play Market for downloading the appropriate app for their operating system.

    Someone receives an invite who does have the app installed:

    1. The user receives an SMS with a web url in it. The url has a unique id appended as a query parameter.

    2. The SMS has a short message, asking them to click on the url for more information.

    3. The user clicks on the url.

    4. Since they have the app installed, and deep linking is enabled, the app is opened.

    5. The app fetches the parameter from the url the performs a REST call to the server and looks up the details for the invite.

    6. The app displays a screen with the details.

     

    So there we have a basic way of sending invites users whether or not they have the app installed. However, if they have the app installed the will still be receiving SMS messages and the user has to click on it. That is at least two clicks just to get into the app.

    1. Select the notification to open the SMS app.

    2. Select the URL to open up our app. Depending on the operating system and version, there might be another step in there to verify that you want to open up the app.

     

    It works though it is a bit clunky. Every time an invite is sent, the user will have to click on the link in the SMS. In a future blog post, we’ll see how to optimize this and make it better.