Projeto Interface Usuario

Projeto de Interface com Usuário

Prof. Tom C. Bonfim


• Interação Humano-Computador é uma disciplina que se preocupa com o projeto, avaliação e implementação de sistemas de computadores para o uso humano”.

• A IHC é uma área multidisciplinar que não está voltada somente para

o estudo de computação ou do ser humano, mas que envolve ciência da computação e psicologia, dentre outras, e que está voltada para a

aplicação do conhecimento dessa série de áreas para a obtenção de interfaces “amigáveis” possibilitando a comunicação do homem com o objeto de estudo da computação: o computador. Em outras palavras, IHC deve oferecer o meio mais adequado para que o usuário consiga maximizar sua experiência na interação com o computador, apesar de suas limitações e/ou restrições de tecnologia existentes.

• Encontram-se problemas de interface na maioria das aplicações

atualmente, apesar de os projetistas investirem horas com a mesma, em virtude da não preocupação de quem as construiu com os fatores humanos: a percepção visual, a psicologia da leitura e o modelo mental do usuário.

₂


Diferenciando interação e interface

Há dois termos que são usados indistintamente, mas que são diferentes: a Interação e a Interface. O campo de atuação da interação em IHC é tudo que ocorre durante a comunicação do homem (a realização de tarefas) e o computador. Já o conceito de

interface é o componente (software) que mapeia as ações do usuário quando este solicita certo processamento ao sistema, através de uma aplicação e apresentação dos resultados pelo mesmo. Assim, a

interação envolve, além da interface, o ambiente físico onde o trabalho é desenvolvido.

3


4


• Usabilidade: Propriedade de um sistema interativo que permite aos usuários interagirem sem dificuldades de aprender ou lembrar como atingir os objetivos que têm. • Comunicabilidade: Propriedade de transmitir ao usuário de forma eficaz e eficiente as intenções e princípios de interação que guiaram o seu design.

• Acessibilidade: É a condição de acesso por parte de indivíduos portadores de necessidades especiais a locais, serviços, informações, equipamentos disponíveis a todos os indivíduos. Acessibilidade web

significa permitir pessoas com deficiências possam perceber, entender, navegar e interagir com a web, e contribuir com a web. (Beneficia outros como pessoas perdendo algumas de suas habilidades, devido à

idade).

5


6


7


8


9


10


11


12


13


14


15


16


17


Usabilidade e a norma NBR ISSO 9241-11

A norma NBR ISO 9241 sobre “Requisitos ergonômicos para trabalho de escritórios

com computadores” consiste de dezessete (17) partes que abordam diferentes aspectos referentes ao ambiente de trabalho e a práticas do projeto de diálogo utilizado. A parte onze (11) desta norma, “Orientações sobre usabilidade”, define usabilidade como sendo: “medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com eficácia, eficiência e satisfação em um contexto específico de uso ”, onde:

a) Eficácia é definida como a acurácia e completude com as quais usuários

alcançam objetivos específicos;

b) Eficiência como os recursos gastos em relação à acurácia e abrangência

com as quais os usuários atingem os objetivos;

c) Satisfação como a ausência do desconforto e atitudes positivas para com

o uso de um produto; d) Contexto de uso sendo usuários, tarefas, equipamentos (hardware, software e materiais), e os ambientes físico e social no qual o produto é usado.

18


Usabilidade e a norma NBR ISO 9241-11

Esta definição enfatiza que a usabilidade de um produto não é medida apenas pelas características do próprio produto, mas também pelas circunstâncias específicas nas quais um produto é utilizado.

Embora a norma NBR 9241-11 aplica-se ao trabalho de escritório com computadores, ela também pode ser aplicada em outras situações onde o usuário está interagindo com um produto para alcançar seus objetivos, como exemplo, em dispositivos computacionais móveis.

A norma também explica como identificar a informação necessária a ser considerada na especificação ou avaliação de usabilidade de um computador em termos de medidas de desempenho e satisfação do usuário. Orientações sobre como descrever

explicitamente o contexto de uso do produto e as medidas relevantes de usabilidade

também são dadas pela norma.

19


Usabilidade e a norma NBR ISO 9126-1

A norma ISO/IEC 9126-1,” é uma norma para avaliação de qualidade de produto de software. Esta norma traz o conceito de “qualidade em uso” que é definida como “a capacidade do produto de software de permitir a usuários específicos atingir metas especificadas com eficácia, produtividade, segurança e satisfação em um contexto de uso especificado”.

Esta definição é similar à definição de usabilidade da NBR 9241-11, e também faz referência ao contexto de uso, ressaltando que a qualidade em uso não é uma característica intrínseca do produto. A qualidade em uso é a visão do usuário sobre a qualidade de um sistema e é medida em termos de resultados de utilização do software e não em função de suas propriedades.

