Jair C Leite DIMAp - UFRN

Transcrição

1 Design e Usabilidade de Sistemas Web Jair C Leite DIMAp - UFRN Roteiro z Desenvolvimento e Design Sistemas Web Métodos de Desenvolvimento e Design Tecnologias z Usabilidade, Interatividade e Comunicabilidade Problemas Modelos teóricos Estudo de casos Diretrizes z Estrutura e Estética Estudo de casos Diretrizes

2 Parte I Desenvolvimento e Design de Sistemas Web Sistema Web z Sistema computacional implementado na plataforma Web. z Conjunto de software e hardware necessários para o funcionamento de um Web Site z Do ponto de vista do usuário é o Web Site. Internet Usuário Browser Servidor Web

3 Visão geral da Web Usuário em casa Usuário em INTERNET Usuário em Site em Link Site em Modelos e tecnologias principais z Arquitetura Cliente-Servidor z Hipertexto z Protocolo HTTP z Linguagem HTML z Endereçamento através da URI Usuário Browser (cliente) HTTP + URI HTML, GIF,... Internet Servidor HTTP Documento (arquivos HTML) Aplicação (programa)

4 Interface de usuário e núcleo funcional em Sistemas Web z A interface de usuário é responsável pela visualização e envio de informações no lado cliente z O núcleo funcional é responsável pelo processamento destas informações e pela geração dinâmica da interface no lado servidor z Cliente e servidor se comunicam pela Internet Interface de Usuário Núcleo funcional Cliente Internet Servidor Tecnologias do lado cliente Plug-in HTML Scripts Document Object Model Módulo Compilado (Applets, ActiveX) Cliente Internet

5 Tecnologias do lado servidor Solicitação HTTP Página HTML Servidor HTTP Arquivos HTML,GIF, Programas Servidor aplicativos Cliente Internet Propósitos de Sistemas Web z Informativo Prestar informações z Funcional Oferecer serviços z Entretenimento Divertir pessoas z Alguns sites têm múltiplos propósitos Informativo Funcional Entretenimento

6 Exemplos 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 Escopo de Web Sites 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

7 Complexidade de Sistemas Web complexo WS criado dinamicamente Aplicações baseadas na Web WS com entrada de dados WS puramente estáticos simples informativo WS para consulta a base de dados aplicativo Problemas comuns z Web Sites mal definidos e projetados z Necessidade de atualização constante das informações: eternamente em construção z Evolução extremamente rápida da tecnologia z Falta de modelos do processo z Planejamento errado e estouro dos prazos e custos z Equipes mal organizadas e sem a competência adequada z Falta de documentação e dificuldades de implementação e manutenção

8 Por que eles ocorrem? z Tipicamente um Sistema Web é desenvolvido sem planejamento ou projeto, indo-se diretamente para a implementação z Normalmente não são feitas a definição de objetivos a análise dos requisitos, o design, os testes e a manutenção z As pessoas consideram que basta saber HTML e um pouco de programação para desenvolver um Sistema Web z As competências profissionais são muitas e não são encontradas num único profissional, mas em um time de profissionais qualificados. 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

9 Qualidades de um Sistema Web z Legível z Atrativo z Organizado z Correto z Atualizado z Adequado aos usuários z Adequado à tecnologia z Adequado ao propósito z Funcional z Eficiente z Robusto e confiável z Bem documentado z Manutenível z Testável z Portável z Reutilizável Ciclo de vida do Software z Fases pela qual o software passa durante sua vida útil z Três fases principais: Definição Desenvolvimento Operação

10 Fase de definição z Análise de requisitos, restrições e recursos z Proposta de soluções z Estudo de viabilidade z Planejamento e gerenciamento do desenvolvimento z Estimativas e análise de riscos utilizando métricas z Protótipos de apresentação Fase de desenvolvimento z Design de Software Design conceitual Design da interface de usuário Design da arquitetura de software Design de algoritmos e estruturas de dados z Implementação Codificação e Tradução Testes de programas e testes de usabilidade

