universidade do estado da bahia – uneb / profª josemeire machado dias :: 2012universidade do...

Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias :: 2012Universidade do Estado da Bahia – UNEB / Profª Josemeire Machado Dias ::

Uma visão Geral sobre Webdesign e Interfaces

Uma conversa sobre Internet e Design para WebAvaliação de Interfaces

Josemeire Machado Dias 2012



Novas atividades, novas funções

A Internet comercial provocou o surgimento de novas atividades e funções:

Webdesigner

Webdeveloper

Webmaster

Webwriter = redação de matérias e textos para sites

Websurfer = Manutenção de Páginas

Tem mais???



Webdesign – O sentido da Palavra

Mecanismos de

Interação

Representação Visual

Webdesign(O “artista”)

Webdeveloper

(Programador)



Fases (épocas) do Web design

Sites “Cartão de Visita”;

Sites institucionais com informações sobre a empresa e um certo número de páginas;

Sites com o oferecimento de alguns serviços;

Sites complexos compostos por diversas tecnologias

Sites participativos = Chamado Web2.0

Emitam opinião sobre a Web 2.0...

E a Web 3.0...




Web 3.0 “A Web 3.0 propõe-se a ser, num período de cinco a dez anos,

a terceira geração da Internet. A primeira, Web 1.0, foi a implantação e popularização da rede em si; a Web 2.0 é a que o mundo vive hoje, centrada nos mecanismos de busca como Google e nos sites de colaboração do internauta, como Wikipedia, YouTube e os sites de relacionamento social, como o Facebook e Orkut. A Web 3.0 pretende ser a organização e o uso de maneira mais inteligente de todo o conhecimento já disponível na Internet”.

Exemplo:

http://www.cortex-intelligence.com/engine/





Fonte da Imagem: http://citec.crpconsultores.com.br/





Marcelo Tas | O que é Web 2.0

Vídeo com a opinião de Tas...





Mashup é um website ou uma aplicação web que usa conteúdo de mais de uma fonte para criar um novo serviço completo.

O termo mashup deriva da prática do hip-hop de mixar trechos de música e vem sendo empregado por diversos sites na internet, com o objetivo de combinar informações de várias fontes num único endereço*




Exemplo de Mashup

*




Vídeo extraído do Olhar Digital | Sobre Mashup



Webdesign x Design Impresso

O que diferencia um do outro?




Design Impresso – todos vêem a mesma coisa;

Design Web - depende:

Da Resolução de tela do usuário;

Da capacidade da placa de vídeo do usuário;

Do Navegador utilizado

Chrome, Opera, Explorer, Mozilla

Da versão do Navegador

Do sistema operacional

Da existência de plug-ins, etc.




Do Navegador utilizado

Internet Explorer e Fire Fox

Os controles somem e não funciona o vídeo





Fonte: Revista INFO 2010.





Tamanho da Tela do monitor e resolução

Medida Resolução

14” 800x600

15” 800x600

17” 1024x768

19” 1280x1024

21” 1600x1200

Influencia na decisão de projetos a serem apresentados na tela. Qual resolução utilizar?



Quem vê o seu projeto

A utilização de navegadores no Mundo

Fonte: Revista Info Exame. Edição de abril de 2006

Fonte:http://info.abril.com.br/aberto/infonews/052007/04052007-3.shl Acesso 03/10/2007

Atualização do gráfico 05/2007

78% Internet Explorer

15,4% usam o FireFox

2007

2010

2006

Parei aqui em pp



Quem vê o seu projeto

Ainda tem os Daltônicos...

Teste de cores de Ishihara



A linguagem HTML - Ainda é fundamental?

Linguagem de Marcação proveniente da SGML

O básico para o Webdesign

Edição HTML

Frontpage – agora é Microsoft® Expression Web

Dreamweaver - Adobe

Edição de Imagens

Photoshop - Adobe

FireWorks - Adobe

Animação

Flash - Adobe

Ferramentas para o Webdesign Parei aqui em PV



Formatos de Arquivos

São muitos os formatos de arquivos utilizados na Internet, principalmente com surgimento de novas linguagens de programação. Podemos destacar os seguintes:

Imagens

GIF – Graphics Interchange Format

JPG – Joint Photographic Expert Group

Páginas

HTML, htm, asp, php, cfm



Tamanho das Imagens para Web

