Webdesign e arquitetura de sites: usabilidade e acessibilidade

SCHÜTZ, Fernando. Web design. Curitiba: Ed. UTFPR, 2013, 80 p.

Conceitos envolvidos no Web Design

- O que é o Web Design Segundo Nielsen (2007, p.47), “todo o conceito de ‘Web Design’
é equivocado. O web design de equipes de projetos individuais pode ser comparado a
formigas construindo um formigueiro. Designers de site constroem componentes de um
todo – especialmente agora que os usuários veem a Web como um único recurso
integrado”. (pag. 15)
- Willians (1995) define que o design pode ser denominado como qualquer processo
criativo que se utiliza das mais variadas técnicas para conceber algum artefato através da
elaboração e concepção de um projeto. O que move o usuário a desenvolver o projeto
pode envolver um objetivo e a solução de um problema. (pag. 15)
- Para Gomes (1996), o termo Design deriva do latim designare, sendo mais adiante
adaptado para o inglês design. Quando foi incorporado ao português, os profissionais
queriam que o termo fosse relacionado à prática profissional. Um termo proposto para
substituir Design é “desenhismo”. O conceito de Design seria, portanto, todo o tipo de
desenho que tem o objetivo de saciar os desejos da indústria. (pag. 15, 16)
- Segundo Rabelo, existe uma gama de especializações dentro do Design de acordo com
o artefato a ser elaborado, concebido e desenvolvido. Pode-se citar:
• Design Industrial ou de Produto: desenvolvimento de produtos industriais
(eletrodomésticos, móveis, carros, brinquedos, joias etc.), visando sempre facilitar o seu
uso. O designer de produto elabora objetos que serão produzidos pelas indústrias, sempre
atento não somente à estética, mas também à funcionalidade. Ele também cuida de
tecnologia, pesquisas e desenvolvimento de materiais adequados para o produto.
• Design Gráfico: é o processo de unir elementos gráficos (textos e imagens) com o
objetivo de transmitir ideias e informações. É um campo de atuação bastante amplo e
criativo, cujas atividades englobam criação de logotipos, identidades corporativas,
editoração (revistas, jornais, livros), embalagens, cartazes etc.
• Design de Interfaces: também chamado de Design Digital, o profissional desta área
projeta interfaces gráficas de sistemas operacionais, softwares e games, animação 2D e
3D, sites (neste caso também conhecido como webdesigner) etc. objetivando o conforto
do usuário. (pag. 16)
Web Design e Web Semântica
- Todo site tem que transmitir um conceito, isto é, o tema escolhido. No caso de um site
para o público infantil, por exemplo, é adequada a utilização de cores alegres, fontes
divertidas, muitas ilustrações e desenhos, animações, joguinhos interativos e mesmo
fotografias, criando um ambiente lúdico. Além disso, o site deve condizer com a categoria
a qual pertence. Um portal infantil deve possuir diversos links para outras áreas de
interesse que atraiam a criança. A tabela 1 apresenta alguns tipos de sites. (pag. 18)
- A matéria que envolve o design com a Internet chama-se Web Design. Sabe-se que o
design refere-se ao projeto visual e funcional de um produto (em nosso caso um website).
A adaptação, portanto, do site à necessidade dos seus usuários, cativar o seu uso através
da estética, aplicar conceitos e usabilidade à sua forma são tratados através do web design.
(pag. 18)
Web semântica
- Vamos tratar, agora, do que é a Web semântica: Segundo Zigolis, a Web do futuro será
um meio cujas páginas obedecem a padrões universais e serão ricas em significado, algo
muito diferente da Web do passado em que as páginas eram construídas de forma
desorganizada e eram difíceis de entender e de manter. Para compreendermos aquilo que
torna possível dar significados claros aos conteúdos das páginas e dar eficiência à
publicação na Web precisamos saber o que é a Web semântica.
- A Web semântica é um projeto dirigido por Tim Berners-Lee, criador do HTML e da
World Wide Web sob os auspícios do World Wide Web Consortium (W3C).
- O objetivo deste projeto é melhorar as potencialidades da Web através da criação de
ferramentas e de padrões que permitam atribuir significados claros aos conteúdos das
páginas e facilitar a sua publicação e manutenção. As páginas construídas usando a
filosofia da Web semântica passam a fazer parte de um meio universal para a troca de
informação.
- Dizemos que trata-se de um meio universal porque estas páginas podem ser lidas por
humanos ou por máquinas, e tanto podem ser apresentadas graficamente (num monitor
ou impressas em papel) como lidas em voz alta por browsers capazes de sintetizar voz e
podem ser apresentadas em telefones móveis adequados.
- Nesta altura, os padrões já definidos no âmbito desta iniciativa são as versões mais
recentes da linguagem HTML, todas as versões da linguagem XHTML, as folhas de
estilos em cascata (CSS) e diversos dialetos de XML.
- Os elementos da linguagem HTML têm significados claros, existindo elementos para
definir cabeçalhos, parágrafos, listas etc. Com o uso correto dos elementos do HTML as
estruturas das páginas serão claras e fáceis de compreender. (pag. 22)
-Nós estamos escrevendo HTML semântico quando escrevemos uma página tão simples
como esta:

