Download as PDF, PPTX
Uploaded byLilia Sfaxi
Mobile developement
Users spend most of their time using mobile apps rather than mobile web. Some key best practices for mobile development include considering hardware constraints like limited memory and storage, connectivity issues, and screen size variability. Apps can be monetized through paid downloads, ads, in-app purchases, or freemium models. Native, web, hybrid, and cross-platform are categories of mobile apps. User experience must be optimized for small screens and mobile contexts.
TechnologyâŠ
More Related Content
![[English version] JavaFX and Web Integration](https://cdn.slidesharecdn.com/ss_thumbnails/js1-13endl-120419075151-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Mobile developement
- 1. MedTech Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi Chp8-Mobile Development Mobile development best practices 1 MedTech â Mediterranean Institute of Technology CS-Web and Mobile Development MedTech
- 2. MedTech MOBILE APPLICATIONS STATEOF THE ART 2 Mobile Development
- 3. MedTech 10 Key Numbersto Know (2016) âą Users spend 90% of their time on mobile applications, in comparison with mobile web âą Users download an average of 8,8 applications a month âą Increase of 5% in comparison with previous year âą In Mai 2016, the average cost of installing an application is of $2,33 in Android (+93% comparing with previous year) and $1,46 on iOS (-3%) âą 25% of the installed applications are never used âą 26% of the installed applications are abandoned after the first use âą 45% of mobile applications users do not appreciate their shopping experience, vs 47% for web applications users âą An average Android application loses 77% of its daily active users in the 3 days following its installation, and 90% in the 30 first days âą Among those who stop using an application, 30% can use it again if they are offered a discount, and 24% will do it if they are offered an exclusive content or bonus âą 78% of companies use advertisement to increase applications downloads 3 Mobile Applications State of the Art
- 4. MedTech Smartphones ⹠First mobilephone: 1983 by Motorola ⹠PDA: Personal Digital Assistant (PDA) in 1990 ⹠Agenda, contacts list, notepad ⹠Synchronisation with a computer ⹠Smartphone = Mobile Phone + PDA ⹠In 2001 with Sagem ⹠Boost in 2005 with the first iPhone, and the purchase of Android by Google ⹠Mini mobile computer ⹠Possibilité to download and install applications 4 Mobile Applications State of the Art
- 5. MedTech Some Mobile OperatingSystems âą Old generation âą Symbian (Nokia) âą Blackberry OS (RIM) âą Windows Mobile (Microsoft) âą Bada (Samsung) âą Touch OS âą iOS (Apple) âą Android (Google) âą Windows Phone (Microsoft) 5 Mobile Applications State of the Art
- 6. MedTech Smartphones Market Share(2016) 6 Mobile Applications State of the Art
- 7.
- 8. MedTech Hardware Constraints âą Whendeveloping applications for mobile devises, some hardware constraints must be taken into consideration âą Limited Memory / Slow Processor âą Even though some new top-of-the-line devises can reach 3GB of RAM (even 4 for some phablets), most of them suffer from a long loading time âą Avoid long and complex processing, greedy in memory âą Limited Storage Capacity âą Some very top-of-the-line devises (iPhone6S, Nexus 6P) have a 128GB disk capacity âą But a lot of models have only 4GB of storage (most of them have 16GB) âą You can think about storing in the cloud for example. 8 Mobile Development Specificities
- 9. MedTech Hardware Constraints âą Autonomy âąAvoid applications that spend a lot of unnecessary energy âą Use the "Energy Saving" mode âą Small and Changing Screen Size âą Consider varying size from one device to another âą Exploit all the available space in an optimal manner âą Use responsive design (adaptable to the screen size) âą Think about HMI that ease the navigation (a fixed header, usage of icons instead of words,âŠ) 9 Mobile Development Specificities
- 10. MedTech Hardware Constraints âą ConnectivityProblems âą Due to mobility, connectivity is limited âą Usage of 3G/4G networks, which are paying âą Think of an offline mode for your applications âą Be careful with automatic updates âą Slower Download âą Because of slower internet connections, limited network latency and memory and processor capacities âą Download speed is slower than computers âą 80% of users don't want to use their mobile devises to navigate the web âą 64% expect a web page to be available in 4s, when a smartphone displays it in an average of 9s âą Use technologies that ease pages download, like exploiting the cache, or using CSS3 âą Reduce the size of images, the number of files and the client-side processing 10 Mobile Development Specificities
- 11. MedTech Hardware Constraints ⹠DelicateHandling ⹠Delicate use of the touch keyboard, risks of typing errors, and very unpleasant for the user ⹠Minimize the number of input fields ⹠Favor pre-filled fields ⹠Auto-complete, auto-correct,⊠⹠Invalid clicks, because of the FAT FINGER phenomenon ⹠Be careful with the size and proximity of the clickable elements ⹠think of a "Cancel" functionality almost everywhere ⹠No hovering effect ⹠Need for more links and buttons ⹠Use conventions for mobile design, such as "swipe" of "shake" 11 Mobile Development Specificities
- 12. MedTech User Experience âą Representsthe behaviour, attitude and emotions of a user when he handles a certain product, system or service âą Includes the practical, experimental and emotional aspects of human- machine interaction âą Concerns âą The utility âą The ease of use âą The efficiency âą Subjective notion, as it depends on the concerned person âą Dynamic notion, as it evolves constantly in time âą Change in the circumstances of use âą Change of the habits and trends 12 Mobile Development Specificities of the product
- 13. MedTech Monetization âą The creatorof an application can sell it via download platforms (App Store, Google Play, âŠ) âą But it is not the only way to monetize your application âą Paying application âą Classical way of monetizing an application âą Very cheap applications (less than 1 dollar) have a lot of success âą In general, 70% for the developer, 30% for the platform âą The price varies depending on the OS âą Certain users are reluctant to buy applications (esp. on Android) âą Trial Version âą Provide a limited version, that gives an idea to the user about the application âą Well adapted for games âą But, there is a maintenability problem for the developers 13 Mobile Development Specificities
- 14. MedTech Monetization âą Advertisements âą Asa banner or âą Profitable for developers who want to be known and have some revenus âą Ads are generally pay per click: it's difficult to estimate the income âą Ads can deteriorate the UX (slowness, click by mistake,âŠ) âą Ads must be well targeted ⹠⊠and ads are really, really annoying⊠⹠Sponsoring âą Encourage users to perform an action in exchange with a virtual good âą Well adapted for games âą The audience is well targeted, thus chances for earning money are bigger 14 Mobile Development Specificities
- 15. MedTech Monetization âą Freemium âą Offervirtual content for money âą Apple: in-app purchase âą Google: in-app billing âą Can be implemented on a paid or free application âą A quality application incites users to use it again and to buy some content âą The virtual content must be worth its price âą The experience must be limited, otherwise the user can be frustrated 15 Mobile Development Specificities
- 16. MedTech CATEGORIES OF MOBILEAPPLICATIONS 16 Mobile Development
- 17. MedTech Native Applications ⹠Applicationswritten in the programming language specific for a particular platform ⹠Example: Objective C / Swift for iOS, Java for Android, ⊠⹠High performance and high reliability ⹠Can access all device functionalities: camera, contact list, ⊠⹠Can be used without any internet connection ⹠But, development costs are high, because these applications are associated to a given platform, which means it must be re-written for other platforms 17 Categories of Mobile Applications
- 18. MedTech Web Applications ⹠Websites adapted for mobile devices ⹠Accessible via the web browser of the mobile device ⹠Accessible only on-line, without any installation ⹠Any changes are applied only once, to the source web application, and all users see it ⹠Need to make your web site "mobile friendly" for a better user experience ⹠Usage of HTML, JavaScript, CSS⊠18 Categories of Mobile Applications
- 19. MedTech Hybrid Applications âą Exposethe content of existing web sites as mobile applications âą The web browser is no longer part of the user experience âą The application is installed like any other native application âą Publishable in the applications stores âą Have more access to the device functionalities than web applications, but are still limited compared to native ones âą Render the user interface using an embedded web browser âą Wrapped inside a native application that uses a mobile platformâs WebView âą You can think of the WebView as a chromeless browser window thatâs typically configured to run fullscreen. âą Most hybrid mobile applications leverage Apache Cordova (previously called PhoneGap) 19 Categories of Mobile Applications
- 20. MedTech Cross-Platform Applications âą Developedusing an intermediate language (such as JavaScript) that is not native to the device's operating system âą Different from HTML5 Hybrid apps, as hybrid apps incorporate both some web and native code âą Cross-platform development create pure native applications, but generated for multiple platforms from a unique code âą Generally, a third party vendor chooses a programming language and creates a unified API on top of the native SDKs provided by the various OS vendors âą Using this unified API, it is possible to support multiple operating systems with a single code base. âą The third-party vendor generally provides an IDE (Integrated Development Environment) which handles the process of creating the native application bundle for iOS and Android from the single cross-platform codebase. âą Examples: Xamarin (C#), NativeScript, React Native 20 Categories of Mobile Applications
- 21. MedTech USER EXPERIENCE (UX) 21 MobileDevelopment
- 22. MedTech Mobile UX âą MobileUX âą Perceptions and feelings of users before, during and after their interaction with the mobile application âą Need to rethink our acquired reflexes about the design of desktop applications âą Consider: âą The small size of the screen âą The difference of functionalities between devices âą Usage and connectivity constraints âą The changing context âą A set of key components of the mobile user experience have been defined 22 User Experience (UX)
- 23. MedTech Component 1: Functionalities âąSelect functionalities that are relevant to the user âą Guidelines âą Offer functionalities adapted for smartphones (ex: bar code reader) âą Prefer functionalities that are used in a mobile environment (ex: geolocation) âą Make sure that the fundamental functionalities are optimised for the mobile (ex: clic-to-call phone numbers) âą Key functionalities must be available in all channels (application or web site) 23 User Experience (UX)
- 24. MedTech Component 2: InformationArchitecture ⹠Arrange the content following a logical structure to help users find the necessary information easily ⹠Guidelines ⹠Prioritize according to the need of the user ⹠Minimize the number of clicks, make each click useful ⹠Use Mobile Design Patterns ⹠Enable navigation for touch and non-touch screens ⹠Ease the navigation: enable back button, home button,⊠⹠Use names that are clear, concise and descriptive for the links and navigation buttons 24 User Experience (UX)
- 25. MedTech Component 3: Content âąUse several data formats (text, image and video) to offer information to the user âą Guidelines âą Offer an adapted and balanced content âą Using a multimedia content can have added value, especially when the main goal of the application is entertainment or learning âą Let the user have the control over the multimedia content: do not start a video or a sound automatically, for ex. âą Make sure the content is appropriate for mobile devices (ex. image optimisation) âą Make sure the content is presented in a format supported by the device âą Some applications still ask iOS users to install Flash⊠đ 25 User Experience (UX)
- 26. MedTech Component 4: Design âąVisual presentation and interactive experience of the device âą Guidelines âą âMobilize, donât miniaturizeâ (Ballard) and âDonât shrink, Rethinkâ (Nokia) âą Maintain a visual consistency and originality (colour, typography and personality) to guarantee an immediate visual recognition of the brand âą Design to remember the desired information at a glance âą Define a visual flow: the main element of the application should guide you to the other functionalities âą Consider both portrait and landscape modes 26 User Experience (UX)
- 27. MedTech Component 5: UserInput âą The necessary effort to produce data should be minimised and should not require both hands âą Guidelines âą Mobile forms should be efficient and concise âą Offer a help to the user input (dropdown list, auto-complete,âŠ) as frequently as possible âą Offer alternative modes of input depending on the device (movement, camera, voice, geolocation, âŠ) âą Change the keyboard according to the input fields (ex. use an adequate keyboard for email addresses, or numeric keypad for numbers) âą Consider the auto-correct suggestions (enable spell-check) 27 User Experience (UX)
- 28. MedTech Component 6: MobileContext âą The device can be used anywhere, anytime âą Take into consideration the changing environment âą Consider extremely inconfortable situations as much as extremely confortable ones âą Guidelines âą Use the characteristics of the device to anticipate the needs of the user in the context of the usage of the application âą Offer the possibility to navigate with the voice to go through cooking recipes âą Change the characteristics of the interface depending on the time of its usage âą Switch automatically to the Night Shift for ex. âą Use the user's location to display any proximity information âą Use the default UI according to the device, and authorise improvements later 28 User Experience (UX)
- 29. MedTech Component 7: Usability âąTo which extent do all the previous components (information architecture, design, content,âŠ) collaborate together? âą Guidelines âą Guide the user to what he should click on, select, or swipe âą Target elements must be of an adequate size and well spaced âą Target elements must be placed in adequate areas of the screen âą Some areas, difficult to access, can be used for deletion âą Reduce the learning curve by using conventions and patterns âą Avoid using technologies that are not supported by all the platforms 29 User Experience (UX)
- 30. MedTech Component 8: Confidence âąDegree of confidence and confort the users feel when using the application âą Guidelines âą Be careful to the security and respect of privacy âą Do not collect and use personal information without authorisation âą Let the user take control of the information he wants to share âą Clearly point out your business practices by offering explicit links to security policies 30 User Experience (UX)
- 31. MedTech Component 9: Feedback âąHow to draw the attention of the user and display important information? âą Guidelines âą Minimize the number of alerts and optimise their content âą Notifications must be brief, informative and easily deletable âą Offer a feedback and confirmation without interrupting the user âą If your application displays badges and notifications on the status bar âą Keep them up to date âą Delete them only when the user took notice of them 31 User Experience (UX)
- 32. MedTech Component 10: Help âąOptions, products and services available to assist the user when handling the application âą Guidelines âą Make the access to the help easy, in a distinguishable place âą Offer several ways to get support âą FAQ, calls, tweets,⊠⹠Offer a fast tutorial when first using the application âą Offer a contextual help and advises to guide the user when the application introduces a new concept âą Offer support videos when necessary, but give the user control over them 32 User Experience (UX)
- 33. MedTech Component 11: Social âąContent and functionalities enabling: âą Creation of a social participation âą Production of user interaction âą Sharing on social media âą Guidelines âą Maintain a presence in social media (facebook page for ex.) âą Incorporate your social activities in your mobile application by showing your recent activities and offering an easy way to follow or like you âą Enable users to easily connect to their social network via your application âą Usage of provided APIs for sharing, tagging, liking and commenting âą Invite users to generate content about your brand/company for a potential profit in return 33 User Experience (UX)
- 34. MedTech Component 12: Marketing âąMethods used for the users to find the application or site âą Factors encouraging the repeated usage of the application âą Guidelines âą Insure your visibility by optimising your site/application for mobile research âą Offer a QR (Quick Response) code for your application âą Promote your application on other possible channels (TV, posters,..) and offer promotions for its download/purchase âą Ask users to grade and comment your application, and to share their opinion on social media 34 User Experience (UX)
- 35. MedTech KEY DESIGN PRINCIPLES 35 MobileDevelopment
- 36. MedTech Design Principles âą Keyprinciples that help you design a mobile application that satisfies the best practices, minimises costs and maintenance need, and help usability and extensibility âą Separation of concerns âą Single Responsibility Principle âą DRY : Don't Repeat Yourself âą Do not start with a big design upfront âą Privilege composition over inheritance 36 Key Design Principles
- 37. MedTech P1: Separation ofConcerns âą Divide your application into distinct parts which functionalities overlap the least possible âą Advantages âą Optimisation of a module or functionality independently from the others âą If a module fails, it doesn't impact the others âą Makes the application easier to understand and design âą Makes managing complex systems easier âą Divide and Conquer 37 Key Design Principles
- 38. MedTech P2: Single ResponsibilityPrinciple âą Each component or module must be responsible of only one functionality or characteristic âą Advantages âą Makes the components more cohesive âą Makes the components' optimisation easier if a characteristic changes 38 Key Design Principles
- 39. MedTech P3: DRY (Don'tRepeat Yourself) âą You must not duplicate a functionality in an application over multiple modules âą Advantages âą Eases the implementation of changes âą Increases clarity âą Makes the code more consistant 39 Key Design Principles
- 40. MedTech P4: Avoid Doinga Big Design Upfront âą If your needs are not clear, or if there are risks that the design will evolve in time, avoid making too much effort in the design at the beginning âą Makes your design evolve with your application âą Advantages âą Helps you embrace evolving requirements âą Avoid losing your morale at the beginning of the project âą Proceed step by step 40 Key Design Principles
- 41. MedTech P5: Privilege Compositionover Inheritance âą Classes should achieve polymorphic behaviour and code reuse by their composition instead of inheritance if possible âą Advantages âą Inheritance increases the dependency between parent and child classes âą Child classes' reuse is more limited âą Reduces the inheritance hierarchy, which can be laborious âą It is better to compose what an object can do (HAS-A) rather than to extend what it is (IS-A) 41 Key Design Principles
- 42. MedTech But also⊠⹠Uselogical layers to "tidy up" your application's components ⹠Use design patterns, and be careful to use only compatible ones in the same layer ⹠Use abstraction to implement loose coupling between layers ⹠Keep the data formats consistant in the same layer ⹠Separate as possible non-functional code (security, logging,..) from business code ⹠Be consistant in naming conventions ⹠Establish your own standards to deal with exceptions 42 Key Design Principles
- 43. MedTech Dr. Lilia SFAXI www.liliasfaxi.wix.com/liliasfaxi References 43 âąWeb Sites âą inoutput.io, Choosing the right mobile app for your project, http:// inoutput.io/articles/development/choosing-the-right-mobile-app-for-your- project-native-vs-cross-platform-vs-hybrid, consulted 10/04/17 âą InfoQ, Pros and Cons of Cross-Platform Mobile App Development, https:// www.infoq.com/articles/mobile-cross-platform-app-development, consulted 10/04/17