Boosting Your Mobile App: Small Details, Big Impact by Mathieu Fillion

Want to take your mobile app to the next level? We'll explore the small but powerful details that elevate apps from good to great.

Through real-world examples and code, we'll cover animations, gestures, dialogs, useful native APIs, seamless keyboard interactions, and smooth authentication flows.

Whether you're after quick wins or advanced techniques, this session will give you practical tips to enhance your app’s user experience.

https://youtu.be/RUKybXgUbIo

DevFest Montreal

Transcript

1. Boosting your mobile app. Small details, big impact. Montreal Mathieu Fillion
2. Mathieu Fillion 13 years​ chez Windows Phone Mobile / Xamarin / .NET​ / Flutter Azure​ I always had the user at the center of my attention and loved collaborating with designers.
3. Perception is all in the details.
5. First impression is key
6. First impression is often a form…
7. FORMS KeyboardType
8. • iOS: UIReturnType • Android: ImeOptions.ImeAction • Flutter: textInputAction FORMS Submit button Label
9. • 1 line of code • In the SMS, include the word “code” and use digits only once to help iOS recognize it One Time Codes on iOS Native
10. • SMS Consent API • Multiple flutter packages on pub.dev One Time Codes on Android
11. • SMS Retriever API • No user input, it’s magic! • SMS needs to include a hash from your signatures • “Your code is 123456. #adFE341v” • Get the hash with android keytool One Time Codes on Android
12. • Usage is increasing1 • 21% in 2022 • 34% in 2023 • Not only for Web! • Don’t forget the password reset flow so the manager updates the new password. • Code looks simple, but there are additional steps ---> Password managers 1Source: https://www.security.org/digital-safety/password-manager-annual-report/
13. iOS: set entitlements and host an apple-app-site-association file on Password managers https://<fully qualified domain>/.well-known/apple-app-site-association Android : Host a Digital Asset Link file at https://<fully qualified domain>/. well-known/assetlinks.json Those files contain signatures that prove a link between the app and the website domain.
14. Animating for a purpose
15. Animating for a purpose Teach
16. Animating for a purpose Engage
17. • Provide feedback • Confirm an action • Multiple options like Lottie or Rive Micro-animation https://lottiefiles.com/
18. Easing & speed
19. Dialogs Quiz time!
20. Dialog Quiz 1 Which screen is better?
21. Avoid “Yes” and “No.” Always use “Cancel” to title a button that cancels the alert’s action Dialog Quiz 1 - Apple Human Interface Guidelines
22. Which screen is better? Dialog Quiz 2
23. For an uncommon destructive action, use a different style of button to draw attention. Dialog Quiz 2
24. Which screen is better? Dialog Quiz 3
25. Cancel buttons are typically on the leading side of a row Dialog Quiz 3 – Apple Human Interface Guidelines Don’t place dismissive actions to the right of confirming actions –m3.material.io
26. Read through Apple and Google’s guidelines • Apple Human Interface Guidelines • https://m3.material.io/
27. • Platform-specific icons • Share is special Icons Means share on both!
28. • Show proper icon based on hardware • Avoid FaceID icon on Android. Icons
29. App rating
30. 79% Read one review before installing
31. Core Hater <1% of people who have crashes, can’t install the app, don’t like your monetization or you customer support, have lost game progress etc. Key Stats Audiences Core Reviewers <1% of people who believe in giving good or balanced reviews. Non-Reviewers 98% of people are non-reviewers: they are enjoying the app or have quit already. Source: https://www.gamedeveloper.com/business
32. Now lets mix 50 reviews from core haters (1) with 50 reviews from core reviewers (4.5). You have just ended up with a 2.75 average. 50 reviews from core reviewers + = Conclusion: You need non reviewers into action and drown out the core haters. 2.75 average star rating 50 reviews from core haters Audience
33. • Find positive moments to prompt the user • After “X” successful significant actions • Games will prompt after a win or lucky event • Don’t prompt repetitively. • Find the perfect balance • Not too early, however you need a good volume of reviews. In app rating
34. • > 3 application launches. • > 3 completed primary actions. • > 5 days since the first application launch. • > 30 days since the last review request. • Feature flag Config example
35. Accessibility
36. ~30% of users changed their text size setting Source: airbnb engineering blog
37. Mobile accelerators Leverage what a phone offers.
38. • Registering your pet with an animal hospital. • Taking a “profile” picture of a dog or a cat is hard! • Make noises with the phone speakers, so the pet looks at the camera. Phone speaker and camera
39. • So much quicker than typing • Character recognition running on-device • Barcodes and QR Codes are even easier Facilitate input with camera
40. • Think ahead of the user to prevent frustrations • Detect screenshots • Modify brightness • Offer multiple app options on iOS when deeplinking, especially for maps Mobile APIs
41. • Offer tactile feedback for an important action • Add to cart • Completing a form • Message sent • Mobile games • Don’t overuse it! Haptic feedback
42. • For sensitive apps (Health, Finance, etc.) • Mark the app as secure to prevent: • screenshots • screen recording/sharing • app preview when multi-tasking Extra privacy
43. • iOS offers Dynamic Island and Live Activities to provide continuous visual feedback. • Powered by the same push notification system behind the scene • Possible in Flutter with a little swift ! Live Activity
44. • Sports event score tracking • Fitness activity session • Food delivery tracking • Track wait time for when your table is read • Street parking reminders • Flight status and gate changes • … • Lots of possibilities! iOS : Live Activity
45. Ask me 2 questions Connect