11 Fase de operação z Distribuição z Implantação Instalação configuração z Utilização z Operação e Suporte z Manutenção Correção Evolução Processo de desenvolvimento Análise Design Implementação Protótipo inicial Protótipo funcional Sistema final Avaliação Cliente Voluntários Usuário reais Tempo de desenvolvimento

12 Descrevendo o problema z Atualmente a empresa gasta uma uma grande quantidade de de dinheiro com com a elaboração de de catálogos e folhetos informativos. z Clientes estão constantemente solicitando os os catálogos e eles eles precisam ser ser rapidamente atualizados e enviados z A empresa precisa aumentar as as vendas em em locais distantes z Investidores têm têm interesses em em obter dados financeiros da da empresa z Conclusão: Espera-se que que um um Web Web Site Site atenda a estas necessidades. Pode-se economizar em em catálogos e folhetos e oferecer dados financeiros a investidores. As As vendas a clientes podem ser ser feitas remotamente Possíveis soluções z Solução A Um Web Site informativo que possibilite a divulgação de informações. Páginas ilustradas com informações sobre os produtos. Planilhas com dados financeiros em paginas e gráficos. z Solução B Um Web Site funcional com uma base de dados que possibilite a busca a diversos produtos. Os dados são fornecidos em tabelas. Os dados financeiros são da base de dados financeiros. A base de dados não armazena figuras ou gráficos

13 Estudo de viabilidade z Solução A Tecnologia necessária: HTML, CSS, Servidor HTTP, Computador de 200MHz e disco de 10GB Custos: Hardware R$5000,00, Software R$1000 Prazos: 3 meses z Solução B Tecnologia necessária: HTML, CSS, Servidor HTTP, JavaScript, CGI, Interpretador Perl, Servidor de Banco de dados, Computador de 500MHz e disco de 10GB Custos: Hardware R$ 7000,00, Software R$ 4000,00 Prazos: 8 meses Análise de Usuários 1/3 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

14 Análise de Usuários 2/3 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? Análise de Usuários 3/3 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

15 Análise de Tarefas 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 Requisitos z Requisitos operacionais Qual a tecnologia necessária? Qual é possível? z Requisitos de conteúdo Quais informações o site deve conter? z Requisitos funcionais Quais serviços o site deve oferecer? z Requisitos de interação Como o usuário vai utilizar o site? z Requisitos de desenvolvimento Pessoal, prazos, custos e equipamentos

16 Requisitos operacionais 1/2 z Tem por objetivo definir o ambiente operacional do site z São definidos com base no: Escopo do site: intranet, internet ou extranet Propósito do site: funcional, informativo, entretenimento z Fácil de definir numa intranet, mas imprevisível na internet. z Restrições de custos Requisitos operacionais 2/2 z Lado servidor Capacidade do hardware Sistemas operacional Servidor Web Servidor de Banco de Dados z Lado Cliente Capacidade do hardware Tipo do browser Velocidade da conexão

17 Requisitos de conteúdo z Quais informações incluir? Depende do propósito do site z Site coorporativo Informações gerais: objetivos, histórico da empresa, pessoal Informações sobre os serviços Informações de ajuda z Pode-se transportar os conteúdos impressos, adaptando-o ao novo meio. Requisitos funcionais z Determinam qual a funcionalidade do site z Quais os serviços serão oferecidos z Não deve determinar como o site serão implementados z Exemplos: Busca de produtos, Cálculos de juros, Exibição de vídeo z Podem ser descritos através de modelos

18 Descrevendo requisitos usando Casos de Uso Cadastramento Validar usuário Cadastrar produtos Busca produto Comprador Escolher produto Atualizar preços Funcionário da loja Fazer pagamento Sistema de venda na Web Design do Sistema Web z Design conceitual Descrição geral do domínio e do sistema z Design do conteúdo Informações que deve fornecer ao usuário z Design da interface de usuário Organização, interação, apresentação z Design funcional Arquitetura dos programas Projeto de banco de dados

