Projeto Interface Usuario

Projeto de Interface com Usurio
Prof. Tom C. Bonfim

Interao Humano-Computador uma disciplina que se preocupa com o projeto, avaliao e implementao de sistemas de computadores para o uso humano. A IHC uma rea multidisciplinar que no est voltada somente para o estudo de computao ou do ser humano, mas que envolve cincia da computao e psicologia, dentre outras, e que est voltada para a aplicao do conhecimento dessa srie de reas para a obteno de interfaces amigveis possibilitando a comunicao do homem com o objeto de estudo da computao: o computador. Em outras palavras, IHC deve oferecer o meio mais adequado para que o usurio consiga maximizar sua experincia na interao com o computador, apesar de suas limitaes e/ou restries de tecnologia existentes. Encontram-se problemas de interface na maioria das aplicaes atualmente, apesar de os projetistas investirem horas com a mesma, em virtude da no preocupao de quem as construiu com os fatores humanos: a percepo visual, a psicologia da leitura e o modelo mental do usurio.

Diferenciando interao e interface
H dois termos que so usados indistintamente, mas que so diferentes: a Interao e a Interface. O campo de atuao da interao em IHC tudo que ocorre durante a comunicao do homem (a realizao de tarefas) e o computador. J o conceito de interface o componente (software) que mapeia as aes do usurio quando este solicita certo processamento ao sistema, atravs de uma aplicao e apresentao dos resultados pelo mesmo. Assim, a interao envolve, alm da interface, o ambiente fsico onde o trabalho desenvolvido.
Usabilidade: Propriedade de um sistema interativo que permite aos usurios interagirem sem dificuldades de aprender ou lembrar como atingir os objetivos que tm. Comunicabilidade: Propriedade de transmitir ao usurio de forma eficaz e eficiente as intenes e princpios de interao que guiaram o seu design.
Acessibilidade: a condio de acesso por parte de indivduos portadores de necessidades especiais a locais, servios, informaes, equipamentos disponveis a todos os indivduos. Acessibilidade web significa permitir pessoas com deficincias 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
10
11
12
13
14
15
16
17

Usabilidade e a norma NBR ISSO 9241-11 A norma NBR ISO 9241 sobre Requisitos ergonmicos para trabalho de escritrios com computadores consiste de dezessete (17) partes que abordam diferentes aspectos referentes ao ambiente de trabalho e a prticas do projeto de dilogo utilizado. A parte onze (11) desta norma, Orientaes sobre usabilidade, define usabilidade como sendo: medida na qual um produto pode ser usado por usurios especficos para alcanar objetivos especficos com eficcia, eficincia e satisfao em um contexto especfico de uso, onde: a) Eficcia definida como a acurcia e completude com as quais usurios alcanam objetivos especficos; b) Eficincia como os recursos gastos em relao acurcia e abrangncia com as quais os usurios atingem os objetivos; c) Satisfao como a ausncia do desconforto e atitudes positivas para com o uso de um produto; d) Contexto de uso sendo usurios, tarefas, equipamentos (hardware, software e materiais), e os ambientes fsico e social no qual o produto usado.
18

Usabilidade e a norma NBR ISO 9241-11 Esta definio enfatiza que a usabilidade de um produto no medida apenas pelas caractersticas do prprio produto, mas tambm pelas circunstncias especficas nas quais um produto utilizado. Embora a norma NBR 9241-11 aplica-se ao trabalho de escritrio com computadores, ela tambm pode ser aplicada em outras situaes onde o usurio est interagindo com um produto para alcanar seus objetivos, como exemplo, em dispositivos computacionais mveis. A norma tambm explica como identificar a informao necessria a ser considerada na especificao ou avaliao de usabilidade de um computador em termos de medidas de desempenho e satisfao do usurio. Orientaes sobre como descrever explicitamente o contexto de uso do produto e as medidas relevantes de usabilidade tambm so dadas pela norma.
19

