Criação para dispositivos móveis

Conceito de interface

Interfaces para dispositivos móveis.

Interface nada mais é do que a Ligação/conexão/transferência de informação entre dois meios distintos.

#A função de um aplicativo, por exemplo, é trazer ao usuário maneiras de realizar tarefas que lhe sejam úteis

◦Deve mostrar ao usuário os recursos que lhe sejam relevantes para o cumprimento de uma tarefa durante o uso do aplicativo, de modo que este esteja de bom humor/com seu humor inalterado, ao concluí-la.◦Exemplos de tarefa:■Assistir um filme■Enviar uma mensagem a um amigo■Receber informações sobre o clima■Cortar frutas descontroladamente e ganhar bonus!

Os 7 mandamentos fundamentais

Tenha poucas funções no mesmo ambiente. Mantenha o foco!

#1º

“Tudo é essencial” não é uma opção.

#2º

Use botões grandes. Lembre-se do toque para um dedo e não para um

cursor do mouse.

#3º

Pouca digitação. É difícil, demorado e chato ao usuário. Formulários

pequenos, muitos atalhos e connects.

#4º

A forma deve refletir a função, que é mais importante que a beleza aparente.

#5º

Existem padrões de interface para cada plataforma (iOS, Android, etc). Conheça os guides de cada uma.

#6º

NUNCA fazer uma interface com características evidentes de uma plataforma para ser usada em outras. NUNCA!

#7º

Arquitetura de informação

#O que é AI?

Resumidamente é o planejamento da planta baixa de uma solução/aplicativo.

#A função básica é criar uma boa experiência.

Parte das atribuições de um arquiteto de informação reside em planejar. Outra parte em “construir”. Um profissional do marketing atua na concepção do projeto, e depois planejamento. Sendo assim, por que não planejar juntos?

#Antes de começar

Faça perguntas:Quem utilizará o app? Em que contexto? Qual o objetivo? De onde vem as informações?

#Wireframe#Esboços

#Protótipos#Fluxos

O aplicativo tomará forma nessa etapa.

#A navegação de um aplicativo depende das funcionalidades e conteúdo que possui.

Arquitetos não são videntes!

Design Visual

É o que permite tornar compreensível, atraente e utilizável uma interface gráfica.

As plataformas trazem componentes prontos para uso, sem necessidade de customização. Analisando o objetivo do aplicativo, deve-se fazer a seguinte pergunta: a customização da interface gráfica é realmente necessária? Mudar a aparência (skin) de um componente, não é um grande problema, mas cuidado com alterações que o descaracterizem.

Componentes padrão são sempre muito utéis.

#FiqueAtento

Uma interface gráfica é dinâmica.

#Sua interface gráfica não é um poster!

Não julgue a eficiencia de uma interface gráfica somente pela linha de layout. Ela pode te enganar. O arquivo do photoshop apresentado nem sempre faz jus às funções do aplicativo. Como as coisas se comportam quando o usuário está interagindo com elas? Algo fica em seu caminho?Ele consegue acessar todos os recursos sem dificuldades impostas pela aplicação do logotipo ou de elementos visuais da marca?

Padrões de criação

#Objetivo claro.

#Utilize os recursos necessários

#Surpreenda 80% dos usuários.

#Navegação em várias telas.

#Listas, grids, galerias de imagens.

#Barras de ferramentas.

#Action buttons

Primeiro nível: uma lista/navegação algumas informações relevantes.

Níveis inferiores: aprofundar esse detalhamento se necessário.

Fluxo de trabalho

#Processo

Deixa claro que existem etapas. Não atropele nenhuma delas.

#Processo

Briefing

#Briefing

#Processo

WFBriefing

#Processo

WF

#WFO aplicativo é aberto pela primeira vez na aba “Meu time”, onde o usuário poderá selecionar o seu time preferido. Assim, o aplicativo será personalizado de acordo com essa preferência. Os times estão separados por série, e dentro dela, organizados em ordem alfabética. O usuário também pode decidir por navegar pelo aplicativo sem selecionar nenhum time.

Após selecionar o time, o usuário é avisado sobre a possibilidade de receber alertas para determinados eventos do seu time favorito. Ele sempre poderá alterar as con!gurações dentro da área respectiva no aplicativo.

Quando o usuário seleciona um time como favorito, a área “Meu Time” apresenta um resumo das principais informações com relação ao time. Serão apresentados dados históricos do time, posição no campeonato, e os jogos daquele time. O usuário pode selecionar qualquer jogo da tabela para ser levado para a tela de detalhes daquele jogo.

G3 11:10

SPLASH

rich mobile solutions

