There is no doubt that your mobile presence is as important if not more important than your desktop presence. Ensuring your content is available through mobile devices is essential, whether that be a mobile-friendly website or a bespoke app. Translating desktop content to a mobile interface shouldn't simply be a question of rearranging the size and placement of content to fit a mobile screen. Here are five micro-interactions that the touch screen of mobile devices makes available to you and which can drastically improve the UX of your mobile content.
1. Hamburger Menu
It is a tried and true way of organizing header content or menus with more than five items. For some websites, organizing content with the classic five buttons on the bottom of the screen may be a good solution. For most websites, there are more than five items in your desktop menus and navigation that you need to make available to your mobile guests. The hamburger menu is small, can overlay the current screen, is easy to use, and can hold several navigation links.
2. Swipe
On many desktop apps, CRUD operations are often accessed with clicking, sub-menus, or maybe even found within ellipses. But the small click areas are often too small for finger-touch interactions on a cell phone. Instead, use swipe! It's something many users are used to, but it comes with a huge caveat. Since there aren't visual indicators, the best practice of using swipe for edit, move, or delete type functions is essential. It must be used in places where users can infer that it may be there from common practice across their whole experience with mobile apps. This is not something to use in a creative or unique context, because it will be unlikely that users will ever be able to find it.
3. Compressing Complex Info
On your website, you may offer a large amount of information or complex information. You have a lot of screen real estate to work with which means this can still be digestible for your visitors or users. (Sometimes you may still have way too much info even for a webpage, but that's a different conversation.) Once you consider how to present this same content on a tablet or cell phone, you need to identify ways to condense that information. A key micro-interaction will be making that info expandable for your mobile users who want to dig deep. This could be implementing accordion functions, carousels, or tapping a tile to expand. Each of these can then reveal more details.
4. Press and Hold
This is another great option, like swipe, which can help when multiple actions need to be available on the same object, but you don't have space for a bunch of tiny buttons. Also like swipe, there isn't an option for a visual indicator that this action is available to the user, so it must be used in very expected circumstances. A couple of examples where users expect multiple actions to be available on hold are:
- Within the keyboard. This is built into the mobile OS, but press and hold is available on letters and symbols where accents or less common versions are available.
- When interacting with images. Oftentimes, apps will display menus for downloading, sharing, etc. that image when the image is tapped and held.
- When information has been cut off. This is another example of a way to expand information or additional details for the user who wants to view them but hides the visual clutter for the user who does not.
5. Pull to Refresh
Again, refresh on a webpage is often available within an app's webpage (check for new mail that comes to mind). But having a dedicated button available on an app takes up precious real estate! Pulling to refresh solves this problem. This is widely used on many social media apps, including your email, and often incorporates important loading visual signals to let the user know that your app is still working while they wait.
These are just a handful of the standard practices in place for mobile app development. If you have a complex web app, simply making the content dynamic and accessible on mobile may not cut the UX mustard. This is why it is essential to consult with experienced UI/UX designers and engineers when creating your mobile app.