Tópicos de Ambiente Web Web Design III



Documentos relacionados
UFCD 0152 Estrutura de um sítio para Internet

Tópicos de Ambiente Web. Modulo 2 Processo de desenvolvimento de um site Professora: Sheila Cáceres

Interação Humano-Computador Design: estrutura e estética PROFESSORA CINTIA CAETANO

Projeto de Interface do Usuário

Podemos também definir o conteúdo dos menus da página inicial. Clique em Menus, Main Menu.

Sistema de Navegação Guilhermo Reis

02 - Usando o SiteMaster - Informações importantes

REFORMULAÇÃO SITE ARCA BRASIL

edirectory Plataforma ios / Android

CONCEITOS INICIAIS. Agenda A diferença entre páginas Web, Home Page e apresentação Web;

Critérios. Melhores Práticas e Regras

Manual de Riverside Digital - Windows

3 - Projeto de Site:

Análise de usabilidade de menus de navegação em portal com grande quantidade de informação e vários níveis hierárquicos

Novell. Novell Teaming 1.0. novdocx (pt-br) 6 April 2007 EXPLORAR O PORTLET BEM-VINDO DESCUBRA SEU CAMINHO USANDO O NOVELL TEAMING NAVIGATOR

HTML5. Prof. Salustiano Rodrigues de Oliveira

Desenvolvimento Web Usabilidade na Web aula I introdução e o design geral do site. Prof.: Bruno E. G. Gomes IFRN

Web Design. Prof. Felippe

Testes de Usabilidade

Construção Páginas de Internet

Utilizar o Microsoft Offi ce OneNote 2003: Iniciação rápida

WEB DESIGN LAYOUT DE PÁGINA

AVALIAÇÃO DE INTERFACES UTILIZANDO O MÉTODO DE AVALIAÇÃO HEURÍSTICA E SUA IMPORTÂNCIA PARA AUDITORIA DE SISTEMAS DE INFORMAÇÕES

think with técnicas infalíveis para ter o melhor 25site mobile

Introdução ao Tableau Server 7.0

Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.

edirectory ios / Android Plataforma

Interface Usuário Máquina. Aula 06

Curso de Capacitação em Gerenciador de Conteúdo PLONE

Projeto Pé na Dança. Bruno Barros Comunicador Visual /

CONSTRUÇÃO DE BLOG COM O BLOGGER

ÍNDICE. 1. Introdução O que é o Sistema Mo Porã Como acessar o Site Mo Porã Cadastro do Sistema Mo Porã...


Como planejar, manter e aprimorar o. Como planejar, manter e aprimorar o site de sua Unidade Escoteira Local

ANÁLISE DE SITES EDUCACIONAIS PELO PROFESSOR E PELO ALUNO

CAPÍTULO 35 Como utilizar os componentes ColdFusion

Google Drive: Acesse e organize seus arquivos

COMO USAR OS VÍDEOS ONLINE PARA ALAVANCAR O MEU E-COMMERCE

Lição 2: O que Faz um Canal Funcionar?

E-books. Guia para Facebook Ads. Sebrae

ZS Rest. Manual Profissional. BackOffice Mapa de Mesas. v2011

Channel. Visão Geral e Navegação. Tutorial. Atualizado com a versão 3.9

Construção de um WebSite. Luís Ceia

WordPress Institucional UFPel Guia Rápido

ebook Aprenda como aumentar o poder de captação do seu site. por Rodrigo Pereira Publicitário e CEO da Agência Retina Comunicação

UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ PROGRAMA DE PÓS GRADUAÇÃO EM FORMAÇÃO CIENTÍFICA, EDUCACIONAL E TECNOLÓGICA PPGFCET

Menus Personalizados

AUTOR: DAVID DE MIRANDA RODRIGUES CONTATO: CURSO FIC DE PROGRAMADOR WEB VERSÃO: 1.0

INSTRUMENTO NORMATIVO 004 IN004

CARLOS RENATO PARAIZO RA ANÁLISE DO PORTAL. educarede.org.br

Introdução. João Sá Marta 1 1/28/10

