Mini Curso de Design de Interfaces para Dispositivos Móveis

Minicurso Design de Interfaces para Dispositivos Móveis

Saturday, August 21, 2010

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!”

Quem vos fala?

• Paolo Domenico Passeri

• Curioso por natureza!

• Engenheiro + Designer

• Pensar em soluções

• Antes: Aluno e Monitor de UxD no Faber-Ludens

• Hoje: Desenvolvimento de Produtos na Positivo Informática

...e vocês?

O curso

50%50%AtividadesConceitos = 4 horas4 horas =

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

• Facilidade

• Agilidade

• Intuitividade

• Algo “novo”

• Se surpreender

• “Transparência”

...e o que eles BUSCAM

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?

Você tem que ser O USUÁRIO!

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!

PROCESSO de desenvolvimento

Conceito Design Desenvolvimento Distribuição Marketing Manutenção

Atividade vs. Tempo

DesenvolvimentoDesign

DESENVOLVIMENTO > DESIGN = RESUTADOS

Atividade vs. Tempo

Desenvolvimento

Design

DESIGN > DESENVOLVIMENTO = RESUTADOS

Como vamos chegar lá?

Ideia(Refinar)

Processo(Executar)

Interface(Desenhar)

Refinando a sua Ideia

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

• 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?

Desculpe porém não tive tempo de escrever uma carta curta, então mandei uma longa.

- Mark Twain

“”

EXERCÍCIO: Criando a sua DECLARAÇÃO

