Upload
divante
View
615
Download
8
Embed Size (px)
Citation preview
Designing for PWA (Progressive Web Apps)
Tomasz Karwatka, CEO of Divante
1 eCommerce - what’s wrong with you?
not suited for mobile
not stable during peaks
not effecitve with poor internet connection
eCommerce right now
not suited for mobile
not stable during peaks
not effecitve with poor internet connection
too many platforms – gap between customer needs and companies ability to deliver
eCommerce right now
GAP
Technology Creators (eg. AFGA)
Customers
Companies (Retailers/Manufacturers)
2 Progressive Web Apps
6
Progressive Web Apps Best features of Mobile App (UX) and Web (Distribution) combined
• Offline readiness
• Home Screen
• No Submission
• Linkable
• Re-engageable
Alibaba Case Study • 76% higher conversions across browsers • 14% more monthly active users on iOS; 30% on Android
3 Design Challenges
8
Strategy
• Multiple native apps vs one website
• User’s expectations change when they consider
something to be an app
• The Team - new skills, new process
• Front-end engineers - the most constrained resource
on retail IT teams.
9
Approach
• UX inspiration from native apps
• You’re designing a native app
• Benchmarks - native apps on iOS and Android
• Mobile components
• Avoid overly “web-like” design - e.g. footers
10
No Browser = No Safety Net
• No: address bar, SSL indicator, back button, ..
• Back button - second most frequently used feature
of the browser
• Own Navigation
11
Navigation
• Back from a detail page - retain scroll position on the previous list page
• Touch interactions - implemented very well, or not at all
• Keep simple navigation at the bottom
12
Content
• Placeholders for content while downloading – skeleton screens
• Buttons and ‘non-content’ shouldn’t be selectable • Provide an easy way to share content
13
Cache
• Performance VS Freshness
• PWAs are applications - need to “boot”
14
Payment
• Mobile abandonment rates exceed 80% when customers are asked to input their credit card details.
• The payment request API by Google eliminates checkout forms
• It allows merchants to request and accept any payment in a single API call.
15
Touch
• Tappable areas should give touch feedback • Touching an element while scrolling is not clicking
We implemented our own virtualized list component; it only renders the content visible within the viewport, incrementally renders items over multiple frames using the requestAnimationFrame API, and preserves scroll position across screens. - Twitter
16
Design
• Use device fonts instead of custom fonts. • Images or SVG instead of custom fonts.
17
Inputs
• Ensure inputs aren’t obscured by keyboard
18
Sources
u http://boxesandarrows.com/designing-progressive-web-applications-for-the-future/
u https://cloudfour.com/thinks/designing-responsive-progressive-web-apps/
u https://techbeacon.com/5-ways-ensure-great-ux-progressive-web-apps
u https://developers.google.com/web/fundamentals/payments/
u https://medium.com/@owencm/designing-great-uis-for-progressive-web-apps-dd38c1d20f7
u http://blogs.perceptionsystem.com/mobile-commerce-trends-2017/
u http://www.information-age.com/5-m-commerce-trends-2017-123463703/
u https://www.emarketer.com/Article/Podcast-Five-Mobile-Commerce-Predictions-2017/1014667
u http://wolfstreet.com/2016/08/23/pokemon-go-augmented-reality-craze-already-dead/
4 Open Source PWA
You need a Web, Mobile Web, iOS App, Android App, Windows App, ..
eCommerce Websites are not stable during peaks
Websites are not effecitve with poor internet connection
Long time2market to develop Mobile Apps and Mobile Web
Progressive Web Apps – Website that can be installed as an App. Best features of Mobile App (UX) and Web (Distribution) combined
Storefront can be run without alive web-server there is no such traffic peak that can stop users from making orders
Offline readiness - app can be used off-line
Out-of-the Box Product, Based on Vue.js, developer-friendly approach, good doc
Challenges
Solution
Vue Storefront
Bleeding edge, scalable technology
Node.js, Vue.js, Elastic
Blazing fast It render at no time.
Always.
100% offline, Black-Friday
ready :)
Vue Storefront
22
Divante Sp. z o.o. Dmowskiego 17 Street 50-203 Wrocław
+48 516 184 153 [email protected]
www.divante.co
Check the demo! http://vuestorefront.io