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 Algoritmos e Programação II – GUI 3


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



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



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



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?



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



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



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


Casos Verídicos



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



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%



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



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



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



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


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



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”



Histórico – Introdução da GUI

Histórico – GUI


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

Histórico – O Avanço da Web


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


Tela Típica da Década de 70



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



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.


Tela Típica dos anos 2000


2010



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


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



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


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á


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


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



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



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


Exemplo – Processo AWE


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, …


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


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)


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


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


Lançamento/Teste

Entrega do produto gerado para avaliação

Registros de testes


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)


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)


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


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


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



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



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


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)


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


Rascunho de Casos de Uso


Diagrama de Fluxo de Interface


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



Essential User Interface Prototype

Sketches


Mockups


Protótipo Não Funcional


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



(Graphical User Interface – GUI )

Algoritmos e Programação II - Fábio M. Pereira

aula interface gráfica do usuário

Education