Post on 18-Dec-2014
description
Projeto de Web Sites
Programação para Web I – EADDCC023
Prof. Edmar Welington Oliveira
Universidade Federal de Juiz de Fora – UFJF
Departamento de Ciência da Computação - DCC
Projeto de Sites
Projetar Web Site
Antes de iniciar a construção de um website é importante que haja um
planejamento do projeto. Este planejamento, em geral, é dividido em etapas
para melhor organizar a execução das tarefas. Uma sugestão de metodologia
para este desenvolvimento poderia incluir, por exemplo, as etapas de
Definição, Arquitetura, Design, Implementação. Evidentemente, nem todo
projeto estará pautado nestas etapas (alguns podem ter várias outras). Além
disso, a divisão do trabalho nestas etapas não significa a existência exata de
uma fronteira entre elas. Na verdade, no decorrer do processo as etapas
interagem enquanto são redefinidos detalhes do projeto.
Projeto de Sites
Projetar Web Site
Convém destacar ainda que o trabalho de webdesign, assim como tudo que se
refere à Internet, ainda é uma novidade. Em se tratando de desenvolvimento
Web, metodologias, técnicas e tecnologias se encontram sempre em constante
evolução
Projeto de Sites
Projetar Web Site
Projeto de sites é o planejamento necessário para a elaboração de um web site
qualquer. Para se elaborar um projeto de web site, faz-se necessário analisar
inúmeros fatores. De uma forma geral, o projeto de sites precisa levar em
conta os seguintes itens:
No próximo slide
Projeto de Sites
Características Técnicas
Hospedagem. Onde o site será hospedado e todas as características do host.
Domínio. Envolve a escolha do nome do site e o seu registro
Web Marketing. Toda a estratégia em torno da promoção do site
Web Analytics. Mensuração ou a análise das estatísticas do site.
Tecnologia de programação. Que tecnologia será usada.
Projeto de Sites
Características do Site
Tipos de site. Outro aspecto relevante é considerar o tipo de site que será
projetado. Em uma definição livre, poderemos classificar os sites em: sites
institucionais, portais de conteúdo, blogs, hotsites, intranet, sistema web
based, entre outros.
Arquitetura da informação. Como será a estrutura do site. Aqui podemos
incluir diversos recursos, como: Sistema de busca interno, menu de navegação,
página de contato, home do site, formulário de cadastro, página de impressão,
enquetes e pesquisas, mapa de localização, mapa do site, entre outros.
Layout. Como será a apresentação do site. Considere: Topo do site, rodapé,
tipologia, cores, largura e altura do site, imagens, animações, etc.
Análise e Projeto de Sites
Projeto de Sites
Objetivos do Site
A criação de um web site exige a definição clara dos objetivos do mesmo
Algumas perguntas que podem ajudar neste processo
Quais os objetivos do web site a ser projetado?
Quem é o público (principal e secundário) ?
Qual o perfil deste público?
Etc.
Projeto de Sites
Necessidades dos Usuários
As interfaces dos web sites, independentemente do seu tamanho e dos seus
objetivos, procuram estabelecer relacionamentos personalizados com seus
usuário. Para atender as suas necessidades, é preciso conhecer a fundo os
interesses destes usuários
Usuários satisfeitos voltam ao site, recomendam-no aos amigos, solicitam
menos ajuda. Para atender ao seu público, os gestores e desenvolvedores de
sites precisam se manter atentos às suas necessidades e expectativas em
relação à usabilidade, à localização de informações, à qualidade e natureza do
conteúdo, à experiência de uso.
Projeto de Sites
Necessidades dos Usuários (continuação)
Algumas perguntas que podem ajudar no projeto de um site
Qual o modo de acesso (largura de banda equipamento, local de acesso –
escola, trabalho, residência –, idade, gênero, hábitos).
O que leva o público a procurar o site, que necessidades procura atender?
O que pode ser oferecido?
Como são os usuários prioritários? Há perfis diferenciados? Em caso
afirmativo, como atendê-los, com layout, abordagem editorial
diferenciados?
Se há venda de produtos ou serviços, como é o processo de aquisição? Que
recursos mobiliza? Provê retorno? Motivar as pessoas a comprar?
Que soluções de design podem melhorar o site, ou aperfeiçoar a
experiência dos visitantes? Como implementar estas ideias?
Projeto de Sites
Requisitos de Conteúdo de Funcionais
A definição dos requisitos de conteúdo (como será estruturado, que tipo de
informação será disponibilizada, etc.) e funcionais (para que tipo de dispositivo
será produzido o site, se existe limitações em termos de largura de banda de
internet, etc.) também é de suma importância no desenvolvimento de um site.
Algumas perguntas que devem ser respondidas
Como deve ser a estrutura básica do conteúdo?
O site deverá ser sempre atualizado?
O conteúdo (textos, imagens, vídeos, áudios) vai ser produzido
especialmente para o site?
O site deve ser visualizado de maneira diferenciada por diferentes
dispositivos ou deve aparecer exatamente igual em todos?
Etc.
Projeto de Sites
Arquitetura da Informação
Arquitetura da informação pode ser descrita como a arte e a ciência de
organizar a informação para ajudar as pessoas a satisfazer suas necessidades
de informação de forma efetiva, o que implica organizar, navegar, marcar e
buscar mecanismos nos sistemas de informação.
A arquitetura da informação deve tornar clara a missão e visão do site,
equilibrando as necessidades da organização que o patrocina com as
necessidades da audiência. Deve também determinar o conteúdo e as
funcionalidades do site, especificando como os usuários vão encontrar
informações através da sua organização, rotulagem e sistemas de buscas. E
prever como o site vai mudar e evoluir ao longo do tempo.
Projeto de Sites
Estruturação do Espaço Informacional
Compreende
Diagramação
Design/Estruturação da navegação
Ambos são discutidos em material extra (disponível no Moodle)
Mapa de Páginas
Mapa de Páginas - Formalização
Projeto de Sites
Design de Interação (Mapa do Site)
É fundamental que se projete a estrutura do site em termos das páginas a
serem criadas e do relacionamento entre as mesmas. Uma técnica interessante
é criar essa estrutura no papel, através de técnicas como brainstorming. Isso
possibilita que se tenha uma visão geral inicial do projeto, que pode ser
alterado através de discussões entre os interessados.
Projeto de Sites
Design Visual
O design visual de um sie é tão importante quanto os demais quesitos. A
aparência do site deve ser atraente para motivar o leitor interessado no
conteúdo a visitar todo o site e, preferencialmente, com frequência.
Alguns pontos a considerar
Apresentar um formato original e atraente. A consistência no alinhamento
dos elementos, no uso de tipologias e estilos, bem como nas cores dos
elementos reforça a confiança dos usuários nas informações publicadas
Mostrar uma tela sem elementos demais, muitas cores, ou fundos
saturados, para não dificultar a localização dos itens e a sua seleção.
Características das Páginas
Página Inicial (Principal)
Embora tenha a mesma estrutura visual e conceitual do resto do site, uma
página Principal bem diferente das páginas internas sinaliza claramente que
contém referências de acesso para todas as outras. Estudos afirmam que 40%
dos visitantes chegam a um site pelas páginas internas, onde ficam de 25 a 35
segundos. Por isto, a diferenciação da Principal ajuda a orientar os usuários na
estrutura de informações.
É importante manter a aparência da Principal atraente para motivar o leitor
interessado no conteúdo a visitar as páginas internas.
Características das Páginas
Características a considerar na página Principal:
1 - Identificar claramente a localização do usuário e a atividade/conteúdo mais
importante do site e o que este pode oferecer (através do logotipo e/ou do
símbolo, com breve descrição em local bem visível, relação direta do layout
com a atividade e clareza dos títulos das barras de navegação).
Características das Páginas
Características a considerar na página Principal:
2 - Oferecer suporte aos usuários para encontrar o que procuram, através de
ferramentas de busca, contato bem visível e fácil de usar, arquitetura da
informação clara, atalhos para páginas mais profundas na estrutura.
Características das Páginas
Características a considerar na página Principal:
3 - Ter mais área para a navegação do que para conteúdo. Este é o caso em
que a página Principal apresenta apenas chamadas e links para o conteúdo
mais importante. Já as páginas internas apresentam textos e imagens que
desenvolvem os assuntos com mais profundidade.
Características das Páginas
Características a considerar na página Principal:
4 - Informar os assuntos de maneira concisa e direta, para que os leitores não
se dispersem entre as informações e deixem de encontrar o que estão
procurando.
5 - Ser dividida em diferentes seções de acordo com os objetivos estratégicos
da marca e com a estrutura de informações.
Características das Páginas
Páginas Internas
A rigor em um web site todas as páginas são internas, inclusive a Principal, pois
todas fazem parte do canal e a navegação não segue uma ordem linear, como
num livro ou um filme. De qualquer forma, "páginas internas" são aqui
apontadas como as que não incluem a Principal, localizadas na segunda
camada de navegação
Algumas características devem ser consideradas nas páginas web internas para
facilitar o deslocamento e a realização de tarefas. Os próximos slides,
destacamos algumas
Características das Páginas
Características a considerar
Mostrar o logotipo da empresa ou organização em local bem visível, ligado à
página Principal. Isso ajuda ao usuário na identificação do site em que está.
Isso é importante , pois cada vez mais as páginas internas são acessadas
diretamente, sem que o usuário sinta necessidade de passar pela Principal.
Veículos como blogs, ferramentas de busca, e-mails informativos, wikis e
tecnologias como RSS se consolidam como suportes à navegação dos leitores
online e os direcionam para as informações que procuram.
Exemplo
Indicação clara de que o usuário está na
página de Pós-Graduação da UFJF
Características das Páginas
Características a considerar
Apresentar em destaque o nome da página Principal, de preferência no canto
superior esquerdo. O termo de referência pode ser também Home, e pode ser
substituído pelo logotipo o site.
Procurar manter o mesmo estilo nas páginas, para contextualizar a
navegação e orientar o usuário
Manter as informações estruturais de navegação, sobre o site (como
breadcrumb, ferramenta de busca, data de atualização, links relacionados,
mapa do site) e de auxílio ao usuário sempre em locais de fácil acesso e
visualização.
Características das Páginas
Características a considerar
Se o conteúdo for muito extenso, dividir o assunto em um resumo geral numa
página e detalhar o assunto em outra, de forma que o usuário possa decidir se
quer se aprofundar no assunto.
Exemplo
Link para texto mais detalhado
Características das Páginas
Características a considerar
Prover mais informações sobre o assunto da página, como por exemplo imagens
ou fotos ilustrativos, links para páginas do site ou de outros sites ou vídeos
relacionados.
Projeto de Layout
Projetar o Layout
O layout da interface não se relaciona apenas à sua aparência, que contribui
para a experiência subjetiva e emocional de recepção e ação. Na verdade o
estilo visual, com fontes, cores, imagens, composição, é parte integrante do
design da informação e da funcionalidade dos aplicativos online.
O layout da interface influencia a primeira impressão, de caráter subjetivo, do
usuário que usa uma interface online, especialmente daqueles que o fazem
pela primeira vez. A primeira impressão positiva facilita a compreensão da
estrutura do conteúdo e do conceito editorial, bem como da funcionalidade da
interface.
Projeto de Layout
Projetar o Layout
Além de criar empatia imediata com o usuário, o layout da tela influencia a
facilidade de encontrar os fragmentos de informações de maneira intuitiva.
Uma interface saturada, com muitas instruções, sinais, rótulos, demanda mais
tempo de aprendizado de uso e maior esforço para a localização das
informações.
E a falta de pistas visuais, com sinais pouco visíveis, logotipos difíceis de
localizar ou funcionalidades difíceis de decifrar, dificulta a utilização. O layout
influencia também como o visitante do site se posiciona em relação ao seu
conteúdo. Um layout agradável inspira confiança e estimula a navegação em
diferentes páginas. Neste aspecto, a questão da diagramação é importante,
pois especifica onde e como os elementos de uma página ficarão dispostos.
Projeto de Layout
Projetar o Layout
A organização visual das informações está também relacionada ao
deslocamento entre as páginas e às indicações do conteúdo disponível,
orientando assim a ação do usuário.
Mapa do Site
Definição
Mapa do site é a expressão pela qual são conhecidas as páginas que listam as
páginas de um site, ou as páginas principais das principais seções, geralmente
dispostas de maneira hierárquica. Representa visualmente a arquitetura de
informações com as suas subordinações internas. Ajuda o usuário a localizar
informações, bem como a visualizar a localização de cada área em relação à
estrutura geral.
Mapa do Site
Mapa do Site
Mapa do Site
Algumas Características
Para evidenciar a relação hierárquica entre as áreas de informações, o mapa
do site enfatiza a importância das páginas iniciais de cada uma das áreas e
facilita a visualização das subordinações.
Entre em Contato
Página de Contato
Na Página Principal, deve ser facilmente encontrado
A página de contato deve ser clara e objetiva
As informações para contato devem ser facilmente visualizadas
É interessante oferecer mais de uma opção de contato
Ex: telefone e e-mail
Exemplo
Opção para telefone
Envio de mensagem
Projeto de Web Sites
Programação para Web I – EADDCC023
Prof. Edmar Welington Oliveira
Universidade Federal de Juiz de Fora – UFJF
Departamento de Ciência da Computação - DCC