search

ejplatform / ej-server

EJ uses gamification and machine learning to promote discussions and participation in a virtual democracy
https://ejplatform.github.io/ej-server/
Other
38 stars 17 forks source link

Aprimoramentos da tela interna da conversa #521

Closed ricardopoppi closed 5 years ago

ricardopoppi commented 5 years ago

Essa nova tela interna de conversa ganhou alguns aprimoramentos:

Nova tela: Antes de clicar no botão "criar comentário": https://projects.invisionapp.com/d/main#/console/14872865/327179066/preview Após clicar no botão "criar comentário": https://projects.invisionapp.com/d/main#/console/14872865/324346893/preview

Detalhe da barra de progresso: https://projects.invisionapp.com/d/main#/console/14872865/324346895/preview

luizapeixe commented 5 years ago

Algumas dúvidas:

  1. os indicadores de Tag, Comentários e Votos continuarão aparecendo no balão da Conversa?
  2. haverá o link de "Grupos de opinião" abaixo do link de "Criar comentário"?
  3. agora que chamamos a antiga Opinião de Comentário, sugiro alterar o texto para "Inclua algo novo, evite comentários semelhantes. Você pode postar até 3 comentários"

Sobre a animação do card, quando vi essa nova solução (que adorei, alias!) quase que automaticamente pensei nessa animação de transição: https://davidwalsh.name/demo/css-flip.php Por default ficaria exibido o card com Comentários pra votar, e no clicando no "Criar Comentários" o card dá esse flip dando lugar ao form de Novo Comentário. Acham fazível do ponto de vista técnico? Mais infos potencialmente úteis aqui: https://davidwalsh.name/css-flip

ricardopoppi commented 5 years ago

Respostas:

  1. Sim, continuarão aparecendo.
  2. Sim, podemos manter esse link também, mesmo com o form ativo no lugar do balão de comentário
  3. Sim, vc tem permissão pra fazer a alteração do texto versionando o mesmo wireframe?
  4. Sobre a proposta do flip. Achamos ótima! A única coisa é que talvez o indicador atual "/\" que precede o texto "CRIAR COMENTARIO" (wireframe) não se aplique mais e precisaremos pensar em outra solução. Será que seria um botão, a exemplo de outros componentes que já temos no EJ?
luizapeixe commented 5 years ago
  1. ok!
  2. ok!
  3. ok! não consigo versionar, mas posso subir uma nova tela alterada no invision e colo o link aqui
  4. certo... vou pensar numa solução pra esse botão e publico aqui em breve!
ricardopoppi commented 5 years ago

@luizapeixe sobre o 3 e o 4 peço publicar as novas telas no mesmo protótipo indicando o link aqui, aí eu substituo nas issues. vlw!

luizapeixe commented 5 years ago

telas atualizadas!