G3 11:10

Meu Time

ico

Meu Time

ico

Petrobras

ico

Classi!cação

ico

Jogos Mais

ESCOLHA SEU TIME

Selecione abaixo o seu time, para personalizar o aplicativo. Jogos do seu time serão destacados. Você poderá trocar de time depois, se desejar, em Con!gurações.

Série A

Time 1

Time 2

Time 3

Time 4

Time 5

Time 6

ico

ico

ico

ico

ico

ico

Time 7

Time 8

ico

ico

G3 11:10

ico Nome do time

Meu Time

Classi!cação (Status)

do time no campeonatoFundação: 1900

Estádio: Nome do estádioCapacidade: 00.000

11/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

Estádio

18/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

Estádio

25/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

ico

Meu Time

ico

Petrobras

ico

Classi!cação

ico

Jogos Mais

G3 11:10

ico Nome do time

Meu Time

Classi!cação (Status)

do time no campeonatoFundação: 1900

Estádio: Nome do estádioCapacidade: 00.000

11/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

Estádio

18/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

Estádio

25/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

ico

Meu Time

ico

Petrobras

ico

Classi!cação

ico

Jogos Mais

G3 11:10

ico Nome do time

Meu Time

Classi!cação (Status)

do time no campeonatoFundação: 1900

Estádio: Nome do estádioCapacidade: 00.000

11/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

Estádio

18/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

Estádio

25/03/2011 - Rodada

0 x 0 Timeico

Timeico

Horário / Status

ico

Meu Time

ico

Petrobras

ico

Classi!cação

ico

Jogos Mais

AlertasDeseja receber alertas para início/!m dos jogos e gols das partidas do seu time

favorito? Você poderá alterar as preferências mais tarde

na área de Con!gurações do aplicativo.

Não Sim

!Caso o aplicativo tenha sido usado anteriormente, deve-se retornar à aba em que o usuário estava quando fechou o aplicativo, ignorando a navegação dentro desta aba.

Ex: “Meu time”. O aplicativo abre na aba, e não no último jogo acessado.“Jogos”: o aplicativo abre em “Hoje”ou na rodada atual.“Classi!cação”: Abre na lista de times, e nao em algum jogo ou time.

#Processo

WF LLO

Aprovação

#LLO

#Processo

WF LLO LL

Aprovação Aprovação

Principaistendências

Dashboard is dead, long live to side navigation!

#Dashboard

Dashboard utiliza ícones e Label.

Problemas:Falta de clareza no tipo de conteúdo que cada ícone apresenta.

Primeiro contato do usuário com o app não traz nenhum

conteúdo relevante.

#Dashboard

#SideNavigation

Características de side navigation:

Espera-se que seja menos usada, dando enfoque ao conteúdo

do aplicativo

Demais áreas do aplicativo não são tão importantes quanto à

inicial.

#SideNavigation

Abuse de thumbnails grandes!

◦Por causo do maior uso de wifi ou pela velocidade da rede de dados ter melhorado.◦O fato é que imagens de listas estão sendo mostradas em maior quantidade e tamanho, e em níveis superiores da navegação. (Ex: Google Play, Google Plus, Instagram, Youtube para Android, Path)

Conteúdo sempre em primeiro lugar.

windows 8 traz os tiles com infos relevantes já no ícone do appBanners da play storeGoogle Plus

Integração entre diferentes tipos de serviços e conteúdos.

Fotos agrupadas por localização; Sugestão de eventos em datas próximas, de acordo com assuntos de interesse do usuário; Sugestão de itens para compra, de acordo com datas/feriados e o gosto do usuário.

Aplicação da MARCA

Marca Vs ConteúdoSua marca pode causar efeitos indesejados na experiência do usuário?

◦Nome da marca no título do app em detrimento de um rótulo descritivo pode prejudicar o app (tornando mais difícil encontrar o app nos markets), e sendo assim, diminuir a visibilidade da marca■Ex: Time Brasil era o app oficial do COB para as olimpíadas, mas não tinha um rótulo claro para a função do app.

#SplahScreen

Splashscreens são usadas para simular velocidade, não são outdoors.

Splashscreens foram criadas para serem mostradas enquanto o app é carregado. A splash deveria mostrar parte da interface gráfica, e então, com o app carregado, o restante seria apresentado. Ou seja: era diluído o tempo de espera, pois o usuário já via parte do app antes de estar totalmente carregado. Ok, sabemos que a splash é algo que os clientes AMAM, então não cabe aqui persuadi-los a parar de usar splashs “decorativas”. No entanto, aumentar o tempo de permanência da splash, adicionar uma segunda splash, ou fazê-la aparecer após o app voltar de background são recursos que tiram o dinamismo da plataforma, e irritam o usuário.

