Introdução ao Desenvolvimento para Dispositivos Móveis

Victor Adriel de Jesus OliveiraINF - UFRGS

PARTE I

About Me

Victor Adriel de J. Oliveira

PhD student in Computer Science - UFRGS- Design and Assessment of Haptic Interfaces

Masters in Computer Science - UFRGS (2014)- Designing Tactile Vocabularies for Human-Computer Interaction

Computer Scientist - UESC (2012)- Acessibilidade em Sites e Sistemas Web

Member of the EuroHaptics Society (EHS), of the Technical Committee on Haptics (TCH), of the Institute of Electrical and Electronics Engineers (IEEE), and of the Sociedade Brasileira de Computação (SBC)

Summary

• PARTE I

• Introdução a Plataformas Móveis

• Padrões para o Desenvolvimento de Aplicativos

• Prototipagem de Apps Móveis (+ prática)

• Programação de Apps Híbridos com HTML (+ prática)

• PARTE II

• Programação de Apps Híbridos com HTML (+ prática)

• Programação de Apps Nativos com Android (+ prática)

• Novos Usos para Dispositivos Móveis

Plataformas Móveis

O que é um dispositivo móvel?

• Dispositivo computadorizado que caiba no bolso

• Que funcione e se utilize em movimento

5

A cada dia mais móvel

Hoje, carregamos um poder computacional maior nos nossos bolsosdo que tínhamos no mundo inteiro há 60 anos.

Ubiquo e Pervasivo

MAINFRAMEMuitas pessoas dividem 1 computador

PC1 pessoa com 1 computador

Ubiquo e Pervasivo

Computação UbiquaVários computadores servem cada pessoa

• Princípios da computação ubiqua

• O objetivo de um computador é ajudar-nos a realizar alguma tarefa

• O melhor computador é tranquilo, como um servo invisível

• Quanto mais coisas você puder fazer usando sua intuição, mais esperto você é; o computador deve estender o seu inconsciente

Ubiquo e Pervasivo

Mark Weiser (1952 – 1999)

“As tecnologias mais profundas são aquelas que desaparecem. Misturam-se na vida cotidiana o ponto em que não podem mais ser distinguidas.”

Desafios no Desenvolvimento de Apps Móveis

• Recursos físicos limitados

• Contextos de uso diversificados

• Diferentes atividades

• Atenção limitada

Desafios no Desenvolvimento de Apps Móveis

• Recursos físicos limitados

• CPU, Memória, Tamanho da Tela, Dispositivos de Entrada, Tempo de Bateria, Telas pequenas...

Doodle: Web Version Doodle: App

Desafios no Desenvolvimento de Apps Móveis

• Contextos de uso diversificados

Desafios no Desenvolvimento de Apps Móveis

• Diferentes atividades

Lembretes Anotando Receitas To-Do lists

Desafios no Desenvolvimento de Apps Móveis

• Atenção limitada

Repense o design se uma tarefa típica na sua solução atual requer mais de 10 minutos seguidos de operação para um usuário médio

Técnicas de Interação com Dispositivos Móveis

JustDance Siri, Cortana, Google Assistant

QR Codes

• Apontamento, entrada por voz, entrada por imagem…

Dispositivos Móveis Hoje

17

Dispositivos Móveis Hoje

18

Dispositivos Móveis Hoje

19

Dispositivos Móveis Hoje

20

Dispositivos Móveis Hoje

21

Comentários Finais

• Computação ubiqua e pervasiva

• O desenvolvimento para aplicações móveis possue desafios intrínsecos

• O S.O. Android lidera vendas

Projetando Apps

iOS Human Interface Guidelines

iOS Human Interface Guidelines

• O que devemos fazer para que nossas Apps sejam aceitas na Apple app store?

• iOS Human Interface Guidelines

• https://goo.gl/2sXmNS

• Muito detalhado com recomendações genéricas e específicas

• Design diferenciado em três pontos básicos:

• Clareza

• Deferência

• Profundidade

iOS Human Interface Guidelines

• Ao projetar interfaces para o iOS, tenha em mente os seguintes princípios:

• Priorize a integridade estética

• Matenha consistência com elementos conhecidos pelos usuários

• Permita manipulação direta dos elementos na tela

• Forneça feedback sobre o estado do app e ações

• Metáforas facilitam a compreensão pelo usuário

• Priorize o controle do usuário sobre o sistema

Novidades no iOS 10

• É possível adicionar widgets na tela Pesquisa e na tela inicial

• Integração com mensagens para compartilhar conteúdos específicos do app

• Integração de apps com Siri

• Notificações expandidas usando 3D Touch (ação disparada ao pressionar a tela)

Android Styleguide

