Prof. Celso Cardoso Neto. DESIGN - Portal WEB Facilita o acesso às informações contidas em documentos espalhados pela Internet ou nas redes de computadores

Prof. Celso Cardoso Neto

DESIGN - Portal WEB

Facilita o acesso às informações contidas em documentos espalhados pela Internet ou nas redes de computadores institucionais, oferecendo mecanismos de busca, links separados por assunto, acesso a conteúdos especializados e comerciais, e possibilidade de personalização de sua interface.

Tipos de portais Web: Verticais Horizontais

Portais corporativos Com ênfase em suporte à decisão Com ênfase em processamento cooperativo

Apesar das semelhanças tecnológicas, os PORTAIS PÚBLICOS e os PORTAIS CORPORATIVOS atendem a grupos de usuários diversos e têm propósitos completamente diferentes

DESIGN - Portal WEB

O termo PORTAL WEB começou a ser usado para descrever sites que ofereciam acesso à internet e eram utilizados por muitos usuários como ponto de entrada para a navegação na Web.

O temo hipertexto estava relacionado à i déia de leitura/escrita não-linear em sistemas informatizados.

DESIGN - Portal WEB – PORTAL PÚBLICO

O PORTAL PÚBLICO, também denominado PORTAL DE CONSUMIDORES, provê ao “internauta” uma única interface à imensa rede de servidores que compõem a internet.

Sua função é atrair o público em geral que navega na internet. Quanto maior o número de visitantes, maior a probabilidade do estabelecimento de comunidades virtuais que potencialmente comprarão o que os anunciantes daquele site têm para vender.

DESIGN - Portal WEB – PORTAL PÚBLICO

DESIGN - Portal WEB – PORTAL CORPORATIVO

O PORTAL CORPORATIVO, é uma evolução do uso da intranets, incorporando, a essa tecnologia, novas ferramentas que possibilitam identificação, captura, armazenamento, recuperação e distribuição de grandes quantidades de informações de múltiplas fontes, internas e externas, para os indivíduos e equipes de uma instituição.

DESIGN - Portal WEB – PORTAL CORPORATIVO

DESIGN - Portal WEB – PORTAL DE INFORMAÇÕES EMPRESARIAIS

PORTAIS DE INFORMAÇÕES EMPRESARIAIS são aplicativos que permitem às empresas liberarem informações armazenadas interna e externamente, provendo aos usuários uma única via de acesso à informação personalizada necessária para a tomada de decisões nos negócios.

Eckerson .... Definiu 15 regras ....




Princípios de DESIGN

(1) VISIBILIDADE E AFFORDANCES;

(2) BOM MODELO CONCEITUAL

(3) BONS MAPEAMENTOS e

(4) FEEDBACK


(1) VISIBILIDADE E AFFORDANCESO usuário necessita ajuda. Apenas as coisas necessárias têm que estar visíveis, para indicar:

quais as partes podem ser operadas e como,

como o usuário interage com um dispositivo.

VISIBILIDADE indica o mapeamento entre ações pretendidas e as ações reais. Indica também distinções importantes – por exemplo, diferenciar a vasilha do sal da do açúcar.

A VISIBILIDADE DO EFEITO DAS OPERAÇÕES indica se a operação foi feita como pretendida, como por exemplo, se as luzes foram acesas corretamente, se a temperatura de um forno foi ajustada corretamente, etc.

A FALTA DE VISIBILIDADE é que torna muitos dispositivos controlados por computadores tão difíceis de serem operados.


(1) VISIBILIDADE E AFFORDANCESA título de ilustração, vamos considerar o exemplo das portas.

Quantos de nós já experimentamos frustrações no uso de portas cuja funcionalidade é extremamente simples – abrir e fechar, e nada mais. Muitas vezes EMPURRAMOS PORTAS QUE DEVERÍAMOS PUXAR, ABRIMOS PARA A DIREITA QUANDO DEVERIA SER PARA A ESQUERDA, EMPURRAMOS PORTAS QUE DEVERIAM SER DESLIZADAS EM ALGUMA DIREÇÃO, que também muitas vezes não descobrimos qual é. As partes corretas deveriam estar visíveis.

DESIGNERS deveriam prover sinais que claramente indicassem que uma porta deveria ser empurrada, simplesmente colocando a barra de empurrar em um dos lados da porta e nada no outro. Os pilares de suporte deveriam estar visíveis e tudo isso sem nenhum prejuízo da estética tão largamente procurada. A barra horizontal para empurrar e os pilares são sinais naturais e portanto naturalmente interpretados, conduzindo ao que se denomina de DESIGN NATURAL.


(1) VISIBILIDADE E AFFORDANCESOutro exemplo clássico de FALTA DE VISIBILIDADE, é o dos modernos telefones, com múltiplas funções e com uma interface de uso que não as deixa visíveis.

E um exemplo favorável é o dos carros, que oferecem uma boa visibilidade na maioria de suas inúmeras funções.

A mente humana é extraordinária no processo de dar sentido ao mundo.

