Design de Interfaces e Usabilidade - Tópico 1

Transcrição

1 Instituto Federal do Sertão-PE Design de Interfaces e Usabilidade - Tópico 1 Prof. Felipe Correia

2 Conteúdo Por que estudar Design de Interfaces e Usabilidade?! Conceitos básicos sobre Design! Primeira Lei de Krug sobre Usabilidade

3 Por que estudar Design de Interfaces e Usabilidade?

4 Criar desejos

5 Resolver problemas do dia-a-dia

6 Facilitar a vida das pessoas

7 Acessibilidade

8 Á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

9 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

10 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)

11 Área multidisciplinar

12 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).

13 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]

14 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

15 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

16 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

17 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

18 Interface e interação Sentidos da interação! Usuário -> sistema! Sistema -> usuário! Usuário -> usuário

19 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

20 Menus Lista de opções! Organização! Objeto-ação! Ação-objeto! Favorecem usuários pouco treinados ou ocasionais! Fácil treinamento

21 Teclas rápidas Combinação de teclas para acionar diretamente uma função do sistema! CTRL + C! CTRL + V! Usuários experientes! Agilidade

22 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

23 Formulários

24 Linguagens de comando Interação baseada em comandos (linguagem)! Demanda tempo de aprendizagem! Desempenho bom com usuários experientes! Ex.: shell

25 Questão/Resposta Usuários interagem através de respostas dadas aos questionamentos feitos pelo sistema! Ex.: programas de instalação, wizards

26 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

27 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

28 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

29 Tendências Vestir sistemas (wearable computing)! Utilizar sistemas computacionais sem perceber (computação pervasiva/infiltrada)! Utilizar diversos dispositivos para controlar diversos sistemas (convergência)

30 Interfaces de usuário Como deve ser o desenvolvimento de um projeto de interface de usuário para o sistema?

31 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?)

32 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

33 Dispositivos de interação Dispositivos! Hardware (acesso)! Software

34 Tarefas Fazem parte do fluxo de trabalho! Podem ser:! Manuais! Automáticas! Interativas

35 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

36 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?

37 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?

38 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?

39 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

40 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.

41 Conceitos Básicos sobre Design

42 Conteúdo Introdução! O processo de design! Um site existente! Coleta de requisitos! O que fazer depois da coleta de requisitos?! Rascunhos

43 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

44 O processo de design Coleta de requisitos! Engenharia de Software! Prototipação! Fireworks! Programação! HTML! CSS! JavaScript! PHP

45 Um site existente

46 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

47 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

48 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

49 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

50 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

51 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

52 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

53 Rascunhos Rascunho mais simples

54 Rascunhos Rascunho com mais elementos gráficos

55 Rascunho Rascunho com as mesmas funcionalidades da página original e adiciona novos conceitos

56 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

57 Exercícios Identificação de requisitos! Rascunho de telas

58 Primeira Lei de Krug sobre Usabilidade

59 Conteúdo Não me faça pensar!! Coisas que nos fazem pensar

60 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!

61 Não me faça pensar

62 Não me faça pensar

63 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

64 Coisas que nos fazem pensar

65 Coisas que nos fazem pensar Links e botões que não sejam óbvios

66 Coisas que nos fazem pensar

67 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?