Add community contacts

[henriquecbuss]

What we have We already have an API that allows community to have contacts. We are also working on the new community page, and it will show community contacts if there are any

Proposal We just need to have a way for community admins to actually edit the community contacts

Why To have better communication between community members and the admin team

How

• Adding a screen for community admins to add contacts
• Displaying a contact link on the footer

Additional context N/A

[henriquecbuss]

@juramos-2020 @rafachadud recentemente eu e o @lucca65 estávamos conversando sobre esse form de contatos (falamos no contexto de contatos de usuário, mas acho que o mesmo cabe no caso da comunidade), e achamos que poderia ser mais "dinâmico": ao invés de mostrar vários campos vazios inicialmente, teria um botão de "+" para adicionar um novo tipo de contato, e assim o usuário iria populando. O @lucca65 deixou um comentário sobre isso aqui: https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9?node-id=636:13228#170580665

Um exemplo que eu achei mais ou menos nessa vertente é no 1password, ao cadastrar os diferentes sites onde uma senha pode ser usada:

Cada site tem dois campos: uma label e o site em si. Quando eu termino de preencher os campos, aparece um novo input de site, "website 4", logo abaixo, e assim eu vou populando os sites que quero usar. Para remover um desses campos, só clicar no botão "-" no canto direito

O app de contatos do iOS também tem algo parecido:

Quando eu clico em "add email", aparece um novo campo onde eu posso colocar os dados, e um botão onde eu posso mudar a label do email.

---

E agora também temos um campo label, que, nos exemplos acima, seriam a parte do "website 3" e o "Default" (ou "outlook") respectivamente. Ou seja, o usuário pode dar um nome que ele quiser pro contato. Acho que podemos fazer um campo mais discreto, mais ou menos seguindo esses exemplos mesmo, pra não ocupar tanto espaço.

Outra coisa que pode ser importante é que é possível (sempre foi, só não deixamos no app) ter vários contatos do mesmo tipo (por exemplo, dois números de WhatsApp). Podemos continuar sem deixar ter contatos "repetidos" ou não, só queria deixar explícito que temos essa opção

[rafachadud]

@NeoVier @juramos-2020 @lucca65

Eu fiz essa primeira opção de como os contatos podem ser, eu me inspirei mais na interface do Facebook, porque eu gosto da solução deles e acho que é um produto que os users estão um pouco mais familiarizados.

Eu ainda acho que dar apenas uma opcao de cada contato seria melhor, porque nao teremos labels no perfil apenas os ícones, e pode ser um pouco confuso ter vários links de whatsapp, por exemplo.

Mas o que vocês acham?

Link pro figma: https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9/Acessibilidade?node-id=953%3A20097

[lucca65]

@rafachadud honestamente, não gostei muito, pq apesar de simplificar um pouco, mantem a mesma essência: todos os campos estão sempre lá.

1. Conforme adicionarmos mais tipos de contato, esse form ficará gigante (como Facebook, Signal, Endereços de carteiras de blockchain, etc)
2. Não aproveitamos as labels, que podem ser úteis. Por exemplo, eu tenho um número de telefone do brasil e um da Costa Rica, nesse modelo não consigo especificar isso.
3. Dessa maneira, não é flexível suficiente

Entendo a justificativa do ícones, mas pode ser resolvido pelo hover/modal que já existe.

Não quero me delongar muito mas vou dar o meu exemplo de uso:

• Tenho 2 números de telefone para ligação: um deles é do Brasil e outro da Costa Rica, seria legal poder especificar pra além do DDD. No seu modelo não fica claro se vamos mostrar bandeiras, mas com a label posso colocar um emoji facilmente.
• Tenho só um zap, um Telegram e 1 Instagram.
• Tenho dois 3 sites pra colocar ali: meu perfil no GitHub, meu blog e o site da cambiatus

Esse é meu caso de uso, seria legal ser fácil eu poder escolher como usar isso e deixar flexível.

Tenho um amigo que tem 2 marcas no Instagram: uma dos desenhos dele e outra dos serviços de freela de design. Nesse apresentado não seria possível diferenciar ou mostrar os dois, ele teria que usar a bio pra isso.

Sinto que podemos ser muito mais flexíveis e manter um modelo simples: um form com 3 campos: tipo (select), label (text), valor (text). Colocando quantos quisermos, podendo ser mostrado diretamente no perfil

[lucca65]

Se @juramos-2020 e @NeoVier puderem comentar também, seria legal avançarmos na discussão, mesmo que offline e de maneira assíncrona

[henriquecbuss]

+1 pro que o @lucca65 disse. Acredito que no app da Cambiatus poderíamos ter algumas áreas com design mais clean/simples, e acho que esse form é um ótimo candidato!

Reitero o exemplo de contatos do iOS: é extremamente simples de entender, visualmente agradável, e não ocupa mais espaço do que o necessário. Além disso, é praticamente a mesma coisa que estamos tentando resolver.

