Apostila Design de Interfaces para Internet -...

Última atualização 26/09/2015

1 Prof. Rogério Fernandes

[email protected]

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 ([email protected]) 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.

mailto:[email protected]



[email protected]

Sumário

INTRODUÇÃO ....................................................................................................... 3

CAPITULO 1 - SEMIÓTICA.................................................................................... 3

1.1 Alfabetização Visual ...................................................................................... 3

1.2 Classificação das cores ................................................................................ 6

CAPÍTULO 2 - TEORIA DAS CORES .................................................................... 8

2.1 Associação de Cores: ................................................................................... 8

CAPÍTULO 3 - DESIGN: CONCEITOS ................................................................. 11

CAPÍTULO 4 - O QUE É IHC? ............................................................................. 13

4.1 Interface ...................................................................................................... 13

4.2 Protótipos .................................................................................................... 14

4.3 Prototipagem .............................................................................................. 14

4.4 Classificação dos protótipos ....................................................................... 15

4.4.1 Storyboard ............................................................................................ 15

4.4.2 Wireframe ............................................................................................. 16

CAPÍTULO 5 - PROJETOS DE INTERFACE ....................................................... 18

CAPÍTULO 6 - ENTENDENDO AS NECESSIDADES DOS USUÁRIOS .......... 18

CAPÍTULO 7 - DESIGN FÍSICO: CONCRETIZANDO UMA IDÉIA ...................... 20

7.1 Diretrizes adotadas no desenvolvimento do design físico .......................... 21

7.2 Exemplos práticos aplicados ao desenvolvimento físico de interfaces ....... 22

7.2.1 Usando a varredura de texto ................................................................ 22

CAPÍTULO 8 - USABILIDADE E INTERAÇÃO .................................................... 27

9.1 Princípios de usabilidade aplicados à interface .......................................... 33

SUGESTÕES DE LEITURA ................................................................................. 36




[email protected]

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 - SEMIÓTICA

A semiótica provém da raiz grega “semeion”, que denota signo1. Assim, desta forma,

podemos definir “semeiotiké” como a arte no uso dos signos. Aqui faço uma ressalva, não

se trata de signos do zodíaco, mas sim, de signos de linguagem.

A semiótica difere da linguística devido a sua maior abrangência: Enquanto a Linguística

se dedica ao estudo científico da linguagem humana, a semiologia preocupa-se com todo

e qualquer sistema de comunicação, seja ele natural ou convencional.

Na Engenharia Semiótica o designer é autor de uma mensagem ao usuário, onde:

Cada mensagem pode ser formada por um ou mais signos;

Receptor recebe a mensagem – gera ideia do que o emissor quis dizer.

1.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

1 Signo: Algo que representa alguma coisa para alguém. Por exemplo, tanto a palavra <cão> quanto uma fotografia de um cão representam o animal cachorro.




[email protected]

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.

A 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.




[email protected]

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 vistas 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.

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).




[email protected]

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.

1.2 Classificação das cores

Basicamente, quando falamos em cor, estamos na verdade falando de luz, pois, sem a luz

não existiriam o que chamamos "cores". As cores podem ser classificadas como cromáticas

e acromáticas (baseadas em tons de cinza). Enquanto o sistema RGB é conhecido como

sistema cor-luz ou sistema aditivo, o sistema CMY é conhecido como sistema cor-pigmento

ou sistema subtrativo. Os dois sistemas são os opostos físico/matemático um do outro,

suas permutações indicam as relações entre as cores opostas e/ou complementares bem

como as relações entre positivo/negativo de cores e de luz.

Cores acromáticas:

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.




[email protected]

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 e os “elementos simbólicos” utilizados no

quadro de Pablo Picasso “Guernica”.

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

______________________________________________________________________




[email protected]

CAPÍTULO 2 - 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.

2.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




[email protected]

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.

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;

Na Índia representa o casamento.

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.

Associações do preto

Positivas Negativas

Noite Medo

Carvão Vazio

Poder Morte

Estabilidade Segredo

Solidez Maldição

Associações do vermelho

Positivas Negativas

Força Guerra

