Design interfaces para internet

  • 278 views
Uploaded on

Apostila sobre design de interfaces de interação, melhores práticas e métricas de usabilidade

Apostila sobre design de interfaces de interação, melhores práticas e métricas de usabilidade

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
278
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
11
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Apostila Design de Interfaces para Internet Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo do Núcleo de Educação a distância da NRsystem podem ser reproduzidas e distribuídas no todo ou em parte, em qualquer meio físico ou eletrônico, desde que os termos desta licença sejam obedecidos, e que esta licença ou referência a ela seja exibida na reprodução. 2. Qualquer publicação na forma impressa deve obrigatoriamente citar, nas páginas externas, sua origem e atribuições de direito autoral (o Núcleo de Educação a distância da NRsystem e seu(s) autor(es)). 3. Todas as traduções e trabalhos derivados ou agregados incorporando qualquer informação contida neste documento devem ser regidas por estas mesmas normas de distribuição e direitos autorais. Ou seja, não é permitido produzir um trabalho derivado desta obra e impor restrições à sua distribuição. O Núcleo de Educação a distância da NRsystem deve obrigatoriamente ser notificado (nrsystem@nrsystem.br) de tais trabalhos com vista ao aperfeiçoamento e incorporação de melhorias aos originais. Adicionalmente, devem ser observadas as seguintes restrições:  A versão modificada deve ser identificada como tal  O responsável pelas modificações deve ser identificado e as modificações datadas  Reconhecimento da fonte original do documento  A localização do documento original deve ser citada  Versões modificadas não contam com o endosso dos autores originais a menos que autorização para tal seja fornecida por escrito. A licença de uso e redistribuição deste material é oferecida sem nenhuma garantia de qualquer tipo, expressa ou implícita, quanto a sua adequação a qualquer finalidade. O Núcleo de Educação a distância da NRsystem não assume qualquer responsabilidade sobre o uso das informações contidas neste material.
  • 2. CONTEÚDO INTRODUÇÃO.....................................................................................................................3 1 ALFABETIZAÇÃO VISUAL...............................................................................................3 1.1 Linguagem Visual.........................................................................................4,5,6 Exercício...................................................................................................................7 2 DESIGN: CONCEITOS.............................................................................................8,9,10 2.1 Prototipagem......................................................................................10,11,12,13 2.2 Sintaxe HTML.....................................................................................................5 3 DESIGN FÍSICO: CONCRETIZANDO UMA IDÉIA.........................................................14 3.1 Diretrizes adotadas no desenvolvimento do design físico.................14,15,16,17 4 USABILIDADE E INTERAÇÃO.............................................................................17,18,19 5 ENTENDENDO AS NECESSIDADES DO USUÁRIO...............................................20,21 6 ENGENHARIA DE USABILIDADE..................................................................................21 6.1 Estilos de Interface...........................................................................................22 6.2 Princípios de Usabilidade............................................................................23,24 6.3 Funcionalidade versus. Usabilidade............................................................24,25 7 TEORIA DAS CORES...........................................................................................26,27,28 SUGESTÕES DE LEITURA...............................................................................................29
  • 3. Última atualização 23/12/213 INTRODUÇÃO A utilização de elementos visuais como forma comunicação é uma prática comum no processo de desenvolvimento de interfaces para internet. Um dos grandes desafios consiste em criar interfaces intuitivas, sendo assim, o sucesso de um trabalho de design, depende em grande parte, da utilização de elementos com os quais o usuário se identifique. O uso de imagens em interfaces para internet contribui de maneira significativa para a composição visual de um site, este recurso, quando bem explorado, pode tornar a navegação mais intuitiva. Importante ressaltar, que em virtude do grande número de pessoas com limitação visual, devemos sempre disponibilizar uma descrição alternativa das imagens na forma de texto (acessibilidade universal). Esta apostila apresenta técnicas, conceitos e métodos que podem ser utilizados sistematicamente para assegurar um alto grau de usabilidade na interface de aplicações web. CAPITULO 1 – ALFABETIZAÇÃO VISUAL Atualmente, passamos por várias alfabetizações. Devemos levar em conta que a formação educacional não se limita ao domínio da leitura e escrita; a mesma envolve uma diversidade de códigos culturais da sociedade e das relações econômicas e produtivas. O conceito de alfabetização visual foi desenvolvido pelo professor João Kulcsár em tese de mestrado, na Universidade de Kent (Inglaterra), nos anos 90, e na Universidade de Harvard (Estados Unidos), onde esteve como professor visitante em 2002 e 2003. Alfabetização digital é definida como a forma como as imagens são utilizadas e manipuladas para conter mensagens precisas e reunirem informações. 3 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 4. Última atualização 31/12/213 1.1 Linguagem Visual Linguagem visual é uma linguagem não verbal, que compreende várias formas de expressão, construídas a partir de elementos visuais. Para compreender a estrutura da linguagem visual é conveniente concentrar-se nos seguintes elementos visuais:  Ponto;  Linha;  Cor;  Textura;  Dimensão. A análise individual dos elementos visuais se faz necessária para um conhecimento mais aprofundado de suas qualidades específicas. Ponto O ponto é a unidade mais simples na comunicação visual (irredutível). Quando fazemos uma marca com tinta ou com um bastão, por exemplo, pensamos nesse elemento visual como um ponto de referência ou um indicador de espaço. Qualquer ponto tem grande poder de atração visual sobre o olho. Dois pontos são instrumentos úteis no desenvolvimento de qualquer tipo de projeto visual. Aprendemos cedo a utilizar o ponto como sistema de notação ideal, junto com a régua e outros instrumentos de medição, como o compasso, por exemplo. 4 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 5. Última atualização 31/12/213 Linha Quando os pontos estão muito próximos entre si, torna-se praticamente impossível identificá-los individualmente, neste caso, temos a sensação de direção, e a cadeia de pontos se transforma em outro elemento visual distintivo: a linha. Poderíamos definir a linha como um ponto em movimento, ou como a história do movimento de um ponto, pois, quando fazemos uma marca contínua, ou uma linha, nosso procedimento se resume a colocar um marcador de pontos sobre uma superfície e movê-lo segundo uma determinada trajetória, de tal forma que as marcas assim formadas se convertam em registro. Cor No Design digital, o uso de cores proporciona: • Mostrar as coisas conforme são vista na natureza; • Representar associações simbólicas; • Chamar e direcionar a atenção; • Tornar a interface mais fácil de ser memorizada; • Auxiliar na identificação de estruturas e processos. O critério para selecionar as cores não pode ser somente baseado em conceitos estéticos, deve-se também considerar como elas irão interagir umas com as outras. As pessoas relacionam as cores com diversas situações, entre elas: perigo, atenção, entre outras; estas associações variam de acordo com aspectos geográficos, culturais e/ou idade. Classificação das cores As cores podem ser classificadas como cromáticas e acromáticas (baseadas em tons de cinza) Cores acromáticas: 5 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 6. Última atualização 31/12/213 Cores cromáticas: 1. Cores Quentes: Amarelo, Laranja e Vermelho; 2. Cores frias: Azul, Turquesa e Violeta. Obs. Existem ainda, as chamadas “cores marginais”, seu caráter depende da cor que esteja ao redor. Exemplo: Verde e Magenta. Textura A textura é o elemento visual que se relaciona com a composição de uma substância com variações mínimas na superfície do material, perceptíveis através do tato ou da visão (aspecto de lixa). Dimensão A representação da dimensão em formatos visuais bidimensionais depende da ilusão (ótica). Em nenhuma das representações bidimensionais da realidade, como o desenho, pintura, fotografia, cinema e televisão, existem uma dimensão real; ela é apenas implícita. 6 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 7. Última atualização 31/12/213 EXERCÍCIO A ilusão pode ser reforçada de muitas maneiras, mas o principal artifício para simulá-la é a convenção técnica da perspectiva. Faça uma análise e identifique os itens visuais utilizados no quadro de Pablo Picasso “Guernica” _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ ______________________________________________________________________ 7 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 8. Última atualização 31/12/213 CAPÍTULO 2 – DESIGN: CONCEITOS Design: esforço criativo relacionado à configuração, concepção e elaboração de algo, como por exemplo, um objeto ou uma imagem (voltado para uma determinada função). O termo design refere-se à concepção de uma solução prévia para um problema, o profissional atuante nesta área é o Designer, palavra da língua inglesa para qual não cabe tradução. Formas de expressão: pintura, ilustração, fotografia, vídeo, ambientes, vestimenta, etc. Design Gráfico Consiste no processo de programar, projetar, coordenar, selecionar e organizar uma série de elementos para produzir objetos visuais destinados a comunicar mensagens específicas a determinados grupos. O profissional desta área trabalha com sistemas visuais: criação de logotipos e identidade visual, embalagens, interfaces para websites, editoração de livros e revistas, etc. O resultado final de um design gráfico denomina-se grafismo (unidade composto por uma infinidade de elementos diferentes). Interface Definições para Interface:  Superfície entre duas faces;  Interligação entre dois dispositivos;  Lugar onde acontece o contato entre duas entidades. Exemplos de interface: Maçanetas de portas, torneiras, etc. No contexto do desenvolvimento web, a Interação Humano-Computador (IHC) nos fornecerá subsídios para superarmos um dos maiores desafios: como criar interfaces intuitivas? 8 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 9. Última atualização 31/12/213 O que é IHC? Interação Humano-Computador - Área que se dedica a estudar os fenômenos de comunicação entre pessoas e sistemas computacionais, seus estudos envolvem todos os aspectos relacionados com a interação entre usuários e sistemas. Durante um projeto para desenvolvimento de interface, é importante identificarmos os momentos que “devemos pensar” como técnico/projetista ou usuário final. Preparação para o estudo de interfaces, considerações: 1. Para produzir tecnologia que auxilie humano, é necessário antes conhecê-los; 2. Estudar em primeiro plano as necessidades dos usuários (funcionalidades), se não, as tecnologias disponíveis (requisitos não funcionais); 3. Aproveitar os conhecimentos do usuário e torná-lo um parceiro no desenvolvimento. Design Conceitual Transforma as necessidades e requisitos do usuário em um modelo conceitual. Princípios chave do design conceitual:  Manter a mente aberta, mas nunca esquecer os usuários e seu contexto;  Discutir ideias com outros stakholders;  Utilizar prototipação de baixa fidelidade para obter rápido feedback; Formas de pensar o modelo conceitual Que modo de interação é mais adequado para o produto?  Conversação, Instrução, manipulação e navegação, exploração e pesquisa. Figura 1 – Falha no levantamento de requisitos 9 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 10. Última atualização 31/12/213 Webdesign WebDesign é o Design voltado para a Internet, e Webdesigner é o criador do processo. Assim como as demais mídias, a internet possui elementos visuais próprios. Sites que tenham um design bem definido e que estejam de acordo com a proposta do produto ou do assunto a que deram origem, com certeza serão mais eficientes. No design para web “imagem” é tudo, ou quase tudo, portanto um webdesigner tem que saber exatamente os elementos que deve ou não utilizar em cada projeto. Protótipos Em interface homem máquina (interação humano-computador), pode ser:  Uma série de rascunhos de tela;  Mock-up1 ou representações de um design;  Um slide em PowerPoint; Os protótipos permite testar facilmente diferentes ideias e podem responder questões que envolvam a escolha de melhores alternativas, normalmente são usados para:  Testar a viabilidade técnica de uma ideia;  Esclarecer requisitos vagos;  Realizar alguns testes com usuários. 2.1 Prototipagem A técnica de prototipagem pode ser usada para definir a diagramação, posição e tamanho dos elementos para aumentar a efetividade do site (conversão). O protótipo é a primeira atividade executada numa etapa de concepção visual, para que o site comece a tomar forma. Características de um protótipo  Pode-se construir um protótipo com a intenção de descartá-lo;  Pode-se construir um protótipo com a intenção de fazê-lo evoluir para o produto final. Podemos classificar os protótipos como sendo de baixa, média ou de alta fidelidade. 1 Modelo em escala ou em tamanho real de um design ou dispositivo 10 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 11. Última atualização 31/12/213 Protótipos de Baixa Fidelidade: não se assemelham muito ao produto final, mas são úteis, pois tendem a serem mais simples, baratos e de fácil produção. Os protótipos de baixa fidelidade são normalmente usados para obter feedback rápido durante a definição de requisitos. Exemplos: storyboard, esboço. Figura 2 – Exemplo de protótipo de baixa fidelidade (Story Board) Figura 3 - Exemplo de wireframe (média fidelidade) 11 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 12. Última atualização 31/12/213 Figura 4 - Exemplo de wireframe de alta fidelidade Protótipos de Alta fidelidade: Utilizam material que se espera que seja o mesmo da versão final. Apesar de precisarmos de mais tempo e recursos para elaborar um protótipo de alta fidelidade, este tipo de protótipo apoia a avaliação de todos os detalhes do design, e se parece mais com a versão final do produto. Em protótipos de alta fidelidade é comum à utilização de ferramentas What You See Is What You Get (WYSIWYG). A imagem de manipulação da interface é a mesma que a aplicação cria. Exemplos: Word da Microsoft e Fireworks da Adobe Systems 12 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 13. Última atualização 31/12/213 Wireframe O wireframe é um guia visual que fornece a estrutura (template) que será usada pelo designer para construir o layout (visual), o principal objetivo no uso de wireframe é planejar como os requisitos funcionais serão usados pelo desenvolvedor. A utilização de wireframe possibilita planejar a arquitetura da aplicação minimizando as influências visuais. Os wireframes podem ter diferentes níveis de detalhes. Uma das ferramentas mais usadas na criação de wireframe é o aplicativo Fireworks (Adobe Systems). Ferramentas free para criação de wireframe: Cacoo - site para download: https://cacoo.com/getstarted iPlotz – site para download: http://iplotz.com/ Sugestão de leitura Design de Interação Autor: Preece, Rogers & Sharp Edição: 1 / 2005 Idioma: Português Breve Descrição: Exposição atualizada do design das tecnologias interativas do momento e de nova geração, como web, dispositivos móveis e computação vestível. Explica como utilizar técnicas de design e avaliação para o desenvolvimento de tecnologias interativas de sucesso. Guilhermo Almeida dos Reis. Técnicas de prototipação rápidas. Disponível em: http://www.guilhermo.com/aula_eca/paper_prototype.pdf. Acessado em: 31/12/2013 13 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 14. Última atualização 31/12/213 CAPÍTULO 3 – DESIGN FÍSICO: CONCRETIZANDO UMA IDÉIA O Design físico envolve considerar questões mais concretas e detalhadas acerca de uma interface, como design de tela ou do teclado, quais ícones utilizar, como estruturar menus, etc...  Questões realistas devem ser consideradas;  Detalhamento do design da interface;  Interação entre o design conceitual e o design físico. Figura 5 - Utilização de imagens em interface digital 3.1 Diretrizes adotadas no desenvolvimento do design físico Avaliação heurística (Nielsen) - método de avaliação de usabilidade onde um avaliador procura identificar problemas de usabilidade numa interface com o usuário. 1. Visibilidade do estado do sistema 2. Compatibilidade do sistema com o mundo real 3. Controle e liberdade do usuário 4. Consistência e padrões 5. Prevenção de erros 6. Reconhecimento ao invés de lembrança 7. Flexibilidade e eficiência de uso 8. Estética e design minimalista 9. Ajudar os usuários a reconhecer, diagnosticar e corrigir erros 10. Ajudas (Help) 14 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 15. Última atualização 31/12/213 As 8 regras de ouro de Shneiderman Consistência: Sequência de ações similares para procedimentos similares. Manter um padrão visual para as cores, Layout e fontes. Utilizar a mesma terminologia em menus. Atalhos para utilizadores assíduos: Teclas de atalho, macros e navegação simples facilitam e agilizam a interação do utilizador mais experientes com a interface. Feedback informativo: Toda e qualquer ação do utilizador requer uma resposta do sistema, cujo qual será mais ou menos explicativa dependendo do tipo de ação a ser executada. Diálogos que indiquem término da ação: As sequências de ações do sistema devem ser organizadas de tal forma que o usuário consiga entender os passos e saiba quando cada um deles for executado com sucesso. Diálogos que indiquem término da ação: As sequências de ações do sistema devem ser organizadas de tal forma que o usuário consiga entender os passos e saiba quando cada um deles for executado com sucesso. Prevenção e tratamento de erros: A interface não pode dar vias para o utilizador cometer erros graves, e caso ocorram erros, devem haver mecanismos que tratem, corrijam na medida do possível, e caso não seja possível, instrua o usuário para uma possível solução. Reversão de ações: Sempre que possível, as ações devem ser reversíveis, de forma que tranquilize o utilizador e lhe dá mais coragem para explorar o sistema. Controle: Os utilizadores mais experientes devem ter a sensação de que eles dominam os processos do sistema e que ele apenas responde a suas ações. Baixa carga de memorização: O sistema deve conter uma interface simples para memorização. Para isso requer uma boa Estrutura e Equilíbrio para relacionar elementos e facilitar a memorização subjetiva das telas, sem exigir esforço. Como aplico isto na prática? Use o seu bom senso!!! Segmente seu trabalho. Guias de estilos: comercial, corporativos... Diferentes estilos requerem diferentes tipos de recursos (caixa de diálogo, barras de ferramentas, ícones, menus, etc.)  Design de menu  Design de ícones  Design de telas  Apresentação das informações 15 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 16. Última atualização 31/12/213 Design Físico: Menu.  Quantos itens o menu deve ter?  Em que ordem eles devem estar?  De que forma o menu deve ser estruturado, isto é, quando deve ser utilizado sub-menus,  Caixas de combinação (combo)?  Quantas categorias devem ser utilizadas para agrupar itens de menu?  Como a divisão em grupos será denotada, isto é, com cores diferentes, linhas divisórias?  Quantos menus deverá haver?  Qual a terminologia a ser utilizada? (as atividades para determinar os requisitos fornecerão esta reposta)  Como as restrições físicas podem ser compensadas (por exemplo, um telefone celular)? Design de Ícones Um bom design de ícones é difícil. O significado dos ícones é muitas vezes cultural e sensitivo ao contexto. Algumas considerações: 1. Sempre utilize símbolos tradicionais quando já existe um padrão. 2. Esses objetos do ClipArt o que significam para você? Figura 6 - ClipArts Design de Tela  Capture a atenção do usuário para um ponto de destaque utilizando cores, movimento, molduras;  Animação é um recursos muito poderoso, mas pode distrair o usuário;  Uma boa organização ajuda: agrupando, aproximando fisicamente;  Procure o equilíbrio entre uma tela com itens muito dispersos e uma tela sobrecarregada de itens. 16 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 17. Última atualização 31/12/213 Apresentação da informação  As informações mais relevantes devem estar disponíveis todo o tempo;  Diferentes tipos de informações implicam em diferentes tipos de apresentação;  Consistência entre dados impressos e os exibidos apenas na tela. 1º Observar qual é o esquema dominante  Ex. se for um site de receitas, a maior parte de suas categorias são baseadas em ingredientes? Pratos principais? Culturas? Tipicamente, um vai se sobressair. 2º Ajustar a consistência da nomenclatura. Padronizar.  Ex. se um grupo chama “material administrativo” você pode padronizá-lo para “administração”. Agora analise o todo!!!  Os rótulos são adequados?  Há mais de um item em cada categoria?  Há categorias muito extensas, precisando ser subdivididas? CAPÍTULO 4 – USABILIDADE E INTERAÇÃO Etapas do Design de Interação: 1. Identificar necessidades e estabelecer requisitos; 2. Desenvolver designs alternativos que preencham esses requisitos; 3. Construir versões interativas dos designs, de maneira que possam ser comunicados e analisados; 4. Avaliar o que esta sendo construído durante o processo. Aplicações:  Explicar as diferenças entre os bons e os maus designs;  Delinear as diferentes formas de orientação utilizadas no design de interação;  Metas de Usabilidade e Princípios de design. O objetivo do Design de Interação é trazer a usabilidade para dentro do processo de Design. 17 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 18. Última atualização 31/12/213 Motivação: Entender o impacto das interfaces junto a:  Usuários;  Tarefas;  Organizações. A seguir são apresentados alguns exemplos de design, levando em consideração a usabilidade dos produtos apresentados, faça uma análise pensando como designer e outra como usuário final. Bom e mau design: Caso 1  O que há de errado com o controle da Apex? (cinza à direita)  Por que o controle da TIVo tem um melhor design? Figura 7 - Design físico 1 _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ ______________________________________________________________________ 18 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 19. Última atualização 31/12/213 Bom e mau design: Caso 2 Figura 8 – Site de busca aonde.com.br Figura 8 - Site de busca Google O que devemos considerar? Quem são os usuários? Que tipo de atividades as pessoas estão realizando? Onde ocorre a interação? Devemos otimizar as interações do usuário com o sistema. 19 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 20. Última atualização 31/12/213 CAPÍTULO 5 – ENTENDENDO AS NECESSIDADES DO USUÁRIO  Considerar no que as pessoas são boas ou não.  Considerar o que pode ajudar as pessoas na atual maneira de fazer as coisas.  Ouvir o que as pessoas querem e envolvê-las no design.  Utilizar técnicas baseadas no usuário “testadas e aprovadas” durante o processo de design. Equipes Multidisciplinares Muitas pessoas com diferentes experiências envolvidas. Diferentes perspectivas e formas de falar e ver sobre as coisas. Benefícios: Muitas ideias e design gerados. Desvantagens: Dificuldade na comunicação e no processo de criação de design. Atividade de fixação – Maneiras de conceitualizar a usabilidade. Crie um projeto de uma secretária eletrônica seguindo os seguintes critérios: 1. Não pode haver nenhum tipo de texto ou letras 2. Não pode haver botões (físicos) Como será a interação do usuário com esse objeto? _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ ______________________________________________________________________ Como orientar os designers a pensar sobre aspectos diferentes de seus designs? _______________________________________________________________________ _______________________________________________________________________ ______________________________________________________________________ 20 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 21. Última atualização 31/12/213 Como determinar o que os usuários devem ver e fazer quando realizam tarefas utilizando um produto interativo? _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ _______________________________________________________________________ ______________________________________________________________________ CAPÍTULO 6 – ENGENHARIA DE USABILIDADE Engenharia de usabilidade: Eficácia, eficiência e satisfação analisados sob o prisma da ISO 92412: Eficácia: A capacidade oferecida para alcançar seus objetivos em número e com a qualidade necessária. Eficiência: A quantidade de recursos necessários que os sistemas solicitam aos usuários para a obtenção de seus objetivos com o sistema. Satisfação: A emoção que os sistemas proporcionam aos usuários em face dos resultados obtidos e dos recursos necessários para alcançar tais objetivos. Figura 9 - Relação entre conforto e produtividade Princípios de Ergonomia: visa proporcionar eficácia e eficiência, além do bem estar e saúde do usuário, por meio da adaptação do trabalho ao homem. Figura 10 – falhas de interface e seus impactos 2 ISO 9241 norma internacional que trata do trabalho de escritório informatizado abrangendo a ergonomia de interação humano-computador 21 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 22. Última atualização 31/12/213 6.1 Estilos de Interface A modelagem de processos de negócio é uma fase crucial na definição dos aspectos de usabilidade do produto. A definição do publico alvo (usuários) e tarefas que serão realizadas na aplicação compõem a análise de contexto de uso. O estilo de interface adotado no desenho de uma interface pode resultar em uma aplicação mais adequada para a realização das tarefas. A seguir são descritos alguns exemplos de estilos de interface.  What You See Is What You Get (WYSIWYG) A imagem de manipulação da interface é a mesma que a aplicação cria. Ex: Editores de texto do tipo Word da Microsoft e Fireworks da Adobe Systems.  Manipulação direta - Windows Explorer (mover arquivo/ diretório, ...).  Windows, Icons, Menus and Pointers (WIMP). Permite a interação através de componentes de interação virtuais denominados widgets.  Estilo Menu, Logs de comando, Formulários. No contexto histórico, os primeiros programas não possuíam interface gráfica (MS DOS, por exemplo). Algumas décadas após o surgimento dos primeiros programas, a interação passou da linha de comando, em modo texto, para desktops em três dimensões e softwares que aceitam comandos por voz ou gestos com o propósito de facilitar e tornar mais intuitiva a utilização das máquinas. Sugestão de leitura: Felipe Arruda. História da Interface. Disponível em: http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm. Acessado em: 31/12/2013 22 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 23. Última atualização 31/12/213 6.2 Princípios de Usabilidade Usabilidade pode ser medida através da qualidade de experiência do usuário ao interagir com um sistema. Figura 11 - Falha de usabilidade em interface A Usabilidade é associada a 5 características: 1. Fáceis de aprender; 2. Fáceis de lembrar; 3. Maximizam a produtividade; 4. Minimizam erros; 5. Maximizam satisfação. 23 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 24. Última atualização 31/12/213 Exemplo de falha de usabilidade. Onde está localizado o menu do site abaixo???? Figura 14 - Falha de usabilidade em projeto de website 6.3 Funcionalidade versus. Usabilidade O foco dos projetistas é a funcionalidade, eficiência e custo.  Porém se tudo funciona como especificado, por que os usuários não se satisfazem com muitos sistemas?  Porque é importante considerar além da funcionalidade? Métricas para avaliação de Usabilidade: 1. Tempo utilizado para a realização de uma tarefa; 2. Número de cliques ou comandos efetuados; 3. Razão entre interações de sucesso e erro; 4. Frequência de uso de manuais de ajuda; 5. Número de vezes que o usuário expressou frustração; 6. Taxa de tarefas completadas. 24 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 25. Última atualização 31/12/213 Figura 12 - Diferença entre usabilidade e ergonomia Ergonomia Figura 13 - Falha de usabilidade em produto Considerações importantes:  Técnicas de avaliação são importantes para obter feedback;  Diagnóstico prévio traz economia em tempo e dinheiro;  A participação do usuário é necessária no processo de desenvolvimento do site;  Quanto melhor a usabilidade maior o sucesso. 25 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 26. Última atualização 31/12/213 CAPÍTULO 7 – TEORIA DAS CORES O critério para selecionar as cores não deve se basear apenas em padrões estéticos, devemos levar em consideração como as cores adotadas irão interagir umas com as outras.  O uso de cores em interfaces permite:  Mostrar as coisas conforme são vistas na natureza;  Representar associações simbólicas;  Chamar e direcionar a atenção;  Enfatizar alguns aspectos da interface;  Diminuir a ocorrência de erros;  Auxiliar na memorização de estruturas e processos;  Tornar uma interface mais fácil de ser memorizada. 7.1 Associação de Cores: Normalmente, as pessoas associam as cores a diversas situações de suas vidas, seu uso pode indicar condições diversas: perigo, atenção, qualidade dos alimentos, acidez e alcalinidade em experimentos químicos, etc. As associações dependem de diversos aspectos, entre eles:  Geográficos;  Culturais;  Idade. Uso de Cores – Associações à cor branca Em aplicativos em que o usuário tem que visualizar uma mesma tela por muito tempo, não é recomendado o uso da cor branco como cor de fundo.  Em contraste com um texto escuro produz uma máxima legibilidade. Associações do branco Positivas Negativas Neve Frio Pureza Hospital Inocência Vulnerabilidade Paz Palidez fúnebre Limpeza Rendição 26 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 27. Última atualização 31/12/213 Uso de Cores – Associações à Cor Preta Funciona como um estimulante para as demais cores e harmoniza bem com todas elas.  Não é aconselhável utilizar como cor de fundo.  Eficientes para aumentar o contraste entre cores diferentes. Associações do preto Positivas Negativas Noite Medo Carvão Vazio Poder Morte Estabilidade Segredo Solidez Maldição Uso de Cores – Associações à Cor Cinza O default da maioria dos softwares comerciais possui uma cor cromática de baixo brilho como cor de fundo. Quanto mais baixo o brilho (menor a intensidade de luz), mais cinza existe na cor. A cor cinza reduz conotações emocionais.  Combina com todas as cores.  Embora seja uma boa cor de fundo tem pouco apelo. Uso de cores – Associações à Cor Vermelha A cor vermelha possui o maior impacto universal devido a sua associação com o sangue e o fogo, portanto com a guerra. Curiosidade, seu significado simbólico varia:  Na Inglaterra representa a realeza;  Nos Estados Unidos representa perigo;  Na China representa revolução; Associações do vermelho  Na Índia representa o casamento. Positivas Negativas Força Guerra Paixão Sangue Coragem Satã Ação Feridas Energia Fogo O vermelho é eficiente em interfaces para chamar a atenção, bordas vermelhas são rapidamente percebidas. Obs. Evite usar a cor vermelha em áreas amplas ou como cor de fundo, devido ao fato de ser uma cor agressiva (dominante) chama muito atenção 27 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 28. Última atualização 31/12/213 Uso de Cores – Associações à Cor Amarela A cor amarela possui como característica incandescência acolhedora por sua associação com o sol, simboliza vida e calor. Associação do amarelo Positivas Negativas Sol Covardia Verão Traição Serenidade Risco Ouro Doença Inovação Loucura Uso de Cores – Associações à Cor Verde A cor verde se tornou marca dos movimentos ambientalistas. O olho humano é mais propicio aos comprimentos de onda próximos ao verde-amarelo, desta forma, entre as três cores do RGB é a cor mais visível, sendo muito propicia quando se deseja passar rapidamente uma informação. Associações do verde Positivas Negativas Vegetação Decadência Natureza Inexperiência Fertilidade Inveja Esperança Ganância Segurança Fuga à realidade Uso de Cores – Associações à cor Azul A cor azul sugere profundidade e espaço devido a sua associação com o céu e mar. O azul é uma cor fria e suave, tem uma grande capacidade em relaxar e tranquilizar as pessoas. Entre as principais “qualidades” da cor azul, podemos destacar o fato de ser a cor mais usada nas bandeiras nacionais por simbolizar autoridade e espiritualidade. Associações do Azul Positivas Negativas Céu Depressão Espiritualidade Obscenidade Estabilidade Mistério Paz Conservadorismo Obs. Devido ao fato do olho humano ser menos sensível aos comprimentos de ondas da cor azul, a cor azul não oferece uma boa focalização ou níveis de contraste, sendo assim, evite utilizar a cor azul como cor de texto e detalhes finos. 28 Prof. Rogério Fernandes rogerio@nrsystem.com
  • 29. Última atualização 31/12/213 SUGESTÕES DE LEITURA ARRUDA, F. História da Interface. Disponível em: http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm. Acessado em: 31/12/2013 DE MORAES, Anamaria; SANTA ROSA, José Guilherme. Avaliação e projetos no design de interfaces. 1 ed. Rio de Janeiro: 2AB, 2008 FREITAS, A.K.M. Psicodinâmica das cores em comunicação. Disponível em: http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comunicacao.pdf. Acessado em: 31/12/2013. HIX, D. HARTSON.H.R. Developing User Interfaces:Ensure Usability Through Poduct and Process. John Wiley and Sons, New York. ISO 9241. “Ergonomic requirements for office work with visual display terminals (VDTs)”. Part 10: Dialogue principles. NIELSEN, J. Usability Engineering. San Francisco, CA: Morgan Kaufmann, 1993. PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de interação: além da interação humano-computador. Trad. Viviane Possamai. Porto Alegre: Bookman, 2005. REIS, G. A. Técnicas de prototipação rápidas. Protótipos de papel. Disponível em: http://www.guilhermo.com/aula_eca/paper_prototype.pdf. Acessado em: 31/12/2013. 29 Prof. Rogério Fernandes rogerio@nrsystem.com