xnths.

Colofão

Este site aplica achados de pesquisas sobre primeiras impressões, credibilidade e como o trabalho técnico é avaliado. Cada decisão de design abaixo cita a sua fonte.

As convenções de layout também seguem os exemplos reunidos no repositório developer-portfolios, de Emma Bostian. github.com/emmabostian/developer-portfolios

FonteAchadoDecisão neste site
[1]Julgamentos de apelo visual formados em 50 ms concordam com os feitos após uma observação bem mais longa.A primeira tela traz apenas o nome, uma linha de posicionamento e os números centrais do USP Aberta. Nenhum carrossel ou animação é necessário para entender a página.
[2]Sites com baixa complexidade visual e alta prototipicidade foram os mais bem avaliados, com efeitos visíveis a partir de 17 ms.Um esqueleto convencional de portfólio (navegação superior, nome, trabalho em destaque, índice, contato), uma única coluna de leitura e bastante espaço em branco. Sem truques de terminal, desktop ou 3D.
[3]A colorfulness e a complexidade visual preferidas variam entre públicos; maior escolaridade geralmente reduz a preferência por colorfulness.O público é acadêmico e técnico, então a paleta é de neutros suaves com um único acento, reservado a links e destaques de figuras.
[4]A estética percebida correlaciona-se fortemente com a usabilidade percebida, antes e depois do uso.O esforço vai para a tipografia (escala, ritmo, numerais tabulares) em vez de decoração.
[5]Em um estudo com 2.684 participantes, o “visual do design” foi o sinal de credibilidade mais citado (46,1% dos comentários), seguido da estrutura da informação.Um único sistema de design consistente em todas as rotas e uma arquitetura de informação clara.
[6]A credibilidade depende do que o usuário percebe (proeminência) e de como interpreta isso.As credenciais são proeminentes e fáceis de interpretar: créditos institucionais, link para o sistema no ar, datas e o método junto de cada número.
[7]Quem avalia desenvolvedores usa rastros visíveis de atividade como sinais de habilidade e comprometimento.Artefatos reais em vez de autodescrição: o sistema no ar, figuras de arquitetura, inventário de testes, período do histórico de commits, cadência do changelog e benchmarks. Sem barras de progresso de habilidades.
[8]Recrutadores têm dificuldade de interpretar e confiar em sinais agregados sobre desenvolvedores.Toda métrica traz linha de base, resultado, data e método, e as ressalvas são escritas (por exemplo, o resultado do benchmark de grafos vale apenas para travessias de um salto).
[9]As pessoas fazem inferências sobre habilidades e comprometimento a partir de atividade visível e em rede.A linha do tempo do projeto e o changelog público são linkados, para que o ritmo do trabalho possa ser conferido.
[10]Desenvolvedores criticam as seleções técnicas pela falta de relevância no mundo real.O estudo de caso tem profundidade do mundo real: decisões, trade-offs, incidentes e post-mortems, em vez de quebra-cabeças.
[11]Entrevistas com 59 engenheiros experientes identificaram atributos de grandes engenheiros que vão muito além de escrever código.Cada seção do estudo de caso segue Problema → Decisão → Trade-off → Resultado, mostrando julgamento e não só entrega.
[12]A estrutura “taça de martíni”: primeiro uma narrativa conduzida pelo autor, depois exploração conduzida pelo leitor.O estudo de caso abre com uma narrativa guiada; um sumário fixo e links diretos para o sistema no ar deixam o leitor explorar depois.
[13]As pessoas procuram informação seguindo o “cheiro da informação”.Rótulos de link descritivos (“Ler o estudo de caso”, não “Mais”), um índice de capacidades que nomeia cada tema e títulos de seção com âncoras.
[14]Sinais são críveis quando são custosos de falsificar.Específicos verificáveis (números, URLs públicas, artigos) são preferidos a adjetivos.
[15]As WCAG 2.2 definem critérios de acessibilidade testáveis.Contraste AA nos dois temas, foco visível, suporte a redução de movimento, link de salto e marcos semânticos, verificados automaticamente com axe.

Referências

  1. [1]Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour & Information Technology, 25(2), 115–126.
  2. [2]Tuch, A. N., Presslaber, E. E., Stöcklin, M., Opwis, K., & Bargas-Avila, J. A. (2012). The role of visual complexity and prototypicality regarding first impression of websites. International Journal of Human-Computer Studies, 70(11), 794–811.
  3. [3]Reinecke, K., & Gajos, K. Z. (2014). Quantifying visual preferences around the world. Proceedings of CHI ’14, 11–20.
  4. [4]Tractinsky, N., Katz, A. S., & Ikar, D. (2000). What is beautiful is usable. Interacting with Computers, 13(2), 127–145. https://doi.org/10.1016/S0953-5438(00)00031-X
  5. [5]Fogg, B. J., et al. (2002). How do people evaluate a Web site’s credibility? Results from a large study. Stanford Persuasive Technology Lab and Consumer WebWatch.
  6. [6]Fogg, B. J. (2003). Prominence-interpretation theory: Explaining how people assess credibility online. CHI ’03 Extended Abstracts, 722–723.
  7. [7]Marlow, J., & Dabbish, L. (2013). Activity traces and signals in software developer recruitment and hiring. Proceedings of CSCW ’13.
  8. [8]Singer, L., Figueira Filho, F., Cleary, B., Treude, C., Storey, M.-A., & Schneider, K. (2013). Mutual assessment in the social programmer ecosystem: An empirical investigation of developer profile aggregators. Proceedings of CSCW ’13, 103–116. https://doi.org/10.1145/2441776.2441791
  9. [9]Dabbish, L., Stuart, C., Tsay, J., & Herbsleb, J. (2012). Social coding in GitHub: Transparency and collaboration in an open software repository. Proceedings of CSCW ’12.
  10. [10]Behroozi, M., Parnin, C., & Barik, T. (2019). Hiring is broken: What do developers say about technical interviews? Proceedings of IEEE VL/HCC 2019.
  11. [11]Li, P. L., Ko, A. J., & Zhu, J. (2015). What makes a great software engineer? Proceedings of ICSE 2015, 700–710.
  12. [12]Segel, E., & Heer, J. (2010). Narrative visualization: Telling stories with data. IEEE Transactions on Visualization and Computer Graphics, 16(6). https://doi.org/10.1109/TVCG.2010.179
  13. [13]Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675.
  14. [14]Spence, M. (1973). Job market signaling. The Quarterly Journal of Economics, 87(3), 355–374.
  15. [15]W3C (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
Colofão — Jonathas Castilho