Aula Interface Gráfica do Usuário

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
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
4

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
5

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
6

Interface Gráfica do Usuário
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
8

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
9

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

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
11

Casos Verídicos
11/29/2014
12

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
14

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
15

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
16

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
17

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
18

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
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
20

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
21

Histórico – Introdução da GUI

Histórico – GUI
11/29/2014
24

Histórico – GUI
11/29/2014
25

Histórico – O Avanço da Web – Design de Telas

Histórico – O Avanço da Web
11/29/2014
27

11/29/2014
28

11/29/2014
29

11/29/2014
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
31

Tela Típica da Década de 70
11/29/2014
32

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
33

11/29/2014
34

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
35

11/29/2014
36

Tela Típica dos anos 2000
11/29/2014
37

2010
11/29/2014
38

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
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
41

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
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
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
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
46

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
47

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
48

Exemplo – Processo AWE
11/29/2014
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
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
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
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
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
54

Lançamento/Teste
Entrega do produto gerado para avaliação
Registros de testes
11/29/2014
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
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
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
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
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
60

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
61

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
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
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
64

Rascunho de Casos de Uso
11/29/2014
65

Diagrama de Fluxo de Interface
11/29/2014
66

11/29/2014
67

11/29/2014
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
69

11/29/2014
70
Essential User Interface Prototype

Essential User Interface Prototype
11/29/2014
71

Sketches
11/29/2014
72

Sketches
11/29/2014
73

Mockups
11/29/2014
74

Mockups
11/29/2014
75

Mockups
11/29/2014
76

Protótipo Não Funcional
11/29/2014
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
78

Aula Interface Gráfica do Usuário

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Aula Interface Gráfica do Usuário

Semelhante a Aula Interface Gráfica do Usuário (20)

Mais de Fabio Moura Pereira

Mais de Fabio Moura Pereira (15)

Último

Último (20)

Aula Interface Gráfica do Usuário