- O navegador sabe que o elemento

representa um cabeçalho ou “título”, pois é esse o significado do elemento. Por isso o
navegador representa o conteúdo do elemento com letra maior e com texto carregado. O
elemento representa um parágrafo e isso significa que o texto nele contido forma um
bloco, assim o navegador separa claramente os parágrafos e escreve os seus conteúdos
com letra normal. (pag. 23)
- No exemplo da figura 2, não há qualquer aplicação de formatação de texto, ou seja,
deixa--se o navegador aplicar os estilos que têm definidos como padrão. Porém, se o
desenvolvedor quiser resultados mais convicentes e “bonitos”, o próprio deve formatá-la.
O objetivo do projeto da Web semântica é que, ao se acrescer a formatação a uma página
não haja perda de sentido dos elementos, ou seja, não deve haver a destruição da
semântica do HTML. O exemplo da figura 3 mostra um caso de HTML não semântico.
(pag. 23)
-
 Planejamento e processo de design
- Uma maneira indicada para se iniciar um projeto é através de uma arquitetura da
informação. Pode-se comparar a hierarquia de uma arquitetura da informação com a
planta de uma casa, ou seja, o que vai ser seguido para a construção de um resultado final.
A arquitetura da informação é o processo pelo qual se divide o conteúdo de seu site em
partes e, então, organiza-se estas partes hierarquicamente em relação uma a outra de um
modo lógico. A figura 4 apresenta um exemplo de arquitetura da informação. (pag. 23)
Briefing e arquitetura da informação
- De onde estas informações são coletadas? Normalmente, entrevistas iniciais com o
cliente ao qual está se construindo o site são muito importantes. É a partir de tais perguntas
e respostas que se pode projetar uma boa Análise de Requisitos, onde tanto as
funcionalidades que o site deve implementar quanto as características desejáveis da
página podem ser obtidas. (pag. 26)
- Segundo Santos, utilizar elementos dentro de qualquer peça gráfica sem um estudo do
caso é um equívoco que compromete a comunicação e a funcionalidade. (pag. 26)
- Há que se levar em consideração fatores como o objetivo do projeto, o produto a ser
divulgado, o público alvo (sexo, idade, cultura, classe social etc), identidade visual,
motivações etc. Além da análise de requisitos pode-se, para realizar tal estudo do caso,
construir um briefing bem elaborado. (pag. 26)
- Observe o conceito de briefing segundo um estudioso dessa área:
O briefing é um conjunto de informações, uma coleta de dados
passadas em uma reunião para o desenvolvimento de um trabalho,
documento, sendo muito utilizadas em Administração, Relações
Públicas e na Publicidade. O briefing deve criar um roteiro de
ação para criar a solução que o cliente procura, é como mapear o
problema, e com estas pistas, ter ideias para criar soluções. VIEL
(2010, p.01)
- O desenho de um site é a parte mais importante para que se possa avaliar o
posicionamento dos itens dentro da estrutura como um todo, e um primeiro desenho é
chamado de wireframe. (pag. 26)
- Tanto para o projetista, quanto para o desenvolvedor e, muitas vezes, para o cliente do
site é de crucial importância, pois dá uma noção de como será a página publicada. (pag.
27)
Wireframe
- Depois de se descrever hierarquicamente as informações (como visto na figura 4), é
interessante mostrar a disposição destes componentes na página. O documento apropriado
para especificar a ordem e o posicionamento dos elementos que vão compor a página é o
wireframe. O wireframe pode ser definido como um esqueleto do site, que deve ser feito
antes de se iniciar a montagem do layout com cores e imagens. A figura 5 apresenta um
exemplo de tal processo.
- A partir do posicionamento do wireframe é que se constrói o layout de uma página.
Watrall e Siarto (2009) sugerem que, a partir da arquitetura da informação definida, pode-
se também definir esquemas de navegação de alto nível. Todos estes processos visuais
são importantes para que se tenha uma visão inicial do site, e nesta fase, “lápis e papel”
podem ser grandes aliados de um desenvolvedor.
Diagramação
- Qualquer material gráfico, seja impresso ou digital, traz um recurso importantíssimo
para o seu sucesso: a diagramação. É ela que organiza e expõe o conteúdo, traduzindo os
conceitos em linguagem visual.
- Cada peça tem as suas características, necessidades e objetivos. Para descobrir como
fazer uma diagramação, você precisa entender essas demandas e trabalhar de acordo com
elas.
- A figura 6 apresenta uma ideia para a disponibilização de conteúdo da hierarquia de
mais alto nível através de menus. Note-se que podem ser utilizados menus horizontais e
verticais, imitando guias, colocando texto puro ou mesmo através da imitação de botões.
(pag. 26)
- 1. Defina um grid
O grid é um ótimo recurso para organizar o espaço disponível para a diagramação. É
através dele que você consegue determinar as áreas que receberão textos e imagens, assim
como o espaço entre cada bloco.
Ao iniciar a sua diagramação, teste várias opções de grid e escolha aquela que melhor
distribui o conteúdo necessário. A partir dessa definição, respeite a estrutura para manter
a coerência visual.
- 2. Use colunas
Ao definir um grid para o material gráfico, você deve determinar o espaço para o texto.
A melhor maneira de organizar esse conteúdo é através de colunas.
Não existe uma regra quanto ao número ou tamanho de colunas que cada peça gráfica
deve ter. Entretanto é preciso estar atento a algumas características, já que elas interferem
na legibilidade do texto.
Colunas largas e compridas dão peso ainda maior ao conteúdo, mas podem parecer
cansativas. Já as versões curtas dão a ideia de um texto dinâmico. A sua escolha entre
uma ou outra deve se baseada na intenção combinada com o volume de informação a ser
organizada.
- 3. Respeite os espaços em branco
Para que o leitor consiga identificar facilmente as informações disponibilizadas, é
essencial que haja espaços entre cada bloco de conteúdo. Isso vale para os textos, fotos,
gráficos e qualquer outro elemento contido.
Respeitar os espaços em brancos é um dos segredos de como fazer uma diagramação
como um profissional. Quando essa regra não é respeitada, as informações se misturam,
gerando um visual confuso e pouco atraente.
Não tenha medo de deixar área de respiro entre os elementos e também nas margens do
material. É justamente essa combinação que irá garantir o destaque aos elementos certos
dentro do seu material.
- 4. Trabalhe a tipografia
Outro elemento que interfere na construção das colunas é a fonte escolhida. Isso porque
o espaçamento entre as letras e o estilo de construção do tipo influencia diretamente na
sua legibilidade.
As fontes com serifa são mais indicadas para materiais impressos, já os modelos não
serifados ficam ótimos em materiais digitais. Além disso, o estilo da fonte deve respeitar
o conceito que a peça pretende transmitir.
Independentemente da fonte ideal, vale a boa prática de design gráfico: não utilize mais
de dois tipos por material. Dê preferência para um modelo nos títulos e outro no corpo do
texto.
- 5. Fique atento ao alinhamento
Muitas dúvidas ainda surgem sobre o alinhamento justificado ou à esquerda. O primeiro
cria blocos homogêneos e é mais indicado para materiais impressos. Quando o assunto é
web, a escaneabilidade é favorecida pelo alinhamento à esquerda.
Escolha a melhor opção e mantenha a coerência durante todo o material. Uma boa dica é
combinar estilos, usando um alinhamento diferente para caixas de destaque, por exemplo.
6. Invista em imagens
Nem só de texto vive uma diagramação. As imagens dão vida ao material gráfico e
ajudam a comunicar o conceito proposto pelo conteúdo. Utilize fotos e gráficos sempre
que for pertinente, mas fique atento à qualidade.
Jamais distorça uma imagem e confira se a resolução está adequada ao uso. Embora os
materiais digitais permitam uma qualidade menor, não caia na tentação de usar o Google!
Aproveite os bancos de imagens gratuitos ou pagos e confira sempre os direitos de uso.
7. Hierarquize o conteúdo visualmente
Com tantos recursos disponíveis, é fácil perder a mão e criar um material poluído e
confuso visualmente. Mas, se você deseja saber como fazer uma diagramação, precisa
entender que esse risco é minimizado quando a hierarquia é respeitada.
Isso significa que os conteúdos mais importantes, sejam textos ou imagens, terão
destaque. Respeite tamanhos diferentes de fontes para títulos, subtítulos e corpo. Assim,
cria-se uma hierarquia que atrai e guia o olhar do leitor.
- 8. Siga a identidade visual
Por fim, é preciso entender que todo material gráfico faz parte de uma identidade visual e
ela precisa ser respeitada. As formas, cores e fontes escolhidas devem conversar com o
estilo da marca, mesmo que não sejam idênticas. (pag. 28)
- A hierarquia da informação é um item importantíssimo quando da elaboração de um
layout inicial. Ela serve para dar destaque a alguns elementos ou informações que são
mais relevantes dentro de uma página ou site. (pag. 28)
- Na cultura ocidental, o processo de leitura consiste em uma “varredura” da esquerda
para a direita e de cima para baixo. Por isso, a parte considerada mais privilegiada do site
(para onde o usuário olha primeiro) é o canto superior esquerdo. O lado esquerdo também
é bastante importante, assim como a parte superior (cabeçalho). Informações não
relevantes podem ficar abaixo da “dobra” do site (quando o usuário precisa rolar a
página). (pag. 28)

