SlideShare uma empresa Scribd logo
1 de 21
Baixar para ler offline
Usabilidade em Apps
Marcos Devaner
Interação Humano Computador
Aula 11
“Apps” é a abreviação da palavra
“applications”, ou aplicativos. No
contexto dos smartphones,
”apps” são os programas que você
pode instalar em seu celular, ou
seja, a tela que mostra a previsão do
tempo, o joguinho ou aquela câmera
cheia de efeitos, entre outros.20 de
dez de 2012
Apps
Etapas do processo
Sistemas, Usuário e Apps
Fonte: https://www.tecmundo.com.br
Acessado em: 09/12/2016
Android IOs Windows
Regras Gerais de Usabilidade em Apps
• Instruções básicas de operação nas primeiras interações
• Não se faz necessário que as instruções já descritas em passos anteriores sejam
repetidas em todas as telas
• As atividades devem ser ações rápidas e simples, que não exijam a fixação do
olhar na tela pequena, por um tempo prolongado.
• As atividades quando bem descritas contribuem para prevenção de erros que são
as principais fontes de frustração, ineficiência e ineficácia durante a utilização do
aplicativo.
Textos em Apps
• Utilizar frases curtas.
• Alinhar o texto à esquerda.
• Utilizar espaço simples entre as linhas, já que a tela é pequena.
• Não colocar informações redundantes.
• Destacar as partes do texto mais relevantes.
• Usar texto sem serifa Galinkin (2010) com tamanho igual ou superior a
10 pixels.
Botões em Apps
• É recomendado que botões
apresente algum tipo de retorno
visual ou sensitivo do seu
pressionamento. Os botões podem
ser utilizados com dimensões iguais
ou superiores a 62 pixels
Navegação em Apps
• Modelo linear com uso de botões para troca entre telas:
1. Troca da aparência do botão quando pressionado.
2. Animações entre as telas podem ser utilizadas como ajuda
para confirmar que o comando foi aceito.
3. Recomenda-se que o botão de navegação esteja
posicionado sempre no mesmo local.
• Touch screen para paginação
Esse modelo de navegação apresenta menor índice de erros quando comparado com o
uso dos botões para navegação. Mesmo sem o retorno sensitivo, a transição entre as
telas permitiu aos usuários a confirmação da interação e foi mais fácil de ser
memorizada.
Lista de opções
O uso da lista de opções é recomendado desde
que os itens apresentados obedeçam as
dimensões de texto e opções selecionáveis
apresentadas nos itens de fonte e botões dessa
lista de recomendações. A rolagem de tela para
navegar pelos itens não influi no uso do
componente. Os itens da tela devem possuir um
retorno de interação para deixar clara a sua
seleção.
Grade de imagens
As grades de imagens podem ser utilizadas, desde
que as dimensões dos itens a serem selecionados
sejam iguais ou superiores 62 pixels.
Rolagem de texto
A rolagem de tela em substituição da barra de rolagem é recomendada.
Deve-se no entanto utilizar algum item de marcação no final de cada tela
para auxiliar o usuário.
Botões de rádio e checagem
Eles podem ser utilizados. A compreensão do
funcionamento e interação com o componente
são de fácil entendimento. Deve-se respeitar as
dimensões de fonte e dos itens selecionáveis
descritas nesta lista de recomendações.
Animação
As animações são recomendadas para destacar as
transições entre os ambientes do aplicativo
(HUHTALA et al., 2010), e elas facilitam a
percepção do usuário na troca de contexto e
funcionam como um retorno visual da aceitação de
comandos dados ao aplicativo
Prototipação e validação
POP é um aplicativo que através da câmera do smartphone consegue
fotografar telas feitas a mão e personaliza-las para serem navegadas como
se fossem um APP nativo. É possível importar várias imagens/telas ao
mesmo tempo e adapta-las através de recursos básicos de edição.
O aplicativo para Android, iOS e WP POP pode ser baixado gratuitamente
através das lojas oficiais da Apple, Google e Microsoft.
Fontes
MOL, M. A. Recomendações de usabilidade para interface de aplicativos para
smartphones com foco na terceira idade. Pontifícia Universidade Católica de
Minas Gerais-Belo Horizonte, 2011.
Pirâmides para imersão
Ideação
Fonte de imagem: http://br.freepik.com/
Essa fase tem como intuito gerar ideias inovadoras para o
tema do projeto e, para isso, utilizam-se as ferramentas de
síntese criadas na fase de análise para estimular a criatividade
e gerar soluções que estejam de acordo com o contexto do
assunto trabalhado.
A fase de ideação geralmente se inicia com a equipe de
projeto realizando Brainstormings (uma das técnicas de
geração de ideias mais conhecidas) ao redor do tema a ser
explorado e com base nas ferramentas
As ideias geradas ao longo desse processo são capturadas
em Cardápios de Ideias que são constantemente validadas
em reuniões com o cliente utilizando, por exemplo,
Prototipações.
Prototipação
O protótipo é a tangibilização de uma ideia, a passagem do abstrato para o físico de
forma a representar a realidade - mesmo que simplificada - e propiciar validações. É
um instrumento de aprendizado sob dois aspectos:
Benefícios da prototipação
1. Selecionar e refinar de forma assertiva as ideias;
2. Tangibilizar e avaliar interativamente ideias;
3. Validar as soluções junto a uma amostra do público;
4. Antecipar eventuais gargalos e problemas, reduzindo riscos e
otimizando gastos.
Níveis de fidelidade
Um protótipo pode ser desde uma representação conceitual ou análoga da solução
(baixa fidelidade), passando por aspectos da ideia, até a construção de algo o mais
próximo possível da solução final (alta fidelidade).
Exemplos de Níveis de fidelidade
Baixa Média Alta
• Rascunhos
• Protótipos desenhados
utilizando lápis e papel
• Storyboards
• Desenhos com programas
especializados
• Protótipos funcionais
• Animações
Mãos a obra
Dadas as problemáticas, escolha uma delas e aplique os processos do Design
Thinking para propor um sistema que ajude a atacar o problema.
Pessoas com deficiência, encontram vários
problemas de mobilidade e acesso a alguns
serviços em seu dia a dia entre eles estão:
•Calçadas em péssimas condições
•Falta de guias rebaixadas
•Inadequação de lojas e restaurantes
•Transporte deficiente
•Ensino profissional precário
•Preconceito
•Diversas barreiras em prédios comerciais e
públicos.