Android Styleguide

• Mais bonito do que o HIG da Apple

• Android user interface guidelines [general]

• Parte de 3 premissas básicas

• Encante-me

• Simplifique minha vida

• Surpreenda-me

Material Design

• Material Design é um guia completo para design visual, de movimento, e de interação em diferentes plataformas e dispositivos

• É definido como uma linguagem visual que sintetiza os princípios clássicos de bom design

• O guia do Material Design é constantemente atualizado e pode ser acessado em: https://material.google.com/

Windows Phone Design Guidelines

32

Windows Phone Design Guidelines

• Design Guidelines for Windows Phone

• Projeto guiado por 4 princípios básicos

• Matenha Isso Simples

• Faça Algo Pessoal

• Pense Universal

• Crie Algo Prazeroso

33

Windows Phone Design Guidelines

• As interfaces para Windows Phone são geralmente muito simples

• A tipografia (fonte, tamanho, cor do texto) é o que define estrutura e fluxo nos apps

• A documentação da Microsoft é direta e simplificada para desenvolvedores, mas menos detalhada que a do Android https://go.microsoft.com/fwlink/p/?LinkId=760679

Design Guidelines

• Os guias de design são todos muito parecidos

• Contém princípios básicos

• Detalhes de concepção

• Não diferem nem no estilo e nem nas ideias centrais

• Ao desenvolver para dispositivos móveis, é fundamental manter-se fiel aos estilos e recomendações

Experiência do Usuário (UX)

• Respostas e percepções do usuário relacionadas a um produto, sistema ou serviço antes, durante e depois de utilizá-lo. ISO 9241-210

Foco da UX

Contexto

UsuáriosConteúdo

Contexto

• O contexto envolve a situação atual:

• Física: Condições do ambiente de acordo seus sentidos

• Social: Como outras pessoas afetam sua experiência

• Temporal: Variáveis de tempo

• Infra-estrutural: Disponibilidade da rede, custo da ligação.

• Tarefas: Possibilidades

Contexto

UsuáriosConteúdo

Usuários

• Quem são os usuários desse app?

• Quais são suas tarefas e objetivos?

• Quais seus níveis de experiência com esse app e apps como esse?

• Quais funcionalidades os usuários precisam?

• Que informações os usuários precisam e de que forma elas devem ser transmitidas?

• Como os usuários acham que o sistema deveria funcionar?

Contexto

UsuáriosConteúdo

Conteúdo

• Facilidade de uso

• Velocidade de aprendizado

• Eficiência na utilização

• Grau de propensão a erros

• Permitir o acesso à informação independente de características físicas, motoras, cognitivas e etárias.

• Eliminar verbosidade desnecessária

• Linguagem simples e objetiva

• Aumentar legibilidade

Contexto

UsuáriosConteúdo

ConteúdoContexto

UsuáriosConteúdo

Benefícios

• Evita a criação de funcionalidades desnecessárias;

• Simplifica o design do projeto;

• Melhora a usabilidade e a ergonomia do projeto;

• Acelera o design e desenvolvimento por meio de guidelines;

• Foca os negócios e o marketing de acordo as características dos usuários

Métodos

Etnografia

• Escrevendo sobre pessoas

Personas

Personas

Grupo da Persona (ex. web manager)

Nome Fictício

• Cargos e maiores responsabilidades• Demographics (idade, educação, etnia, estado civil)• Objetivos e tarefas que está tentando executar ao

usar o app• Seu ambiente físico, social e tecnológico• Uma citação que sumarie o que importa mais para

essa persona relacionada ao seu app• Imagens casuais que representem o grupo desse

usuário

Personas

Motorista

Roberto Carlos

• Motorista e entregador• 32 anos, casado, pai de um filho, ensino médio

completo• Focado em operar com segurança e eficiência.

Entre suas tarefas, ele precisa: • Atender chamados de passageiros;• Planejar e executar rotas de entrega.

• Usa constantemente o celular conectado à redemóvel. Passa maior parte do tempo no trânsito.

• Citação: “Tempo é dinheiro”

Design Participativo

Prototipagem

• Wireframes

Prototipagem

• Storyboards

Prototipagem (Prática)

• Projete um aplicativo para smartphone para rachar a contaque não seja tão simplicista como apenas dividir o valor total pelo número de participantes.

• Divisao em grupos para design participativo

• Analise de requisitos, cenários, perfis de usuário, prototipagem

Apps Híbridos

HTML 5 para Mobile

• É possível criar duas versões da sua página HTML: uma para ser visualizada em desktop e outra versão para o dispositivo móvel

• É o exemplo da página do Globo Esporte.Quando acessada de um aparelho móvel, outro domínio é acessado