Curiosidade: No iOS, o sistema tira um screenshot do app antes de entrar em background, para que quando ele retorne, o screenshot seja mostrado, enquanto o conteúdo real do app é carregado. Esse comportamento não pode ser alterado. Se o app for planejado para mostrar uma splashscreen quando volta de bg, ele na verdade vai mostrar a screenshot, e depois a splashscreen. Isso faz parecer que o app travou e reinciou.

#SoluçõesEfetivasA simplicidade é a melhor saída!

Logo com segurança:Na HomeDashboardÁreas cujo conteúdo esteja extremamente relacionado à marca.

Para o usuário navegar, ele precisa retornar à home, dashboard ou mesmo à tela inicial de cada “aba” do aplicativo. Sendo assim, ele verá a marca com frequencia. Mas não é saudável repetir a marca em todas as telas “internas”, pois ela já foi vista e não traz benefícios ao usuário sendo apresentada no lugar em que normalmente há recursos de interação. Sua marca não pode ser um empecilho para o usuário durante a interação com o aplicativo.

#ElementosGráficos

A linguagem visual de sua marca pode ser reproduzida em elementos de interface do aplicativo

Desde que não descaracterizem elementos padrão de navegação. Lembre-se: uma coisa deve parecer com aquilo que de fato é. Não se quebra paradigmas de interface, a não ser que seja absolutamente necessário.Utilizar os elementos gráficos de sua marca em componentes de interface do aplicativo ajudam o usuário a permanecer em contato com sua marca, sem necesidade de tomar espaço adicional da interface.

#BoasAplicações

#BoasAplicações

#BoasAplicações

#BoasAplicações

#BoasAplicações

Cases

Bons exemplos

#Path

#Flipboard

#Evernote

#CaixaemLondres

#Fail

#InstagramAndroid

Dicas e considerações

#Projetos precisam ser planejados, construídos, testados, enviados e aprovados.

Tudo isso leva tempo, e complicações irão aparecer. Se o aplicativo precisa ser lançado na data X, precisa estar entregue, pronto (sem testes pendentes) , com um mês a um mês e meio de antecedência. Se o cronograma prevê que o projeto será concluído uma semana antes do prazo, não acredite.Quando se trata da Apple, nunca se sabe se o aplicativo será ou não lançado no prazo esperado. Os critérios de aprovação não são 100% claros e podem atrasar em muito o lançamento de um aplicativo.

#Nunca planeje/encomende/desenvolva algo “Urgente”.

Algo se torna urgente porque alguém não fez seu trabalho da forma e no tempo que deveria, e agora está passando essa dificuldade pra frente. Se um projeto é urgente, é porque não foi levado a sério até o momento, e dificilmente os envolvidos lidarão com ele com mais seriedade daqui em diante. Provavelmente não terão a dimensão completa da coisa e as informações necessárias. Se tivessem, o projeto teria começado antes, ou teria sido adiado. Faça as coisas com muito prazo. Se o projeto é urgente, provavelmente vai dar errado.

#Um usuário instala somente o que quer.

O usuário instala o aplicativo por que tomou uma

decisão e a confirmou. Diferente de folhear uma

revista e se deparar com um anúncio, ou de estar

assistindo à televisão e ver uma propaganda que

não pode ser evitada, ou mesmo estar navegando

pela internet e através de um link chegar em um

site. Um aplicativo não é feito por um ícone na

AppStore. O usuário o instalará após ler o título, a

descrição e reviews de outros usuários. Após tudo

isso, SE o app parecer útil, será instalado.

Assim como instalou, o usuário pode facilmente

desinstalar o aplicativo em poucos segundos, se

este não lhe for útil ou trouxer divertimento.

#Pensar menos em publicidade e mais em funcionalidade.

Pensar menos em como a marca será aplicada e

compartilhada, e mais em como seu aplicativo

poderá ser útil a alguém, e como isso engrandece

sua marca.

#Mais uma vez: a interface gráfica do seu projeto não é um poster.

Não pense em um aplicativo como um porta retrato para marca.

Por fim...Interface mal executada =usuário insatisfeito =publicidade ruim para amarca.

Por fim...Interface mal executada =usuário insatisfeito =publicidade ruim para amarca.

Por fim...Não há o por que de umainterface, se não houveraplicativo. Não háaplicativo sem funçõesrecursos definidos.

Por fim...Não há um bom projetosem uma ligação lógicaentre ambos.

Obrigado :)

@AlexIvonika facebook.com/alexivonika/