Considere os objetos - livros, rádios, eletrodomésticos, máquinas de escritório, etc. - que fazem parte de nossa vida.

Objetos com um bom designObjetos com um bom design são fáceis de interpretar e entender. Eles contém "dicas" visíveis de sua operação.

Objetos com design pobreObjetos com design pobre são difíceis e frustantes de usar. Eles não provêem indicações ou o que é muito pior, provêem, muitas vezes, falsas "dicas".


(1) VISIBILIDADE E AFFORDANCESAFFORDANCE é o termo definido para se referir às propriedades percebidas e propriedades reais de um objeto, que deveriam determinar como ele pode ser usado.

Uma cadeira é para sentar e também pode ser carregada.

Vidro é para dar transparência, e aparenta fragilidade.

Madeira dá solidez, opacidade, suporte, e possibilidade de escavar.

Botões são para girar, teclas para pressionar, tesouras para cortar, etc.

Quando se tem a predominância da AFFORDANCE o usuário sabe o que fazer somente olhando, não sendo preciso figuras, rótulos ou instruções.

Objetos complexos podem requerer explicações, mas objetos simples não.

Quando estes necessitam rótulos ou instruções é porque o design não está bom.



Um bom MODELO CONCEITUAL permite prever o efeito de açõespermite prever o efeito de ações.

Sem um bom modelo conceitual opera-se sob comando, cegamente.

Efetua-se as operações receitadas, sem saber que efeitos esperar ou, o que fazer se as coisas não derem certo.

Conforme as coisas vão dando certo, aprende-se a operar.

Agora, quando as coisas dão errado ou quando se depara com situações novas necessita-se de um maior entendimento, de um bom modelo.



Consideremos o EXEMPLO DE UMA TESOURA. Mesmo que nunca tenhamos visto uma anteriormente, é claro o seu limitado número de funções possíveis. Os buracos deixam claro que algo deve ser colocado neles, e a única coisa lógica de se colocar e que pode encaixar são os dedos.

Os buracos têm AFFORDANCES, que possibilitam os dedos serem inseridos.

O tamanho dos buracos provêem restrições que limitam quais dedos podem ser usados: o buraco maior sugere diversos dedos e o menor apenas um.

O MAPEAMENTO entre os buracos e os dedos é então sugerido e restringido pelos buracos.

Entretanto, a operação não é limitada à colocação dos dedos corretos. A tesoura irá funcionar com qualquer dedo. CONSEGUE-SE ENTENDER A TESOURA E SEU FUNCIONAMENTO PORQUE SUAS PARTES SÃO VISÍVEIS E AS IMPLICAÇÕES CLARAS.

O modelo conceitual é portanto claro, e até óbvio, e existe um efetivo uso de AFFORDANCES.



Um CONTRA EXEMPLO, É O DE UM RELÓGIO DIGITAL SIMPLES, com dois ou até quatro botões no mostrador.

Para que servem esses botões? Como descobrir se são de puxar e empurrar e não girar? Como acertar a hora, a data? Não existe um relacionamento evidente entre os controles e suas funções, nenhum mapeamento aparente.

Para objetos do dia a dia, MODELOS CONCEITUAIS podem ser bastante simples, mas quando consideramos a complexidade de sistemas computacionais a relevância de um bom modelo é mais que óbvia.


(3) BONS MAPEAMENTOS

é o termo técnico para denotar o relacionamento entre duas entidades.

No caso de INTERFACES, indica o relacionamento entre os controles e seus movimentos e os resultados no mundo.

Vamos novamente recorrer ao EXEMPLO DOS CARROS e os mapeamentos envolvidos em dirigir um carro. Quando queremos ir para a direita, devemos virar o volante também para a direita (sentido horário). O usuário identifica dois mapeamentos: o o controle que afeta a direção e que o volante que o volante precisa ser virado em uma de duas direçõesprecisa ser virado em uma de duas direções. Ambos são arbitrários, mas a roda e o sentido horário são escolhas naturais: visíveis, muito relacionada ao resultado esperado, e provêem um feedback imediato. O mapeamento é facilmente aprendido e sempre lembrado. Mapeamentos naturais, aqueles que aproveitam analogias físicas e padrões culturais, levam ao entendimento imediato.


(3) BONS MAPEAMENTOS

Por exemplo, é comum DESIGNERS utilizarem analogias especiais: para mover um objeto para mover um objeto para cima, move-se o controle também para cima.para cima, move-se o controle também para cima.

Problemas de mapeamento são muitos e uma das principais causas das dificuldades que os usuários encontram no uso de objetos.

Consideremos os TELEFONES. Suponha que se deseja redirecionar as ligações de um número para outro. As instruções são geralmente do seguinte tipo: tecle #, em seguida o número 9 e finalmente o número para o qual deseja desviar suas chamadas. Uma descrição incompleta de um procedimento arbitrário. O que acontece se eu errar no meio do caminho o que faço? Por que #? Por que 9? E a ausência de feedback é outro aspecto. Como sei se deu certo ou não? Um objeto é fácil de ser usado quando existe um conjunto visível de ações possíveis, e os controles exploram mapeamentos naturais.