Mais conteúdo relacionado

Semelhante a ihc-aula11-auladecores-161024164037.pdf

designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
JulioCesar371362
 

Semelhante a ihc-aula11-auladecores-161024164037.pdf (20)

Melhorando a experiência do usuário e otimização conversões através de aplica...
Melhorando a experiência do usuário e otimização conversões através de aplica...Melhorando a experiência do usuário e otimização conversões através de aplica...
Melhorando a experiência do usuário e otimização conversões através de aplica...
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
 
Ux pt2
Ux pt2Ux pt2
Ux pt2
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
 
Análise Heuristica
Análise HeuristicaAnálise Heuristica
Análise Heuristica
 
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
[GDGSP] android meetup #67 | Realmente preciso de ux no projeto mobile?
 
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USARUSABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
USABILIDADE - TORNE SEU PRODUTO MAIS FÁCIL DE USAR
 
Usabilidade1
Usabilidade1Usabilidade1
Usabilidade1
 
Análise Heuristica
Análise HeuristicaAnálise Heuristica
Análise Heuristica
 
Boas práticas para aplicativos android
Boas práticas para aplicativos androidBoas práticas para aplicativos android
Boas práticas para aplicativos android
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
User experience
User experienceUser experience
User experience
 
Introdução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivoIntrodução as práticas de desenvolvimento web com design responsivo
Introdução as práticas de desenvolvimento web com design responsivo
 
ALM - Testes Exploratórios
ALM - Testes ExploratóriosALM - Testes Exploratórios
ALM - Testes Exploratórios
 
Android: História, Mercado e Possibilidades (FLISOL - Indaiatuba - 2011)
Android: História, Mercado e Possibilidades (FLISOL - Indaiatuba - 2011)Android: História, Mercado e Possibilidades (FLISOL - Indaiatuba - 2011)
Android: História, Mercado e Possibilidades (FLISOL - Indaiatuba - 2011)
 
Técnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidadeTécnicas para avaliação de usabilidade
Técnicas para avaliação de usabilidade
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
 
Memorias das trincheiras
Memorias das trincheirasMemorias das trincheiras
Memorias das trincheiras
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
 
Design De Interfaces
Design De InterfacesDesign De Interfaces
Design De Interfaces
 

