Arquivo para agosto \20\UTC 2010

Com frames ou sem frames

Na área de webdesign (mas poderia ser tecnologia, computação, ou em determinado conhecimento) muitas práticas são abandonadas ao longo do tempo, seja por falta de leitura crítica ou por obsolescência. Um exemplo são as cores seguras (safe colors) para web. Muitos dos que apregoam que isso é uma prática obsoleta desconhecem que muitos dispositivos portáteis que acessam a web como celulares e PDAs não trabalham com 16 milhões de cores…

Isso vale também para projetos de interface desenhados para resolução de tela de 800×600 pixels: não há como ter 100% de certeza sobre como sua página web será vista, na largura e muito menos na altura

Outra prática muito criticada hoje em dia é uso de frames. O argumento é o de sempre: tecnologias novas existem, dispensando esse artifício para exibir mais uma página (ou conteúdo) na web, simultaneamente. Meu argumento é o de que se o COBOL fosse ruim já teria sido substituído pelo .NET, JAVA ou ORACLE no sistema financeiro Brasileiro (que possui um dos sistemas bancários mais evoluídos do planeta). E o CGI, que é utilizado em 90% dos provedores de hospedagem de sites no mundo não seria mais utilizado por esse raciocínio. Assim sendo, vamos ver os prós e contras dos frames (traduzido como molduras ou quadros):

Prós:

  • É uma linguagem de marcação, simples de ser implementada por designers que não tem intimidade com programação ou ferramentas de atualização de conteúdo complexas/caras.
  • Pode ser utilizada para estruturar (frame) ou desenhar (iframe ou inline Frame) um layout para web.

Figura 1
  • Torna o carregamento de um site mais ágil, uma vez que a parte do conteúdo que não se altera só é carregada uma vez.

Figura 2
  • Na data em que escrevo este artigo (dez.2009) frames tem maior consistência do que o CSS (folha de estilos), pois exibe a estrutura igual em diversos navegadores.

Figura 3

Contras:

  • Dificulta a contextualização direta do endereço de uma página, uma vez que a URL (endereço) aponta para a estrutura que reúne duas ou mais páginas.

Figura 4
  • Sistemas de busca podem indexar apenas uma página e não o conjunto; isso é particularmente ruim em páginas estruturadas por frames: uma página assim estruturada pode fazer sentido apenas se vista dentro do conjunto.

Figura 5
  • Iframes com links internos podem exibir um layout desestruturado se o conteúdo for maior que o tamanho do frame; conteúdo selecionado por “clique-e-arraste” pode exibir layout truncado.

Figura 6
  • Tem limitações difíceis ou incômodas de serem contornadas dependendo do layout de seu projeto(*); por exemplo, iframe com largura proporcional à largura/altura da janela do navegador.

Figura 7

Atualmente pode-se incluir conteúdo externo à página, ou montar uma página com diversos conteúdos através de tags/marcações de inclusão que se utilizam de tecnologias (javascript, asp, php, etc). Isso resolve algumas questões (fim do conteúdo visualizado fora do contexto, pois ele é não é mais visualizado e sim copiado na página de destino) mas cria outras  como lidar tecnologias mais complexas, com novos pros e contras como a não-indexação de “conteúdo dinâmico” em sistemas de buscas, pois o conteúdo não existe na pagina HTML indexada na web, somente no computador do visitante, ao ser aberta.

Enfim, projetar é conhecer as soluções existentes e contextualizá-las ao projeto. Por isso digo que não existe tecnologia nova ou velha, existe é uma solução que resolve melhor o seu problema, no contexto em que se ele apresenta.

Segundo SILVA (2008)*, o layout de páginas da internet pode ser:

  • Fixo: “Página e colunas tem largurafixa. […] Qualquer que seja o tamanho da janela do navegador ou resolução, as larguras não variam”.
  • Líquido: “As larguras são definidas em porcentagem. O layout acomoda-se em largura a qualquer tamanho da janela ou resolução do monitor”.
  • Elástico: “Uma opção para o layout líquido […] (visto que) o comprimento total das linhas de texto podem se torrnar tão reduzido ou extenso que afete a legibilidade. (Aqui as) larguras (são definidas) com base no tamanho da fonte”.
  • Híbrido: Possui duas abordagens: “a largura da página, de colunas e demais […] componentes […] do layout são definidas em (tamanho do texto) e adicionalmente definimos para tais componentes uma largura máxima em porcentagem”. Pode-se ainda inverter o conceito, com larguras do layout em porcentagem e larguras máxima e mínima em tamanho do texto.