20


Engenharia Cognitiva

A Engenharia Cognitiva baseia-se no pensamento, na forma que o usuário irá interpretar e interagir com um sistema. Engenharia Cognitiva é uma ciência cognitiva aplicada, que busca aplicar o que se sabe desta ciência, no design e na construção de artefatos computacionais com objetivos de entender questões envolvidas no uso de computadores, métodos para tomar decisões mais corretas quanto ao design etc.

Inicialmente o Designer cria o seu modelo mental do sistema, chamado “modelo de design”, fazendo a seguir a implementação formando a imagem do sistema. Então o usuário interage com esta imagem e cria seu próprio modelo mental da aplicação chamado de “modelo do usuário”, pelo qual formulará suas ações e objetivos.

Partindo do princípio da Engenharia Cognitiva, o objetivo do Designer é desenvolver uma aplicação em que o usuário crie um modelo mental parecido com o qual foi

projetado pelo designer.

21



22



23



24



25



26



27



28



29


Engenharia Semiótica

Definição de Semiótica:

As abordagens semióticas têm como base teórica a semiótica, disciplina que estuda os signos, os sistemas semióticos e de comunicação, bem como os processos envolvidos na produção e interpretação de signos. Um signo é algo que representa alguma coisa para alguém.

Definição de Signo:

Por exemplo, tanto a palavra em português, quanto uma fotografia de um cão representam o animal cachorro, e assim são signos de cachorro para falantes da língua portuguesa.

Como funciona:

Para que a comunicação entre duas pessoas aconteça, é preciso que o emissor da mensagem a expresse em um código que tanto ele, quanto o receptor conheçam.

Assim como nos comunicamos através da língua portuguesa a interface gráfica é a forma de comunicação do usuário-sistema, através de sons, símbolos, ícones, etc.

30



31



Um outro exemplo de aplicação de signos nas interfaces:

Temos duas janelas, a da esquerda é muito mais fácil, pois deixa claro que pode escolher uma das informações, um usuário novato ficaria em dúvida em marcar os três campos. O programador tem que deixar claro que a pesquisa pode ser efetuada em qualquer campo.

32



Mais um exemplo:

Ele tentou passar através de botões em combobox em texto, que ele deve escolher alguma coisa, clicar em alguma coisa, através dos signos.

33



Um exemplo fácil de entender pode ser visto abaixo:

34


Avaliação de IHC

35


Avaliação de IHC

36


Avaliação de IHC

37


Avaliação de IHC

38


Avaliação de IHC

39


Avaliação de IHC

40


Avaliação de IHC

41


Avaliação de IHC

42


Avaliação de IHC

43


Avaliação de IHC

44


Projeto de Interação com Usuário

Um termo muito utilizado atualmente entre os webdesigners é o chamado “design de interação”. O termo design significa projeto, que nada tem a ver com desenho, arte ou decoração. Portanto, podemos dizer que o termo design de interação significa projetar produtos ou objetos interativos? Minha resposta é não. Vou explicar. Todo objeto ou produto criado sofre uma interação de pessoas ou de outros objetos.

Por exemplo: uma cadeira foi criada para se sentar, não é verdade? Essa é a principal interação do ser humano com esse objeto. Mas será que é só isso mesmo? Quando alguém quer trocar uma lâmpada, e não tem uma escada próxima, como ele procede? Isso mesmo, ela sobe na cadeira. Mas essa não foi a ação pensada por quem projetou

esse objeto. Portanto, o designer de interação não cria o objeto em si, mas cria as condições necessárias para que ocorra a interação sobre o objeto desenvolvido.

45



46



47



48



49



50



51



52



53



54



55



56



57



58



59


Projeto de Interação com Usuário - Guias de Estilo de Interação

Definição de Guia de Estilo

Documento que registra os objetos de padronização e os vários tipos de consistência focando a usabilidade.

Os seguintes passos são recomendados na criação de um Guia de Estilo.

1. Definição das pessoas que vão desenvolver o Guia. Deve incluir pessoas dos vários perfis de profissionais. 2. Definição da plataforma para qual o Guia vai ser desenvolvido.

3. Confecção da estrutura do documento.

4. Escolha das diretrizes que serão colocadas.

5. Definição de requisitos que o Guia de Estilo deve satisfazer. Definição dos objetos de

interação que o Guia de Estilo deve abordar.

6. Confecção dos gabaritos (templates) de telas e dos exemplos dos objetos de

interação.

7. Montagem do documento.

60



Janelas Windows : Uma janela é uma área da tela onde são apresentados diferentes tipos de informação onde o usuário pode realizar entradas e comandos necessários para a execução de seus objetivos.

