Knowing when to Respond - Mobile Design Strategy Case Study

Jan 3

alt Picture of a boy wearing oversized clothes, with a message reading One Size Fits All - Transport visualiser

I'm an advocate of Responsive Web Design, in the ever changing way we access the web it's a progressive step in designing for various screen sizes and resolutions. However of late I've seen trends that would suggest Responsive Web is the single and only solution for delivering a Mobile Strategy.

"Responsive Design is not a panacea. Rather a great step in the right direction" - Brad Frost.

There is also the notion that Mobile First is a costly and time consuming approach to adopt. This somewhat misses the point; maybe it's just a miss-interpretation of what Luke Wroblewski's Mobile First actually means! Mobile First shouldn't always involve starting from scratch for existing websites, nor is it merely about designing for small screens and adding more features for larger screens.

To the User Experience Designer 'Mobile First' is about designing experiences that meet user needs through the Context and Power of Mobile, harnessing the 'Smartphones' full capabilities and realising designs that breakaway from the limitations of the desktop computer.

When laying out a Mobile Strategy we have a wide range of methods and approaches in our mobile design kitbag:

  • Native Apps
  • Mobile Web Apps
  • Hybrid-Apps
  • Adaptive Web
  • Responsive Web

The most important point is these shouldn't be seen as competing, but instead a Mobile Design Strategy can be made up of any number of approaches. The key to success however is that together they deliver a consistent and seamless experience for the end user.

Enough preamble; here's a 'real world' example of how a tailored mobile experience was realised through multiple approaches:

Continue reading
Filed under:

The Magic of Transitions and Animation in Mobile Interaction Design

May 11

Magicians hat and playing cards

This is a continuation from my previous article - Mobile Interaction Design for the subconscious mind, where we looked at how Interaction Design and Animation can help form mental models for mobile touch-screen navigation.

The Magician shuffles the deck of cards. "Pick a card, and place it back into the pack", he says. As the deck is reshuffled the chosen card's location is traced as it transcends through the pack, sliding over and under each card in turn.

"It’s the quickness of the hand that deceives the eye," the Magician says, as he flips the card over to reveal the Ace of Spades.

The playing card analogy works well when Designing Mobile Interactions.

Take half a dozen cards and place them on top of each other, now think of how touch gestures can be used to explore the cards, and how various techniques should be used to present information.

In the video below we use a number of playing cards to help visualise the importance of animation in Mobile App Design

Slide Over

Slide over

Method: Using either a tap or swipe gesture to slide a new screen above the one currently in view.

Use: Often used to display a modal dialogue, interrupting the users current flow.

Real example: Selecting the 'Sign in' link on Google's Mobile App will slide over a 'Sign In' screen - Slide Over Example

Slide left/right

Slide right

Method: Using the swipe gesture to slide left and right

Use: To navigate back and forth through a sequence of screens

Continue reading
Filed under:

Mobile Usability Testing

Dec 28

Conducting usability tests for Mobile Websites and Applications can be tricky without the appropriate equipment. Recently I sat in on some observations for a new Mobile App, all-in-all it went really well, but I couldn't help but think the equipment could have been better. There were restrictions applied to the candidates, where they were unable to move the device from its observation cradle, this resulted in a reduction in natural movement and behaviour.

Jan Evans of Fusion Alliance has written a summary of Setup options for Mobile Usability Testing, the article looks at a variety of usability test equipment for Mobile devices and includes the Pros and Cons of each - these range from Wearable, Screen Capture applications, Document Cameras, Specific mounts/testing sleds and Do It Yourself solutions.

Continue reading
Filed under:

Fine tuning the mobile touchscreen keyboard

Oct 13
piano sketch

There are some really good articles on the usability of Touchscreen keyboards, some comparing Android to iOS, others look at variations between manufactures. This article summarises the results from a short usability study. Using eye tracking and predictive techniques it helps revealed why some touch keyboards are easier to use than others.

A crescendo reverberates around the auditorium as the piano keys are struck with measured precision and vigour. The pianist barely has to even glance at the piano's keys as each delivers a tactile and audible response to the senses.

Continue reading
Filed under:

Mobile Interaction Design for the subconscious mind

Oct 7
Footballer strikes on goal

This article looks at how our perception of the physical world can be harnessed to design effective and successful Interaction patterns for Mobile touch screens.

The football zooms across field at great speed. As you attempt to volley it goal-ward your conscious mind is rapidly deciding upon the best approach to score; as you watch the trajectory and predict the ball's location your unconscious is preparing your muscles for impact. GOAL! Like everything we do this entire process occurs at a conscious and subconscious level, as we interact with the physical world in which we live.

Continue reading
Filed under:

Prototyping Mobile Apps

Jul 15
Mobile Prototyping

Creating a Mobile prototype is key to the success of any Mobile App, it helps us iterate our designs and qualify our approach through usability testing.

Things have moved on since the days of Visio and OmniGraffle, we now have a larger variety of tools at our disposal for Wireframing and designing web sites and applications. The likes of Axure, Balsamiq and others help demonstrate the rich interactive behaviour we expect to see in the end product.

When it comes to designing Mobile Apps it's so important to be able to demonstrate how the app will actually behave on the mobile device. We need to see how certain transitions and animations can be tailored to act as waypoints and help enrich the experience.