• ESCOLHAM uma categoria de aplicativo dos Post-It`s

• DEFINAM quem será o público alvo para o seu aplicativo

• LEVANTEM todas as funcionalidades que consigam pensar

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

• JUNTE o PÚBLICO ALVO e as FUNCIONALIDADES

45 minutos

• Post-It

• Papel

• Lápis/Caneta

Meetings for iPadPaolo Domenico Passeri

DESIGN como um DIFERENCIAL

• 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!

Por que ter DESIGN?

Estudo de Caso: CONVERT

• 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!

2 meses

A importância dos ICONES

• É 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

Qual destes você escolheria (deixe 8)?

EXERCÍCIO: Desenhando o ICONE

• 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”

45 minutos

• Papel

• Lápis/Caneta

• Cores

Fontes de ícones

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

INTERAGINDO COM DISPOSITIVOS MÓVEIS

Métodos de Interação

• 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”

Padrões de Interação

• 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

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 DIRETA/Touch/Haptic

• Toques curtos e longos• Arrastar• Deslizar• Girar• Pinçar e Expandir

• Não existe mapeamento pois as teclas são “virtuais”• Difícil aprender todos os meios de entrada• São muito flexíveis

Manipulação por GESTOS

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

• Inclinando• Asoprando • Chacoalhando

Limpa texto

ListasBotões ou Links

Indicadores de EsperaEntrada de Texto

Diagrama de FLUXO das telas

• 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

EXERCÍ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

1 hora• Papel

• Lápis/Caneta

INTERFACE DE USUÁRIO

Uma BOA 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!

Dispositivos Móveis

Entendendo cada dispositivo

Tela / Resolução

3.5” /480x320 e 960x640

9.7” /1024x768

2.6” → 5.8” /240x320 →

480x548

3.5” → 4.5” /800x480

Auto-rotativa ✓ ✓ ✓ ✓ ?

Interface(s)

TouchscreenAcelerômetro

MicrofoneCâmera

MicrofoneGPS

MicrofoneCâmera

GPSRFID

Padronização ✓ ✓ ✗ ✓ ✗

iPhone 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 natívos

Diferentes ESTILOS de aplicativos

São BASEADOS em:

• Comportamentos e USO

• Características VISUAIS

• Modelo dos DADOS

• EXPERIÊNCIA de usuário

Como ESCOLHER ?

• 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

açõe

• Organizar listas

• Adicionar ou remover itens

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

UTILITÁRIOS

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

é apresentada

• Pouca interação

IVA TELA TODA, em ambientes ricos visualmente

• Muito peculiar

• Sem controles padrão

• Diversão, como jogos e rich-media

INTERFACE de Usuário

Status bar

Navegation bar

Toolbar

Tab bar

Alertas, Ações e View Modal

Exemplo de “View Modal” MAL desenhada

Tabelas

Simples Indexada Agrupada

Controles

Busca Slider e Switch Segmentados Pickers

Android : User Interface Guidelines

• Ainda em DESENVOLVIMENTO

• Seta as GUIAS para INTERAÇÕES e VISUAL

• Focado TOTALMENTE para DESENVOLVEDORES!

CONTEMPLA

• Criação de WIDGETS

• ATIVIDADES e TAREFAS

• Design de MENUS

WIDGETS

• Um WIDGET apresenta para o usuário as informações mais importantes na HOME SCREEN

• Os PADRÕES de criação dependem da funcionalidade

MolduraWIDGETS

ATIVIDADES

Teclado Contatos Detalhes Edição

MENUSM

pçõe

Menu de Contexto

PDFSaturday, August 21, 2010

Links para os HIG’s

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

http://developer.android.com/guide/practices/ui_guidelines/index.html

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

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

Desenhando Interfaces

• 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!

EXERCÍCIO: Desenhando sua INTERFACE

• 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

1 hora

• Papel

• Lápis/Caneta

• Post-it’s

• 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

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

• Busque inspiração no MUNDO REAL!

Sua IDENTIDADE visual

Busque o LÚDICO...

...e o REAL

Muito Obrigado!

paolopasseri

@paolopasseri

paolopasseri@gmail.com

Mini Curso de Design de Interfaces para Dispositivos Móveis

Design

Natural User Interfaces in Games for Mobile Devices · A incorporação de detectores de toque e movimento em dispositivos móveis permitiu o desenvolvimento de novas formas de interacção

Estratégia Data-Driven - storage.googleapis.com · aplicativos e websites para dispositivos móveis na Rede de Display (GDN). Em apenas uma campanha, seus anúncios de app são exibidos

Dispositivos móveis final do carmo e lu

Dispositivos móveis digitais e competências para a ... · sua constante evolução ou emergência nem sempe supõe uma imediata ... a relação que estabelecem entre o uso dos dispositivos

Adaptaçªo de interfaces para dispositivos móveis com HTML5 · com interfaces que se adaptam a diferentes tipos de dispositivos dando ... (Software Development Kit ... qualidade

UNIVERSIDADE DO ESTADO DO RIO GRANDE DO NORTE (UERN) AVANÇADO PROF.ª MARIA ELISA DE ... · 2019-07-25 · MÁRCIA MYCHELLE NOGUEIRA DO NASCIMENTO DISPOSITIVOS MÓVEIS E APPS NA

Curso de Especialización en Dispositivos Móviles A Coruña ... · PDF file–Greendroid –Android.ads –Apache –google.android.apps.analytics –Json –Mozilla –Javax –xmlrpc.android

Cisco Meraki · Portfólio de redes de borda e redes filiais gerenciadas na nuvem - Linha completa de produtos wireless, switching, segurança, e gestão de dispositivos móveis

Teste Folder Móveis

Catálogo Salvel Móveis

SEMICONDUCTOR TECHNOLOGY ALTERNATIVES: EMERGING … · Curso de Master IFSIN “Dispositivos emergentes” • TAXONOMY FOR NANO-INFORMATION PROCESSING (2005) Curso de Master IFSIN

Curso: Config. Dispositivos de Red MSc. Sergio Quesada Espinoza

Adptando sites para dispositivos móveis

Potencialidades dos Dispositivos Móveis na Dinamização de ... · Marco Neves Sintra, 4 de setembro - 2015 Potencialidades dos Dispositivos Móveis na Dinamização de Projetos

Java para dispositivos móveis - Faculdade de Engenharia ...apm/CMSW/docs/14IntroXamarin.pdf · Intro to Xamarin 7 Xamarin.iOS does full ARM instructions compilation to produce an

Curso de programación y conexión de dispositivos de seguridad

Close up: que estilo de homem é você?anuncie.r7.com/files/2016/05/R7_DiadosPais_MAI16.pdf · mobile o uso de dispositivos mÓveis vem crescendo consideravelmente no mundo, e o brasil

Catálogo New Móveis

Marcação de equipamentos para atmosferas explosivas ... · proteção destinados a ser utilizados em atmosferas ... materiais, dispositivos fixos ou móveis, ... Determinação

Workshop - Design de Interfaces para Dispositivos Móveis