Webinar: Add a Digital Element to Your Booth Experience Using Lumavate (October 11 at 3 p.m. EDT)
Have you ever heard the phrase, “Good artists borrow, great artists steal”? Well, the same applies to mobile design! We’ve gathered some of the best of the best in mobile design to spark your mobile mindset, and serve as some major inspiration when you head into your next mobile project. And, on top of the design inspiration, we’re serving up a crash course in mobile design elements to help you talk the talk just as much as you walk the walk.
When kicking off a new mobile project, first thing’s first: what are you building? News flash for those C-suite executives who keep telling us we need a mobile app: there are more options! And sometimes, the other options are better! Here are three top mobile players:
Native Mobile Apps
Mobile Websites
Progressive Web Apps (PWAs)
There are a few UI/UX principles to keep in mind when it comes to designing a mobile experience that will compel and delight your users. Good news: We’ve put together a cheat sheet to get you started!
It’s all about designing with the thumb’s reach in mind. As phones and screens get larger, mobile design must take into account the range those one-handed users have. Keep in mind where your buttons and links are on your page–they should ideally be in the “safe zone”!
Mobile considerations for buttons are a bit different than for desktop–and they should be! Think about it: a tap of a finger is a lot less precise than a mouse click. Consider these elements when it comes to designing your buttons for mobile:
Color
Use color to create contrast and draw attention
Shape
Don’t get too creative–make sure your user knows it’s a button
Size
Use at least 44px to accommodate adult-sized fingers
Shadow
Consider using a shadow to add depth or show the button as raised
Padding
Create some breathing room by allowing 12-24px around your CTA
Feedback
What happens when the user taps?
Clear Call-To-Action
Make sure the user knows what a tap will do
Less screen means you need to pack more punch-per-pixel, and also means you can’t overcrowd the page! Stick with these guidelines to ensure that you’re getting your message across loud (not crowded) and clear.
Font
Pick a font (two, tops!) and stick to them
Leading
Don’t cram too much text into your design, line spacing can help copy readability
Capitalization
Use all-caps sparingly, it affects readability!
Size
Give your copy some visual hierarchy
Contrast
Smaller screens = more eye strain. Don’t compound the issue with a low contrast ratio
When users are on mobile, they’re used to a few common gestures. Lean into user habits and utilize gestures that are already second-nature, and don’t forget these device-specific gestures that you should be aware of:
Standard Actions
Tap to “click”
Swipe Right to go back a page
Pinch to zoom in and out
Drag to change a page element (like a slider)
iPhone
3D Touch for more info, actions, or a preview
AVOID swiping up (that’s how iPhone X/11 users exit an app)
Android
AVOID swiping up (that’s how Android users get to their app drawer)
Now that we know a few mobile UI/UX tablestakes, it’s time to dive into the good stuff: looking at some mobile rockstars. We’re going to be exploring brands who are killing it on mobile, and what mobile trends they’re not only leaning into, but totally rocking.
The name of the game when it comes to mobile navigation? Simplicity. Users are busier than ever, and when they want information they want it fast, which means the last thing they want is an overcrowded app home page. Here are a few navigation trends that are helping brands keep it simple.
We love when a mobile website doesn’t immediately scream at us to download the mobile app. Having that small, subtle bar at the top with a drop-down app CTA is a great use of collapsible navigation.
Lyft does a great job of utilizing layered actions by putting its destination window over the live map. This always keeps the user on the home screen so they can keep an eye on Lyft drivers nearby in real time, and double check that their pick-up location is correct.
Pinterest’s use of a tab layout for its bottom navigation bar is perfect for a simplified user experience. Bonus points for hiding the bar while the user scrolls. It makes for a super non-invasive navigation experience!
OK, so now that users are on your app and know how to navigate around, how are they finding what they need? Here are a few examples of utilizing mobile-first technology to make interacting with these mobile experiences a breeze.
Trello is a rockstar when it comes to integrating familiar gestures into their app. Users can easily drag and drop tasks onto boards, and swipe to access other boards.
Domino’s
Native Mobile App
We’re asking Alexa for everything, so why shouldn’t we be able to ask our phones to order us pizza? Domino’s integrates voice capabilities into their app for easy pizza ordering.
IKEA uses the phone’s native camera as the base for their IKEA Place app, and then uses augmented reality to let users layer virtual elements into the real world. Talk about a futuristic way to interact!
Personalization is tablestakes at this point, and today’s consumers are way past being impressed with a “Hey, Your Name!” greeting at the top of their app. Here are a few mobile experiences that are putting true personalization front and center.
There’s nothing better than feeling known, especially by brands you love. Wayfair puts personalized recommendations based on the user’s past purchases right at the top of the app, making for a totally personalized experience.
Starbucks is the king of mobile rewards programs, and their Progressive Web App puts it front and center with an eye-catching rewards slider to show users how many stars they have, and how many they’ll need to get that free latte.
Huntington is letting users take their app’s home page layout into their own hands with custom dashboarding capabilities. Think: toggling on and off certain features, moving around modules, etc.
Users are spending more time looking at screens than ever before, which means they’re looking for experiences that not only don’t damage their eyes (hello, dark mode), but also experiences that are fun to look at. Here are a few visual trends to keep an eye on.
With many users opting in for the more eyesight-friendly dark mode option, Twitter provided that and more! Users can also choose dim mode, which turns the background elements of the app grey.
Phone displays are becoming capable of higher pixel densities (hello, Retina display), which means higher resolution and depth of color. Hulu is leaning into the advanced display tech with use of gradients and bolder colors.
There’s no doubt that content and navigation are the most important elements of a mobile experience, but the little extras in-between sometimes make all the difference. We love Duolingo’s fun use of animations throughout their app.
But you know what? The cool thing is that no matter what you steal from this Mobile Design Swipe File, you’re going to make it your own! And then if it’s good enough, someone else is going to steal it! And round and round we go…
Just remember these mobile design basics:
1.Think of the User First
Just because something looks cool doesn’t mean it’s easy to use
2.Consider (and Test On) All Devices
Remember that just because you have an iPhone X doesn’t mean your user has an iPhone X
3.Most of the Time...Less is More
Don’t cram every trend into one mobile experience. Prioritize based on your app’s goals!