Archive for the 'Uncategorized' Category

Comunicado

Caros, recebi comunicado neste mês, março de 2017, que um xará meu (Wallace Vianna) está registrando o meu nome no INPI (Instituto Nacional de Propriedade Industrial, marcas e patentes).
Isso vai levar a uma situação surreal, de que não poderei usar meu nome profissionalmente no mercado de trabalho, devendo (eu!) adotar um nome de fantasia em breve.
Venho deixar registrado no FaceBook/internet isso apenas para fins de informação de anterioridade/antiguidade profissional, pois não deixarei de trabalhar por causa disso.
Grato pela atenção.

Entrevista: história da caricatura no brasil (o livro)

 

2016-07-03 14.53.55

Publicado no site Pan Hora Marte a 1a. parte da entrevista que fiz com Luciano Magno, autor da coleção de livros sobre a história da caricatura brasileira.

Link direto

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.