2

In the context of a product that has an iOS, Android and website-version where users can work together independently of the platform they are using it on, I want to let users know that there are native apps available and nudge users to download them in a non-obtrusive way. I would like to fit this information in the sidebar of the website-version. The sketch of the sidebar design is shown in design A, with the app icon represented by the blue template at the top.

Design A Design B

To nudge iOS or Android users that visit the website towards the native app, I would detect the requesting browser and animate the app icon to a download button using an overlay approximately like shown in design B.

But there is still a major problem though: Desktop users might prefer the native app versions, but might not know that they exist. Since they visit from a regular desktop browser, the previous approach doesn’t work, and the information that native apps exist needs to be presented in another way.

The obvious solution would be to use the standard “Available on the App Store” and “Available on the Google Play Store” badges, but I can’t seem to get them to fit in with the current design. How do I best represent the information of the existence of the native apps without breaking the design?

6
  • Not sure I'm following you...can you explain why the desktop user would prefer the mobile app. Is there a significant difference? What's the point of giving them that additional choice to be made? Sep 4, 2014 at 15:11
  • The product is used as a tool for another software, which is always used in full screen mode. Some people prefer to use our product on a second monitor and are fine with the web browser version. Others, though, prefer to use the apps on a tablet/smartphone, because they don’t have a second monitor. These users usually Alt+Tab out of the software to use our product, and it hinders their workflow. Especially for them, knowing about the apps is important.
    – j4zz
    Sep 4, 2014 at 16:02
  • Isn’t there something like <link rel="alternate app"…>? Wouldn’t help much with the desktop case, though.
    – Crissov
    Nov 3, 2014 at 17:04
  • @Crissov Could you elaborate on that? You mean a link to pages dedicated to the apps? If so, that might be a clean and viable way. Maybe I’m just looking for a fancy solution where a simple one might work better.
    – j4zz
    Nov 4, 2014 at 9:13
  • I meant auto discovery hints like <meta name="apple-itunes-app" content="app-id=…"> for iOS 6+ and maybe <link rel="chrome-webstore-item" href="…"> for Android or rather this jQuery plugin and google-play-app.
    – Crissov
    Nov 4, 2014 at 10:04

1 Answer 1

1

In most cases, the way that you would advertise the existence of these options would be to show badges like that on the homepage of your website or wherever your app is acquired. If your app is downloaded from a site somewhere, that's where I'd put some kind of note or badge.

If you app is distributed through some other means, you may need to look into alternatives. I don't think it's possible to add this information in an obvious way to your desktop app. The reason is that it will be obtrusive to users who don't want to use it or to those who already have it.

In summary: ideally you should tell them about the mobile apps on the website from which they download the application or via some other means external to the application itself.

2
  • Thank you for your answer. We actually have a site like you suggest. What we found, though, is that other sites that advertise our product like to directly link to the website-version in order for users to “jump right in”, since the product is very self explanatory, instead of the landing page you suggest. Do you think it would be a better approach to let the users always hit the landing page first and then offer the option to launch the product’s website-version?
    – j4zz
    Sep 4, 2014 at 16:12
  • Yes. It's the only way I can see that you'll effectively get the word out about your app. Sep 5, 2014 at 5:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.