Scaling from desktop to mobile presents unique challenges. Much of this difficulty lies in the fact that we need to provide a consistent experience, no matter the device. Constraints like device width and varying input types contribute to this challenge. Even with these responsive hurdles, it is possible to provide a seamless experience across devices. So, here we will outline responsive solutions for common web components.
At this point you may be asking yourself why we are considering scaling from desktop to mobile? Why are we not following the mobile first mentality that is so commonplace today? Our team does encourage and practice mobile first. However, due to tight timelines we often receive wireframes and design mockups for key pages on desktop, and mobile wireframes and mockups for customized components with complicated functionality.
At Zion & Zion, our web team (i.e. UX, content, designers, developers, SEO) works very closely together in what you would call a spiral workflow. Meaning, when we, the developers, get to a page that wasn’t originally wireframed and/or designed for mobile but requires us to make a key UX decision, we’ll work closely with the UX team to create the best solution possible for that scenario. It also helps that Zion & Zion’s entire design and dev teams have received formal UX training and are all UX certified. No two projects are the same, which is why we pride ourselves on our flexible and spiral workflow–it allows us to remain efficient while creating successful solutions for every user type and screen size. This ensures we are thinking strategically about how certain web components, like carousels and maps, scale and function.
Before diving into these solutions, there are some things to keep in mind when transitioning from desktop to mobile. The most obvious being available input types. On desktop, our main input type is a mouse. A mouse lets the user have precise control over where we are clicking. Closely grouped or small items can be clicked with ease.
Transitioning to mobile, that click accuracy is lost when touch becomes the main input type. It should also be noted that in recent years, touch has also started making appearances onto desktop screens. Compared to a mouse, fingers are bulky with the average fingertip width being approximately 16 x 20 mm and the average thumb width being approximately 25 mm. Google’s Material Design guidelines suggests touchscreen items be 7-10 mm. The difficulty of clicking on closely grouped or small item dramatically increases with touch. With this information in the forefront of our minds, we can proceed to discuss responsive solutions.
Carousels, also referred to as sliders or galleries, are unavoidable on the internet and yet there are often great missteps with their execution, especially on mobile. At the bare minimum, carousels are composed of images and navigation controls. The two most common navigational controls for desktop are left and right arrows and dots to indicate the number of images (along with the current image in rotation). When transitioning from desktop to mobile, dots should appear near the images but never on top, as they may get lost with a busy image behind them. Unfortunately, dots are still not the strongest navigational signifier on mobile since they do not quickly promote the idea that there is more content to be seen.
On mobile, there should be a horizontal swiping gesture to navigate the carousel. While a sin on desktop, horizontal scrolling is expected on mobile so don’t be afraid to utilize it. Even with horizontal scrolling in place, know that we will need to further assist the user with realizing there is more content. The ‘cutting off’ or ‘bleeding’ effect suggests the presence of additional content by showing a small portion of the next or previous item. This is a strong indication that there is more content to be seen and can be achieved by swiping in its direction. By combining these two mobile strategies, your user is more likely to engage with your carousel content.
Also be cautious with swiping gestures as IOS and Android both have predefined gestures, and you don’t want create a bad user experience by having a gesture that is different than its native use. For example, swiping back in Safari causes the user to back to their previous page.
Maps pose certain usability problems for touch devices. For example, full width maps on mobile can lead to scrolling traps. A scrolling trap is when the user attempts to scroll down the page but finds themselves stuck scrolling within the map instead. Not only did this provide the user with a different experience than expected, but it also reoriented the map away from its original location. If the user did wish to revisit the location on the map, they would either need to refresh the page or attempt to relocate the original location by scrolling in and out of the map. Here’s to hoping there was a marker on the map!
One way to avoid this behavior is to make the map a little less than full width by either reducing its width or adding a border or margin. By giving the user some of the page to grab onto while scrolling, the user can avoid that unexpected interaction. If this is less than stylistically ideal, than the other solution is to prevent scrolling on mobile altogether. The user can scroll on top of the map without ever finding themselves in a scrolling trap.
Accordions should be used with caution as they come with their advantages and disadvantages. Ultimately, the content should drive whether or not an accordion is the proper UX solution. Accordions are best suited for sectioned content that is not likely to be read in full. For example, the Frequently Asked Questions page on Venezia’s Pizzeria features more than a dozen questions with varying content lengths. It is unlikely that a user will read all the questions. Instead they are more likely to seek out the questions that led them to this page. By utilizing an accordion on mobile, they were able to condense an otherwise lengthy page. In addition, the accordions also helped facilitate scanning by providing section headings. These section headings allow the user to quickly find the information they were looking for.
The one disadvantage to accordions is that they have a high interaction cost. The content for each section is hidden until expanded, forcing the user to go out of their way to get the information they need. Once again, this goes back to content driving the need for accordions. Some content, like frequently asked questions or product details, may be better suited for accordions. There are some best practices when incorporating accordions. When your content creates false floors, carefully decide whether or not a pre-expanded section is appropriate. A false floor is the illusion that there is no content below what the user is currently seeing, signaling to the user that they have reached the end of the page and to stop scrolling. In addition, don’t move the accordion to the top of the page when expanded. Accordions do not need to function like anchor tags. In fact, this has a disorienting effect.
The design of the accordion is also important in conveying the current state. Arrows are the standard for indicating whether or not the accordion is expanded. By default, arrows should be pointing down when collapsed and should be pointing up when active. This state change be further enhanced by applying a different background color, font color or a combination of the two.
Forms should be optimized for mobile. Here are several ways to make forms mobile friendly:
- When possible, reduce the number of fields. For example, don’t have the user select which credit card they will be using for the transaction; instead only require them to input their card number. You can determine the credit card type from the card number. Same applies to zip code to determine city and state.
- Abandon placeholder text for labels. Placeholder text disappears once a user starts inputting information into the field leaving the user guessing exactly what information they needed to input. This is especially true on longer forms or forms with unusual fields. Labels serve as a point of reference when filling out the form. If placeholders are a must, then try the float label pattern. The float label pattern allows the use of placeholders, but upon input, keeps the placeholder in view.
- Make sure fields are full width to avoid horizontal scrolling within field. On mobile, correcting mistakes becomes increasingly difficult.
- Depending on the input type, make sure the correct keyboard displays. For example, input fields that require only numbers, like prices and years, should use the telephone keyboard. This also has the benefit of reducing user error by only allowing numbers to be entered.
Almost every website is littered with simple web components like carousels, maps, accordions and forms. Surprisingly, these simple web components are often not equipped with the right styles or functionality to ensure that they are just as mobile friendly as they are desktop
friendly. Even with the unique challenges that come from scaling from desktop to mobile, the simple and easy techniques above can be incorporated into the development flow to ensure a great user experience on mobile.