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