Construindo interfaces intuitivas (Parte 1)

Professor Marcos DevanerConstruindo interfaces intuitivasMinicurso

Tópicos abordados

1. Introdução a Interfaces2. Engenharia de Usabilidade3. As 10 Heurísticas de Nielsen4. Atividade Prática

Introdução a Interfaces

O que são interfaces

Usuário Interface Máquina (Computador)

Linha do tempo e evolução

•Anos 1950: Interface de hardware “para engenheiros” com diversos botões de interação.

•Anos 1960-1970: Interface de programação (COBOL, FORTRAN)

•Anos 1970-1990: Interface de terminais (linguagens de comando)

•Anos 1980: Interface de interação para diálogo (GUIs, multimídia)

•Anos 1990: Interface para realizar trabalho (redes e grupos)

•A partir de 2000: Interface torna-se onipresente (Aparelhos celulares, bluetooth, dispositivos móveis, eletrônicos, por toda a parte, telas interativas e muitas tecnologias embarcada)

A importância

O sucesso de produtos interativos chama a atenção de departamentos de marketing que compreendem

que a usabilidade afeta fatores como marca, número de acessos aos sites, índice de retorno nos sites e a

satisfação do usuário e potencial cliente. “A interação com a interface afeta a percepção de

marca”(Fernandez, 2005).

Engenharia de Usabilidade

Engenharia de Usabilidade

Jakob Nielsen (1993) definiu engenharia de usabilidade como um conjunto de atividades que devem ocorrer durante todo o ciclo de vida do produto, ressaltando que muitas delas ocorrem nos estágios iniciais do projeto, antes que a interface com usuário em si seja projetada.

Jakob Nielsen é um cientista da computação com Ph.D. em interação

homem-máquina. É um User Advocate e diretor da Nielsen

Norman Group, que ele co-fundou com o Dr. Donald A. Norman.

Atividades abordadas

1. Conheça seu usuário 2. Realize uma analise competitiva3. Faça designs paralelos4. Aplique diretrizes e analise heurística5. Adote o design participativo6. Faca protótipos

Vamos iniciar o trabalho?

Conheça seu usuário

Essa atividade envolve conhecer as características individuais dos usuários e do seu ambiente físico e social de trabalho, suas atividades e as formas como lidam com circunstancias excepcionais e emergenciais. Nielsen sugere procurar usuários especialmente eficientes e que desenvolveram suas próprias estratégias para contornar as limitações dos sistemas existentes.

Persona e StoryPersonas são personagens fictícios que descrevem os padrões de comportamento dos seus usuários e clientes ideais.

Lucy tem tem um salão de beleza e gostaria de um sistema onde suas clientes pudessem visualizar seus trabalhos e agendar serviços de beleza.

User Story é um requisito capturado normalmente em 1 parágrafo que descreve a necessidade de um usuário de forma breve utilizando uma linguagem comum ao negócio.

Persona Story

- Nome: Lucy- Empresária- 30 Anos

Análise competitiva

Consiste em examinar produtos com funcionalidades semelhantes ou complementares visando avaliar tanto as funcionalidades que apoiam como as questões de interação tidas como relevantes para o projeto.

AtividadeCom base na Story de Lucy, pesquise 3 sistemas ou sites que tenham a mesma finalidade e faça um levantamento dos pontos que você importante e atrativo para os usuários.

Design paralelo

Consiste em elaborar diferentes alternativas de design, de preferencia por três ou quatro designers.

AtividadeJunte-se a dois colegas e façam cada um desenho de tela de como seria a interface do sistema para Lucy.

Diretrizes (10) Heurísticas de Nielsen)

1. Visibilidade de qual estado estamos no sistema2. Correspondência entre o sistema e o mundo real3. Liberdade de controle fácil pro usuário4. Consistência e padrões5. Prevenções de erros6. Reconhecimento em vez de memorização7. Flexibilidade e eficiência de uso8. Estética e design minimalista9. Ajude os usuários a reconhecerem, diagnosticarem e recuperarem-se

de erros10.Ajuda e documentação

Design participativoConsiste em a equipe de design ter acesso permanente a um conjunto de usuários tidos como representativos da população-alvo de usuários para produzir representações dos designs propostos que eles entendam facilmente, como protótipos, maquetes ou esboços de tela, para que eles possam reagir as propostas, fornecer feedback informativo, levantar novas questões e participar ativamente das discussões acerca das soluções propostas.AtividadeJunte-se a seus colegas e façam análise dos desenhos de telas e as diretrizes apresentadas no slide anterior. Definam um modelo final que atenda as diretrizes.

Faça Protótipos

AtividadeConstrua um protótipo de baixa fidelidade da tela inicial do sistema. Não precisa neste momento pensar em cores e formatações.

Protótipo é um produto de trabalho da fase de testes e/ou planejamento de um projeto.

FimObrigado!