Mobile Interaction: Website or app? Optimize for both
Over the past several years, marketers have often been faced with the conundrum of where to allocate funds in order to better compete in the mobile space. Should I focus my budget on the mobile app for my business, on making the website optimized for multiple device types (responsive or adaptive) or should I attempt to do both?
Take user behavior into account
While I feel like the question above has been well documented in other resources, I think one of the most important concepts to keep in mind is that whether you are focusing on a mobile app or on your website, user behavior should be considered first.
As the expectations of the billions of users with mobile devices continue to converge, the question should no longer focus on which medium (the mobile web or an app) you should focus on connecting with your users on, but instead on how you can most effectively connect with them no matter which medium you choose.
Luckily, there are numerous transferable principles between the world of app interaction and web design that can be applied with relatively little effort on your part.
Visual attention vs. interaction
Don’t forget the classics. Despite the ever-expanding screen sizes of devices, in most regions, people still start reading at the top left of their device. However, it is important to remember that on touch-reliant devices, interacting with content at the top of the screen with your thumb has become increasingly more difficult as screen sizes in mobile devices have grown.
Why do you think Apple implemented a new “Reachability” control on the iPhone 6 that brings content from the top of the screen down about a third of the phone?
This being said, whether you have an app or a mobile site, make sure you prioritize content you want read at the top of the screen, but be selective in placing content you want interacted with at the top of most screens.
For items such as buttons, filters, drop-downs, quick navigation, etc., consider utilizing real-estate toward the bottom of the screen instead of toward the top to make the user’s life easier. Menus and navigation are still generally better at the top of the screen as the menu “hamburger” (see screenshot below) now seems to be so ubiquitous that it has become web-standard for responsive sites Techcrunch also offers a great article on mobile navigation and reasons to “kill the hamburger” here.
Website or app?
If an element is interactive and may require explanation, one key thing to remember is to ensure that an explanation is utilized in close proximity to the source of the element. Don’t assume that your visitor is going to intuitively “get it” right away.
In my own experience designing and developing apps, our team learned this lesson the hard way. Take a look at the screen-shot below.
The object the visitor interacts with is at the bottom of the screen. A vital piece of information for the visitors experience was easily missed at the top left of the screen because users were immediately opting to start playing. Can you see the difference?
The wind speed was critical to the overall user experience, and we placed it at the top of the screen, away from the object the visitor was interacting with. Even worse, we chose a design aesthetic we thought looked great but actually obscured the wind speed even more.
Another tactic, is to offer visitors or users a tutorial on how to use the app or mobile site for the first time. This might be a good option for more complex apps or mobile websites.
Whether you are creating an app or a responsive website, the basics of usability ring as true today as they have in 2011.
You might also like
B2B Web Optimization: 140% surge in mobile transactions through responsive design effort [MarketingSherpa case study]
Marketing Research Chart: Optimization of mobile efforts [MarketingSherpa chart]
B2C Marketing: Top takeaways of the year on mobile optimization, retargeting and behavior-based personalization [MarketingSherpa case study]
Mobile Marketing: Optimizing the evolving landscape of mobile email marketing [MarketingSherpa webinar archive]
Categories: Marketing apps, mobile marketing, mobile optimization, optimization, responsive website, testing and optimization
