Workshop Design para Dispositivos Móveis

Mini Curso Design para Dispositivos Móveis

TÓPICOS !• Entendendo Dispositivos Móveis e o Processo de Desenvolvimento de UI’s • Definindo as Funcionalidades do seu Aplicativo• Por que um “bom” Design é um diferencial? • A apresentação começa com o Ícone • Padrões de Interação e a Importância do Fluxo de uma Interface • Guias (HIG’s) e a Interface de Usuário • Prototipação Rápida• Identidade Visual, criando seu próprio “Look and Feel!”

EU!

Hanry Marcel Kluk !• Curioso por natureza! • Co-fundador do da Iniciativa

Startup Curitiba • Co-fundador da Snowman

Labs • Designer, ilustrador, fotógrafo

amador, cozinheiro...

...e vocês?

O CURSO

40% Conceitos

60% Atividades

Para ENTENDER os dispositivos móveis é importante entender os seus USUÁRIOS...

...E O QUE ELES BUSCAM!

• Facilidade • Agilidade • Intuitividade • Algo “novo” • Se surpreender • “Transparência”

ENTENDA AS LIMITAÇÕES

Usuários não têm um PONTEIRO nos dedos


Nem são águias com super VISÃO


Geralmente interagem com um aplicativo POR VEZ.

VOCÊ TEM QUE SER O USUÁRIO!Aprenda TUDO sobre o dispositivo • como ele funciona? • é pesado ou leve? • é confortável de segurar? • como acesso suas funções? • quais botões ele possui? • quais aplicativos são “legais”? • quais não são?

NÃO É UM COMPUTADOR TRADICIONAL!

A INTERFACE TEM QUE SER REPENSADA

Ctrl+C, Ctrl+V NÃO FUNCIONA

...PARA ATENDER AO DISPOSITIVO MÓVEL

Somente os elementos CHAVE se mantém!

Manutenção

PROCESSO DE DESENVOLVIMENTO

Conceito Design Desenvolvimento

Distribuição Marketing

DESENVOLVIMENTO > DESIGN =

ATIVIDADE X TEMPO

Debug

Teste

Design

Desenvolvimento

COMO VAMOS CHEGAR LÁ?

Ideia (Refinar)

Processo (Executar)

Interface (Desenhar)

Eficiência para Entreter O principal foco de um aplicativo de entretenimento sério, é permitir que o usuário consuma mídia. Usuários esperam uma interface com customizações porém fácil de navegar. A interface é o conteúdo.

Eficiência para Entreter Um app de produtividade, como uma Ferramenta Séria, cumpre uma tarefa bem específica. Seu aplicativo deve rapidamente e de maneira fácil, realizar o que 80% das pessoas vão fazer com ele. Vá direto ao ponto.

Jogar e se Divertir Tipo de aplicativo que vai entreter o usuário ou jogos. Seu foco deve ser somente um, dar um momento de diversão. Vá direto ao ponto e não use muito hierarquia. A história, experiência e jogabilidade são cruciais.

Elementos inovadores resolvendo problemas Uma Ferramenta Divertida, têm o foco em resolver ou alcançar algo porém incentiva a exploração entregando informações relevantes.

X-Y: TIPO DE APLICATIVO

Eixo X: Uso Eixo Y: ConteúdoDivertido

Sério

Entre

teni

men

to

Ferra

men

ta

Eixo X: Uso Eixo Y: ConteúdoDivertido

Sério

Entre

teni

men

to

Ferra

men

ta

X-Y: TIPO DE APLICATIVO

Quem é o seu PÚBLICO ALVO? • Pessoas de negócios ou usuários finais • Jovens ou idosos • Homens ou Mulheres • Vão usar diariamente ou ocasionalmente

Quais são as principais FUNCIONALIDADES? • Consumir ou produzir conteúdo? • É necessário já possuir algum serviço? • O que realmente o usuário vai querer?

“DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO”

REFINANDO A SUA IDÉIA

Resuma a ideia em uma frase: <<Diferenciação>> <<Solução>> para <<Público>> !Exemplo: !<<Uma maneira rápida e fácil>> para <<criação de ATA’s de reunião>> para <<profissionais de todas as áreas>>

DECLARAÇÃO DE DEFINIÇÃO DO PRODUTO

