Category Archives: strategy

Mobile UX Design Primer

strategy, user experience

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 Big Small Screen

advertising, social, strategy

multitasking device

Lately I seem to be spending more time accessing the mobile Web on my Android phone and less time through a conventional desktop browser. In fact, I’m not alone in this behaviour. Last week Google published a very telling infographic on their Mobile Ad Blog illustrating the rise of so-called multi-screen consumer behaviour. That is, people using more than one device (e.g. smartphone, laptop, tablet, TV) to accomplish a goal—be it: shopping, managing their finances, or planning a trip.

The statistics I found most interesting in this report: 38% of daily media interactions are on smartphones; 77% of “television viewers” watch TV on their smartphone or other device.

Shopping too, has become more digitally oriented involving multiple screens with smartphones and other readily connected devices making possible 81% of what Google refers to as “spur-of-the-moment shopping” or spontaneous goal-oriented searches.

With media consumption increasingly occurring through mobile devices it isn’t surprising to hear cable companies talk about the possibility of offering consumers pay-per-channel subscriptions. The current—and much loathed—television packages that typically force us into paying for channels we really don’t want (or watch) may soon be coming to an end, though perhaps too little too late a strategy for luring back disenchanted cord cutters.

While it’s easy to criticize the television industry for clinging to outdated models in light of the range and flexibility of viewing options available online, digital advertising too has its own fair share of hurdles lying ahead, particularly in the mobile space.
The push to monetize popular social networks like Facebook primarily through advertising revenues remains a questionable approach at best considering recent studies suggest 40% of mobile ad clicks are fraud or accidents.
Aside from the percentage of legitimate ad clicks versus those resulting from inadvertent actions (think fat fingers accidentally clicking or sliding across ads on a grimy touch screen—yes, I do it all the time too) the bigger question worth asking is whether or not ads really belong on social networks in the first place.
We don’t go onto Facebook or Twitter looking to research products or buy something new, instead we’re there interacting with friends and family, sharing Clint Eastwood invisible Obama jokes with others, and so on. As Diego Basch candidly points out, these sites shove ads in our faces and tempt us to buy shit we don’t need; “That’s the time-tested TV model. This entails annoying most people who are there simply for entertainment purposes.”

If I want annoying ads shoved in my face I’ll turn on the TV and watch a program on a channel I didn’t want included in my rinky-dink bundled package.

Image source: DorteF

App Updates: Less Is More

strategy,

134/365 - Waiting for it to be over

The astute observation made by Mozilla’s Jono DiCarlo regarding Firefox’s overly ambitious software release cycle may partially explain why Google Chrome has finally jumped ahead in the Web browser popularity game.

The notion Firefox’s software updates occur too frequently and may actually aggravate Mozilla’s loyal user base suggests a somewhat less intrusive method could be explored.

In fact the behaviour of software updates (specifically frequency and duration) is often glossed over in the grand scheme of things but rounds out a critical aspect of an application’s UX footprint. With such a competitive market for digital apps, software offerings now come in every shape, size and flavour. Developers can differentiate their wares by adopting less-invasive approaches to the necessity of updating source code.

But Firefox, no doubt with the best of intentions, isn’t alone in presuming users want regular software updates constantly interrupting the Web browsing experience. Perhaps it’s worth considering past offenders in the overzealous release cycle department. Adobe’s Flash Player and Acrobat Reader come to mind. Apple’s iTunes too, flagrantly demands to be updated on what sometimes feels like a near obsessive–compulsive basis. What gives?

The average user likely doesn’t care much about the seemingly inconsequential bug fixes or obscure back-end optimizations, which usually provoke such release builds in the first place. Rather, the user is largely preoccupied with what’s happening on the surface, what they can see and click (though the surface and the technical underpinnings are inextricably connected).
So when software updates routinely intrude upon one’s workflow and cause delays for no discernible gain, in terms of performance and/or added stability, users invariable begin to question the merit of constantly rewiring things under the hood.

By the same token, visual design and user-interface changes to a digital application, which tend to be more readily apparent (and arguably much more disruptive) on the surface, can be met with equal—if not significantly greater—resistance among end users. Changing iconography, altering the colour palette and other established visual design conventions can seem perfectly justified internally among design/development teams under the premise of following well intentioned “user-centered” design principles, but can be interpreted as arbitrary and superficial tinkering by outside users.

Mozilla’s Jono DiCarlo comes to a rather sobering conclusion on his blog:

“After years of aspiring to improve software usability, I’ve come to the extremely humbling realization that the single best thing most companies could do to improve usability is to stop changing the UI so often! Let it remain stable long enough for us to learn it and get good at it. There’s no UI better than one you already know, and no UI worse than one you thought you knew but now have to relearn.”

In digital application development, as in most design oriented disciplines, the adage less is more seems dutifully relevant here.

Image source: ElvirasDADA