#10 PRODUZIR CONTEÚDO SUPER DICAS ATRATIVO DE PARA COMEÇAR A

Adapti - Technology Solutions Leonor cardoso nº 331 Fone : (041) Curitiba - PR MANUAL DO USUÁRIO

Manual / Apostila Sistemas Prosol. Pro Guias / Arquivo e Pro Gerenciador

Windows 7. Professor: Jeferson Machado Cordini

ROTEIRO PARA INSCRIÇÃO NO AMBIENTE VIRTUAL DE APRENDIZAGEM (AVA) FASB-MOODLE. Elaborado por: Cristiano de Oliveira Farias Professor FASB

Guia de criação de layout de Loja Virtual

Manual de Atualização MATERIAL DE APOIO - KB IMÓVEIS

Conectar diferentes pesquisas na internet por um menu

ALUNES MANUAL DO USUÁRIO. Guia rápido Alunes

SUAP Módulo Protocolo Manual do Usuário DTI DIRETORIA DE TECNOLOGIA DA INFORMAÇÃO SEÇÃO DE PROJETOS, SISTEMAS E PROCESSOS DE NEGÓCIO

Arquitetura de Informação

SEU SITE FUNCIONA? Teste rápido de Usabilidade e Comunicação Web

Iniciação à Informática

Manual de Utilizador. Disciplina de Projecto de Sistemas Industriais. Escola Superior de Tecnologia. Instituto Politécnico de Castelo Branco

Princípios de Design TRADUÇÃO DE TATIANE CRISTINE ARNOLD, DO ARTIGO IBM DESIGN: DESIGN PRINCIPLES CHECKLIST.

ÍNDICE... 2 POWER POINT Abas... 7 Salvando Arquivos... 8 Abrindo um arquivo LAYOUT E DESIGN... 13

O Windows 7 é um sistema operacional desenvolvido pela Microsoft.

A quem se destina. Referência. Coordenadores de Matrícula e Suportes ao SIGE das Subsecretarias Regionais. Google Maps maps.google.com.

Joomla - Instituto Psicologia. Agenda. 1. Apresentação do Joomla

AULA 1 Iniciando o uso do TerraView

Microsoft Windows. Aspectos gerais

Guia de Referência do Usuário

Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização

Manual de criação de envios no BTG360

Melhores práticas no planejamento de recursos humanos

Apresentado por: Marcos José

Arquitetura de Redes: Camadas de Protocolos (Parte I) Prof. Eduardo

Manual Geral do OASIS

10 DICAS PARA TURBINAR SEU PACOTE DE DADOS. 1 - Desative os Dados do Celular. 2 Remova as notificações e atualizações automáticas

Microsoft Access: Criar relações para um novo banco de dados. Vitor Valerio de Souza Campos

Manual do usuário. v1.0

Construtor de sites SoftPixel GUIA RÁPIDO - 1 -

COMO ENGAJAR UM FUNCIONÁRIO NO PRIMEIRO DIA DE TRABALHO?

ASSOCIAÇÃO CRISTÃ DE MOÇOS DO RIO GRANDE DO SUL DEPARTAMENTO DE TECNOLOGIA DA INFORMAÇÃO

Manual de Configuração

Guia de Início Rápido

Relatório de Análise de um Sítio Web - UPTEC -

Manual do. Modular Object-Oriented Dynamic Learning Environment. Manual do

UNIVERSIDADE FEDERAL DE PELOTAS ÍNDICE

CAPÍTULO 4. AG8 Informática

ClinicalKey 2.0. Guia do usuário

Como criar formulário com o Google Drive

gerenciamento de portais e websites corporativos interface simples e amigável, ágil e funcional não dependendo mais de um profissional especializado

Procedimentos para Reinstalação do Sisloc

Transcrição:

Tópicos de Ambiente Web Web Design III Professora: Sheila Cáceres

Conteúdo para Web Educacional Entretenimento Comercial Industrial Cientifico Entre outros Tópicos de Ambiente Web - Prof. Sheila Cáceres 2

