Category Archives: user experience

Selling The Small Screen

Lately I feel like I’ve become a bit of a mobile evangelist of sorts, extolling the benefits of a well planned and executed mobile strategy to clients. And why not, mobile devices are quickly supplanting clunky old desktops as the preferred screen on which people increasingly first gaze upon your brand.

I still find it bewildering how many businesses with existing digital collateral or those just establishing themselves on the Web either gloss over mobile or completely dismiss its importance altogether.

Oh brother.

An old school Web site designed for 1024 x 768 displays or one employing a traditional 2 or 3-column layout with no provisions for mobile users quickly becomes problematic on a modern smartphone. Illegible text, oversized images slowing down performance, tedious zooming, panning and scrolling, buttons too small to tap with your finger, underscore just some of the mobile UX issues that will irritate and drive your audience elsewhere.

But don’t take my word for it; your site analytics will paint the true picture.

Mobile UX Design Primer

In a recent post on mobile I looked at several noteworthy statistics courtesy of Nielsen and Google that reinforce the growing importance a mobile-friendly (a.k.a. mobile-optimized) site plays in shaping your business’s overall digital presence. I could certainly dig up many more statistics bolstering the argument for mobile, however I’m confident you’re one of the 4.3 billion people actively participating in the vibrant mobile economy — a number expected to grow to 5.2 billion people by 2017.

In this post I’ll look at the mobile equation from more of a UX design perspective by delving into some of the key elements that will ensure your audience has a great experience when interacting with your digital content through a mobile device.

The mobile Web is unique from the traditional desktop browser experience. The most obvious difference is screen size. While mobile displays are physically much smaller than conventional laptop and desktop screens, most modern smartphones will usually run a higher screen resolution (a.k.a. pixel density), somewhere in the neighbourhood of 150 ppi (that’s pixels per inch) all the way up to 326 ppi on the iPhone 5. Again, this resolution is much higher than you’ll typically find on a desktop monitor. Inevitably this will cause an older Web site —that is, one that has not been mobile-optimized— to render at a much smaller size in a mobile Web browser. Page headlines and body text for example, set at a common 14 pixels or less, will likely appear illegible to most readers. In 2 and 3-column Web site layouts this problem is amplified by the additional information cluttering up the limited screen dimensions which causes everything to appear tiny in the viewable screen area.

In a mobile-optimized layout less is more. Removing sidebar columns in favour of a single column layout lends precious screen real estate which can be devoted to larger body text and more clearly defined menus and buttons allowing for greater overall ease of use and less eye strain on the part of the user.

The current iteration of Formula1.com is a textbook example of a desktop centric Web site that renders poorly on a mobile device (screenshot taken on Samsung Galaxy SIII smartphone). In this particular case a conventional 2-column layout becomes a usability nightmare even when rendered in landscape mode. Having trouble reading the text? This is a classic mobile UX faux-pas. Visitors are forced to constantly zoom-in on specific regions of the interface and pan around the screen to effectively read text or navigate between pages. Buttons and text hyperlinks are insufficiently proportioned to accommodate touch inputs —that is, finger taps as opposed to mouse clicks.

A great example of a mobile-optimized Web experience is Yabstadigital.com which employs a fully responsive design layout that dynamically sizes and reorients visual elements to make the best possible use of the available screen real estate.
You could think of a responsively designed Web site as one that intuitively knows how big the user’s screen or browser area is and how best to rearrange the content for optimal display efficiency. If you’re curious and on a laptop or desktop computer, try resizing your Web browser window to see how our site layout smartly adapts to the changing window dimensions as you expand or contract the browser area. Whether you’re viewing this site on a gigantic 27-inch desktop monitor or a 4-inch smartphone, headlines and body text will always render clear and readable; buttons and menu items will be easily accessible for touch or mouse driven input, and above all, distractions such as excessive page scrolling and zooming in/out actions will be kept to a minimum allowing you to focus on the site content itself rather than wrestling with the interface.

Mobile design considerations play a critical role in establishing credibility in the digital space and require special attention. A poorly executed mobile site conspires to undermine the user experience and can result in higher bounce rates and leave your audience with a fractured impression of your business offerings.

By contrast, a well planned and executed mobile design strategy has the capacity to enhance audience engagement with your brand, product or service and foster more successful interactions. Mobile is quite simply an investment in your business’s future livelihood and competitiveness.

The Importance Of Getting Mobile Friendly

Last week the cellular phone celebrated an incredible milestone. 40 years ago on April 3, 1973, Martin Cooper, a senior engineer at Motorola, made the first mobile phone call from a Manhattan New York street corner with a prototype design that would eventually go on to become the world’s first commercially available mobile phone in 1983. At a whopping $3,995 US, the DynaTAC 8000x model was arguably one of the most expensive personal tech-oriented accessories of the day. Not surprisingly these first cellular phones began making regular appearances on popular TV and in movies, taking on the aura of an exclusive and rather impractical tech toy perhaps only the rich and powerful could ever hope to afford.

Today, thankfully, a lot has changed. Mobile phones have become incredibly ubiquitous in the marketplace and are currently the driving force behind the growing digital economy.

A recent Nielsen report suggests the growth of mobile devices has reached a “critical mass” with greater than 80% of consumers 16-years of age and older in developed countries using a mobile phone. In terms of daily usage, we’re using our phones for an ever widening array of tasks, from video streaming and price-comparison shopping, to email, social networking, banking and location-based navigation. Many of these tasks several years ago were only possible through desktop computers. Smartphone devices, now with greater processing power and larger screen sizes, are providing a viable alternative to the traditional desktop Web experience.
With more of our Web surfing taking place on smartphones and smaller tablet computer devices, it’s important to consider the benefits of a well-design mobile site and how proper execution can impact your company’s bottom line.

A study conducted by Sterling Research and SmithGeiger surveyed 1,088 US adult smartphone Internet users and found that nearly 75% of users prefer a mobile-friendly site:

  • When they visited a mobile-friendly site, 74% of people say they’re more likely to return to that site in the future
  • 67% of mobile users say that when they visit a mobile-friendly site, they’re more likely to buy a site’s product or service

The report goes on to suggest that not having a mobile-friendly site helps your competitors and can hurt your company’s reputation in several ways:

  • 48% of users say they feel frustrated and annoyed when they get to a site that’s not mobile-friendly
  • 36% said they felt like they’ve wasted their time by visiting those sites
  • 52% of users said that a bad mobile experience made them less likely to engage with a company
  • 48% said that if a site didn’t work well on their smartphones, it made them feel like the company didn’t care about their business

If you’re a small business owner, start-up, or established company, it’s time to start thinking seriously about solidifying your mobile presence with a Web site designed with the small screen experience in mind. In our next post on mobile we’ll explore what makes a Web site mobile-friendly from a design and execution perspective.

Image credit: samsungtomorrow