61



Caixa de Dialogo : Caixas de Diálogo promovem uma troca de informações ou diálogo entre o usuário e a aplicação.

62



Fichário (Tab) : O fichário são caixas de diálogo construídas a partir da metáfora de um divisor de arquivo de escritório.

63



Caixas de Mensagens (Message Box): A caixa de mensagem é uma caixa de diálogo que apresenta informações sobre uma situação ou condição particular. Mensagens são uma parte importante da interface, quando muito genéricas ou pobres de conteúdo frustram o usuário.

64



Formulário (Form): Formulário é uma caixa de diálogo apropriada para tarefas onde são requeridas entradas ou modificações de um grande número de dados. Seu uso mais adequado ocorre em entradas de dados através do uso de documentos em papel como fonte de origem.

65



Painel de Menu: O painel de menu é um objeto destinado a seleção de opções de comandos, caixas de diálogo e outros painéis.

66



Barra de Ferramentas (Tool Bar): A barra de ferramentas é um painel não modal que contém conjuntos de controles projetados para fornecer o acesso rápido a comandos específicos.

67



Barra de Menu (MenuBar): A barra de menu é um painel de menu horizontal apresentado abaixo da barra de título. A barra de menu inclui um conjunto de entradas chamadas de títulos de painéis menu.

Menu Embricado (Hypertexto) : O menu embricado permite a construção de diálogos do tipo hipertexto, destinado a navegação entre páginas de textos inter-relacionados

68



Lista de Seleção: A lista de seleção apresenta um conjunto de valores para entrada de dados e apresentação que permitem ao usuário a possibilidade de fazer uma ou mais seleções. Uma lista pode ser classificada como textual se as opções são textos, gráfica se as opções são ícones e mista, quando composta por ambos.

69



Botões de Rádio (Radio Button): Os botões de rádio permitem ao usuário fazer uma escolha dentro de um grupo de opções. As opções de um mesmo grupo são mutuamente exclusivas.

70



Caixas de Atribuição (Check box) : A caixa de atribuição permite ao usuário fazer uma escolha dentro de um grupo de opções. As opções de um mesmo grupo não são mutuamente exclusivas.

71



Botões de Comando (Command Button) : Controle utilizado para disparar uma ação sendo o resultado descrito pelo rótulo. Normalmente de formato retangular com um rótulo que pode ser textual, gráfico ou misto.

72



Botão de Variação (Spin Buttton) : É um objeto que representa um tipo especial de campo de seleção utilizado na aplicaçãopelo usuário. A escolha é efetuada em um conjunto de valores dispostos em estrutura delista utilizando-se uma flecha de decremento ou incremento vertical e/ou horizontal.

73



Campo de Dado (Data Field) : Permite ao usuário introduzir e manipular caracteres na forma textual através de recursos de edição uni-linear.

Campo de Texto (Data Text) : Permite ao usuário introduzir e manipular caracteres na forma textual através de recursos de edição multi-linear

74



Tabelas de Dados (Table) : Tabela é um arranjo de duas ou mais listas inter-relacionadas.

75



Mostradores Analógicos : É um objeto circular graduado numericamente através de um limite superior e outro inferior com intervalos regulares, munido de uma agulha que aponta o valor dentro do intervalo.

76



Mostradores Digitais : É um objeto usado para a apresentação de dados numéricos, dinâmicos ou não, através de dígitos.

Indicador de Progressão (Progress Indicators): Caixa de diálogo utilizada para informar ao usuário que um tratamento demorado está em curso de progressão.

77



Bolha de Ajuda (Toolip) : O bolha de informação é uma pequena janela local, com um texto descritivo, apresentada quando o cursor é movido sobre um objeto de controle.

Rótulo (Label) : São elementos identificadores como títulos de janelas, títulos de caixas de diálogo, títulos de listas, títulos de tabelas, rótulos de campo, rótulos de botões e cabeçalhos.

78



Escala ( Slider ) : Objeto de interação onde o usuário introduz um valor numérico através do ajuste de um indicador em uma posição específica de uma linha graduada.

79



Caixa de Agrupamento (Group Boxes) : Separador retangular destinado a marcar um agrupamento dentro da estrutura informacional de um objeto interativo por razões semânticas ou ergonômicas de apresentação. Deve ser acompanhado do título explicativo do grupo.

80



81



82


Projeto de Interação com Usuário – Diretrizes / Padrões

"Diretrizes de Projeto" e "Guias de Estilo" visam padronizar decisões de projeto com o intuito de tornar projetos de interfaces de usuário mais consistentes e, conseqüentemente, contribuir para a melhoria do seu grau de usabilidade. Alguns autores usam estes termos como sinônimos, outros fazem distinções em função da granularidade dos detalhes padronizados por documentos dessa ordem.