Paixão Sangue

Coragem Satã

Ação Feridas

Energia Fogo




[email protected]

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.

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.

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.

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.

Associação do amarelo

Positivas Negativas

Sol Covardia

Verão Traição

Serenidade Risco

Ouro Doença

Inovação Loucura

Associações do verde

Positivas Negativas

Vegetação Decadência

Natureza Inexperiência

Fertilidade Inveja

Esperança Ganância

Segurança Fuga à realidade

Associações do Azul

Positivas Negativas

Céu Depressão

Espiritualidade Obscenidade

Estabilidade Mistério

Paz Conservadorismo




[email protected]

CAPÍTULO 3 - DESIGN: CONCEITOS

Design pode ser definido como o esforço 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, as principais formas de expressão nessa área sã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).

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.

Design Conceitual

O objetivo do design conceitual é transformar as necessidades e requisitos do usuário em

um modelo conceitual, considere o seguinte: O que você quer criar?

Para que seja compreendida pelos usuários da maneira pretendida, a descrição de uma

aplicação pode ser feita de acordo com um conjunto de ideias e conceitos integrados a

respeito do que ela deve fazer, de como deve se comportar e com o que deve se parecer.




[email protected]

Princípios chave do design conceitual:

Manter a mente aberta, mas nunca esquecer os usuários e seu contexto;

Discutir ideias com outros stakeholders2;

Utilizar prototipação de baixa fidelidade para obter rápido feedback.

Formas de pensar o modelo conceitual

Uma pergunta que pode ajudá-lo a formular o modelo conceitual: Quais modos de interação

e estilos devem ser utilizados na aplicação/sistema?

O Modo de interação refere-se à forma como o usuário executa ações ou interage com a

aplicação e/ou sistema. Exemplos de interação:

Conversação: interação com a aplicação/sistema em modo similar a uma conversação;

Instrução: utilização do teclado para dar comandos ou selecionar opções em um menu;

Manipulação e navegação: agir diretamente sobre objetos e interagir diretamente em um

ambiente virtual;

Exploração e pesquisa: possibilidade de descobrir e aprender através da pesquisa, sem

a necessidade de formular questões específicas ao sistema.

Em relação à guia de estilos, diferentes estilos requerem diferentes tipos de recursos,

exemplo de estilos: Identidade visual, comercial, corporativo...

QUIZ

Quais mecanismos de interação podem ser implementados em uma interface web?

Existe um modo de interação mais adequado para esse tipo de produto?

_______________________________________________________________________

_______________________________________________________________________

2 Stakeholders: Público que possui interesse no projeto

Exemplos de Modos de Interação




[email protected]

CAPÍTULO 4 - O QUE É IHC?

De acordo com a Sociedade Brasileira de Computação, a Interface Homem-Computador

ou Interação Humano-Computador (IHC) é a área que se dedica a estudar os fenômenos

de comunicação entre pessoas e sistemas computacionais, as pesquisas em IHC

envolvem todos os aspectos relacionados com a interação entre usuários e sistemas.

Importante: Durante um projeto de desenvolvimento de interface, precisamos identificar

em quais momentos “devemos pensar” como técnico/projetista e em quais, devemos nos

colocar no lugar do usuário final.

4.1 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 interfaces intuitivas: Maçanetas de portas, torneiras, etc.

Durante o desenvolvimento da interface, devemos levar em conta três considerações

básicas:

1. Para produzir tecnologia que auxilie o ser humano, é preciso antes conhecê-lo;

2. Aproveite os conhecimentos do usuário e torne-o um parceiro no desenvolvimento.

3. Primeiramente procure estudar as necessidades dos usuários, se não for possível,

estude as tecnologias disponíveis (análise de requisitos);

QUIZ

No contexto do desenvolvimento web, como a Interação Humano-Computador (IHC)

poderá nos fornecer subsídios para superarmos um dos maiores desafios: criar interfaces

intuitivas?




[email protected]

4.2 Protótipos

No que diz respeito à IHC, um protótipo, pode ser:

Uma série de rascunhos de tela;

Mock-up3 ou representações de um design;