Sobre o tooltip (https://projects.invisionapp.com/d/main#/console/14872865/324346895/preview) podemos manter esse mesmo modelo da tela no Dataviz, já que seu estilo foi adotado como final na etapa de padronização dos elementos

O que acham?

luizapeixe commented 5 years ago

@luizapeixe sobre o 3 e o 4 peço publicar as novas telas no mesmo protótipo indicando o link aqui, aí eu substituo nas issues. vlw!

opa! vc diz o Dataviz e Gameficação?

ricardopoppi commented 5 years ago

@luizapeixe isso, no protótipo Dataviz e Gameficação

Ficou legal a solução do "+" Sobre o tooltip, usamos esse mesmo

Ficou faltando então a descrição da interação do flip pra gente orientar o desenvolvimento @luizapeixe

luizapeixe commented 5 years ago

ok! subi as telas de Interna da Conversa para o protótipo Dataviz e Gameficação

• modo votação: https://invis.io/J7OQ978ZUVX • modo criar comentário: https://invis.io/G5OQ99JQVY8

Sobre a animação, minha sugestão é que por default fica exibido o card com Comentários pra Votar, e no clicando no "Criar Comentários" o card dá esse flip horizontal ( https://davidwalsh.name/demo/css-flip.php ) dando lugar ao Form de Novo Comentário. Acham fazível do ponto de vista técnico? Mais infos potencialmente úteis sobre a animação do flip aqui: https://davidwalsh.name/css-flip

Outro detalhe de animação é que quando o botão " + Criar Comentário" é clicado, o ícone de "+" se tranforma em "x", evidenciando a opção de cancelar a criação do comentário. Idealmente, penso numa animação em que o "+" gira 45º e se transforma no "x". O que acham?

ricardopoppi commented 5 years ago

obrigado @luizapeixe!

@Heloisecs pode opinar nessa proposta? são as mesmas telas finais, porém com um ajuste no botão criar comentário que deixa de ser um toggle "/\" e passa a ser um "+" já que a animação não será de toggle e sim de flip: https://davidwalsh.name/demo/css-flip.php - conforme descrição da Luiza no comentário anterior

Heloisecs commented 5 years ago

Então, o problema é que o usuário estaria embaixo, e o "+" não indica que está mudando um elemento que está acima, e isso pode confundir. (já tinha comentado com a Luiza, se não me engano) Penso numa transição mais suave, tipo esse primeiro quadrado "fading" até aparecer https://michalsnik.github.io/aos/ É um pouco dura a animação de flip.

luizapeixe commented 5 years ago

Já havíamos sim conversado sobre trocar o ícone de criar comentário. Quando vi no layout final o ícone de criar com a seta pra cima, me pareceu pouco intuitivo porque antes do clique nada ali me sugere que haverá um movimento de algo para cima, só depois do clique que o ícone ganha sentido.

A sugestão do ícone de "+" não tem a ver com a animação ou o movimento a principio, sua função é evidenciar pro usuário que clicando ali ele criar algo novo, tipo adiciona um novo comentário.

Independente da animação que vamos adotar, penso que o ícone deve idealmente ilustrar a função do botão e não o movimento da transição de cards

Heloisecs commented 5 years ago

É muito incomum ter um botão que abre um novo elemento acima, não é intuitivo. Se for colocar o ícone de "+", sugiro trocar o botão de lugar (embora sua posição seja estratégica) ou ter alguma sinalização extra de que o comentário abre em cima (exemplo, uma seta que apareça e desapareça depois de clicar ou - a animação do o elemento de comentário começa imediatamente acima do botão e sobe até o lugar do comentário.)

luizapeixe commented 5 years ago

é realmente mais usual que as ações de botões aconteçam embaixo deles e não em cima, por isso uma animação drástica pode ser a solução pra situar o user eficientemente. O fato de os cards serem bem distintos (com background de cores diferentes, principalmente) também nos ajuda a evidenciar pro user onde ocorreu a ação do botão.

A animação de fade-up é mesmo mais suave que o flip, e penso que pode ser igualmente eficiente, já que a fade-up partirá meio que de cima do botão de Criar Conversa, podendo encaminhar o olhar do user pra onde queremos. Vale ver como funcionaria essa animação no Clique invés de no Scroll

ricardopoppi commented 5 years ago

@luizapeixe @Heloisecs tentando sintetizar aqui, acho que podemos ficar com o botão "+" por ele refletir bem a função "adicionar" mas com essa ressalva de identificar como vamos trabalhar a animação para que o efeito do botão seja intuitivo ao usuário.

Temos portanto duas opções de animação: 1) Flip: o botão "+" rotaciona para o formato "x", o comentário-pra-votar flipa pra input e o topo da tela do usuário se move pro input aparecer todo 2) Fading: o botão "+" ao ser clicado abre um input no mesmo local que logo em seguida sobe em fading ocupando o espaço do comentário-pra-votar, movendo o topo da tela pro usuario ver o input todo (é isso @Heloisecs? teríamos um exemplo dessa animação funcionando no clique pra gente visualizar?)

Heloisecs commented 5 years ago

@ricardopoppi não sei se você queria uma biblioteca já existente de animação, mas fiz uma animaçãozinha no after effects: animation_3

luizapeixe commented 5 years ago

pessoal, to voltando nessa issue pra gente confirmar uma decisão a respeito dos indicadores de comentários e votos na interna da conversa.

a última tela aprovada está assim por enquanto: captura de tela 2018-11-05 as 08 50 06

semana passada conversamos @Heloisecs , @BrunaNayara e eu e chegamos a conclusão de que realmente não é necessário apresentar esses indicadores na interna uma vez que eles já estão apresentados no card da conversa e a quantidade de comentários está apresentada na barra de progressão. Estou jogando essa pauta aqui pra gente se alinhar e chegar no modelo final do componente para incluir na documentação de elementos e componentes visuais

ricardopoppi commented 5 years ago

@luizapeixe é isso mesmo, a interna não precisa desses indicadores. A retirada deles deixa a ux mais focada na pergunta e nos comentários.

luizapeixe commented 5 years ago

maravilha! então seguem links dos layouts atualizados (versionados no board do Dataviz)

ricardopoppi commented 5 years ago

Vamos precisar fazer um último ajuste nessa interna a partir de feedbacks que estamos recebendo dos primeiros beta testers. Hoje o criador da conversa só tem acesso ao botão de moderar abaixo do thumbnail (ver print abaixo) e o botão editar apenas na tela de moderação. Para o criador, o ideal seria que a interna da conversa exibisse esses dois botões.

@Heloisecs pode propor como esses dois botões apareceriam para o criador na interna? creio que pode seguir o padrão da forma que esses botões já aparecem em outros contextos, para preservar os componentes, o que acha?

captura de tela de 2018-11-06 19-18-54 captura de tela de 2018-11-06 19-19-02

ricardopoppi commented 5 years ago

Conversamos e decidimos que o melhor caminho para essas opções é o menu de "três pontinhos" na tela interna. Para isso @Heloisecs vai fazer uma proposta de como essas opções aparecem em cada tela do EJ