Padrões de projeto se distinguem de diretrizes de projeto. Padrões de projeto descrevem soluções recorrentes para problemas que ocorrem em determinados contextos, documentado, assim, experiências de sucesso de bons projetistas que podem fundamentar decisões de projeto, enquanto que os guias são mais prescritivos, pois fixam detalhes a serem adotados em projetos específicos.

83


Processo de Design em IHC

O QUE É DESIGN ? Design é a atividade intelectual de conceber e descrever um produto a partir dos requisitos de seus potenciais usuários. Esta atividade requer técnicas e ferramentas adequadas, aliadas à criatividade, ao talento e à experiência do designer.

O produto concebido em uma atividade de design precisa ser apresentado através de um protótipo e/ou especificação. A prototipação consiste na descrição do que foi concebido, com o objetivo de fazer uma avaliação. A especificação consiste na descrição abstrata, rigorosa, idealmente correta e completa do produto, utilizando uma notação ou linguagem adequadas.

A especificação e a prototipação permitem visões e formas de avaliação complementares do produto concebido. A especificação permite uma descrição e avaliação a partir de técnicas associadas às notações utilizadas. Já a prototipação permite uma descrição e avaliação mais concreta do produto no contexto da utilização.

84



O QUE É PROCESSO DE DESIGN ? É a elaboração de um conjunto de ações que orientam o processo criativo na elaboração de um projeto. As ações são divididas em etapas. A estas etapas comuns dá-se o nome de macroestrutura. Dentro da macroestrutura existem etapas imprevisíveis e particulares de cada projeto.

Macroestrutura:

Corresponde às 3 etapas principais:

•Estruturação do problema. •Projecto e experimentação. •Realização do projecto (produção).

Microestrutura:

São sub-etapas existentes na macroestrutura, de acordo com a Natureza do projecto. (Por exemplo: conceber um produto software é diferente de conceber um automóvel).

85



FASE A – ESTRUTURAÇÃO DO PROBLEMA •Briefing: Primeira reunião com o cliente, onde se obtêm as primeiras linhas de orientação do projeto.

•Definição do problema: Qual o objetivo? Qual a mensagem? A quem se dirige? (público alvo).

•Recolha de dados: Nesta fase, é feita uma comparação entre os produtos já existentes no mercado, dando ao designer a noção daquilo que foi produzido na mesma época. A

este processo dá-se o nome de Sincronia. É também feita uma análise da fisionomia dos objetos do passado, com a mesma função. Assim o designer fica com informações sobre o

seu percurso histórico e quais os motivos que precedem a sua evolução (Diacronia).

86



FASE A – ESTRUTURAÇÃO DO PROBLEMA (Continuação) •Análise dos limites:

•Condicionalismos técnicos

• Condicionalismos comerciais

• Condicionalismos Socioecológicos

• Qual o tempo de duração do objecto? Quais as normas (nos tamanhos,

cores)a que deve obedecer? A identificação dos limites tornam-se elementos importantes para o desenvolvimento do objeto.

87



FASE B – PROJETO E EXPERIMENTAÇÃO •Criatividade: Nesta fase é importante registra o maior número de idéias. A criatividade resulta da síntese dos elementos recolhidos nas fases anteriores.

•Brainstorming: É um jogo de idéias, num ambiente propício para que elas se manifestem, tendo como ponto de partida qualquer tópico sugerido acerca do problema.

•Análise dos meios técnicos e materiais disponíveis.

•Representação e experimentação: Pode ser feito através de modelos.

•Testes e Avaliação:

•Avaliação ao longo do projeto. •Avaliação final: estética, funcionalidade, custos.

•Escolha de alternativas: Devemos considerar várias opções, em vez de nos prendermos à primeira que nos surge. No design é importante a inovação.

88



FASE C – REALIZAÇÃO DO PROJETO

•Criação do protótipo: Serve para visualizar em três dimensões o projeto, facilitando a apresentação da idéia final ao cliente. Por vezes é tão perfeito que poderá confundir-se com o original. É aqui que se procuram as falhas e se fazem as respectivas correções antes do objeto proceder para a produção.

•Pré-série: Ensaio da produção.

•Produção (realização).

89



90

Molto più che documenti.

Projeto Interface Usuario

Caricato da

Informazioni sul documento

Data di caricamento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Descrizione:

Copyright:

Formati disponibili

Projeto Interface Usuario

Caricato da

Descrizione:

Copyright:

Formati disponibili

Titoli correlati

Interessi correlati

Documenti simili a Projeto Interface Usuario

Popolare in Semiotics