Um slide em PowerPoint;

Os protótipos permitem 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.

4.3 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.

3 Mock-up: Modelo em escala ou em tamanho real de um design ou dispositivo

Exemplo de falha no levantamento de requisitos




[email protected]

4.4 Classificação dos protótipos

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.

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.

4.4.1 Storyboard

O storyboard é um esboço de como você deseja abordar um projeto particular. Criar um

storyboard antes de começar o seu site facilita seu trabalho, pois te dá uma perspectiva

global do projeto. A partir de um plano geral do site, você poderá quebrar um projeto

complexo em unidades funcionais que poderão ser resolvidas individualmente.

Esboço de site usando técnica de storyboard




[email protected]

4.4.2 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).

Protótipo de site usando wireframe




[email protected]

Observação: Em protótipos de alta fidelidade é comum à utilização de ferramentas do tipo:

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

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.

Técnicas de prototipação rápidas.

Autor: Guilhermo Almeida dos Reis.

Disponível em: http://www.guilhermo.com/aula_eca/paper_prototype.pdf. Acessado em:

20/02/2015


https://cacoo.com/getstarted

http://iplotz.com/

http://www.guilhermo.com/aula_eca/paper_prototype.pdf



[email protected]

CAPÍTULO 5 - PROJETOS DE INTERFACE

O principal objetivo do planejamento de projetos é fornecer uma estrutura que possibilite

fazer estimativas, sendo assim, 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.

A partir da identificação de contexto de uso podemos escolher o estilo de interface. O estilo

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. Exemplos: 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.

CAPÍTULO 6 - ENTENDENDO AS NECESSIDADES DOS USUÁRIOS

A web se tornou um recurso crítico global, durante sua evolução houve mudanças no perfil

dos usuários e dispositivos a ela conectados. Em um projeto de aplicação para web

devemos conhecer usuários específicos e suas práticas de trabalho.

Conceitos de interoperabilidade4, acessibilidade5 e usabilidade6 devem ser adotados no

desenvolvimento de interfaces para internet visando atender:

1. Os diversos dispositivos conectados na web e suas diferentes resoluções;

2. Possibilitar acesso ao conteúdo por pessoas com necessidades específicas;

3. Reduzir o tempo para acessar uma informação.

4 Interoperabilidade: Capacidade de uma aplicação funcionar em plataformas diferentes, independente de hardware ou software. 5 Acessibilidade: Consiste em oferecer alternativas que facilitem o acesso ao conteúdo independente do dispositivo ou das necessidades especiais do usuário. 6 Usabilidade: Qualidade de experiência do usuário ao interagir com um sistema (fácil de usar, fácil de lembrar, maximiza a produtividade e minimiza a quantidade de erros).




[email protected]

Durante o processo de design, utilize técnicas baseadas no usuário, “testadas e

aprovadas”. Dicas importantes:

Considerar no que as pessoas são boas ou não.

Ouvir o que as pessoas querem e envolvê-las no design.

Considerar o que pode ajudar as pessoas na atual maneira de fazer as coisas.

O sucesso de uma interface web depende em grande parte em oferecer alternativas de

uso, independente de limitação física ou tecnológica dos usuários.

Por envolverem competências específicas de desenvolvimento, projetos de aplicações web

têm equipes cuja formação e número depende dos objetivos e da complexidade dos

resultados. Existem pontos positivos e negativos ao se gerenciar equipes com pessoas

com diferentes experiências, perspectivas, formas de falar e ver as coisas.

Benefícios:

Muitas ideias e design gerados.

Desvantagens:

Dificuldade na comunicação e no processo de criação de design.

Importante: 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: 20/02/2015


http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm



[email protected]

CAPÍTULO 7 - DESIGN FÍSICO: CONCRETIZANDO UMA IDÉIA

O Design físico envolve considerar questões mais concretas e detalhadas sobre as

estruturas de design físico que a GUI (Graphical User Interface) deverá adotar, como por

exemplo: 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.

O que deve ser considerado no design físico de um menu de navegação?

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 que existir um padrão, utilize símbolos tradicionais. 2. Esses objetos do ClipArts, o que eles significam para você? Figuras do ClipArts




