Cubezilla

Conclusão sobre o projeto Cubezilla: colaboração online e offline se complementam

fred — Wed, 15 Jul 2009 08:23:26 -0700

O projeto Cubezilla criado pelos alunos da pós-graduação Faber-Ludens/Fisam/UnC foi premiado no desafio da Mozilla Labs na categoria voto popular. O desafio era repensar as abas do navegador, que já não dá conta dos hábitos de navegação dos usuários, porém, nossos alunos foram além: redefiniram a metáfora de navegação para o navegador. Ao invés de navegar uma pilha de documentos, navega-se um cubo Rubik. Veja no vídeo abaixo:

Estas idéias não apareceram do nada; são resultado de um trabalho árduo de semanas, envolvendo a participação de alunos de três turmas diferentes. Para organizar os projetos desenvolvidos no Instituto Faber-Ludens, nós usamos o sistema de grupos do Drupal. Com isso, é possível colaboração online, porém, sem os encontros offline, o projeto definitivamente não teria ido tão longe.

O projeto começou com algumas pesquisas de referências de abas no mundo físico, em navegadores e outros aplicativos. Como o ponto era as abas dos navegadores, levantamos as dificuldades com elas. Surge então a primeira proposta mais consistente, o agrupamento de abas.

Sugeri ao Bruno Duarte aproveitar a metáfora do clips, que tem uma função similar, mas a discussão que se seguiu demonstrou que poderíamos evoluir mais a idéia.

O professor Érico Fileno propôs desenvolver o projeto em sua disciplina Técnicas de Prototipação I e aí o projeto deu um gás. Utilizando as técnicas de criatividade em grupo que grandes empresas como IDEO utilizam, foi possível gerar uma grande quantidade de idéias alternativas. De fato, ainda estão para inventar uma plataforma para colaboração melhor do que uma mesa, papel e lápis/caneta.

Enquanto uma das turmas tinha aula presencial com o Érico, outras duas participavam online, promovendo discussões fantásticas como esta sobre o comportamento do usuário em ambientes hipertextuais e esta outra sobre a necessidade de abrir tantas abas. A discussão se estendeu até o blog da Karine Drummond, que nem fazia parte do projeto mas acabou contribuindo para ele.

O prazo estava acabando e ainda não havia sido fechado o conceito a ser proposto. Então, o pessoal que mora em Curitiba resolveu se reunir presencialmente para fechar. Foi uma noite muito produtiva! Ficamos das 19 até 23hs aperfeiçoando a proposta do Alexandre Ribeiro de usar o cubo Rubik como metáfora de navegação. Foi empolgante ver os alunos aplicando os conhecimentos que haviam adquirido com o professor Érico!

No final de semana que se seguiu, Tersis, Alexandre, Samille, Vicktoria, Fernando, Ana Carla e Leonardo deram seu sangue para montar o vídeo em sucessivos encontros online e offline. Deu resultado. O projeto recebeu notas muito boas dos jurados na apresentação da proposta, porém, acharam que a proposta estava longe do que tinham pedido: repensar as abas dos navegadores. Realmente o Software Livre está precisando urgente de mais designers: eles não sabem o que é inovação. Ainda bem que a votação popular reconheceu o esforço do pessoal! Eles mereceram.

Com este projeto comprovei pra mim que a colaboração online não substitui a colaboração offline, mas complementa. Online é bom pra analisar, comparar, discutir e desenvolver. Offline é bom pra criar, decidir e comprometer-se.

Cubezilla

Sobre o Cubezilla !!

potel — Mon, 13 Jul 2009 00:25:32 -0700

Observando bem a questão do projeto, achei muito interessante, e gostaria de fazer algumas considerações:

Vejamos os passos para selecionar um site no Cube no caso de poucos sites abertos e tambem ja que as abas somene armazenam websites abertos no navegador naquele momento:

1 - Levo o mouse ate o cubo no canto, entao ele se abre ao meio

2 - Leva o mouse ate o cubo no meio

3 - Clica no no website no lado que se deseja visualizar

4 - O site se abre e uma barra de navegação aparece no topo

OU no caso de muitos sites:

1 - Leva o mouse ate o cubo no canto

2 - Leva o mouse ate o cubo no meio

3 - Clica no botao "+ 60 sites"

4 - Abre-se uma pagina com a grade de websites

5 - Seleciona-se o website que se quer visualizar

6 - O site se abre e uma barra de navegação aparece no topo

-------------------------------------

Em termos de facilidade isso nao poderia ser reduzido para:

1 - Leva o mouse ate o cubo no canto

2 - Girando o cubo la mesmo, clica-se no lado que deseja utilizar

3 - A barra de navegação aparece no topo,entao se seleciona o site

Isso ja nao seria o suficiente para o uso tanto com mtos websites abertos como para poucos ? Em 3 passos pôde-se resumir o acesso a os sites.

