A forma: estrutura e estética

Transcrição

1 Parte III A forma: estrutura e estética Estrutura e Estética z Organização z Navegação z Layout z Cores z Tipografia z Imagens

2 Organização: Conceito z Define a estrutura de organização das informações e elementos de interface z Por que organizar? Limitação cognitiva: Usuários precisam trabalhar por partes Limitação computacional: precisam ser adequados ao meio z Interfaces de usuário na Web são estruturadas de acordo com o modelo de hipertexto Organização: Hipertexto - Exemplo z Hipertexto: Modelo para estruturar documentos de maneira não-linear usando os conceitos de nós, elos e âncoras. Hipertexto Hipertexto Neste Neste documento documento você você verá verá alguns alguns conceitos conceitos do do que que é é um um hipertexto hipertexto Mostraremos Mostraremos ainda ainda alguns alguns exemplos. exemplos. Caso Caso queira queira ainda ainda pode pode fazer fazer alguns alguns exercícios exercícios Âncoras origem Âncoras destino Conceitos Conceitos básicos básicos Âncora Âncora extremidades extremidades de de um um elo elo Hipertexto Hipertexto documento documento estruturado em estruturado em nós, elos nós, elos e e âncoras âncoras Elo Elo ligação ligação entre entre as as páginas páginas de de um um hipertexto hipertexto Nó Nó parte parte de de um um hipertexto hipertexto que que contém contém o o texto texto Página Página ver ver nó. nó. Exemplos Exemplos Exercício Exercício Índice Índice Nós Os Os sistemas sistemas de de ajuda ajuda nas nas aplicações aplicações Win Win dows dows são são estruturados estruturados como como Hipertextos. Hipertextos. Elos Exercício A Exercício A Exercício B Exercício B Exercício C Exercício C

3 Organização: Especificação z A estrutura organizacional pode ser especificada através de diagramas. Organização hierárquica z É a estrutura mais utilizada z Usuário memoriza melhor e perde-se menos Home Page Profunda Larga

4 Organização linear z Usada para tarefas que requerem seqüência de atividades z Livros, revistas e manuais normalmente são organizados de forma linear Linear Pura Linear com alternativas Organização em rede z Não muito recomendada. Usuário pode ficar perdido. z Apenas com boas metáforas

5 Organização: Exemplo z A organização refletida no layout Organização: Comunicabilidade 1 z Mapa

6 Organização: Comunicabilidade 2 z Técnica de visualização da informação para navegar no site Organização: Usabilidade z Analise a especificação e verifique se a organização está balanceada z O usuário precisa navegar muito de uma página para outra numa mesma tarefa? z Verifique se o usuário memoriza facilmente a organização do site

7 Organização: Diretrizes z Use o modelo conceitual do domínio como base para a organização z Utilize as categorias do domínio para organizar as informações e serviços do sistema z Evite que serviços muito utilizados fiquem em partes muito profundas de uma organização z Use uma organização balanceada z Coloque um mapa disponível em todos os pontos da organização. Use mapas mais abstratos Organização: Diretrizes para Home Page z Home page é a página de entrada do site z Deve refletir o propósito do site z Deve indicar quais os objetivos, as informações e/ou serviços do site z Deve indicar como interagir com o site para ter acesso aos recursos z Deve conter elos para acesso aos recursos z Deve indicar o responsável pelo site e como entrar em contato

8 Navegação: Conceito z Metáfora utilizada para indicar o carregamento dos diversos arquivos de um hipertexto z O termo indica que o usuário percorreu um elo do hipertexto z A navegação pode ser: Para um outro trecho da mesma página Para uma outra página do mesmo site Para um outro site ou sistema Navegação: Especificação z A navegação pode ser especificada através de diagramas Cadastro Formulário 1 Home page Resposta Formulário 3 Formulário 2

9 Navegação: Exemplo z A organização serve de base para o modelo de navegação Navegação: Comunicabilidade - 1 z Uma boa comunicabilidade na navegação deve indicar: Onde estou? De onde vim? Para onde posso ir?

10 Navegação: Comunicabilidade - 2 z Pode-se antecipar o conteúdo do destino Texto pop-up sobre quando passa o mouse sobre o elo Preview da página Navegação: Comunicabilidade - 3 z Metáforas podem facilitar a navegação

11 Navegação: Comunicabilidade 4 z Uma outra forma de implementar a navegação é utilizando botões ou menus pulldown z Podem confundir o usuário: Botões são usados preferencialmente para comandos Menus são usados preferencialmente para escolha de informações Navegação: Usabilidade z Quantas páginas são necessárias para se chegar a uma informação ou função? z E para sair de uma função para outra? z Existe possibilidade de volta atrás? z Existe possibilidade de voltar para o início? z O usuário consegue identificar todos os elos? z É fácil clicar em todos os elos?

