Um leitor perguntou se já consultei designers especializados em UI/UX para balizar o desenvolvimento do leiaute do Manual. Achei um ótimo questionamento! A verdade é que, não, nunca consultei ou ouvi ninguém da área a esse respeito.
Daí que me ocorreu de abrir esta conversa no Órbita. De repente gente da área se anima em dar uma rápida consultoria aqui, no mínimo dizer se está muito ruim e/ou existe algo grave que precisa ser consertado.
Designers, algo a dizer?
45 comentários
Eu acho o visual ótimo. Foi aliás a primeira coisa q me atraiu. E, claro, logo em seguida o texto. Eu simplesmente não resisto a um bom texto.
Acho ótimo do jeito que está
Não está ruim nem feio, parece em reforma.
Não sou expert mas trabalhei com interface e penso que é preciso uma decisão editorial, o órbita é irmão ou filho do manual do usuário?
Algum tempo atrás parecia irmão e agora parece filho. Caso seja irmão acho que precisa de identidade própria, nem que seja a cor de fundo.
Se for filho, a seção de notícia é que precisa de identidade, um nome dentro da família manual do usuário, sacou?
Uma mudança recente são as notícias inteiras na “capa”, antes era um texto introdutório. Não acho que ficou bom, a rolagem fica longa e os comentários perderam destaque.
Essa estratégia do texto introdutório poderia ser aplicada ao órbita, tornando obrigatório o campo de comentário para novas postagens. Assim a seção de notícias e o órbita ganhariam coerência visual, some a isso a mudança na cor de fundo e acho que vai ficar bem legal.
Pode fazer um pix para 666tapanoreia@email.com por conta da consultoria.
Olá, Rodrigo. Boa noite
Olhei todo o site e pontuei algumas coisas, tentando não repetir o que outros colegas já falaram aqui, Mesmo assim, talvez, e tenha me prolongado demais no meu texto. Então lá vai!
Pontos a melhorar
– Aproveitar os espaços em branco colocando mais conteúdos, mas notícias e artigos. Por exemplo, adicionar na página inicial as conversas mais
votadas na Órbita.
– Retirar todas as informações ocultas no ícone “Perfil” e criar cabeçalho.
– Utilizar no máximo 3 fontes diferentes. (de preferência duas) e utilizar os diferentes pesos que elas tem para dar destaque a algo quando necessário.
– Colocar o campo de busca na parte superior do site
(no header) e não no final da página (footer).
– Quando o usuário clicar no botão “Órbita”, além de aparecer o que já aparece de informações, adicionar a essa página, o “Guia de uso do Ótbita”. Para deixar as informações pertinente a esse tópico todas juntas.
– Criar “Migalhas de pão” que é o sistema de navegação por categorias existente dentro de um site. O que facilita a navegação do usuário e indica o caminho que percorre dentro de sua estrutura. E deixar a mostra
para o usuário em qual página ele se encontra e deixando visível que ele
pode está voltando para um caminho anterior sem problemas.
– Alterar o ícone referente a “Votos”. Eu só fui entender o que era
clicando na conversa. Quem sabe, colocar um ícone que remente ao
voto em si. ou ao lado do balão de comentários (antes de clicar no link para a conversa), colocar a quanitadade de votos e ao lado a palavra (votos)
– Ao entrar na página “PC do Manual”, ter uma opção a além de clicar na seta do navegador para sair dessa página. Algo que ajudaria nisso é o anteiormente citado “MIgalha de pão” ou colocar a logo do site clicável e com o caminho para a home.
– Transformar em botões: “Voltar ao menu, “Voltar ao índice de links”,
“Continue lendo”. Para facilitar a visualização dos usuário
– Reduzir o tamanho de alguns títulos de artigos.
Colocar um título impactante, atrativo de no máximo
2 linhas. e um subtítulo de até 3 linhas.
Por hora é isso. Precisando de mais ajuda na montagem do site ou em qualquer questão referente a isto, pode entrar em contato comigo :)
Não sou designer, mas trabalho com gestão de produtos e equipes de designers (incríveis, por sinal).
Entendo que um dos elementos mais importantes de um bom UI design é a arquitetura e hierarquia da informação, que ajuda a pessoa a entender melhor onde se encontra, o que pode fazer e para onde ir.
Minha maior confusão no Manual, como já comentado por alguns colegas antes, é a disposição dos elementos na página inicial, que não me indicam claramente onde estou, quais conteúdos são possíveis de acessar (e quais seus tipos), além de caminhos para os quais posso seguir.
Também sinto uma certa confusão em relação ao que é “página de posts do Manual” e o que “página do Órbita”, mas talvez seja uma limitação minha :P
Apesar de gostar do estilo minimalista adotado no Manual, sinto, também, que há muito espaço para criar uma identidade mais específica, dar cara de um movimento “slow web”, conseguir conectar facilmente com as pessoas que já usam e, numa lógica meio marketeira da coisa, facilitar a compreensão de quem ainda está chegando.
Isso tudo, querendo ou não, passa por uma boa hierarquia de informação, uma criação específica de componentes visuais (botões, formas, algumas cores etc) e por aí vai. Se bem pensado, isso potencializa demais a voz do Ghedin, que é um dos traços mais interessantes de todo o Manual.
Já fui designer gráfico por um bom período da minha vida. Hoje não trabalho mais na área, apesar de ainda ler e estudar sobre.
O leiaute do MdU é muito agradável e não vejo nada de negativo na disposição e apresentação dos elementos. Se for comentar uma única coisa, mas que é apenas questão de gosto, seria sobre os títulos dos posts, essa fonte serifada me passa uma mensagem de coisa antiga. Mas não prejudica em nada, é só gosto mesmo.
Mas algo que para mim é (visualmente) grave, é a marca do MdU no canto superior esquerdo. A disposição dos elementos está em total desarmonia. Não há “respeito” ao grid. Faz remeter a algo caótico e desorganizado, bem diferente da realidade do manual. Acho que ele poderia melhorar. Infelizmente estou sem computador e não consigo apresentar uma alternativa. Mas minhas sugestões seriam o símbolo isolado à esquerda, o nome do site totalmente minusculo (vai trazer a impressão de algo mais moderno), com a fonte sem serifa (aqui é questão de gosto), e a padronização no tamanho da fonte. As distâncias entre cada elemento determinadas por uma grade imaginária. Ficaria bem mais agradáveis.
Primeiro comentário aqui. Como profissional de UX, me senti a vontade para tentar colaborar.
Eu gosto bastante do visual clean, a parte interna, órbita e comentários acho ótimo, mas a página principal me incomoda. Sinto que falta uma hierarquização ou mais ‘marcadores’ visuais que ajudem a organizar a linha do tempo.
Por exemplo, no dia 11/01/2024 temos:
16h39 um texto simples de 5 linhas e pronto, onde o timestamp vira o clique pra ir pra discussão.
12h57 um blogpost completo.
e no dia 10/01/2024
14h01 um blogpost com link ‘continue lendo’.
Entendo que são 3 tipos de conteúdo diferentes, mas o fato de alguns terem título, outros não, outros têm o ‘continue lendo’, uns não, enfim, me causa estranheza por inconsistência.
Como sugestão eu criaria um padrão de sempre ter
Titulo + introdução de até 10 linhas + continue lendo. Daí, se houver necessidade de diferenciação do conteúdo, poderia usar tags (bem simples)
E tem uma outra coisinha, acho que todo link externo, por padrão, deveria apontar pra uma aba nova, não sei se há uma razão para o padrão não ser esse.
Estreou muito bem!
Essa falta de hierarquização na capa é uma boa sacada. Os posts sem links são notinhas (“asides”), quase como se fossem tweets, mas aqui no site. Daí, por essa lógica, achei que fazia sentido não ter títulos (embora eles existam; só estão ocultos).
Usar etiquetas visuais para distinguir alguns conteúdos, como posts patrocinados e aplicativo do dia, é algo que está nos planos. Não sei se como substituto dos formatos atualmente em uso. Penso nisso mais como um complemento.
Sobre os links que abrem na mesma aba, ver resposta ao Pedro Souza.
As “notinhas” talvez poderiam ter uma caixa em volta delas, parecendo um tweet mesmo. Só uma ideia.
Hmmm, sabe que é boa ideia? Vou fazer uns experimentos aqui.
Depois de ler tudo – muita informação a ser levada em conta! – fico pensando se o uso de categorias e tags não ajudariam…
O leiaute tinha categorias e etiquetas. Ainda tem, só que ficam ocultas. Tirei-as quando notei que ninguém clicava/acessava elas dentro do site. Só estavam ocupando espaço 🥲
Uma coisa que me incomoda um pouquinho e que eu acho que é simples de resolver (com base no achômetro mesmo) é a possibilidade de abrir links automaticamente numa nova guia. Existe algum motivo para ser assim? E o incômodo é só meu?
Existe, Pedro. Do jeito que está, quem gosta de abrir links na mesma aba pode fazê-lo, quem gosta de abrir links em novas abas, também (segurar o dedo sobre o link ou botão do meio do mouse).
Se os links fossem escritos para abrirem em novas abas, quem gosta de abrir links na mesma aba não conseguiria.
Faz sentido, Ghedin. :)
Opinião de uma pessoa que não tem especialização nesta área, mas que dá muito valor a essas questões.
Neste espaço, sinto falta de um botão para ligar/desligar o modo escuro do site.
Ainda sobre o modo escuro, talvez uma atualização (ou adição) no modo escuro. Tenho sentido a diferença de leitura em sites que adotam o modo escuro com cores de fundo que não sejam preto total. Aqui um exemplo do que estou falando: https://www.nordtheme.com/.
Oi Ulisses! O visual do site segue o padrão do sistema operacional — se está com o modo escuro ativado, mostra o modo escuro.
Salve Rodrigo!
Sim, já tinha notado antes. Mas estava mencionando, por exemplo, existir a opção de desligar o modo escuro do site, mesmo com SO configurado dessa forma.
Particularmente, acho o Manual mais bonito com o tema branco, mas pra lê-lo dessa forma, tenho que alterar a configuração do SO (o que a propósito, faço às vezes).
É, mais gente já pediu por esse botão. Só tem dois problemas: 1) acho que acrescentaria complexidade ao site, tanto no front-end quanto nos bastidores; e 2) não sei fazer isso 😄
Ai complica 😅
Tem sites que colocam o botão mas continuam tendo a opção do sistema. Mas dou mais valor ao método automático, como aqui.
Se essa questão te aborrece, eu sugiro fortemente o Dark Reader (https://darkreader.org).
Ele tem modo manual, automático, detecta se o site tem modo escuro e não atua nesse caso e tem como criar presets por site.
Já tentei algumas dessas extensões, mas eu faço um monte de ajuste no navegador pra suavizar fontes e quando eu uso esses caras que mudam o modo de leitura, acabam quebrando o site.
De qualquer forma, obrigado pela dica.
opa, pode compartilhar o que você faz para suavizar as fontes? Vi algo sobre isso em outro post no órbita, e não tinha notado isso. Queria ver se faz realmente difereça.
Primeiro você ajusta o ClearType num nível que te agrade, depois pode mudar a configuração do Windows usando o BetterClearTypeTuner (https://github.com/bp2008/BetterClearTypeTuner). Note que algumas builds (versões) do Windows podem não surtir efeito.
Eu vi resultados melhores com o MacType (https://www.mactype.net/), mas como eu havia mencionado num post anterior, não consegui rastrear quais alterações ele faz no sistema (fiz o teste em uma VM). Então abri mão dele.
Em relação aos navegadores, você pode usar extensões ou fazer ajustes.
Chrome (extensão):
https://chromewebstore.google.com/detail/font-rendering-enhancer/hmbmmdjlcdediglgfcdkhinjdelkiock?pli=1
Firefox (ajuste):
Altere o parâmetro gfx.font_rendering.cleartype_params.rendering_mode de -1 para 5 no about:config
Eu me especializei muito em user interface, e hoje não só pratico como também mentoro e dou aulas, e depois de um tempo na área, você vai entendendo que o “feio” é tudo aquilo que não funciona da maneira que deveria. Sites que não são responsivos são feios. Sites que possuem navegação confusa são feios. Agora, sobre visual, é mais complicado, porque é opinião individual de cada um. O belo é relativo.
Eu não acho que o Manual precisa de uma repaginada, pelo simples fato de que funciona dessa forma. É um site altamente clean, direto, sem enrolações ou distorções, e isso é ótimo, porque o objetivo é compartilhar informação. Eu imagino que as pessoas estão acostumadas com o Manual dessa forma, e mudar a interface incluindo carrosséis, cards de notícias, headers e footers… só ia distanciar do público que já é fiel aqui.
Agora, o que eu não testei ainda, mas que me instigou a testar, e podemos falar sobre consultoria mais tarde se quiser, é a acessibilidade. A palavra “interface” parece só falar de algo visual, mas diz muito mais sobre comunicação. Então a pergunta que fica é: pessoas cegas ou com baixa visão conseguem utilizar o site tão bem quanto pessoas que enxergam?
ps: meu site pessoal não é muito diferente da interface do Manual.
Acessibilidade é algo que me preocupa/interessa um bocado, Mateus. Não fiz testes reais, com pessoas, mas o leiaute do Manual segue todas as melhores práticas de acessibilidade, dos textos alternativos às taxas de contraste mínimas. (Se achar algo fora do lugar nesse sentido, me avise, por favor.)
Bem legal seu site!
Não sou designer, mas não seria o caso de utilizar algo pra fazer o layout mais dinâmico?
Em computadores, fica MUITO espaço vazio. Em ultrawide então nem se fala. Se quiser, mando como fica aqui…
Você usa janela maximizada em ultrawide? 🤔
Geralmente quando to a lazer, utilizo uma janela só. Mas mesmo deixando em meia tela aqui, acredito que mais da metade da janela no manual fica com espaço vazio.
Divido em mtas janelas quando to trabalhando.
Acho que está tudo bem ficar um espaço grande. A legibilidade fica prejudicada quando a linha ultrapassa ~80 caracteres, logo, melhor ter espaço vazio do lado do que estender a coluna a tamanhos incômodos (ou colocar uma barra lateral apenas porque sim).
Mas esse lance dos 80 caracteres não é um anacronismo de sistemas antigos, que por costume se mantém até os dias de hoje?
Não é. Linhas longas, com muitos caracteres, “confundem” o cérebro. Limitar a linha a 70–90 caracteres é básico de boa legibilidade.
Não sei indicar fácil um site que ignore essa regra, mas se tiver a possibilidade, faça um teste aí.
Ah, por que sumiu a opção de editar o comentário? 🙄
O plugin quebrou. Não esperava que continuasse funcionando depois que ativei a CDN da Cloudflare, mas pelo menos para leitores logados achava que funcionaria.
Ainda não tive tempo de investigar a fundo o que rolou. O plugin em questão é o Comment Edit Core.
Não sou “Arquiteto de Usabilidade” (como um amigo meu se refere), sou Dev, mas por necessidade faço frontend. Uma parada que sinto falta, mas nunca abordei aqui pois não achava que valia um post é o Manual/Órbita não serem PWA. Adoraria ter eles em Webapp.
Já pensei nisso. Não fui adiante porque… sei lá, não considero o Manual um “web app”. É só um site com muito texto, daí que acho que faz mais sentido ele estar nos favoritos do que como um ícone na tela do celular/computador.
Faz sentido?
Faz todo sentido sim!
É um gosto pessoal meu mesmo e que no caso não afetaria em nada estar no Favoritos ou na tela inicial.
Mas entendo e inclusive isso não atrapalha em nada o uso, como disse, é gosto
Acho que o Órbita poderia ser um PWA. O MdU não faz mesmo sentido.
Eu n sou UI/UX, mas tenho uma dúvida: qual o motivo da caixa de pesquisa estar no final da página?
Falta de espaço no topo somada a falta de habilidade do programador (eu) em criar uma lupa ou coisa do tipo que expanda quando clicada 🥲
Posso ajudar nisso. Acho que CSS puro já dá para fazer.
Isso muito me interessa! Se quiser/puder, submeta um PR no repositório do tema, por favor.
Vou tentar fazer aqui na unha r ver se rola. Senão dou uma procurada e reporto lá.
Veja se o princípio é esse: https://looizinho.github.io/mdu-search/
Tá muito simples, ok? Só pra ver se o caminho é esse…
Se for submeto lá.
Acho que é por aí! Precisa encolher ao perder o foco (isso é bem chatinho em telas sensíveis a toques), mas o caminho é esse.