Poderia implementar alem disso um controle para se adicionar um quadro vazio na barra de navegação para que a pessoa clique nele e digite um novo endereço mantendo as outra abas (quadros) abertos.

Nisso estou dando uma ideia baseado no fato somente da navegação com sites de uso momentaneo, mais se poderia implementar a essa ideia o uso de um sistema de favoritos.

Claro que dessa forma, perderia um pouco de fator visual, mais, se for eficiente, economizaria recursos do pc, no caso de um pc mais lento que perde desempenho com recursos visuais e passos de navegação tendo o usuario mas agilidade no processo e gerenciamento de websites abertos tanto como no projeto padrão.

Poderia funcionar assim?

Cubezilla

CONCEITO: Metáfora de navegação baseada no cubo de Rubik

Alexandre.Ribeiro — Thu, 02 Jul 2009 20:25:41 -0700

Depois de abrir várias abas no seus navegador, navegar por elas ou lembrar em que posição está uma determinada aba pode tornar-se uma tarefa maçante, especialmente para alguém que normalmente abre mais de 20 sites.

Em nosso projeto Reinventando Abas de Navegadores, o cubo de Rubik será usado como metáfora de um modelo mental para uma ferramenta de navegação onde cada face representa um grupo de informações (sites, abas, imagens, etc).

O Cubo solucionado e Erno Rubik, seu criador

Porque um cubo?

O cubo de Rubik é um quebra-cabeças com formato de um sólido regular de seis faces onde cada uma destas possui uma cor única e dividide-se em partes menores.

O uso de uma forma em três dimensões, em que cada lado é identificado por uma cor única, permite ao usuário usar sua memória espacial para lembrar-se, por exemplo, que dentre os 45 sites abertos no navegador, o site do Instituto Faber Ludens é um dos que que estão "armazenados" no lado azul.

Possibilidades

Além da navegação no modo tradicional (com o mouse), um Cubo Real pode ser usado como artefato para a interação com o navegador por meio de Realidade Aumentada.

É possível usar gestos, como girar o cubo para mudar o lado, aproximar para um zoom das miniaturas dos sites e tocar cada faceta do cubo para abrir um site. Assim, a navegação se torna uma experiência mais parecida com as atividades que realizamos diariamente, usando os braços e mãos, além de permitir que o usuário se livre do uso pouco anatômico do mouse.

1º Croqui: Tela de navegação para uso do mouse.

2º Croqui: Navegação por meio de Realidade Aumentada.

Não apenas a navegação, mas o armazenamento de favoritos ou históricos (Time Cubes), como um ‘retrato’, onde os sites abertos podem ser armazenados como estão, que podem ser acessados posteriormente em um cubo específico.

Ao invés de uma lista extensa, como o histórico ou os favoritos dos navegadores atuais, os Time Cubes permite que o usuário acesse os sites abertos ao mesmo tempo, com a mesma configuração visual do momento em que o Time Cube foi gerado. Isso permite que o usuário mantenha a mesma linha de raciocínio do momento em que pesquisava naqueles sites.

Pensando para além da Internet, o uso desta metáfora permite a navegação por gestualidade de conteúdo extenso de multimídia, como, por exemplo, imagens, vídeos, canais de TV, onde cada cubo representa pastas ou conjuntos de pastas: cubos dentro de cubos, como caixas dentro de caixas.

3º Croqui: Time Cubes e uso de gestos com holografia.

Apresentação do conceito e discussões sobre as possibilidades

Cubezilla

Fechamento do conceito para o concurso da Mozilla

fred — Sat, 20 Jun 2009 17:38:46 -0700

Alunos da pós-graduação Faber-Ludens/Fisam/UnC discutem detalhes de metáfora de navegação baseada no cubo Rubik.

Cubezilla

Metáfora de navegação baseada no cubo de Rubik

Alexandre.Ribeiro — Fri, 19 Jun 2009 05:08:47 -0700

Porque um cubo?

O cubo de Rubik é um quebra-cabeças com formato de um sólido regular de seis faces onde cada uma destas possui uma cor única e dividide-se em partes menores.

Possibilidades

Além da navegação no modo tradicional (com o mouse), um Cubo Real pode ser usado como artefato para a interação com o navegador por meio de Realidade Aumentada.

1º Croqui: Tela de navegação para uso do mouse.

2º Croqui: Navegação por meio de Realidade Aumentada.

3º Croqui: Time Cubes e uso de gestos com holografia.

Cubezilla

Brainstorming sobre um navegador web baseado no cubo mágico

tersis — Thu, 18 Jun 2009 11:53:52 -0700

Melhores momentos da discussão sobre como usar um cubo mágico Rubik como metáfora de navegação para o Firefox. No primeiro vídeo, há uma discussão conceitual. O segundo possui alguns testes, incluindo uma demonstração usando o plugin Cooliris.

Cubezilla

Esboços de metáfora de navegação baseada no cubo mágico Rubik

fred — Thu, 18 Jun 2009 06:23:51 -0700

Esboços criados na reunião de brainstorming para a entrada no concurso da Mozilla para reinventar as abas. O pessoal foi além e reinventou toda a navegação, baseando-se numa metáfora de cubo.

Cubezilla

Utilização de abas em hipertextos: comportamento do usuário em uma leitura não-linear

gonzatto — Thu, 04 Jun 2009 06:19:24 -0700

Este texto dá continuidade a alguns aspectos das discussões do post "Porque abrir 5, 20, 40 ou 86 abas? Porque não um site de cada vez?", que trata de alguns estudos e conversas sobre o projeto Reinventando Abas de Navegadores.

A leitura no hipertexto

A internet facilitou uma proposta que era muito difícil de ser aplicada em meios usualmente não-digitais (como o livro, o jornal, etc.): a idéia de hipertexto e os seus hyperlinks (hiperligações).

No hipertexto, pulamos de uma leitura para outra e vamos de um texto para outro, muito rapidamente. Ou seja, o escritor não precisa mais escrever um texto, preso a uma linearidade, pois ele pode propor a transição do leitor entre a leitura de vários textos. Esta possibilidade de escolha que se dá ao leitor, de seguir o caminho de leitura que preferir (até então, geralmente o leitor só poderia mudar a ordem de leitura de um texto ao pular algumas páginas do livro e começar no final por exemplo, mas provavelmente esta leitura ficaria desconexa e sem sentido).

Fonte da imagem: Blog do Toshi

Se, mesmo assim, realizamos uma tarefa de cada vez, a nossa leitura continua linear (mesmo que o que lemos não siga uma linearidade). Criamos uma sequência de leitura lendo algo (seja ele qual for) de cada vez, pois não conseguimos ler duas coisas de modo realmente simultâneo. Por isso, mesmo que no trajeto da leitura sejam lidos sites totalmente diferentes, ainda temos uma sequência linear de leitura, pois realizados uma tarefa de cada vez.

Abas e hipertexto

As abas têm papel fundamental na evolução dos navegadores, pois tornam mais fácil trabalhar com o hipertexto. Antes das abas, a leitura de um hipertexto tropeçava em pequenos dilemas... por mais simples que seja, existe um que aconte comigo:

Estou lendo um texto e vejo um link que me interessa. Se entro no link, perco a sequência de leitura (e de idéias) que vinha desenvolvendo. Se não entro no link, fico pensando que posso esquecer-me dele (antes mesmo de esquecer) e penso que posso estar perdendo informações que me interessaria.

Com as abas, o usuário agora pode abrir o outro site, ler e voltar ao texto anterior, rapidamente; ou ainda deixar aberto o link do outro site e ler mais tarde (pois, como o link foi aberto, há uma chance maior de que o usuário não vá esquecer-se de ver aquele link).

**Como se comporta, o que sente, um heavy user do hipertexto?**

A aba, portanto, facilita que o usuário escolha o que quero fazer, e permite que o faça de forma mais prática, como citou o Bruno.

Mas agora, com a intensa utilização das abas, novos problemas surgiram. No projeto de reinvenção de abas que estamos participando, temos que pensar no trabalho com 40 abas abertas ou mais. Estamos falando, portanto, de pensar abas para heavy users de internet. Essas são pessoas que já lidam, diariamente, com o hipertexto. Já assimilaram a linguagem do hipertexto e, mesmo sem perceber, sabem que é diferente do "texto linear" (comum no mundo offline) e que tem características particulares.

[Seria interessante aprofundar este texto com informações sobre comportamento do usuário no hipertexto. Aceito citações ou textos!]

Analisando este tipo usuários, relaciono-os com sentimentos expressos por amigos (e os meus próprios), e proponho algumas hipóteses. Em relação ao hipertexto, é possível que muitos usuários:

Estejam ficando ansiosos em conseguir o máximo de informação possível (vide a preocupação em ler todos os feeds do Reader), e desesperados por estar a par de tudo, já que no hipertexto a informação disposta pode não ter fim (um link leva a outro link, que leva a outro...);
Tenham receio de estar perdendo informações (se não clicar naquele link, não saberá o que há nele, e pode de ser algo que a pessoa procura, mas que ela nunca saberá se não clicar...);

(Estes dois pontos, para mim, estão ligados à própria natureza da internet, que possui uma (aparente) infinidade de conexões e informações disponíveis, à distância de um clique).

Em função destes sentimentos do usuário, as abas funcionariam, muitas vezes, como:

Introdução de novas leituras; que é a abordagem mais óbvia: abrir uma nova aba para abrir um site de um novo assunto, que não caberia abrir na aba em que eu já estava trabalhando;
Leitura paralela; que é a idéia do hipertexto, citada no começo deste post. Abro uma nova aba a partir de um link de uma aba já aberta, para manter uma leitura paralela;
Extensão de uma página/Função; pois há vezes em que o site abre uma nova aba, ou o usuário força a abertura de uma nova aba, de algum conteúdo que é uma funcionalidade de um site (exemplo: abertura de aba para caixa de comentários de um site);
Memória; quando um link é aberto em uma nova aba, para não esquecer de ler ele depois;
Economia de tempo; um link pode demorar alguns segundos para abrir, por uma questão tecnológica entre a capacidade de processamento de computadores e servidores e a velocidade de transferência de dados pela internet; para driblar este atraso, o usuário abre várias abas e deixa-as carregando enquanto continua a navegação que estava sendo feita;

Impressões pessoais

Se a navegação na internet não tem um caminho pré-definido, eu não sei aonde vou parar e nem por quantos sites irei passar. Assim, voltar a achar um site por onde passei pode não ser uma tarefa fácil.

Eu percebi que eu mesmo, enquanto usuário heavy user, costumo buscar a sensação de que não estou "perdendo nada". Por isso, quando passo por um conteúdo que acho realmente interessante, preciso capturá-lo e guardá-lo, para não perdê-lo, pois posso não esbarrar com ele novamente. Não quer dizer que preciso, necessariamente, abrir um site, ou várias abas, para "possuir" estes sites. Há situações em que, ao guardar o link deles, mesmo sem abri-los, já basta para saciar esta sensação.

Quando me dizem que "algo está na internet", penso o quão amplo isso pode ser. É quase como dizer que "algo está no mundo". Quando adiciono algo no Delicious, sinto que aquele site agora tem um lugar: esta comigo, guardado em minha lista e sob meu poder. Para mim, o Delicious trabalha exatamente neste sentido. Eu adiciono muitos itens nele, e a maioria das vezes é para pensar que não vou perder aquela informação, ou sentir que, quando eu quiser, saberei onde aquela informação está.

O interessante é que são raras as vezes em que procuro por um site que guardei no Delicious. E tampouco acho fácil encontrar os sites que guardei lá. Mas continuo adicionando sites lá, pois a sensação de que quando o faço, saberei onde eles estão, é mais forte. Apesar de não encontrar rapidamente as coisas, ao menos sei que elas realmente estão por lá.

Relacionando estas idéias com o projeto "Reinventando Abas"

Ao observar a repetição de idéias e conceitos nos projetos concorrentes (deste desafio proposto pela Mozilla), é possível perceber que vários designers estão propondo soluções parecidas (como ao grupamento de abas,as telas de visualização das abas abertas e as disposições diferentes das abas - esquerda, direita, diagonal, cantos, entre outras). São soluções para algumas questões que já estão bem claras. Do modo como os navegadores vêm trabalhando as abas, hoje, vemos - por exemplo- que:

As abas ocupam muitos pixels do monitor para apresentar, visivelmente, todas as abas abertas;
Com muitas abas abertas, fica difícil manter um sentido/contexto e, às vezes, até de lembrar porque determinada aba foi aberta;
A organização, o fechamento de várias abas e a organização da disposição delas na barra de abas, é complicada,
Os ícones têm um potencial pouco aproveitado.
Entre outros;

Então, para trazer este projeto mais próximo do Design de Interação, temos que pensar não somente em tentar resolver o problema de "como trabalhar com 40 abas simultâneas", mas de facilitar as necessidades que levam o usuário a abrir essas 40 abas. E as possíveis razões para este comportamento do usuário me parece ser:

Realizar várias leituras paralelas;
Não perder nenhuma informação;
Abrir sites mais rapidamente;

Trabalhando idéia para o projeto"Reinventando Abas": Histórico, Favoritos e Abas

Uma ideia recorrente que tenho, desde o início deste projeto, é de que a questão das abas está ligada diretamente com a função das ferramentas de "Histórico" e de "Favoritos".

Os "Favoritos" são as abas abertas que mais nos interessaram. É um registro ocasional e "intencional". Colocamos um site no Favoritos pois acreditamos que vamos querer acessar aquele site novamente, e queremos que ele esteja "fácil" de acessar. Os social bookmarks, API's, feeds e mashups expandiram a função do Favoritos. Os mashups, APIS e feeds, por exemplo, trazem a informações que queremos. Se não fossem estes recursos, iríamos ter que gravar aqueles sites nos favoritos e ter que acessar um por um para receber aquelas informações.

No caso do social bookmark (como é o caso do site Delicious), este não funciona somente como um substituto dos Favoritos. A classificação folcsonômica proposta nos maiores sites de social bookmark permite trabalhar facilmente com grandes quantidades de conteúdo. O que acaba acontecendo é que estes sites podem funcionar como repositórios de conteúdos que "não queremos esquecer".

Já os sites de busca são o recurso final para encontrar algo importante. Quem já não teve a sensação de que, se algo não está no Google, não pode ser encontrado? Pessoalmente, eu raramente guardo links de memória, e por vezes nem digito endereços de sites, pois sei que digitando certas palavras-chaves no Google, terei acesso àquele site, e a salvo de erros e enganos (de digitação, de esquecimento de endereço de link, etc.).

O "Histórico" é um registro constante e "não-intencional" (usei este termo somente para falar sobre o aspecto de que nem sempre lembramos que o que acessamos irá ser registrado no "Histórico") de todas os sites (e abas) abertos.

É a história da navegação do usuário. Costuma ser útil quando precisamos rever que sites foram acessados em um determinado dia ou horário, ou em determinado momento. Se todos os sites que eu acessei estão ali, porque precisaria usar o Favoritos? Porque não é prático buscar, por data, hora, ou contexto, um site acessado. Deste modo, destacam-se alguns em um outro ambiente, que são os Favoritos, até porque estes são sites que provavelmente serão acessados diversas vezes, e por isso devem estar facilmente disponíveis na "área de trabalho" do navegador.

Idéias

Grande histórico

Tudo que é acessado vai para um grande histórico, onde algumas urls se destacam pela relevância e o valor que dou para cada url. Ou seja. Todos os sites acessados são armazenados, com o mínimo valor de relevância possível, e eu posso, facilmente, durante minha navegação, assinalar os que são favoritos (que gosto mais), os que quero lembrar de ler tempos, e o que mais eu quiser. Poderiam ser utilizadas etiquetas para isso (ou melhor: etiquetas visuais).

Segurando com o ponteiro do mouse

Utilizando o ponteiro do mouse como uma metáfora para uma "mão". Ao invés de abrir um link em uma nova aba para não esquecer de ler aquele site depois, e para ela "ir carregando" (ou seja, para economizar tempo), eu poderia ir "segurando e guardando abas" no ponteiro do mouse.

Também poderia simplismente criar uma lista de links, em cada site, para lembrar de acessar. Ou programar que outro site seja carregado naquela mesma aba, quando fecha-la ou quando terminar a leitura dela (ao fim da página, já começa a próxima página, como a leitura em um "rolo de papel" ou em um reader).

Botão de fechar e salvar aba

Do lado do botão de fechar a aba, poderia ter um botão do tipo fechar e salvar a aba. Assim eu fecho uma aba que não quero que fique em meio a minhas abas abertas, mas não "perco" aquele link, pois ele ficará salvo (em alguma área parecida com um "Favoritos", mas específica para isto) para permitir um acesso futuro.

Sites abertos dentro de uma aba

Abas abertas dentro de abas, mas de uma forma diferente do "agrupamento de abas". É a possibilidade de abrir uma ou mais abas, dentro de outras, e todas ficarem visíveis ao mesmo tempo. Como um split de tela. Seria útil para realmente trabalhar com dois sites ao mesmo tempo, digitar enquanto se faz pesquisas, por exemplo.

Botão de ocultar aba

Botão de "ocultar" (ou minimizar?) a aba, que deixa salva a página para carregar mais rapidamente da proxima ver que ela for acessada.

Acessar conteúdo sem abrir nova aba

Poder acessar conteúdo (ou página) na mesma página em que você está, como já começou a ser feito na internet, com as imagens (para ver um exemplo, a Faber Ludens usa este recurso, aqui). Assim, "economizam-se" abas. Já existem plugins, em alguns sites, que fazem um trabalho parecido. O boo-box, se não me engano, exibe publicidade de maneira similar.

[atualização: Já existe Apture, uma ferramenta para blogs que permite que adicionar acesso, com 1 clique, à conteúdo multimídia. Funciona com Twitter, Youtube, Wikipedia, Blip.tv, entre outros]

Abas-aplicativos

Existem sites que, conforme nossa necessidade, costumamos deixar sempre abertos. Como o E-mail, o Googl Docs, o orkut, o twitter, o feed. Estes sites poderiam se apropriar deste idéia de abas-icones (Favitabs, de Grady Kelly) para que estes sites, que são extremamente acessados, ficassem sempre acessíveis em uma espécie de área de "abas-app", ou abas-aplicativos.

Na verdade, estes sites não precisariam ficar "ocupando" o espaço de abas. Este conceito também é trabalho pelo Google Chrome, que permite que sejam colocados sites-aplicativos.

Cubezilla

Porque abrir 5, 20, 40 ou 86 abas? Porque não um site de cada vez?

gonzatto — Wed, 03 Jun 2009 09:32:00 -0700

Acredito que imaginar respostas (teorias aburdas também valem!) para estas duas perguntas pode trazer idéias interessantes para o projeto.

"Porque as pessoas abrem 5, 20, 40 ou 86 abas?
"Porque uma pessoa não abre um site de cada vez?"

Participantes do grupo do projeto e visitantes, o que vocês acham?

Cubezilla

Análise das idéias dos projetos competidores

gonzatto — Tue, 02 Jun 2009 07:09:45 -0700

Analisei e resumi alguns dos projetos dos concorrentes do desafio:

Multi-Tab''n (Michael Kosmatka)

Idéia central: Agrupamento de abas.
Mais sobre: A aba tem um número do lado, mostrando que existem várias abas ali.
Outras coisas interessantes: Mostra o consumo de gasto de memória daquelas abas, no sistema

TreeBrowser TreeBrowser (Igor Afanasyev)

Idéia central: Propõe que as abas virem miniaturas das páginas e sejam navegáveis visualmente, através de um "árvore" ou teia de páginas que vão se ligando
Mais sobre: as páginas, conforme você for abrindo, vao se linkando, como em uma arvore genelogica, mas desorganizada
Questionamentos que faço sobre esta idéia: 1) não resolve bem o problema de trabalhar com um excesso de abas. 2) como estas abas ocupam um amplo espaço visual, não estao à vista sempre, entao acaba sendo mais demorado acessa-las

Fire Tabs (Phillip Caudell)

Idéia central: trás a idéia de agrupamento de abas, e a idéia de "Idle tabs", que são abas não utilizadas, ocultas.
Mais sobre: Também tem uma opção de visualização gráfica, em tela "cheia", para ver as abas que estão ativas.

Tab Tray Tab Tray (Ken Moore)

Idéia central: Opção de visualização gráfica, em tela "cheia", para ver as abas que estão ativas.
Mais sobre: Tem várias funções para trabalhar várias abas, como se elas fossem arquivos em uma pasta.

Concept (Jan-Christoph Borchardt)

Idéia central: barra de Abas na esquerda;

Concept (Susheel Kewaley)

Idéia central: Colocar abas dentro de outras abas, criando vários nívels horizontais de abas;

Favitabs (Grady Kelly)

Idéia central: As abas é reduzida a seu ícone e continuam na horizontal.
Mais sobre: Os endereços, ou o texto que geralmente aparece na aba, agora aparece na diagonal diagonal. Também são propostas algumas telas de visualizações das abas abertas, em forma de timeline, entre outros..

Cubezilla

Agrupando abas

brnduarte — Tue, 26 May 2009 19:23:26 -0700

E aí pessoal.
Então tive essa idéia enquanto trabalhava compulsivamente no Photoshop. No programa da adobe quando preciso agrupar diferentes layers, uso as teclas de atalho CTRL + G pra isso.
Fiquei tão bitolado em usar esse recurso que mais de uma vez me peguei utilizando o mesmo recurso em locais diferentes por exemplo ao agrupar arquivos dentro de uma pasta no Windows. A mecanica no programa da Microsoft é ultrapassada, visto que ainda é necessário reunir diferentes arquivos e arrasta-los (ou recortá-los) para dentro de uma pasta para move-los.

A idéia que eu proponho (por favor me corrijam se alguém ja houver proposto isso antes, ou mesmo se este recurso já existir no mozilla) é a utilização de teclas de atalho para agrupar diferentes abas em torno de um mesmo conteúdo.
Ao criar essa nova "Aba Pasta", reduzimos o espaço utilizado na barra de abas do navegador e agrupamos conteúdos semelhantes.

Podemos também adicionar diferentes conteúdos que fazem parte de uma mesma navegação. No exemplo um conteúdo de tecnologia é jogado para a aba de design e todos fazem parte do mesmo assunto "textos para a aula de IxD".

Ao reunir todo esse conteudo podemos sugerir uma opção em que uma mini aba fique sempre presente no canto superior ou inferior da tela lembrando ao usuário que ali existe um conteúdo armazenado previamente, podendo ser visto inclusive em modo off-line. Caso o cara seja mais esquecido podemos sugerir um mashup com o Ubiquity para que o usuário possa enviar esse conteúdo para seu email.

Cubezilla

Wiki: Problemas, dificuldades e necessidade com as Abas

gonzatto — Mon, 25 May 2009 18:12:58 -0700

A partir de experiências pessoas e entrevistas, constataram-se as seguintes dificuldades, problemas e necessidade com as Abas:

Abro uma nova aba, mas a nova aba que se abre aparece no final da lista de abas

Isto é um problema quando se tem muitas abas abertas. Você está na 1ª aba, e pede para abrir uma aba nova, e esta abre lá no final. Pode ser um pouco chato para trabalhar com as duas abas, além de ser mais chato ainda "puxar" uma ou mais abas de um lugar para outro, na lista de abas (veja mais sobre este outro problema, abaixo).

Solução que já existe: No Chrome não há este problema, pois a com Ctrl+T, a aba abre logo após a aba atual naquele momento.

Tenho várias abas abertas, e quero puxar mais de uma aba do final para o começo.

Quando se tem 20 abas abertas, não há problema em trazer a última aba para o começo: é só arrastar.

Mas quando se tem que trazer mais de uma aba, o trabalho fica um pouco tedioso, pois se tem que fazer isso aba por aba, uma por vez.

Idéia: Poder selecionar abas em lote.

Estou com várias abas abertas e quero fechar várias delas, mas não todas

Quando se tem 20 abas abertas e deseja-se fechar 15, pode ser um pouco chato. Poderia haver algo que facilitasse o "fechamento" de abas em lote.

Idéia: Poder selecionar abas em lote, ou poder selecionar várias abas e agrupa-las, podendo fechar ,então, de uma vez, todas as abas este agrupamento.

Estou com várias abas abertas e aperto sem querer em fechar, e todas se fecham

Acredito que isto aconteça com o usuário que não está acostumado com o sistema de abas, e acaba clicando no botão de fechar do navegador ao invés do botão de fechar da aba.

Idéia: Acho que isto já existe, mas poderia ser comum haver um "Ctrl+Z" para este tipo de ação.

Estou com várias abas abertas, o programa trava e perco todas as abas e informações que estavam abertas

Solução que já existe: O navegador pode ir "salvando", constantemente, as urls das páginas abertas.

Idéia: Além de recuperar as abas abertas, poderiam ser recuperadas as informações inseridas, o que entra exatamente no tópico abaixo.

Fecho uma aba sem querer e perco toda a informação que eu inseri ali

Esta é uma situação por vezes frustrante, especialmente quando se está escrevendo um texto longo ou preenchendo um formulário extenso.

Cubezilla

Dissecando o que o Mozilla Labs quer com este Desafio

gonzatto — Mon, 25 May 2009 11:31:58 -0700

Vou analisar algumas informações que o Mozilla Labs colocou no site do desafio (Summer '09), para entendermos melhor o que projetar. Por favor corrijam se alguma tradução estiver errada.

Trabalhar com até 20 abas já é comum

Tabs worked well on slow machines on a thin Internet, where ten browser sessions were "many browser sessions". Today, 20+ parallel sessions are quite common;

TRADUÇÃO: As abas funcionavam bem nas máquinas lentas em uma Internet pequena, onde 10 sessões de navegadores eram "muitas sessões". Hoje 20 ou mais sessões paralelas são até comuns

Estamos lidando com uma mudança no comportamento dos usuários: há a necessidade de trabalhar com muitas sessões simultâneas, no navegador.

Enquanto trabalhamos com poucas abas abertas, está tudo visualmente acessível e fácil de encontrar. Com muitas abas abertas, se eu deixar todas as abas visíveis, posso estar ocupando espaço demais no navegador (e na tela do monitor). Pensar em Arquitetura da Informação (ou Arquitetura da Informação em Abas? rsrs).

Navegador como Sistema Operacional

the browser is more of an operating system than a data display application. we use it to manage the web as a shared hard drive.

TRADUÇÃO: o navegador está mais para um sistema operacional do que uma aplicação de exibição de dados. Nós usamos isso para gerenciar a internet como um disco rígido compartilhado.

Além de muitas abas abertas, temos aplicações abertas no navegador (seja através de um site, como um Google Docs, ou um editor de texto como complemento do Firefox), carregando ele, e exigindo muito deste aplicativo (que já se assemelha a um navegador).

O que antes, era apenas privado, pois ficava isolado em um computador, agora pode ser coletivo, pois está na internet (como documentos, textos, etc). Que tal poder compartilhar as "abas" que estão abertas no meu navegador, constantemente, na internet, tal qual podemos fazer com as músicas que ouvimos, pelo Last.fm?

Como pensar abas enquanto espaço temporário para informações heterogêneas?

However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.

TRADUÇÃO: De qualquer maneira, se você tem mais do que sete ou oito abas abertas, elas se tornam um tanto quanto inúteis. E as abas não funcionam bem se você as usa para informações heterogêneas. Elas são uma boa solução para manter a tela arrumada, no momento. E é justamente isso que elas devem continuar fazendo.

Pelos estudos do Mozilla Labs, o problema de abas começa justamente a partir de 7 a 8 abas abertas simultaneamente. Se estamos trabalhando com informações homogêneas (digamos que estou aqui no site da Faber Ludens e abro diversos posts que encontrei no blog) não há muito problema. Torna-se complicado gerenciar abas quando eu abro, por exemplo 2 e-mails, 3 posts do blog, 2 notícias e uma série de documentos diferentes.

Abas, na visão acima, são um espaço temporário, que organiza as informações naquele instante de utilização do navageador. Me parece que alguns estudos sobre classificação (folcsonomia e taxonomia? agrupamento, pastas?) podem ser úteis aqui.

Links e inspirações

To get you started, to inspire your thinking and to give you a taster for the thoughts which were already thought on this topic, read Aza Raskin's blog post about "Firefox.next: Tabs on the side?", Oliver Reichenstein's post about "Designing Firefox 3.2" and Michael Mahemoff's post about "Taking Browser Tabs Seriously". Also check out Liz Blankenship, Jakob Hilden and Kerry Kao's work and research on TabViz "Visualizing browser tabs in a useful way"

TRADUÇÃO: Para que você possa começar, para inspirar seu pensamento e para dar a você um gostinho dos pensametnos que já estão pensando sobre este assunto, leia o post do bog de Aza Raskin sobre "Firefox.next: Abas do lado?", o post de Oliver Reichenstein's sobre "Projetando Firefox 3.2" e o post de Michael Mahemoff's sobre "Falando sério sobre Abas de Navegadores". Também dê uma olhada no trabalho e na pesquisa de Liz Blankenship, Jakob Hilden e Kerry Kao's em TabViz "Visualizando abas de navegadores de um modo útil"

Vários links úteis para pensar sobre o assunto. Há um twitter com informações: @mozconcept

Cubezilla

Ideias para Abas de navegadores!

gonzatto — Mon, 25 May 2009 07:23:16 -0700

Coletei (e ampliei) algumas ideias que postei nas discussões por e-mail.

Sobre Favicons e Cores nas Abas

IDEIA: Pensando na utilidade que tem o Colourful Tabs, penso: ao invés de instalar um programa para colocar as abasm os próprios sites poderiam colocar, em seu código HTML, um código que indique as cores que o identificam (cores para aparecerem nas Abas), tal qual já acontece hoje no que diz respeito aos FaviconsS. Acredito que as cores nas Abas são tão interessantes e úteis quanto estes ;)

IDEIA 2: Seguindo a mesma idéia, os Favicons também poderiamdar mais informações, tal como o Gmail Favicon Alerts.

Organização de Abas

Quanto ao gerenciamento de Abas, algo que me incomoda no Windows é que eu não posso mudar de "lugar", uma aba dessas que ficam na barra de tarefas aqui em baixo. Se eu abro um bloco de notas, uma pasta e um programa, tudo fica aberto na ordem que eu abri eles. Já nas abas do Firefox, eu posso reorganiza-las como eu quiser. Acho isso deveras útil.

PARA PENSAR: Que outros problemas (e funções úteis) encontramos no nosso Sistema Operacional, que podemos resolver (ou trazer) para os navegadores?

PARA PENSAR 2: Me parece que, para trabalhar com muitas abas abertas, é essencial pensar em Arquitetura da Informação e Classificação das Abas.

IDEIAS: As abas poderiam, assim como no Windows, ser agrupadas por tipo, para - visualmente - ocuparem menos espaço. Ou poderia ser habilitado para que sejam abertas 2 linhas de abas, ao invés de uma única (como é no Firefox).

Ou ainda, tal como em sistemas operacionais como o do Mac OS, poderiam haver várias "telas" de "áreas de trabalho", que agrupassem tipos diferentes de sites abertos. Desta maneira, eu posso realizar uma pesquisa em uma destas áreas de trabalho e deixar abertos determinados sites, enquanto pesquiso outros assuntos em outra tela, sem confundir abas.

Cubezilla

Wiki: Propostas que já existem para modificar Abas no Firefox

gonzatto — Mon, 25 May 2009 07:01:47 -0700

Extensões para Firefox

O Firefox tem como característica a possibilidade de qualquer usuário adicionar novas funcionalidades ao seu navegador, através da instalação de extensões.

ColourfulTabs

Um complemento do Firefox que gosto é o ColorfulTabs. Ele colore as abas desta maneira:

Particularmente, acho muito útil, pois torna mais fácil de identificar que sites estão abertos (eu uso vermelho para o Gmail, por exemplo, e Azul Claro para o Orkut. Então, quando abro muitas abas destes, fica fácil encontra-las no meio de outras abas de outros assuntos.

IE Tab

Possibilita mudar o sistema de navegador que esta visualizando de um site, na mesma aba. Exemplo: Estou vendo uma página pelo Firefox, clicando no botão "IE Tab", vejo a mesma página, na mesma aba, com a mesma visualização que teria se tivesse aberto o navegador IE, mas tudo isso sem sair do Firefox.

Scripts para Greasemoneky

O Greasemonkey é como uma "Web aumentada". Ele inclui, suprime e modifica informações de sites, de acordo com seu gosto.

Gmail Favicon Alerts

O Gmail Favicon Alerts é um script que muda o favicon do Gmail, conforme mudanças no site:

Muda o ícone para mostrar quantas mensagens não lidas;
Mostra o ícone padrão do Gmail quando todas as mensagens já foram lidas;
Mostra o balão do Gtalk quando alguém iniciar uma conversa com você;

Tendo em vista que o favicon é parte integrante das Abas do navegador, é muito interessante analisar suas possibilidades de informação, e não ver os ícones "apenas" como "enfeites" ;)

Cubezilla

Wiki: Referências de abas "reais"/físicas

gonzatto — Mon, 25 May 2009 06:43:42 -0700

Alguns links e imagens coletadas pelo Alexandre Ribeiro:

Cubezilla