12 Navegação: Diretrizes z A navegação deve refletir a organização z Os elos devem indicar qual o conteúdo do destino z Indique os diferentes tipos de elos z O usuário deve identificar os elos facilmente z O usuário não deve ficar perdido z Atalhos facilitam a navegação z É importante o acesso direto à home page a partir de qualquer ponto do site z Permita que o usuário volte sempre para a página inicial Layout: Conceito z Organização do texto e demais elementos na página z Facilita a compreensão das informações e serviços z É essencialmente um fator de comunicabilidade z A área de design gráfico desenvolveu diversas técnicas que podem ser empregadas Proximidade e Alinhamento Simetria e Balanceamento Escala e proporção

13 Layout: Exemplo 1 z O Layout pode ser especificado em esquemas Nome: Sobrenome: CPF: Cartão: Layout: Exemplo 2 z Layout distingue categorias de informações e serviços z Muitas informações, mas layout padrão deste site facilita a leitura. O usuário sabe onde achar a informação

14 Layout: Tecnologia z O Layout pode ser implementado usando-se: Tabelas Frames Divisões (Internet Explorer) ou Camadas (Navigator) associadas a elementos de estilos CSS z Tabelas É a forma mais utilizada Não é recomendada por questões de acessibilidade z Frames É muito utilizado e a mais polêmica Designers detestam e programadores adoram! Facilita a implementação e manutenção Confunde a organização, atrapalha a navegação e dificulta a impressão e gravação da página Dificulta a acessibilidade Layout: Usabilidade z Quanto tempo o usuário leva para identificar um determinado elemento em diferentes layouts? z O usuário segue a ordem de leitura ou de preenchimento pretendida pelo designer?

15 Layout: Diretrizes z Organize a página de acordo com informações e serviços z Páginas com muita informação dificultam encontrar o que se procura z Informações relacionadas devem estar agrupadas z Um bom espaçamento atrai o leitor Tipologia e cores: Conceito z Cores e tipos podem ser usados para deixar o site mais atrativo z Oferecem uma identidade ao sistema z A legibilidade pode ser melhorada com cores e tipo adequados z Consistência de cores e tipos facilitam a organização