Para alguns a rede pode ter se tornado um pouco mais rápida graças a Banda Larga, mas para a maioria, que ainda utiliza modens comuns para se conectar, a rede continua lenta!

Pensar no tamanho das imagens

Melhor formato para cada tipo de imagem

Melhor compressão

Photoshop permite a otimização de imagens para Web



Escolha de Fontes para o Webdesign

Como deve ser a escolha de fontes para a internet?O que sabemos sobre isso?




Se perguntarmos a um Webdesigner qual a fonte ideal para um projeto, certamente receberemos como resposta “Fontes sem serifa”, mas poucos saberão explicar o porque...

ESerifa

Limitações dos equipamentos da época geravam falta de legibilidade nas fontes serifadas, o que fez das fontes sem serifa um padrão de utilização.

Devemos utilizar as fontes mais comuns de serem encontradas, como Tahoma, Verdana e Arial. Isso ainda é verdade?

O que acontece se o usuário não tiver em seu computador a fonte especificada no projeto?




http://www.canaldev.com.br/topico/771-font-face/

http://www.fontsquirrel.com/fontface/generator

http://www.rafaelcorreia.net/?pagina=noticia&id=2

Fora do ar !

Fora do ar !



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns=http://www.w3.org/1999/xhtml><head> <meta http-equiv="Content-Type" content="text/html; charset=iso8859-1" /> <title>Teste de Meire para Informática 2012</title><style type="text/css“>@font-face { font-family: Curlz___; font-style: normal; font-weight: normal;

src: url("Curlz___.TTF");}body {

font: 15pt Curlz___;}</style></head><body>Josemeire Machado Dias na aula de Informática da UNEB</body></html>



Sistema de Cores do Webdesign

RedBlue

Green

A cada uma das três cores é atribuído um valor de 0 a 255 que combinados formam todas as outras cores.

A codificação Hexadecimal



Metodologia para Webdesign

Fase 1 - Visão geral

Fase 2 – Planejamento

Fase 3 - Definição de uma Identidade Visual

Fase 4 - Coleta de material

Fase 5 – Desenvolvimento

Fase 6 - Testes

Fase 7 – Correções

Fase 8 – Publicação

Fase 9 - Divulgação do Site

Fase 10 - Manutenção

Além do conhecimento técnico necessário para o desenvolvimento de projetos para web é necessário também uma metodologia de desenvolvimento que direcione ao sucesso do projeto.



Tipos de projetos para Web

Portais Horizontais e Verticais;

Comércio eletrônico;

Sistemas Bancários;

Sistemas Acadêmicos;

Sistemas de Busca;

Sistemas de localização;

Trabalho em Equipe

O desenvolvimento de projetos web que ofereça serviços é quase impossível ser realizado de forma individual



Preocupações

Desenvolvimento de Projetos que possuamusabilidade além de funcionalidade

Frase conhecida:

Designer e Programador não são usuários!

Necessidade de Critérios de Avaliação dos projetos desenvolvidos para uma maior aceitaçãono mercado.



Webdesign voltado para o usuário

Processo de Avaliação



Hardware Software

O ser humano



Conhecer o que os usuários desejam

Avaliar a Funcionalidade do projeto

O sistema permite ao usuário executar a tarefa desejada?

Avaliar a Usabilidade

É fácil aprender a usar o sistema?

Identificar os problemas enfrentados pelo usuário

Situações inesperadas ou que confundem os usuários

Isso tb é válido para produtos?

OBJETIVOS DA AVALIAÇÃO



...tecnologias “novas”...

Modelo Mental Representação dinâmica sobre qualquer sistema ou objeto, que evolui naturalmente na mente de um sujeito.

Assim eu entendo melhor:

“É o modelo que as pessoas tem de si próprias, dos outros, do ambiente, e das coisas com as quais interagem. Pessoas formam modelos mentais por meio da experiência, treinamento e instrução” (Norman)



(*) Designing the user Interface. Página 124. Ben Shneiderman Design e Avaliação de Interfaces Humano-Computador . Página 164.

Fatores que determinam o tipo de avaliação *



Estágio do Projeto - Início, meio ou fim

Quão inovador é o projeto

Qual o número esperado de usuários

Quão crítica é a interface

Custo do produto e Orçamento disponível para a avaliação

Tempo disponível

Experiência dos Designers e da equipe de avaliação

(*) Designing the user Interface. Página 124. Ben Shneiderman Design e Avaliação de Interfaces Humano-Computador . Página 164.