[email protected]

7.1 Diretrizes adotadas no desenvolvimento do design físico

Avaliação heurística

Os princípios de heurísticas propostos pelo cientista da computação Jakob Nielsen

consistem em um método de avaliação de usabilidade. Este método de avaliação é

baseado no julgamento do avaliador e, normalmente, descobre 75% dos problemas de

usabilidade.

Lista de heurísticas

1. Visibilidade do status do sistema: A interface do sistema sempre deve informar

ao usuário o que está acontecendo (feedback imediato).

2. Compatibilidade entre o sistema e o mundo real: O sistema deve utilizar a

linguagem do usuário, com palavras, frases e conceitos familiares a ele, fazendo as

informações aparecerem em ordem lógica e natural, de acordo com as convenções

do mundo real.

3. Liberdade e controle do usuário: Usuários frequentes escolhem por engano

funções do sistema e então necessitam de “uma saída de emergência” clara para

sair do estado não desejado sem perdas.

4. Consistência e padrões: Referem-se ao fato de que os usuários não precisam

adivinhar que diferentes palavras ou ações representam a mesma coisa. A interface

deve ter convenções não ambíguas.

5. Prevenção contra erros: Os erros são as principais fontes de frustração,

ineficiência e ineficácia durante a utilização do sistema. Melhor que uma boa

mensagem de erro é um design cuidadoso que previna o erro antes dele acontecer.

6. Reconhecimento em lugar de lembrança: As características da interface devem

ter objetos, ações e opções visíveis e coerentes, os usuários não devem ter que

lembrar as informações de uma para outra parte do diálogo, ou seja, as instruções

de uso do sistema devem ser visíveis ou facilmente recuperadas.

7. Flexibilidade e eficiência de uso: A ineficiência das tarefas de usuário podem

reduzir a eficácia do usuário e causar-lhes frustrações.

8. Projeto minimalista e estético: Os diálogos não deveriam conter informações que

são irrelevantes ou raramente necessárias.

9. Auxiliar os usuários a reconhecer, diagnosticar e recuperar-se de erros: As

mensagens devem ser expressas em linguagem simples (sem códigos), indicando

o problema e sugerindo uma solução.

10. Ajuda e documentação: Embora seja melhor um sistema que possa ser utilizado

sem documentação, é necessário prover ajuda e documentação.




[email protected]

Como aplico isto na prática? Use o seu bom senso!!!

Segmente seu trabalho adotando diferentes guias de estilos: comercial, corporativos...

Diferentes estilos requerem diferentes tipos de recursos (caixa de diálogo, barras de

ferramentas, ícones, menus, etc.). Muita atenção nos seguintes itens:

Apresentação das informações (tipo de fonte, cor de fonte, espaçamento, etc.);

Design de menu (padronização dos links, por exemplo);

Design de ícones;

Design de telas.

7.2 Exemplos práticos aplicados ao desenvolvimento físico de interfaces

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;

Ajustar a consistência da nomenclatura (padronizar);

Consistência entre dados impressos e os exibidos apenas na tela.

7.2.1 Usando a varredura de texto

Varredura de textos é uma técnica utilizada para permitir aos usuários uma leitura mais

rápida de um texto extenso. Através desta técnica você é capaz de encorajar o seu usuário

em relação à leitura, além de ajudá-lo a memorizar as informações mais importantes mais

rapidamente.

Algumas técnicas de varredura de textos:

1. Dividir os textos em tópicos, subtópicos, etc.

2. Aumentar o espaçamento entre as linhas.

3. Criar parágrafos curtos e objetivos.

4. Destacar os títulos das seções com cores diferentes em relação ao restante do texto.

5. Destacar as palavras-chave do parágrafo.

6. Criar caixas (seções) com cores de fundo diferentes.

7. Utilização de listas (ordenadas e/ou não ordenadas), quando necessário.

8. Criar espaçamento entre parágrafos.

9. Dividir as informações de um parágrafo longo em dois ou mais parágrafos.

10. Criar tarjas, sublinhados para títulos.