Usabilidade Usabilidade é um termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante. Definição da International Organization for Standardization (norma ISO 9241): Usabilidade é a medida pela qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade, eficiência e satisfação em um contexto de uso específico (ISO 9241-11). Tópicos de Ambiente Web - Prof. Sheila Cáceres 3

Para que um Web Site seja considerado de boa qualidade e usável deve ter elementos fundamentais como: Legivel Correto Adequado à tecnologia Eficiente Portável Atrativo Atualizado Adequado ao propósito Robusto e confiável Reutilizável Organizado Adequado aos usuários Funcional Bem documentado. Tópicos de Ambiente Web - Prof. Sheila Cáceres 4

Usuário Usuários não leem, olha rapidamente Usuários apreciam qualidade e credibilidade São impacientes e querem rapidamente obter seu objetivo. Não fazem escolhas ótimas Tópicos de Ambiente Web - Prof. Sheila Cáceres 5

Portanto: Não faça o usuário pensar, deixo tudo obvio. Não abuse da paciencia do usuário Tópicos de Ambiente Web - Prof. Sheila Cáceres 6

Portanto: Atraia a atenção do usuário Mantenha as coisas bem simples e entendíveis Comunique-se efetivamente com uma linguagem adequada Use convenções Teste seu site. Tópicos de Ambiente Web - Prof. Sheila Cáceres 7

Estruturação da informação A estrutura deve permitir visualizar de forma fácil e clara, os conteúdos de um conjunto de páginas Web. Uma boa estrutura, facilitar a navegação, porque requer menos esforço cognitivo e ajuda a uma melhor assimilação da informação. A estruturação da informação pode depender muito do conteúdo do site, das finalidades e do tipo de utilizadores (deficiências, experiência, etc.) Tópicos de Ambiente Web - Prof. Sheila Cáceres 8

Linear Figura 1 A informação linear está organizada de forma a que, para ser recuperada, não necessita referências a si mesma ou outras informações externas. Só existem duas possibilidades de navegação: para a frente ou para trás. É perfeitamente fiável, mas monotonamente previsível, seguindo a lógica tradicional da transmissão da informação. O hipertexto/hipermedia é intrinsecamente não linear, o que não é sinónimo de incapacidade para suportar a sequencialidade. Tópicos de Ambiente Web - Prof. Sheila Cáceres 9

Hierarquica Esta estrutura simples é a base da classificação, da organização administrativa ou das árvores genealógicas. A organização do conteúdo, na base hipertexto faz-se de forma hierárquica, com a informação mais geral no topo, e a mais detalhada, em níveis mais baixos, submetida à mais geral. Todos os nós descendem de uma raiz comum. De cada nó podem sair múltiplas ligações para outros nós de nível inferior na hierarquia. A organização hierárquica resultante, ajuda o utilizador a criar um modelo mental coerente da base da informação. Tópicos de Ambiente Web - Prof. Sheila Cáceres 10

Estrela/radial Possuem um nó central e principal, e um conjunto de nós ligados a este. A passagem de um nó a outro requer sempre o regresso ao "local central". Adapta-se a conteúdos, onde, por exemplo, existe um tópico principal, do qual fazem parte vários subtópicos. Ícones nesse nó principal, podem estabelecer ligações a conteúdos mais específicos desse assunto, regressando de novo ao local central para o estabelecimento de uma nova ligação. Tópicos de Ambiente Web - Prof. Sheila Cáceres 11

Rede A essência do hipertexto reside na liberdade deixada ao utilizador para seguir as ligações que desejar. O utilizador tem um completo controlo sobre o seu caminho a seguir. Este tipo de navegação totalmente livre, a que Jonassen (1989), chamou de hipertexto não estruturado. Nesta rede, um nó está sempre ligado a todos os outros nós. Tudo pode ser ligado com tudo. Não existe por essa razão nenhuma estrutura conceptual geral. As associações não estão delimitadas por regras estritas como em outras estruturas. Tópicos de Ambiente Web - Prof. Sheila Cáceres 12

Composta O hipertexto/hipermedia está em conjuntos de nós, ficando cada conjunto acessível a outro conjunto. Cada conjunto estará explicitamente organizado para representar em desenho a estrutura da informação. A estrutura geral é constituída por vários modelos conceptuais. Tópicos de Ambiente Web - Prof. Sheila Cáceres 13