16 Tipologia e cores: Exemplo 1 Tipologia e cores: Exemplo 2 (PSUHVDFRP q&rqkhádqrv q&rqkhádqrv q&rqvxowru q&rqvxowru q6huylárv q6huylárv q,qirupdáïhv q,qirupdáïhv q&dgdvwur q&dgdvwur q9hqgdv q9hqgdv

17 Tipologia e cores: Diretrizes z Evite muita variedade de cores e tipos z Use-os adequadamente para deixar o site agradável z Use-os com precisão quando quiser comunicar categorias de informação ou serviço z Seja consistente z Coloque as cores e tipo adequadas ao tipo do monitor e tamanho da tela z Não use as cores da empresa se elas afetarem a legibilidade Parte IV O processo metacomunicativo de design

18 Um modelo para o processo de design Design Criação, brainstorm, modelagem, prototipação, etc. Novos casos de uso... GHVLJQHU Análise e Avaliação Questionários, inspeção, observação, testes, etc.. Experiências de uso XVXiULR Design como processo de metacomunicação z O contexto Qual o domínio da aplicação? Qual o propósito? Qual o escopo? z A audiência Quem são os usuários? Quais tarefas eles necessitam realizar? z A mídia: Web Qual computador? Qual o tipo de conexão? Qual browser? z O significado: o modelo conceitual Quais devem ser as informações? Qual deve ser a funcionalidade? Como o deve ser o processo de interação? z A mensagem: a interface Quais signos devem ser utilizados? De quais códigos? Como estruturar a mensagem de acordo com o meio?

19 Contexto: Qual o propósito do sistema? z Informativo Prestar informações z Funcional Oferecer serviços z Entretenimento Divertir pessoas z Alguns sistemas têm múltiplos propósitos Informativo Entretenimento Funcional Contexto: Exemplos de diferentes propósitos Portais Biblioteca digital Jornais e revistas Informativo Banco Manuais on-line Museus Livros Parques temáticos Entretenimento Funcional Comércio Rádios Vídeo sob demanda Sexo

20 Contexto: Escopo do Sistemas z Quanto à ligação em rede Internet Intranet Extranet z Quanto à audiência Coorporativo Público restrito e acesso controlado. Público seletivo (por assunto) Aberto ao o público geral Usuários papel: Conceito z Identificação dos papeis de usuários Quais papéis desempenham os usuários do sistema? São os atores dos casos de uso Exemplos: comprador, funcionário, educador, aluno, etc. Diferentes atores possuem diferentes necessidades e realizam diferentes tarefas 3UHFLVR FDGDVWUDU RV SUHoRV GRV OLYURV 4XHUR FRPSUDU OLYUR IXQFLRQiULR FOLHQWH

21 Usuários papel: Diretrizes z Quem usa o sistema? z Quem fornece informações ao sistema? z Quem solicita de informações do sistema? z Quem inicia ou finaliza o sistema? z Quem instala o sistema? Usuários perfil: Conceito z Levantamento do perfil dos usuários z Perfil: Capacidades e limitações físicas e cognitivas z É necessário fornecer opções de acessibilidade? Conhecimento sobre o domínio z Vocabulário específico ou geral? Conhecimento sobre a Web e Computadores z Fornecer informações de ajuda? Cultura e linguagem z Questões de internacionalização z É necessário uma interface em outro idioma z Estou utilizando termos ou imagens de uma cultura específica

22 Tarefas: Conceito z Descreve o conjunto de atividades mentais e físicas necessárias para atingir a meta z As tarefas originam-se das necessidades dos usuários z As tarefas refletem o ponto-de-vista do usuário e não do sistema z Exemplo: Tarefa: Tirar a conta-corrente do vermelho 1. Verificar qual o meu débito na conta-corrente 2. Verificar se eu tenho dinheiro em contas de investimentos 3. Fazer a transferência entre as contas A mídia hardware z O computador servidor Desempenho do servidor Capacidade de atendimento z A conexão de rede Linha telefônica, alta velocidade, rede local z O computador cliente Computador pessoal desktop ou laptop Palmtop Computador de mão WAP Sistemas Web no celular WebTV z O monitor Tamanho da tela, Resolução e Cores

23 A mídia browser z O browser Interpretação da HTML, CSS, JavaScript e Java Compatibilidade entre fabricantes e versões Desempenho para interpretação e exibição Browser sonoro para deficientes visuais Personalização e acessibilidade z Plug-ins Tocador de áudio e vídeo Exibidor de animações (shockwave e flash) A mídia browser: Exemplo Amaya

24 A mídia browser: Exemplo Internet Explorer 6 A mídia: Diretrizes z Considere a plataforma dos usuários z Teste a interface em diferentes plataformas z Decida entre versões alternativas para as diferentes plataformas ou uma única versão para o tipo de usuário majoritário z Verifique a legibilidade e as cores em diferentes monitores z Verifique o tempo médio de carregamento das páginas na plataforma dos usuários z Quebrar uma figura grande em figuras menores diminui a ansiedade dos usuários, mas aumenta o tempo de carregamento z Teste os estilos e scripts z Adaptação o sistema ao browser dos usuário

25 Parte V Conclusão Acessibilidade: Conceito e recomendações z Conceito que indica que a interface pode ser utilizada por pessoas com deficiências z O W3C apresenta recomendações para acessibilidade z Use HTML apenas para estruturar o documento z Use texto como alternativa a figuras z Não use tabelas ou frames para estruturar a página z Permita que as letras sejam aumentadas sem prejuízo do layout z Não utilize âncoras de elos muito pequenas

26 Profissões associadas ao design para a Web z Diversos profissionais devem atuar no desenvolvimento IHC Design gráfico Design de Software Arquitetura da Informação Arte X Engenharia z Desenvolver Sistema Web é arte? A Web oferece espaço para arte mas usuários também querem serviços de qualidade... e clientes querem prazos e orçamento cumpridos z Desenvolver Sistema Web é engenharia? Sim, eles são complexos e formados por vários componentes interconectados... São desenvolvidos por equipes de especialistas... que utilizam métodos, técnicas e ferramentas específicos... e devem cumprir prazos e custos estimados,... mas sem arte eles seriam muito chatos!

27 Sistema sem arte Engenharia de Sistemas Web z Sistemas Web precisam ser desenvolvidos baseados em princípios de engenharia z Engenharia Desenvolvimento de um produto complexo Equipe de pessoas especializadas Aplicação de métodos, técnicas, ferramentas modelos e princípios Planejamento e gerenciamento de custos, prazos e pessoal Qualidade do produto e do processo

28 Ferramentas de design de interface para Web z Design Macromedia DreamWeaver MS Frontpage Adobe GoLive z Imagens Adobe Illustrator Adobe Photoshop Macromedia Freehand z Texto MS Word QuarkXPress Adobe Acrobat z Diagramação Adobe Pagemaker z Animações Macromedia Flash Conclusão z Vimos a aplicação de conceitos de IHC no desenvolvimento de interface de usuário para sistemas Web z Apresentamos um framework baseado nos modelos da Engenharia Cognitiva e Semiótica z Ênfase em aspectos de comunicabilidade e usabilidade z Os problemas listados e as diretrizes propostas estão longe de ser exaustivos... z Mas oferecem um bom roteiro!