1. 1. MOBILE DESIGNTHAT SCALESBuilding for Existing and Future Devices
2. 2. CONTENTSIntroduction.................................................................................................2The App..........................................................................................................3Adaptive Layout is a No Brainer Right?..............................4When Adaptive Layout is Not Enough................................5Cards.................................................................................................................6Material Design System ...................................................................8Wearables ...................................................................................................11Conclusion...................................................................................................12INTRODUCTIONMobile designers and developers share a commonfrustration stemming from the fragmented devicelandscape. With wearables on the horizon, thepuzzle is becoming more baffling. Is it possible todesign the perfect app and user experience for alldevices, from TV to wearables? This whitepaperoffers practical step-by-step guidelines to help youdesign flawless cross-channel app experiences.
3. 3. THE APPSince the announcement of Android Wear, wehad plans to redesign our Tasks application forthe Android ecosystem. The announcement ofthe Material Design System at Google I/O madeit obvious that wed have to reimagine Tasksfrom scratch. Tasks is a to-do lists app originallydesigned for Windows Phone and Windows 8.For our study, we chose a more simple scenariothan the one in the actual app. This presumes theprinciples well validate would then be applied tomore complicated scenarios. We stripped downthe task to its essentials: name, due date, reminder,priority and picture. The tasks could be organizedin categories. We were reimaging the app, so weplanned as though the Windows Phone/Windowsversion didnt exist.A publication of 3 Share this article
4. 4. ADAPTIVE LAYOUT ISA NO BRAINER RIGHT?TodayCategoryTask TitleREMINDER DUE DATE DONECategoryTask TitleREMINDER DUE DATE DONECategoryTask TitleREMINDER DUE DATE DONETasksCategoryTask TitleREMINDER DUE DATE DONECategoryTask TitleREMINDER DUE DATE DONECATEGORIES11:11A publication of 4 Share this articleTasksCategoryTask TitleREMINDER DUE DATE DONECategoryTask TitleREMINDER DUE DATE DONECategoryTask TitleREMINDER DUE DATE DONECATEGORIESToday11:11TasksTodayCategoryTask TitleREMINDER DUE DATELOAD NEXT WEEK DONECATEGORIES11:11When we think about design, responsive designand adaptive layouts are a must given thediversity of form factors. Adapting the layoutto different screen sizes starts with identifyingbreakpoints. A breakpoint is a point at whichcertain aspects of website or an applicationchange depending on specific conditions. Thebreakpoints we chose for Tasks used the Androidclassification and were measured in deviceindependent pixelsdp: Small and normal devices: Less than 480 dp.This accounts for most phones Large devices: Between 480 and 720 dp (i.e.Nexus 7) xLarge: 720 dp and above (i.e. Nexus 10 )Adapting the layout to differentscreen sizes starts with identifyingbreakpoints.
5. 5. WHEN ADAPTIVE LAYOUTIS NOT ENOUGHThese breakpoints cover the current devicelandscape in Android. We would create a differentlayout for each of these screen sizes, both forportrait and landscape orientations, if necessary.But what if a radical new form factor or platformis introduced, like wearables? To redesign anddevelop again from scratch is not a practicalbusiness solution. What happens when adaptivelayout is not flexible enough to make the designfully responsive? Content needs to be structuredto work on every possible screen sizeexistingand futureso we should intentionally designthat way. Everyone is in the business of creatingcontent, even Tasks. Users not only want accessto their tasks, but also to have the ability to createthem on any device of their choosing. Futureplatform-proof core content will be the foundationof our app. We have to be prepared to add thepresentation layer on top, depending on thecontext, device and use case, without changingthe core structure in the process. Our app will beplatform-agnostic for content, and platform-awarefor the user experience. There is noprimary platformall platforms are equal.To make our app design truly responsive, weadded to the need of adaptive layout, the needof adaptive content. In Karen McGranes talk,Adapting ourselves to adaptive content, she giveswonderful examples of how to develop a contentstrategy. While she focuses on large contentpublishers, adaptive content is totally applicablein situation like ours. Its the right approach ifimagining your app will run on all platforms, whethermobile or tablet apps, mobile or desktop web, socialmedia or anywhere elseeven print.Adaptive content is:-- Structured: Consists of bite-sized pieces ofcontent-- Designed for re-use: Has multiple versions fordifferent contexts-- Designed as a service: With APIs, data storageand future concepts for how people will interactwith it.Lets get back to our concept app. Weve alreadydetermined our breakpoints and structured ourcontent according to the principles listed above.Now, we face our next design challenge: users wantto share tasks in progress with others for exampleon their Facebook family group page. We need auser interface solution that not only combines theadaptability of the layout and content in the mostbeneficial way, but also creates rich interactions in aconsistent design format that works across multipleplatforms, including web, mobile, apps, wearablesand more.A publication of 5 Share this article
6. 6. CARDSYou may already know what cards is if youvestumbled upon apps like Tinder, Google Now,Twitter, Jelly and so on. Weve already written onthat topic.According to the Material Design systemguidelines, a card contains a unique data setof related, heterogeneous information, forexample, a photo, text, and a link all related to asingle subject. A card delivers information in aneasily readable way, and card interaction comesnaturally with a single finger (usually the thumbon the phone). Thats why it is perfect for smallerscreen sizes like phones and wearables. Cardscombine an information design pattern with theirown interaction model, a set of gestures, whichcreates an engaging user experience.Cards combine an informationdesign pattern with their owninteraction model, a set of gestures,which creates an engaging userexperience.A publication of 6 Share this article
7. 7. We chose cards as an atomic unit of our contentfor several reasons:-- Contextual structured content: A cardcan contain a single information itemtogether with a set of attributes or actionsrelated to the item, which provides the userwith choices in the context of this piece ofinformation. This is how cards distributecontext.-- Scalable: Adaptive by nature, the layoutconfigurations are very flexible. They can bestacked like deck of cards, or organized in alist or grid view.-- Fun: A single card can be swiped, markingthe task as done.-- Sharable: Design and information consistencyremains intact on a variety of platforms.-- Meaningful contextual information: Cardscan show meaningful information dependingon the context. The information displayed canvary both in terms of length and content the answer to the users question is providedbefore the question is asked.At this point, we need to pay attention to theUX principles of the platform for which we aredesigning.A publication of 7 Share this article
8. 8. MATERIAL DESIGN SYSTEMThe Material Design system can be explainedwith three words: light, surface and motion.Light: Google gives developers and designers abuilt-in way to provide depth through the z-axisand shadows of the user interface elements.Surface: The material metaphor is a way to seeevery piece of UI as something tangible andfamiliar. I wont get into details with the papermetaphor which is extensively covered in thesebrilliantly written guidelines.Motion: The usage of animations and meaningfultransitions provides context and affordance.With these principles Google, unifies the userexperience across the variety of devices and formfactors. As the device count grows, the biggestpromise of the Material Design system is thetransition of content between them to look andfeel natural and familiar.How the Material Design guidelines are appliedin our app:We started designing the app before Google I/O.After Material guidelines were announced, we hadto adapt the design once again. The core designprinciples and Tasks UI elements remain the same:the adaptive layout, the adaptive content andthe cards and they are supported by the MaterialDesign system by default.1. Typography, space and color.Square baseline grid8dp for all elements, 4dp fortype and iconographymargins according to theguidelines. Bold colors and typography make theinitial design background unnecessary.A publication of 8 Share this article
9. 9. 2. Floating action button (FAB)The FAB is the primary action for its context.In the categories view, the FAB morphs intotwo related action buttonsnew task buttonand new category buttonsince both primaryfor this context.A publication of 9 Share this article
10. 10. 3. DepthAlthough depth is not a visual ornament and it should support the information architecture,we added it here to emphasize the meaning.4. CardsOur cards vary from the Material guidelines a littlebit, but here is what we thought: we stepped onthe solid base of these guidelines and created asolution that solves the users problems in themost effective way without compromising theMaterial Design principles. It is an improvement.5. Animation and delightfuldetailsMost of the points above are only the designersconcern, but there is serious work to be done byboth designers and developers before everythingis polished and ready to ship. Thats why MaterialDesign is something more than a set of principles:it is a team collaboration.At this point, we can easily state that the designof Tasks for Android is almost done. Following theMaterial Design system, we are being consistent interms of transitioning the visual presentation of thecontent for Android Wear. Whats left to decideis which part of this content makes sense onwearables.Material Design is something morethan a set of principles: it is a teamcollaboration.A publication of 10 Share this article
11. 11. WEARABLESThere is a big conversation about whetherpeople use it or abandon it over time. That said,if we understand the experiences users wantout of these devices, we can tailor content thatmakes our app relevant for wearables.The superpowers of wearables are:-- Sensing: The information they collectshould be meaningful to their owner.-- Personal assistance: Wearables shouldprovide a set of context-aware and timelynotifications, without overwhelming the userwith frequent interruptions.-- Fast Access: Information is on the wrist,in front of eyes, and accessible withoutreaching for a phone or other device. Youcan take a picture instantly with a wink of aneye, making wearables ever-present at justthe right moment.The most important thing our app does is tohelp users organize their time. To do that, itshould remind the users for their tasks in acontextual way. Getting contextual triggeringright has great impact on the user experience.Each of the wearable superpowers above isabout context: the right information for the user,the right time to display a notification, resultingin the most reasonable action for the moment.Getting contextual triggeringright has great impact on theuser experience.We have two types of notifications:-- Just in time notification: for tasks with fastapproaching due dates-- Just in place notification: for tasks which canbe done near to a users locationThese notifications will appear in the contextscreen of the Android Wear:A publication of 11 Share this article
12. 12. On card dismissal, the task is considereddone. Otherwise it can be postponed with theaction button. For just in time notifications,it automatically postpones the task one day.For the just in place notifications, the task ispostponed until the next time a user passesthe triggering location. The combination ofboth is not possible by design.Just as important as the notifications, is thetasks creation. The cue card in Android Wearenables a user to speak to Google. Our app willregister to a voice intent users will use to createtasks for a specific due date, or for the locationthey are at the moment.It is as simple as that. Just carefully considerwhat would be relevant for the users context(time, location, physical activity) without beingpushy. These two simple rules will make theapp a helpful addition to users everyday lifeanywhereon their wrists or in their Googleglasses. As stated in Designing for Wearablesin Google I/O, the notifications in Google Glassand Android Wear will be shared.CONCLUSIONIt looks like we are ready to answer the questionwe asked in the beginning. Is it possible to designthe perfect app and the perfect cross-channelexperience on a mobile phone, TV, on a Twitteror Facebook summary card, wrist watch or evena refrigerator? I dont know. Certainly with ourapproach, the adaptive layout and the adaptivecontent strategy backed up with the cardswereclose enough. By looking for the answer, wereinforced that an app needs to be relevant aboveall else. That means it should have a relevantinterface, show relevant information and delivera relevant user experience. Today, you cant havea relevant app if you design only for just oneuse case, device and context. Regardless of theapproach and design process you choose, creatingdesign that scales across all existing and futureform factors and platforms makes an app relevantto the most users.Creating design that scales acrossall existing and future form factorsand platforms makes an apprelevant to the most users.A publication of 12 Share this article
13. 13. ABOUT THE AUTHORNina ZayakovaUI & Interaction designerNina Zayakova is a UI & Interaction designerfor mobile in Telerik. Her growing expertisein designing for different mobile platformsis driven by constant curiosity and urgeto help people understand. She stronglybelieves that user experience should never becompromised. You can read more from Ninaon Twitter at @myninka.A publication of 13 Share this article
14. 14. Telerik helps developers create engaging mobile experiences regardlessof the coding language of choice. Check out some of Telerik productshelping you build mobile apps faster.Cross-Platform DevelopmentTelerik Platformfor building cross-platform mobile apps for iOS, Androidand Windows Phone using JavaScriptNativeScriptfor building cross-platform native apps with JavaScriptUI for Xamarinbuilding cross-platform native apps with C#Hybrid DevelopmentAppBuilderfor building cross-platform hybrid apps using a single pureHTML5, CSS and JavaScript codebaseWeb DevelopmentKendoUIfor building modern sites and apps with HTML5/JSNative DevelopmentUI for Androidfor building pure native Android apps using JavaUI for iOSfor building pure native iOS apps using Objective CUI for Windows Phonefor building pure native Windows Phone apps using C#