Primer: Touch First Thinking for Web

One of the big areas I would like for us to touch on as a department is the idea of pushing our design and web content into the touch first mentality. The reason is simple. Our audience is shifting to mobile for both viewing and purchasing on the web. Specifically tablets.

For the period of April 6 through May 6 this year and last year:

  • Biblia.com mobile traffic increased nearly 250% (90K visitors to 318K)
  • Logos.com mobile traffic increased 25% (82K vistors to 102K visitors)
  • Logos.com revenue from mobile traffic increased 83% (from $54K to $99K)

We have also seen a year over year increase in mobile revenue on Logos.com since 2009. The below chart shows a comparison of revenue on Logos.com from desktop and mobile traffic. The big take away from the chart is the 100% increase in mobile traffic and 93% increase in mobile revenue in the past twelve months. That segment of our visitor base to Logos.com is growing more rapidly than our desktop user rate and his exceeded $1M in the past twelve months.

Logos.com mobile revenue

Logos.com mobile revenue May 2012 – May 2013

To sum up we need to move to think touch first for web design.

Prefer interaction paradigms that are natural for touch (such as swipe for slide decks and carousels).
Minimize the use of mouse interaction paradigms (such as hover states).
Emphasize design and implementation to fit well with landscape view for iPad (it is a reasonable standard).

Finally I wanted to post a conversation between Shiloh Hubbard and I from earlier (which prompted this post):

  • Shiloh: [in regards to “touch”] the idea is quite literally have no hover states? or only because it adds a step for mobile devices users?
  • Nathan: http://globalmoxie.com/blog/desktop-touch-design.shtml. That is a great article. I will send it around.
  • Shiloh: thanks, i’ll give it a read
  • Nathan: Hover states are only one part of the equation. Currently, most places design with mouse navigation in mind. Embedded links, lots of text in drop downs, etc. When you go to a website and you have layered navigation, on a desktop you hover then go to what you want. On a tablet, you click to get the drop down, then you click to get what you want.
  • Shiloh: Right.
  • Nathan: So everywhere we can we want to rethink the paradigm; if hover is necessary and advantages, how then do we make it seamless for a touch interface to interact with that? So it is not an abolition of hover, just a re-thinking of how often and where we use it.
  • Shiloh: Gotcha.

Comments

  1. Done well, hover (and other mouse interactions) can be a valuable addition to design (for example, ref.ly), providing extra-contextual information aiding decision behaviors. (Unfortunately, most hover elements I’ve seen don’t simplify interaction or provide more information, they just attempt to make sites more irrelevantly “sexy.”)

    But we don’t have to settle for either/or.

    When there is value in a hover action and it can’t be elegantly done away with (see again, ref.ly), the design can be adaptive. The platform can be tested for in CSS using “media queries.” This allows us to change the display and behavior of a site for any number of devices, resolutions, and modes (such as when the device is in portrait vs landscape mode). Further, we don’t have to specify all the possible variations, just target the primary audience types.

    http://www.w3.org/TR/css3-mediaqueries/

    http://alistapart.com/article/responsive-web-design

    Quote: Ā« If the device passes the test put forth by our media query, the relevant CSS is applied to our markup. Media queries are, in short, conditional comments for the rest of us. Rather than targeting a specific version of a specific browser, we can surgically correct issues in our layout as it scales beyond its initial, ideal resolution.

    This seems like it would be a hassle, but the cost is largely up-front, one-time. A well done set of media-and-device-specific stylesheets along with a set of design guidelines would still allow us to design once with multiple platforms benefiting in the output, and poise us to be responsive to new media platforms and modes in the future.

    It doesn’t have to be a matter of either/or ā€” both audiences can benefit from the best we can offer on their platform of choice at the moment.

    Rich

  2. It’s pretty darn obvious that we need to make the most of the mobile platform. If the company is seeing increased revenue from it then we need to make sure the revenue stream is maximized.

    However, what is not clear in all of this (to me at least) is if the listed statistics give us any indication of whether mobile visitors used the full site or the mobile site? Wouldn’t we want to know this? The information provided by this type of stat would give us insight as to what we should develop or optimize for–i.e. optimize logos.com for mobile or build out a separate mobile site. Given the current state of our mobile site my guess is the conversion rates are next to ‘nil.

  3. Nathan Elson says

    Dennis: currently it is the mobile view that get’s served to most of our mobile audience. We know we need to get better at mobile. The question is does that mean full desktop for smaller devices (which are fully capable of running complex javascript applications) or separate mobile experiences?

    http://uxdesign.smashingmagazine.com/2013/05/24/gesture-driven-interface/?utm_source=feedly is a link that argues for unique mobile experiences.

Speak Your Mind