Fatores determinantes do tipo de avaliação (*)



AVALIAÇÃO DE USABILIDADE

Conjunto de técnicas baseados em se ter avaliadoresinspecionando ou examinando aspectos de uma interface

deusuário relacionados a usabilidade

Facilidade de Aprendizagem Eficiência Facilidade de relembrar Erros (Eles são catastróficos?) Satisfação subjetiva



A capacidade que um sistema interativo oferece a seu usuário, em um determinado contexto de operação, para a realização de tarefas, de maneira eficaz, eficiente e agradável. (ISO 9241)

USABILIDADE – DEFINIÇÃO FORMAL



Avaliação Heurística

Fácil / Rápida / BarataComo funciona?

Um conjunto de avaliadores examina o sistema julgando as suas características face a um conjunto de princípios de usabilidade (heurísticas)

Exemplo:Heurísticas de Nielsen (1993)

Exemplo de técnica de avaliação



As heurísticas de Nielsen – As mais conhecidas

1. Visibilidade do sistema – Feedback2. Compatibilidade do sistema com o mundo Real3. Controle do usuário e liberdade (undo e redo)4. Consistência e padrões5. Prevenção de erros6. Reconhecimento ao invés de relembrança7. Flexibilidade e eficiência de uso8. Estética e design minimalista9. Ajudar os usuários a reconhecer diagnosticar

e corrigir erros10. Help e documentação

Avaliação de Usabilidade



Visibilidade do sistema – Feedback

As heurísticas de Nielsen



2. Compatibilidade do sistema com o mundo Real




3. Controle do usuário e liberdade (undo e redo)




4. Consistência e padrões




5. Prevenção de erros




5. Prevenção de erros e também falta de consistência





http://gazetaweb.globo.com/Canais/Empregos/Frame.php?f=InclusaoCandidato.php




6. Reconhecimento ao invés de relembrança




7. Flexibilidade e eficiência de uso




8. Estética e design minimalista




9. Ajudar os usuários a reconhecer diagnosticar e corrigir erros




9. Ajudar os usuários a reconhecer diagnosticar e corrigir erros

Se vc nem tem mais o e-mail com o qual vc se inscreveu – Já era...Não existe nem a opção de enviar a senha para seu e-mail.




10. Help e documentação




• Uma lista de problemas referentes aos princípios violados

O grau de severidade de cada problema encontrado

• A avaliação não objetiva prover meios de correção dos problemas

Qual o Resultado da avaliação Heurística?



Atividade com pontuação

Avaliação do site da Uneb, utilizando as heurísticas de Nielsen

Vou colocar o material no site.



NIELSEN, Jakob,; TAHIR, Marie. Homepage: 50 Websites Desconstruídos. Rio de Janeiro: Campus, 2002.

NIELSEN, Jakob,. Projetando Websites. Rio de Janeiro: Campus, 2000

ROCHA, Helena Vieira da; BARANAUSKAS, Maria Cecília Calani. Design e Avaliação de Interfaces humano-computador. Campinas, SP: Instituto de Computação - IC; Núcleo de Informática Aplicada à Educação. Universidade Estadual de Campinas, 2003.

DIAS, Cláudia. Usabilidade na WEB: Criando Portais mais Acessíveis. Rio de Janeiro: Alta Books, 2003.

3D PROJETOR: http://gl.ict.usc.edu/Research/3DDisplay/ acesso 2/05/2010

IPAD: http://www.apple.com/br/ipad/

Referências



Sony unveils prototype 360° 3D display http://www.youtube.com/watch?v=lAS55_RngoQ&feature=related

IPADJORNAL DA GLOBO: Apple lança o iPad (27/01/10) http://www.youtube.com/watch?v=TCbPXdIvHlw&NR=1

http://www.youtube.com/watch?v=HXernkpBEJo

Sobre a pesquisa de Navegadores:http://www.easyseo.com.br/navegadores/a-guerra-dos-navegadores-google-chrome-mozilla-firefox-e-microsoft-internet-explorer

Sobre Mashuphttp://www.youtube.com/watch?v=osdiMWFGEBs&feature=related

VIDEOS

Referências

Vídeo do Marcelo Tashttp://www.youtube.com/watch?v=jxRTdFyjQ8o

universidade do estado da bahia – uneb / profª josemeire machado dias :: 2012universidade do...

Documents