So you have a great digital experience that you want to take mobile. Good for you! But have you done your homework?
According to comScore, mobile devices now claim 2 of every 3 minutes spent online. Adobe likewise reports that 38% of people will ditch a website with an unappealing layout — but mobile devices continue to proliferate, and keeping your site functional and attractive is a huge challenge. So how do you optimize your web property to take advantage of all online opportunities?
First, you have to rethink how you approach mobile optimization. It’s about much more than merely adjusting breakpoints; you must consider a whole new spectrum of user needs suited for a limited viewing area, as well as unique business/marketing goals.
Celerity preaches (and practices) a “mobile first” methodology when doing responsive web design or hybrid application development. That’s why I’m sharing six tried-and-true expert tips to help you optimize your digital experience for mobile:
1. Review Your Analytics
Analytics should define what breakpoints you’re targeting and also expose areas of UX that require improvements. This allows designers to make educated decisions around how to support specific devices.
Celerity typically performs a Gap Analysis after reviewing a client’s analytics. The Gap Analysis allows us to appropriately fill in the spaces between supported devices to ensure that the result is a responsive site and, more importantly, ideal for users.
2. Define Business Goals with Data
You should make an effort to collect data on your persona-based demographic so you can identify a wide spectrum of user needs. Ask your team these questions:
-
- What’s most important to our users?
- What’s the Minimal Viable Product (MVP) that you want to launch?
- What features can be added to the backlog as progressive enhancements?
You’ll also want to reach out to users directly. Engage them through focus groups, surveys, usability testing, or other methods that jive with your day-to-day operations. One thing I can’t say enough: user feedback is priceless. That’s because we want to cater to our viewers based on what’s a necessity without being disruptive or too dissimilar to the desktop experience.
Another important step in defining business goals for the mobile experience is to interview key stakeholders and clientele so that you’re certain you’re making the best decisions for your responsive site. If you are modifying the site to address your goals, be sure to take the mobile app development cost into consideration.
3. Stick to an Informed Content Strategy
Ensuring that your messaging is consistent across platforms without inundating the user is key. Don’t forget to trim the fat – users shouldn’t have to work for their content on mobile. Choose a more concise and targeted message over a screen full of information and you’ll be amazed at the resulting product.
4. Audit Existing Deliverables
Review any current applications, microsites, or other web-based domains from a number of vantage points. By auditing user interfaces, navigation paths/user journeys, information architecture, and preexisting patterns, you can accurately define any micro interactions worth using at a smaller screen resolution.
You may eventually want to broaden your efforts and conduct a heuristic analysis, which is a quick and inexpensive way to catalog any usability issues that might cause users to abandon your product.
5. Adjust Your User Interface
Take liberties with your core user interface (UI) elements to better optimize the visual design language. Here are some typical avenues for adapting your UI for mobile:
-
- Increase font size to enhance legibility
- Alter the information architecture to provide the user with items of greater importance earlier
- Increase the size of call-to-actions (CTAs)
- Based heavily on strategy, limit actions that take the user elsewhere—abandonment can be avoidable
- Modify the layout to support a newly defined hierarchy
- Compensate for touch events vs. roll-over states to allow the user to get the proper feedback when interacting with certain UI elements
- Make sure elements break down to their simplest form, allowing for more adaption when there is less screen real estate
- Create components or modules that can be reused to help decrease page weight and confusion when using certain interactive paradigms
- Work with a UI Toolkit to keep user interface elements organized and focused toward the greater goals of your project
When appropriate, you’ll need to violate brand standards in order to allocate screen real estate to items that could enhance the end deliverable. Deconstructing a brand’s core mark by making it responsive will allow, in most cases, for additional high-level points of interaction (mainly at the navigation level).
6. Perform Quality Assurance and Usability Testing After Site Launch
Once your mobile site or app goes live, stress test the new deliverable to ensure all elements are as close to perfect as possible. Aim for consistency across devices from a visual, functional, and experiential standpoint. Keep in mind that quality assurance applies to all aspects of the project; you should primarily be checking for a stable interface build, fatal bugs, breaks, or inconsistencies in the mobile site.
Most importantly, never stop striving to give your users what they want or need. Go back to key aspects of mobile best practices and usability testing to trigger progressive enhancements for the new digital experience, and let users have a say in your decisions.
When building a mobile product, your mantra should never be I want, it should be they want. Usability testing can effectively expose a need for new features and makes room for additional, smaller projects to follow a launch if necessary.
Don’t underestimate the value of doing things correctly. These steps are not so much recommendations as they are requirements to help you seamlessly deliver a mobile-friendly, responsive site. Happy optimizing!