The document provides best practices for mobile experience design and development. It outlines basic mantras like keeping mobile sites simple and focused on key tasks. It also discusses testing methodologies, noting the challenges of testing across thousands of devices and platforms and the benefits of remote testing services and test automation. Emerging trends mentioned include the growing importance of mobile in budgets, the rise of tablets and NFC payments, and a shift to cloud-based mobile application lifecycle management and testing.
Mobile Mantras: XD Best Practices for Mobile Development
1. Mobile Mantras
Experience Design Best Practices for
Mobile Development
Panel Participants
Brian Assmus Additional
Frank R Dellario Contributors
Matt DiGirolamo Gihan Amarasinghe
Rob Fitzgibbon Sagi Chaitas
Hannah Liberty Andrew Georgiou
Michelle McNulty Dr. Rob Johnson
Ryan Travis
Amit Vyawahare
2. Executive Summary
• How we got here
• Basic XD Mantras
• Testing Methodologies
onetooneglobal.com 2
3. Back in the day,
internet design was so mellow
onetooneglobal.com 3
5. What do we mean by “mobile”?
Apps vs. “Mobile-Friendly” Websites
Native vs. web development
onetooneglobal.com 5
6. And now…
This is what we learned while
making it up as we went along
onetooneglobal.com 6
7. Basic Mantras/Guidelines
• Keep in mind that
mobilization is content,
context, and taskspecific
• Mobile requires a smaller,
simpler version of a
website that focuses on
information and services
• Make the redirection to
the mobile site automatic
but allow access to the
full site, ideally permitting
mobile users to follow
deep links into the site
onetooneglobal.com 7
8. UX
• Define the use cases (for
example, find a product price,
find a store near you, call us,
or perform a search).
• Order the use cases by the
most frequent for a mobile
user. Use your best guess,
statistical information, and
usability tests to keep this
order updated.
• Simplify: Do your best to
make every use case
successful in no more than
three clicks or at a page depth
of no more than three.
• Touch/Swipe Friendly
onetooneglobal.com 8
9. IA
• Search is the most important
• Minimize the amount of user text
input required
• Group large lists by categories, each
with no more than 10 items
• Provide the most-used features at
the top
• Provide a Go to Top link in the footer
• Provide a Back link
• Use location services if useful
onetooneglobal.com 9
10. IA
Use top aligned labels
for forms.
Not only does this
allow users to fill out
the form faster, but it
is also better for
field zooming.
onetooneglobal.com 10
11. IA
• Provide a link to full desktop site
on all pages
• Use all the available width (i.e.,
not columns) for links, list
elements, text inputs, and all
possible focusable elements
• Maintain the total link count at no
more than 10 per page
• Keep the main navigation to 3 or
4 links
• Avoid horizontal scrolling
onetooneglobal.com 11
12. Visual
• Try your color palette in
different environments
(low light, bright sunlight,
fluorescent lights)
• Keep graphics limited
• No to Low multimedia
• Maintain visual
consistency with your
desktop site or brand
• Think Condensed from the
visual standpoint
onetooneglobal.com 12
13. Visual
• Only essential
elements are found
on the home page
• Use background
colors to separate
sections
• Use legible fonts on
every screen; don’t
rely on the
resolution
onetooneglobal.com 13
14. Content
• Mobilize content –
not just layout
The ski resort of St.
Moritz refocuses the
content on their
mobile website to be
task based (what’s the
weather, what lifts are
open)
• Personalization &
Localization
onetooneglobal.com 14
15. Content
Take it Easy With Ads
• Small space can become
easily cluttered.
• The New York Times is a
good example of not porting
all ads from the desktop
version
onetooneglobal.com 15
17. Content
Don’t skimp on the content!
Having a “light” site doesn’t mean you should leave
out content from it. Some service providers
apparently think that mobile users don’t need all
that content – wrong! It’s a sure way to annoy and
cause problems for people if you put one tenth of
your content or shortened versions of articles on
the mobile site.
onetooneglobal.com HTTP://XKCD.COM/869/ 17
18. Testing Methodologies
Challenges:
• Thousands of Mobile Handsets
• Different Mobile Platforms/OS
• Different Mobile Carriers/Manufacturers
• (Everything is so @#$@#^ complicated now)
onetooneglobal.com 18
19. Mobile Usage vs. Testing Capabilities
Smartphone Platform
Market Share
Android
Apple
BlackBerry
Windows
Palm
onetooneglobal.com 19
21. Mobile Technology Sets
Platforms Android iOS Blackberry Windows WebOS
Devices Various Apple Blackberry Various HP / Palm
HTML / CSS /
Dev. Language Java Objective C Java C# / C++ / VB
JavaScript
Source Model Open Closed Closed Closed Closed
Limited
Multi-tasking Yes Yes Limited Yes
(iOS 4+)
Webkit Blackberry Varies with WebOS
Standard Browser Browser Safari Browser Device / Carrier Browser
Platforms GSM CDMA LTE HSPA+ WiMAX
AT&T, Verizon, AT&T,
Devices Verizon Sprint
T-Mobile Sprint T-Mobile
3G 3G 4G 4G 4G
Dev. Language
1769 / 739 848 / 506 6.44 / 5.0 2.48 / 1.05 2.15 / .081
kbps kbps mbps mbps mbps
Source Model
Multi-tasking Yes No Yes Yes Yes
onetooneglobal.com 21
22. Mobile App Test Strategy Remote Device Access Service
• Device Anywhere (Paid)
• Perfecto Mobile (Paid)
• Dawn of a New Era – the
• Nokia RDA (Free, For Symbian Phones)
handset cloud
- Significantly lower Pros
testing/development • No purchase necessary
costs • Can select different carriers
- Works with flexible/agile • More reliable than
• Automation capabilities.
development methods
Cons
• Takes time
• Reservations required
• High service costs
onetooneglobal.com 22
23. Delivering Efficiency via Automation
Test Automation Success Criteria
Reliable Maintainable Scalable
• Issues detection and • Minimum sensitivity to • Test coverage expanded
security application and test case efficiently
• Accurate Verification changes • Automated test cases
• Unattended Execution • Test cases separate from created by non technical
automation code resources
onetooneglobal.com 23
25. 6 Emerging Trends in 2012
1. Mobile grabs the budget spotlight
2. Tablets are here to stay
3. NFC (near field communications) will drive mobile payments
4. Mobile ALM (application lifecycle management) goes mainstream
5. Testing moves to the cloud
6. Private clouds for mobile testing
onetooneglobal.com 25
26. In Summary
• How we got here
• Basic XD Mantras
• Testing Methodologies
onetooneglobal.com 26
Gestation of panel – Hallway conversationsTouching the elephantMy role is Vanna White of Wheel of FortunePanelists:Brian is a interface designer with this Clark Kent/Superman paradigm – great illustratorFrank understands the technology and understands the client. Kinda like Carter in Hogan’s Hero’s – lovable and is always blowing things upMatt: Yeoman researcher – you’re just so glad he’s on your side – kind of guy Henry V was talking about in the “we few we merry few we band of brothers’ St. Crispin’s SpeechHannah – IA – she can catch the lacrosse ball left handed – her fundamentals are great and can be applied to unique circumstancesMichelle: user research Strong silent type. When you have a problem, she has the solutions – and she has solutions for 3 things down the road you haven’t even thought about yetRyan, web developer – our rockstar of responsive design – thinks like a developer but feels like a creativeAmit: our backstop – there isn’t a dev issue that he can’t solve
Again, not sure where a point like this would sit, but I would also mention ensuring you consider the overall user experience across multiple devices. You talk about ensuring visual brand consistency but I think it goes a little further than that. I don't know anyone who's sole experience of all things online is via a mobile device. To some extent, its about how you design and structure content and where you place functionality - and where you send people to standard websites because that is the best experience for a particular interaction.Where does the tablet fit in – another 4 hours of debateFlash is dead or has solved a problem that doesn’t exist anymore
Apps are downloaded and installed on your mobile device, as opposed to rendered in a browserAvailability, compatibility, findability, updatability, sharability, sustainabilityDepends on context, app as cached, depends if user need DB or internet accessWith HTML5, people aren’t thinking apps anymore (at least some people say that - HTML5 will kill native apps) hybrid approach?Ties into RESPONSIVE DESIGN is today’s equivalent of TQM (total quality management) aspiration masquerading as a methodologyDo users really differentiate? Agencies do…
Note that in the Far East it’s the mobile, not the web that’s the primary internet device
think about a mobile solution is not simply about considering people on the go.Why? Mobile is mobile, the user is in transit or idle somewhere ready to be in transit, they're not "parked" at their computer where they may not mind lengthy input or process. Mobile needs to be in bit size chunks, easy to pop in an digest.On page 2 when talking about redirecting to the mobile site I think it is important to allow user to follow deep links into the site, whether this means that they view the full version of the site first (and therefore the page they were looking for) with the option to switch to the mobile version (i.e. it's not automatic redirection). Or the site can handle the deep link whilst moving the user to the mobile version of the site. The later option may be difficult to implement especially if the original deep link does not have a mobile equivalent.
Depending on the device, a design ethos should include being 'thumb friendly'. This doesn't necessarily mean that people always use their thumbs to interact with their device, but the design should be usable for all people, however big or cumbersome their hands and digits may be (no staring at my hands!). This doesn't necessarily mean bigger targets - you can often achieve the same result by allowing for bigger spaces between targets.How account sells “a side of mobile”
This may be more of an internal consideration, but I've always made a point that structural and functional navigation devices can work very differently on mobile. Tabs aren't always as effective and faceted search/navigation should be treated very differently. Again, this goes back to ensuring the content is fit for a mobile site.Similarly, I think its more important on a mobile site that the navigational model remains consistent. Mobile sites should avoid using too many different models - avoiding jumping between a 'hub and spoke' approach and a hierarchical model.
Another Example: Website may have a call to action page suggesting user create a sign in or create one for their site, with links to sign in and sign up, 3 pages total, on the mobile, combine them together (one page for intro and sign in, one page for sign up page). In other words, think condensed from a visual standpoint.Comparing experiences on mobiles side by side Do you pick a device or be all things to all people – ties into your researchMobile, unlike the desktop, is a sharing device
But digestible chunks doesn't mean less content. Though a hershey's kiss is small, if I eat enough, I've eaten a whole candy barI would extend mobilizing content to include personalisation and localisation. And make a point that this is no longer limited to apps - HTML5 and JQuery makes some of the rich, localised interaction possible on mobile sites too.
http://www.msnbc.msn.com/id/26396295/The finding is detailed in the October 2008 issue the Journal of Consumer Research. In the other new study, Maura L. Scott at the University of Kentucky and colleagues at Arizona State University assessed people's perceptions and eating habits of M&Ms in regular and miniature packages
Thousands of Mobile Handsets: For mobile developers, it is one of the biggest challenges that they may ever face. In order to develop a mobile application, one needs to be very sure about the devices they are targeting. According to a research 1388.2 million handsets were sold in year 2010.Thease devices are of different screen sizes, input methods (QWERTY, touch, normal) with different hardware capabilities. Knowing the fact that testing on every device is not possible and feasible at all, the diversity in handsets is a big challenge for Mobile developers.2) Different Mobile Platforms/OS: There are different Platforms/OS currently present in the market. Android, IOS, BREW, BREWMP, Symbian, Windows 7, Blackberry (RIM) and so on. Diversity in mobile platforms, different OS versions and platform limitations make it a bit difficult and challenging for developing mobile apps and so for testing them. There might be chance of inconsistency in terms of functionality across multiple devices of same platform and every platform may have some limitations.3) Different Mobile Carriers/Manufacturers:There are different mobile carriers in the market and every manufacturer may have some norms regarding the mobile application, if the application is coming preinstalled in the device. Verizon wireless, AT & T, T- Mobile, Orange, Docomo, Airtel, Vodafone, Reliance are some the carriers.
Gihan
Similar to general Software Testing, Mobile Software Testing also includes:User Interface Testing (Color scheme, Menu styles, Consistency of UI over various Devices)Functional Testing (Testing core functionality of Mobile App as per specification)Performance & Stress Testing [Behavior of Mobile Application in Low resources(Memory/Space), Behavior of mobile website when many mobile user simultaneously access mobile website)]Usability Testing (Testing of usability aspects of Mobile Apps)Apart from above mentioned testing types, some key testing types may include the following.Testing for Compatibility:Testing the compatibility of your application with native device features (i.e. To make sure your application is not hampering native device functionality)Certification Compliance Testing:For downloadable mobile applications, there are various Third party Mobile Quality Certification program for various platforms. True Brew Testing(for BREW Apps), Java Verified program (for J2ME apps), Symbian Signed Test Criteria (for Symbian Apps) are some examples. Apart from regular functional testing, you may need to test your application against the test cases/Testing criteria provided by these certification processes. However, it depends on your client, whether they want to certify their application or not.Submission Guidelines Compliance Testing: The application needs to adhere to the specified submission guidelines to publish it in any mobile application store. Failure to meet these guidelines may result in rejection of your app on mobile application stores. For example failure to comply with application Submission guidelines for Apple App Store may result in rejection of your app in Apple app store.Interruption Testing (Voice Calls, SMS, Charger, Low memory Notification) while application is running.Monkey Testing: – Continual key pad entries via tools to test application stability with various key press events.Low Network/No Network case Testing: – Application behavior when there is no network coverage or Low network strength.
Today, we are in the midst of a new mobile testing era. Leading enterprises and web companies are shifting away from tedious and time consuming manual testing and emulator based testing methodologies to the use of a handset cloud, an environment to remotely test, troubleshoot and monitor applications on real devices over the Internet, in real time across the major mobile networks in the world. The main benefits are seen in significantly lower testing and development costs as well as a very flexible and agile application development environment that enables companies to securely and quickly respond to business needs and the extremely dynamic mobile market.Take Help from Remote Device Access ServiceDue to a large number of devices available in the market, it is not feasible to buy a new device every time. At the same time Simulators are not completely reliable enough to launch a mobile app based on testing conducted only on simulators. RDA (Remote device services) can be a good solution to deal with these challenges. The remote device access services enable access to a live device over the Internet. As a Mobile Apps Tester, you should be aware of such services and should suggest your managers about the capabilities of such Services.Some Available RDA Services are:Device Anywhere (Paid)Perfecto Mobile (Paid)Nokia RDA (Free, For Symbian Phones)Advantages of RDA:You don’t need to purchase actual device.User can select different Carriers e.g. Verizon, T-Mobile, AT & T.RDAs are more reliable than simulators as they are real devices.Some RDA Service like Device Anywhere also has automation capabilities.Disadvantages of RDA:Since you access devices remotely it takes time for any action or key event.Sometimes the needed device is not available due to prior reservations.Higher Service Cost
Delivering Efficiency via AutomationAutomation testing tools are most efficient at the same time allowing testers to automate tedious repetitive test scenarios and generate reports. Add that to the ability to access and operate real mobile devices via the web and you get yourself a powerful mobile testing machine. Scripting specific usage and test scenarios for data driven regression and functional testing, scheduling them, running them in loops, running them across multiple devices, all of these allow a given QA team to accomplish much more with much less resources. Tasks that previously took manual testers days to complete can be replaced by unattended execution of comprehensive automated test scripts on multiple devices. Using a cloud-based remote device access platform with strong automation capabilities, enables organizations to address the ongoing problems of testing costs and complexities in the impossibly dynamic mobile market.
Explore Tools and Utilities:There are many software tools and utilities available in the market which may help you in testing of your Mobile Application effectively. Some of these tools are available in SDKs itself. However you may still dig out the internet for such tools on various platforms.Tools to check Battery Consumption while your app is running. E.g. Nokia Energy Profiler.Tools/Software to capture screenshot: – There are many tools available for various mobile platforms to capture screenshot from device itself. E.gScreenshot tool for Symbian S60 Devices.Tools to Generate dummy files to test behavior of mobile app at Low EFS. e.g. Maxfilecnt utility from QUALCOMM for BREW mobile apps,Fill Device Memory Lite for Android apps.Tools to Generate Random key events. e.g. Monkey tool(Android), BREW Grinder(BREW), Hopper Test Tool (Windows Mobile)Tools to Capture Logs. E.g. Apphance for Android.Here are six emerging trends that will be even hotter this year:Mobile grabs the budget spotlight – Mobile will take on a more prominent role in enterprises’ budgets and team structure as its business justification becomes clear.Tablets are here to stay – Tablets will become an essential work tool. According to a Gist study, more that 65 million tablets are expected to sell in 2011, and 65% of mobile workers use a tablet (some of this is actually for work!)NFC will drive mobile payments –2012 is billed as the year that mobile payments will finally arrive on center stage. However, we still see a couple of key questions to be resolved before mobile payment reach prime time: 1) what is the clearing process?; 2) how do you ensure secure payments?; and 3) how do you test mobile payments in such a diverse market?Mobile ALM goes mainstream – Mobile testing will no longer be a side project in the QA process, but rather an organic and essential part of the process.Testing moves to the cloud – Not only will the cloud will become more dominant in terms of mobile services, it will also be used for all types of software testing. Cloud-based testing for mobile apps will be a particularly powerful solution as it is well-suited to support multiple testing environments. Due to the large and ever-growing number of mobile platforms, developers require numerous testing environments that can be managed and supported relatively easily in the cloud.Private clouds for mobile testing – Integrators will establish their own “private” clouds to support the mobile testing needs of enterprise customers using 3rd party technology (e.g., Perfecto Mobile).
TomDeMarcoPeopleware, open kimono the tech may change but often the challenges are the same