Favorite UX/UI Features of the Human Interface Guidelines
The Android and iOS Human Interface Guidelines not only help make your app beautiful, these features also enhance the mobile experience of your users. Below you’ll find my top picks from the Human Interface Guidelines for Apple and Android. While there’s some overlap, my selections were chosen for the specific platform based on how helpful I found the documentation to be when solving user experience and design problems.
In our ongoing quest to make apps beautiful and efficient for our clients, there are many UX/UI elements and guidelines. Here are my favorites.
When used correctly and according to guidelines, floating action buttons are the best of mobile experience: simple, utilitarian, and quick. FAB buttons are great for calling out one single action that every user wants at the “touch of a button.”
On Android, menu drawers used to be the go-to navigation. I never cared for them much because editing app experiences is hard when you have “all the room you want” (as a client once said to me). Tab bars are a far superior navigation structure. They are limited to five main actions and are always visible. The former helps prioritize functions to keep apps light and the latter gives users an anchored sense of where users are in an app and where they can go.
Cards are not a new concept in mobile UI, but by writing requirements around them, Android solidified cards as a template that can be used to either merge varying data into a single view or separate visually similar data into different sections. Data feels smaller and more manageable when split into cards.
User experience is about storytelling and motion communicates more with less. When I save something, it goes into this tab? What a better way to communicate that than to see the object fall into it. Small interactions and visual feedback are easily communicated through a well-designed animation.
Android app icons enjoy a freedom that Apple icons do not. They are not bound by the shape of the rounded rectangle. If designed to the guidelines, Android app icons should come away feeling tactile and three dimensional, as if designed with physical materials.
Rich Push Notifications
The only time that you can initiate a conversation with users is through push notifications. With the additional rich functionality (video, images, and action buttons) of push notifications, you can engage with users more meaningfully—before they’ve even entered your app.
The ability to use a fifth direction to unlock or uncover a piece of functionality is one of my favorite things on the Apple platform and devices. Prior to 3D touch, extra features and gestures were designed for a long press that would sometimes get lost. With this new feature, experiences can be more tactile and interactive.
I love San Francisco font. As a system font, it is fabulously designed to be readable on various device sizes and from varying differences (I see you Apple TV!). It’s tall yet space saving, and can range from light and friendly to big and bold simply by selecting a weight.
Toolbars are one of my favorite ways to communicate available actions in context. The ability to hide toolbars when interacting with the view also make it a non-invasive way to add functionality to a busy view.
Size Classes and Multitasking
Size Classes are a tough concept to explain clearly; instead of designing for every possible layout and device size, size classes are split into either regular or compact—which is supposed to translate into a design fit for every device. It wasn’t until multitasking was introduced that size classes really started to sing for me. Now I cannot create without this essential design guideline.
Of the features I mentioned, cards are my top favorite. Especially with the changes to the Apple App Store coming with iOS 11. There’s something so clean about being able to let content shine through in its own little boxes and using cards to create templates for recurring data types.