- Como visto anteriormente, deve-se definir com o “cliente” que conteúdo será colocado
em qual parte do site durante a digramação. Não há realmente uma receita de bolo,
portanto, o bom senso novamente deve prevalecer. (pag. 29)
Para apresentar uma forma de desenho de diagramação dentro de um navegador, Watrall
e Siarto (2009) demonstram a técnica no desenho de um layout para um site chamado Red
Lantern. Lanterna Vermelha (a tradução para o português) é, ficticiamente, um pequeno
estudo de web design que deseja mudar seu próprio site. Assim, definiu-se a partir de uma
entrevista, o que o site deve ter.
Os itens abaixo são transcrições de um ofício enviado aos desenvolvedores:
• Teremos uma seção do site onde colocamos os itens de novidades e as atualizações sobre
o lanterna vermelha.
• Definitivamente precisamos de uma seção do site onde podemos mostrar todo o trabalho
impressionante que iremos fazer.
• O site precisa de uma página de contato. Como obteríamos os clientes sem uma página
de contato?!
• Acho que seria bom ter uma seção do site sobre a empresa – o que fazemos.... esse tipo
de coisa.
• Precisamos assegurar que eles saibam que faremos consultoria e web design! (pag. 29)
- A partir destes requisitos (que pode ser considerado um briefing), fazendo a arquitetura
da informação e desenhando vários wireframes pode-se chegar a uma primeira versão
para o cliente. (pag. 30)
Layout: cor, tipografia e posicionamento
- Ao criar o layout de um site, todos os elementos, inclusive as cores, devem visar que a
experiência do usuário seja a mais eficiente e confortável possível. O bom uso das cores
em um site é determinante para uma usabilidade satisfatória. Antes de tudo, é preciso
saber se existe uma cor institucional que deve ser usada e como integrá-la com as demais
cores do layout. O importante é que a cor mantenha as características do negócio do
cliente e que a interface permaneça perfeitamente funcional. (pag. 33)
Cores
- Quando lidamos com projetos impressos, a quantidade de cores influencia diretamente
no custo do produto final, o que não ocorre em projetos web. (pag. 35)
- Mas, não é por isso que deve-se usar as cores indiscriminadamente. É preciso que o
projeto tenha um visual de acordo com a proposta, ou seja, deve-se utilizar as cores
necessárias para passar a mensagem que se quer passar, sem uso exagerado delas. (pag.
36)
- Quanto às cores, Pedrosa (1997) apresenta uma caracterização que segue:
• Cores Primárias: que não podem ser formadas por nenhuma mistura. São elas: azul,
amarelo e vermelho.
• Cores Secundárias: formadas pela mistura das cores primárias, em diferentes
tonalidades:
– azul + amarelo = verde
– azul + vermelho = violeta
– amarelo + vermelho = laranja
• Cores Terciárias: formadas pela mistura das cores secundárias. Podem ser divididas, de
acordo com sua temperatura, em frias e quentes. As frias abrangem azul, verde, violeta e
suas combinações. As quentes são os vermelhos, laranjas, amarelos, marrons e suas
misturas.
• Cores Complementares: uma cor primária é complementar a uma secundária quando ela
não faz parte da mistura que forma esta última. São cores opostas no círculo cromático.
Juntas, causam impacto visual. Exemplo: o vermelho é complementar do verde; azul é
complementar do laranja; amarelo é complementar do violeta.
• Cores Análogas: são as cores ‘vizinhas’ no círculo de cores. Formam composições
harmoniosas.
• Cores Acromáticas: são chamadas neutras: branco, preto, cinza e marfim.
• Cores Monocromáticas: cores da mesma família, variações de tom. Exemplo: azul
marinho, violeta, azul bebê e turquesa. (pag. 35)
- Para um bom trabalho, é necessário fazer um estudo de conceitos visuais e de
comunicação e saber por que usar determinadas cores, fontes e formas, em função da
imagem e das sensações que esses elementos transmitem ao usuário. (pag.36)
- As cores têm poder de comunicação bem maior do que se imagina. É importante saber
trabalhar com a psicodinâmica das cores, para que elas transmitam a imagem e as
sensações orientadas no briefing.
- Cada cor transmite informações, sensações e emoções diferentes. Para elaborar a paleta
de cores de um website, é importante saber como trabalhar as combinações cromáticas.
Por mais que se saiba que cores transmitem as sensações desejadas, é essencial saber
combiná- las. Nesta tarefa é essencial ter em mãos um círculo cromático. (pag. 38)
- Em primeiro lugar, o desenvolvedor deve escolher a cor de base do site: a cor que mais
representa a metáfora visual e sobre a qual todas as cores estão baseadas. Depois, pode-
se utilizar um esquema de cores triádico, que usa três cores igualmente espaçadas no
esquema de cores. Portanto, assim que selecionar uma cor de base, poder-se-á desenhar
um triângulo equilátero e selecionar duas outras cores. (pag. 39)
- Cores também podem interferir na questão da navegação. Trabalhar com as cores nos
links faz com que o usuário possa melhor se familiarizar com diferentes regiões e áreas
do site. De maneira geral o uso de outras cores diferencia os links já visitados dos que
ainda não foram vistos pelo usuário. A navegação pode se mostrar ineficiente e o visitante
ficar perdido, caso essa regra não seja respeitada. (pag. 39)
Tipografia
- O termo ‘tipografia’ significa o emprego de fontes, que nada mais são do que desenhos
como representações do alfabeto. Através de recursos gráficos, as letras podem fornecer
outras informações sobre o contexto da mensagem através de seu contorno, proporções,
peso, cores entre outros. Dependendo do tratamento tipográfico, um simples alfabeto
pode transmitir humor, dramaticidade e uma série de outras emoções. (pag. 30, 40)
- Para Santos, quando o desenvolvedor quiser, comunicar uma ideia deve-se trabalhar
com fontes que priorizem a legibilidade e que tenham relação com o contexto do projeto.
(pag. 40)
Deve-se saber, por exemplo, que fontes com serifas não são
indicadas para textos na web, pois a baixa resolução dos monitores
faz com que as serifas se sobreponham, o que dificulta a leitura.
Porém, em títulos elas podem ter um bom resultado decorativo.
Fontes sem serifa conseguem obter melhor leitura no monitor,
principalmente se trabalhadas com um bom entrelinhamento.
- A tipografia deve ser adequada à baixa resolução das telas, ao brilho dos monitores e à
distância de leitura. Nos sites com grande quantidade de texto ou nos projetos onde seja
preciso otimizar a busca por informações, a legibilidade exerce maior influência na opção
do tipo. (pag. 41)
Estruturação de páginas
- A abordagem mais tradicional para estruturação de páginas é a utilização de tabelas,
porém não trataremos deste assunto na aula, já que a estruturação moderna faz a utilização
de tags da linguagem HTML. (pag. 41)
- Segundo MacDonald (2010), é preciso organizar os conteúdos relacionados em pacotes,
antes de definir onde vai cada elemento em uma página. No antigo método tabular, o
pacote era uma célula da tabela, porém utilizaremos aqui o elemento , que é considerado
um contêiner de múltiplas finalidades. (pag. 41)
- Essa prática é importante, pois pode-se utilizar a tecnologia de folhas de estilo em
cascata (CSS – Cascading Style Sheets) para desenvolver todo o layout de um elemento
no site, sem mudar a estrutura da página HTML. Isso torna o processo de design muito
mais facilitado. (pag. 41)

