Web Apps: to infinity and beyond #cpbr9
-
Upload
maria-clara-santana -
Category
Technology
-
view
489 -
download
0
Transcript of Web Apps: to infinity and beyond #cpbr9
WEB APPSTO INFINITY AND BEYOND
@OLARCLARA#CPBR9
Maria Clara SantanaSoftware DeveloperUX enthusiastStar Wars fangirl
(Source: http://bit.ly/1SETtqm)
meetup.com/GDG-Maceio
It’s a mobile, mobile, mobile world.We already know it.
(Source: http://bit.ly/1ZOMYBu)
Web vs. Native
Native Apps flow>> Open the store;
>> Search for the app;
>> Download
>> Accept permissions;
>> Install;
>> Use the app;
>> Type URL;
>> Use the app;
Web Apps flow
(Source: The U.S. Mobile App Report)
(Source: http://bit.ly/1nuPVeX)
What is UX Design?
“UX Design is the process of enhancing user satisfaction by improving the usability, accessibility and pleasure provided in the interaction between the user and the product.”
UX Curve: A method for evaluating long-term user experience (2011)
(Inspired by: http://bit.ly/1OFxlKI)
FUNCTIONALITY
RELIABILITY
USABILITY
PLEASURABLE
AESTHETICS
UI vs. UX
UX Design>> Usability engineering;
>> Information Architeture;
>> Prototypes;
>> Graphic design;
>> Brand alignment;
>> Interface layout;
UI Design
Moving back to UX...
(Source: http://bit.ly/1SETtqm)
Searches containing “ux design”
(Source: Google Trends, viewed on 08/01/2016)
UX state of mind
mobile first
offline-first
touch-first design
personalized experience
mobile enabled experiences
installableweb apps
content design
accessibility
pushnotifications
Progressive Web Apps
Progressive Web Apps Flow>> Type the URL;
>> Use the app;
>> Progressive enhancement...
Basic requirements>> A manifest;
>> ServiceWorkers;
>> HTTPS;
>> Engageable;
So, let’s build Progressive Web Apps!
(Source: http://bit.ly/1sr3s7E)
polymer
(Photo: http://bit.ly/1d2I81R)
WEB COMPONENTS
elements.polymer-project.org
1. Make it responsive
This and more on polymerlabs.github.io/app-layout/
2. Make it app-like
3. Make it re-engageable
Push notifications are great. But let the user choose.
4. Make it connectivity independent
Caching strategies:
>> fatest;
>> networkFirst;
>> networkOnly;
5. Make it load fast
“74% of mobile users won’t wait longer that 5 seconds for a page to load.”
Mobile Application Testing & Performance Analysis
Async prevents the renderer from being blocked
6. Make it installable
(Source code on: http://bit.ly/1Vuughe)
(Source code on: http://bit.ly/1P0Ktaj)
Further reading>> Progressive Web Apps: Escaping Tabs Without Losing Our Soul (http://bit.ly/1K8Tm4L);
>> Google Developers: Progressive Web Apps (http://bit.ly/1nlXeEV);
>> Getting started with Progressive Web Apps (http://bit.ly/1VyrQyX);
“When you stop learning, you stop growing.”
Karlie Kloss
Thank you!
about.me/mariaclarasantana