#MTC2019: Mobile (jeszcze bardziej) first! PWA jako wyzwanie UX - Filip Makowiecki (e-point SA)
•
1 like•178 views
PWA - poza wymaganiami technicznymi - oznacza nowe wyzwania w zakresie UX, UI i contentu. Pokażemy, jak sobie z nimi radziliśmy w pracy nad pozornie „nieaplikacyjnymi” projektami portali sprzedażowo-obsługowych. Prelekcja wygłoszona podczas Mobile Trends Conference, 7-8 marca 2019 r. w Krakowie.
Recommended
More Related Content
Similar to #MTC2019: Mobile (jeszcze bardziej) first! PWA jako wyzwanie UX - Filip Makowiecki (e-point SA)
Similar to #MTC2019: Mobile (jeszcze bardziej) first! PWA jako wyzwanie UX - Filip Makowiecki (e-point SA) (20)
More from Mobile Trends
More from Mobile Trends (20)
Recently uploaded
Recently uploaded (6)
#MTC2019: Mobile (jeszcze bardziej) first! PWA jako wyzwanie UX - Filip Makowiecki (e-point SA)
- 1. PWA JAKO WYZWANIE UX O kilku nieoczywistych wyzwaniach w zakresie UX, UI i contentu w pracy nad „nieaplikacyjnymi” rozwiązaniami
- 2. ▌ UX Writer (i nie tylko) ▌ w Zespole Koncepcji ▌ w e-point SA. FILIP MAKOWIECKI
- 3. ▌ Software house ▌ z Zespołem Koncepcji ▌ specjalizującym się w portalach.
- 4. ▌ Czym jest PWA? ▌ Dlaczego PWA ▌ PWA Checklist ▌ Wyzwania UX w PWA AGENDA
- 10. DLACZEGO PWA?
- 11. LICZBA INSTALOWANYCH APLIKACJI MIESIĘCZNIE 51% 13% 11% 8% 5% 7% 5% 0% 10% 20% 30% 40% 50% 60% 0 1 2 3 4 5-7 8+ Dane za czerwiec 2017 w Stanach Zjednoczonych. Źródło: Statista. https://www.statista.com/statistics/325926/monthly-app-downloads-of-us-smartphone-users
- 12. 77% UŻYTKOWNIKÓW NIE WRACA DO APLIKACJI PO 72 GODZINACH OD ZAINSTALOWANIA https://andrewchen.co/new-data-shows-why-losing-80-of-your-mobile-users-is-normal-and -that-the-best-apps-do-much-better
- 13. PRZEWAGA PWA NAD ALTERNATYWAMI Szybkość działania Stabilność i praca offline Wykorzystanie funkcji natywnych Omnikanałowość Możliwość instalacji Google-friendly
- 14. PRZEWAGA PWA NAD ALTERNATYWAMI Szybkość działania Stabilność i praca offline Wykorzystanie funkcji natywnych Omnikanałowość Możliwość instalacji Google-friendly
- 15. PRZEWAGA PWA NAD ALTERNATYWAMI Szybkość działania Stabilność i praca offline Wykorzystanie funkcji natywnych Omnikanałowość Możliwość instalacji Google-friendly
- 16. PRZEWAGA PWA NAD ALTERNATYWAMI Szybkość działania Stabilność i praca offline Wykorzystanie funkcji natywnych Omnikanałowość Możliwość instalacji Google-friendly
- 17. PRZEWAGA PWA NAD ALTERNATYWAMI Szybkość działania Stabilność i praca offline Wykorzystanie funkcji natywnych Omnikanałowość Możliwość instalacji Google-friendly
- 19. PRZEWAGA PWA NAD ALTERNATYWAMI Szybkość działania Stabilność i praca offline Wykorzystanie funkcji natywnych Omnikanałowość Możliwość instalacji Google-friendly
- 20. PRZEWAGA PWA NAD ALTERNATYWAMI Szybkość działania Stabilność i praca offline Wykorzystanie funkcji natywnych Omnikanałowość Możliwość instalacji Google-friendly
- 21. PWA CHECKLIST
- 22. BASELINE PROGRESSIVE WEB APP CHECKLIST ▌ Site is served over HTTPS ▌ Pages are responsive on tablets & mobile devices ▌ All app URLs load while offline ▌ Metadata provided for Add to Home screen ▌ First load fast even on 3G ▌ Site works cross-browser ▌ Page transitions don't feel like they block on the network ▌ Each page has a URL
- 23. BASELINE PROGRESSIVE WEB APP CHECKLIST ▌ Site is served over HTTPS ▌ Pages are responsive on tablets & mobile devices ▌ All app URLs load while offline ▌ Metadata provided for Add to Home screen ▌ First load fast even on 3G ▌ Site works cross-browser ▌ Page transitions don't feel like they block on the network ▌ Each page has a URL
- 28. EXEMPLARY PROGRESSIVE WEB APP CHECKLIST ▌ Site's content is indexed by Google ▌ Schema.org metadata is provided where appropriate ▌ Social metadata is provided where appropriate ▌ Canonical URLs are provided when necessary ▌ Pages use the History API ▌ Content doesn't jump as the page loads ▌ Pressing back from a detail page retains scroll position on the previous list page ▌ When tapped, inputs aren't obscured by the on screen keyboard ▌ Content is easily shareable from standalone or full screen mode ▌ Site is responsive across phone, tablet and desktop screen sizes ▌ Any app install prompts are not used excessively ▌ The Add to Home Screen prompt is intercepted ▌ First load very fast even on 3G ▌ Site uses cache-first networking ▌ Site appropriately informs the user when they're offline ▌ Provide context to the user about how notifications will be used ▌ UI encouraging users to turn on Push Notifications must not be overly aggressive. ▌ Site dims the screen when permission request is showing ▌ Push notifications must be timely, precise and relevant ▌ Provides controls to enable and disable notifications ▌ User is logged in across devices via Credential Management API ▌ User can pay easily via native UI from Payment Request API.
- 29. EXEMPLARY PROGRESSIVE WEB APP CHECKLIST ▌ Site's content is indexed by Google ▌ Schema.org metadata is provided where appropriate ▌ Social metadata is provided where appropriate ▌ Canonical URLs are provided when necessary ▌ Pages use the History API ▌ Content doesn't jump as the page loads ▌ Pressing back from a detail page retains scroll position on the previous list page ▌ When tapped, inputs aren't obscured by the on screen keyboard ▌ Content is easily shareable from standalone or full screen mode ▌ Site is responsive across phone, tablet and desktop screen sizes ▌ Any app install prompts are not used excessively ▌ The Add to Home Screen prompt is intercepted ▌ First load very fast even on 3G ▌ Site uses cache-first networking ▌ Site appropriately informs the user when they're offline ▌ Provide context to the user about how notifications will be used ▌ UI encouraging users to turn on Push Notifications must not be overly aggressive. ▌ Site dims the screen when permission request is showing ▌ Push notifications must be timely, precise and relevant ▌ Provides controls to enable and disable notifications ▌ User is logged in across devices via Credential Management API ▌ User can pay easily via native UI from Payment Request API.
- 30. PWA CHECKLIST – USER EXPERIENCE (1) ▌ Content doesn't jump as the page loads ▌ Pressing back from a detail page retains scroll position on the previous list page ▌ When tapped, inputs aren't obscured by the on screen keyboard ▌ Content is easily shareable from standalone or full screen mode ▌ Site is responsive across phone, tablet and desktop screen sizes ▌ Any app install prompts are not used excessively ▌ The Add to Home Screen prompt is intercepted
- 31. EXEMPLARY PROGRESSIVE WEB APP CHECKLIST ▌ Site's content is indexed by Google ▌ Schema.org metadata is provided where appropriate ▌ Social metadata is provided where appropriate ▌ Canonical URLs are provided when necessary ▌ Pages use the History API ▌ Content doesn't jump as the page loads ▌ Pressing back from a detail page retains scroll position on the previous list page ▌ When tapped, inputs aren't obscured by the on screen keyboard ▌ Content is easily shareable from standalone or full screen mode ▌ Site is responsive across phone, tablet and desktop screen sizes ▌ Any app install prompts are not used excessively ▌ The Add to Home Screen prompt is intercepted ▌ First load very fast even on 3G ▌ Site uses cache-first networking ▌ Site appropriately informs the user when they're offline ▌ Provide context to the user about how notifications will be used ▌ UI encouraging users to turn on Push Notifications must not be overly aggressive. ▌ Site dims the screen when permission request is showing ▌ Push notifications must be timely, precise and relevant ▌ Provides controls to enable and disable notifications ▌ User is logged in across devices via Credential Management API ▌ User can pay easily via native UI from Payment Request API.
- 32. PWA CHECKLIST – USER EXPERIENCE (2) ▌ Provide context to the user about how notifications will be used ▌ UI encouraging users to turn on Push Notifications must not be overly aggressive. ▌ Site dims the screen when permission request is showing ▌ Push notifications must be timely, precise and relevant ▌ Provides controls to enable and disable notifications
- 33. WYZWANIA UX W PWA
- 40. STARE NAWYKI