Os forms em geral da Cambiatus são bastante grandes e estáticos (por exemplo, o de criação de ação). Acho que poderíamos ter forms mais dinâmicos, pra fazer com que eles sejam um pouco mais simples. Esse form de contatos vai no form do perfil, que já é bastante grande (ele tem 7 inputs, sem contar os de contato), então acho que seria interessante ter algo que não ocupasse mais espaço do que o necessário.

Gostei dos casos de uso da label que o @lucca65 trouxe, e acho que essa é uma feature que pode ser extremamente útil, ainda mais se tivermos a possibilidade de vários contatos pela mesma plataforma. Ao mesmo tempo, entendo a dificuldade de fazer isso caber no mobile.

Uma ideia legal seria ter ícones customizáveis (nós poderíamos ter um set de ícones pré-definidos, ou poderíamos usar emojis, ou algo do tipo) que os usuários poderiam atribuir aos seus contatos. Por exemplo, se um usuário tem uma loja e quer adicionar o contato da loja no app, ele poderia escolher um ícone de loja. Junto com o ícone de loja, poderíamos mostrar um ícone menor, representando a plataforma (WhatsApp, telegram, etc.), algo assim (com o ícone escolhido no círculo maior):

Acredito que é uma forma bem simples de apresentar o contato, e ainda de quebra adiciona mais uma parte customizável do perfil

De certa forma, acredito que o "significado" do contato (contato com a loja) seja mais importante do que o "meio" (WhatsApp), mas pode ser importante mostrar a plataforma a ser usada.

Outro exemplo que poderíamos seguir é o de destaques do instagram (se conseguirmos fazer funcionar com ícones um pouco menores):

[juramos-2020]

Ola pessoal ! desculpa a demora em dar um feedback 🏃‍♂️

+1 para o exemplo de contatos do iOS. Acho interessante como ele deixa a tela mais limpa e permite a customização de forma mais dinâmica.

Sobre a ideia de ter ícones customizáveis vou pesquisar algumas referências para trazer um olhar mais aguçado sobre isso. De primeira impressão meu coração fica dividido, pois acho que visualmente ficaria muito legal (gostei muito do exemplo que o Henrique trouxe do avatar com o símbolo do WhatsApp no canto inferior), mas me preocupo em carregar demais de informação visual e acabar confundindo o usuário. Mas isso só teremos certeza se fizermos um teste de usabilidade. E o fato de termos um set de ícones pré-definidos acho bem legal pois nos daria um certo padrão, o que acho fundamental e auxilia no entendimento e usabilidade do usuário.

Enfim, como falei inicialmente, vou pesquisar algumas referencias de "ícones customizáveis"

Dúvida: se formos usar os ícones customizáveis para criar um contato, o usuário teria um form com 4 campos ? ex: tipo (select), label (text), valor (text) ícone (select)

[henriquecbuss]

Sim @juramos-2020 , se formos pelo caminho de ícones customizáveis, precisaríamos de uma maneira de definir eles. E com isso, acabamos carregando um pouco mais o form de contatos... temos que ter uma maneira que esse input não ocupe tanto espaço para o form continuar simples

[rafachadud]

Eu particularmente nao gosto da opcao de ícones customizáveis, porque joga a usabilidade pra escanteio. hehe

Eu votaria em deixar os ícones padroes para dispositivos de comunicacao, com a possibilidade do user editar o label para aquele modo de comunicacao. Assim o user pode adicionar "Whatsapp Pessoal", "Whats da Loja", resolvendo o problema de adicionar apenas uma opcao de contato para cada.

Até porque esses contatos abrem links para 3rd part tools, e é importante deixar claro qual o comportamento que aquele botao terá quando o usuário clicar nele. Precisamos deixar essa parte padronizada para que a experiência no app fique interessante.

Quanto à parte de contato, algo assim seria o ideal?

Eu adicionei o dropdown para pre-selected labels, tinha pensado que o usuário poderia também escrever nesse campo da label, mas como mapear os ícones de contato com esse campo customizável? Talvez o botao "Add contact" pode ser um selector por si só, com as opcoes insta, whats, phone, telegram...; e o label customizável para cada opcao?

E outra consideracao que estou fazendo, é "quebrar" o edit em 3 áreas (1 - imagens de perfil e capa; 2 - Informacoes pessoais; 3 - Informacoes de contato ), assim o form nao fica tao longo no mobile. E os items mais categorizáveis e fáceis de editar (estava incomodada com o campo da foto de capa, que coloquei no final do form, mas nao curti muito a localizacao do mesmo, ficou meio perdida).

Enfim, o que acham @NeoVier, @lucca65 , @juramos-2020 ?

[henriquecbuss]

Quanto à parte de contato, algo assim seria o ideal?

Acho que é por aí mesmo, @rafachadud!

