Instituto Federal do Sertão-PE Design de Interfaces e Usabilidade - Tópico 1 Prof. Felipe Correia
Conteúdo Por que estudar Design de Interfaces e Usabilidade?! Conceitos básicos sobre Design! Primeira Lei de Krug sobre Usabilidade
Por que estudar Design de Interfaces e Usabilidade?
Criar desejos
Resolver problemas do dia-a-dia
Facilitar a vida das pessoas
Acessibilidade
Área de estudo Essa área procura estudar como os seres humanos interagem com os sistemas computacionais, procurando fazer com que a interação seja simples e natural
Objetivo da disciplina Fornecer aos pesquisadores e desenvolvedores de sistemas:! explicações e previsões para fenômenos de interação usuário-sistema! resultados práticos para o design da interface de usuário
Definição A Interação Humano Máquina (IHM) é uma ciência multidisciplinar que engloba diversas áreas como: ciência da computação, psicologia cognitiva, psicologia organizacional e social, ergonomia e fatores humanos, engenharia, design, antropologia, sociologia, filosofia, linguística, e inteligência artificial (PREECE, 1994)
Área multidisciplinar
Outra definição A IHC estuda e define métodos para projeto de sistemas ou dispositivos de interação que sejam mais fáceis de utilizar, eficientes, eficazes e que possibilitem conforto aos indivíduos que irão utilizá-los (AGNER, 2006).
O que é uma interface? Segundo Alan Kay, para os usuários, a interface é o programa ou ainda: Parte do sistema com a qual o usuário entra em contato físico, perceptivo e cognitivo. [Moran 83] Imagem do sistema. [Norman 86] Ambiente virtual para interatividade. [Laurel 93] Mensagem do designer para o usuário. [de Souza 93]
Interface Amigável Interface deve ser invisível! O usuário deve se concentrar apenas nas tarefas! Deve ser fácil de usar e aprender! Reduzir o custo de treinamento e uso diário dos usuários! Prevenir ou minimizar a taxa de erros do usuário
Interface Amigável Recordação rápida e atrativa! Porque é tão importante?! As pessoas decidem não usar um programa por causa da interface! O desenvolvimento da interface corresponde a um alto custo no desenvolvimento do sistema
Interface e interação O que é interação?! É a capacidade do sistema em dar respostas ao usuário! Capacidade do usuário em se comunicar com o sistema
Interface e interação Interface! Aquilo que interliga dois sistemas! Software e hardware para comunicação entre usuário e sistema! Interação! Processo de comunicação usuário-sistema! Processo que engloba as ações dos usuários no sistema e interpretações dos resultados
Interface e interação Sentidos da interação! Usuário -> sistema! Sistema -> usuário! Usuário -> usuário
Interface e interação Como podemos interagir com o sistema?! Menus! Teclas rápidas! Preenchimento de formulários! Linguagem de comando! Questão/resposta! Linguagem natural! Realidade virtual
Menus Lista de opções! Organização! Objeto-ação! Ação-objeto! Favorecem usuários pouco treinados ou ocasionais! Fácil treinamento
Teclas rápidas Combinação de teclas para acionar diretamente uma função do sistema! CTRL + C! CTRL + V! Usuários experientes! Agilidade
Formulários Baseado na digitação e preenchimento de campos de um formulário! Entrada de dados! Formulário eletrônico similar ao modo em papel! Geralmente é complementado por menus
Formulários
Linguagens de comando Interação baseada em comandos (linguagem)! Demanda tempo de aprendizagem! Desempenho bom com usuários experientes! Ex.: shell
Questão/Resposta Usuários interagem através de respostas dadas aos questionamentos feitos pelo sistema! Ex.: programas de instalação, wizards
Linguagem natural Forma ideal para comunicação entre humanos! Há várias pesquisas para melhorar o reconhecimento de vocabulário do usuário! Pode exigir treinamento do sistema e do usuário! Pode ser via voz ou gestos
Manipulação direta Estilo GUI (Graphical User Interface) ou WIMP (Windows, icons, mouse, pointer)! Manipulação direta dos objetos visíveis! Usuário visualiza objetos interativos
Realidade Virtual Forma mais avançada de interação! Uso de dispositivos para aumentar o envolvimento dos usuários e o sistema! Usuário faz parte do sistema! Interação em universos 3D
Tendências Vestir sistemas (wearable computing)! Utilizar sistemas computacionais sem perceber (computação pervasiva/infiltrada)! Utilizar diversos dispositivos para controlar diversos sistemas (convergência)
Interfaces de usuário Como deve ser o desenvolvimento de um projeto de interface de usuário para o sistema?
Interfaces de usuário Para desenvolver um projeto de interface de usuário deve-se considerar:! Perfil do usuário (para quem?)! Dispositivos de interação (como?)! Tarefas (o que?/quando?)
Perfil do usuário Usuário! Usuário Cliente! Características! Físicas/ergonômicas! Cognitivas! Culturais! Sociológicas! Organizacionais! Nível do usuário: ocasional, iniciante, experiente
Dispositivos de interação Dispositivos! Hardware (acesso)! Software
Tarefas Fazem parte do fluxo de trabalho! Podem ser:! Manuais! Automáticas! Interativas
Criando personas Criar personas é um meio de descobrir o público alvo! Como satisfazer suas necessidades! Como gerar maior interesse pelo serviço ou produto! Objetivo:! Criar representações confiáveis e realistas dos seus principais segmentos de público
Perguntas a fazer Qual é o objetivo do meu produto?! Descreva o seu consumidor:! Qual a idade da pessoa?! Qual o sexo da pessoa?! Qual o grau de educação?
Perguntas a fazer Descreva a vida profissional do consumidor:! Quanta experiência de trabalho ela possui?! Por que usarão o produto?! Onde irão obter informações sobre o seu produto ou serviços similares?! Quando e onde os usuário consomem o produto?
Perguntas a fazer Descreva a motivação que o consumidor possui:! O que motiva a pessoa a usar o produto?! O que ela procura?! Quais são suas necessidades?
Leitura 1 Projeto de Interfaces de Usuário Perspectivas Cognitivas e Semióticas Autores: Clarisse Sieckenius de Souza, Jair Cavalcanti Leite, Raquel Oliveira Prates, Simone D.J. Barbosa
Exercícios Por que estudar Design de Interfaces e Usabilidade?! Qual o objetivo principal dessa disciplina?! O que é uma interface? E uma interface amigável?! Qual a diferença entre interface e interação?! O que deve ser considerado ao desenvolver uma interface? Comente cada uma das características.! Descreva a criação de personas.
Conceitos Básicos sobre Design
Conteúdo Introdução! O processo de design! Um site existente! Coleta de requisitos! O que fazer depois da coleta de requisitos?! Rascunhos
Introdução Considerações de um bom design! Teoria de cores! Tipografia! Layout! Usabilidade! Não existe uma maneira correta! Requer criatividade! Exige certa experiência em programação
O processo de design Coleta de requisitos! Engenharia de Software! Prototipação! Fireworks! Programação! HTML! CSS! JavaScript! PHP
Um site existente
Pedidos dos usuários Podemos melhorar os botões, talvez algo mais elegante?! Vamos fazer um logo que reflita bem a nossa empresa! Precisamos de cores que atraiam as pessoas! Precisamos que as formas fiquem melhores. O site parece mais uma aplicação
Pedidos do usuário Gostaria que o site fique mais divertido! Precisamos de figuras espalhadas pelo site que atraiam as pessoas! Seria interessante que o site fique parecido com o da Amazon
Por onde começar? Deve-se tentar entender o que os usuários estão realmente querendo do site que você está projetando! Além disso, entender o propósito real do site e identificar o público-alvo! Finalmente, uma vez que o projetista tem uma lista de requisitos, é interessante fazer um esboço das telas! Isso ajuda a entender melhor os pedidos do cliente e tirar as dúvidas
Passo-a-passo 1. Faça pelo menos três rascunhos do design! 2. Escolha as cores! 3. Escolha as fontes! 4. Implemente o design no Fireworks! 5. Crie as imagens para os elementos! 6. Crie as páginas HTML com CSS! 7. Realize os testes para compatibilidade e acessibilidade
Sugestão para rascunho Nome do site! Campo de busca! Formulário de login! Um parágrafo introdutório sobre o site! Links para! Informação de contato! Política de segurança
Convenções de layout Boa parte dos websites possuem algo em comum! Uma região de cabeçalho que apresenta o nome do site e uma logo! Região de conteúdo principal dividida em colunas! Pelo menos umas das colunas é reservada para um menu lateral! Geralmente, é possível encontrar uma barra de navegação no topo da página! Região de rodapé que possui informação de copyright e links adicionais
Convenções de layout Dicas! Designers e desenvolvedores imitam o que funciona! O usuário deve encontrar o que ele procura imediatamente! Procure na Web por ideias em sites similares! Procure também em sites em outras áreas para verificar o que o seu concorrente está esquecendo de colocar! O layout deve conter as informações necessárias, mas deve ser familiar à audiência
Rascunhos Rascunho mais simples
Rascunhos Rascunho com mais elementos gráficos
Rascunho Rascunho com as mesmas funcionalidades da página original e adiciona novos conceitos
Rascunho Dicas! Deixe que o cliente te ajude! Peça que ele identifique alguns sites que ele goste! A criação do design é um processo iterativo! É necessário consultar o cliente várias vezes para chegar em uma versão que ele realmente goste
Exercícios Identificação de requisitos! Rascunho de telas
Primeira Lei de Krug sobre Usabilidade
Conteúdo Não me faça pensar!! Coisas que nos fazem pensar
Não me faça pensar Qual a coisa mais importante que eu devo fazer se quiser me assegurar que meu Web site seja fácil de usar?! Segundo o autor o princípio primordial da usabilidade é que o usuário estabelece a seguinte regra! Não me faça pensar!
Não me faça pensar
Não me faça pensar
Coisas que nos fazem pensar Nome de coisas! Nomes engraçadinhos ou espertos! Nomes dados por motivo de marketing! Nomes específicos da empresa! Nomes técnicos
Coisas que nos fazem pensar
Coisas que nos fazem pensar Links e botões que não sejam óbvios
Coisas que nos fazem pensar
Coisas que nos fazem pensar Coisas com as quais os visitantes de um site não devem perder tempo pensando! Onde estou?! Onde devo começar?! Onde eles colocaram o?! Quais as coisas importantes nesta página?! Por que eles deram nome a isto?