Upload
fabio-moura-pereira
View
188
Download
4
Embed Size (px)
DESCRIPTION
Aula Algoritmos e Programação II - Interface Gráfica do Usuário
Citation preview
Interface Gráfica do Usuário
(Graphical User Interface – GUI )
Algoritmos e Programação II - Fábio M. Pereira
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
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
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
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
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
Interface Gráfica do Usuário
A Importância do Bom Design
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
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
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
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
Casos Verídicos
11/29/2014 Algoritmos e Programação II – GUI 12
Interface Gráfica do Usuário
Benefícios do Bom Design
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
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
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
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
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
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
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
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
Interface Gráfica do Usuário
Histórico – Introdução da GUI
Histórico – GUI
Histórico – GUI
11/29/2014 Algoritmos e Programação II – GUI 24
Histórico – GUI
11/29/2014 Algoritmos e Programação II – GUI 25
Interface Gráfica do Usuário
Histórico – O Avanço da Web – Design de Telas
Histórico – O Avanço da Web
11/29/2014 Algoritmos e Programação II – GUI 27
Histórico – O Avanço da Web
11/29/2014 Algoritmos e Programação II – GUI 28
Histórico – O Avanço da Web
11/29/2014 Algoritmos e Programação II – GUI 29
Histórico – O Avanço da Web
11/29/2014 Algoritmos e Programação II – GUI 30
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
Tela Típica da Década de 70
11/29/2014 Algoritmos e Programação II – GUI 32
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
Tela Típica da Década de 80
11/29/2014 Algoritmos e Programação II – GUI 34
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
Tela Típica da Década de 90
11/29/2014 Algoritmos e Programação II – GUI 36
Tela Típica dos anos 2000
11/29/2014 Algoritmos e Programação II – GUI 37
2010
11/29/2014 Algoritmos e Programação II – GUI 38
Interface Gráfica do Usuário
Objetivos
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
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
Interface Gráfica do Usuário
Processo de Desenvolvimento
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
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
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
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
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
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
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)
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
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
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
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
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
Lançamento/Teste
Entrega do produto gerado para avaliação
Registros de testes
11/29/2014 Algoritmos e Programação II – GUI 55
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
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
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
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
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
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
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
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
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
Rascunho de Casos de Uso
11/29/2014 Algoritmos e Programação II – GUI 65
Diagrama de Fluxo de Interface
11/29/2014 Algoritmos e Programação II – GUI 66
Diagrama de Fluxo de Interface
11/29/2014 Algoritmos e Programação II – GUI 67
Diagrama de Fluxo de Interface
11/29/2014 Algoritmos e Programação II – GUI 68
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
11/29/2014 Algoritmos e Programação II – GUI 70
Essential User Interface Prototype
Essential User Interface Prototype
11/29/2014 Algoritmos e Programação II – GUI 71
Sketches
11/29/2014 Algoritmos e Programação II – GUI 72
Sketches
11/29/2014 Algoritmos e Programação II – GUI 73
Mockups
11/29/2014 Algoritmos e Programação II – GUI 74
Mockups
11/29/2014 Algoritmos e Programação II – GUI 75
Mockups
11/29/2014 Algoritmos e Programação II – GUI 76
Protótipo Não Funcional
11/29/2014 Algoritmos e Programação II – GUI 77
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
Interface Gráfica do Usuário
(Graphical User Interface – GUI )
Algoritmos e Programação II - Fábio M. Pereira