• ESCOLHAM uma categoria de aplicativo dos Post-It`s • DEFINAM quem será o público alvo e o tipo do seu aplicativo

(eixo x-y) • LEVANTEM todas as funcionalidades que consigam pensar

(brainstorm) • CORTEM funcionalidades que não fazem parte do core (menos

importantes) • JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES criando a

declaração

EXERCÍCIO: CRIANDO A SUA DECLARAÇÃO

30 MIN.Post-it Papel Lápis/caneta

DESIGN COMO UM DIFERENCIAL

PORQUE TERDESIGN?!

• Maior apelo aos usuários • Mais atenção da mídia • Diferencial vs. Concorrência • Da vontade de “voltar” • Incentiva a exploração • VENDE MAIS!

• Aplicativo para conversão de unidades

• Preço: U$0.99 • Lançado em Agosto de 2009 • Unidades vendidas: 197,424 • Faturamento bruto: $195,450 • Faturamento liquido: $137,065

Muitos concorrentes GRÁTIS já estabelecidos, porém SEM DESIGN!

ESTUDO DE CASO: CONVERT

• É a porta de ENTRADA de seu aplicativo • Se bem desenhado pode REPRESENTAR seu produto • “Eu nem entro se o ICONE for RUIM”! • Apresenta FUNÇÕES de maneira VISUAL para o usuário

A IMPORTÂNCIA DOS ÍCONES

ANTES DE ENTRAR VOCÊ JULGA

• Foco em uma forma padrão, não em diversos elementos que deixam o icone “sujo”. • Escolha cores com cuidado, use cores da interface. • Evite usar fotos e muito texto. • Se usar uma marca, deixe somente o necessário para dar representatividade.

COMO?

• LEIAM novamente a “Declaração de Definição do Produto” (DDP)

• BUSQUEM elementos que possam inspirar o icone, considerando a DDP

• DESENHEM 5 conceitos de icone • SELECIONEM 1 conceito • DESENHEM o icone “final”

EXERCÍCIO: DESENHANDO UM ÍCONE

30 MIN.Papel Lápis/caneta Cores

• iOS Toolbar Icons • Glyphish’/> • iOS Toolbar Icon Set • iOS Toolbar Icons 2 • 30 Free Vector Icons • iconSweets • The Android Developer

Common Icon Set II • 30 Free Android Menu Icons • Free Android 2.x Monster

Icons

FONTES DE ÍCONES

INTERAGINDO COM DISPOSITIVOS MÓVEIS

• Lembre-se que existem diferentes meios de interagir com o dispositivo

• Antes de desenhar a UI, é necessário avaliar qual destes estão disponíveis e serão utilizados

• Analise se não existe outra maneira de usuários entrarem com “dados”

• Seja criativo e não se limite ao “tradicional”

MÉTODOS DE INTERAÇÃO

EXEMPLO DE APLICATIVO

Anotação Localização Lembrete

• Definem alguns CONTROLES e ELEMENTOS padrões para o design de interfaces para dispositivos móveis

• É uma maneira de aprendermos com soluções que foram bem APLICADAS e DOCUMENTADAS por outros designers

• Ótimo ponto de PARTIDA para DESENHARMOS e entendermos partes específicas de um aplicativo

PADRÕES DE INTERAÇÃO

Manipulação INDIRETA

• É necessário aprender o mapeamento das teclas

• Deve ser muito consistente • Não são muito flexíveis

Joystick Direcional • Botões Alfa-numéricos • Soft-keys

Rodas Manipulação por GESTOS

• Utilizada através de sensores • Através do dispositivo por completo • Inclinando • Asoprando • Chacoalhando


Manipulação DIRETA/Touch/Haptic

• Não existe mapeamento pois as teclas são “virtuais” • Difícil aprender todos os meios de entrada • São muito flexíveis • Toques curtos e longos • Arrastar• Deslizar• Girar • Pinçar e Expandir


Botões ou Links

Indicadores de Espera

Entrada de Texto Limpa texto

PADRÕES DE INTERAÇÃOListas

• Um diagrama SIMPLES que mostra como uma TELA é ligada a outra • Te obriga a pensar na FLUIDEZ da sua interface, sem considerar os

detalhes dela • Mesmo que pequena, pode ser CRUCIAL para o desenvolvimento de

uma boa NAVEGAÇÃO

DIAGRAMA DE FLUXO DAS TELAS

Tools

MEU DIAGRAMA

• Você pode criar a sua própria forma de diagramar o fluxo.

EXERCI'CIO: Traçando seu DIAGRAMA


• CONSIDEREM as interações que você vai utilizar para navegação e inputs

• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados

• DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade


• CONSIDEREM as interações que você vai utilizar para navegação e inputs

• TRACEM o seu DIAGRAMA, considerando os GESTOS efetuados

DESAFIO: tentem REMOVER 1 à 2 das telas e MANTER a funcionalidade

EXERCÍCIO: TRAÇANDO SEU DIAGRAMA

30 min.Papel Lápis/caneta

INTERFACE DE USUÁRIO

• Vai além : ENCANTADORA e ATRAENTE

• Boa anfitriã : CONVIDATIVA e CATIVANTE

• Te ajuda : FACÍL de usar • Traz o novo : INOVADORA ...

“Eu NUNCA fiz isso!” • Não está atoa : entrega

SOLUÇÕES e não somente FUNÇÕES

• É NOVA e DESENHADA!

UMA BOA INTERFACE DE USUÁRIO

DISPOSITIVOS MÓVEIS

ENTENDENDO CADA DISPOSITIVO

iPhone (iOS) HIG : Introdução

CARACTERÍSTICAS do iPhone • Tamanho da tela é COMPACTA • Memória é LIMITADA • Usuários visualizam e interagem com UM

APLICATIVO de cada vez. • TIPOS de aplicativos • NATIVO: desenvolvidos com o SDK • WEB: abertos pelo browser • HÍBRIDOS: tem como predominância

uma webview, porém possuem controles de aplicativos nativos

iPhone (iOS) HIG: INTRODUÇÃO

Como ESCOLHER ? • Comportamentos e USO • Características VISUAIS • Modelo dos DADOS • EXPERIÊNCIA de usuário

DIFERENTES ESTILOS DE APLICATIVOS

• Qual a motivação do usuário para usar este aplicativo?

• Qual a experiência de usuário que você quer proporcionar?

• Qual o seu objetivo para o aplicativo?

PRODUTIVIDADE

orga

nizar

info

rmaç

ões

de fo

rma

HIER

ÁRQ

UICA

UTILITÁRIOS

UMA TAREFA com pouco input do usuário • Usuários abrem o aplicativo e a informação já é apresentada • Pouca interação

Organizar listas Adicionar ou remover itens

Entrar até o nível de informação desejada e realizar atividades com ela


TELA TODA, em ambientes ricos visualmente

Muito peculiar Sem controles padrão

Diversão, como jogos e rich-media

IMER

SIVA


INTERFACE DO USUÁRIO

Status bar

Navegation bar

Navegation bar

Toolbar

ELEMENTOS

AÇÕES E VIEW MODAL

ALERTAS E NOTIFICAÇÕES

EXEMPLO DE VIEW MODAL MAL DESENHADA

Simples Indexada Agrupada

TABELAS

Pickers

CONTROLES

Busca Slider e Switch Segmentados

Toolbar

Pop-overs

iPad

ATUALIZAÇÃO iOS 7Clareza • texto é sempre legível, icones são precisos, • adornos são sutís e foco em • funcionalidade é a inspiração. Deferência • a UI ajuda ousuário, porém não compete • com o conteúdo Profundidade • camadas visuais e movimento • auxilia entendimento e prazer • de usar o app.

• App NOVO: já pense em usar elementos e UI para o iOS 7 • App LANÇADO: começem a pensar como re-desenar a interface para • iOS 7 • Fontes: Helvetica Neue (a fonte desta apresentação) • Icone: Use o Grid • Elementos: já use e se adapte aos novos • UI Dynamics: uma engine física para dar movimento, fluidez e realidade

ao app (não somente animação).

iOS 7 UI Transition Guide https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/index.html#//apple_ref/doc/uid/TP40013174-‐CH6-‐SW1

O QUE DEVO FAZER

GRID DE ÍCONES

Android: Design

MUITOS DEVICES

MUUUUITOS DEVICES

3997 resoluções disponíveis - 2012

• Seja Flexível

• OTIMIZE layouts para diferentes telas

• Recursos para diferentes DPIs

DISPOSITIVOS E DISPLAYS

Holo Light Holo Dark Holo Light/Dark

TEMAS E TIPOGRAFIA

Icones Action Bar Notificações

ICONOGRAFIA

Action Bar

Multi-pane

Selection

PADRÕES DE UI

EXEMPLO DE NAVEGAÇÃO: UP vs. BACK

• Talvez o elemento MAIS IMPORTANTE • ADAPTÁVEL a rotação e diferentes telas • Pode ser CONTEXTUAL (ex.seleção) • COMPOSTA por: • Top Action Bar• Middle Action Bar • Bottom Action Bar

ACTION BAR GERAL

• Scrollable Tabs

• Spinners

• Fixed Tabs !

• Spinners

• Action Overflow

• Buttons

ACTION BAR: ELEMENTOS

Phone

Tablet

LAYOUTS MULTIPLANE

http://developer.android.com/design/downloads/index.html

ELEMENTOS

• http://developer.apple.com/iphone/library/documentation/

userexperience/conceptual/mobilehig/Introduction/

Introduction.html

• http://developer.apple.com/iphone/library/documentation/

general/conceptual/ipadhig/Introduction/ Introduction.html

• http://developer.android.com/design/index.html

• UI Design and Interaction Guide for Windows Phone 7 v2.0

• http://wiki.forum.nokia.com/index.php/

Guidelines_for_Mobile_Interface_Design

LINKS PARA OS HIG´S

• Importante iniciar com o NÍVEL mais BAIXO o possível

• NÃO se apegue a DETALHES : use círculos, quadrados, retângulos

• Capturar visualmente a lista de FUNCIONALIDADES considerando a ORDEM definida pelo DIAGRAMA

• Use ELEMENTOS conhecidos, e considere o HIG da plataforma escolhida

• SOMENTE após estes desenhos prontos você pode passar para o COMPUTADOR para testar!

DESENHANDO INTERFACES


• ANALISEM o diagrama de fluxo e ESCOLHAM as telas a serem desenhadas

• DESENHEM as interfaces das telas no stencil

• USEM Post-It’s para mostrar as interações

EXERCÍCIO: DESENHANDO SUA INTERFACE

1 HORA.Papel Lápis/caneta Post-it Stencil

PROTOTIPAÇÃO RÁPIDA

• Utilizada para PROTOTIPAR objetos, conceitos, serviços e

• interfaces • Serve para se ter algo PALPÁVEL de maneira rápida

que possam ser testados • Visualizar as INTERFACES e USAR-LAS de maneira

simples • Traz RESULTADOS e agiliza o processo de

ITERAÇÃO • Podem ser utilizadas FERRAMENTAS físicas,

computacionais ou uma combinação de ambas • DETALHES são irrelevantes, ou até PROIBIDOS

O QUE É PROTOTIPAÇÃO RÁPIDA

FERRAMENTAS E LINKS https://gomockingbird.com/

http://www.mobilesketchbook.com/

http://keynotopia.com/

http://mockapp.com/download/

https://pidoco.com/en

http://balsamiq.com/products%23

https://gomockingbird.com/

https://gomockingbird.com/









http://balsamiq.com/products%23

• REVISEM as interfaces desenhadas

• LEVEM as interfaces uma a uma para o computador

• UTILIZEM formas padrão (circulos, quadrados, etc.) para representar

• elementos como botões, caixas de texto, etc.

• CRIEM os links definidos no “Diagrama de Fluxo da Telas”

• TESTEM o protótipo para avaliar a usabilidade com outras equipes

EXERCÍCIO: DESENHANDO SUA INTERFACE

1 HORA. Computador

ALGUMAS DICAS

• Registro FORÇADO no primeiro uso

• Usar textos de DIFÍCIL LEITURA e evite

• misturar diferentes FONTES

• Passar ALERTAS ambíguos ao usuário. Use “labels” que representam o resultado (Vizualizar vs. OK). Coloque afirmativa a direita.

• Usar LINGUAGEM técnica que o usuário não entende.

• Botões de voltar sem CONTEXTO

O QUE NÃO FAZER

Look & Feel

• Muitos dos CONTROLES e elementos padrão das plataformas, podem ser customizados

• Pequenas mudanças podem dar um POLIMENTO especial para sua interface

• EVITE mudar radicalmente os controles que fazem ações PADRÃO

• CRIE temas diferentes, com cores, texturas, e imagens e teste o MELHOR

SUA IDENTIDADE VISUAL

Muito Obrigado!

[email protected]

Workshop Design para Dispositivos Móveis

Design

Transcript of Workshop Design para Dispositivos Móveis