1. Interface Gráfica do Usuário (Graphical User Interface – GUI )
Algoritmos e Programação II - Fábio M. Pereira
2. Interface Gráfica do Usuário (GUI)
Definindo Interface do Usuário
A importância do Bom Design
Os benefícios do Bom Design
Histórico
Introdução da Interface Gráfica do Usuário (GUI)
O avanço da Web
Breve histórico do Design de Telas
Objetivos
Processo de Desenvolvimento
2
11/29/2014
Algoritmos e Programação II – GUI
3. Projeto de Interface do Usuário
A interface do usuário é a parte mais importante de qualquer sistema computacional
Por que?
Ela é o sistema para a maioria dos usuários
Ela pode ser vista, ouvida e também pode ser tocada
As pilhas de código de software estão invisíveis, escondidas atrás de monitor, teclado e mouse
11/29/2014
Algoritmos e Programação II – GUI
3
4. Definindo Interface do Usuário
A interface do usuário é a parte de um computador e de seu software que pessoas podem ver, ouvir, tocar, falar para ...
Possui essencialmente dois componentes: entrada e saída
Entrada (input) é como uma pessoa comunica as suas necessidades ou desejos ao computador
Saída (output) é como o computador comunica o resultado de suas computações e requisitos ao usuário
11/29/2014
Algoritmos e Programação II – GUI
4
5. Definindo Interface do Usuário
São mecanismos de entrada
Teclado, mouse, trackball, o dedo de alguém (para telas sensíveis ao toque), a voz de alguém (para instruções faladas)
Os mais comuns mecanismos de saída são
O monitor de vídeo, seguido por mecanismos que tiram proveito da capacidade auditiva das pessoas: voz e som
O uso dos sentidos humanos de olfato e toque em projetos de interface continuam pouco explorados
11/29/2014
Algoritmos e Programação II – GUI
5
6. Definindo Interface do Usuário
A melhor interface é aquela que não é notada, aquela que permita que o usuário mantenha o foco na informação e tarefa em mãos, não no mecanismo usado para apresentar a informação e realizar a tarefa
11/29/2014
Algoritmos e Programação II – GUI
6
8. A Importância do Bom Design
Com a tecnologia e ferramentas atuais, e com nossa motivação em criar interfaces e telas realmente efetivas e usáveis, por que continuamos a produzir sistemas que são ineficientes e confusos?
Nós não estamos preocupados?
Nós não possuímos senso comum? (produzimos telas idênticas para aplicações similares)
Nós não temos tempo?
Nós ainda não sabemos o que realmente faz o bom design?
11/29/2014
Algoritmos e Programação II – GUI
8
9. A Importância do Bom Design
Uma interface e tela bem projetada é de fundamental importância para nossos usuários
É a sua janela para visualização das capacidades do sistema
Para muitos, é o sistema, sendo um dos poucos componentes visíveis do produto criado pelo desenvolvedor
É também o veículo através do qual muitas tarefas críticas são apresentadas
11/29/2014
Algoritmos e Programação II – GUI
9
10. A Importância do Bom Design
Um layout e aparência de tela afetam uma pessoa de várias maneiras
Se ele é confuso e ineficiente, pessoas irão ter grande dificuldade para realizar seus trabalhos e irão cometer muitos erros
O design pobre pode até mesmo fazer com que pessoas abandonem o uso de um sistema permanentemente
11/29/2014
Algoritmos e Programação II – GUI
10
11. A Importância do Bom Design
Um layout e aparência de tela afetam uma pessoa de várias maneiras (cont.)
Pode também levar a aborrecimento, frustração e aumento do stress
Um usuário aliviou as suas frustrações com seu computador com um par de balas a partir de uma arma bem-apontada
Em outro caso, em um momento de extrema exasperação e raiva, o usuário jogou o seu PC através da janela de seu escritório
11/29/2014
Algoritmos e Programação II – GUI
11
14. Benefícios do Bom Design
Baseado em um sistema que requer processamento de 4.8 milhões telas/ano:
Segundos adicionais requeridos por tela
Pessoas-ano adicionais requeridas para processar os 4.8 milhões de telas
1
.7
5
3.6
10
7.1
20
14.2
11/29/2014
Algoritmos e Programação II – GUI
14
15. Benefícios do Bom Design
Um pesquisador tentou aumentar a clareza e legibilidade da tela tornando-as menos cheias
Separou itens, os quais tinham sido combinados em uma mesma linha para conservar espaço
Resultado: aumento de produtividade em 20%
11/29/2014
Algoritmos e Programação II – GUI
15
16. Benefícios do Bom Design
Um outro pesquisador reformatou uma série de telas de usuários seguindo muitos dos princípios que serão vistos durante o curso
Resultado: os usuários completaram as transações em um tempo 25% menor, com 25% menos erros que as telas originais
Em um estudo comparando 500 telas, o tempo necessário para extrair informações de linhas aéreas ou hospedagem foi 128% mais rápido do melhor para o pior formato
11/29/2014
Algoritmos e Programação II – GUI
16
17. Benefícios do Bom Design
Baca e Cassidy (1999) re-projetaram uma página web de uma organização cujos usuários estavam reclamando da dificuldade em encontrar as informações de que precisavam
Objetivo de usabilidade: encontrar a informação em 80% dos casos
Após o primeiro re-design: 73% das buscas eram completadas com uma média de tempo de 113s
11/29/2014
Algoritmos e Programação II – GUI
17
18. Benefícios do Bom Design
Baca e Cassidy (1999) ...
Após modificações adicionais: 84% de sucesso nas buscas, com redução do tempo médio para 57s
Aumento no sucesso da busca em 15%
Diminuição do tempo de busca em 50%
Mostra a importância de testes interativos e re-design
11/29/2014
Algoritmos e Programação II – GUI
18
19. Benefícios do Bom Design
Fath e Henneman (1999) avaliaram quatro sites comumente usados para compras on-line
Em três dos sites apenas metade das compras puderam ser completadas, no quarto, 84% foram bem sucedidas
1/3 das compras não puderam ser completadas no total
O mais bem sucedido foi cerca de 65% melhor que o menos bem sucedido
Quanto isto significa em dinheiro???
11/29/2014
Algoritmos e Programação II – GUI
19
20. Outros Benefícios
Custos de treinamento menores por causa da redução do tempo de treinamento
Custos de linhas de suporte menores por causa da diminuição do número de chamadas
Aumento da satisfação dos empregados por causa da redução do aborrecimento e da frustração
Benefícios aos clientes da organização por causa dos melhores serviços
11/29/2014
Algoritmos e Programação II – GUI
20
21. Benefícios do Bom Design
Identificar e resolver problemas durante as fases de projeto e desenvolvimento também trazem benefícios econômicos significativos
Pressman (1992) mostrou que para cada dólar ($1) gasto corrigindo um problema durante o projeto do produto, $10 seriam gastos se o problema fosse resolvido durante o desenvolvimento e $100 para corrigi-lo após a implantação
IBM (2001): “cada dólar investido em usabilidade implica em retorno de 10 a 100 dólares”
11/29/2014
Algoritmos e Programação II – GUI
21
27. Histórico – O Avanço da Web
11/29/2014
Algoritmos e Programação II – GUI
27
28. Histórico – O Avanço da Web
11/29/2014
Algoritmos e Programação II – GUI
28
29. Histórico – O Avanço da Web
11/29/2014
Algoritmos e Programação II – GUI
29
30. Histórico – O Avanço da Web
11/29/2014
Algoritmos e Programação II – GUI
30
31. Histórico – Design de Telas
O interesse no bom design de telas só começou a surgir a partir dos anos 70
Quando a IBM lançou seu tubo de raios catódicos 3270 – terminal baseado em texto
Telas da década de 70
Muitos campos, com legendas obscuras e ilegíveis
Visualmente desordenadas e geralmente possuíam campos de comandos que desafiavam o usuário a se lembrar do que eles faziam
Mensagens ambíguas obrigavam o uso do manual
11/29/2014
Algoritmos e Programação II – GUI
31
32. Tela Típica da Década de 70
11/29/2014
Algoritmos e Programação II – GUI
32
33. Histórico – Design de Telas
Guias para projeto de telas baseadas em texto surgiram na década de 80
Telas com rótulos menos obscuros
Teclas de função para acesso aos campos
Mensagens mais claras
No entanto algumas abreviações continuavam obscuras aos usuários
Muitas telas no estilo da década de 70 continuaram a ser desenvolvidas
11/29/2014
Algoritmos e Programação II – GUI
33
34. Tela Típica da Década de 80
11/29/2014
Algoritmos e Programação II – GUI
34
35. Histórico – Design de Telas
Advento de gráficos na década de 90
Alguns princípios básicos não mudaram
Agrupamento e alinhamento, por exemplo
Bordas usadas para separar grupos visualmente
Botões e menus em substituição às teclas de função
Propriedade múltiplas dos elementos
Tamanhos e estilos de fontes, largura de linhas, cores, etc.
11/29/2014
Algoritmos e Programação II – GUI
35
36. Tela Típica da Década de 90
11/29/2014
Algoritmos e Programação II – GUI
36
37. Tela Típica dos anos 2000
11/29/2014
Algoritmos e Programação II – GUI
37
40. Objetivos
Entender as muitas considerações que devem ser aplicadas ao processo de design de interface e tela
Entender a razão e as regras para uma metodologia efetiva de design de interface
Identificar os componentes de interfaces e telas gráficas e da web, incluindo janelas, menus e controles
11/29/2014
Algoritmos e Programação II – GUI
40
41. Objetivos
Projetar e organizar telas gráficas e páginas web para encorajar a compreensão e execução mais rápida e mais apurada de suas características
Escolher cores e ícones de projetos de tela
Realizar o processo de projeto de interface do usuário, incluindo o desenvolvimento da interface e testes
11/29/2014
Algoritmos e Programação II – GUI
41
43. Processo
Conjunto de atividades, parcialmente ordenadas, com a finalidade de obter um produto de software
Exemplo – Modelo em Espiral:
Combina elementos de projeto prototipação-em-etapas
Cada fase inicia com um objetivo esperado e termina como uma revisão pelo cliente do progresso
Esforços de analise e engenharia são aplicados em cada fase do projeto
Vantagens:
Estimativas tornam-se mais realísticas com o progresso do trabalho, porque problemas importantes são descobertos mais cedo
É mais versátil para lidar com mudanças
Engenheiros de software podem começar o trabalho no sistema mais cedo
11/29/2014
Algoritmos e Programação II – GUI
43
44. Usabilidade
“A interface é o sistema para o usuário”
Desejo dos usuários: aplicações que se enquadrem às suas necessidades e que sejam fáceis de usar
“Uma boa interface do usuário deve permitir que pessoas que entendam do domínio do problema possam trabalhar com a aplicação sem terem de ler o manual ou receber treinamento”
Quanto mais intuitiva a interface do usuário, mais fácil será utilizá-la
Quanto mais fácil de usar uma interface, mais barata ela será
11/29/2014
Algoritmos e Programação II – GUI
44
45. Usabilidade
Consequências de uma interface melhor:
Menor custo de treinamento
Menor custo de suporte
Maior satisfação dos usuário
Maior a satisfação com o trabalho realizado
Como aumentar a usabilidade?
Uso de padrões e guias de desenvolvimento
Prototipação
Desenvolvimento centrado no usuário
11/29/2014
Algoritmos e Programação II – GUI
45
46. Desenvolvimento Centrado no Usuário
Processo no qual é dada extensiva atenção às necessidades, desejos e limitações do usuário final de uma interface, em cada estágio do processo de design
Projetistas devem analisar e prever como os usuários gostariam de usar uma interface e devem testar com usuários reais a validade de suas suposições
A interface deve se adaptar ao usuário e não o contrário
11/29/2014
Algoritmos e Programação II – GUI
46
47. Desenvolvimento Centrado no Usuário
Três princípios chave de UCD:
Foco prematuro nos usuários e tarefas
Coleta sistemática e estruturada de requisitos do usuário
Usuários envolvidos desde o princípio maximização da usabilidade do produto
Entendimento das necessidades e desejos dos usuários bem como de seus modelos e representações mentais sobre o domínio
Medida empírica do uso do produto
Foco na facilidade de aprendizado e uso efetivo e livre de erros
Conseguido através da aplicação de testes de usabilidade dos protótipos
11/29/2014
Algoritmos e Programação II – GUI
47
48. Desenvolvimento Centrado no Usuário
Três princípios chave de UCD (cont.):
Projeto iterativo
Requisitos são coletados e o produto é projetado, modificado e testado repetidamente
Não percorremos o ciclo de desenvolvimento apenas uma vez, continuamos a iteração e ajuste com cada ciclo até obtermos o produto correto
11/29/2014
Algoritmos e Programação II – GUI
48
49. Exemplo – Processo AWE
11/29/2014
Algoritmos e Programação II – GUI
49
Identifica necessidades do usuário ou problemas (Conceitual)
Prototipação da solução (Desenvol- vimento)
Projeto de uma solução (Projeto)
Avaliação com usuários reais (Lançamento)
50. 3-5 Iterações
½ - 4 semanas cada iteração
Da Análise Inicial a Modelos de Alta Fidelidade:
Modelos de Análise Inicial (MAI)
Especificações funcionais, rascunhos, modelo de navegação escrito a mão, …
Modelos de Baixa Fidelidade (MBF)
Diagramas de Caso de Uso, esboços, modelo de navegação,…
Modelos de Média Fidelidade (MMF)
Diagrama de classe, protótipos, …
Modelos de Alta Fidelidade (MAF)
Modelos de tarefas, protótipos funcionais, …
11/29/2014
Algoritmos e Programação II – GUI
50
51. Iteração com 4 Fases
De modelos conceituais a lançamento de protótipos e testes
Análise Conceitual
Identifica usuários e necessidades do negócio
Projeto
Projeto de uma solução
Desenvolvimento
Prototipação da solução
Lançamento
Avaliação com usuários reais
11/29/2014
Algoritmos e Programação II – GUI
51
52. Análise Conceitual
Requisitos de usuários
Entrevistas (MAI)
Análise de desejos e necessidades (MAI)
Análise de tarefa em grupo (MBF)
…
Requisitos de negócio
Análise de requisitos e definição do negócio (MAI)
Funções básicas do negócio (MAI)
Modelo conceitual (MBF)
Análise de tarefas (MBF)
Guias de estilo de padrões de projeto (MMF)
Objetivos do projeto de usabilidade do sistema (MMF)
Necessidade de treinamento e documentação (MAF)
11/29/2014
Algoritmos e Programação II – GUI
52
53. Projeto
Diagramas de Casos de Uso (MAI)
Modelo de Navegação (MAI & MBF)
Modelos Estruturais (MMF & MAF)
Diagramas de classes
Diagramas de componentes
Modelo de Tarefas (MAF)
Diagramas de Sequência
Diagramas de Atividades
Diagramas de Máquinas de Estados
11/29/2014
Algoritmos e Programação II – GUI
53
54. Desenvolvimento
Rascunhos (mock-ups) (MAI)
Protótipos de baixa fidelidade (rascunhos - sketches)
Protótipos de média fidelidade (protótipos não funcionais)
Protótipos de alta fidelidade (protótipos funcionais)
Planos de avaliação
11/29/2014
Algoritmos e Programação II – GUI
54
55. Lançamento/Teste
Entrega do produto gerado para avaliação
Registros de testes
11/29/2014
Algoritmos e Programação II – GUI
55
56. Análise Conceitual
“If you do not understand who your users (or potential users) are, your product is doomed to failure”
Perfil do usuário
Uma descrição detalhada de seus atributos de usuários (cargo, experiência, nível educacional, tarefas chave, faixa etária, etc.)
Estas características tipicamente irão refletir uma faixa, não um atributo único (ex. idade 18-35)
11/29/2014
Algoritmos e Programação II – GUI
56
57. O que você chama de “usuários”?
Os indivíduos que irão interagir diretamente com o produto
Outros indivíduos:
O gerente do usuário direto
O administrador do sistema – quem configura o produto para o usuário direto
Pessoas que recebem artefatos ou informações do sistema
Pessoas que decidem se irão adquirir o seu software
Pessoas que usam produtos de competidores (você deseja convencê-los a usar o seu produto)
11/29/2014
Algoritmos e Programação II – GUI
57
58. Categorize os seus usuários…
Usuários principais
Aqueles indivíduos que trabalham regularmente ou diretamente com o produto
Usuários secundários
Irão utilizar o produto sem freqüência ou através de um intermediário
Usuários terciários
Aqueles que são afetados pelo sistema ou que decidem pela compra
11/29/2014
Algoritmos e Programação II – GUI
58
59. Perfil do Usuário
Você deverá determinar não apenas o nível típico ou mais frequente para cada característica, mas também a faixa e o percentual de usuários que estão em cada faixa
Algumas das características são mais importantes que outras com respeito ao produto e situação
Priorize as características e gaste a maioria dos esforços capturando informação para características chave do seu produto
11/29/2014
Algoritmos e Programação II – GUI
59
60. Características do Perfil do Usuário
Características demográficas
Idade, sexo, localização, status sócio-econômico
Experiência na ocupação
Título do cargo atual, tempo na empresa, tempo de experiência naquela posição, responsabilidades, trabalhos e cargos anteriores
Informação da empresa
Tamanho da empresa, indústria
Educação
Grau, especialização, cursos realizados
Experiência com computadores
Habilidades com o computador, anos de experiência
11/29/2014
Algoritmos e Programação II – GUI
60
61. Características do Perfil do Usuário
Experiência específica com o produto
Experiência com produtos de competidores ou outros produtos de domínio específico, tendências de uso
Tarefas
Tarefas principais, tarefas secundárias
Conhecimento no domínio
Entendimento do usuário na área do produto
Tecnologia disponível
Hardware (tamanho do monitor, velocidade do computador, etc.), software, outras ferramentas tipicamente usadas
11/29/2014
Algoritmos e Programação II – GUI
61
62. Características do Perfil do Usuário
Atitudes e valores
Preferências por produtos, medo de tecnologia, etc.
Estilo de aprendizagem
Aprendiz visual, aprendiz auditivo, etc.
Crítica a erros
Em geral, as possíveis conseqüências de erros do usuário
11/29/2014
Algoritmos e Programação II – GUI
62
63. Exemplo de Perfil do Usuário
Agente de Viagens (principal)
Idade:
25-40 anos (média: 32 anos)
Sexo:
80% do sexo feminino
Cargos:
Agente de viagens, especialista em viagens
Experiência:
0-10 anos (típico: 3 anos)
Carga Horária:
40 horas por semana; dias e horários depende da empresa
Educação:
Segundo grau ou bacharelado (típico: na faculdade)
Localização:
Qualquer lugar no Brasil (predominantemente sudeste)
Renda:
R$12.000-R$25.000/ano; depende do nível de experiência e localização (Média: R$20.000/ano)
Tecnologia:
Alguma experiência com computadores; conexão a Internet de alta velocidade
Deficiências:
Sem limitações específicas
Família
Solteiro ou casado (predominantemente casados com 1 filho)
11/29/2014
Algoritmos e Programação II – GUI
63
64. 1ª Iteração – Projeto
Modelagem de casos de uso
Um importante objetivo da modelagem de requisitos é obter um entendimento dos problemas de negócio que o sistema irá atingir de maneira a entender os seus requisitos de uso
Modelos de casos de uso focam exatamente neste ponto
Diagramas de Fluxo de Interface
Mostram os relacionamentos entre os componentes da interface do usuário, telas e relatórios, que compõem uma aplicação
Permite modelar os relacionamento de alto nível entre os principais elementos da interface do usuário
11/29/2014
Algoritmos e Programação II – GUI
64
65. Rascunho de Casos de Uso
11/29/2014
Algoritmos e Programação II – GUI
65
66. Diagrama de Fluxo de Interface
11/29/2014
Algoritmos e Programação II – GUI
66
67. Diagrama de Fluxo de Interface
11/29/2014
Algoritmos e Programação II – GUI
67
68. Diagrama de Fluxo de Interface
11/29/2014
Algoritmos e Programação II – GUI
68
69. 1ª Iteração – Desenvolvimento
Protótipo Essencial da Interface do Usuário (IU)
Modelo ou protótipo de baixa fidelidade da IU para o sistema
Representa as idéias gerais por trás da IU e não detalhes exatos
Representa requisitos da IU de uma maneira independente de tecnologia, assim como a modelagem essencial de casos de uso faz para requisitos de comportamento
É efetivamente o estado inicial – o ponto inicial – da prototipação da IU do sistema
Modela requisitos de IU, requisitos evoluem através da análise e projeto até resultar na IU final do sistema
11/29/2014
Algoritmos e Programação II – GUI
69
78. Lançamento/Testes
Avaliação junto ao cliente dos resultados alcançados até o momento
Sugestões e críticas devem ser anotadas e documentadas para que possam guiar correções a serem realizadas na próxima iteração do ciclo de desenvolvimento
11/29/2014
Algoritmos e Programação II – GUI
78
79. Interface Gráfica do Usuário (Graphical User Interface – GUI )
Algoritmos e Programação II - Fábio M. Pereira