Last week, we introduced some terms related to mobile UI design and layout. Now let’s talk about how to put them to use. When designing web pages, or any other interfaces for mobile devices, there are two main things to consider. The first is that phones and other mobile devices are small. Screen real estate has to be taken into careful consideration simply because there is much less of it. The second thing to consider is that mobile devices are made to be touched. Sounds obvious, but it’s what can truly make or break a mobile layout.

Designing for Screen Size

Designing with Screen Size in Mind

Designing for small screen sizes, is an exercise in concision. A lot of information can be placed on a full-sized desktop monitor and fit in only a few pages. However, when that same information is scaled to fit a mobile device, it can turn into huge number of pages causing users to excessively scroll to see all of your content. When designing with mobile devices in mind, it’s best to separate content into multiple pages. It’s easier to have a few different, but shorter, pages that a user can navigate to instead of having one really long page with all of the info combined. The same principle applies to text. What may only seem like a small paragraph of text on a desktop view, becomes an imposing, screen-filling mass of text on a phone. It’s better to provide heading and short descriptions to draw a user’s attention and then actually host the content on a separate page. This way the user isn’t bombarded with more text than they can process.

Another challenge posed by small screen sizes is navigation. The typical web page layout with a navigation bar at the top with drop down text links doesn’t work on mobile. There simply isn’t enough room at the top of the screen to display all of that content. This is where a “mobile menu” comes into play. A mobile menu still has all of the content that the desktop menu does, it’s just hidden away until you need to access it. Once the resolution drops below a preset number, the menu text disappears and is replaced by a “hamburger icon.” Clicking the icon will then show a “slide-out” or “drop-down” menu containing all of the navigation links.

Images can also be a challenge for Mobile UI layouts. When used as independent elements, images don’t pose any major issues. Although, they can be larger on mobile devices than you might anticipate. The real problem with images is when they are used as backgrounds. As elements rearrange and columns change, they can also change size. So, if you have a picture that always has a fixed size as a background, the image will fit in the background differently when the element resizes. This means that a background image may look perfect on the desktop version of the site, but when viewed on a tablet, the image may not fill up the entire area; or when the image is viewed on a phone, the image may have areas that are cropped out of view. The best way to plan for this is to use the largest resolution photos available to you and to make sure there is plenty of margin space in the photo surrounding the focus area. This ensures the photo is large enough to fill the entire background, but also gives it padding to ensure the focus of the image will still be visible in smaller elements.

Designing for Touch Devices

Designing for Touch Enabled Devices

“You can look, but you can’t touch.” That’s a huge problem for mobile phones. The touch screen is the only way to navigate on a mobile webpage. If a site isn’t optimized to be browsed using touch only, it will certainly cause users to abandon the site in favor of more useable alternatives. So how do you make sure your site is touch-friendly? Try keeping a few things in mind:

Scrolling is the most important functionality for a mobile site. As mentioned previously, the mobile version of a web page is going to have a longer page length than its desktop counterpart. So you need to make sure your users can easily scroll through your content. Pretty much all platforms and content management systems have touch-based scrolling systems in place that handle touch scrolling and acceleration for you. Having that said, there are still a few things you should watch out for.

First, horizontal scrolling. This is a huge no-no! Google will put a major penalty on your mobile-friendliness and search ranking scores if your users have to horizontally scroll on the mobile version of your site. It’s difficult, inconvenient, and makes it hard for users to actually see or read your content. The good news is if your site is using proper responsive techniques, then all of your content should be in one column. This adjusts the page width to the size of the screen and keeps mobile users from having to scroll horizontally. But still, watch out for improperly set overflow values. If your content doesn’t fit in its container, the overflow should be set to hidden or clip. Otherwise, the overflow content could cause a horizontal scrollbar to become a necessity in order to see everything on the site.

The next most common issue with scrolling on a mobile device is “scroll blockers.” A scroll blocker is anything that prevents scrolling vertically to the content farther down the page. The most common examples of this are maps or other elements that allow scrolling inside of their content area. So, as a user is scrolling down the page, they touch the scrollable content area and start moving the map or other content instead of continuing down the page. The best way to combat this issue is to disable scrolling on mobile devices within the content area. If your users need to be able to scroll within the content area, require that they do it by using two fingers.

Paddings and margins for clickable elements can also be an issue for mobile devices. Buttons that are hard to click or hard to activate on a touch screen are more likely to be passed up altogether. Make sure that clickable areas are large enough to actually register touches. 48dp seems to be the sweet spot for buttons and action links. For inline text links, make sure that the links register in an area around the text and not just on the font itself.

Applying These Techniques

This is certainly the hardest part of mobile UI design. Every designer has their own unique style, and every situation calls for different approaches and solutions. Just remember to put your user’s experience first. It doesn’t matter how compelling your content is, or how pretty your images are, if a user cannot effectively browse your site, it’s all for naught. Hopefully you will be able to use some of these principles to better your user’s experience. However, if you are still having trouble with your site’s UI layout or navigation, give us a call today and let us help.

Sources:
https://material.io/guidelines/
https://commons.wikimedia.org/wiki/File:Coord_planes_color.svg

Share This