ihc-aula11-auladecores-161024164037.pdf

  • 1. Usabilidade em Apps Marcos Devaner Interação Humano Computador Aula 11
  • 2. “Apps” é a abreviação da palavra “applications”, ou aplicativos. No contexto dos smartphones, ”apps” são os programas que você pode instalar em seu celular, ou seja, a tela que mostra a previsão do tempo, o joguinho ou aquela câmera cheia de efeitos, entre outros.20 de dez de 2012 Apps
  • 3. Etapas do processo Sistemas, Usuário e Apps Fonte: https://www.tecmundo.com.br Acessado em: 09/12/2016 Android IOs Windows
  • 4. Regras Gerais de Usabilidade em Apps • Instruções básicas de operação nas primeiras interações • Não se faz necessário que as instruções já descritas em passos anteriores sejam repetidas em todas as telas • As atividades devem ser ações rápidas e simples, que não exijam a fixação do olhar na tela pequena, por um tempo prolongado. • As atividades quando bem descritas contribuem para prevenção de erros que são as principais fontes de frustração, ineficiência e ineficácia durante a utilização do aplicativo.
  • 5. Textos em Apps • Utilizar frases curtas. • Alinhar o texto à esquerda. • Utilizar espaço simples entre as linhas, já que a tela é pequena. • Não colocar informações redundantes. • Destacar as partes do texto mais relevantes. • Usar texto sem serifa Galinkin (2010) com tamanho igual ou superior a 10 pixels.
  • 6. Botões em Apps • É recomendado que botões apresente algum tipo de retorno visual ou sensitivo do seu pressionamento. Os botões podem ser utilizados com dimensões iguais ou superiores a 62 pixels
  • 7. Navegação em Apps • Modelo linear com uso de botões para troca entre telas: 1. Troca da aparência do botão quando pressionado. 2. Animações entre as telas podem ser utilizadas como ajuda para confirmar que o comando foi aceito. 3. Recomenda-se que o botão de navegação esteja posicionado sempre no mesmo local. • Touch screen para paginação Esse modelo de navegação apresenta menor índice de erros quando comparado com o uso dos botões para navegação. Mesmo sem o retorno sensitivo, a transição entre as telas permitiu aos usuários a confirmação da interação e foi mais fácil de ser memorizada.
  • 8. Lista de opções O uso da lista de opções é recomendado desde que os itens apresentados obedeçam as dimensões de texto e opções selecionáveis apresentadas nos itens de fonte e botões dessa lista de recomendações. A rolagem de tela para navegar pelos itens não influi no uso do componente. Os itens da tela devem possuir um retorno de interação para deixar clara a sua seleção.
  • 9. Grade de imagens As grades de imagens podem ser utilizadas, desde que as dimensões dos itens a serem selecionados sejam iguais ou superiores 62 pixels.
  • 10. Rolagem de texto A rolagem de tela em substituição da barra de rolagem é recomendada. Deve-se no entanto utilizar algum item de marcação no final de cada tela para auxiliar o usuário.
  • 11. Botões de rádio e checagem Eles podem ser utilizados. A compreensão do funcionamento e interação com o componente são de fácil entendimento. Deve-se respeitar as dimensões de fonte e dos itens selecionáveis descritas nesta lista de recomendações.
  • 12. Animação As animações são recomendadas para destacar as transições entre os ambientes do aplicativo (HUHTALA et al., 2010), e elas facilitam a percepção do usuário na troca de contexto e funcionam como um retorno visual da aceitação de comandos dados ao aplicativo
  • 13. Prototipação e validação POP é um aplicativo que através da câmera do smartphone consegue fotografar telas feitas a mão e personaliza-las para serem navegadas como se fossem um APP nativo. É possível importar várias imagens/telas ao mesmo tempo e adapta-las através de recursos básicos de edição. O aplicativo para Android, iOS e WP POP pode ser baixado gratuitamente através das lojas oficiais da Apple, Google e Microsoft.
  • 14. Fontes MOL, M. A. Recomendações de usabilidade para interface de aplicativos para smartphones com foco na terceira idade. Pontifícia Universidade Católica de Minas Gerais-Belo Horizonte, 2011.
  • 16. Ideação Fonte de imagem: http://br.freepik.com/ Essa fase tem como intuito gerar ideias inovadoras para o tema do projeto e, para isso, utilizam-se as ferramentas de síntese criadas na fase de análise para estimular a criatividade e gerar soluções que estejam de acordo com o contexto do assunto trabalhado. A fase de ideação geralmente se inicia com a equipe de projeto realizando Brainstormings (uma das técnicas de geração de ideias mais conhecidas) ao redor do tema a ser explorado e com base nas ferramentas As ideias geradas ao longo desse processo são capturadas em Cardápios de Ideias que são constantemente validadas em reuniões com o cliente utilizando, por exemplo, Prototipações.
  • 17. Prototipação O protótipo é a tangibilização de uma ideia, a passagem do abstrato para o físico de forma a representar a realidade - mesmo que simplificada - e propiciar validações. É um instrumento de aprendizado sob dois aspectos:
  • 18. Benefícios da prototipação 1. Selecionar e refinar de forma assertiva as ideias; 2. Tangibilizar e avaliar interativamente ideias; 3. Validar as soluções junto a uma amostra do público; 4. Antecipar eventuais gargalos e problemas, reduzindo riscos e otimizando gastos.
  • 19. Níveis de fidelidade Um protótipo pode ser desde uma representação conceitual ou análoga da solução (baixa fidelidade), passando por aspectos da ideia, até a construção de algo o mais próximo possível da solução final (alta fidelidade).
  • 20. Exemplos de Níveis de fidelidade Baixa Média Alta • Rascunhos • Protótipos desenhados utilizando lápis e papel • Storyboards • Desenhos com programas especializados • Protótipos funcionais • Animações
  • 21. Mãos a obra Dadas as problemáticas, escolha uma delas e aplique os processos do Design Thinking para propor um sistema que ajude a atacar o problema. Pessoas com deficiência, encontram vários problemas de mobilidade e acesso a alguns serviços em seu dia a dia entre eles estão: •Calçadas em péssimas condições •Falta de guias rebaixadas •Inadequação de lojas e restaurantes •Transporte deficiente •Ensino profissional precário •Preconceito •Diversas barreiras em prédios comerciais e públicos.