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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

 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

Browser Servidor
Usuário Web
'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH
Visão geral da Web

Usuário Usuário em
em casa www.stanford.edu

INTERNET

Usuário em
www.ufrn.br

Site em Site em
www.ufrn.br www.w3.org
Link

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Modelos e tecnologias principais

z Arquitetura Cliente-Servidor
z Hipertexto
z Protocolo HTTP
z Linguagem HTML
z Endereçamento através da URI

HTTP + URI Documento

HTML, GIF, ... (arquivos
HTML)
Internet
Browser Servidor
Usuário (cliente) HTTP
Aplicação
(programa)
'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH
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 Núcleo funcional

de Usuário

Internet
Cliente Servidor

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Tecnologias do lado cliente

Document
Object
Model

HTML
Scripts
Plug-in Módulo Compilado
(Applets, ActiveX)

Internet
Cliente

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Tecnologias do lado servidor

Solicitação
HTTP
Servidor Arquivos
HTTP HTML,GIF,

Página Servidor
Programas
HTML aplicativos

Internet
Cliente

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Propósitos de Sistemas Web

z Informativo
– Prestar informações
z Funcional
– Oferecer serviços
Informativo
z Entretenimento
– Divertir pessoas
Funcional
z Alguns sites têm múltiplos
propósitos
Entretenimento

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Exemplos

Portais Biblioteca digital

Jornais e Banco
revistas Informativo

Manuais Comércio
on-line Funcional

Rádios
Museus
Vídeo sob
Entretenimento
demanda
Livros
Sexo
Parques
temáticos

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Complexidade de Sistemas Web

complexo
WS criado
dinamicamente
Aplicações
baseadas
na Web

WS para consulta
WS com entra- a base de dados
da de dados
WS puramente
estáticos
simples
informativo aplicativo

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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.

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Qualidades de um Sistema Web

z Legível z Funcional
z Atrativo z Eficiente
z Organizado z Robusto e confiável
z Correto z Bem documentado
z Atualizado z Manutenível
z Adequado aos usuários z Testável
z Adequado à tecnologia z Portável
z Adequado ao propósito z Reutilizável

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Descrevendo o problema

zz Atualmente
Atualmenteaaempresa
empresagasta
gastauma
umagrande
grandequantidade
quantidadede
de
dinheiro
dinheirocom elaboraçãode
comaaelaboração decatálogos
catálogoseefolhetos
folhetos
informativos.
informativos.
zz Clientes
Clientesestão
estãoconstantemente
constantementesolicitando
solicitandoos oscatálogos
catálogoseeeles
eles
precisam ser rapidamente atualizados e enviados
precisam ser rapidamente atualizados e enviados
zz AAempresa
empresaprecisa
precisaaumentar
aumentaras asvendas
vendasem emlocais
locaisdistantes
distantes
zz Investidores
Investidores têm interesses em obter dados financeirosda
têm interesses em obter dados financeiros da
empresa
empresa
zz Conclusão:
Conclusão:Espera-se
Espera-seque
queumumWebWebSite
Siteatenda
atendaaaestas
estas
necessidades.
necessidades.Pode-se
Pode-seeconomizar
economizarem emcatálogos
catálogoseefolhetos
folhetosee
oferecer
oferecerdados
dadosfinanceiros
financeirosaainvestidores.
investidores.As Asvendas
vendasaaclientes
clientes
podem
podemserserfeitas
feitasremotamente
remotamente

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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 4XHUR
FDGDVWUDU FRPSUDU
OLYUR
RV SUHoRV
GRV OLYURV

IXQFLRQiULR FOLHQWH
'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH
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?

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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
'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH
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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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.

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Descrevendo requisitos usando Casos de Uso

Cadastramento

Validar usuário
Cadastrar produtos

Busca produto

Comprador Atualizar preços

Funcionário
Escolher produto da loja

Fazer pagamento
Sistema de venda na Web

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Design conceitual

z Diagrama de Classes ou Entidade-Relacionamento

CD DVD Livro

escolhe armazenado
Cliente Produto Estoque

contém verifica

possui compra
Carrinho Gerente Fornecedor
de compra

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Design funcional

z Arquitetura dos componentes funcionais

– Lógica
– Física
z Programas 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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Arquitetura lógica

Formulário 1

Programa1
Resultados

Home page Dados

Programa2

Formulário 2

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Notação para Arquitetura lógica

Paginas
HTML Programa1

Dados
Páginas
com FORMS
Links

Submit
Páginas
com FRAMES Query

Componente

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Páginas com componentes

Logo.gif
Menu.html Topo.html

Foto.gif
Corpo.html

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Arquitetura física

Plug-ins Arquivos Arquivos

HTML,GIF, de dados
Servidor
HTTP
Servidor
CGI Programas de Banco
aplicativos
de Dados
Browser

Internet
Cliente Servidor

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Implantação

Plug-ins Arquivos Arquivos

HTML,GIF, de dados
Servidor
HTTP
Servidor
CGI Programas de Banco
aplicativos
de Dados
Browser

Internet
Cliente Servidor
'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH
Hardware e Software de Web Sites

Internet
Hardware do cliente Rede (Internet) Hardware do servidor
CPU Rede física CPU
Memória Protocolos de rede Memória
Monitor Protocolo HTTP Disco
Disco Adaptador de rede
Adaptador de rede Software no servidor
Software no cliente Sistema operacional
Sistema operacional Servidor HTTP
Browser Middleware
Helper e Plug-ins Banco de dados

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Considerações do lado cliente

Velocidade

Placa de vídeo

Disco BUS
Conexão de rede
modem
Browserdo display Memória UCP rede local
Características
tamanho(cliente)
resolução tamanho
número de cores
tipo (CRT, LCD,..)
tempo
fontes

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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)

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Exemplo: IE6

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Exemplo: Amaya

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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
'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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)

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

Hardware do lado servidor

BUS
Conexão
de rede
Memória CPU

Velocidade tamanho
Outros
servidores

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH

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

'HVLJQ H 8VDELOLGDGH HP 6LVWHPDV :HE ‹  -DLU & /HLWH