Complex Desktop Interactions, Simple Mobile Interactions

As techniques and effects on desktop websites get more and more complex, the mobile responsive versions of those same websites re- main pretty streamlined.

And that’s a good thing.

While many responsive sites have focused on a singular experience, more designers are creating websites that look like the same brand but offer different, more device-relevant experiences.

When it comes to usability and function, simplicity is a key consider- ation with mobile devices. Some of the more flashy desktop design elements – video, complex animations and even hover states – just don’t translate to smaller screens.

But that doesn’t mean you can’t have the best of both, which is why more designers working with complex desktop designs are imple- menting a simplified mobile responsive version.

It’s better for users because the simplified mobile option often is smaller and loads faster, and doesn’t rely on high-speed internet connections (which aren’t always available) to work properly. The less complicated interface is also easier to use when the canvas is limited because you aren’t trying to cram too many elements onto the small screen at once.

Take a look at roanoke.org (above) on a desktop computer: There’s a nifty text animation in the hero header. It’s large and bold and attention-grabbing. The mobile experience is equally striking with a great image, but without the text animation. It would be too small to render (and read) in the smaller, more vertical format and the animation could bog down the design and not work at all on mobile devices. This simple change is exactly why designers prefer unique and streamlined mobile experiences even if the desktop design is more complex.

 

It can be frustrating to realize that the perfect design element just won’t work on a mobile device due to visual constraints or perfor- mance issues.

Luckily, there are plenty of alternatives for mobile responsive web- sites that will work with your desktop website design, sans complex interaction.

  • Replace a hero video header with a great image of the same scene. While a screen grab from the video isn’t always the best option, you can have still images made at the same time as the video forthis purpose. (Then you’ll also have a collection of video clips and photos that “match” for a variety of applications.) If you must use video, opt for a button that takes the user to YouTube, which will more reliably play video on mobile devices.
  • Forget hover animations or instructions for mobile. They don’t work. Instead, think in thumb-sized taps or actions. Design over- sized buttons and other clickable/tappable elements that are easy to interact with on a smaller screen. The design should be obvious and easy enough for the user to interact with that it doesn’t need the instructions or visual cues that come from a hover state. Use gestures that are more common for mobile – swipes, taps or even a shake – to show and hide information.
  • Some simple animations work across devices, but elements such as loading animations or complex gamification or video-style motion doesn’t translate to mobile UX. Coach, above, converts a slider with video background combination, to an animated GIF for mobile. Users still see movement, but it’s much more lightweight and contained in a single element.
  • Remove all dropdown menus right away. Designers still debate the value of a hamburger menu; love it or hate it, users seem to understand what it means. While it’s not necessarily recommended for desktop experiences, this method of tucking away navigation elements is a viable mobile solution.
  • Use voice activation when you can in mobile interfaces. Voice commands are rapidly becoming the standard for interacting with mobile devices. Think about your website: Are there elements users could talk to?
  • Carefully evaluate color and backgrounds. Some desktop designs look great with a dark background and darker type, but at small- er sizes this combination could be unreadable. Because of the smaller canvas size, mobile versions of websites need to have plenty of color contrast between background and foreground and text elements to ensure maximum readability. You don’t have to develop a completely new color palette, but mobile users tend to move through content more quickly. Opt for more muted colors, darker text elements and plenty of white space.

Don’t just design a desktop design and let the mobile site “care for itself.” This happens way too often and is the reason this design trend exists. A significant number of users – for most websites that’s often upward of 50 percent – will access the design on a mobile device.

Think about each of these limitations in the design process and de- velop a simple solution that’s optimized for mobile:

Screen size and readability: Design one thought per mobile “screen.”

Connectivity: Heavy websites with long load times will not be used on mobile devices. Attention spans are short and if the site doesn’t load immediately, users will find something else to do with their time.

Touch: Every element should be optimized for touch. And remem- ber to change that microcopy so buttons don’t say “click here.” Use gestures and touch wisely and avoid functions that only work on a handful of devices (such as 3D touch).

Distractions: Mobile users are notoriously distracted. Provide content in small, digestible blocks that are easy to read at a glance. Give users key information – contact, address, etc. – right away.

Pull It All Together

The trick to a successful responsive website design is tweaking it for different contexts. You can include great video clips or complex animations on a desktop site; but you need something else when planning for mobile.

Don’t forget to add simple touches for mobile that users love: Noti- fications, location-based tools, touch ID and wearable connectivity are just a few of the interface elements you can actually add to mo- bile sites to increase interaction and engagement. Users know and almost expect many of these interactions (particularly location) and they should feel like a seamless part of the design that you don’t even really see or have to think about.

The Weather Channel has a robust desktop website, but it does some- thing great when you access it on a mobile device. The current local weather conditions appear in a bigger, bolder box right at the top of the screen. That design gives users exactly the right content in the right form at the right time – a decision that represents the heart of mobile design.