Usabilidade e a norma NBR ISO 9126-1 A norma ISO/IEC 9126-1, uma norma para avaliao 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 usurios especficos atingir metas especificadas com eficcia, produtividade, segurana e satisfao em um contexto de uso especificado. Esta definio similar definio de usabilidade da NBR 9241-11, e tambm faz referncia ao contexto de uso, ressaltando que a qualidade em uso no uma caracterstica intrnseca do produto. A qualidade em uso a viso do usurio sobre a qualidade de um sistema e medida em termos de resultados de utilizao do software e no em funo de suas propriedades.
20

Engenharia Cognitiva
A Engenharia Cognitiva baseia-se no pensamento, na forma que o usurio ir interpretar e interagir com um sistema. Engenharia Cognitiva uma cincia cognitiva aplicada, que busca aplicar o que se sabe desta cincia, no design e na construo de artefatos computacionais com objetivos de entender questes envolvidas no uso de computadores, mtodos para tomar decises mais corretas quanto ao design etc. Inicialmente o Designer cria o seu modelo mental do sistema, chamado modelo de design, fazendo a seguir a implementao formando a imagem do sistema. Ento o usurio interage com esta imagem e cria seu prprio modelo mental da aplicao chamado de modelo do usurio, pelo qual formular suas aes e objetivos. Partindo do princpio da Engenharia Cognitiva, o objetivo do Designer desenvolver uma aplicao em que o usurio crie um modelo mental parecido com o qual foi projetado pelo designer.
21

22

23

24

25

26

27

28

29

Engenharia Semitica
Definio de Semitica: As abordagens semiticas tm como base terica a semitica, disciplina que estuda os signos, os sistemas semiticos e de comunicao, bem como os processos envolvidos na produo e interpretao de signos. Um signo algo que representa alguma coisa para algum. Definio de Signo: Por exemplo, tanto a palavra em portugus, quanto uma fotografia de um co representam o animal cachorro, e assim so signos de cachorro para falantes da lngua portuguesa.
Como funciona: Para que a comunicao entre duas pessoas acontea, preciso que o emissor da mensagem a expresse em um cdigo que tanto ele, quanto o receptor conheam. Assim como nos comunicamos atravs da lngua portuguesa a interface grfica a forma de comunicao do usurio-sistema, atravs de sons, smbolos, cones, etc.
30

Engenharia Semitica
31

Engenharia Semitica
Um outro exemplo de aplicao de signos nas interfaces:
Temos duas janelas, a da esquerda muito mais fcil, pois deixa claro que pode escolher uma das informaes, um usurio novato ficaria em dvida em marcar os trs campos. O programador tem que deixar claro que a pesquisa pode ser efetuada em qualquer campo.
32

Engenharia Semitica
Mais um exemplo:
Ele tentou passar atravs de botes em combobox em texto, que ele deve escolher alguma coisa, clicar em alguma coisa, atravs dos signos.
33

Engenharia Semitica
Um exemplo fcil de entender pode ser visto abaixo:
34

Avaliao de IHC
35

Avaliao de IHC
36

Avaliao de IHC
37

Avaliao de IHC
38

Avaliao de IHC
39

Avaliao de IHC
40

Avaliao de IHC
41

Avaliao de IHC
42

Avaliao de IHC
43

Avaliao de IHC
44

Projeto de Interao com Usurio
Um termo muito utilizado atualmente entre os webdesigners o chamado design de interao. O termo design significa projeto, que nada tem a ver com desenho, arte ou decorao. Portanto, podemos dizer que o termo design de interao significa projetar produtos ou objetos interativos? Minha resposta no. Vou explicar. Todo objeto ou produto criado sofre uma interao de pessoas ou de outros objetos. Por exemplo: uma cadeira foi criada para se sentar, no verdade? Essa a principal interao do ser humano com esse objeto. Mas ser que s isso mesmo? Quando algum quer trocar uma lmpada, e no tem uma escada prxima, como ele procede? Isso mesmo, ela sobe na cadeira. Mas essa no foi a ao pensada por quem projetou esse objeto. Portanto, o designer de interao no cria o objeto em si, mas cria as condies necessrias para que ocorra a interao sobre o objeto desenvolvido.
45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

