interação humano computador (aula 11) - usabilidade em apps
TRANSCRIPT
![Page 1: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/1.jpg)
Usabilidade em AppsMarcos Devaner
Interação Humano Computador
Aula 11
![Page 2: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/2.jpg)
“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
![Page 3: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/3.jpg)
Etapas do processoSistemas, Usuário e Apps
Fonte: https://www.tecmundo.com.brAcessado em: 09/12/2016
Android IOs Windows
![Page 4: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/4.jpg)
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.
![Page 5: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/5.jpg)
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.
![Page 6: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/6.jpg)
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
![Page 7: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/7.jpg)
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.
![Page 8: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/8.jpg)
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.
![Page 9: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/9.jpg)
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.
![Page 10: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/10.jpg)
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.
![Page 11: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/11.jpg)
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.
![Page 12: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/12.jpg)
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
![Page 13: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/13.jpg)
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.
![Page 14: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/14.jpg)
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.
![Page 15: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/15.jpg)
Pirâmides para imersão
![Page 16: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/16.jpg)
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.
![Page 17: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/17.jpg)
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:
![Page 18: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/18.jpg)
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.
![Page 19: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/19.jpg)
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).
![Page 20: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/20.jpg)
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
![Page 21: Interação Humano Computador (Aula 11) - Usabilidade em Apps](https://reader035.vdocuments.mx/reader035/viewer/2022062302/58730a941a28ab99088b6983/html5/thumbnails/21.jpg)
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.