This is a running list of insights from partnering with over 150 web development teams over the past 2 years.
Ryan Warrender joined a team at Google in 2016 called the Mobile Transformation Team. He said that Their team had a simple, but very ambitious goal: Make the mobile web better for everyone. They focused on helping small- to medium-sized businesses improve their mobile web experiences. More specifically, they were UX consultants that would work with web dev teams and provide recommendations on how they can better optimize performance, usability, and accessibility.
They championed for end users.
Here are the learnings, observations, and pitfalls they gathered after seeing literally hundreds of websites:
First impressions matter. Mobile users are very goal-oriented and super impatient. Avoid distracting a user from their goals. Keep your homepage and top landing pages simple. Be sure to have a clear call-to-action and a value proposition above the fold. A user should know what to do and why they should stay on your mobile site in a moment’s glance.
Do less. The number one recommendation he consistently made was, “Do Less.” That means fewer images, fewer form fields, fewer complicated navigation patterns, fewer plugins, fewer 3rd party pixels, fewer walls of text, fewer full screen overlays, fewer render blocking js, fewer clicks… fewer ways to distract your user from their goals.
Speed accentuates good design. It is no surprise that faster mobile sites have better user engagement. Countless case studies, usability tests, and I am sure your own personal anecdotes, make it abundantly clear that speed drives conversions. The three performance metrics that truly reflect the user experience are First Contentful Paint (FCP), Speed Index, and Time to Interactive (TTI). It is critical to set a performance budget and hold your team accountable. It’s a shame, when your beautifully designed site results in a bounced user because you forgot to compress your 2MB hero image. Use tools like Lighthouse (shown below) to monitor these metrics.
< 2s First Content Paint (FCP)
< 3 Speed Index (SI)
< 5 Time to Interactive (TTI)
Talk to your customers. This might seem incredibly obvious, but we can’t tell you how many blank stares we have instigated by asking, “When was the last time you talked to your users?” Our goal as mobile UX leads was not to just make recommendations, but to be the voice of the user. Put yourself in your users’ shoes and try to complete the most common tasks (track the number of clicks and total time to complete).
Use data to justify design. The trend of “data-backed design” is nothing new. After prioritizing a mobile project it is important to track mobile KPIs. For retailers, monitor Average Order Value (AOV) and the exit rate on the page where the checkout funnel begins. For lead generation companies focus on CTR of the primary Call-To-Action button and the lead to close ratio (successful sales / number of leads * 100). If you have a travel site, focus on return sessions (customer retention) and channel-specific traffic (ie: are social shares increasing). Consider monitoring micro conversions as well like email newsletter signups, comments on an article, user reviews, video views, or shares on social media. Pro tip: I highly recommend you leverage this brilliant Datastudio dashboard that one of my peers (Damla Cakirca) made to monitor user engagement on your site.
Relapse is real. The majority of the companies we worked with saw significant improvements in site speed and/or user engagement. However, 30–60 days post consultation (when we were no longing looking over their shoulder) we would see bad habits resurface. To avoid this pitfall, use a performance budget. I also, recommend using the Chrome Dev tool to find unused CSS and JS code with the Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need. It is critical to monitor and audit your mobile site on an ongoing basis.
Be bullish on new tech. If you are looking for a transformative modern mobile experience, scope out building a PWA. If you are looking to optimize your paid traffic, look into using AMP for your top landing pages. If you are a retailer, look into ways to expedite the checkout such as reducing fields, enabling autofill, or implementing Google Pay. The key to success is to add technologies incrementally with a focus on enhancing the user experience. If it does not add value to your users, don’t invest in it.
Cross functional buy in is key. Getting all key stakeholders on the same page is an obvious, but important reminder. Improving your mobile web experience is a team effort. All teams need to take responsibility on monitoring the mobile experience. Marketing teams should watch the use of 3rd party tracking pixels. Engineering teams should focus on optimizing the critical rendering path (removing render blocking assets). UX teams should ensure images are optimized and focus on reducing usability pain points (ie: automatic sliders). It is critical to set cross functional goals and hold all teams accountable.
Observations of Mobile Trends. This last section is a catch all of the best UX trends that I’ve seen positive results from during 2018.
- Implementing a bottom navigation drawer
- Enabling push notifications (when necessary)
- Adding an ‘add to home’ screen button (app manifest)
- Using Material Design web components
- Advanced scroll triggered animations
- Sticky CTAs at the bottom of the viewport (especially on Product Detail Pages)
- Allow users to purchase with a guest account
- AMP First
Remember there is no magic bullet to resolve all of your UX issues. Improving your mobile site takes patience, analysis, and cross-functional commitment.
This article originally posted on medium.com