Projeto de Interao com Usurio - Guias de Estilo de Interao Definio de Guia de Estilo Documento que registra os objetos de padronizao e os vrios tipos de consistncia focando a usabilidade. Os seguintes passos so recomendados na criao de um Guia de Estilo. 1. Definio das pessoas que vo desenvolver o Guia. Deve incluir pessoas dos vrios perfis de profissionais. 2. Definio da plataforma para qual o Guia vai ser desenvolvido. 3. Confeco da estrutura do documento. 4. Escolha das diretrizes que sero colocadas. 5. Definio de requisitos que o Guia de Estilo deve satisfazer. Definio dos objetos de interao que o Guia de Estilo deve abordar. 6. Confeco dos gabaritos (templates) de telas e dos exemplos dos objetos de interao. 7. Montagem do documento.
60

Projeto de Interao com Usurio - Guias de Estilo de Interao Janelas Windows : Uma janela uma rea da tela onde so apresentados diferentes tipos de informao onde o usurio pode realizar entradas e comandos necessrios para a execuo de seus objetivos.
61

Projeto de Interao com Usurio - Guias de Estilo de Interao Caixa de Dialogo : Caixas de Dilogo promovem uma troca de informaes ou dilogo entre o usurio e a aplicao.
62

Projeto de Interao com Usurio - Guias de Estilo de Interao Fichrio (Tab) : O fichrio so caixas de dilogo construdas a partir da metfora de um divisor de arquivo de escritrio.
63

Projeto de Interao com Usurio - Guias de Estilo de Interao Caixas de Mensagens (Message Box): A caixa de mensagem uma caixa de dilogo que apresenta informaes sobre uma situao ou condio particular. Mensagens so uma parte importante da interface, quando muito genricas ou pobres de contedo frustram o usurio.
64

Projeto de Interao com Usurio - Guias de Estilo de Interao Formulrio (Form): Formulrio uma caixa de dilogo apropriada para tarefas onde so requeridas entradas ou modificaes de um grande nmero de dados. Seu uso mais adequado ocorre em entradas de dados atravs do uso de documentos em papel como fonte de origem.
65

Projeto de Interao com Usurio - Guias de Estilo de Interao Painel de Menu: O painel de menu um objeto destinado a seleo de opes de comandos, caixas de dilogo e outros painis.
66

Projeto de Interao com Usurio - Guias de Estilo de Interao Barra de Ferramentas (Tool Bar): A barra de ferramentas um painel no modal que contm conjuntos de controles projetados para fornecer o acesso rpido a comandos especficos.
67

Projeto de Interao com Usurio - Guias de Estilo de Interao Barra de Menu (MenuBar): A barra de menu um painel de menu horizontal apresentado abaixo da barra de ttulo. A barra de menu inclui um conjunto de entradas chamadas de ttulos de painis menu.
Menu Embricado (Hypertexto) : O menu embricado permite a construo de dilogos do tipo hipertexto, destinado a navegao entre pginas de textos inter-relacionados..
68

Projeto de Interao com Usurio - Guias de Estilo de Interao Lista de Seleo: A lista de seleo apresenta um conjunto de valores para entrada de dados e apresentao que permitem ao usurio a possibilidade de fazer uma ou mais selees. Uma lista pode ser classificada como textual se as opes so textos, grfica se as opes so cones e mista, quando composta por ambos.
69

Projeto de Interao com Usurio - Guias de Estilo de Interao Botes de Rdio (Radio Button): Os botes de rdio permitem ao usurio fazer uma escolha dentro de um grupo de opes. As opes de um mesmo grupo so mutuamente exclusivas.
70