19 Design conceitual z Diagrama de Classes ou Entidade-Relacionamento CD DVD Livro Cliente escolhe Produto armazenado Estoque contém verifica possui Carrinho de compra Gerente compra Fornecedor Design da interface do site z Organização Determinar como as páginas estão organizadas z Navegação Determinar como o usuário pode navegar z Interação Determinar como os serviços podem ser utilizados z Apresentação Aspectos estéticos e visuais

20 Design funcional z Arquitetura dos componentes funcionais Lógica Física zprogramas que implementam os serviços Processamento dos dados Acesso a banco de dados Geração de páginas HTML z Projeto de bancos de dados Arquitetura lógica Formulário 1 Resultados Programa1 Home page Dados Programa2 Formulário 2

21 Notação para Arquitetura lógica Paginas HTML Programa1 Páginas com FORMS Páginas com FRAMES Dados Links Submit Query Componente Páginas com componentes Menu.html Topo.html Logo.gif Corpo.html Foto.gif

22 Arquitetura física Plug-ins Browser Servidor HTTP CGI Arquivos HTML,GIF, Programas aplicativos Arquivos de dados Servidor de Banco de Dados Cliente Internet Servidor Implementação z Codificação das páginas em HTML z Desenho das imagens z Codificação dos programas em uma linguagem compatível com o servidor ou sistema operacional z Criação dos arquivos (tabelas) do banco de dados

23 Testes e avaliação z Correção do conteúdo z Verificação dos elos (links) Os elos sempre levam ao recurso desejado z Testes de correção dos programas Os programas funcionam corretamente z Testes de usabilidade Facilidade de navegar Facilidade aprender e usar os serviços z Testes de portabilidade Funcionamento em todos os browsers e computadores z Teste de desempenho Implantação Plug-ins Browser Servidor HTTP CGI Arquivos HTML,GIF, Programas aplicativos Arquivos de dados Servidor de Banco de Dados Cliente Internet Servidor

24 Hardware e Software de Web Sites Hardware do cliente CPU Memória Monitor Disco Adaptador de rede Software no cliente Sistema operacional Browser Helper e Plug-ins Internet Rede (Internet) Rede física Protocolos de rede Protocolo HTTP Hardware do servidor CPU Memória Disco Adaptador de rede Software no servidor Sistema operacional Servidor HTTP Middleware Banco de dados Considerações do lado cliente Placa de vídeo Velocidade Características Browserdo display tamanho (cliente) resolução número de cores tipo (CRT, LCD,..) tempo fontes Disco Memória tamanho BUS UCP Conexão de rede modem rede local

25 O browser z Tipos de computadores cliente Computador pessoal desktop ou laptop Palmtop Computador de mão WAP Sistemas Web no celular WebTV z Características do monitor Tamanho da tela, Resolução e Cores O browser z O browser 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)

26 Exemplo: IE6 Exemplo: Amaya

27 Diretrizes z Teste a interface em diferentes plataformas z Teste os estilos e scripts 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 Decida entre versões alternativas para as diferentes plataformas ou uma única versão para o tipo de usuário majoritário Considerações sobre a internet z A rede tem um impacto muito forte na utilização dos sites z Variáveis que afetam a velocidade da rede Largura de banda Latência (distância entre origem e destino) Utilização da rede Regra do link mais fraco z Algumas variáveis do desempenho da rede são imprevisíveis

28 Outras características da internet z Comutação de pacotes z Roteamento z Protocolo TCP/IP Tempo de transmissão imprevisível Início lento, possível rapidez posterior z Protocolo HTTP Falta de suporte a proxies e caches na versão 1.0 Falta de informação sobre acessos anteriores z Endereçamento URIs DNS (Domain Name Service) Hardware do lado servidor Conexão de rede BUS Memória CPU Velocidade tamanho Outros servidores

29 Considerações do lado servidor z Hardware Velocidade de CPU, do disco e do barramento são importantíssimos Capacidade de armazenamento O número de acessos requer maior desempenho do servidor