[email protected]

Exercício 1: Aplique a técnica de varredura de textos no texto localizado dentro da caixa

abaixo. Apresente pelo menos duas soluções diferentes.

O autor é MBA em Gestão de Projetos pelo Centro Universitário de Santo André e Especialista

em Banco de Dados Oracle pelo Centro Universitário de Araraquara. Foi professor em várias

Instituições de Ensino Superior no Estado de São Paulo e Minas Gerais, como UNIABC,

Faculdade Sumaré e UFSJ. Ministrou 15 disciplinas diferentes em diversos cursos, como

Sistemas de Informação, Ciência da Computação, Análise de Sistemas, Gestão de Tecnologia da

Informação e Sistemas para Internet. Atualmente é professor no ensino superior do Centro

Universitário FMU na cidade de São Paulo onde leciona as disciplinas gestão de projetos,

governança de TI, gestão empresarial com ERP, comércio eletrônico e design de interface para

internet.

Solução 1:

Solução 2:




[email protected]

Exercício 2:

Imagine que você é o designer do sistema de biblioteca e deseja projetar uma interface

para que o usuário faça uma consulta a um livro ou artigo.

1. Que mensagem você pretende passar ao usuário?

Resposta:

2. Como você organizaria a tela para passar essa mensagem?

Resposta?

3. Que informações devem estar disponíveis para que o usuário realize essa tarefa?

Resposta:

Protótipo da interface




[email protected]

Exemplo prático de Design de Ícones

Acesse o site https://icomoon.io/app/#/select

1º Após selecionar os ícones de interesse, clique em gerar fonte.

2º Na próxima tela, faça o download do pacote de fonte


https://icomoon.io/app/#/select



[email protected]

3º Descompacte a Pasta e importe os arquivos para dentro de seu projeto

4º Agora é só criar as classes no HTML de acordo com o CSS da Pasta

Exemplo de utilização do ícone book:

Como podemos perceber, no diretório principal possuímos uma pasta para os arquivos

CSS da aplicação, uma pasta para as imagens utilizadas (img) e o código HMTL utilizado

(index).

* Você pode mudar o arquivo style das fontes para a pasta CSS, sendo necessário nesse

caso, mudar o endereço no link no head do arquivo HTML

<link href="style.css" rel="stylesheet" type="text/css">




[email protected]

Exemplos de utilização de design de ícones em interfaces

Exemplo 2

Exemplo 3

Questões importantes em um design de tela

Capture a atenção do usuário para um ponto de destaque utilizando cores, ícones,

movimento ou molduras;

Animação é um recurso muito poderoso, mas pode distrair o usuário;

Uma boa organização ajuda: agrupando e aproximando fisicamente;

Procure o equilíbrio entre uma tela com itens muito dispersos e uma tela

sobrecarregada de itens.

CAPÍTULO 8 - USABILIDADE E INTERAÇÃO

O design de interação é um dos elementos da experiência do usuário, sua principal função

é determinar como o sistema deve se comportar em resposta às ações dos usuários. Ao

adotarmos o design de interação, podemos definir como o usuário irá interagir com as

funcionalidades do sistema fundamentando-se nos princípios de usabilidade (design

centrado no usuário). Embora se trate de uma categoria relativamente nova, a usabilidade

não é algo restrito somente á web sites, ela está presente em quase todas as coisas, mas

o foco dessa apostila é trabalhar a usabilidade focada na web, na criação para a web.

Exemplo 1




[email protected]

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 está 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

criação.

Principal motivação:

Entender o impacto das interfaces junto a:

Usuários;

Tarefas;

Organizações.

Premissas básicas:

Independente da experiência do designer, raramente o sistema “dá certo” logo na

primeira vez.

Você não saberá se o sistema está funcionando até que se comece a testá-lo.

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.




[email protected]

Bom e mau design: Caso 1

Figura 7 - Design físico 1

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

O que há de errado com o

controle da Apex? (cinza à

direita)

Por que o controle da TIVo

tem um melhor design?




[email protected]

Bom e mau design: Caso 2

Site de busca Google