Projeto de Interao com Usurio - Guias de Estilo de Interao Caixas de Atribuio (Check box) : A caixa de atribuio permite ao usurio fazer uma escolha dentro de um grupo de opes. As opes de um mesmo grupo no so mutuamente exclusivas.
71

Projeto de Interao com Usurio - Guias de Estilo de Interao Botes de Comando (Command Button) : Controle utilizado para disparar uma ao sendo o resultado descrito pelo rtulo. Normalmente de formato retangular com um rtulo que pode ser textual, grfico ou misto.
72

Projeto de Interao com Usurio - Guias de Estilo de Interao Boto de Variao (Spin Buttton) : um objeto que representa um tipo especial de campo de seleo utilizado na aplicaopelo usurio. 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

Projeto de Interao com Usurio - Guias de Estilo de Interao Campo de Dado (Data Field) : Permite ao usurio introduzir e manipular caracteres na forma textual atravs de recursos de edio uni-linear.
Campo de Texto (Data Text) : Permite ao usurio introduzir e manipular caracteres na forma textual atravs de recursos de edio multi-linear
74

Projeto de Interao com Usurio - Guias de Estilo de Interao Tabelas de Dados (Table) : Tabela um arranjo de duas ou mais listas inter-relacionadas.
75

Projeto de Interao com Usurio - Guias de Estilo de Interao Mostradores Analgicos : um objeto circular graduado numericamente atravs de um limite superior e outro inferior com intervalos regulares, munido de uma agulha que aponta o valor dentro do intervalo.
76

Projeto de Interao com Usurio - Guias de Estilo de Interao Mostradores Digitais : um objeto usado para a apresentao de dados numricos, dinmicos ou no, atravs de dgitos.
Indicador de Progresso (Progress Indicators): Caixa de dilogo utilizada para informar ao usurio que um tratamento demorado est em curso de progresso.
77

Projeto de Interao com Usurio - Guias de Estilo de Interao Bolha de Ajuda (Toolip) : O bolha de informao uma pequena janela local, com um texto descritivo, apresentada quando o cursor movido sobre um objeto de controle.
Rtulo (Label) : So elementos identificadores como ttulos de janelas, ttulos de caixas de dilogo, ttulos de listas, ttulos de tabelas, rtulos de campo, rtulos de botes e cabealhos.
78

Projeto de Interao com Usurio - Guias de Estilo de Interao Escala ( Slider ) : Objeto de interao onde o usurio introduz um valor numrico atravs do ajuste de um indicador em uma posio especfica de uma linha graduada.
79

Projeto de Interao com Usurio - Guias de Estilo de Interao Caixa de Agrupamento (Group Boxes) : Separador retangular destinado a marcar um agrupamento dentro da estrutura informacional de um objeto interativo por razes semnticas ou ergonmicas de apresentao. Deve ser acompanhado do ttulo explicativo do grupo.
80

81

82

Projeto de Interao com Usurio Diretrizes / Padres
"Diretrizes de Projeto" e "Guias de Estilo" visam padronizar decises de projeto com o intuito de tornar projetos de interfaces de usurio mais consistentes e, conseqentemente, contribuir para a melhoria do seu grau de usabilidade. Alguns autores usam estes termos como sinnimos, outros fazem distines em funo da granularidade dos detalhes padronizados por documentos dessa ordem. Padres de projeto se distinguem de diretrizes de projeto. Padres de projeto descrevem solues recorrentes para problemas que ocorrem em determinados contextos, documentado, assim, experincias de sucesso de bons projetistas que podem fundamentar decises de projeto, enquanto que os guias so mais prescritivos, pois fixam detalhes a serem adotados em projetos especficos.
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 usurios. Esta atividade requer tcnicas e ferramentas adequadas, aliadas criatividade, ao talento e experincia do designer. O produto concebido em uma atividade de design precisa ser apresentado atravs de um prottipo e/ou especificao. A prototipao consiste na descrio do que foi concebido, com o objetivo de fazer uma avaliao. A especificao consiste na descrio abstrata, rigorosa, idealmente correta e completa do produto, utilizando uma notao ou linguagem adequadas.
A especificao e a prototipao permitem vises e formas de avaliao complementares do produto concebido. A especificao permite uma descrio e avaliao a partir de tcnicas associadas s notaes utilizadas. J a prototipao permite uma descrio e avaliao mais concreta do produto no contexto da utilizao.
84