Talvez o botao "Add contact" pode ser um selector por si só, com as opcoes insta, whats, phone, telegram...; e o label customizável para cada opcao?

+1!

O form realmente é grande, mas não tenho certeza sobre essa parte de quebrar ele... No mínimo, acho que as informações pessoais e de contatos devem ficar juntas. Uma ideia para a edição da imagem de capa é mostrar ela do mesmo jeito que ela é mostrada no perfil público (no topo, ocupando a largura da tela inteira), mas com um botão para alterá-la (o Facebook tem algo similar)

[juramos-2020]

Eu votaria em deixar os ícones padroes para dispositivos de comunicacao, com a possibilidade do user editar o label para aquele modo de comunicacao. Assim o user pode adicionar "Whatsapp Pessoal", "Whats da Loja", resolvendo o problema de adicionar apenas uma opcao de contato para cada.

+1 Rafa

[lucca65]

Eu votaria em deixar os ícones padroes para dispositivos de comunicacao, com a possibilidade do user editar o label para aquele modo de comunicacao. Assim o user pode adicionar "Whatsapp Pessoal", "Whats da Loja", resolvendo o problema de adicionar apenas uma opcao de contato para cada.

Seria legal ter coisas mais complexas, mas +1, acho que é melhor manter os ícones regulares pra simplificar

Até porque esses contatos abrem links para 3rd part tools, e é importante deixar claro qual o comportamento que aquele botao terá quando o usuário clicar nele. Precisamos deixar essa parte padronizada para que a experiência no app fique interessante.

Como temos o tipo de antemão, podemos colocar um daqueles avisos "você está sendo redirecionado para fora da cambiatus, continuar?"

Quanto à parte de contato, algo assim seria o ideal?

Gosto assim, não sei se entendi direito o print mas deixaria só um card com várias linhas, ao invés de um card por contato. Dá pra ir colocando quanto quiserem, com dois inputs da label pre-preenchido e outro com o valor. Talvez o input de label seja menor com um ícone de lápis talvez. Seja como for, tá bem melhor!! 🎉

E outra consideracao que estou fazendo, é "quebrar" o edit em 3 áreas (1 - imagens de perfil e capa; 2 - Informacoes pessoais; 3 - Informacoes de contato ), assim o form nao fica tao longo no mobile. E os items mais categorizáveis e fáceis de editar (estava incomodada com o campo da foto de capa, que coloquei no final do form, mas nao curti muito a localizacao do mesmo, ficou meio perdida).

Gosto disso! não precisamos de um Form Grand, tá td bem editar as partes

[rafachadud]

Olá de novo @NeoVier @lucca65!

Eu atualizei a proposta no Figma https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9/Acessibilidade?node-id=1033%3A26385, com o fluxo de com funcionaria, acho que agora está mais perto de uma versao final. :D

Acho que podemos discutir se precisamos de um botao "+" depois do tipo de contato selecionado, para o user adicionar vários daquele mesmo. Mas o que acham?

Em relacao ao novo profile, na reuniao de design discutimos sobre como deixar o perfil privado mais próximo do perfil público, e eu propus criar uma página separada para as configuracoes, e deixar o profile com o layout e info do perfil publico. https://www.figma.com/file/l2HhpioJFpVSUW6E5ZjBn9/Acessibilidade?node-id=1051%3A22102 O que cham?

Adicionei aqui porque comecamos a discutir o profile nessa issue, mas temos uma issue pro profile?

[henriquecbuss]

@rafachadud temos essa issue pra falar sobre o perfil: https://github.com/cambiatus/frontend/issues/660

Em relação à proposta do novo form de contatos, o campo de label me parece pequeno... Até labels curtas vão ter um scroll horizontal (que é bem chato quando acontece com um texto).

[juramos-2020]

Ola @NeoVier @lucca65

Aqui está o Footer atualizado com a opção de contato para suporte

Essa é a atualização da área de configurações. Antes o usuário tinha que entrar em configurações, clicar em “recursos” para habilitar uma opção e voltar na página de configuração para poder editá-lo. Agora, ao entrar na página de configurações, ele já encontra todos os recursos visíveis.

E aqui está a opção para adicionar o contato para suporte na área administrativa. Acho que ainda terá essa pequena alteração no campo de label, mas pode ser replicado facilmente para esse área administrativa 😉

Aguardo o feedback de vcs 😉✌

[henriquecbuss]

Essa é a atualização da área de configurações.

Nossa, bem melhor @juramos-2020 🔥. Pra não desviar muito da issue (já temos bastante discussão aqui), criei outra issue pra visitarmos as outras páginas de configurações (a de contatos de suporte vamos fazer nessa issue aqui mesmo): #726

Sobre os designs, deixei apenas um comentário no figma: https://www.figma.com/file/RSoh4DDEj0N1TVkQT0SxIn?node-id=1324:2466#182595163

[juramos-2020]

Show de bola 😉