Para otimizar as interações do usuário com o sistema, o que devemos considerar?

1. Quem são os usuários?

2. Que tipo de atividades as pessoas estão realizando?

3. Onde ocorre a interação?

Site de busca Aonde




[email protected]

Atividade de fixação - Maneiras de conceituar 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?

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

Como determinar o que os usuários devem ver e fazer quando realizam tarefas utilizando

um produto interativo?

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________

_______________________________________________________________________




[email protected]

9 - ENGENHARIA DE USABILIDADE

Engenharia de usabilidade: Eficácia, eficiência e satisfação analisadas sob o prisma da

ISO 9241:

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.

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.

Relação entre conforto e produtividade

Falhas de interface e seus impactos




[email protected]

9.1 Princípios de usabilidade aplicados à interface

Usabilidade pode ser medida através da qualidade de experiência do usuário ao interagir

com um sistema.

Engenharia de Usabilidade Engenharia de Software

Desenvolve o projeto de utilização. Desenvolve o projeto da lógica do funcionamento.

Observa as estratégias de uso do sistema

pelos usuários.

Identifica requisitos funcionais que o sistema deve

implementar.

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.

Exemplo de falha de usabilidade em interface




[email protected]

Exemplo de falha de usabilidade. Onde está localizado o menu do site abaixo????

Perguntas comuns em sistemas com falhas de usabilidade:

Se tudo funciona como especificado, por que os usuários não estão satisfeitos com

o sistema?

Porque é importante considerar além da funcionalidade?

QUIZ

Se o preenchimento de um formulário cadastral de um sistema ocasiona cinco erros, em

média, e esses erros representam um esforço de uma meia hora para correção, então,

podemos deduzir que nessa situação:

a) Houve falha no levantamento de requisitos

b) Não foi utilizada adequadamente a engenharia de usabilidade durante a fase de

desenvolvimento.

c) O problema está na estratégia de uso da aplicação

d) Não é possível avaliar a usabilidade desse sistema durante a fase de

desenvolvimento, uma vez que é necessária a presença de um indivíduo para

avaliar essa característica.

e) É normal um sistema demorar meia hora para se recuperar de um erro

Exemplo de falha de usabilidade em projeto de website




[email protected]

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.

Diferença entre usabilidade e ergonomia

Falha de design de produto

CONSIDERAÇÕES FINAIS

Antes de publicarmos o site ou aplicação no ambiente de produção, é importante

certificarmo-nos de que tudo esteja funcionando corretamente de acordo com parâmetros

pré-definidos.

A realização de testes pelo próprio desenvolvedor é o primeiro passo para a homologação

de uma interface. Existem diversas ferramentas online para validação de código e testes

de acessibilidade, destaque para Markup Validation Service da W3C e AccessMonitor.

Esta apostila procurou abordar os vários conceitos, métodos e técnicas que envolvem o

projeto de interfaces para web, trata-se de material em constante atualização, de forma a

compatibilizá-lo às constantes mudanças na área.

“Enquanto a usabilidade é medida, a

ergonomia da interface só pode

inspecionada e/ou avaliada”.

Efeitos de um problema de usabilidade:

Sobrecarga cognitiva;

Sobrecarga perceptiva;

Sobrecarga física.


http://validator.w3.org/

http://www.acessibilidade.gov.pt/accessmonitor/



[email protected]

De uma forma sintetizada, os principais tópicos podem ser assim definidos:

Protótipos são muito úteis para testar a viabilidade técnica de uma ideia;

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 produto;

A adoção de padrões contribui para minimizar a descarga cognitiva;

Quanto melhor a usabilidade, maiores as chances de sucesso!

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: 20/02/2015

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: 20/02/2015.

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: 20/02/2015.


http://www.tecmundo.com.br/historia/9528-a-historia-da-interface-grafica.htm

http://www.iar.unicamp.br/lab/luz/ld/Cor/psicodinamica_das_cores_em_comunicacao.pdf

http://www.guilhermo.com/aula_eca/paper_prototype.pdf

Apostila Design de Interfaces para Internet -...

Documents

Transcript of Apostila Design de Interfaces para Internet -...