________________________________________
* Referência: SILVA, Mauríco Samy. Construindo sites comCSS e (X)HTML: sites controlados por por folhas de estilos em cascata. São Paulo: Novatec, 2008.

Anúncios

Interfaces de navegação (2)

[barras, menus e submenus de navegação]

Tradicionalmente a interface dos programas de computador instalados no “lado cliente” (*)  (que rodam nos pdas, passando pelos netbooks/laptops até os micros de mesa ou desktop)  comtemplam barras de navegação com menus horizontais e submenus normalmente verticais. Aqui, ao passar o cursor sobre o menu principal, ele apenas muda de cor. Ao clicar é que o submenu aparece com suas opções.

Quando o tópico do submenu exibe reticências – … – ele indica que há outras telas a serem exibidas.


Fonte: Microsoft Windows Vista

Na computação “desktop”/lado cliente há o clique para selecionar e o duplo-clique para acessar/abrir (uma janela ou programa)…

 

Fonte: Microsoft Windows Vista

… que passou a ter uma segunda possibilidade, baseada na navegação de hipertexto (internet): passar o cursor para selecionar e um clique para acessar ou abrir o seu destino (janela, ou programa).

 

Fonte: Microsoft Windows Vista

Se considerarmos uma navegação de nível “raso”, todos os tópicos da barra de navegação são links/vínculos de navegação, visíveis.
ex.:


Fonte: Microsoft Windows Vista

Se essa barra de navegação contiver menus, os tópicos com menu são apenas categorias. Isso vale para os submenus.
ex.:

Fonte: Microsoft Windows Vista

Se um tópico de uma barra de navegação é link, corre-se o risco do usuário pensar que não existe um menu ali, a não ser que o menu seja exibido ao passar o cursor sobre ele.

Nesse sentido a metáfora da interface dos programas desktop de apenas destacar o tópico do menu (mudando  cor, sem exibir o menu/submenu) não é desejável na internet.

Fonte: Microsft Windows Vista

na interface desktop, se o tópico é link:
– ele não é categoria de links abaixo dele, no sentido de reunir links relacionados a um assunto; não deve ter menu/submenu abaixo dele.
ou
– ele deve ser apenas categoria de um assunto ou link; se um dos assuntos abaixo dele possui nome idêntico a categoria, o assunto deve ser nomeado como sinônimo.

P.ex., na interface desktop se o menu principal contém Vídeos Nacionais e abaixo dele existe o subtópico Nacionais de novo,
| vídeos nacionais
> nacionais
> locais

recomenda-se usar um sinônimo – “por país” – no lugar de “nacionais”, outra vez.
| vídeos
> por país
> por região

é claro que existem programas que estenderam a navegação de menus tradicionais, com painéis ou abas que se desdobram na horizontal e vertical; esse tipo de interface foge ao escopo deste texto.

Na internet as barra de navegação podem ser verticais ou horizontais, assim como os menus e submenus; um menu vertical pode ter um submenu horizontal, por exemplo.

     
Fonte: Construindo sites com CSS e (X)HTML, Murício Samy, Ed. Novatec

A interface de navegação por menus na internet, em sites como o Hotmail e o WordPress apresentam links nos menus (ou tópicos) e submenus, o que nos leva aos seguinte cenário: na web todos os ítens do menu podem ser links, mesmo gerando navegação redundante (**)

Fonte: http://www.hotmail.com e wordpress.com, acessados em  junho 2011

 

Novas formas de categorizar e organizar a navegação já existem, para facilitar a navegação e aprimorar as interfaces para o usuário online:
– Tabelas de links dentro de menus ou sob a forma de links relacionados a uma página ou assunto
P. ex.:
passar o cursor num menu de navegação exibindo uma grande tabela com diversos links

Fonte: http://www.terra.com.br, acesso em junho 2011

– tabela de links (fixos) para páginas relacionadas, em cada página do site.

Fonte: http://www.quicklessons.com.br, acesso em junho 2011

– Tags/marcações que permitem que o autor do texto crie suas próprias categorizações para o leitor, que por sua vez pode navegar pelo(s) assunto(s) desejado(s).
P.ex.: nos blogs você pode procurar textos clicando nas tags/marcações
a) reunidas (pelo blog) ao lado ou ao final da página sob a forma de nuvem de links (vide figura abaixo),
ou
b) reunidas ao final de cada post (pelo autor).

Fonte: ppdesdi.wordpress.com, acessado em  junho 2011

Enfim, aqui tratei de questões de interface baseada em navegação textual. Outros conteúdos demandam novas soluções de interface, que discutirei noutro texto.

Notas:

(*) Computador no lado do usuário (ou cliente) de uma rede.

(**) O que não é de todo ruim, pois isso pode agilizar a navegação, de acordo com o modelo cognitivo (ou modo de perceber a interface) de cada usuário.

Interfaces de (micro) navegação

Outro dia me lembrei de um projeto que teve interferência (malsucedida) de um colaborador: o layout original do site tinha navegação por menus comuns (barra de navegação) e o colaborador (programador) substituiu este menu (comum) por um menu expansível, do tipo acordeão.

O problema estava no fato de que em cada tópico (ou link) o menu acordeão (do tipo “exibe-um-oculta-os-demais”) exibia muito conteúdo (página inteira ou mais) não necessariamente padronizado (formulários, listas, tabelas) o que gerava uma confusão para quem navegava na interface: ao contrário do projeto original (menu tradicional, fixo), a navegação não permitia ir para qualquer ponto do site, com um mínimo de cliques.

Isso me leva a algumas recomendações preliminares, mesmo sem testes de usabilidade que validem essas hipóteses, a priori.

Antes de tudo queria diferenciar os elementos de micronavegação[1] menus, lista e barra de navegação:

Menus: conjunto de opções (links) verticais onde o tópico principal é visível todo o tempo e os subtópicos por seleção direta.


exemplo1

Lista (de opções ou seleção): conjunto de opções verticais onde todos os tópicos são visíveis, ou são visíveis através de rolagem.


exemplo2

Barra de navegação: conjunto de opções verticais ou horizontais, que pode ter nível único ou subníveis, sendo todos sempre visíveis.

Link1 Link2 Link3
             Link2.1  Link 2.2  Link 2.3

Link1
Link2
   Link2.1 
    Link 2.2 
    Link 2.3
Link3

exemplo3

Existem situações mistas, onde a barra de navegação é composta por diversos menus de nível único (exemplo4) ou multinível (exemplo5). Neste caso, a nomenclatura adotada normalmente é a primeira (barra de navegação) que contém a segunda categoria (menus).


 
exemplo4

 
 
exemplo5

Vale lembrar que menus e listas são elementos de interface que podem ser utilizados em outras situações que não navegação de hipertexto (formulários para seleção de opções e envio de dados, por exemplo). Estas, assim como a barra de navegação são estruturas de micronavegação como os hiperlinks (ou hipervínculos) ou links de hipertexto por permitirem acesso direto à informação.

1. Barra de navegação de nível único

Link1 Link2 Link3

Link1
Link2
Link3
exemplo6

– podem ocorrer em uma página (sumário ou índice) ou mais páginas;

– devem pelo menos indicar a seção do site em que o usuário se encontra;

– em mais de uma página devem manter o mesmo desenho (aparência, posição e organização) a fim de gerar consistência na navegação, evitando que o usuário tenha de pensar para onde deve ir;

– se prestam a navegação “rasa” (simples).

2. Menus de navegação nível único ou multinível

exemplo6

– podem ocorrer em uma ou mais páginas;

– como os os sub-tópicos não são sempre visíveis, a página deve indicar a seção do site em que o usuário se encontra;

– devem mater o mesmo desenho (aparência, posição e organização) a fim de gerar consistência na navegação;

– se prestam a navegação proofunda;

3. Barra de navegação do tipo BredCrumb Trails (Trilhas de migalha de pão)

Link1 > Link2 > Link3

exemplo7

– ocorrem em em várias páginas;

– por natureza, indicam a seção do site ou categoria em que o usuário se encontra,

– se prestam a estruturas de navegação profunda;

– os BC de caminho por reproduzirem o histtórico do navegador, devem ser implementados via programação;

4. Guias de navegação

– podem ocorrer em várias páginas, mas normalmente estão relacionadas a seção de um conteúdo (site) ou função (aplicativo).

– servem para sinalizar navegação “rasa” (sem subníveis dentro de cada tópico);

– devem mater o mesmo desenho (aparência, posição e organização) a fim de gerar consistência na navegação seja horizontal ou vertical;

exemplo8

5. Listas de navegação com rolagem

exemplo9

– podem ocorrer em uma ou mais páginas;

– devem permitir indicar, como qualquer link de hipertexto, a última página navegada, a página atual páginas não-visitadas; essa indicação pode ocorrer na própria página, próxima da lista.

6. Menus de navegação expansíveis (acordeão)

– podem ocorrer em uma ou mais páginas;

– listas verticais que exibem conteúdo não devem exceder uma tela em resolução mínima [2], tanto para listas do tipo “exibir-uma-ocultar-outras” (exemplo10) como para as “exibir-mais-de-uma-lista” (exemplo11) para não desorientar o usuário.

– listas horizontais devem ocorrer em apenas uma linha, para não desorientar o usuário com excesso de opções;

– listas verticais longas devem ocorrer com rolagem e formatação (ou ordenação, conforme exemplo 12) que indique hierarquia;

7. Menus de navegação tabulares (ou tabelas de links)

Link Link 

   
Link1 Link2 Link3
Link4 Link5 Link6

exemplo13

– podem ser do tipo pop-up/de salto (sobre a página) ou inline (dentro da página);

– dependendo do tamanho, pode ter rolagem;

– podem ocorrer em uma ou mais páginas;

– sumarizam ou indexam [3] ou conteúdo de uma seção do site;

– se prestam a estruturas de navegação complexas, mas não substitui um mapa do site

– não devem exceder a largura e altura de uma página, na resolução mínima [2]

8. Mapa do site

Descrição geral e completa da estrutura do site. É o segundo nível de navegação dentro de um hipertexto, logo após as estruturas de micronavegação.

– não devem ter links ocultos

– devem estar ordenados como índice ou sumário [3]

exemplo14

9. Sistema de buscas

Normalmente por palavras-chave, é uma forma de gerar uma tabela de links que contenham os termos ou palavras procuradas. Atualmente o recurso de pré-busca contextual (tabela de links gerados enquanto se digita um termo) está se tornando um recurso popular nos buscadores de internet.

– normalmente se situa na área principal de um site (topo ou box)

– o uso de sistemas de busca próprio ou de terceiros geralmente se restringe ao site em questão

– deve ser utilizado em sites complexos ou com conteúdo extenso/específico

– o conteúdo indexado deve ser baseado em texto, ou classificado por texto atraves de tags descritivas (no caso de imagens ou mídia não-textual como vídeo, áudio, animações)

 
exemplo15
    10. Nuvem de links e marcações

Nuvem de links (link cloud) são um conjunto ou tabela de links gerados a partir de sistemas de buscas normalmente dentro de um corpo fechado[4] como um blog ou favoritos mas podendo ocorrer em buscas em corpo abertos como a Internet.

Nuvem de marcações (tag cloud) estão dentro do que se classifica como Folksonomia (Classificação Popular, numa tradução livre): uma comunidade dentro de um corpo fechado (fórum, blog) define suas palavras-chaves para classificar o próprio conteúdo ali gerado, facilitando a classificação e localização de assuntos, sem “engessar” a classificação e localização de assuntos com palavras-chave pré-definidas.

Atualmente ambos estão assumindo um papel semelhante ou paralelo ao mapa do site ou sistema de buscas, ao exibirem links relevantes conforme o número de acessos ou popularidade (termos mais utilizados num corpo fechado) dentro de um termo ou assunto.

– podem ser ou não contextuais (relacionados a um termo ou assunto) , pois podem reunir todos os termos mais populares dentro de um corpo fechado ou aberto .

– a hierarquização dos termos é visual, por tamanho da fonte, cor ou estilo.

Internet, Comunidades, Vídeos, Podcast, MP3, Fotografias, Redes de relacionamento.

exemplo16

Notas:

[1] Uma razoável descrição e taxonomias de elementos de navegação podem ser lidos em:

[2] no momento (dez.2009) a resolução mínima de tela para navegação é de 800×600 pixels, o que dá uma área útil do navegador (visualização) em torno de 760×410 pixels.

[3] Indexação: Listagem ou organização por ordem alfabética ou de assunto; Sumarização: Listagem ou organização, por ordem cronológica.

[4] “Corpos fechados” segundo BRUSILOVSKI (2001) estão relacionados com sistemas de recuperação de informação que fazem “busca dentro de um site”; aqui uso o termo para me referir a um conjunto de páginas relacionadas dentro de um blog, site de blogs ou blogs que compartilhem uma mesma estrutura de nuvem de tags/marcações. “Corpos abertos”, por oposição, seriam espaços que abrangem uma ou mais redes de computador como a internet

Referência:

BRUSILOVSKY, Peter. Adaptive Hypermedia: User Modeling and User-Adapted Interaction, Holanda:Kluwer Academic Publishers, 2001.