tabnews.com.br
tabnews.com.br copied to clipboard
filipedeschamps
[Árvore de comentários] Responsividade em telas pequenas
Bom dia, tarde ou noite!
De antemão, queria falar que não verifiquei todas as issues para ver se tem essa.
Problema: Erro simples de responsividade, com visto nas imagens abaixo.
Possível solução: Criar um veja mais quando o encadeamento do próximo componente for menor que x pixels.
Perfeito! Tinha reparado isso e ia postar essa issue logo mais.
Acredito que a solução deveria ser modificar o design, encadeando as respostas de forma vertical, utilizando uma estratégia de UX/UI que o usuário entenda que a resposta de baixo é referente ao conteúdo imediatamente de cima.
Nossos UX/UI podem elaborar melhor hehe.
Ocultar conteúdo ou torná-lo expansível não é uma boa prática pra nossa ideologia.
Em resposta à @tembra
Saquei, tinha criado a branch para realizar o modificação. Mas vou deixar a discussão rolar aqui! Para ver a melhor forma de resolver.
Caramba fui ver como o youtube faz só trabalha com 2 camadas e o Github com uma.
Acho difícil uma discussão entrar em muitos níveis assim, mas acredito que podemos solucionar com a mudança no UX/UI.
Se o objetivo do tabnews é trabalhar todos os comentários de forma igual, talvez não devemos utilizar esse "TAB" uma sugestão é adicionar um pré-titulo
Exemplo:
Em resposta de @azevgabriel
e deixar ordenado de forma que fique claro a resposta.
Galera algo assim não funcionaria?
Diminuir o padding ou a margin entre os encadeamentos de acordo com a width do viewport. Sinalizar o encadeamento com alguma cor diferente.
Ignorem a falta de software, no paint é mais rápido. Apenas para demonstração.
Acredito que a ideia do @rodrigoKulb é a que mais se alinha com a ideologia do projeto, uma vez que removemos as conexões visuais de dependência, deixando apenas um Em resposta de @rodrigoKulb , passaremos a pensar mais nas respostas como conteúdo completo e menos como um 'ah! valeu' em resposta da publicação, com fim ali.
Nesse sentido, até a linguagem 'Em resposta de' no lugar de 'Resposta para' é melhor, tendo em vista que a primeira opção dá mais a ideia de 'estou criando algo novo a partir de algo' e a segunda da a ideia direta de 'estou apenas respondendo alguém', essa ideia também ocorre quando aninhamos as respostas com bordas. Mas também, além desse texto, podemos e acho que devemos agrupar as respostas de uma mesma publicação, seja ela a primeira publicação ou resposta de uma outra. Isso pode ser feito de algumas formas, mas gostaria de destacar duas:
- Visualmente: colocar a resposta diretamente abaixo da publicação a qual ela faz menção;
- Deixar as respostas seguirem apenas a ordem cronológica, mas colocar um
ver respostas (23)ao lado de cada resposta (já resolvendo a issue #332 ). Esse botão não expande nem retrai as respostas de uma determinada resposta na publicação, mas sim expande a própria resposta como publicação e as respostas que houver para ela estarão logo abaixo.
Acho que a segunda opção é bem legal e espero ter conseguido explicar como iria funcionar :)
A ideia do @rodrigoKulb realmente é a melhor nesse sentido. Podemos ainda fazer um hyperlink para quando clicarmos no "Em resposta a @..." ser redirecionado de fato para a resposta.
Após toda essa análise, dificilmente teremos mais do que 5 respostas encadeadas. Mas se observarmos bem, o problema do TabNews nem é o encadeamento em si e sim design:
- A cada nova resposta perdemos pixels preciosos tanto na esquerda quanto na direita.
- Acredito que não precisamos perder espaço na direita.
- Quanto ao espaço da esquerda ele deveria ser reduzido.
A ideia seria mudar o design/espaçamento para algo parecido com o do Reddit, por exemplo:
Aqui temos 5 respostas encadeadas em relação ao post original e já fica legível, mas dariam mais respostas, ainda deixando legível. Compare isso agora contra 6 e 7 respostas encadeadas da imagem apresentada lá em cima na criação desta issue.
Finalmente acredito que desta forma fica até melhor de lermos um conteúdo (sem o espaçamento na direita) ou até mesmo de fazermos o "scan" do @filipedeschamps hehe
Muito boa discussão turma 🤝
Quando implementar as TabCoins eu vou fazer uma proposta que vai mexer bastante no layout (para comportar elas) e que vai liberar mais espaço 👍
Eu acho que o @higorpo fez uma ótima sugestão no app da TabNews: https://github.com/higorpo/tabnews-mobile poderia ter algo semelhante né? Acho que é mais ou menos o que a galera tá discutindo aqui, de "minificar" as respostas.
O PR #425 resolve esse problema provisoriamente enquanto o @filipedeschamps não nos apresenta o novo layout que está planejando
Turma, voltando nessa issue, o layout que entrou em produção resolve a parte do problema de espaçamento na direita, mas não resolve todos os problemas, pois vai depender da relação entre a profundidade da discussão e a largura do device que está sendo usado para ler essas respostas. Dado a isso, poderíamos pensar no seguinte:
- Um recurso em que seja possível comprimir/esconder/fechar parte da árvore de respostas: isso serviria quando a pessoa não se interessa pelo desenvolvimento de uma discussão, mas quer acompanhar outras árvores de discussão que estão abaixo.
- Usar esse exato mesmo recurso para quando o device tiver uma dimensão X, esconder automaticamente a árvore de respostas a partir do nível Y, e se nessas condições a pessoa clicar para expandir as respostas, ao invés de expandir/abrir, redirecionar o usuário para uma página nova com o restante das respostas, como o @yoelgama comentou na Opção 2.
Só temos que tomar cuidado para não abusar e esconder facilmente conteúdos de valor concreto, como antecipado pelo @tembra 🤝
Acho que a resposta está aqui no github!
Como a proposta inicial era manter o mesmo peso dos comentários ao conteúdo principal. O Github faz isso muito bem, todos os comentários estão na mesma linha se você responde alguém tem a opção de colocar a parte do conteúdo.
Se fizermos de forma automática, quando alguém "Responder" um conteúdo colocamos esse prefixo no inicio do comentário com o "link" ao comentário que está sendo respondido.
Em contra partida todos os comentários seguem na mesma estrutura, apenas alterando a ordem conforme é hoje.
Exemplo como ficaria:
@filipedeschamps essa sugestão do @rodrigoKulb é válida? Parece que ela resolve o problema da árvore de respostas no Mobile.
Nesta sugestão, todas as respostas daquele comentário do akachan ficariam todas logo abaixo, correto? Como ficaria o layout com a resposta de uma resposta?
Ficaria assim como no Github. Todas alinhadas com esse design de balãozinho. E o header da resposta seria:
Em resposta à
@fulano
Nesse caso não teria árvore.
Show, mas não sei se compreendi muito bem, pois não entendi como que daria para saber exatamente contra qual resposta original eu estou lendo a resposta, ainda mais considerando que a posição da resposta pode variar conforme o seu ranking e um mesmo usuário pode comentar várias vezes e contra respostas diferentes.
Pegando como exemplo essa publicação aqui:
https://www.tabnews.com.br/wesleyara/configurando-o-ambiente-javascript-no-linux
Se alguém conseguir fazer uma simulação de como ficaria seria show 🤝
Em resposta á @gpaiva00
Talvez isso fique fora da style guide do prime, mas a forma que o whatsapp referencia mensagem funciona bem:
colocar um pequeno preview e um link para a mensagem referenciada, deixaria de ser necessário ficar abrindo para direita a cada novo comentário
Pessoal, tive uma ideia para a questão da legibilidade por conta da #1300, vendo que o próprio @aprendendofelipe postou agora a pouco no Tabnews sobre.
Que tal a gente usar o botão de expandir as respostas como um link para a thread, pensando como é mais ou menos no Reddit e no Twitter (se eu não me engano)?
Assim:
Clicou:
Dessa forma, fica legível pra ver quem respondeu quem e a para quem foi essa resposta.
Na minha opinião, não acho que precise mudar o texto de "Ver mais x respostas" para algo do tipo como "Continuar essa thread". Porque de toda forma, você vai ver as tantas respostas ao clicar no botão.
Só para entender melhor sua sugestão @Poveii, o que ela é diferente da minha é que qualquer botão "ver mais" já vai direcionar para outra página independentemente do nível da resposta?
O "ver mais" como está hoje mostra mais respostas que podem ser de threads diferentes. Pois ele agrupa vários "ver mais" que apareceriam em sequência.
Não é melhor só sugerir para o usuário abrir em uma nova página apenas para ele saber que existe a possibilidade?
E essa sugestão só apareceria caso fosse necessário, então iria aparecer só em níveis de respostas mais profundos e de acordo com a largura da tela.
Ahh, entendi. Concordo!
E no caso, isso só resolve em parte o problema da legibilidade no mobile né? Porque eu pensei que como nesse exemplo abaixo (link do comentário para entender), implementando esse link para o botão de ver mais poderia facilitar a legibilidade para entender que o usuário @Edson295 realmente respondeu o @renanmorais (se esse for o caso).
Complementando: O botão substituiria o comentário do Edson por "ver mais 1 resposta" e ao clicar, ver que realmente ele respondeu o Renan. Quem sabe, pensando melhor pela questão da UX, poderia ser um modal/popup/janela para mostrar o comentário e sua resposta, mas como estamos falando de mobile, isso fica realmente difícil.
Enfim, eu tirei o meu medo de estar só há uns 8 meses estudando frontend, tendo aquela ideia na cabeça de que eu não sei de nada ainda e que deveria só fica de olho por cima, pra ver se eu me encaixo na conversa ou ajudo alguém. Então, obrigado Felipe por responder! 😎️
entender que o usuário
@Edson295realmente respondeu o@renanmorais(se esse for o caso).
Se for voltar com o achatamento, é necessário criar alguma outra forma visual de identificar para quem é a resposta. Seja alguma das alternativas já discutidas aqui, ou alguma ideia nova.
Já o "ver mais", a princípio está só para diminuir a quantidade de comentários renderizados, e não tem relação com a profundidade da árvore, mas isso pode ser alterado. Por enquanto podem estar ocultos comentários até no primeiro nível, caso a publicação tenha muitas respostas (agora o limite está em 108 respostas em uma tela full hd).
ver se eu me encaixo na conversa ou ajudo alguém
Seja muito bem vindo! 🤗💪
Eu achei um exemplo bom de como lidam com essa situação no hacker.news.
Basicamente eles possuem um limite máximo de indentação (comentários de comentários de comentários de comentários...) que pode aparecer na página principal da postagem.
Esse limite parece ser 20. Se vocês abrirem este post sobre o snowden e pesquisarem por "And?" vão cair num post com indentação de 20.
Reparem que ele recebeu ainda mais 13 respostas, mas você só consegue ver indo pra página dessa resposta: https://news.ycombinator.com/item?id=6144296
E lá dentro, acredito que o mesmo limite de 20 indentações seja reforçado.
Alguns ressalves sobre adaptar essa ideia pro Tabnews:
- Devido à maturidade do site, talvez o melhor seja manter um limite menor de identações, com 5, 8 ou 10.
- A maioria das respostas não chega nesse nível. O ideal, para uma resposta de qualidade, é que ela tenha muitas respostas de mesmo nível.
- Quando as conversas ficam tão aninhadas, costuma ser um sinal de comentários de má qualidade. O próprio exemplo que usei acima só chegou num nível tão grande porque era uma discussão bem pessoal entre alguns users.
Eu acho que uma combinação de limite de nesting (indentação) com direcionamento pra uma segunda página pra quem quiser seguir a discussão é uma boa ideia, mas mais importante é deixar claro para os usuários que os comentários devem ser pensados e produtivos, possuindo o mesmo nível de importância da própria postagem.
O que eu vejo muito hoje é a galera fazendo comentários pra agradecer ("Valeu pela força!" ou "Ótimo ponto") quando a mesma ideia poderia ter sido transmitida dando um tabcoin.
Deixo aqui uma frase do Paul Graham, um dos devs do hacker news, que pode auxiliar na forma que pensamos soluções pro site:
The good things in a community site come from people more than technology; it's mainly in the prevention of bad things that technology comes into play. Technology certainly can enhance discussion. Nested comments do, for example. But I'd rather use a site with primitive features and smart, nice users than a more advanced one whose users were idiots or trolls.
ps. por curiosidade, eis aquele post com identação 20 numa tela de celular
porque não utilizar o padrão do github?
Tudo na mesma linha com a opção de responder, conforme abaixo.
porque não utilizar o padrão do github?
O padrão do github gera alguns problemas, como mencionado pelo @filipedeschamps:
Show, mas não sei se compreendi muito bem, pois não entendi como que daria para saber exatamente contra qual resposta original eu estou lendo a resposta, ainda mais considerando que a posição da resposta pode variar conforme o seu ranking e um mesmo usuário pode comentar várias vezes e contra respostas diferentes.
um mesmo usuário pode ter feito diversos comentários no mesmo post, e a ordem dos comentários no tabnews não é fixa (como é aqui no github), então não temos como nos apoiar na ordem dos comentários pra que a pessoa consiga entender o contexto.
Eu entendo a ideia de que o github serve também como um "fórum" pra discussão, mas acho que a usabilidade não é otimizada pra isso.
Por exemplo pra te responder agora (esse comentário é em resposta ao @rodrigoKulb) eu tenho que escrever esse ps. explicando.
Sendo assim voto no limite também para não sair muito do objetivo e virar uma discussão paralela!
Desta forma resolvemos o problema de quebra no layout e mantemos a usabilidade de indentação.