We've listed a number of useful tools that can be used effectively to prototype your Mobile Apps. These range from simple tools that allow a collection of images to be linked together via tap zones, to more complex applications that help you wireframe a design using a host of native app interfaces.

Continue reading
Filed under:

Mobile Browser JavaScript Performance

Jan 3

When creating mobile web sites we must consider the use of JavaScript when manipulating the DOM. This is because the speed at which the mobile browser can perform DOM transforms varies considerably from browser-to-browser, the memory and processor speed of the specific device.

Continue reading
Filed under:

Great Mobile Web Performance resources of 2011

Dec 30


2011 has truly been a great year for Mobile Web, we’ve finally seen the adoption of Mobile First thinking within the web design community (originally coined by Luke Wroblewski way back in 2009).

Retail sites have seen a huge influx of visitors from Mobile devices, forcing them to rethink their web strategy to include mobile.

The increase in mobile web traffic has almost certainly put a strain on the Mobile Network Operators abilities to deliver data at speeds necessary for the end user.

2011 has seen some great articles, resources and recommendations for mobile web site performance.

Continue reading
Filed under:

Windows phone 7 - VISIO Template

Dec 1


Created this WP7 Visio template a while ago, I've added it here so someone can save some time if needed. The plan was to add all the tiles, will have to add those at a later date.

Includes generic phone template and a Panoramic template.

You will need the correct WP7 font Segoe WP.

Filed under:

Smartphones' with Resistive and Capacitive touchscreens

May 31

If you are thinking of buying a Smartphone here is a useful list of popular devices that sport either Capacitive or Resistive touch-screens.

So what does this mean? Well, Capacitive allows for light touch navigation and Resistive is as it would suggest, needs more pressure (more likely to use a stylus).

Capacitive Touchscreen (Common device - iPhone)

- Smooth and responsive interaction (Apple’s slick multi-touch gestures, such as pinching and spreading two fingers to zoom and reduce on-screen objects, are only possible on a capacitive screen).
- A bare finger is required for operation since the body’s electricity is blocked by gloves.
- Require glass screens that can shatter when dropped.

Resistive Touchscreen (Common device - Nokia N97)

Use of fingers, both bare and gloved, and non-specialised stylus
Poor responsiveness, Scratch-prone surfaces, components that wear out and break over time, less-than-perfect transparency

Continue reading
Filed under:

Mobile Design UK - April forum

Apr 6

This months Mobile Design UK forum is entitled Mobile Apps vs Mobile Web, so if you're interested in Mobile Design then why not sign-up to mobiledesign-uk and register. You'll need to get your skates on as places for this free event are going quickly.

Sign-up and then register at
Mobile Design UK April forum 2010

Filed under:

MobileHCI 2008 Presentations

Sep 8

This years MobileHCI 2008 conference was held in Holland, Amsterdam. For those like me who couldn't attend six presentation decks have been made available:

  1. Text input for mobile devices by Scott MacKenzie
  2. Mobile GUIs and Mobile Visualization by Patrick Baudisch
  3. Understanding Mobile User Experience by Mirjana Spasojevic
  4. Context-Aware Communication and Interaction by Albrecht Schmidt
  5. Haptics, audio output and sensor input in mobile HCI by Stephen Brewster
  6. Camera-based interaction and interaction with public displays by Michael Rohs

Filed under:

Google's User Experience for Mobile Applications

May 6

Google have unveiled their Mobile User Experience Strategy for the delivery of Mobile Applications. To read more on the overall strategy check out the article "Google’s Mobile User Experience Strategy" over at Information Week.

Google state that the application design can be segmented into 6 layers:

  1. Understanding users, anywhere, anytime
  2. Fits in your pocket
  3. More personal than the PC
  4. Consistency across modes
  5. Localization is intensified
  6. Integrated devices, modes, products

Continue reading
Filed under:

Mobile Web Guidelines

Jul 27

With input from big players such as Google, Microsoft, Nokia, AOL, AT&T, Ericsson, GoDaddy, and Vodafone the W3C have defined a set of basic guidelines for developing mobile Web content.

Mobile Web Best Practices 1.0, consists of instructions on how to avoid technical issues when viewing web content from mobile devices.

The guidelines also focus on how to prevent known problems such as pop-up windows, horizontal page scrolling and more. It is seen that these guides will aid content authors, web developers and web designers when planing to create websites that will also be available via mobile devices.

There is also a Wiki dedicated to the Mobile Web Best Practices, enabling people to actively respond and add valuable input.

Mobile Web Best Practices Wiki

Filed under:

Mobile Versions of XHTML

Mar 31

Is there really a need for a specific mark-up language for mobile devices? we have seen WML, XHTML Basic, and CHTML. However the latest offering is XHTML Mobile profile and WML2.

Little Spring Design specialise in design and usability UI specifically for mobile devices. Check out this site to keep up-to-date on the latest that is mobile UI.

Filed under:

4th Generation mobile phone

Jun 8

Move over 3G mobile networks here comes the all new 4G. The forth-generation of mobile phone ready to take the consumer by storm.

The lessons of 3G are learnt with 4G, bringing us the benefits of 3G and Wi-Fi together in a new faster service.

Read on here

Filed under: