Archive for the 'Interfaces' Category

Design responsivo x site mobile dedicado

Eduardo Brandão fez uma pesquisa muito interessante sobre esse tema – design responsivo vs site mobile dedicado em seu site/blog, onde destrincha os prós e contras de cada abordagem, sempre numa perspectiva científica, muito interessante pois separa o que é pre/conceito dos fatos. Ainda que os atos possam ser subjetivos, a separação/comparação é muito salutar.

Uma questão interessante – e que se torna muito recorrente hoje, sendo aplicável a qualquer área de nossa sociedade, baseada no consumo – é “no que o (design responsivo ou dedicado) é melhor para meu site/empresa/negócio”? O argumento de unificar conteúdos e interfaces (ou optar por uma interface mais bonita) para facilitar o uso cai por terra quando Eduardo argumenta: “O Facebook é um grande exemplo para mim, pois acho a interface feia e confusa! Mas continuo usando porque todos meus amigos estão lá” (quem não se identifica com essa declaração ou ama demais o FaceBook ou já esqueceu de como era prazeroso usar o Orkut).

Enfim, apesar da leitura longa, se você trabalha na área, vale uma leitura.

Alguns links relacionados (da Wikipedia, em inglês) para ajudar a compreender melhor alguns assuntos paralelos:
Future-proof (layout ou design).
Foundation framework.

Anúncios

Layout versus resolução de tela (3)

Atualmente existem dezenas de dispositivos (equipamentos, aparelhos) no qual sua página de internet pode ser vista: ceulares, smartfones, tablets, computadores de mesa ou portáteis. E isso subentende vários formatos de tela, desde as telas tradicionais de micro de mesa em proporção 4:3 ou 1:1 passando pelas telas wide-screen/panorâmicas até os micros portáteis e de mão.

Como citei num artigo anterior, existem técnicas de projeto que ajudam ao projetista de internet (webdesigner) a definir as dimensões de seu site se o cenário for limitado a telas tradicionais, em duas ou três resoluções de tela.

Em monitores 4:3 e 1:1, até 17 polegadas, as resoluções de tela seriam:
800 x 600 pixels, com área útil sem rolagem de tela em 760 x 410 pixels
1024 x 768 px, com área útil de 1000 x 600 pixels
1280 x 1024 px, com área útil de 1260 x 856 pixels

Em monitores panorâmicos 16:9 até 17 polegadas as resoluções de tela seriam:
1440 x 900 pixels
1280 x 600 px
1280 x 768 px
1280 x  720 px
1176 x 664 px

Mas todos esses cuidados acabam não sendo úteis se seu layout vai ser visualizado em dispositivos portáteis que podem ser horizontais ou verticais.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Teoricamente sites em CSS são rediagramados automaticamente para aparecer em dispositivos pequenos (como celulares).
Dispositivos ou navegadores de internet que não rediagramam o seu site o exibem em zoom (visualização que aumenta ou diminui o layout, em escala).
Por fim, pode-se fazer duas versões do mesmo site, uma para dispositivos tradicionais, outra para portáteis mantendo a estrutura e conteúdo (HTML) e mudando a folha de estilos (CSS).

Aí entra o Design Responsivo (responsive design) que nada mais é que o uso de tecnologias para web (HTML, CSS, Javascript, Flash) a fim de rediagramar seu layout para a maioria das situações possíveis: horizotal ou vertical; tela tradicional ou panorâmica; dispositivo de mesa ou de mão.

Fonte: http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

Cada tecnologia trata a sua maneira estas questões de projeto de interfaces para internet, seja escalonando o layout conforme a resolução de tela (Flash, p.ex.) ou ocultando/recortando/redistribuindo o conteúdo (CSS); portanto cabe ao projetista de internet (webdesigner) estudar a tecnologia a ser utilizada em seu projeto de sites para esse fim.

Em termos práticos pode-se usar bibliotecas de código (como o JQuery) para implementar esses recursos rapidamente, ou desenvovler seu site em CMS (gerenciadores de conteúdo, como o WordPress) que já possuem recursos para adaptar o site a diferentes dispositivos.

Links de hipertexto em Flash

O Flash é uma tecnologia adequada a internet? Jacob Nielsen colocou esse tema de modo claro ao afirmar, décadas atrás que o Flash – coqueluche da internet no seu lançamento – era incompatível com o ambiente da internet. Os motivos são vários, alguns persistem até hoje:
links feitos em Flash não necessariamente possuem destaques (sublinhados ou borda) que  indicam os estágios da navegação (links não-visitados, visitados, e atuais, p.ex, como o HTML se esforça a indicar até seus limites[*])

Fiz uma tentativa de resolver essa questão de navegação em Flash, e como já ví outros sites com essa mesma preocupação, fico feliz de saber que estou no caminho certo: além do texto flash mudar de cor ao passar o cursor sobre o link, o link assinala através da cor a página/tela atual e as demais páginas.

(Exemplo de flash com links de hipertexto)

Download do exemplo


Nota(s):

[*] o HTML indica através de cores se uma página foi (ou não foi) visitada, e a página atual. Mas não tem como indicar se a página atual  é uma página visitada, ao mesmo tempo. Algumas estratégias utilizando ou não tecnologias complementares como CSS procuram resolver estas questões: posso retirar o link da página atual da barra de navegação para indicar a página que estou, ou formatar o link da página atual com uma cor ou estilo diferente, via CSS, com o mesmo fim.

Layout versus resolução de tela (2)

Retomando o tema e a pergunta freqüente em curso de webdesign: meu site deve ser feito em que tamanho (melhor dizendo, dimensão = largura e altura)?
Primeiro, vamos definir as resoluções de tela mais utilizadas: 800×600, 1024×768 e 1280×1024 pixels


E a Área útil de cada resolução, sem barra de rolagem: 760 x 410, 1000×600 e 1260×856

Áreas úteis para resolução de monitor de 800×600, 1024×768 e 1280×1024 pixels.

Atenção apenas a dois detalhes:

  1. As resoluções de monitor 800×600 e 1024×768 são proporcionais entre sí, já a resolução 1280×1024 não é proporcional em relação às anteriores. Isso significa que um layout feito para as duas primeiras resoluções, se for visto na terceira, irá aparecer com faixas vazias acima e abaixo (ou cortado nas laterais, como nos filmes da TV tradicional).
  2. As dimensões de área útil aqui citadas são apenas uma referência, pois é impossível prever qual navegador, monitor (14”, 15”, 17”, 21”, 29”) e barras do navegador o usuário está usando, o que pode ampliar ou reduzir a altura (área útil vertical) do navegador.

A variável mais fácil de controlar é a largura (área útil horizontal) tomando o cuidado de definir se seu layout terá ou não borda na página (HTML); neste texto vamos considerar que essa borda já foi retirada de seu layout.

Vamos colocar as situações mais comuns, dentro do que se convencionou chamar de melhores práticas, mas que não chegam a ser definitivas.

Layout encaixado na tela

– Layout fixo

Normalmente esse layout pressupõe ser visto sem alterações de forma, em escala (proporcional).

Assim sendo, seu layout tem de ser feito pensando minimamente para o usuário de 800×600 (área útil em torno de 760×410 pixels) e não deve ter barras de rolagem em nenhuma das “resoluções mais utilizadas”.

Layout em 800×600, 1024×768 e 1280×1024 pixels.



– Layout líquido (ou fluido) encaixado na tela

Nesse caso o layout se ajusta tanto horizontal quanto verticalmente, nas três resoluções de monitor (1024×768 e 1280×1024 pixels). Normalmente desenvolvido em Flash ou HTML (com programação). Se destina a páginas que devem ser vistas por inteiro, ocupando toda a área útil da janela do navegador, sem reduções de escala.


Layouts em 800×600 e 1024×768 pixels.



Layout vertical

– Largura fixa, alinhado à esquerda

Layout em 1280×1024 pixels.

Aqui apenas temos de ter o cuidado de dividir o layout em áreas de maior, médio e menor interesse.

Destina-se a sites onde o conteúdo pode ser distribuído (e exibido) em camadas de relevância sem alterar o layout.
O conteúdo mais relevante deve poder ser visto, sem rolagem (horizontalmente), em resolução de tela 800×600 (largura da área útil em torno de 760 pixels);
o conteúdo de médio interesse (também horizontalmente) em 1024×768 (largura da área útil em torno de 1000 pixels) e 1280×1024 pixels (largura da área útil em torno de 1260 pixels).
O conteúdo de menor interesse a partir de 1280×1024 pixels, com rolagem.

     

Layout projetado para duas resoluções de tela: 800×600 e 1024×768 pixels.

– Largura fixa, centralizado

Aqui recaímos quase que na mesma situação, a área útil horizontal (mínima)deverá ser para 800×600 (largura de 760 pixels); nas demais resoluções as laterais ficam em branco (ou com fundo de página preenchido com cor ou imagem).

Se destina a sites que:

  • precisam ter desenvolvimento rápido
  • podem ter seu conteúdo em escala
  • necessitam ter mesma diagramação, em qualquer situação
Layouts em 800×600, 1024×768 e 1280×1024 pixels.



– Layout líquido horizontal:

No sentido horizontal, se aplica em qualquer resolução. Normalmente feito em tabelas ou CSS, eventualmente em Flash.

Destina-se a sites que precisam ter seu conteúdo principal visto em qualquer resolução – mínima ou máxima – mesmo com alguma alteração no layout.

Layouts em 800×600, 1024×768 e 640×480 pixels (ou nas duas primeiras resoluções de monitor, com largura da janela do navegador reduzida).



Outras tendências

Uma das novidades na área de web, além da acessibilidade, tableless, webstandards é o design “Full flash browser” (numa tradução livre, “Flash em toda a tela do navegador”) que é um layout onde a navegação ocorre sem a tradicional barra de rolagem do navegador, mas percorre (ou “rola”) além da tela visível, em todas as direções como neste exemplo ou neste outro exemplo:

Esse tipo de navegação é uma evolução dos sites com “navegação horizontal“, uma vez que

sugere navegação em qualquer sentido, além (e dentro) da tela do navegador, sem rolagem tradicional.

Uma outra tendência é o design em camadas múltiplas, onde as páginas ocorrem umas sobre as outras. O site da criadora do Harry Potter é um bom exemplo dentro desta tendência.

Como esse assunto evolui, em breve discorrerei sobre layouts para dispositivos móveis e telas wide-screen (panorâmicas).

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.