Se a estrutura não tiver uma organização lógica, não é facilmente compreensível, o que consequentemente vai dificultar a formação de modelos mentais de representação da informação. A navegação livre, potencialmente mais expressiva, apresenta-se também potencialmente mais confusa. Ao aumentar a autonomia, aumenta também a possibilidade do utilizador se desorientar e sofrer sobrecarga cognitiva. Por outro lado, estruturas muito previsíveis, limitam a iniciativa do utilizador. Tópicos de Ambiente Web - Prof. Sheila Cáceres 14

Tópicos de Ambiente Web - Prof. Sheila Cáceres 15

Navegação Quantas vezes chegamos a um Website e temos dificuldade em perceber onde está a informação que procuramos? E o que fazemos nesses casos? Vamos ao próximo site da lista do Google! O menu de navegação de um Website é um dos elementos de vital importância para o bom desempenho do mesmo. Tópicos de Ambiente Web - Prof. Sheila Cáceres 16

Navegação O Menu de Navegação nos permite chegar o à parte do site que nos interessa. Isso deve ser com o máximo de rapidez e o mínimo de esforço para o usuário. DICAS: 1.Use um sistema de navegação global em todas as páginas (colocar em todas as páginas a links para às páginas principais do site, como a Home Page, Site Map, Contactos, etc) 2.Seja consistente. Tente ter o mesmo menu em todas as páginas, a mesma estrutura, cores, tipo de letra, etc. Tópicos de Ambiente Web - Prof. Sheila Cáceres 17

Navegação 3.Seja obvio e claro. Facilite a procura e navegação por parte dos seus visitantes. Cumpra as expectativas! 4.Dirija o visitante do geral para o particular. Começo: páginas generalistas e abrangentes, e a médida que entramos acharemos mais detalhes e pormenores. 5.Evite "becos sem saída". Todas as páginas devem de levar a algum sítio. 6.Faça o mais óbvio e simples que conseguir. Copie Menus com provas dadas de funcionamento em vez de tentar inventar algo completamente novo. Tópicos de Ambiente Web - Prof. Sheila Cáceres 18

Percurso Visual Estudos mostraram que o olho do usuário da internet médio percorre geralmente a página web de acordo com um andamento global zigzag, que começa no ângulo superior esquerdo, até ao ângulo inferior direito. A zona central superior representa assim um lugar particularmente estratégico para colocar informações. Tópicos de Ambiente Web - Prof. Sheila Cáceres 19

Lembrando dicas... Logotipo do website na parte superior esquerda. Um clique neste logotipo conduz directamente à página inicial do síte; Link para a página inicial presente em cada página do site; Elementos de navegação presentes em cada página, para permitir ao utilizador situar-se no site e voltar facilmente à rubrica inicial. Tópicos de Ambiente Web - Prof. Sheila Cáceres 20

Mas formalmente: Sistema de Navegação Trata-se de especificar os modelos de navegação que serão vistos pelo usuário de forma que possam se mover pelo espaço informacional e hipertextual. O sistema de navegação se apresenta em dois níveis de localização ou possui duas funções básicas para o usuário (Reis, 2007; Nielsen, 2000) indicar sua localização: mostra a posição do usuário em relação ao website como um todo e identifica em que website o usuário está; mostrar o caminho correto para seguir e chegar ao seu destino: posiciona o usuário em relação à estrutura interna do website. Tópicos de Ambiente Web - Prof. Sheila Cáceres 21

Bibliografia http://www.criarweb.com/webdesign/ Acessado em Mar 25, 2013. http://www.mundowsionline.com/_blog/internet_marke ting_success_blog/post/menu_de_navega %C3%A7%C3%A3o_num_Website/ Acessado em Mar 25, 2013. Desenho de Páginas Web, Alguns aspectos de funcionalidade, Manuel Meirinhos, 2001 http://uxdesign.smashingmagazine.com/2008/01/31/10 -principles-of-effective-web-design/ Tópicos de Ambiente Web - Prof. Sheila Cáceres 22