52

globoesporte.globo.com m.globoesporte.globo.com

HTML 5 para Mobile

• É possível criar duas versões da sua página HTML: uma para ser visualizada em desktop e outra versão para o dispositivo móvel

• É o exemplo da página do Globo Esporte.Quando acessada de um aparelho móvel, outro domínio é acessado

• Mas criar dois domínios diferentes pode dificultar a manutenção das diferentes versões do site

53

HTML 5 para Mobile

• Uma segunda abordagem consiste em mudar o estilo da página segundo o dispositivo no qual ela é acessada. Apenas uma versão é criada para diferentes dispositivos

54

HTML 5 para Mobile

• Estas páginas que se adaptam às diferentes resoluções são chamadas responsivas

55

Apps HTML 5 vs. Apps Nativos

AppsHTML5

AppsNativos

Padrões abertos (HTML5, CSS3, Javascript)

Portável para diferentes plataformas(Diferentes aparelhos e S.O.)

Elementos de interface nativa e acesso a sensores (Acesso a câmera, GPS, SMS, contatos.)

Comercialização da aplicação (Google Play, Apple App Store, etc.)

56

Apps HTML 5 vs. Apps Nativos

• Aplicativos HTML5 são, na sua essência, multiplataforma, limitados apenas à compatibilidade dos navegadores

• No entanto, os recursos como acelerômetro, bússola, câmera, geolocalização e armazenamento de arquivos estão tradicionalmente disponíveis apenas para quem utiliza os kits de desenvolvimento de software nativos (NDKs)

57

Aplicativos Híbridos

• Apps desenvolvidos em HTML5 e podem utilizar recursos de hardware disponíveis aos NDKs de cada plataforma

58

AplicativosHíbridos

Padrões abertos (HTML5, CSS3, Javascript)

Portável para diferentes plataformas(Diferentes aparelhos e S.O.)

Elementos de interface nativa e acesso a sensores (Acesso a câmera, GPS, SMS, contatos.)

Comercialização da aplicação (Google Play, Apple App Store, etc.)

Aplicativos Híbridos

• Existem frameworks que compilam o código HTML5 (HTML, CSS e JS) para rodar como aplicações nativas

• PhoneGAP, Cordova e Trigger.io são alguns destes frameworks

59

Frameworks como o PhoneGAP compilam o código HTML e produzem como saída uma aplicação móvel híbrida.

Aplicativos Híbridos

• O PhoneGap, é um framework Open Source

• Ele é compatível com 7 diferentes sistemas operacionais móveis (iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada e Symbian)

60

Aplicativos Híbridos

• O desempenho de aplicações nativas ainda costuma ser melhor

• No entanto, aplicações criadas em HTML 5 são práticas de serem criadas e mantidas. Um mesmo código pode ser compilado para diversas plataformas e a experiência do usuário com aplicativos híbridos pode ser a mesma de aplicativos nativos

61

Frameworks para interface

• O HTML 5 fornece muita liberdade ao desenvolvedor na construção das interfaces

• Existem frameworks com elementos de interfaces móveis que auxiliam a adequação aos diferentes padrões

62

Frameworks para interface

• Ionic e Ratchet são dois desses frameworks

• O Ratchet é o mais simples dos dois. Para formatar sua aplicação segundo os estilos predefinidos pelo Ratchet, basta usar as classes correspondentes

63

Comentários finais

• O HTML5 é mais do que uma melhoria na especificação do HTML4. HTML5 é uma versão completamente nova

• Aplicações em HTML5 são multiplataforma. Um mesmo conteúdo pode ser adaptado para diferentes mídias, o que facilita sua manutenção

• No entanto aplicações HTML5, ainda que híbridas, podem não atingir o mesmo desempenho de aplicativos nativos

64

Hello World com HMTL

65

Referências

• http://www.mobilehci2012.org

• https://www.statista.com/statistics/266136/global-market-share-held-by-smartphone-operating-systems/

• https://www.theverge.com/2017/2/16/14634656/android-ios-market-share-blackberry-2016

• Jingtao Wang, course notes at Berkeley University

• http://ignorethecode.net/blog/2009/08/07/virtual-keyboards-on-iphone-and-android/

• http://www.commonagency.com/blog/2012/01/official-mobile-interface-guidelines/

• http://tableless.com.br/html5-estrutura-semantica/

• http://www.w3schools.com/html/html5_intro.asp

• http://html5doctor.com/

• http://html5demos.com/

• http://phonegap.com/

• http://goratchet.com/

66

Introdução ao Desenvolvimento para Dispositivos Móveis

Victor Adriel de Jesus Oliveiravajoliveira@inf.ufrgs.br

Skype: victor.adriel