O princípio é simples mas raramente incorporado aos design.


(4) FEEDBACKRetornar ao usuário informação sobre as ações que foram feitas, quais os resultados obtidos, é um conceito conhecido da TEORIA DA INFORMAÇÃO E CONTROLE.

Imagine falar com uma pessoa sem ouvir sua própria voz (a famosa ausência de "retorno" que os músicos tanto reclamam nos palcos), ou desenhar com um lápis que não risca, ou seja, sem nenhum feedback.

Exemplificando com INTERFACES COMPUTACIONAIS, quantos de nós mandamos imprimir documentos em impressoras de rede e sempre nos deparamos com problemas clássicos: • qual foi mesmo a impressora? • a impressão já terminou ou não? • o documento foi mesmo impresso ou houve algum problema? • acabou o papel da impressora (que está em outra sala muitas vezes bem distante) antes do término da impressão?


PARADOXO DA TECNOLOGIA – é um aspecto interessante ....A tecnologia oferece potencial para tornar nossa vida mais simples e agradável, e cada nova tecnologia traz mais benefícios. E ao mesmo tempo adiciona tamanha complexidade que faz aumentar nossa dificuldade e frustação.

O relógio é um bom exemplo disso. Ninguém tinha problemas com os clássicos relógios cuja única função era marcar as horas e com um único botão conseguíamos fazer todos os ajustes necessários. Os relógios digitais atuais ampliaram em muito as funcionalidades básicas: eles marcam data, dão alarme, são cronômetros, mostram hora no mundo todo e os mais modernos mostram inclusive o horário mundial da WEB.

Mas adicionar todas essas funções causa problemas. Como fazer o design de um relógio com tantas funções e ao mesmo tempo limitar seu tamanho, custo e complexidade de uso? Quantos botões deveriam ter os relógios para torná-los fáceis de aprender e operar? Não existem respostas simples. Sempre que o número de funções excede o número de controles, o design torna-se arbitrário e não natural, e complicado.

A mesma tecnologia que simplifica a vida provendo um maior número de funcionalidades em um objeto, também a complica tornando muito mais difícil aprender, e usar. ESSE É O PARADOXO DA TECNOLOGIA E O GRANDE DESAFIO DOS DESIGNERS É MINIMIZAR ESSES EFEITOS.

DESIGN – 4 PRINCÍPIOS BÁSICOSDESIGN – 4 PRINCÍPIOS BÁSICOS

São principios inter-relacionados ...

(4) CONTRASTE : objetivo é evitar elementos similares em uma página. Se os elementos (tipo, cor, tamanho, espessura de linha, forma, espaço, etc...) não forem os mesmos, diferencie-os completamente. O CONTRASTE costuma ser a mais importante atração visual de uma página ...

(3) REPETIÇÃO : cria organização e fortalece a unidade.

(2) ALINHAMENTO : nada deve ser colocado arbitrariamente em uma página. Cada elemento deve ter uma ligação visual com outro

elemento da página. Isso cria uma aparência limpa, sofisticada, suave.

(1) PROXIMIDADE : itens relacionados entre si devem ser agrupados. Isso ajuda a organizar as informações, reduz a desordem e oferece à

pessoa que acessa uma estrutura clara.

DESIGN de Sistemas Interativos

Preocupa-se com o desenvolvimento de sistemas interativos de alta qualidade, produtos e serviços que combinam com as pessoas e com os seus modos de vida.

Dispositivos de computação e comunicação estão incorporados ao dia a dia.

Exemplos de sistemas que usam DESIGN Interativo






Conclusões sobre os exemplos de sistemas que usam DESIGN Interativo

Preocupações do DESIGN DE SISTEMAS INTERATIVOS

DESIGNRefere-se tanto ao processo criativo de especificar algo novo quanto às representações que se produzem durante esse processo.

Portanto, para projetar um site, por exemplo, o DESIGNER produzirá e avaliará vários designs, como o layout da página, o do esquema de cores, o dos gráficos e o da estrutura como um todo.

O DESIGN raramente é um processo objetivo e normalmente implica muita iteração e exploração, tanto dos requisitos (o que o sistema deve fazer e as qualidades que ele deve ter) quanto das soluções do projeto.

Existem muitas definições diferentes para DESIGN. A maioria delas reconhece que ambos, o PROBLEMA e a SOLUÇÃO, devem evoluir durante o processo de DESIGN, raramente se consegue especificar completamente alguma coisa, antes que parte do trabalho de DESGING tenha sido feita.

DESIGN

DESIGN

PESSOAS E TECNOLOGIAS – SISTEMA INTERATIVO


(4) (4) CONTRASTECONTRASTE Caso 8



(4) (4) CONTRASTECONTRASTE





A INTERFACE

A INTERFACE

CENTRADO NO HUMANO

Disciplinas que contribuem para os Sistemas Interativos

Documents

Prof. Celso Cardoso Neto. DESIGN - Portal WEB Facilita o acesso às informações contidas em documentos espalhados pela Internet ou nas redes de computadores