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:
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:
]]>Back in 2012 we were fortunate to work on the (BIMA nominated) GetAheadOfTheGames website, it was a website that helped travellers navigate and plan their daily journeys whilst the London 2012 Olympic Games were taking place. Nearing launch (and as expected) there was an influx of people accessing the site from their Smartphones. However there was no 'Mobile Friendly' version. In real-world situations like this there is little time to recreate a responsive website, or for that matter to design and develop a new mobile version. For a complex site like this it would involve, effort in design, development and an entire cycle of testing.
So the brief was to create a Mobile friendly version of the site ASAP. The most effective and efficient approach was to use a strategy that involved Responsive Web, Adaptive Mobile Templates and creating a Mobile Web App for the core user journey - public transport visualiser.
We looked at which areas of the site could be made responsive with minimum effort, as the site was CMS driven through templates we identified which templates could be re-designed and modified.
Taking a step back and looking at the site from a Mobile first approach we identified key mobile user journeys - optimising the Information Architecture, content and navigation.
The core intent of the site was to help people identify possible congestion in the transport system due to the Olympic games. A redesign involved improving the design for touch screen, small screen layout and making use of the devices location. Also designing this as a self-contained mobile web app meant users could easily save it to their home screen, and view travel information without having to access/navigate the entire mobile web site.
In conclusion there is currently 'no one size fits all' approach when considering a Mobile Design Strategy, but instead we should look at which approaches can be used together to design and deliver the optimal User Experience, considering cost and time.
As yet using Responsive Web alone we won't be able to design solutions that utilise the full extent the Mobile device has to offer, therefore in this real-world case study we took the existing site and used Adaptive, Responsive Web and a Mobile Web App approach to deliver a very useful and award nominated Mobile experience.
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
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
Method: Using the swipe gesture to slide left and right
Use: To navigate back and forth through a sequence of screens
]]>Method: Partially slide the screen in focus left or right to reveal a new screen underneath.
Use: To reveal app navigation, or information that is in context to the overall application.
Real example: An obvious example is the Facebook app or Path app, however here is an example that I 'Pinned' on my Pinterest board a while back Reveal Example
Method: Tapping or double tapping on the current screen in view (side A) will flip the screen over to display the other side (side B).
Use: Side B presents a more detailed view of information than that on side A, or displays settings that can be adjusted, effecting the information displayed on Side A.
I hope the playing card analogy helps demonstrate the subtle differences in animation and how we can use these techniques to form the basis of our Mobile Application Design.
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.
]]> Mobile Screen Capture ApplicationsThere 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.
]]> The touch screen keyboardUnlike the Piano keys, or physical keyboard the touchscreen delivers no tactile feedback. Therefore when typing, the user must concentrate and focus their attention on each and every key, ensuring that the correct one is pressed. This is far from ideal when typing, as we spend most of the time focusing on the keyboard and not on what we want to type. What exacerbates this task even further is that the finger tip covers the letter/touch-zone entirely.
It's clear to see that touch zone (finger size) and keyboard size make an obvious difference in the usability of the keyboard. The first example below shows the Touch-zone target encroaching into the neighbouring keys 'q' and 'e'. The spaces dividing the keys in example two make the target easier to hit.
Is it any wonder users often try to reduce their own touch-zone by using the corner of a finger tip.
Notably, iOS actually vary the touch target size depending upon which keys the user is most likely to press next (see research from David Pogue and Lukas Mathis).
To optimally perform the task of typing a users gaze density should be focused on the text field, or area, and not the touchscreen keyboard.
Comparing the ideal with the actual gaze density we can see the users focus is largely on the keyboard.
Gaze density heat map key
The usability of the touchscreen keyboard is vastly improved by visually indicating which button has been pressed. However on many devices the indication is often presented at a large distance from the original button making feedback disjointed. This results in the users focus jumping back and forth between the finger (touch-zone) and the indicator.
A far more effective pattern is to include a visual connection between the button and the feedback indicator.
Using this approach ensures the gaze density is aligned with the key pressed giving immediate reassurance that the correct key has been selected.
Whilst testing we found this pattern to vastly improve both the speed and accuracy of touchscreen typing.
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.
]]> The digital worldWhen designing web-sites we rely so heavily on informing only our conscious mind, through numerous labels, signposts and waypoints. As we view a website our eyes dart across the screen consuming the visual stimulus, dwelling on bright and attractive visuals like moths to a light. We pause to concentrate as we read and digest the instructions, pondering whilst we analyse what we see and do.
As web designers we are compelled to fill the large screen with content, just as an artist would paint on a huge canvas. However on a web-page more often than not this creates unnecessary complexity and cognitive load, which simply means you'll lose your reader or prospective customer.
When designing for the small screen we are forced to focus on utilising the real-estate available, reducing content and signposts for navigation. This doesn't mean removing navigation entirely but instead thinking of ways we can inform the subconscious mind without the need for labels and textual description. Many successful Mobile design patterns achieve this by emulating everyday patterns in the physical world though our understanding the Physics of motion.
It was Newton who taught us about Inertia, where each action has an equal and opposite reaction. When you push or pull an object an equivalent force is applied. In Mobile design there are a number of affective patterns that use this understanding to help inform behaviour, namely the Pull-to-refresh, Recoil and Inertia Scroll.
The user drags or pulls on a list in order to update the content of that list.
There is more to this pattern than pull down. It is the elasticity and motion that gives the user reassurance that something has happened, or about to happen. It is an affective pattern when observed in a usability test, and although it is learned behaviour, once discovered, users find themselves frequently using it to refresh content.
This pattern uses little real-estate and is useful in Mobile as loss of signal (internet connection) often requires users to refresh content to have an up-to-date view.
This pattern is used to indicate the beginning and end of a sequence, it is often used when navigating an image gallery.
Once observed the user no-longer attempts to proceed, and instead subconsciously associates the last image (or first) viewed with this behaviour. I've tested the efficiency of this pattern on a number of occasions, it is so interesting to see how many times users attempt to continue when it is not used. Also when asking test candidates to recall their use of the gallery, very few recollect seeing the recoil or bounce effect. It is designing at this subconscious level that really makes a difference in interaction design.
This technique enforces directional awareness which is beneficial for users when building a mental model of the start and end location within a sequence.
Another effective pattern in mobile design is the use of animation to help guide and draw attention to a particular area of the screen.
The Grid, usually a set of evenly sized icons, this pattern serves the simple purpose of navigation (launching applications). Its optimum use is when restrained to only 4 x 4 icons, this is both for speed of use and location recollection.
In the western world it is common to read a grid of icons from top left, to bottom right, in a zig-zag motion. Although this process occurs at a fraction of a second it is still possible to increase recall and identification by applying a simple animation effect.
Apple have been using this technique since the first iPhone. The animation helps create a 'neutral' fixation point. This is where the eye line is drawn to the centre of the grid, momentarily stopping the viewer from 'reading' the grid. It is this process that causes the mind to view the grid in its entirety making it easier to locate the icon/application of choice.
Noteworthy, this animation is most effective on a small symmetrical grid of no more than 4x4 icons. The results also vary when the user becomes familiar and learns the location of the application icons within the grid.
When using animation to aid and inform interaction it is paramount that the execution is perfect, resembling exactly what we would expect from the physical world. A momentary judder or 'unnatural' motion and what should be registered at the subconscious is exactly the opposite, and instead causes annoyance and frustration. It is for this reason that animations (transition effects) should only be used with devices that are capable of presenting the desired result.
It's so important not to blindly copy an approach but gain a full understanding of why and how it is used. I've seen a number of mobile manufacturers use mobile interaction patterns incorrectly, be it through how they've been applied or context of use (Pinch-to-zoom gesture being used to navigate content!).
Focus on designing interactions at a subconscious level, where success is measure by the fact that the user doesn't even notice they are there.
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.
]]>An iPad app for prototyping iOS apps, this app is a kitbag of tools, From capturing your apps definition statement, Icon creation guides, mock-up creation tools, Price guidance and an App Store submission checklist.
Create a simple tap-through from your uploaded images, linking via hotspots
Present your wireframes via AxShare - Mobile Website Tutorial
This Web app allows you to actually produce the Mobile Web App through a range of pre-designed UI Widgets.
Create mock-ups, generate pdf wireframes and actually export a skeleton Xcode project to start developing from.
Flinto strikes the perfect balance between fast prototyping and realism. Prototypes run on iPhone or iPad and can be shared with anyone.
Framer can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop
Turn sketches, wireframes, PSDs and designs into interactive mobile and web prototypes in just a few clicks. Sources assets from Dropbox, allowing for rapid iterations and updates.
Origami is a free toolkit for Quartz Composer — created by the Facebook Design team — that makes interactive design prototyping easy and doesn’t require programming.
Proty is a tool that allows you to make quick, responsive, interactive wireframes that can be fully customized for designers. It lets you show your clients how things will work, not just how they will look.
Paper prototyping made easy - this app is specifically for Paper prototyping, use the app to take pictures of your sketches and scamps and then string them together to make a working mock-up.
]]>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.
]]> This table identifies the difference in performance between various Smartphone devices and browser.These results have been extended from Peter-Paul Koch of www.quirksmode.org. His DOM speed test dynamically creates 250 unordered lists with 20 items each and appends them to the document using innerHTML.
Device | OS | Version | Browser | DOM Speed (S) |
---|---|---|---|---|
iPad 2 | iOS | 5.0 | Safari Webkit | 0.7 |
iPhone 5 | iOS | 6.0 | Safari Webkit | 0.899 |
iPhone 4S | iOS | 5.0 | Safari Webkit | 1.678 |
Samsung Galaxy Nexus | Android | 4.0 | Android Webkit | 1.772 |
Nexus One | Android | 2.2 | Android Webkit | 1.9 |
HTC Desire | Android | 2.2 | Android Webkit | 1.916 |
Samsung Wave S8500 | Bada | - | Webkit Dolfin 2.0 | 2.1 |
HTC Desire-Z | Android | 2.3.3 | Android Webkit/5.331 | 2.33 |
Samsung H1 (Vodafone) | LiMo | R2 | Opera | 2.5 |
HTC Desire-Z | Android | 2.3.3 | Dolphin HD 4.5.0 | 2.55 |
iPhone 4 | iOS | 5 | Safari Webkit | 2.561 |
Blackberry Torch 9800 | OS6 | 6 | Blackberry Webkit | 3.411 |
Nokia N97 | Symbian OS | v9.4, S60v5 | Opera Mobile 10 | 3.6 |
LG Optimus One P500 | Android | 2.2 | Safari Webkit | 4.223 |
Nokia N97 | Symbian OS | v9.4, S60v5 | Nokia Webkit | 5 |
LG Optimus Chat C550 | Android | 2.2.1 | Android Webkit | 5.3 |
Nokia E71 | Symbian OS | v9.4, S60v3 | Nokia Webkit Ozone | 5.4 |
HTC Desire-Z | Android | 2.3.3 | Opera Mobile 11 | 5.8 |
Nokia N900 | Maemo | 5 | Fennec b5 | 6.2 |
Palm Pre | Palm webOS | 1.1.2 | Palm Webkit | 6.7 |
Nokia 5800 | Symbian OS | v9.4, S60v5 | Nokia Webkit | 7.1 |
Nokia N900 | Maemo | 5 | MicroB(Mozila Geko) | 7.4 |
Nokia Lumia 800 | Windows Phone | 7.5 | IE 9 | 10.101 |
iPhone 3G | iOS | 3.1 | Safari Webkit | 11.1 |
HTC Touch Diamond | Windows Phone | 6.1 | Opera Mobile 9.5 | 12.3 |
iPhone | iOS | 2.2 | Safari Webkit | 14.3 |
Nokia E71 | Symbian OS | v9.2, S60v3 | Jataayu 5 | 45 |
Examples of CSS 3
What is html 5 video? (wikipedia quote...)
HTML5 video is an element introduced in the HTML5 draft specification for the purpose of playing videos or movies
What is Canvas? (wikipedia quote...)
The ability to draw, render graphs, create graphics, or other visual images on the fly.
What is Storage? (wikipedia quote...)
Web storage can be viewed simplistically as an improvement on cookies, providing much greater storage capacity (5MB per domain in Mozilla Firefox[3], Google Chrome, and Opera, 10MB per storage area in Internet Explorer[4]) and better programmatic interfaces. However, it differs from cookies in some key ways.
What is Geolocation? (wikipedia quote...)
Geolocation is the identification of the real-world geographic location of an object, such as a cell phone or an Internet-connected computer terminal. Geolocation may refer to the practice of assessing the location, or to the actual assessed location.
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)
Resistive Touchscreen (Common device - Nokia N97)
Make | Phone | Touchscreen |
Apple | iPhone | Capacitive |
Apple | iPhone 3G | Capacitive |
Apple | iPhone 3GS | Capacitive |
Make | Phone | Touchscreen |
Samsung | Omnia HD | Capacitive |
Sony Ericsson | Satio | Resistive |
Nokia | N97 | Resistive |
Nokia | N97 Mini | Resistive |
Nokia | 5800 XpressMusic | Resistive |
Make | Phone | Touchscreen |
HTC | Tattoo | Resistive |
HTC | Hero | Capacitive |
HTC | Magic | Capacitive |
Huawei/T-Mobile | Pulse | Capacitive |
Motola | Milestone | Capacitive |
Samsung | Galaxy | Capacitive |
Make | Phone | Touchscreen |
Samsung | Omnia Pro | Resistive |
Samsung | i8000 | Resistive |
HTC | HD2 | Capacitive |
Sony Ericsson | Xperia X2 | Resistive |
Sony Ericsson | Xperia X1 | Resistive |
Make | Phone | Touchscreen |
LG | KS360 | Resistive |
LG | Renoir KC910 | Resistive |
LG | Cookie | Resistive |
LG | Arena | Capacitive |
LG | Crystal | Capacitive |
LG | Viewty Smart | Capacitive |
LG | BL40 Chocolate | Capacitive |
Samsung | Jet | Resistive |
Samsung | Tocco Lite | Resistive |
Samsung | Genio Touch | Capacitive |
Samsung | Tocco F480 | Resistive |
Samsung | Tocco Ultra | Capacitive |