Jekyll2023-08-28T23:34:46-03:00http://www.thiagonasc.com/feed.xmlThiagoNasc.comExperiências, estudos e conteúdo interessantes (pessoais e profissionais) sobre gestão de projetos, experiência do usuário e desenvolvimento web.Thiago NascimentoA melhor maneira de organizar ScreenShots em seu macOS2023-08-28T20:45:00-03:002023-08-28T20:45:00-03:00http://www.thiagonasc.com/produtividade/organizar-screenshots-macos<p>O <strong>macOS</strong> lhe permite nativamente tirar <strong>ScreenShots</strong> de forma extremamente descomplicada, basta pressionar as teclas:</p>
<p><span class="badge bg-secondary">Cmd</span> + <span class="badge bg-secondary">Shift</span> + <span class="badge bg-secondary">3</span> para tirar um print de toda a tela; ou;</p>
<p><span class="badge bg-secondary">Cmd</span> + <span class="badge bg-secondary">Shift</span> + <span class="badge bg-secondary">4</span> para tirar um print de uma porção da tela; ou;</p>
<p><span class="badge bg-secondary">Cmd</span> + <span class="badge bg-secondary">Shift</span> + <span class="badge bg-secondary">4</span> + <span class="badge bg-secondary">espaço</span> para tirar print de uma janela completa; ou;</p>
<p><span class="badge bg-secondary">Cmd</span> + <span class="badge bg-secondary">Shift</span> + <span class="badge bg-secondary">5</span> para criar um filme de sua tela.</p>
<p>Você pode ver mais detalhes <a href="https://support.apple.com/pt-br/HT201361#:~:text=Mantenha%20pressionadas%20as%20teclas%20Shift%20%2B%20Command%20%2B%204.,barra%20de%20espa%C3%A7o%20enquanto%20arrasta." target="_blank">nesta página oficial</a> da Apple.</p>
<p><em>Sem grandes novidades até aqui, certo? Mas agora vem o pulo do gato!</em></p>
<h2 id="organizando-seus-screenshots">Organizando seus ScreenShots</h2>
<p>Nativamente, todas as <strong>Capturas de Tela</strong> são armazenados em sua <strong>Mesa</strong>, Área de Trabalho ou Desktop, como muitos ainda chamam <em>(por herança do Windows)</em>.</p>
<p>Ao final de um bom dia de trabalho com muitas capturas, temos um resultado <del>infelizmente</del> parecido com isso:</p>
<p><img src="../../assets/imgs/macos-printscreen/macos-printscreens-mesa.jpg" alt="PrintScreen da Mesa de um MacOS com mais de metade da tela tomada por arquivos resultantes de printscreens feitos ao longo de um dia" class="img-fluid rounded" /></p>
<p>A boa notícia é que é possível alterar o destino de seus printscreens e aí começa a organização! 😄</p>
<ol>
<li>
<p>Crie uma pasta e a renomeie para <strong>Screenshots</strong> (ou o nome que desejar);
<img src="../../assets/imgs/macos-printscreen/diretorio-screenshots.png" alt="Print de tela mostrando um ícone de diretório em azul e abaixo o título da pasta escrito ScreenShots" class="img-fluid rounded" /></p>
</li>
<li>
<p>Mova-a para um lugar seguro: em meu caso, sugiro levá-la para dentro da pasta <strong>Imagens</strong>, no diretório padrão de seu usuário;
<img src="../../assets/imgs/macos-printscreen/localizacao-diretorio-screenshots.png" alt="Print de tela mostrando o finder do macOS, percorrendo o caminho: usuário, imagens e então o diretório chamado Screenshots" class="img-fluid rounded" /></p>
</li>
<li>
<p>Pressione <span class="badge bg-secondary">Cmd</span> + <span class="badge bg-secondary">Shift</span> + <span class="badge bg-secondary">5</span>, clique em <strong>Opcões</strong> e em seguida <strong>Outra localização</strong>.
<img src="../../assets/imgs/macos-printscreen/opcoes-outra_localizacao.jpg" alt="Print de tela mostrando o finder do macOS, percorrendo o caminho: usuário, imagens e então o diretório chamado Screenshots" class="img-fluid rounded" /></p>
</li>
<li>
<p>Selecione o diretório <strong>ScreenShots</strong> e assim todos novos prints serão enviados diretamente para lá;</p>
</li>
<li>
<p>Arraste a pasta criada ao dock, criando um atalho simples e rápido. Sugiro posicioná-loa ao lado da pasta Downloads, como na imagem abaixo:
<img src="../../assets/imgs/macos-printscreen/dock-screenshots-folder.jpg" alt="Print de tela mostrando o finder do macOS, percorrendo o caminho: usuário, imagens e então o diretório chamado Screenshots" class="img-fluid rounded" /></p>
</li>
</ol>
<p><em>Obs: lembre-se de que é possível configurar diversas formas de visualização no Dock, basta clicar com o botão direito sobre a pasta e escolher a forma desejada!</em></p>
<p><strong>Pronto!</strong></p>
<p>Seus PrintScreens agora estarão devidamente organizados, não mais preenchendo sua Mesa e facilmente acessíveis para uso e compartilhamento. 😍</p>Thiago NascimentoO macOS lhe permite nativamente tirar ScreenShots de forma extremamente descomplicada, basta pressionar as teclas:3 recursos simples para gerenciar e-mails de forma mais eficiente2023-07-23T18:00:00-03:002023-07-23T18:00:00-03:00http://www.thiagonasc.com/produtividade/produtividade-email-nova-conversa<p>Sou um aficcionado por produtividade e quando o assunto é e-mail, passei um longo período da vida tentando diversas metodologias até encontrar recursos simples que me peritem gerenciar e-mails de forma rápida e eficiente!</p>
<p><img src="/assets/imgs/email-recursos-produtividade/meme-email-inbox-zero.jpg" class="img-fluid border rounded" alt="Gráfico de pizza com porção ínfima representando 'você manda certo' e outra porção predominante, representando 'você esquece o anexo' " /></p>
<h2 id="1-ative-o-avanço-automático-de-e-mails">1. Ative o avanço automático de e-mails</h2>
<p>Eu tinha o mal hábito de escolher qual e-mail ler e isso fazia com que algumas mensagens importantes ficassem sem leitura ou ação.</p>
<p>Não bastando, após a escolha e leitura de uma determinada mensagem, ao ser redirecinado à caixa de entrada, esse ‘poder de escolha’ era novamente reproduzido, demandando ainda mais energia e tempo para uma nova decisão: qual o próximo e-mail a ser lido?</p>
<p>Com o objetivo de reduzir a necessidade de tomada de decisões que agregam pouco valor <del>ou nenhum</del> (caminho da felicidade e produtividade), definir que a próxima mensagem deverá ser exibida assim que a leitura e ação de um e-mail for finalizado é uma prática libertadora!</p>
<p>Em minha experiência de uso, definir que a mensagem mais nova deva ser exibida após a ação se mostrou o caminho mais efetivo. Sendo assim, ao iniciar o acompanhamento dos e-mails daquele dia, visualizo a mensagem mais antiga da caixa e executo as ações.</p>
<p><img src="/assets/imgs/email-recursos-produtividade/configuracoes-recurso-email.jpg" class="img-fluid border rounded" alt="Gráfico de pizza com porção ínfima representando 'você manda certo' e outra porção predominante, representando 'você esquece o anexo' " /></p>
<p>Pode até soar contra-intuitivo em primeiro momento, mas há uma razão lógica e prática: acessar o e-mail por ordem de chegada, isto é, aquele que lhe enviou a mais tempo terá minha leitura e ação primeiro.</p>
<h2 id="2-utilize-categorias-simples-em-seus-e-mails">2. Utilize categorias simples em seus e-mails</h2>
<p>Qualquer e-mail possui fundamentalmente 5 possíveis ações:</p>
<ol>
<li><strong>Aguardando ação:</strong> e-mail que depende de minha ação;</li>
<li><strong>Aguardando resposta:</strong> e-mail que depende da ação de um terceiro;</li>
<li><strong>Ler depois:</strong> e-mail que deverá ser lido depois;</li>
<li><strong>Armazenar:</strong> e-mail visto e que terá importância futuramente;</li>
<li><strong>Excluir:</strong> e-mail visto e que não terá importância futuramente.</li>
</ol>
<p>Para organizá-las, precisaremos criar somente 3 categorias, simples assim:</p>
<ol>
<li><strong>Aguardando ação</strong></li>
<li><strong>Aguardando resposta</strong></li>
<li><strong>Ler depois</strong></li>
</ol>
<p><img src="/assets/imgs/email-recursos-produtividade/email-categorias-simples.jpg" class="img-fluid border rounded" alt="Gráfico de pizza com porção ínfima representando 'você manda certo' e outra porção predominante, representando 'você esquece o anexo' " /></p>
<p><em>Saiba como adicionar ou remover categorias no <a href="https://support.google.com/mail/answer/3094499?hl=pt-BR&co=GENIE.Platform%3DAndroid" target="_blank">Gmail</a> e no <a href="https://support.microsoft.com/pt-br/office/usar-categorias-no-outlook-com-a0f709a4-9bd8-45d7-a2b3-b6f8c299e079" target="_blank">Outlook</a>.</em></p>
<p>As ações de <strong>armazenar</strong> e <strong>excluir</strong> não precisam de categorias, visto que a estrutura dos próprios gerenciadores de e-mails já as contemplam.</p>
<h2 id="3-utilize-atalhos-e-execute-ações-de-forma-extremamente-rápida">3. Utilize atalhos e execute ações de forma extremamente rápida</h2>
<p>Boas interfaces tornam as ações fáceis de serem realizadas. No entanto, os atalhos lhe permitem ainda mais eficiência quando o assunto é tempo de execução.</p>
<p><img src="/assets/imgs/email-recursos-produtividade/gmail-atalhos-de-ouro.jpg" class="img-fluid border rounded" alt="Gráfico de pizza com porção ínfima representando 'você manda certo' e outra porção predominante, representando 'você esquece o anexo' " /></p>
<p><em>Confira todos os atalhos do <a href="https://support.google.com/mail/answer/6594?hl=pt-BR&co=GENIE.Platform%3DDesktop#zippy=%2Ca%C3%A7%C3%B5es%2Cnavega%C3%A7%C3%A3o%2Caplicativo" target="_blank">Gmail</a> e do <a href="https://support.microsoft.com/pt-br/office/atalhos-de-teclado-do-outlook-3cdeb221-7ae5-4c1d-8c1d-9e63216c1efd" target="_blank">Outlook</a>.</em></p>
<p>Aproveite-se portanto dos atalhos e perceberá que sua caixa de entrada estará vazia e organizada em poucos minutos!</p>
<h2 id="o-hábito-saudável-de-manter-sua-caixa-de-entrada-vazia-e-e-mails-categorizados">O hábito saudável de manter sua caixa de entrada vazia e e-mails categorizados</h2>
<p>Gerenciar e-mails de forma eficiente vai muito além de uma prática desejada, é uma questão de saúde!</p>
<p>Uma caixa de entrada vazia lhe minimiza o sentimento de sobrecarga e estresse, sabendo que todos foram repassados.</p>
<p>E, por fim, e-mails devidamente categorizados lhe permitirá executar as ações em seu devido tempo, cabendo executar aqueles marcados como <strong>aguardando ação</strong>, acompanhar periodicamente à aqueles <strong>aguardando repostas</strong>, ler os categorizados para <strong>ler depois</strong>. E mais, com a tranquilidade em saber que informações importantes que não carecem de ação estão devidamente <strong>armazenadas</strong>.</p>
<p>Simples recursos que o auxiliará a manter-se no caminho certo: <strong>focado, produtivo e eficiente</strong>.</p>Thiago NascimentoSou um aficcionado por produtividade e quando o assunto é e-mail, passei um longo período da vida tentando diversas metodologias até encontrar recursos simples que me peritem gerenciar e-mails de forma rápida e eficiente!Resenha: O mais importante para o investidor (Howard Marks)2023-04-17T20:00:00-03:002023-04-17T20:00:00-03:00http://www.thiagonasc.com/livros/resenha-o-mais-importante-para-o-investidor<h5 id="se-você-assim-como-eu-deseja-saber-afinal-o-que-é-o-mais-importante-para-o-investidor-esta-obra-de-howard-marks-é-um-grande-ensinamento">Se você, assim como eu, deseja saber afinal o que é <strong>o mais importante para o investidor</strong>, esta obra de Howard Marks é um grande ensinamento!</h5>
<p>A magia do título, tão direta e convidativa, é imediatamente revelada já em seu sumário: <a href="https://amzn.to/3DMAzec">o livro</a> conta com 20 capítulos, onde cada um menciona um assunto diferente como <strong>o mais importante ao investidor</strong> e ainda finaliza propondo juntar tudo!</p>
<p>Capítulos do livro:</p>
<ol>
<li>O mais importante é… o pensamento de segundo nível</li>
<li>O mais importante é… entender a eficiência do mercado (e suas limitações)</li>
<li>O mais importante é… o valor</li>
<li>O mais importante é…entender o risco</li>
<li>O mais importante é…reconhecer o risco</li>
<li>O mais importante é…controlar o risco</li>
<li>O mais importante é…estar atento aos ciclos</li>
<li>O mais importante é…estar ciente do pêndulo</li>
<li>O mais importante é…combater as influências negativas</li>
<li>O mais importante é… o ponto de vista contrário</li>
<li>O mais importante é… encontrar pechinchas</li>
<li>O mais importante é… o oportunismo paciente</li>
<li>O mais importante é… saber o que não sabemos</li>
<li>O mais importante é… entender nossa posição</li>
<li>O mais importante é… apreciar o papel da sorte</li>
<li>O mais importante é… investir de forma defensiva</li>
<li>O mais importante é… evitar armadilhas</li>
<li>O mais importante é… agregar valor</li>
<li>O mais importante é… juntar tudo</li>
</ol>
<p>Citando <em>Donald Miller</em> em <a href="https://amzn.to/3DMAzec" target="_blank">Storybrand</a>: “as pessoas não compram os melhores produtos, compram os produtos que podem entender mais rapidamente”.</p>
<p>Curiosamente, esperava com a leitura entender rapidamente sobre o mundo dos investimentos e finalizo-a, talvez não tão rapidamente quanto esperava, mas com a convicção de entender melhor sobre este universo e ainda considerando a obra como um dos melhores produtos (tratando-se de livros de investimentos)!</p>
<p>Não me aprofundarei em explicar quem é o gênio do mercado financeiro <strong>Howard Marks</strong> (afinal estes conteúdos da <a href="https://amzn.to/3UHzAUG" target="_blank">Wikipédia</a> e <a href="https://en.wikipedia.org/wiki/Howard_Marks_(investor)" target="_blank">YouTube</a> poderão explicar melhor), mas talvez seja suficiente mencionar que com mais de 50 anos de experiência, gerencia cerca de US$ 150 bilhões, tendo <em>Warren Buffett</em> como grande incentivador à escrita do livro e também quem assina seu prefácio.</p>
<p>Em especial, o primeiro capítulo: <strong>o pensamento de segundo nível</strong>, carrega um princípio de extremo valor, aplicável em diversas, se não todas as áreas da vida:</p>
<blockquote class="blockquote">
<p>Pensadores de primeiro nível pensam da mesma forma que os outros pensadores de primeiro nível sobre os mesmos temas e, em geral, chegam as mesmas conclusões. Por definição, isso não pode ser o caminho para chegar aos melhores resultados. Não há como todos os investidores terem performance superior ao nível de mercado, pois, coletivamente, eles são mercado.</p>
<footer class="blockquote-footer">Howard Marks</footer>
</blockquote>
<p>Uma boa descrição de pensamento de segundo nível é: <strong>diferente e melhor</strong>.</p>
<p>Simples assim mas complexo!</p>
<p><strong>O mais importante para o investidor</strong> não te ensinará o caminho mais curto, o tiro mais certeiro… é um livro de princípios, a ser lido, relido e revisitado… sempre que possível ou necessário!</p>
<hr class="my-4" />
<table>
<tbody>
<tr>
<td><a target="_blank" href="https://amzn.to/3q17QiV"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=6556600202&Format=_SL160_&ID=AsinImage&MarketPlace=BR&ServiceVersion=20070822&WS=1&tag=thiagonasc-20&language=pt_BR" /></a><img src="https://ir-br.amazon-adsystem.com/e/ir?t=thiagonasc-20&language=pt_BR&l=li2&o=33&a=6556600202" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" /></td>
<td><strong>O mais importante para o investidor</strong><br />Lições de um gênio do mercado financeiro<br /><em>Por: Howard Marks</em><br /><a href="https://amzn.to/3DMAzec">🛒 Comprar na Amazon</a></td>
</tr>
</tbody>
</table>
<p><em>PS: recomendo fortemente a versão em capa dura da Edipro.</em></p>
<hr class="my-4" />
<h3 id="veja-também">Veja também:</h3>
<ul>
<li><a href="/livros/livro-trabalhe-4-horas-por-semana">Resenha: Trabalhe 4 horas por semana (por Tymothy Ferris)</a></li>
<li><a href="/livros/resenha-livro-sprint-a-sprint">Resenha: Sprint a Sprint (por Mary Provinciatto e Paulo Caroli)</a></li>
<li><a href="/livros/resenha-livro-sprint">Resenha: Sprint (por Jake Knapp, John Zeratsky, Braden Kowitz)</a></li>
<li><a href="/livros">Ver todos os livros »</a></li>
</ul>Thiago NascimentoSe você, assim como eu, deseja saber afinal o que é o mais importante para o investidor, esta obra de Howard Marks é um grande ensinamento!Paginação tradicional: como os grandes sites utilizam2022-11-07T22:20:00-03:002022-11-07T22:20:00-03:00http://www.thiagonasc.com/usabilidade/paginacao-de-sistemas-melhores-praticas<!-- ---
1. [Apresentação](#apresentacao)
2. [Paginação vs. Rolagem Infinita](#paginacaovsrolageminfinita)
3. Como os grandes projetos utilizam:
1. AliExpress
--- -->
<p><a class="anchor" name="apresentacao"></a></p>
<p>Tempos atrás escrevi o breve artigo <a href="/acessibilidade/paginacao-boas-praticas-uso-experiencia-perfeita" target="_blank">Paginação: boas práticas de uso para uma experiência perfeita</a>. E mesmo passado o tempo, as práticas ali descritas permanecem úteis.</p>
<p>De simples sistemas à produtos robustos, é fácil notar a importância da paginação: onde há diversos registros a serem exibidos - condição presente na quase totalidade dos sistemas - se faz necessário um recurso que permita uma boa experiência ao listá-los.</p>
<p>E ainda que tenhamos inúmeros bons exemplos, é comum encontrar paginações que oferecem uma má experiência ao usuário.</p>
<p>Por fim, analisar como o recurso é aplicado em projetos de referência em nível nacional e até internacional, com certeza é uma prática bastante eficiente!</p>
<p><a class="anchor" name="paginacaovsrolageminfinita"></a></p>
<p><br /></p>
<h2 id="paginação-vs-rolagem-infinita">Paginação vs. Rolagem infinita</h2>
<p>Para começo, é importante classificarmos dois dos recursos mais comuns na listagem de diversos registros:</p>
<p><img src="../../assets/imgs/paginacao/paginacao-tradiciona-vs-rolagem-infinita.jpg" alt="Recorte da funcionalidade de paginação do Booking" class="img-fluid rounded" /></p>
<ol>
<li>
<p><strong>Paginação:</strong> (tradicional) dividem-se os registros em pequenas partes, geralmente denominadas de ‘páginas’, e o acesso aos mesmos se dá por meio destas porções, listadas individualmente. A medida que uma nova parte é requerida, os antigos registros dão lugar aos novos. Simples como numa página de livro.</p>
</li>
<li>
<p><strong>Rolagem infinita:</strong> (inifinite-scroll) alguns registros são inicialmente listados, geralmente os mais recentes e à medida que a página é percorrida, novos registros são listados e exibidos, mantendo os anteriores. É comum vermos botões como ‘Ver mais’ ou somente um ‘Carregando…’ ao fim dos registros atuais antes que os novos sejam requeridos.</p>
</li>
</ol>
<p>É notório que a maioria das redes sociais utilizam do segundo recurso, a rolagem infinita. O objetivo é evidente: minimizar o esforço e por consequência aumentar a retenção dos usuários.</p>
<p>Quem nunca passou minutos, talvez horas, rolando o dedo na tela para ver mais conteúdos? Chega a ser viciante, não? No entanto, mesmo este recurso possui seus prós e contras. Há inclusive um artigo recém publicado no <a href="https://www.nngroup.com/">Nielsen Norman Group</a>, que vale a leitura: <a href="https://www.nngroup.com/articles/infinite-scrolling-tips/">Rolagem infinita - Quando usar, Quando evitar</a> <em>(artigo em inglês)</em>.</p>
<p>Exemplos de grandes plataformas que utilizam a rolagem infinita: <a href="http://instagram.com/">Instagram</a>, <a href="http://tiktok.com/">Tik Tok</a>, <a href="http://twitter.com/">Twitter</a>, <a href="http://youtube.com/">YouTube</a>, <a href="http://facebook.com/">Facebook</a>, <a href="http://linkedin.com/">LinkedIn</a>, <a href="http://reddit.com/">Reddit</a> e outros.</p>
<p>Mas nos concentraremos em analisar, como o próprio título diz, nas <strong>paginações tradicionais</strong>. Vamos lá?</p>
<p><br /></p>
<h2 id="critérios-de-seleção-e-análise">Critérios de seleção e análise</h2>
<p>Foram selecionados alguns dos principais sites mais acessados no Brasil (segundo <a href="https://pt.semrush.com/blog/top-100-sites-mais-visitados/">SEM Rush</a>) e que utilizam, é claro, recursos de paginação tradicional.</p>
<p>Para cada site, foram tirados printscreens em 3 momentos distintos de sua utilização: primeira página, página intermediária e última página.</p>
<p><br /></p>
<h2 id="exemplos-de-usos-em-grandes-sites">Exemplos de usos em grandes sites</h2>
<p><img src="../../assets/imgs/paginacao/paginacao-aliexpress.jpg" alt="Recorte da funcionalidade de paginação do site AliExpress. " class="img-fluid rounded border border mt-4" />
<a href="http://www.aliexpress.com">AliExpress</a></p>
<p><em>Arrisco-me dizer que a funcionalidade <strong>Ir para a página</strong> é raramente utilizada. Talvez se removida, nem faça falta. Pelo contrário, simplifique a interface e facilite a experiência (menos é mais).</em></p>
<p><img src="../../assets/imgs/paginacao/paginacao-amazon.jpg" alt="Recorte da funcionalidade de paginação da Amazon" class="img-fluid rounded border mt-4" />
<a href="http://www.amazon.com.br">Amazon</a></p>
<p><img src="../../assets/imgs/paginacao/paginacao-booking.jpg" alt="Recorte da funcionalidade de paginação do Booking" class="img-fluid rounded border mt-4" />
<a href="http://www.booking.com">Booking</a></p>
<p><img src="../../assets/imgs/paginacao/paginacao-gmail.jpg" alt="Recorte da funcionalidade de paginação do Gmail" class="img-fluid rounded border mt-4" />
<a href="http://www.gmail.com">Gmail</a></p>
<p><img src="../../assets/imgs/paginacao/paginacao-google.jpg" alt="Recorte da funcionalidade de paginação do Google" class="img-fluid rounded border mt-4" />
<a href="http://www.google.com">Google</a></p>
<p><em>Já havia percebido que a letra “O” em vermelho vai percorrendo o logo do Google à medida em que se avançam as páginas? Repare na imagem acima! (é quase um Easter Egg)</em></p>
<p><img src="../../assets/imgs/paginacao/paginacao-lojas-americanas.jpg" alt="Recorte da funcionalidade de paginação das Lojas Americanas" class="img-fluid rounded border mt-4" />
<a href="http://www.americanas.com.br">Lojas Americanas</a></p>
<p><img src="../../assets/imgs/paginacao/paginacao-magalu.jpg" alt="Recorte da funcionalidade de paginação da Magalu" class="img-fluid rounded border mt-4" />
<a href="http://www.magalu.com.br">Magalu</a></p>
<p><img src="../../assets/imgs/paginacao/paginacao-mercado-livre.jpg" alt="Recorte da funcionalidade de paginação do Mercado Livre" class="img-fluid rounded border mt-4" />
<a href="http://www.mercadolivre.com.br">Mercado Livre</a></p>
<p><img src="../../assets/imgs/paginacao/paginacao-olx.jpg" alt="Recorte da funcionalidade de paginação do OLX" class="img-fluid rounded border mt-4" />
<a href="http://www.olx.com.br">OLX</a></p>
<p><em>Considero este um bom exemplo de que mesmo grandes sites podem <strong>não</strong> projetar as interfaces mais amigáveis. Há quebra de layout na página intermediária; e o mais estranho, repare o botão <strong>última página</strong> sendo substituído por <strong>primeira página</strong> no 3º momento.</em> 🤦🏻♂️</p>
<p><em>Seria este um loop intencional para retenção do usuário?</em> 🤷🏻♂️</p>
<p><img src="../../assets/imgs/paginacao/paginacao-shopee.jpg" alt="Recorte da funcionalidade de paginação da Shopee" class="img-fluid rounded border mt-4" />
<a href="http://www.shopee.com">Shopee</a></p>
<p><br /></p>
<h2 id="conclusão">Conclusão</h2>
<p>Interessante perceber que não há um consenso visual definido mesmo em grandes sites. Afinal, cada um preza por seguir seu estilo, mantendo uma uniformidade visual da paginação com o layout.</p>
<p>Todavia, analisando a maioria, é possível perceber que há um padrão básico a ser seguido:</p>
<ul>
<li><strong>página atual</strong> (exibição)</li>
<li><strong>próxima página</strong> [botão]</li>
<li><strong>página anterior</strong> [botão]</li>
</ul>
<p><em>Detalhe: os botões <strong>página anterior</strong> e <strong>próxima página</strong>, ficam indisponíveis quando a página atual (selecionada) é a primeira ou a última, respectivamente.</em></p>
<p>Há também uma certa recorrência de um modelo mais avançado, onde são acrescidos os seguintes recursos:</p>
<ul>
<li><strong>primeira página</strong> [botão]</li>
<li><strong>última página</strong> [botão]</li>
</ul>
<p>Permitindo que o usuário seja direcionado mais rapidamente à página inicial ou final.</p>
<p><em>Detalhe: perceba que os botões podem estar descritos por extenso: <strong>primeira página</strong> e <strong>última página</strong>, como referenciado acima; ou podem estar representados por números: sendo <strong>1</strong> a primeira e o número respectivo à última, exemplo: <strong>17</strong>.</em></p>
<p>Por último, menos recorrente, no entanto cabível em alguns sistemas, é possível perceber o uso de um recurso que mostra o total de registros em si (não somente as páginas) e onde o usuário está localizado.</p>
<ul>
<li><strong>Exibindo 1-30 de 650 registros</strong></li>
</ul>
<p><em>Volte nos exemplos do Booking e Gmail caso queira entender melhor.</em></p>
<p>Agora é com você! <br /> Aproveite-se dos bons exemplos.</p>
<p><br /></p>
<h2 id="leituras-complementares">Leituras complementares</h2>
<hr />
<ul>
<li><a href="/acessibilidade/paginacao-boas-praticas-uso-experiencia-perfeita" target="_blank">Paginação: boas práticas de uso para uma experiência perfeita (ThiagoNasc.com)</a></li>
<li><a href="https://www.nngroup.com/articles/infinite-scrolling-tips/">Infinite Scrolling: When to Use It, When to Avoid It (NN Group)</a></li>
<li><a href="https://www.nngroup.com/articles/alternatives-pagination-listing-pages/">Alternatives to Pagination on Product-Listing Pages (NN Group)</a></li>
<li><a href="https://www.nngroup.com/articles/infinite-scrolling/">Infinite Scrolling Is Not for Every Website (NN Group)</a></li>
<li><a href="https://www.interaction-design.org/literature/article/split-the-contents-of-a-website-with-the-pagination-design-pattern">Split the Contents of a Website with the Pagination Design Pattern (Interaction Design)</a></li>
</ul>Thiago Nascimento<!– —Como o Google previne o erro mais comum de seus usuários no Gmail?2021-10-07T22:40:00-03:002021-10-07T22:40:00-03:00http://www.thiagonasc.com/usabilidade/prevencao-erro-anexo-gmail<p>Nos empenhamos, utilizamos um vocabulário requintado e uma gramática impecável. Com muita confiança, clicamos em enviar… pronto! Até o estalo em nossa mente e o nó na garganta: faltou o anexo! Quem nunca?</p>
<p>Há diversos memes na internet mas esse gráfico em especial é muito representantivo (rs).</p>
<div class="container text-center py-3 border rounded">
<img src="/assets/imgs/anexo-gmail/meme-anexo-email.png" class="img-fluid" alt="Gráfico de pizza com porção ínfima representando 'você manda certo' e outra porção predominante, representando 'você esquece o anexo' " />
</div>
<figcaption class="figure-caption mb-3">Fonte: <a href="https://humoremgrafico.tumblr.com/" target="_blank" rel="noopener">Humor em Gráfico (Tumblr)</a></figcaption>
<p>O <a href="https://www.google.com/" target="_blank" rel="noopener">Google</a>, com toda sua atenção à usabilidade, implementou em sua ferramenta de e-mails <a href="https://www.gmail.com/" target="_blank" rel="noopener">Gmail</a>, um recurso extremamente simples no entanto poderoso: uma mensagem de aviso quando há a palavra “<strong>anexo</strong>” na mensagem porém sem nenhum arquivo anexado à mesma.</p>
<p><img src="/assets/imgs/anexo-gmail/animacao-gmail-erro-anexo.gif" class="img-fluid border rounded" alt="Gráfico de pizza com porção ínfima representando 'você manda certo' e outra porção predominante, representando 'você esquece o anexo' " /></p>
<p>Sei que não é novidade para muitos… afinal, há mais de 7 anos o recurso está nativamente disponível aos usuários do Gmail.</p>
<p>No entanto, a reflexão continuará atual:</p>
<h3 id="qual-o-erro-mais-comum-os-usuários-tem-cometido-em-seu-sistema-e-o-que-você-tem-feito-para-evitá-lo">Qual o erro mais comum os usuários tem cometido em seu sistema e o que você tem feito para evitá-lo?</h3>
<p><br />
Lembre-se:</p>
<blockquote class="blockquote">
<p>"Boas mensagens de erros são importantes mas os melhores designs cuidadosamente os previnem primeiro."</p>
<footer class="blockquote-footer">Jakob Nielsen</footer>
</blockquote>Thiago NascimentoNos empenhamos, utilizamos um vocabulário requintado e uma gramática impecável. Com muita confiança, clicamos em enviar… pronto! Até o estalo em nossa mente e o nó na garganta: faltou o anexo! Quem nunca?Afinal, quando apresentar meu protótipo?2021-09-21T07:00:00-03:002021-09-21T07:00:00-03:00http://www.thiagonasc.com/usabilidade/quando-devo-apresentar-meu-prototipo<p><img src="/assets/imgs/quando-apresentar-prototipo/prototipo-baixa-alta-fidelidade.png" alt="Ilustração de um protótipo de baixa fidelidade à esquerda, com traços e contornos simples, com um corte diagonal no centro da imagem, evoluindo para um protótipo de alta fidelidade à direita, com elementos mais bem definidos e textos representativos." class="img-fluid rounded border" /></p>
<blockquote class="blockquote">
<p>Quanto mais simples o protótipo está, menos queremos mostrá-lo, no entanto, maior é o benefício em mostrarmos.</p>
<footer class="blockquote-footer">Paradoxo do protótipo simples</footer>
</blockquote>
<p>O paradoxo evidencia nosso instinto de querer sempre evoluir mais um pouco antes de mostrá-lo. Afinal, sabemos que há sempre como melhorar e queremos que outros testem nossa proposta no formato mais eficiente possível. Mas levar mais tempo na maioria das vezes é a pior opção.</p>
<p>Quanto mais simples o protótipo, mais à vontade os usuários estarão em tecer comentários e sugestões, pois reconhecem que será evoluído e portanto, ainda está aberto a mudanças.</p>
<p>O mais interessante é que levantarão diversos pontos que já temos em mente, mas ainda assim, é muito provável que tenhamos surpresas! Muitas vezes por estarmos míopes em nossa proposta e outras por não conhecermos tão bem os usuários quanto pensamos.</p>
<p>É possível detectar grandes problemas ainda que tenhamos pouco para mostrar. E isso poderá evitar que certos problemas sejam detectados tarde demais, muitas vezes até mesmo quando nem mais seja viável corrigí-lo.</p>
<p>Há outro interessante paradoxo do protótipo:</p>
<blockquote class="blockquote">
<p>Quanto mais experiente você se torna em desenvolver uma solução, mais difícil fica criar um protótipo.</p>
<footer class="blockquote-footer">Paradoxo do protótipo para desenvolvedores experientes:</footer>
</blockquote>
<figure class="figure">
<img src="/assets/imgs/quando-apresentar-prototipo/testando-prototipo-celular.jpg" class="figure-img img-fluid rounded" alt="Fotografia do ponto de vista de uma pessoa segurando um celular com a mão esquerda e o dedo indicador da mão direita indo em direção à tela para manusear a interface com diversas fotos." />
<figcaption class="figure-caption">Foto de <a href="https://www.pexels.com/pt-br/@cottonbro?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" target="_blank" rel="noopener">cottonbro</a> no <a href="https://www.pexels.com/pt-br/foto/aplicativo-app-aplicacao-solicitacao-5082579/?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels" target="_blank" rel="noopener">Pexels</a></figcaption>
</figure>
<p>Pode soar estranho em primeiro momento, mas basta pedirmos a um inexperiente que crie um protótipo. Ele fará alguns rabiscos e pronto, fácil assim!</p>
<p>Enquanto para um desenvolvedor experiente, embora conheça a fundo diversos recursos e limitações, criar um protótipo tende a ser uma tarefa complexa e muitas vezes duradoura. E a razão é justamente o fato de conhecer e considerar diversos recursos e limitações. Afinal, este é seu trabalho. Incrível, não?</p>
<p>E ele poderia estar certo considerando uma solução completa. No entanto, para um protótipo a história precisa ser diferente.</p>
<p>Podemos encontrar diversas definições e objetivos sobre protótipos, <em>wireframes</em> e <em>mockups</em>, mas de forma prática todas elas convergem em dizer que é uma versão simplificada que possibilite simular um produto antes de seu desenvolvimento.</p>
<p>E para utilizar o mínimo de recursos possíveis no processo, mostre-o o quanto antes!</p>
<p>Se você precisa de mais tempo antes de mostrar seu protótipo, é bastante possível que este seja o momento ideal para mostrá-lo!</p>
<p><strong>Comece o quanto antes possível e colha os melhores frutos.</strong></p>
<p>Trazer o cliente para a construção é muito importante, trazer o usuário para tal é essencial!</p>Thiago NascimentoPesquisa: padrões em interfaces de autenticação web2021-08-16T23:25:00-03:002021-08-16T23:25:00-03:00http://www.thiagonasc.com/usabilidade/padroes-em-interfaces-de-autenticacao-web<style>
h4 {
line-height: 1.0em;
}
h4 small {
font-size: 0.7em;
font-weight: normal;
color: #999;
}
</style>
<h4 id="uma-pesquisa-sobre-as-interfaces-dos-sites-mais-acessados-no-brasil-e-como-você-pode-aproveitar-desses-padrões-a-fim-de-promover-uma-boa-experiência-do-usuário">Uma pesquisa sobre as interfaces dos sites mais acessados no Brasil e como você pode aproveitar desses padrões a fim de promover uma boa experiência do usuário.</h4>
<p>Interfaces ou telas de autenticação são extremamente comuns em sites e sistemas. Através delas realizamos nossa identificação e entrada. No entanto, é comum encontrarmos diferentes formas de utilização, algumas proporcionando experiências extremamente agradáveis e outras, longe disso!</p>
<blockquote class="blockquote">
"Usuários passam a maioria do tempo navegando em outros sites."
</blockquote>
<blockquote class="blockquote-footer">
<cite title="Source Title">Jakob Nielsen</cite>
</blockquote>
<p>A citação acima, de um dos maiores especialsitas em usabilidade da web, pode ser bem interpretada no sentido de que os usuários preferem sua interface se comportando de forma semelhante às demais quais conhece e utiliza. Óbvio que isso não deva limitá-la a ser exatamente igual, mas sugere que proporcionará melhor experiência aproveitando-se de padrões já estabelecidos e reconhecidos como boas práticas.</p>
<p>Até aqui, sem grandes novidades ou mistérios. No entanto, quais os melhores elementos e padrões a serem utilizados? Login, nome de usuário, e-mail ou CPF? Senha ou palavra-chave? Entrar ou autenticar? Cadastrar ou inscrever?</p>
<p><img src="https://cdn.dribbble.com/users/213873/screenshots/16262854/media/01e56d55462771eff4674b6c5630b341.gif" alt="Animação mostrando uma interface de autenticação com diversos rótulos mudando a cada segundo." class="img-fluid rounded" /></p>
<h2 class="my-5 border-bottom">
Metodologia
</h2>
<p>Entenda como foi realizada a pesquisa e quais critérios utilizados:</p>
<h3 id="a-escolha-dos-sites">a) escolha dos sites</h3>
<p>O primeiro passo foi encontrar os <strong>sites mais acessados do Brasil</strong> através de uma fonte segura. Para tal, utilizou-se a publicação <a href="https://pt.semrush.com/blog/top-100-sites-mais-visitados/">Top 100 sites mais visitados</a>, divulgado pela <a href="https://pt.semrush.com/">Sem Rush</a>, uma empresa norte-americana (Boston/EUA) referência no gerenciamento em visibilidade online e marketing de conteúdo.</p>
<p>Da listagem, foram desconsiderados os <strong>sites de governo</strong> e <strong>bancos</strong> por utilizarem recursos exclusivos de autenticação e <strong>outros</strong>, não aplicáveis por não utilizarem recursos de autenticação ou não serem considerados relevantes ao contexto.</p>
<p>Ao final, 45 dos 100 sites mais visitados no país foram considerados na amostra.</p>
<h3 id="b-escolha-dos-elementos">b) escolha dos elementos</h3>
<p>Os elementos foram selecionados à partir de critérios de <strong>essencialismo</strong> e <strong>recorrência</strong> do uso em interfaces de autenticação. Isto é, os elementos essenciais presentes em todas as interfaces somado aos elementos mais recorrentes.</p>
<p>Para exemplo, é possível identificar o campo <strong>senha</strong> como um elemento <u>essencial</u>, presente em todas as interfaces, enquanto seu recurso <strong>mostrar senha</strong> um elemento (somente) <u>recorrente</u>. Como ambos são essenciais e recorrentes, ambos entraram na pesquisa.</p>
<p>Cada elemento então fora analisado de forma individual e suas especificidades consideradas, para uma maior amplitude da pesquisa e seus resultados.</p>
<p>Ainda sobre a ótica do exemplo anterior, para o campo <strong>senha</strong> foram analisadas as seguintes especificidades: qual rótulo utilizado, se o recurso de mostrar senha estava disponível e qual sua forma de interação.</p>
<h3 id="c-captação-e-organização-dos-dados">c) captação e organização dos dados</h3>
<p>Cada site e elemento foi individualmente acessado e todos os dados captados, inseridos em uma planilha estruturada a fim de facilitar o acesso, leitura e posterior extração das informações.</p>
<h2 class="mt-5 border-bottom">
Resultados
</h2>
<p><br /></p>
<h3 id="formulário-de-autenticação">Formulário de autenticação</h3>
<p>Considera-se a interface propriamente dita para inserção dos dados de autenticação do usuário, aqui originalmente denominadas de:</p>
<ul>
<li><strong>Usuário:</strong> forma de identificação do usuário, também conhecida como login, podendo ser utilizado de diversas formas;</li>
<li><strong>Senha:</strong> combinação de caracteres secreta utilizada como sinal de reconhecimento e validação do login.</li>
</ul>
<h4>
Texto utilizado para identificação do campo <u>usuário</u>,
presente na interface de autenticação<br />
<small>Resultado individual</small>
</h4>
<!-- Identifica como está descrito o <u>rótulo</u> do campo e qual o <u>tipo de dado</u> solicitado (e-mail, nome de usuário, número de telefone/celular ou CPF/CNPJ). -->
<div class="my-4" id="grafico3" style="width: 100%; height: 500px;"></div>
<h4>
Tipo de dado solicitado para identificação do <u>usuário</u>,
presente no formulário de autenticação<br />
<small>Resultado individual</small>
</h4>
<div class="my-4" id="grafico4" style="width: 100%; height: 200px;"></div>
<h4>
Tipo de dado solicitado para identificação do <u>usuário</u>,
presente no formulário de autenticação<br />
<small>Resultado combinado/agregado</small>
</h4>
<div class="my-4" id="grafico5" style="width: 100%; height: 200px;"></div>
<p><span class="text-muted"><em>As combinações não listadas possuíram resultado nulo.</em></span></p>
<p><br /></p>
<h4>
Texto utilizado para identificação do campo <u>senha</u>,
presente no formulário de autenticação<br />
<small>Resultado individual</small>
</h4>
<!-- Identifica como está descrito o <u>rótulo</u> do campo, se o mesmo possui o recurso de <u>exibir os caracteres</u> inseridos e qual a <u>forma utilizada</u> para tal. -->
<div class="my-4" id="grafico6" style="width: 100%; height: 200px;"></div>
<h4>
Recurso utilizado para exibir os caracteres inseridos no campo <u>senha</u>,
presente no formulário de autenticação<br />
<small>Resultado individual</small>
</h4>
<div class="my-4" id="grafico7" style="width: 100%; height: 200px;"></div>
<p><br /></p>
<h4>
Texto utilizado para identificação da ação <u>autenticar</u>,
presente na interface de autenticação<br />
<small>Resultado individual</small>
</h4>
<div class="my-4" id="grafico8" style="width: 100%; height: 300px;"></div>
<h4>
Cor predominante utilizada no botão de <u>autenticar</u>,
presente na interface de autenticação<br />
<small>Resultado individual</small>
</h4>
<div class="my-4" id="grafico9" style="width: 100%; height: 300px;"></div>
<p><br /></p>
<h4>
Texto utilizado para identificação da ação <u>recuperar dados de acesso</u>,
presente na interface de autenticação<br />
<small>Resultado individual</small>
</h4>
<div class="my-4" id="grafico10" style="width: 100%; height: 500px;"></div>
<p><br /></p>
<h4>
Texto utilizado para identificação de acesso ao <u>cadastro de usuário</u>,
presente na interface de autenticação<br />
<small>Resultado individual</small>
</h4>
<!-- Identifica como está descrita, na página de autenticação, a <u>chamada para a ação</u> *(call-to-action)* de cadastrar e a <u>cor predominante</u> da funcionalidade.
-->
<div class="my-4" id="grafico11" style="width: 100%; height: 600px;"></div>
<h4>
Cor predominante utilizada no botão de <u>cadastrar</u>,
presente na interface de autenticação<br />
<small>Resultado individual</small>
</h4>
<div class="my-4" id="grafico12" style="width: 100%; height: 500px;"></div>
<p><br /></p>
<h4>
Recurso <u>Single Sign-On</u> (SSO) e sistema utilizado<br />
<small>Resultado individual</small>
</h4>
<!-- Identifica se há o <u>recurso de autenticação via single sign-on</u> e caso afirmativo, através de quais <u>sistemas</u>. -->
<div class="my-4" id="grafico13" style="width: 100%; height: 200px;"></div>
<h4>
<small>Resultado combinado/agregado</small>
</h4>
<div class="my-4" id="grafico14" style="width: 100%; height: 250px;"></div>
<p><br /></p>
<h4>
Recursos utilizados nos campos do formulário de autenticação: <u>label</u> e/ou <u>placeholder</u><br />
<small>Resultado combinado/agregado</small>
</h4>
<!-- Identifica a forma de utilização dos textos no formulário, sendo <u>label</u> como o rótulo superior convencional e <u>placeholder</u> o texto que localiza-se sobre o próprio campo. -->
<div class="my-4" id="grafico15" style="width: 100%; height: 150px;"></div>
<p><span class="text-muted"><em>As combinações não listadas possuíram resultado nulo.</em></span></p>
<p><br /></p>
<h3 id="página-inicial">Página inicial</h3>
<p>Identifica como estão descritas, na página inicial, as <u>chamadas para as ações</u> <em>(call-to-action)</em> de autenticar e cadastrar no site.</p>
<h4>
Texto utilizado para identificação de acesso à funcionalidade de <u>autenticar</u>,
presente na página inicial<br />
<small>Resultado individual</small>
</h4>
<!-- 28px/dado -->
<div class="my-4" id="grafico1a" style="width:100%; height:400px;"></div>
<h4>
<small>Resultado percentual</small>
</h4>
<div id="grafico1b" style="width:100%; height:450px;"></div>
<p>Observações:</p>
<ul>
<li><strong>Formulário direto:</strong> considerado quando a página inicial disponibiliza o formulário de autenticação diretamente, sem a necessidade de uma chamada de acesso à funcionalidade;</li>
<li><strong>Ícone de usuário:</strong> considerado quando a página inicial disponibiliza um ícone de usuário (imagem representando uma pessoa) para chamada de acesso à funcionalidade.</li>
</ul>
<p><br /></p>
<h4>
Texto utilizado para identificação de acesso à funcionalidade de <u>cadastrar</u>,
presente na página inicial<br />
<small>Resultado individual</small>
</h4>
<div class="my-4" id="grafico2a" style="width: 100%; height: 500px;"></div>
<h4>
<small>Resultado percentual</small>
</h4>
<div id="grafico2b" style="width:100%; height:450px;"></div>
<p>Observação:</p>
<ul>
<li><strong>Não possui / não utiliza:</strong> considerado quando não é disponibilizada uma chamada direta para cadastro na página inicial.</li>
</ul>
<p><br /></p>
<h4 id="observações-gerais">Observações gerais:</h4>
<ul>
<li>Em casos de elementos duplicados, considerou-se a opção mais relevante ao usuário (por visibilidade e/ou acessibilidade);</li>
<li>Esta é uma pesquisa proprietária e realizada para publicação primariamente na internet, sendo assim, não foram utilizados critérios acadêmicos;</li>
</ul>
<h2 class="my-5 border-bottom">
Conclusão
</h2>
<p>É fato que projetistas lidam com algumas incertezas durante a criação de uma interface de autenticação, uma vez que mesmos os grandes sites, como pudemos ver, não utilizam elementos únicos e padronizados.</p>
<p>E claro, é preciso ainda ressaltar que, ainda que haja um padrão ou modelo mais utilizado, há diferentes maneiras de se interagir com diferentes tipos de usuários.</p>
<!-- LINKS -->
<!-- JAVASCRIPT -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart', 'bar']});
// grafico 1
google.charts.setOnLoadCallback(drawHomeCTAAutenticar);
function drawHomeCTAAutenticar() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Entrar', 18],
['Login', 4],
['Entre', 3],
['Entre ou cadastre-se', 3],
['Faça seu login', 3],
['Fazer login', 3],
['(formulário direto)', 2],
['(ícone de usuário)', 2],
['Meu/Minha $nome-do-site', 2],
['Conta $nome-do-site', 2],
['Faça seu login ou cadastre-se', 1],
['Iniciar sessão', 1],
['Minha conta', 1],
]);
var barchart_options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico1a'));
chart.draw(data, barchart_options);
var piechart_options = {
chartArea: {width: '100%'},
pieSliceText: 'percentage',
pieHole: 0.5,
};
var piechart = new google.visualization.PieChart(document.getElementById('grafico1b'));
piechart.draw(data, piechart_options);
}
// grafico 2
google.charts.setOnLoadCallback(drawHomeCTACadastrar);
function drawHomeCTACadastrar() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['(não possui / não utiliza)', 20],
['Cadastre-se', 5],
['Entre ou cadastre-se', 3],
['Cliente novo? Cadastrar', 2],
['Inscrever-se', 2],
['Associe-se gratuitamente', 1],
['Cadastrar-se', 1],
['Cadastre-se agora', 1],
['Cadastre-se gratuitamente', 1],
['Criar conta', 1],
['Criar nova conta', 1],
['Criar uma conta', 1],
['Crie a sua conta', 1],
['Faça seu login ou cadastre-se', 1],
['Inscreva-se', 1],
['Logar ou cadastrar', 1],
['Registrar-se', 1],
['Registre-se', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico2a')); chart.draw(data, options);
var piechart_options = {
chartArea: {width: '100%'},
pieSliceText: 'percentage',
pieHole: 0.5,
};
var piechart = new google.visualization.PieChart(document.getElementById('grafico2b'));
piechart.draw(data, piechart_options);
}
// grafico 3
google.charts.setOnLoadCallback(drawLoginRotulo);
function drawLoginRotulo() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['E-mail', 12],
['E-mail ou telefone', 3],
['Usuário', 3],
['E-mail, CPF ou CNPJ', 2],
['Email', 2],
['Endereço de e-mail', 2],
['Nome de usuário', 2],
['Celular, e-mail ou nome de usuário', 1],
['CPF / CNPJ / Email', 1],
['CPF ou email', 1],
['Digite seu e-mail', 1],
['E-mail ou CPF', 1],
['E-mail ou número de telefone celular', 1],
['E-mail ou usuário', 1],
['Email / Telefone', 1],
['Email / Telefone / Skype', 1],
['Email ou número de telefone', 1],
['endereço de e-mail ou ID de membro', 1],
['Login', 1],
['Login (CPF/CNPJ, e-mail ou username)', 1],
['Nome de usuário, e-mail ou celular', 1],
['Nome de utilizador(a)', 1],
['Seu email ou usuário', 1],
['Telefone / Email / Usuário', 1],
['Telefone, nome de usuário ou email', 1],
['Usuário ou E-mail', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico3')); chart.draw(data, options);
}
// grafico 4
google.charts.setOnLoadCallback(drawLoginTipoDado);
function drawLoginTipoDado() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['E-mail', 38],
['Nome de Usuário', 15],
['Telefone/Celular', 10],
['CPF/CNPJ', 7],
['Outros', 2]
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico4')); chart.draw(data, options);
}
// grafico 5
google.charts.setOnLoadCallback(drawLoginTipoDadoCombinado);
function drawLoginTipoDadoCombinado() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Somente e-mail', 17],
['Somente usuário', 6],
['E-mail + CPF/CNPJ', 5],
['E-mail + Usuário', 4],
['E-mail + Usuário + Telefone/Celular', 4],
['E-mail + Usuário + CPF/CNPJ', 2],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico5')); chart.draw(data, options);
}
// grafico 6
google.charts.setOnLoadCallback(drawSenhaRotulo);
function drawSenhaRotulo() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Senha', 35],
['Digite sua senha', 3],
['senha no/na $nome-do-site', 3],
['Palavra-passe', 2],
['Insira a senha', 1],
['Sua senha', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico6')); chart.draw(data, options);
}
// grafico 7
google.charts.setOnLoadCallback(drawSenhaExibirSenha);
function drawSenhaExibirSenha() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['(não possui)', 17],
['(icone / olho-aberto)', 14],
['(icone / olho-cortado)', 6],
['(txt-input) mostrar', 4],
['(checkbox) mostrar senha', 2],
['(txt-input) exibir', 2],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico7')); chart.draw(data, options);
}
// grafico 8
google.charts.setOnLoadCallback(drawBotaoEntrarRotulo);
function drawBotaoEntrarRotulo() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Entrar', 24],
['Continuar', 7],
['Login', 3],
['Acessar', 2],
['Fazer login', 2],
['Iniciar sessão', 2],
['Próxima', 2],
['Acessar conta', 1],
['Log in', 1],
['Seguinte', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico8')); chart.draw(data, options);
}
// grafico 9
google.charts.setOnLoadCallback(drawBotaoEntrarCor);
function drawBotaoEntrarCor() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Azul', 20],
['Vermelho', 9],
['Laranja', 6],
['Verde', 5],
['Roxo', 2],
['Amarelo', 1],
['Cinza', 1],
['Preto', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico9')); chart.draw(data, options);
}
// grafico 10
google.charts.setOnLoadCallback(drawRecuperarAcesso);
function drawRecuperarAcesso() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Esqueceu sua senha?', 8],
['Esqueceu a senha?', 7],
['Esqueci minha senha', 7],
['Esqueci meu e-mail + Esqueci minha senha', 4],
['Esqueceu?', 3],
['Esqueceu o nome de usuário ou senha?', 2],
['Esqueceu seu e-mail? + Esqueceu a senha?', 2],
['Esqueceu o nome de usuário? + Esqueceu a senha?', 1],
['Esqueceu seu login? + Esqueceu sua senha?', 1],
['Esqueceu-se da sua palavra-passe', 1],
['Esqueci a senha', 1],
['Esqueci meu e-mail ou a senha', 1],
['Precisa de ajuda para logar?', 1],
['Precisa de ajuda?', 1],
['Preciso de ajuda para entrar + Não sei a minha senha', 1],
['Problemas para efetuar login?', 1],
['Problemas para fazer login?', 1],
['Recuperar acesso', 1],
['Recuperar e-mail + Esqueci minha senha', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico10')); chart.draw(data, options);
}
// grafico 11
google.charts.setOnLoadCallback(drawCadastroRotulo);
function drawCadastroRotulo() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Cadastre-se', 10],
['(não possui)', 5],
['Criar conta', 4],
['Criar uma conta', 3],
['Cadastrar-se', 2],
['Cadastre-se aqui', 2],
['Abra uma conta', 1],
['Ainda não está no $nome-do-site? Crie uma conta', 1],
['Assine agora', 1],
['Cadastrar', 1],
['Criar nova conta', 1],
['Criar sua conta do(a) $nome-do-site', 1],
['Criar uma conta gratuita', 1],
['Crie grátis agora!', 1],
['Crie sua conta', 1],
['Crie uma!', 1],
['Faça seu cadastro!', 1],
['Inscreva-se no $nome-do-site', 1],
['Não tem uma conta? Cadastre-se', 1],
['Não tem uma conta? Crie a sua!', 1],
['Não tenho conta', 1],
['Quero criar uma conta', 1],
['Registrar', 1],
['Registrar-se', 1],
['Registre-se', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico11')); chart.draw(data, options);
}
// grafico 12
google.charts.setOnLoadCallback(drawCadastroCor);
function drawCadastroCor() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Azul padrão (txt)', 12],
['Preto (txt)', 7],
['(não possui)', 5],
['Branco (btn) e azul (txt)', 3],
['Laranja (btn) e branco (txt)', 3],
['Branco (btn) e preto (txt)', 2],
['Verde (btn) e branco (txt)', 2],
['Verde (txt)', 2],
['Amarelo (btn)', 1],
['Azul (btn) e branco (txt)', 1],
['Branco (btn) e roxo (txt)', 1],
['Branco (txt)', 1],
['Cinza (btn) e branco (txt)', 1],
['Cinza (btn) e preto (txt)', 1],
['Laranja (txt)', 1],
['Roxo (btn) e branco (txt)', 1],
['Roxo (txt)', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico12')); chart.draw(data, options);
}
// grafico 13
google.charts.setOnLoadCallback(drawSSOindividual);
function drawSSOindividual() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Facebook', 24],
['(não possui)', 19],
['Google', 16],
['Apple', 7],
['Outro(s)', 4],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico13')); chart.draw(data, options);
}
// grafico 14
google.charts.setOnLoadCallback(drawSSOacumulado);
function drawSSOacumulado() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Somente Facebook', 9],
['Facebook + Google', 7],
['Facebook + Google + Apple', 5],
['Facebook + Google + Apple + Outro(s)', 2],
['Facebook + Google + Outro(s)', 1],
['Somente Google', 1],
['Somente outro(s)', 1],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico14')); chart.draw(data, options);
}
// grafico 15
google.charts.setOnLoadCallback(drawLabelPlaceholder);
function drawLabelPlaceholder() {
var data = new google.visualization.arrayToDataTable([
['', 'Quantitativo'],
['Somente label', 19],
['Label posicionado como placeholder', 14],
['Somente placeholder', 12],
]);
var options = {
bars: 'horizontal', // Required for Material Bar Charts.
legend: { position: "none" },
};
var chart = new google.charts.Bar(document.getElementById('grafico15')); chart.draw(data, options);
}
</script>Thiago NascimentoNovo layout (ou quase isso)2021-06-17T22:30:00-03:002021-06-17T22:30:00-03:00http://www.thiagonasc.com/blog/novo-layout-ou-quase-isso<h4 id="aos-olhos-menos-atentos-passa-de-forma-imperceptível-mas-o-site-ganhou-um-novo-layout-ou-melhor-quase-isso">Aos olhos menos atentos passa de forma imperceptível, mas o site ganhou um novo layout, ou melhor: quase isso!</h4>
<p>Quando criei o site e blog, em 2013, utilizava o <a href="https://wordpress.com/pt-br/" target="_blank" rel="noopener">WordPress</a> por considerá-lo uma ferramenta robusta (e de fato é). No entanto, devido sua própria robustez, as alterações acabam sendo morosas.</p>
<p>Tendendo para uma vida mais essencialista e refletindo esses princípios em todas as áreas da vida, em 2017 decidi me aventurar com o <a href="https://jekyllrb.com/" target="_blank" rel="noopener">Jekyll</a>, um gerador de site estático simples e bastante eficiente.</p>
<p>Me surpreendi tão positivamente com a ferramenta que sigo utilizando-a.</p>
<p>Para ser prático, utilizei o tema original <a href="https://jekyll.github.io/minima/" target="_blank" rel="noopener">Minima</a>. Um layout bastante simples mas também muito eficiente aos meus objetivos. Claro que um ajuste aqui outro lá, mas a essência do tema sempre se manteve.</p>
<p><img src="/assets/imgs/novo-layout/thiagonasc-layout-antigo-minima.jpg" alt="Printscreen mostrando o layout antigo do site com o tema minima: menu no topo em cinza claro e conteúdo corrido da página de livros" class="img-fluid rounded border" /></p>
<p>Alguns anos se passaram, novas ideias surgiram, e enfim… a necessidade de maior flexibilidade do layout me fez voltar aos códigos e imergir novamente no mundo do <a href="http://www.getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a>.</p>
<p>Como tive boa experiência no passado (v3), conhecer a última versão (v5), com todas suas novidades, foi extremamente divertido! Me impressionei com o quanto evoluiu!</p>
<p>E assim surge o novo layout, ou melhor, quase isso: a ideia inicial foi manter a mesma essência do <a href="https://jekyll.github.io/minima/" target="_blank" rel="noopener">Minima</a>, por isso passa quase imperceptível, no entanto há pequenas mudanças em razão do <a href="http://www.getbootstrap.com/" target="_blank" rel="noopener">Bootstrap</a> e claro, algumas melhorias que há algum tempo desejava aplicar.</p>
<p><img src="/assets/imgs/novo-layout/thiagonasc-layout-novo-bootstrap.jpg" alt="Printscreen mostrando o layout novo do site com o tema em Bootstrap: menu no topo em fundo branco e conteúdo da página de livros mostrando-os de forma mais organizada, um ao lado do outro" class="img-fluid rounded border" /></p>
<p>Layout novo, estrutura mais flexível e muitas novidades por aí.</p>
<p>Este é mais que um desejo, um compromisso meu comigo mesmo e com todos que acessam e apoiam os conteúdos!</p>Thiago NascimentoAos olhos menos atentos passa de forma imperceptível, mas o site ganhou um novo layout, ou melhor: quase isso!Review: Headset Sennheiser Impact SC 60, vale a pena?2021-05-16T14:00:00-03:002021-05-16T14:00:00-03:00http://www.thiagonasc.com/review/senheiser-sc60-usb<h4 id="fone-de-ouvido-com-microfone-para-quem-exige-uma-solução-de-comunicação-robusta-e-profissional-áudio-de-alta-definição-microfone-com-cancelamento-de-ruídos-e-conector-usb">Fone de ouvido com microfone para quem exige uma solução de comunicação robusta e profissional: áudio de alta definição, microfone com cancelamento de ruídos e conector USB.</h4>
<p><img src="/assets/imgs/review-headset-sennheiser/thiago-nascimento-headset-sennheiser.jpg" alt="Thiago Nascimento, autor do site, sentado diante de um computador, utilizando o headset da Sennheiser SC-60 enquanto olha para o lado e sorri durante chamada" class="img-fluid rounded" /></p>
<p>Vivendo o novo normal, quando o <em>home-office</em> não só se tornou realidade para muitos, mas também uma necessidade, quem trabalha constantemente em videoconferências reconhecerá a importância de uma chamada com qualidade.</p>
<p>Sendo minha realidade, somado ao fato de facilitar constantemente dinâmicas remotas com diversos profissionais, senti a necessidade de aprimorar minhas chamadas.</p>
<p>Outro fator decisivo foi que nem sempre estamos em uma sala exclusiva e sozinhos. Seja na empresa ou mesmo em casa, dividiremosem em algum momento o espaço com alguém. E ainda há a possibilidade da outra pessoa também estar em chamada, na maioria dos dias, meu caso!</p>
<p>Assim investi no <em>headset</em> <strong>Sennheiser Impact SC 60 USB ML</strong>.</p>
<p>E antes que se pergunte, a preferência pelo modelo ao invés de um <em>headset gamer</em> (opção mais comum) se deu em razão do objetivo: uso exclusivo para videoconferências. Enquanto os <em>gamers</em> primam a qualidade sonora dos jogos, com graves robustos, o modelo em questão enfatiza a experiência de uma conversação limpa, com vozes bem definidas e naturais.</p>
<h3 id="design-e-conforto">Design e Conforto</h3>
<p><img src="/assets/imgs/review-headset-sennheiser/headset-sennheiser-sc60-1.jpg" alt="Mão segurando o Headset Sennheiser SC-60 de frente a um fundo branco" class="img-fluid rounded" /></p>
<p>Constituído por hastes finas de plástico, o <strong>Sennheiser SC-60</strong> pode até parecer frágil, mas basta manuseá-lo para sentir a qualidade e durabilidade do material.</p>
<p>Essa mesma espessura é o que faz seu visual chamar pouca atenção - muito diferente da maioria dos <em>headsets gamers</em> - e ser extremamente leve! Característica fundamental para um bom conforto.</p>
<p>A haste tem níveis precisos de regulagem, com uma variação significativa de até 4cm em cada lado. E apesar do apoio à cabeça não contar com materiais macios, como espuma, a leveza do conjunto não incomoda a região durante uso prolongado.</p>
<p>Os alto-falantes são levemente inclináveis para um melhor encaixe às orelhas e revestidos por uma espuma simples, que apesar de fina, é bastante confortável. Além disso, são removíveis permitindo sua substituição. No entanto, a embalagem original não conta com espumas extras.</p>
<p>Falando em embalagem, esse tipo de equipamento por ser destinado principalmente ao uso corporativo, é distribuído em caixas de papelão cru e um plástico simples envolvendo os itens: <em>headset</em>, guia rápido e instruções de segurança. Mesmo formato utilizado em modelos concorrentes como <strong>Plantronics</strong> e <strong>Jabra</strong>.</p>
<p><img src="/assets/imgs/review-headset-sennheiser/headset-sennheiser-sc60-6.jpg" alt="Mão segurando a embalagem do Headset Sennheiser: um plástico simples envolvendo todos os itens e a frente, um adesivo branco com escritos simples, em preto, com características do produto" class="img-fluid rounded" /></p>
<p>O <em>headset</em> pode ser utilizado de ambos os lados uma vez que o microfone é rotacionável, inclusive, não há marcação indicativa entre ‘direito’ ou ‘esquerdo’ nos falantes (ainda que a posição original seja utilizar o microfone à esquerda).</p>
<h3 id="conectividade-e-controles">Conectividade e controles</h3>
<p>O cabo conta com 2,1 metros de extensão e sua conexão é feita através de <strong>USB <em>Plug and Play</em></strong>. Como o próprio nome diz, é plugar e usar, simples assim! (rs)</p>
<p><img src="/assets/imgs/review-headset-sennheiser/headset-sennheiser-sc60-7.jpg" alt="Headset apoiado sobre uma mesa de madeira, mostrando com bom zoom detalhes do controle e cabo USB" class="img-fluid rounded" /></p>
<p>O controle de chamadas, integrado ao cabo, conta com <strong>4 botões pré-configurados</strong>:(1) atender/desligar chamada, (2) aumentar volume, (3) abaixar volume, (4) ativar/desativar mudo. Há também <strong>2 leds indicativos</strong> nos botões das extremidades, sendo: (1) verde constante, indicando chamada ativa e (2) vermelho intermitente, indicando microfone mudo.</p>
<p>Vale destacar que o <em>headset</em> funciona normalmente como qualquer tradicional fone com microfone, podendo ser utilizado em todas ocasiões. No entanto, os comandos de chamadas como atender e desligar funcionarão especialmente em plataformas de comunicação unificada, uma espécie de protocolo utilizado pelas principais aplicações como Teams, Skype, Zoom, Webex entre outros. Obs: os recursos (mais convencionais) de aumentar e abaixar volume, bem como ativar e desativar mudo, interagem diretamente com o próprio Sistema Operacional.</p>
<p><img src="/assets/imgs/review-headset-sennheiser/headset-sennheiser-sc60-5.jpg" alt="Close em mão segurando o controle, mostrando os leads indicativos de chamada (verde) e mudo (vermelho) ligados" class="img-fluid rounded" /></p>
<p>Essa última inclusive (ativar/desativar mudo), a quem participa de muitas chamadas, sabe o quanto é irritante ter de acessar a aplicação entre as diversas abertas, encontrar a opção e só então ativar/desativar o mudo. Executar essa mesma ação ao simples clique de um botão físico é simplesmente libertador (e eficiente)!</p>
<p>O controle bem como seus botões são bem construídos, trazendo segurança durante o uso e demonstrando boa durabilidade.</p>
<h3 id="qualidade-do-som-e-microfone-experiência">Qualidade do som e microfone (experiência)</h3>
<p><img src="/assets/imgs/review-headset-sennheiser/headset-sennheiser-sc60-8.jpg" alt="Close nos detalhes da construção do falante, segurado por uma mão e fundo branco" class="img-fluid rounded" /></p>
<p>Não sou especialista em áudio e, portanto, as considerações abaixo se resumem a experiências pessoais levantadas durante o uso do <em>headset</em>.</p>
<p>É notável o cuidado na equalização dos falantes com agudos e médios bem equilibrados, e graves leves, tornando os diálogos muito prazerosos, com falas bastante nítidas. Ouvir uma boa música também é perfeitamente aceitável. Claro que se comparado à fones mais robustos (voltados para músicas), sentirá a falta de graves mais presentes.</p>
<p>Outro ponto apreciável é o bom “volume” que os falantes entregam (para referência, utilizo normalmente abaixo de 50% do total). Essa característica supre a deficiência no isolamento de sons externos, uma vez que sua estrutura é desenhada para não encobrir (abafar) a orelha.</p>
<p>Ainda sobre os falantes, o <em>headset</em> conta com a tecnologia <strong>ActiveGard</strong> que garante proteção contra lesões acústicas causadas por explosões repentinas de som. Esse é o tipo de característica que nem percebemos na maioria do tempo, mas ficamos felizes ao saber que estamos protegidos (rs).</p>
<p>O microfone (para mim, o ponto alto do <em>headset</em>) conta com uma excelente tecnologia de cancelamento de ruídos, filtrando boa parte dos indesejáveis sons de fundo. Característica importantíssima para a boa qualidade das chamadas.</p>
<p><img src="/assets/imgs/review-headset-sennheiser/headset-sennheiser-sc60-3.jpg" alt="Headset apoiado sobre mesa de madeira, mostrando os detalhes do falante e sua espuma, bem como o microfone levemente erguido" class="img-fluid rounded" /></p>
<p>Vale dizer também que a captação é muito bem direcionada, basta distanciar o microfone da boca para que a voz fique distante (bem ao fundo) ou até mesmo inaudível.</p>
<p>Outra característica interessante é que ele oferece um leve retorno falantes enquanto se utiliza o microfone, isto é, você passa a ouvir sua voz enquanto fala. O retorno é feito numa proporção confortável e lhe ajuda a manter um volume saudável na fala durante o uso - e lhe ajuda a sentir o sopro no microfone caso o mesmo esteja bem em frente à boca ou nariz. Pode acontecer também de ao falar e não ouvir seu retorno, perceber que o mudo está ativado - acontece nas melhores famílias (rs).</p>
<p>Na descrição oficial consta também o recurso ‘gerenciamento de ecos’, que apesar de ser uma característica difícil de se perceber, objetiva na redução de ecos quando o microfone está próximo de uma superfície reflexiva (que não absorva bem o som), como uma parede por exemplo.</p>
<h3 id="conclusão">Conclusão</h3>
<p>Após 1 mês de uso diário e prolongado (podendo dizer até excessivo, rs) com média de 8hs/dia, considero o <em>headset</em> uma excelente aquisição.</p>
<p>As chamadas se tornaram mais imersivas em razão da qualidade e bom volume do som, além de todos ouvirem minhas falas de forma nítida e sem incômodos (a não ser da minha própria voz, rs). Afinal, os ruídos externos passam praticamente despercebidos, me sentindo inclusive bastante confortável agora em dividir salas durante as chamadas e dinâmicas.</p>
<p>Obs: quanto à nitidez da voz, cheguei a receber voluntariamente feedbacks positivos.</p>
<p>Vale dizer que ao final das primeiras semanas de uso prolongado, senti incômodos na cartilagem da orelha, no entanto, não chegaram a incomodar ao nível de parar de usá-lo. Leves ajustes de reposicionamento foram suficientes.</p>
<p>A <strong>Sennheiser</strong> oferece também uma garantia de 2 anos em todos os fones de ouvido, o que traz mais tranquilidade na compra visto o preço.</p>
<p>Para quem exige uma solução de comunicação robusta e profissional, o <strong>Headset Sennheiser SC-60</strong> vale a pena!</p>
<ul>
<li>Especificações Técnicas: <a href="https://www.eposaudio.com/en/us/enterprise/products/sc-60-usb-ml-headset-1000551#id-66u-tech-specs-36138_6" target="_blank" rel="noopener">Site Oficial</a>.</li>
<li>Comprar na Amazon: <a href="https://www.amazon.com.br/Sennheiser-USB-504547-microfone-cancelamento/dp/B00E67UV9S?&linkCode=ll1&tag=thiagonasc-20&linkId=9141f8efdd30bc98e97fbd6101663573&language=pt_BR&ref_=as_li_ss_tl" target="_blank" rel="noopener">Headset Sennheiser Impact SC-60</a></li>
</ul>
<div class="my-5">
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=BR&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=thiagonasc-20&language=pt_BR&marketplace=amazon&region=BR&placement=B00E67UV9S&asins=B00E67UV9S&linkId=4c12887ddd7d304581a728517f80b484&show_border=true&link_opens_in_new_window=true"></iframe> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=BR&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=thiagonasc-20&language=pt_BR&marketplace=amazon&region=BR&placement=B01K6TU90U&asins=B01K6TU90U&linkId=2034d0a90badea4c2bcee172558ea928&show_border=true&link_opens_in_new_window=true"></iframe> <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//ws-na.amazon-adsystem.com/widgets/q?ServiceVersion=20070822&OneJS=1&Operation=GetAdHtml&MarketPlace=BR&source=ss&ref=as_ss_li_til&ad_type=product_link&tracking_id=thiagonasc-20&language=pt_BR&marketplace=amazon&region=BR&placement=B0746QVT69&asins=B0746QVT69&linkId=167c81d33eb7d6802b12905f0e6f5273&show_border=true&link_opens_in_new_window=true"></iframe>
</div>
<p class="my-5 small text-muted"><strong>Transparência:</strong> este <em>review</em> não é patrocinado por qualquer empresa ou marca. Foi criado com o objetivo de compartilhar a experiência de uso. O site apenas receberá uma comissão caso você compre através dos links disponíveis e você não pagará nada a mais por isso.</p>Thiago NascimentoFone de ouvido com microfone para quem exige uma solução de comunicação robusta e profissional: áudio de alta definição, microfone com cancelamento de ruídos e conector USB.O botão STOP sumiu e você provavelmente nem sentiu falta2021-04-28T20:20:00-03:002021-04-28T20:20:00-03:00http://www.thiagonasc.com/usabilidade/botao-stop-sumiu<h4 id="um-dos-botões-mais-comuns-e-utilizados-em-interfaces-no-passado-se-tornou-um-item-extremamente-raro-difícil-de-ser-encontrado">Um dos botões mais comuns e utilizados em interfaces no passado se tornou um item extremamente raro, difícil de ser encontrado.</h4>
<p><img src="/assets/imgs/botao-stop/botoes-players.jpg" alt="Conjunto de 5 ícones comumente utilizados em players de música e vídeo: voltar, pausar, stop, play e avançar." class="img-fluid rounded" /></p>
<p>A maioria de nós lembraremos que praticamente todos os controles remotos físicos contavam minimamente com os botões <strong>Play</strong> (reproduzir) e <strong>Stop</strong> (parar).</p>
<p>Ainda neste passado não tão distante <em>(rs)</em>, com dispositivos mais analógicos, como as vitrolas que tocavam discos de vinil ou videoscassetes que rodavam fitas VHS, o botão <strong>STOP</strong> era imensamente útil e necessário: era a forma de se desconectar mecanicamente da mídia.</p>
<p>Esse mesmo recurso fora então naturalmente levado para as interfaces digitais, basta procurar um <em>printscreen</em> antigo de qualquer <em>player</em> e o encontrará.</p>
<p><img src="/assets/imgs/botao-stop/screenshot-player-winamp.jpg" alt="Conjunto de 5 ícones comumente utilizados em players de música e vídeo: voltar, pausar, stop, play e avançar." class="img-fluid rounded" />
<em><small>Acima vemos o saudoso <strong>Winamp</strong> e seu botão <strong>stop</strong>, um dos players de música mais populares do passado, lançado em 1997. (Imagem: Softonic)</small></em></p>
<p>No entanto, na era das mídias digitais e <em>streamings</em>, a mecânica do <strong>STOP</strong> simplesmente passou a não ter mais grande utilidade. E digo grande, pois sua função em si não acabou mas foi inteligentemente substituída.</p>
<p>Acredito que neste ponto você deva se perguntar, assim como me perguntei: mas afinal, como eu paro uma reprodução?</p>
<p>O mais curioso é respoder que não mais através do botão <strong>STOP</strong>!</p>
<p><strong>Faça o teste você mesmo:</strong> abra seu player de música e procure pelo botão!</p>
<p>Em uma rápida conferência, podemos constatar que as principais plataformas de música (Spotify, Deezer, YouTube Music, Amazon Music, Apple Music) e vídeo (Netflix, YouTube, Amazon Prime, Disney+, Apple TV+, HBO GO) simplesmente não contam com o botão.</p>
<p><img src="/assets/imgs/botao-stop/interfaces-players.jpg" alt="Conjunto de 5 ícones comumente utilizados em players de música e vídeo: voltar, pausar, stop, play e avançar." class="img-fluid rounded" /></p>
<p>A evolução e otimização das interfaces, indo muito além da simplificação, passou a substituir o botão <strong>STOP</strong> pelo simples <strong>voltar</strong> ou mesmo <strong>fechar</strong>. É assim que usamos!</p>
<p>O mais curioso é que muitos de nós nem percebemos essa alteração! Fantástico, não?</p>
<p>Se pararmos para pensar… daqui alguns anos, é provável que muitos nem mais reconhecerão o ícone facilmente.</p>
<p>O que me lembra de uma <a href="https://www.cnet.com/news/surprise-kids-dont-know-what-the-save-icon-stands-for/" target="_blank" rel="noopener">pesquisa interessante</a> onde um disquete físico foi apresentado a crianças e ao serem questionadas, algumas não conseguiram identificar o objeto e outras o identificaram como o ícone do “botão salvar”.</p>
<p>E você? Já parou para pensar que alguns botões de suas interfaces poderiam ser removidas sem ninguém sentir falta? Já fez este exercício? Conta pra gente!</p>
<h3 id="links-complementares">Links complementares:</h3>
<ul>
<li><a href="https://www.cnet.com/news/surprise-kids-dont-know-what-the-save-icon-stands-for/" target="_blank" rel="noopener">Artigo: Surprise! Kids don’t know what the save icon stands for (CNET)</a></li>
<li><a href="https://www.youtube.com/watch?v=PF7EpEnglgk" target="_blank" rel="noopener">Vídeo: Kids react to old computer (YouTube)</a></li>
<li><a href="https://brasil.uxdesign.cc/ainda-faz-sentido-usar-o-disquete-como-%C3%ADcone-de-salvar-3bd2a735025e" target="_blank" rel="noopener">Artigo: Ainda faz sentido usar o disquete como ícone de “salvar”? (UX Collective)</a></li>
</ul>Thiago NascimentoUm dos botões mais comuns e utilizados em interfaces no passado se tornou um item extremamente raro, difícil de ser encontrado.