Processo de Design em IHC O QUE PROCESSO DE DESIGN ? a elaborao de um conjunto de aes que orientam o processo criativo na elaborao de um projeto. As aes so divididas em etapas. A estas etapas comuns d-se o nome de macroestrutura. Dentro da macroestrutura existem etapas imprevisveis e particulares de cada projeto. Macroestrutura: Corresponde s 3 etapas principais: Estruturao do problema. Projecto e experimentao. Realizao do projecto (produo).
Microestrutura: So sub-etapas existentes na macroestrutura, de acordo com a Natureza do projecto. (Por exemplo: conceber um produto software diferente de conceber um automvel).
85

Processo de Design em IHC FASE A ESTRUTURAO DO PROBLEMA Briefing: Primeira reunio com o cliente, onde se obtm as primeiras linhas de orientao do projeto. Definio do problema: Qual o objetivo? Qual a mensagem? A quem se dirige? (pblico alvo). Recolha de dados: Nesta fase, feita uma comparao entre os produtos j existentes no mercado, dando ao designer a noo daquilo que foi produzido na mesma poca. A este processo d-se o nome de Sincronia. tambm feita uma anlise da fisionomia dos objetos do passado, com a mesma funo. Assim o designer fica com informaes sobre o seu percurso histrico e quais os motivos que precedem a sua evoluo (Diacronia).
86

Processo de Design em IHC FASE A ESTRUTURAO DO PROBLEMA (Continuao) Anlise dos limites: Condicionalismos tcnicos Condicionalismos comerciais Condicionalismos Socioecolgicos Qual o tempo de durao do objecto? Quais as normas (nos tamanhos, cores)a que deve obedecer? A identificao dos limites tornam-se elementos importantes para o desenvolvimento do objeto.
87

Processo de Design em IHC FASE B PROJETO E EXPERIMENTAO Criatividade: Nesta fase importante registra o maior nmero de idias. A criatividade resulta da sntese dos elementos recolhidos nas fases anteriores. Brainstorming: um jogo de idias, num ambiente propcio para que elas se manifestem, tendo como ponto de partida qualquer tpico sugerido acerca do problema. Anlise dos meios tcnicos e materiais disponveis. Representao e experimentao: Pode ser feito atravs de modelos.
Testes e Avaliao: Avaliao ao longo do projeto. Avaliao final: esttica, funcionalidade, custos. Escolha de alternativas: Devemos considerar vrias opes, em vez de nos prendermos primeira que nos surge. No design importante a inovao.
88

Processo de Design em IHC FASE C REALIZAO DO PROJETO Criao do prottipo: Serve para visualizar em trs dimenses o projeto, facilitando a apresentao da idia final ao cliente. Por vezes to perfeito que poder confundir-se com o original. aqui que se procuram as falhas e se fazem as respectivas correes antes do objeto proceder para a produo. Pr-srie: Ensaio da produo. Produo (realizao).
89

Processo de Design em IHC
90

Projeto Interface Usuario

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Projeto Interface Usuario

Enviado por

Direitos autorais:

Formatos disponíveis

Projeto de Interface com Usurio

Prof. Tom C. Bonfim

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Um outro exemplo de aplicao de signos nas interfaces:

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Um exemplo fcil de entender pode ser visto abaixo:

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio

Projeto de Interface com Usurio