Usuabilidade na Web
DIAS: Cláudia. Usabilidade na WEB: criando portais mais acessíveis. Alta Books,
2003.
Os Tipos de Portais Web
Entre os tipos de portais existentes a autora, identifica e aponta dois tipos, o portal público
e o portal corporativo, pois atendem a usuários diversos com propósitos diferentes.
O Portal Publico
O portal público, também denominado portal de consumidores, prove 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, para anunciar, vender ou estabelecer qualquer
outra forma de negócio com portal.
Entre os portais públicos, temos uma subdivisão que são os portais horizontais e verticais.
Os portais públicos horizontais são aqueles que atendem a uma maior parte dos usuários
dada a diversidade de serviços oferecidos tais como o YAHOO e o TERRA, já os portais
públicos verticais são específicos a nichos de mercado.
Os portais públicos tiveram, segundo a autora, três fases distintas. São elas, pela ordem,
a referência, consistiu nas máquinas de busca, com catálogo hierárquico de conteúdo da
Web. Personalizado, consiste na existência de um usuário que através de uma senha pode
personalizar o conteúdo do portal, trazendo assim algo mais pessoal ("minha página
inicial"). A terceira e última fase-geração e denominada de INTERATIVO, o portal
incorpora aplicativos, tais como correio eletrônico, chat, listas de discussão, cotação da
bolsa. Comercio eletrônico, leiloes, o que permite o usuário interagir com o portal.
O Portal Corporativo
O portal corporativo é uma evolução do uso das 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, segundo citação de Reynolds
& Koulopoulos, 1999, na obra da autora.
A ideia do capítulo e trazer a diferença entre as espécies de portais existentes. Porem
devido ao fato do texto tratar da área mais corporativa a autora dedica algumas páginas
aos portais corporativos delineando melhor sua definição, suas fases, a gestão de
informações, suas funções e suas características. Porem dado o objeto dessa resenha passo
a resumir todos esses tópicos.
Os portais corporativos estão não sua quarta fase-geração, quais sejam: REFERENCIAL,
PERSONALIZADO, INTERATIVO e ESPECIALIZADO. Basicamente as 3 primeiras
gerações iniciais são as mesmas dos portais públicos, com a peculiaridade de, nos portais
corporativos, são mais voltadas para o seu público. A geração especializada dos portais
corporativos é baseada em funções profissionais, para gerência de atividades especificas
na instituição, tais como vendas, finanças, recursos humanos. Nessa geração os usuários
podem interagir com aplicativos a ponto de poder ler, gravar, efetuar transações.
Possibilitando assim, por exemplo, o comercio eletrônico.
A autora nos alerta que a terminologia usada para nomear essa espécie de portal, é algo
muito instável, o termo portal corporativo ainda não foi aceito de forma estável. Assim,
existem várias terminologias para definir esses portais, tais como: "portal de informações
corporativas","portal de negócios", "portal de informações". Das várias definições e
terminologias analisadas pela autora, ela sintetiza que o principal propósito do portal
corporativo é gerenciar as informações necessárias aos negócios de uma instituição, seja
ele um portal de apoio à decisão ou de processamento cooperativo.
Característica do portal corporativo
Existem vários produtos (portais corporativos) disponíveis na industria da informática,
para atender ao diversos tipos de clientes, com suas mais variadas necessidades. Visando
facilitar a escolha foi criado por um conjunto de consultores de renome "as quinze regras
de Eckerson".
Entre os consultores temos: ECKERSON, do PATRÍCIA Seybold Group, e White, do
DataBase Associates International.
As características relacionadas são: fácil para usuários eventuais; classificação e pesquisa
intuitiva; compartilhamento cooperativo; conectividade universal aos recursos
informacionais; acesso dinâmico aos recursos informacionais; roteamento inteligente;
ferramenta de inteligência de negócios integrada; arquitetura baseada em servidor;
serviços distribuídos; definição flexível das permissões de acesso; interfaces externas;
interfaces programáveis; segurança; fácil administração e customização, e
personalização.
Definição de Usabilidade
A autora nos esclarece que o termo usabilidade já esta muito desgastado, assim vários
autores o abordam de diversas formas, trazendo definições orientadas ao usuário, ao
desempenho do usuário, ou ao produto.
um sistema interativo é considerado eficaz quando possibilita que os usuários alcancem
seus objetivos. A eficácia é a principal motivação que leva um usuário a escolher e usar
um sistema ou outro. Descobriu-se que o usuário almeja resultados, lucros, portanto a
eficácia é tão importante na decisão sobre o uso e aquisição do produto, software.
Um segundo elemento da usabilidade e a eficiência, que pode ser definida como o tempo
total para se realizar uma tarefa e a quantidade de erros na operação.
Um terceiro elemento a ser analisado e subjetivo mais facilmente identificável, qual seja,
SATISFACAO do usuário, que nada mais é do que os sentimentos, percepções, opiniões
dos usuários a respeito do sistema.
Em suma a usabilidade pode ser, segundo a autora, uma qualidade de uso, qualidade de
interação entre usuário e sistema, um conjunto de elementos objetivos e subjetivos que
dependem do sistema e do usuário. O que torna seu conceito tão difícil de ser aplicado
pois pode mudar de usuário para usuário.
Princípios da Usabilidade
- Para melhor entender o termo usabilidade temos que saber os princípios a comportam e
a possibilitam.
- O desempenho do usuário — a avaliação é feita de forma subjetiva a partir do trinômio
eficácia—recursos (tempo, dinheiro e esforço mental)—eficiência. Conceitos já
definidos, mais muito instáveis.
- Facilidade de aprendizado — depende o usuário. Ou seja, regiões mais avançadas onde
a população em geral já tem familiaridade com sistemas e outras onde os usuários não
terão a mesma facilidade e eficiência. Porem, em outras linhas, a idéia central é de que o
sistema deve "falar" a língua do usuário sendo que seus conceitos e idéias devem ser
entendidos facilmente.
- Eficiência de uso — O sistema deve permitir que o usuário, ao interagir com ele, atinja
níveis altos de produtividade na realização de suas tarefas. Porem o princípio esbarra,
novamente, nos níveis de usuários diversos.
- Facilidade de memorização — O usuário não freqüente é capaz de retornar ao sistema.
Esse principio é muito parecido com o acima, busca a simplicidade no acesso, com fulcro
na eficiência.
- Baixa taxa de erros — O usuário é capaz de realizar tarefas sem maiores transtornos. A
interatividade do sistema com o usuário e o ambiente de trabalho se faz necessária, pois
um ambiente barulhento resulta em um usuário disperso, o que aumenta a ocorrência de
erros.
- Satisfação subjetiva — o usuário considera agradável a interação com o sistema e se
sente subjetivamente satisfeito com ele.
- Consistência — tarefas similares requerem seqüências de ações similares, assim como
ações iguais devem acarretar efeitos iguais, usar terminologia, leiaute gráfico, conjunto
de cores e fontes padronizados também são medidas de consistência.
- Flexibilidade — O usuário e o sistema devem trocar informações de forma variada e
flexível.
- Para realizar a avaliação da usabilidade é necessário coletar alguns dados sobre usuários,
as tarefas realizadas pelo portal, e o ambiente organizacional, físico e o equipamento
utilizado (hardware, configuração de software).
 Acessibilidade na web
- “Acessibilidade na web significa que pessoas com deficiência podem usar a web. Mais
especificamente, a acessibilidade na web significa que pessoas com deficiência podem
perceber, entender, navegar, interagir e contribuir para a web. E mais. Ela também
beneficia outras pessoas, incluindo pessoas idosas com capacidades em mudança devido
ao envelhecimento”.
- Se for aplicada a definição geral de acessibilidade ao ambiente específico da web, pode-
se dizer que se trata da possibilidade e da condição de alcance, percepção e entendimento
para a utilização, em igualdade de oportunidades, com segurança e autonomia, dos sítios
e serviços disponíveis na web. Porém, para abarcar a complexidade do conceito de
acessibilidade na web, existem alguns aspectos específicos que precisam ser
considerados.
- Está cada vez mais difícil encontrar um campo da atividade humana em que não haja,
de algum modo, influência da web, seja na educação, na formação profissional, no
trabalho, na informação, na cultura, nas comunicações, no comércio, nos negócios, na
saúde, nos serviços públicos e nos contatos profissionais e pessoais, citando apenas os
campos de utilização mais comuns. Além dessa diversidade temática, é cada vez mais
importante que a web esteja disponível em todas as situações e ambientes, a qualquer
momento, sob as mais diversas condições técnicas. Dessa forma, considera-se
fundamental a disponibilidade da web em casa, no trabalho ou nas viagens, em
dispositivos móveis ou computadores convencionais, seja em ambientes internos ou
externos, em meios urbanos ou rurais.
- Assim, a web assume um papel de tão grande importância, que sua acessibilidade passa
a não significar acesso a uma coisa só, mas a uma infinidade de aspectos importantes da
vida e do cotidiano de cada pessoa.
- Nesse mesmo sentido, Tim Berners-Lee [5] afirma que o poder da web está na sua
universalidade. o acesso por todas as pessoas, não obstante a sua deficiência, é um aspecto
essencial. Para o W3C [6], é essencial que a web seja acessível, de modo a prover
igualdade de acesso e de oportunidades para pessoas com diferentes capacidades. E
acrescenta que a acessibilidade sustenta a inclusão social de pessoas com deficiência,
idosas, residentes em áreas rurais, em países em desenvolvimento, entre outras.
- Acessibilidade na web é a possibilidade e a condição de alcance, percepção,
entendimento e interação para a utilização, a participação e a contribuição, em igualdade
de oportunidades, com segurança e autonomia, em sítios e serviços disponíveis na web,
por qualquer indivíduo, independentemente de sua capacidade motora, visual, auditiva,
intelectual, cultural ou social, a qualquer momento, em qualquer local e em qualquer
ambiente físico ou computacional e a partir de qualquer dispositivo de acesso.
- O fundamento teórico mais relevante para o conceito de acessibilidade é o Desenho
universal, que é o desenvolvimento de produtos e ambientes para serem usáveis por todas
as pessoas, na maior extensão possível, sem a necessidade de adaptação ou desenho
especializado [4]. A ideia principal contida no Desenho universal é que o mundo
projetado deve se adaptar o melhor possível a todas as pessoas, ao invés de exigir destas
um grande esforço de adaptação. Estão de acordo com o Desenho universal, por exemplo,
os ambientes que possuem rampas de acesso, banheiros e bebedores adaptados, fraldários,
pisos podotáteis, elevadores com áudio e painéis em Braille, etc. outro exemplo são os
filmes que possuem audiodescrição, legendas e tradução para LIBRAS – Língua
Brasileira de Sinais.
- Assim, o uso do Desenho universal significa um grande passo na direção de um mundo
cada vez mais inclusivo, que se adapta cada vez mais às diferentes habilidades e
necessidades das pessoas e que exige delas cada vez menos esforço individual adaptativo,
o qual, como sabemos, acaba sempre por excluir muitas pessoas da participação na vida
social e também por privar a sociedade da contribuição que poderia ser trazida por essas
pessoas.
São sete os princípios do Desenho universal:
 Equiparação nas possibilidades de uso: pode ser utilizado por qualquer usuário
em condições equivalentes.
 Flexibilidade de uso: atende a uma ampla gama de indivíduos, preferências e
habilidades individuais.
 Uso simples e intuitivo: fácil de compreender, independentemente da experiência
do usuário, de seus conhecimentos, aptidões linguísticas ou nível de concentração.
 Informação perceptível: fornece de forma eficaz a informação necessária,
quaisquer que sejam as condições ambientais/físicas existentes ou as capacidades
sensoriais do usuário.
 Tolerância ao erro: minimiza riscos e consequências negativas decorrentes de
ações acidentais ou involuntárias.

 Mínimo esforço físico: pode ser utilizado de forma eficiente e confortável, com
um mínimo de fadiga.
 Dimensão e espaço para uso e interação: espaço e dimensão adequados para a
interação, o manuseio e a utilização, independentemente da estatura, da
mobilidade ou da postura do usuário.
- Ao se aplicarem à web os princípios do Desenho universal, conclui-se que os objetos e
ambientes utilizados nos sítios devem ser projetados para serem utilizados, sem
modificação ou assistência externa, pelo maior número de pessoas possível,
independentemente de suas habilidades motoras, visuais, auditivas, táteis ou de qualquer
outra condição que possa oferecer dificuldade na finalização de uma tarefa.
(Acesso em 21 de junho de 2019. Link
<http://www.w3c.br/pub/Materiais/PublicacoesW3C/cartilha-w3cbr-acessibilidade-
web-fasciculo-I.html>