Mobile Mantras: Experience Design Best Practices for Mobile Development

Mobile Mantras Experience Design Best Practices for Mobile Development Panel Participants Brian Assmus Additional Frank R Dellario ContributorsInspiring Human Perspective Matt DiGirolamo GihanAmarasinghe Rob Fitzgibbon SagiChaitas Hannah Liberty Andrew Georgiou Michelle McNulty Dr. Rob Johnson Ryan Travis AmitVyawahare

Executive Summary •  How we got here •  Basic XD Mantras •  Testing Methodologiesonetooneglobal.com 2

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” Websitesonetooneglobal.com 5

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 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

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

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

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

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

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

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

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

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

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 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

Testing MethodologiesChallenges: •  Thousands of Mobile Handsets •  Diﬀerent Mobile PlaDorms/OS •  Diﬀerent Mobile Carriers/Manufacturers •  (Everything is so @#$@#^ complicated now) onetooneglobal.com 18

Mobile Usage vs. Testing Capabilities Smartphone Pla2orm Market Share Android Apple BlackBerry Windows Palm onetooneglobal.com 19

Types of Mobile Apps Testing •  User Interface TesRng •  FuncRonal TesRng •  Performance & Stress TesRng •  Usability TesRng Addi%onal key tes%ng types: •  CompaRbility TesRng •  CerRﬁcaRon Compliance •  Submission Guidelines •  InterrupRon TesRng •  Monkey TesRng •  Low/No Network TesRng onetooneglobal.com 20

Mobile Technology SetsPlatforms Android iOS Blackberry Windows WebOSDevices Various Apple Blackberry Various HP / Palm HTML / CSS / Dev. Language Java Objec;ve 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 WebOSStandard 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 ModelMulti-tasking Yes No Yes Yes Yes onetooneglobal.com 21

Mobile App Test Strategy Remote Device Access Service •  Device Anywhere (Paid) •  Dawn of a New Era – the •  Perfecto Mobile (Paid) •  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

Delivering Efficiency via Automation Test Automation Success Criteria Reliable Maintainable Scalable •  Issues detecRon and •  Minimum sensiRvity to •  Test coverage expanded security applicaRon and test case eﬃciently •  Accurate VeriﬁcaRon changes •  Automated test cases •  Unaaended ExecuRon •  Test cases separate from created by non technical automaRon code resources onetooneglobal.com 23

Mobile Automation Approachonetooneglobal.com 24

6 Emerging Trends in 2012 1.  Mobile grabs the budget spotlight 2.  Tablets are here to stay 3.  NFC will drive mobile payments 4.  Mobile ALM goes mainstream 5.  TesRng moves to the cloud 6.  Private clouds for mobile tesRngonetooneglobal.com 25

In Summary •  How we got here •  Basic XD Mantras •  Testing Methodologiesonetooneglobal.com 26

http://www.scoop.it	91
http://us-w1.rockmelt.com	5
http://a0.twimg.com	2
http://www.twylah.com	1
http://www.linkedin.com	1

Mobile Mantras: Experience Design Best Practices for Mobile Development

by One to One

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 100

Statistics

Mobile Mantras: Experience Design Best Practices for Mobile Development Presentation Transcript