With the emergence of mobile, designers have had to change their approach. Print turned to digital and designers found new ways for people to interact with content made from pixels. And now, mobile devices have surpassed desktop computers as our windows to the web. Here are seven tips for designers to engage and convert users on today’s smaller screens.
1.Design for mobile
Not so long ago, designers had the luxury of designing primarily for sprawling desktop displays. These provided an expansive canvas that gave designers a lot of room to work with. At times, maybe a bit too much. Limitations force a more practical approach, decreasing visual clutter and pointless embellishments.
The starting point of any web design should consider the smallest screen a site might be displayed on. Working within the limitations of smaller screens will create a consistent experience across devices.
Webflow's multi-device preview mode shows how a design will look on different devices and let you make adjustments along the way.
Before you create wireframes for a mobile design, make sure you:
- Compile the necessary content and define how it will be organized
- Create headers for each section
- Determine calls to action and their placement
- Plan the type of interactive elements you’ll be using
And plan how all these elements will flow in a single-column design.
2. Use gestural microinteractions and animations
Mobile means a smaller screen space, which makes it important that content and interactive elements stand out, and clearly communicate their purpose.
Microinteractions are little bursts of usability that inspire someone to take an action with immediate feedback. The “like” button is a ubiquitous microinteraction used for everything from cute cat photos on Instagram to Facebook shares and comments.
We hit that thumbs up or heart without even thinking about, making our approval public. We swipe left or right on dating apps, and are immediately rewarded with the news that (gasp!) someone likes us, too. Microinteractions make interactivity quick and intuitive — they’re the defining moment on many websites and apps.
Scroll-based interactions are like microinteractions: they add movement to the flat screens we hold in our hands. They add dynamic elements to a design and act as guides, capturing your user’s attention, leading them where you want them to go, like to a signup form.
3. Keep it simple
When designing for mobile, strip everything down to its basic components. It's not about boring, nondescript text floating in a void — but if you can make that work, more power to you. It’s about refining the elements so that only what's important remains.
This means taking away unnecessary items like graphics and busy animations that don’t add to the user experience. Extreme drop shadows and other graphics simulating three dimensionality are cast aside for a more practical design.
Instead, use attention-grabbing colors and ample negative space. Combined with simple typography, this can make for a design approach that’s easy to navigate and quick to load.
4. Keep their attention with quick load times
Desktops have the luxury of faster processors, more computing power, and no need to cram megabytes down narrow 3G connections. They can accommodate larger file sizes like long video clips. You don’t want someone landing on your page only to be bogged down by files not optimized for mobile.
When you're preparing the visuals for a design, make sure to:
- Use well-composed, uncluttered, meaningful images
- Optimize all images with photo-editing software, like Photoshop
- Use proportional images sized correctly for the layout
- Use high-quality background videos, but only when necessary — most mobile devices won't even display these anyway
Build complex interactions and animations without even looking at code.
5. Craft your content with mobile in mind
Mobile devices have transformed how we experience the web. Instead of sitting in a quiet place, basking in the glow of a desktop monitor, we experience the web on small screens on a train to work, in line at the grocery store, in the waiting room at the doctor’s office — everywhere and anywhere we have a quick window of time.
Content needs to be broken into small chunks that are easily digested during short spurts of engagement. Just as the visual design elements need to be refined to only what’s necessary, so too does content. This means crafting sentences and paragraphs that are short, direct, and crystal-clear.
Content organization is even more important on mobile. Every section should seamlessly flow into the next. There shouldn’t jarring content shifts. Everything should make sense as someone scrolls through the content. One idea needs to flow logically into the next.
Calls to action need to be more than a whisper — they should command attention. To write more engaging calls to action:
- Give readers a reason to act
- Appeal to their emotions
- Stress the importance of timeliness
- Creatively communicate a brand’s personality
6. Use popups the right way
We know. Popups get a bad rap. But much like Microsoft's much-maligned Clippy, they have the best of intentions.
Popups are an important tool for conversions. They need to make their appearance useful, rather than distracting. A popup needs to be more than a generic prompt — it should be aligned with your brand’s personality and inspire a specific action that will gain the reader something. Even if it's just more free content in future.
Popups need to be anchored to specific content. Instead of showing up indiscriminately at the top of each page, weave them into the fabric of the content. A popup should make sense in the context of what’s being presented.
A user might be scrolling through tour dates for a band. A popup asking them to join an email list about tour dates is appropriate. Conversions happen when popups are useful and in context. The content should provide the reason to learn more and take action.
7. Use multi-step forms
Forms can be time-consuming and tedious. How many of us have filled out every single field and hit submit only to get that the angry red text informing you something’s wrong? With a sprawl of content fields, it’s easy to miss something.
The development of multi-step forms simplifies the process of inputting information. There’s a logical flow, where the input of one type of information transitions into the next. Multi-step forms are especially great for mobile devices. The let users painlessly set up an account, apply for a job, or fill out a dating profile.
Mobile design is about simplicity
Mobile design has changed the standards of usability. What was once fine for desktop is now considered cumbersome. Mobile design has stripped away unnecessary ornamentation and found more direct routes to guide users through content. What some call constraints, we can view as opportunities to improve how people experience the web.