6 Ways Mobile Behavior is Changing Website Design & Desktop Experiences
“Mobile web browsing overtakes desktop for the first time!”
Two years ago that headline was plastered across some of the most popular blogs in the industry. Today, we’re still in the midst of the mobile revolution and it shows no signs of slowing down.
For the first time ever mobile browsing has begun to lead the way we design for desktops.
With adults expected to spend an average of 3 hours and 23 minutes on voice mobile media, it’s no surprise to see the features we use every day making their way over to their stationary counterparts on desktop.
Being able to understand these mobile behaviors and how to effectively implement them in your web design can make a huge impact on your sites user experience.
Using features and trends people are familiar with eliminates a lot of the guesswork someone will need to do when using your site.
I’ve compiled some of the top mobile trends below to help give you a headstart on what exactly you should look into implementing on your site.
1. Hamburger Menus
Love them or hate them, hamburger menus are one of the most noticeable elements to make the jump from mobile to desktop.
If you’re not familiar with hamburger menus, it’s the name UI/UX designers use to refer to the triple bar icon some sites use in lieu of a traditional navigation menu.
While there’s plenty of arguments to be made for and against the use of hamburger menus, it all really boils down to the goals of your site and how you choose to implement it.
When done correctly, hamburger menus present users with a clean unobtrusive layout that lets them focus on the page’s content. Hamburger menus also eliminate “decision fatigue” or “analysis paralysis” which occurs when people are presented with too many options on a page.
Below, design agency, Telepathy uses a nice combination of the hamburger menu and a traditional menu to create a clean UI.
They feature the most important links in their nav bar while neatly tucking away additional links in the hamburger menu. This approach does a really nice job setting a clear path for users to follow.
2. Sticky Elements Moving to the Bottom of Pages
Sticky elements are those that appear to be “stuck” to a specific part of a page.
While these are nothing new in web design, we usually see them at the top of a page. These elements can include things like sticky headers, cookie disclaimers, or “hello” bars promoting an offer.
The growth in mobile browsing has led to people designing with a special consideration for something known as the “thumb zone.”
This refers elements of a page that are easily accessible by a user’s thumb.
With this in mind, elements began to move from the top of the page down to the bottom so they could be clicked more easily.
Facebook, for example, does a great job of designing for the “thumb zone.”
In the screenshot below you can see they moved all of their apps navigation items to bottom of the screen. This gives them more attention and makes the links easier to click.
Not only does this approach give users that feeling of familiarity that I mentioned before, it also provides a less distracting way to promote a message or offer.
The typical user reads from top to bottom, so placing these elements on the bottom of a page allows people to focus on the content, then interact with it easily if they’re ready.
The example below shows how Medium uses a sticky element on the bottom of the page to show users how many free reads they have left. Users can still easily read the content, then choose to sign up if they’re ready.
3. Progressive Loading and Skeleton Screens
In order to combat the shorter attention span of users, we’re constantly trying to find improvements in site speed.
This is even truer when it comes to mobile, as it only takes a spotty signal and a few extra seconds of waiting for a user to lose interest and move on to the next page.
Recently on mobile, we’ve seen the use of progressive loading and skeleton screens become increasingly popular.
Progressive loading allows individual elements of a page to become visible as soon as they’ve loaded, rather than displaying everything all at once.
While the individual elements load, you’ll see a skeleton screen which is essentially a wireframe of the page. The example below is a skeleton screen from Facebook.
The benefit of progressive loading and skeleton frames is that users feel like progress is being made, making the wait time feel shorter.
This trend has now made the jump over to desktop sites and has started replacing (or working in conjunction with) the age-old progress bars and spinners.
You can see sites such as Linkedin and apps like Slack already taking advantage of this technique.
4. The Use of Emojis
Emojis burst into the phone scene in 2011 and have since become so prolific they even have their own movie.
With people peppering their texts and tweets with different emojis, it’s no surprise that marketers have taken this trend and found ways to work it into their marketing.
One area where marketers are seeing a lot of success with emojis is in email subject lines. Experian discovered that 56% of brands that used emojis in their subject line received higher open rates. Emojis help us save space in text limited areas by saying more with less.
Not only do emojis help us save space, they are easily recognizable, helping companies inject a little bit a personality and fun into their marketing.
At IMPACT we used this approach on our about us page with a friendly wave:
5. Minimalism Style of Design
The minimalist style of design is based on the idea that “less is more.”
Minimalism and simplified color schemes were originally used on mobile sites in order to improve load times and avoid confusion and clutter on limited screen real estate.
Designers today are now taking this concept and expanded it to desktop sites, lead greatly by Google’s Material Design.
Implementing minimalist design helps give your users a clear focal point for each page.
The ample white space that many minimalist sites use makes it easier for users to digest information one section at a time. It also forces us as marketers to stop and really think about what’s absolutely necessary on a page and what’s just fluff.
One of my favorite examples is the homepage of the prototyping software Marvel App.
Right when you get to their homepage, you’re greeted with a bold clear statement of what their software does and how to sign up.
As you scroll through the page, the site feels very open and clean. It’s not overly text-heavy yet you’re able to get all of the necessary information you need.
6. Onboarding Experiences for SaaS
User onboarding is no longer an experience limited to just apps and mobile sites; It’s being used by companies who offer unique services or software’s features that a user might not be familiar with; regardless of whether they’re on a mobile or desktop site.
Simply put, a user onboarding is a tool that introduces customers to specific elements of your services to ensure they find success it.
Some sites, such as Quora, use this strategy as a setup manual to get users up and running on their product.
Other sites, such as Duolingo, use setup their onboardings to give you gentle reminders of the different features you can use in their software.
These onboardings do an amazing job of reducing any friction or hesitation a user might have when first using your software.
They also give you the chance to really make a good a good first impression and delight your users right-off-the-bat.
Key Takeaway
As mobile continues to grow, we’ll likely see more and more trends like the ones mentioned above coming over to desktop sites.
So, keep an eye on your favorite apps and websites, and brainstorm how you may be able to use a similar behavior on your website.
Keeping an open mind to these trends can make all the difference when it comes to creating a better experience on your website.
