Mobile Mantras  Experience Design Best Practices for          Mobile DevelopmentPanel Participants  Brian Assmus          ...
Executive Summary                        • How we got here                       • Basic XD Mantras                     • ...
Back in the day,                     internet design was so mellowonetooneglobal.com                                   3
Everything is so @#$@#^ complicated nowonetooneglobal.com                        4
What do we mean by “mobile”?                     Apps vs. “Mobile-Friendly” Websites                        Native vs. web...
And now…This is what we learned whilemaking it up as we went alongonetooneglobal.com              6
Basic Mantras/Guidelines• Keep in mind that  mobilization is content,  context, and taskspecific• Mobile requires a smalle...
UX   • Define the use cases (for     example, find a product price,     find a store near you, call us,     or perform a s...
IA• Search is the most important• Minimize the amount of user text  input required• Group large lists by categories, each ...
IA Use top aligned labels        for forms.     Not only does this     allow users to fill out     the form faster, but it...
IA• Provide a link to full desktop site  on all pages• Use all the available width (i.e.,  not columns) for links, list  e...
Visual• Try your color palette in  different environments  (low light, bright sunlight,  fluorescent lights)• Keep graphic...
Visual• Only essential  elements are found  on the home page• Use background  colors to separate  sections• Use legible fo...
Content• Mobilize content –  not just layout    The ski resort of St.    Moritz refocuses the    content on their    mobil...
Content        Take it Easy With Ads• Small space can become  easily cluttered.• The New York Times is a  good example of ...
Smaller Pieces Doesn’t Mean Less Consumption  onetooneglobal.com                           16
Content                       Don’t skimp on the content!            Having a “light” site doesn’t mean you should leave  ...
Testing MethodologiesChallenges:• Thousands of Mobile Handsets• Different Mobile Platforms/OS• Different Mobile Carriers/M...
Mobile Usage vs. Testing Capabilities                       Smartphone Platform                          Market Share     ...
Types of Mobile Apps Testing                           • User Interface Testing                            • Functional Te...
Mobile Technology SetsPlatforms             Android          iOS           Blackberry         Windows            WebOSDevi...
Mobile App Test Strategy              Remote Device Access Service                                      •   Device Anywher...
Delivering Efficiency via Automation                            Test Automation Success Criteria           Reliable       ...
Mobile Automation Approachonetooneglobal.com                                24
6 Emerging Trends in 2012                        1. Mobile grabs the budget spotlight                             2. Table...
In Summary                        • How we got here                       • Basic XD Mantras                     • Testing...
Join Our Conversation!                       @Onetooneglobal                        #MobileUsability                      ...
Upcoming SlideShare
Loading in …5
×

Mobile Mantras: XD Best Practices for Mobile Development

583 views

Published on

Panel discussion presentation put on by OTO for the UPA Boston chapter\'s Feb 2012 meeting

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
583
On SlideShare
0
From Embeds
0
Number of Embeds
27
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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
  • Mobile Mantras: XD Best Practices for Mobile Development

    1. 1. Mobile Mantras Experience Design Best Practices for Mobile DevelopmentPanel 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. 2. Executive Summary • How we got here • Basic XD Mantras • Testing Methodologiesonetooneglobal.com 2
    3. 3. Back in the day, internet design was so mellowonetooneglobal.com 3
    4. 4. Everything is so @#$@#^ complicated nowonetooneglobal.com 4
    5. 5. What do we mean by “mobile”? Apps vs. “Mobile-Friendly” Websites Native vs. web developmentonetooneglobal.com 5
    6. 6. And now…This is what we learned whilemaking it up as we went alongonetooneglobal.com 6
    7. 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. 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 Friendlyonetooneglobal.com 8
    9. 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 usefulonetooneglobal.com 9
    10. 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. 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. 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. 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. 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 & Localizationonetooneglobal.com 14
    15. 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 versiononetooneglobal.com 15
    16. 16. Smaller Pieces Doesn’t Mean Less Consumption onetooneglobal.com 16
    17. 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. 18. Testing MethodologiesChallenges:• Thousands of Mobile Handsets• Different Mobile Platforms/OS• Different Mobile Carriers/Manufacturers• (Everything is so @#$@#^ complicated now) onetooneglobal.com 18
    19. 19. Mobile Usage vs. Testing Capabilities Smartphone Platform Market Share Android Apple BlackBerry Windows Palmonetooneglobal.com 19
    20. 20. Types of Mobile Apps Testing • User Interface Testing • Functional Testing • Performance & Stress Testing • Usability Testing Additional key testing types: • Compatibility Testing • Certification Compliance • Submission Guidelines • Interruption Testing • Monkey Testing • Low/No Network Testingonetooneglobal.com 20
    21. 21. Mobile Technology SetsPlatforms Android iOS Blackberry Windows WebOSDevices Various Apple Blackberry Various HP / Palm HTML / CSS /Dev. Language Java Objective C Java C# / C++ / VB JavaScriptSource Model Open Closed Closed Closed Closed LimitedMulti-tasking Yes Yes Limited Yes (iOS 4+) Webkit Blackberry Varies with WebOSStandard Browser Browser Safari Browser Device / Carrier BrowserPlatforms GSM CDMA LTE HSPA+ WiMAX AT&T, Verizon, AT&T,Devices Verizon Sprint T-Mobile Sprint T-Mobile 3G 3G 4G 4G 4GDev. Language 1769 / 739 848 / 506 6.44 / 5.0 2.48 / 1.05 2.15 / .081 kbps kbps mbps mbps mbpsSource ModelMulti-tasking Yes No Yes Yes Yes onetooneglobal.com 21
    22. 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. 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 resourcesonetooneglobal.com 23
    24. 24. Mobile Automation Approachonetooneglobal.com 24
    25. 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 testingonetooneglobal.com 25
    26. 26. In Summary • How we got here • Basic XD Mantras • Testing Methodologiesonetooneglobal.com 26
    27. 27. Join Our Conversation! @Onetooneglobal #MobileUsability #ExperienceDesignonetooneglobal.com 27

    ×