Slides do workshop Design de Interfaces para Dispositivos Móveis realizado na Wealth Systems em Cascavel pelo professor Hanry Marcel Kluk. Junho de 2014.
Mini Curso - Design de Interface para Dispositivos MóveisJane Vita
O design para dispositivos móveis se difere do design para outras interfaces de várias maneiras e a maioria destas diferenças estão relacionadas ao fato do usuário levar o dispositivo para qualquer lugar onde vai.
Interfaces inteligentes para dispositivos móveisJuliana Lemos
analisamos algumas plataformas em questões de usabilidade, interatividade, facilidade de compreensão e quais as interfaces tem maior interação com o usuário e permite maior adaptação as necessidades do usuário
Da concepção ao desenvolvimento: a estratégia por trás de um aplicativotdc-globalcode
O que faz um aplicativo ser bem sucedido? O que faz um aplicativo ser positivamente reconhecido pelos seus usuários? Muito além de uma interface gráfica bonita e um código bem escrito, o aplicativo precisa de visão de negócios e consistência estratégica.
Através de estudos de concorrência, benchmarking, tendências, blue sky e pesquisa em profundidade com o público alvo, e fazendo uso de uma série de ferramentas de análise, conseguimos ter uma visão do cenário em que app estará inserido, projetar cenários futuros e conceitos para tais cenários.
Com um trabalho feito de forma colaborativa com o cliente e envolvendo pessoas de áreas e backgrounds distintos, agregamos um conhecimento de fora da nossa zona de expertise, expandindo a compreensão e as possibilidades do projeto.
A construção de um aplicativo deve começar muito antes do fluxograma, da interface, do código. Um aplicativo para ser bem sucedido precisa de uma base estratégica sólida e uma estrutura conceitual bem elaborada. Apresentaremos cases da ilegra, empresa global de TI e negócios, que se propõe a pensar antes e além do software, realizados em parceria com a Icatu Seguros.
Mini Curso - Design de Interface para Dispositivos MóveisJane Vita
O design para dispositivos móveis se difere do design para outras interfaces de várias maneiras e a maioria destas diferenças estão relacionadas ao fato do usuário levar o dispositivo para qualquer lugar onde vai.
Interfaces inteligentes para dispositivos móveisJuliana Lemos
analisamos algumas plataformas em questões de usabilidade, interatividade, facilidade de compreensão e quais as interfaces tem maior interação com o usuário e permite maior adaptação as necessidades do usuário
Da concepção ao desenvolvimento: a estratégia por trás de um aplicativotdc-globalcode
O que faz um aplicativo ser bem sucedido? O que faz um aplicativo ser positivamente reconhecido pelos seus usuários? Muito além de uma interface gráfica bonita e um código bem escrito, o aplicativo precisa de visão de negócios e consistência estratégica.
Através de estudos de concorrência, benchmarking, tendências, blue sky e pesquisa em profundidade com o público alvo, e fazendo uso de uma série de ferramentas de análise, conseguimos ter uma visão do cenário em que app estará inserido, projetar cenários futuros e conceitos para tais cenários.
Com um trabalho feito de forma colaborativa com o cliente e envolvendo pessoas de áreas e backgrounds distintos, agregamos um conhecimento de fora da nossa zona de expertise, expandindo a compreensão e as possibilidades do projeto.
A construção de um aplicativo deve começar muito antes do fluxograma, da interface, do código. Um aplicativo para ser bem sucedido precisa de uma base estratégica sólida e uma estrutura conceitual bem elaborada. Apresentaremos cases da ilegra, empresa global de TI e negócios, que se propõe a pensar antes e além do software, realizados em parceria com a Icatu Seguros.
Nessa curta apresentação, desenvolvida para o evento GameDays, foram levantados as boas práticas no desenvolvimento de um bom projeto em realidade aumentada para smartphones, uma breve apresentação histórica de onde começou, as bibliotecas de desenvolvimento relevantes no cenário atual e os cuidados na apresentação, tanto para Apple quanto para Android.
Apresentação sobre usabilidade no 12° Encontro de WebDesign. A partir de cases de sucesso e insucesso, abordamos os principais fundamentos da disciplina.
Apresentação realizada para os alunos da faculdade de comunicação da Universidade de Brasilia - UNB, assim como integrantes da agencia de comunicação junior, a 296
Fundamentos do desenvolvimento mobile - Daniel da cruz do amaral rochaDanielAmaral70
Passo a passo de como devemos elaborar um projeto para mobile, quais ferramentas usar, IDE, SKD e dicas para quem vai ingressar no mercado de trabalho.
Palestra apresentada por Reinaldo Ferraz, do W3C Brasil, durante o curso de Arquitetura da Informação realizado no iMasters São Paulo, em 29 de Janeiro de 2013. Fonte: http://migre.me/dfkh4
Arquitetura da Informação com Vinícius Krause na Movile Campinas, realizado nos dias 08 e 09 de Fevereiro de 2014.
Sobre o curso em http://www.faberludens.com.br/cursos/arquitetura-da-informacao-com-vinicius-krause/
Veja fotos em http://www.flickr.com/photos/faberludens/sets/72157640779235363/
Nessa curta apresentação, desenvolvida para o evento GameDays, foram levantados as boas práticas no desenvolvimento de um bom projeto em realidade aumentada para smartphones, uma breve apresentação histórica de onde começou, as bibliotecas de desenvolvimento relevantes no cenário atual e os cuidados na apresentação, tanto para Apple quanto para Android.
Apresentação sobre usabilidade no 12° Encontro de WebDesign. A partir de cases de sucesso e insucesso, abordamos os principais fundamentos da disciplina.
Apresentação realizada para os alunos da faculdade de comunicação da Universidade de Brasilia - UNB, assim como integrantes da agencia de comunicação junior, a 296
Fundamentos do desenvolvimento mobile - Daniel da cruz do amaral rochaDanielAmaral70
Passo a passo de como devemos elaborar um projeto para mobile, quais ferramentas usar, IDE, SKD e dicas para quem vai ingressar no mercado de trabalho.
Palestra apresentada por Reinaldo Ferraz, do W3C Brasil, durante o curso de Arquitetura da Informação realizado no iMasters São Paulo, em 29 de Janeiro de 2013. Fonte: http://migre.me/dfkh4
Arquitetura da Informação com Vinícius Krause na Movile Campinas, realizado nos dias 08 e 09 de Fevereiro de 2014.
Sobre o curso em http://www.faberludens.com.br/cursos/arquitetura-da-informacao-com-vinicius-krause/
Veja fotos em http://www.flickr.com/photos/faberludens/sets/72157640779235363/
Ecologia de Interação: Metadesign aplicado para a construção de taxonomias e ...Instituto Faber-Ludens
Palestra especial apresentada pelo Prof. Dr. Caio Vassão durante o curso de Arquitetura de Informação no dia 31 de Janeiro de 2013, na sede do iMasters em São Paulo.
Workshop realizado em 13 e 14 de Julho de 2013, ministrado por Paolo Passeri (http://www.slideshare.net/paolopasseri), pelo Instituto Faber-Ludens, no Centro de Criatividade Astrolábio, em Curitiba.
Mini Curso de Design de Interfaces para Dispositivos MóveisPaolo Passeri
Apresentação do Mini Curso de Design de Interfaces para Dispositivos Móveis realizado em parceria Fisam e Instituto Faber-Ludens ministrado por Paolo Domenico Passeri.
Introdução aexperiência do usuário.
O que é?
O que se faz?
Como se faz?
User Experience é focar o projeto no usuário, entender necessidades e saber conciliar sua satisfação com os objetivos do produto.
Video fashionista:
http://www.youtube.com/watch?v=E1T0egGgc5E
Referências tiradas de:
http://catarinasdesign.com.br
http://www.slideshare.net/guimenga/interface-interao-e-usabilidade
http://www.slideshare.net/fabricioteixeira/ux-design-antes-do-wireframe
http://www.fatdux.com/pt/What/What-is-UX
http://books.google.com.br/books?id=bl0H1cYIzAwC&printsec=frontcover&hl=pt-BR&source=gbs_ge_summary_r&cad=0#v=onepage&q&f=false
Como não ferrar com a user experience - Campus Party 2012 Juliana Gaiba
Você não pode contar com alguém específico para cuidar da user experience do seu site, aplicativo, produto, serviço ou foguete? Bem, não se desespere. Saiba técnicas para criar interfaces amigáveis sem ser necessariamente um expert no assunto, ou seja, torne a vida dos usuários de internet e aplicativos móveis mais fácil, com movimentos mais rápidos, diretos e baratos.
--
Oficina ministrada durante a Campus Party 2012
Área de Inovação, no palco "Desenvolvimento"
10/fev/2012
--
Vídeo da apresentação: http://youtu.be/-Cy0KKLfInI
Curso de Marketing Digital realizado no Guajajaras Coworking no dia 15 de novembro de 2014. Conceitos básicos de tecnologia para quem entende pouco ou nada de tecnologias digitais para comunicação e marketing.
Padrões de projeto para o Android - Interação para desenvolvedoresGustavo Bitencourt
Apresentação a ser realizada em sala de aula - Interface Humano Computador.
Os dados contidos na apresentação foram extraídos de duas referências:
1) Livro Padrões de Projeto Para o Android - Soluções de Projetos de Interação Para Desenvolvedores - Greg Nudelman
2) Documentação Design Google Android (http://developer.android.com/design/index.html)
Windows 8 - Introdução ao desenvolvimento de appsJanynne Gomes
Palestra ministrada na Universidade Vale do Rio Doce em 21/05/2013.
A palestra introduziu o conceito de apps Windows Store com dicas de design e processo de aprovação da app na Windows Store.
UX and Material Design: Criando Aplicativos Android do Jeito Certo - Androido...Nelson Vasconcelos
Apresentação sobre UX e Material Design, explicando o conceito de guidelines com exemplos, além de dúvidas e erros mais comuns ao projetar interfaces para Android.
SDK Mobile: Como atingir uma incrível experiência para o usuário com uma integração de 10 minutos
Matias Gualino – Team Leader de pagamento Mobile, Mercado Pago
SDK Mobile: Como atingir uma incrível experiência para o usuário com uma integração de 10 minutos
Matias Gualino – Team Leader de pagamento Mobile, Mercado Pago
Apresentação sobre mercado, plataformas, e curiosidades sobre o mundo mobile. Para os interessados em iniciar o desenvolvimento mobile, mostrando o que existe, como funciona um pouco do mercado, sua história, e quais as plataformas existentes.
Aula 08 de Comunicação Digital: Design de interação.
Links:
- RSA, animação Manuel Lima (o poder das redes): https://www.youtube.com/watch?v=nJmGrNdJ5Gw
- Newsmap, mapa de notícias japonês: http://newsmap.jp/
- Oculus Rift: https://www.youtube.com/watch?v=DhcOMOWRMnA
- Bracelete-mouse Myo: https://www.youtube.com/watch?v=oWu9TFJjHaM
Dicas, truques, experiências de uma equipe desenvolvendo projetos mobile nos últimos 4 anos. O que deu certo, o que deu errado, as armadilhas, os sucessos e problemas.
Explorando o Mundo Apple, Desenvolvendo Aplicativos para IOS - Felipe Martins...Impacta Eventos
• Público-alvo :
Estudantes de cursos de graduação e cursos técnicos de tecnologia que desejam explorar a linguagem de programação iOS.
Profissionais da área de desenvolvimento de aplicativos móveis, incluindo jogos e aplicativos para celulares, com experiência prévia.
Profissionais autônomos com alguma familiaridade em programação orientada a objetos.
• Objetivo: apresentar conceitos e técnicas relativos ao ambiente de desenvolvimento iOS e sua aderência no cenário tecnológico atual.
• Conteúdo programático:
Apresentação;
Cenário de celulares no Brasil e no mundo;
Participação da plataforma iOS no Mercado;
Áreas de atuação;
Ambiente de programação "xcode";
Programa Apple Developer;
Cases de mercado;
Semelhante a Workshop Design para Dispositivos Móveis (20)
2. 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!”
3. 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...
11. 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?
18. COMO VAMOS CHEGAR LÁ?
Ideia
(Refinar)
Processo
(Executar)
Interface
(Desenhar)
19. 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
Entretenimento
Ferramenta
20. Eixo X: Uso Eixo Y: ConteúdoDivertido
Sério
Entretenimento
Ferramenta
X-Y: TIPO DE APLICATIVO
21. 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
22. 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
23. • 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
25. PORQUE TER
DESIGN?
!
• 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!
26. • 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
27. • É 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
29. • 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?
30. • 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
31. • 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
33. • 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
35. • 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
36. 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
PADRÕES DE INTERAÇÃO
37. 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
PADRÕES DE INTERAÇÃO
38. Botões ou Links
Indicadores de Espera
Entrada de Texto Limpa texto
PADRÕES DE INTERAÇÃO
Listas
39. • 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
41. EXERCI'CIO: Traçando seu DIAGRAMA
• LEIAM novamente a “Declaração de Definição do
Produto” (DDP)
• 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
42. • LEIAM novamente a “Declaração de Definição do
Produto” (DDP)
• 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
44. • 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
48. 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
49. 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?
50. PRODUTIVIDADE
organizarinformaçõesdeformaHIERÁRQUICA
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
DIFERENTES ESTILOS DE APLICATIVOS
51. TELA TODA, em ambientes ricos
visualmente
Muito peculiar Sem controles padrão Diversão, como jogos e rich-media
IMERSIVA
DIFERENTES ESTILOS DE APLICATIVOS
60. ATUALIZAÇÃO iOS 7
Clareza
• 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.
61. • 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
72. • 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
73. • Scrollable Tabs
• Spinners
• Fixed Tabs
!
• Spinners
• Action Overflow
• Buttons
ACTION BAR: ELEMENTOS
77. • 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
78. • LEIAM novamente a “Declaração de Definição do
Produto” (DDP)
• 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
80. • 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
83. • 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
85. • 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
87. • 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