Webdesign e Interfaces - IFSULDEMINAS · 2018-05-07 · Designing the user Interface. Página 124. Ben Shneiderman Design e Avaliação de Interfaces Humano-Computador . Página 164

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

Uma visão Geral sobre Webdesign e Interfaces

Webdesign e Interfaces



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

Fonte: Guia de Empregos: http://www.ijobs.com.br/

http://www.widesoft.com.br/users/virtual/profis.htm

http://www.ijobs.com.br/



Webdesign – O sentido da Palavra

Mecanismos de Interação

Representação Visual

Webdesign

Webdeveloper



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



Webdesign x Design Impresso

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

Netscape, Opera, Explorer, Mozilla

Da versão do Navegador

Do sistema operacional

Da existência de plug-ins, etc.



Webdesign x Design Impresso

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

Tamanho da Tela do monitor e resolução

Medida Resolução14” 800x600

15” 800x600

17” 1024x768

19” 1280x1024

21” 1600x1200

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



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 NVU – ferramenta livre

Edição de Imagens Photoshop - Adobe FireWorks - Adobe

Animação Flash - Adobe

Ferramentas para o Webdesign



Formatos de ArquivosSã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

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 da fontes sem serifa um padrão de utilização.

Devemos utilizar as fontes mais comuns de serem encontradas, como Tahoma, Verdana e Arial.

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



Sistema de Cores do Webdesign

O modelo de cores RGB é baseado no princípio de que diversos efeitos cromáticos são obtidos pela projeção da luz branca através dos filtros vermelho, verde e azul.

Uma visão Geral sobre

Webdesign e Interfa

ces

Red

BlueGreen

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 WebdesignAlé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.

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



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 = muitas áreas envolvidas

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

OBJETIVOS DA 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



Usabilidade - Conceito

Diz respeito a todas as características que permitem ao usuário

interagir com o computador satisfatoriamente

Está relacionada à eficácia, eficiência e satisfação de uso

(norma ISO)

Enquadra-se dentro do conceito de aceitabilidade do sistema

pelo usuário - sistema ser bom o suficiente para satisfazer

todas as necessidades e requisitos do usuário e de outras

pessoas relacionadas à utilização do sistema



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



Usabilidade - Exemplos de Problemas

O sistemas tem a informação ou o serviço que eu preciso?

Onde posso encontrar?

Como posso solicitar esse serviço? Quais informações devo

fornecer?

Qual o resultado? Era o que eu queria?

Para que serve esse elemento?

O que significa essa figura?

Para onde leva esse link?



Problema de Usabilidade - CORES

http://www.fooz.com/eric/bad/



Problema de Usabilidade - Link

http://www.dc.ufscar.br/~felipe



Problema de Usabilidade- Informação

http://www.cade.com.br/

Ausência de

informação



Facilidade de aprendizado interação com o sistema de forma natural, independente do

nível de habilidade e conhecimento

Facilidade de utilização interface preparada para adaptar-se ao nível de conhecimento

e habilidade dos usuários (wizards para os inexperientes e teclas de atalho para os mais experientes)

Ser intuitiva comandos claramente visíveis - evitar memorização

Princípios Básicos de Usabilidade




Diálogo simples e natural Expressões e conceitos do conhecimento do usuário Evitar termos técnicos da computação Não disponibilizar informações irrelevantes

Feedback ao usuário Mecanismos para informar comportamento do sistema –

localização e tempo de execução

Retenção do conhecimento usuário lembra os principais comandos disponíveis, sem

consultar manuais instruções de utilização sempre visíveis ou recuperáveis



Velocidade na execução das tarefas informações precisas em um curto período de tempo

Preparação do sistema para evitar erros do usuário

Mensagens de erro consistentes informem ao usuário o que foi feito errado, onde está o erro e

ofereça a possibilidade de corrigi-lo

Satisfação Subjetiva como o usuário se sente ao utilizar o sistema relacionada às funcionalidades do sistema




Princípios Básicos de Usabilidade no Projeto Web

1. Clareza na Arquitetura da Informação

2. Facilidade de Navegação

3. Simplicidade

4. Relevância do conteúdo

5. Manter a consistência

6. Foco no usuário



Ciclo de Vida para Projeto com Usabilidade

início

produto final

conhecer usuários e suas tarefas

prototipação

avaliação de

usabilidade

protótipo em trabalho



Ciclo de Vida para Projeto de Sistemas Web

Análise

Engenharia

Formulação

Planejamento

Geração de página teste

Avaliação do usuário



engenharia

formulação

planejamentoanálise



Etapa de Formulação

Conjunto de objetivos comuns para a construção da aplicação

Escopo do esforço de desenvolvimento



Etapa de Planejamento

formulação


engenharia



Estima custos de projeto

Avalia os riscos associados ao esforço de desenvolvimento

Define um cronograma de desenvolvimento



Etapa de Análise

formulação


engenharia



Conjunto de objetivos comuns para a construção da aplicação

Identifica o escopo do esforço de desenvolvimento

Análise de Conteúdo: Identifica conteúdo da aplicação (texto, gráfico, imagem, vídeo e áudio)

Análise de Interação: Descrição detalhada do modo de interação

Análise Funcional: Descrição das funções e operações

Análise de Configuração: Descrição do ambiente e infra-estrutura da aplicação



Etapa de Engenharia

análise

engenharia

formulação

planejamento



Projeto de conteúdo

ProduçãoProjeto de interface

Projeto navegacional

Projeto arquitetural

Projetar, produzir e adquirir todo conteúdo de texto, gráfico, áudio e vídeo integrados à aplicação

Projeto Arquitetural: definição da arquitetura da aplicação

Projeto Navegacional: definição dos caminhos de acesso ao conteúdo e serviços da aplicação

Projeto de Interface: definição da interface ao usuário



Etapa de Geração de Página Teste

formulação


engenharia



Ferramentas Automatizadas para criação da aplicação

Combina o conteúdo definido na etapa de engenharia aos projetos arquitetural, navegacional e de interface

Páginas executáveis

Realização de testes para descobrir erros de função e conteúdo (em diferentes browsers)



Etapa de Avaliação

formulação


engenharia



Avaliação pelo usuário

Mudanças são solicitadas e integradas às próximas etapas do processo incremental



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.

Referências Bibliográficas

Documents

Webdesign e Interfaces - IFSULDEMINAS · 2018-05-07 · Designing the user Interface. Página 124. Ben Shneiderman Design e Avaliação de Interfaces Humano-Computador . Página 164