Blog - Princi Web

Vaga Wordpress

Olar!

Estamos em busca de um novo Desenvolvedor de sites em Wordpress com experiência, para período integral ou parcial.
Atualmente, em nossos novos projetos, utilizamos HTML5, CSS3, JavaScript, Stylus/Sass e WordPress, porém também possuímos projetos legados com códigos escritos com outras tecnologias (ASP, ASP.NET).
Ah, se você tiver um pézinho no design já é mais três pontos. ;)

Veja abaixo o perfil que estamos procurando para a vaga:

Obrigatório:

Morar em Campinas;
Wordpress;
Bootstrap;
HTML5 e CSS3;
JavaScript/jQuery;
Já ter tido contato com Git;
Encarar bem serviços de manutenção;

Diferenciais:

Ter um pézinho no design já é mais três pontos;
Adobe Photoshop;
Task Runners (Gulp/Grunt);
Conhecimento técnicas de acessibilidade e SEO;
Conhecimento básico de MySql;

E aí, curtiu? Então envie um e-mail com cúrriculo ou Linkedin para trabalhe@princiweb.com.br com título/assunto WordPress. Ah, se tiver um portfólio ou um perfil do GitHub, envia pra gente avaliar. ;)

Código é poesia

Código é a linguagem utilizada para se comunicar com computadores, uma linguagem que tem suas próprias regras e significados. Poesia é uma forma de arte literária na qual a linguagem é usada por suas qualidades estéticas e evocativas, contém várias interpretações e toca cada leitor de maneira diferente .

"Código é poesia.", esta frase tem sido o slogan do WordPress desde sempre e ele, de fato, passa essa ideia de que aquele seu projeto tão bonito e bem feito é, na verdade, uma série de códigos harmoniosamente ligados de uma forma até poética.

Contudo, como em uma boa poesia, há mais de uma forma de ver as coisas e essa primeira, apesar de bem bonita e com significado forte, traz consigo um problema, pode desencorajar novos aventureiros a mergulharem de cabeça e começarem a publicar seus projetos. Pessoas que, muitas vezes, ainda não tem um amplo conhecimento de plataforma ou linguagem e acham que ainda não são boas o suficiente para publicar algo.

Aqui na PrinciWeb nós temos a convicção que código é para todos e que, assim como escritores de literatura ou poetas, pessoas que codam também têm seu próprio estilo que incluem estratégias para otimizar e organizar código, facilitando sua compreensão para computadores e pessoas.

"Código é poesia." fala mais sobre uma mentalidade de sarau que uma galeria de arte. Seu código deve ser poesia no sentido de que é melhor um código feito que um código idealizado que nunca existiu, nunca foi visto, nunca foi rodado e muito menos corrigido. Isso não quer dizer que você deve sair fazendo qualquer coisa só por entregar, pelo contrário, o fazer vai te dar mais energia de correr atrás, vai te dar novas oportunidades de criar coisas novas e melhorar o que, certa vez, já foi o seu melhor.

Essa é a beleza do WordPress, ter barreiras de entrada baixíssimas que tornam a plataforma extremamente convidativa para iniciantes e, ao mesmo tempo, poderoso o bastante para dominar o mercado e ter mais metade da web na bagagem.

Há diversos outros projetos que abordam o trabalho com código como uma linguagem mais humana que de máquina, como o trabalho maravilhoso da Diana Kimball no “Code {Poems}”, eventos como o Code Poetry Slam de Stanford, mentalidades de Idiomatic CSS e o artigo Poetics of Coding do Smashing Magazine.

Então fica aqui o incentivo para quem está começando agora, vá e faça! Faça, erre, aprenda, melhore e faça novamente. Para aqueles que já fazem com WordPress há algum tempo, entre em contato conosco que sempre temos novas oportunidades e seria ótimo conhecer mais de vocês.

Como ter HTTPS de graça pelo Cloudflare no Wordpress

Você sabia que usar HTTPS em seu site se tornou um fator de ranqueamento para o Google, desde 2014? Antigamente habilitar SSL nos sites era complicado e caro e por isso só víamos o HTTPS aparecer em grandes sites, mas hoje com a facilidade do cloudflare você não tem desculpas para não usar.

Por que usar o HTTPS?

Além de melhorar o SEO, o HTTPS ajuda a manter o seu site e os usuários dele seguros. Um site sem SSL pode ter as suas informações alteradas (anúncios injetados, links maliciosos adicionados), pois os pacotes que trafegam na rede estão abertos, permitindo que um usuário com conhecimento possa interceptar os dados e assim modificá-los.

O SSL garante que os pacotes trafegados na rede fiquem criptografados, portanto é indispensável o seu uso em sites que lidam com informações sigilosas como senhas, contas e documentos, garantindo assim a privacidade dos seus usuários.

Se você tem uma loja virtual que não tem HTTPS eu só posso dizer que você esta se arriscando muito. Veja o que o Google Chrome diz no navegador sobre sites sem SSL:

Colocar SSL em um site Wordpress é uma das coisas mais simples que se pode fazer com a plataforma e você nem precisa ser desenvolvedor. :)

Siga o tutorial abaixo:

No CloudFlare

1) Crie uma conta no CloudFlare clicando aqui

2) Digite o domínio do seu site e clique em Scan DNS Records.

3) Aguarde o carregamento e clique em Continue

Na próxima página será possível fazer uma série de alterações em seu DNS, se você não precisar ou não souber o que é tudo isso, apenas clique em continue de novo.

4) Escolha a opção Free Website

5) Altere os DNS do seu site para os que o CloudFlare fornecer (isso não deixará seu site offline)

Aguarde o status mudar para ativo, isso pode levar até 72 horas.

No seu painel do wordpress

1) Baixe e ative os seguintes plugins: CloudFlare e CloudFlare Flexible SSL

O Plugin CloudFlare fará a integração entre o seu Wordpress e o site do CloudFlare, já o plugin CloudFlare Flexible SSL evitará o problema de redirecionamentos infinitos, loops que acabam deixando o site fora do ar.

2) Vá nas configurações do CloudFlare e digite seus dados de acesso. (Sua API KEY estará em seu perfil no CloudFlare.)

3) Acesse seu site usando agora o https, por exemplo: https://seusite.com se tudo estiver configurado, ele ira carregar já com o certificado.

4) Chegou a hora de mudar sua URL para usar o novo protocolo: Va em Configurações > Geral e mude os 2 endereços do site para o https://

Faça um review nos links do seu site e pronto você já esta usando https!

Valeu :)

[Encerrada] Vaga de Desenvolvedor Front-End e Wordpress

Eai, pessoal! Tudo bem?

Estamos em busca de um novo desenvolvedor front-end com foco e experiência no desenvolvimento de sites. É muito importante que você manje de sites responsivos e também de Wordpress. Ter um pézinho no design já é mais três pontos. ;)
Atualmente em nossos novos projetos, utilizamos HTML5, CSS3, JavaScript, Stylus/Sass e WordPress, porém também possuímos projetos legados com códigos escritos com outras tecnologias (ASP, ASP.NET). Mas isso não quer dizer que não estamos abertos a novas tecnologias! Muito pelo contrário, temos abertura para desenvolvimento de projetos experimentais para aprender novas tecnologias e recursos. =)

Prezamos por códigos desenvolvidos pensando em questões de semântica de acordo com os padrões recomendados pela W3C.

Veja abaixo o perfil que estamos procurando para a vaga:

Obrigatório:

Boa experiência em HTML5 e CSS3;
Bootstrap;
Wordpress Raiz (Não vem só com edição de teminha, não);
JavaScript/jQuery;
Já ter tido contato com Git;
Task Runners (Gulp/Grunt);
Adobe Photoshop;
Encarar bem serviços de manutenção (tem bastante);
Pique para aprender novas tecnologias de desenvolvimento web;
Hábito de leitura e escrita (você irá escrever em nosso Blog);
Desenvoltura para trabalho em equipe;
Ser bastante organizado e responsável.

Diferenciais:

Ter um pézinho no design já é mais três pontos;
Saber o básico de JavaScript puro;
Usar flexbox nos projetos do dia-a-dia;
Conhecimento técnicas de acessibilidade e SEO;
Conhecimento básico de MySql;
Já ter ouvido falar sobre metodologias ágeis;

Benefícios:

Ida a eventos da área;
Material (livros e cursos) para estudo;
Tempo livre para projetos experimentais.

Informações adicionais:

Salário + Transporte + Alimentação.

Salário a combinar, de acordo com a experiência e nível de conhecimento do candidato.

E aí, curtiu? Então envie um e-mail para trabalhe@princiweb.com.br com título/assunto Vaga – Front-End. Ah, de preferência, envie junto os seus últimos trabalhos ou o perfil do GitHub para avaliarmos o seu código!

Sketch missing features overview from a designer perspective

We love Sketch. I get it. I'm loving it too. This tool rocks
I know, nothing is always perfect, we are humans, never satisfied, but it's ok. Truth is, although we love Sketch, there are a few things missing on the tool right now and I'm sure you might already felt that sometimes. I think we would love it even more if they were there already.

For sketch to get there I think is just a matter of time, well, let's help them by sharing the most wanted new features we would love it to have.

Here's just my humble view of what is missing in sketch right now:

#1?—?Symbols as mask for other symbols

Have you ever wondered why this isn't possible? Me too. How about we could do that? Imagine the possibilities. Crazy stuff could be done. Imagine the coolness of being able to mask a button shape with a custom color symbol you can change and then get different styles of this button with the same color that is automatically updated when you change it just in one click? Please Sketch do it soon!

Without a symbol mask you need to change your button base format everywhere. That's not cool!

An example of how a symbol mask would help if it was possible. You could change the base shape of a button everywhere in seconds.

#2- Independent Text Style Settings

You create a text style and share it across your layouts, but somewhere a H1 Style is aligned left and elsewhere the same H1 needs to be aligned centered. When you do it sketch will ask you to update your text style, but then, you will lose your left alignment, but you don't want it and you don't want to create two text styles for the same H1. To solve that issue you will need to create a text style for H1 Left, H1 Centered and so on…
Why can't we just create a new text style and check/select what are the options we want to include to that text style. Ex: If I just want it to give me the font style and color it's fine, just check both. Or just the font style not the color or the font the color and the alignment, etc… Just check what you will need to add to that text style and the rest will get the style of what is already in the element by default. Something like CSS ideia of sharing styles?

Endless fight!

Have you ever thought about it? Share your ideias!

#3- Sync symbol elements

Imagine you could sync some of the elements inside of a symbol. Right now if you have a symbol with a light color and you need to add it on a light background you need to have two symbols with different colors to be able to change it according to your needs (black/white), but let's say you have two identical symbols just to cover black and white usages but you need to change something inside them, you will need to do it twice or even more times depending on how many variations you have created.
What if you could sync similar symbol features as, position, colors, etc, and when something happens in one symbol the others get the same changes applied too? Even if you need variations they are like part of the same base, so they will have their own particularities but sharing the same base ideia where one is identical to others and each could have it's own styles on top of that, and you could check what is global/base and what is just for that particular symbol. Again, some sort of CSS mindset for symbols. Got it?

Just a quick example of how this feature could be useful.

#4- Add symbols as fill of a text style

Crazy? Maybe, but might be useful. Instead of setting colors for each text style you have if you had a symbol with a color that is your primary as a fill color of all your similar text styles all you needed to do is to change one symbol and everything would be updated. It's something similar to this idea of Francesco Bertocci but as a native sketch feature and not a hack: https://blog.prototypr.io/sketch-overriding-the-color-of-text-layers-in-symbols-69d54577158b — This is a cool hack though, unfortunately won't work with dark backgrounds.

These are the main stuff that I feel need in sketch right now, but of course you guys might have other ideas, why not sharing it so we can make Sketch better, maybe they can use our ideas as source of inspiration for next features!

Want to learn some cool sketch stuff?
Check Jon Moore posts and also Francesco Bertocci, Lloyd Humphreys, Anima App they talk about great sketch stuff. Totally recommended.
Check also this post https://medium.muz.li/10-annoying-things-in-sketch-and-how-to-solve-most-of-them-a175769277a4
They talk about some Sketch Issues and also how to solve them! Very cool!

What else is missing for you? Share your thoughts!

PS: I haven't tested new 4.3 version yet!

This post was written by myself also via Medium at prototypr.io, check here:
https://blog.prototypr.io/sketch-missing-features-overview-from-a-designer-perspective-de5b0cbb2da8

Como reduzir imagens em massa no Photoshop

Reduzir imagens no Photoshop é uma prática muito comum na internet, seja para criar um série de thumbs manualmente como para reduzir uma galeria de fotos de alta qualidade para os padrões web como citado no nosso artigo sobre “Boas práticas para otimização de conteúdo”.

Contudo, este pode ser um processo muito penoso se você dispõe de uma quantidade muito grande de imagens, podendo assim custar horas de trabalho para uma tarefa relativamente simples.

Por sorte, podemos contar com as famosas actions do Photoshop.Essas belezinhas juntamente com uma outra ferramenta nativa chamada ‘Batch’ nos possibilitam fazer isso de forma automática, reduzindo nossa carga de trabalho inútil e aumentando a produtividade.

Então vamos por a mão na massa!

Criando sua action de redimensionar imagem

O primeiro passo é criar a ação que será repetida por todas as imagens da sua pasta, para isso, verifique se a janela de actions já está aberta indo em Window > Actions ou simplesmente apertando Alt + F9.

Com o painel de actions aberto, já podemos criar nossa action apertando no botão nova action (ícone igual ao de nova layer) e damos um nome para action. Ao apertar enter ou Record, as próximas ações serão gravadas para serem reproduzidas novamente depois.

Agora precisamos fazer todo o processo que precisa ser feito com as outras imagens, então abra qualquer imagem da sua pasta e faça os redimensionamentos desejados, ou o que quer que seja que você precise que seja feito com todas as outras imagens.

Aqui, apenas para exemplo, vou redimensionar todas as imagens da minha pasta para ficarem com 800px de largura, então farei o seguinte processo.

Abrir uma imagem da pasta;
Reduzir o tamanho da imagem em Image > Image Size e definir Resolution para 72 e Width para 800px;
Salvar para web clicando em File > Save for Web e defindo o tipo de arquivo como jpg de qualidade 70;
Escolher a pasta de destino, seja e ela a mesma pasta, para substituir os arquivos originais ou em uma pasta nova como, por exemplo, thumbs;
Fechar a imagem sem salvar alterações.

Pronto, agora podemos parar de gravar clicando no botão de stop que vai estar bem ao lado do círculo vermelho indicando que está gravando. Com isso temos nossa action pronta para ser reproduzida.

Configurando o Batch

Aqui que entra o pulo do gato, o batch! Para fazermos aquele action ser repetido por todas as imagens da nossa pasta, precisamos fazer os seguintes passos.

Vá em File > Automate > Batch, aqui aparecerá um painel onde vamos poder configurar nossa ferramenta de repetição. Vou passar brevemente sobre os itens que vão ser importante para o nosso caso de redimensionamento de imagem.

Play

Set: Nome dos grupos de action disponíveis

Action: Nome da action que deseja que rode nas imagens da pasta

Source: Pasta de origem das imagens

O resto das configurações pode deixar tudo como padrão que para o nosso objetivo agora, já resolve.

Pronto, agora é só dar um okay e deixar o Photoshop fazer todo o trabalho pesado para você.

Ficou com alguma dúvida? Deixe aqui nos comentários ;)

Food Trucks Campinas será lançado em breve! Aguarde.

Food Trucks Campinas está chegando!

Publicamos aqui no blog há alguns dias sobre nosso novo projeto, o Food Trucks Campinas.

Nesses últimos meses estivemos envolvidos no processo de construção desta ferramenta que tem como proposta ajudar você a encontrar Food Trucks em Campinas, estivemos trabalhando na concepção desta ideia e investindo nosso tempo e esforços para construir uma ferramenta muito bacana que vai tornar isso possível.

Estamos na reta final do estágio de desenvolvimento da nossa primeira versão e muito contentes por estarmos chegando a fase de lançamento.

Durante este percurso nebuloso de ideia, validação de proposta de valor e mão na massa no código houveram vários ajustes e discussões para tentar chegar no resultado ideal. Apesar de trabalhar bastante nós sabemos que ainda falta muito pela frente e o lançamento é apenas o começo, como toda startup sempre existe algo a ser melhorado a todo momento e o que queremos e buscamos é uma constante evolução, por isso não se preocupe, nós estamos apenas começando e queremos e contamos com sua ajuda para nos dar dicas e sugestões para que possamos aprimorar e melhorar sempre.

A versão beta do Food Trucks Campinas estará disponível nos próximos dias, fique ligado e acompanhe no site e nas redes sociais.

Esperamos trazer para nossos usuários uma nova experiência, poder encontrar Food Trucks em Campinas direto no mapa, em tempo real. Já pensou poder ver onde está um Food Truck e ir até lá para experimentar?
Nós estamos muito anciosos para que isso se torne uma realidade em Campinas.

Junte-se a nós. Cadastre-se em no site e seja avisado em poucos dias sobre nosso lançamento oficial!

Aproveite e siga-nos nas nossas redes sociais.

Boas práticas para otimização de conteúdo

Uma parte muito importante da experiência do usuário é o tempo de carregamento da página. Mas além de todo o trabalho feito no código para diminuir ao máximo esse tempo, é de muita importância que o conteúdo seja otimizado também, isto é, sem imagens e arquivos pesados. Vamos passar aqui por alguns itens que costumam ser um problema e explicaremos corrigí-los.

Imagens

As imagens são partes cruciais de um site mas muitas vezes não nos atentamos aos detalhes de suas propriedades. São três pontos muito importantes que devem ser levados em conta quando se trabalha com imagem para web, que são:

Dimensão
Peso
Método de cores

Dimensão

Todo conteúdo tem uma razão e isso se torna ainda mais evidente se tratando de imagens, porque ela pode acabar sendo relativamente bem mais pesada que um bloco de texto.

Tendo em mente o motivo da imagem estar ali, podemos ajustar melhor o tamanho à sua finalidade, como por exemplo, uma miniatura de produto não precisa ter mais de 200 pixels de largura na maior parte dos projetos.

Logicamente, uma imagem gigante de 1200 pixels que mostre todos os mínimos detalhes do seu produto vai ser absurdamente mais pesada que uma miniatura, então podemos otimizar o carregamento da página servindo imagens do tamanho necessário apenas para cumprir sua função na página.

Como redimensionar sua imagem

Atualmente qualquer software de manipulação de imagem pode fazer de forma simples esse redimensionamento. Os dois programas mais conhecidos para se trabalhar com imagens são: Photoshop e GIMP (Gratuito). Mas caso ache que para sua necessidade não vale a pena instalar um software específico, você pode usar algumas soluções online. Um ótimo exemplo de solução assim é o Bulk Resize Photos (http://bulkresizephotos.com), experimente a ferramenta e comece já a usar imagens mais otimizadas no seu site.

Peso

Usar imagens no tamanho adequado para cada função já é um ótimo passo para otimização, mas por que parar por aí se podemos melhorar ainda mais? Aqui temos alguns pontos bastante críticos como densidade, meta dados e compressão. Vamos abordar cada um desses pontos com mais detalhes.

Densidade

Algumas imagens, principalmente as de qualidade profissional, costumam ter uma densidade de pontos (dts/inch) bem alta como 300 dpi, enquanto para web costumamos trabalhar com um padrão de 72 dpi.

Novamente o uso de um software de manipulação de imagem se faz necessário nesses casos. Mas também temos ferramentas online para esse tipo de otimização: http://convert.town/image-dpi

Meta dados

As imagens costumam ser recheadas de meta dados de localização, informação criação e diversos outros atributos totalmente irrelevantes para o uso que faremos delas. Ou seja, por padrão teremos imagens mais pesadas sem nenhum motivo e por isso é importante comprimí-las para remover tudo que não é interessante para o nosso uso e é para isso usamos a compressão de imagens.

Compressão

A compressão, juntamente com a redução de densidade são os pontos principais para otimização de imagens para web. Fazer esse processo pode reduzir o tamanho da sua imagem em até 90% em alguns casos.

Os programas mencionados acima têm a função de exportar para web que já vai fazer essa otimização para você, porém, no quesito compressão eu tenho preferência por serviços web como http://compressor.io, https://tinypng.com, https://kraken.io/web-interface.

Método de cores

Esse é um ponto que muitas vezes acaba passando batido por muita gente, mas é o que tem maiores chances de estragar a experiência do usuário. Os dois padrões mais usados para imagens são RGB e CMYK. Sendo RGB para uso de web e CMYK para impressos.

Esse ponto se torna crítico quando certos browsers renderizam as cores CMYK de forma errada, transformando assim, um azul claro e tranquilo em tons berrantes de ciano. Novamente, além dos manipuladores, temos soluções online de conversão de cores como: http://www.cmyk2rgb.com.

Arquivos pesados

Outro problema recorrente é a distribuição de arquivos muito pesados, o que costuma acontecer na maioria das vezes com pdfs mas pode acontecer com qualquer tipo de arquivo. O problema do pdf é que na maioria das vezes eles são feitos para impressão e por isso estão costumam estar em CMYK e com uma densidade muito grande (300 dpi por exemplo).

Otimizando PDF

Podemos resolver esse problema da mesma forma que resolvemos o problema das imagens, com compressão. Um ótimo serviço para isso é o I Love PDF (http://www.ilovepdf.com/compress_pdf).

Otimizando arquivos gerais

Caso o arquivo em questão não seja um pdf ou até mesmo caso a compressão dele não tenha sido satisfatória, vale muito a pena colocar esse arquivo em serviços de terceiros (sempre lembrando de manter um backup de tudo fora do servidor). Algumas opções para esse tipo de “hospedagem remota” são: Dropbox, Google Drive, One Drive, Mega.

Considerações finais

Já é mais do que certo que um dos grandes vilões da web mobile são as imagens, que acabam sendo pensadas apenas para desktop, onde geralmente a conexão é fixa e acabam esquecendo de quem acessa pelo celular usando 3G, por exemplo.

Fazendo essas otimizações, tenho certeza que o tamanho seu site vai diminuir bastante, melhorando a experiência de seus usuários e facilitando também o backup mais para frente.

Novo projeto: Encontre um Food Truck em Campinas

Faz parte de nossa cultura criarmos projetos e ferramentas que a gente acredita, onde podemos arriscar novas tecnologias, ou mesmo ideias que podem gerar novas fontes de receita.

Nosso time gosta muito de comer e experimentar rangos diferentes e sempre é difícil de encontrar opções de Food Trucks em Campinas. Pensando nisso, estamos construindo um site (foodtruckscampinas.com.br) para mapear a localização dos food trucks na cidade em tempo real. Inicialmente, o food truck poderá divulgar sua agenda e cardápio e nós clientes poderemos escolher a opção que mais nos interessa e mais próxima de nós.

Enquanto o projeto não é lançado, acesse nossa landing page: Encontre Food Trucks em Campinas.

Como uma Avaliação Heurística ajuda a melhorar a usabilidade de um site

Fala galera!

Recentemente, chegou uma requisição em que eu deveria propor melhorias na experiência da busca de um site e-commerce. Quando me pediram para realizar essa tarefa, eu estava distante do projeto desse site e a primeira pergunta que eu fiz foi “como vou propor melhorias para um site que eu não tive tanto contato, muito menos com o usuário?”

A resposta mais rápida que me veio a mente foi “vou acessar o site e navegar” para encontrar problemas enquanto simulo uma busca de um produto no site e, nesse momento, percebi que eu estava um pouco perdido durante a análise da busca. Decidi, então, aplicar uma avaliação heurística com base nos 10 itens para a avaliação da usabilidade de um site que Nielsen listou com o intuito de evitar os erros mais comuns.

A avaliação heurística consiste em examinar uma aplicação com base em um conjunto de regras ou boas práticas descritas por um profissional de referência e reconhecidas no mercado. Além de auxiliar a reconhecer pontos de melhorias, o processo, de forma colaborativa, naturalmente conduz a equipe envolvida a ter insights de melhorias de usabilidade. Eu tenho o costume de utilizar as Heurísticas de Nielsen. Outros profissionais criaram suas heurísticas, você pode procurar e escolher qual achar melhor.

Processo de uma avaliação Heurística

Utilizei o livro O guia para projetar UX como referência para realizar as etapas da avaliação heurística. Os autores do livro, Russ Unger e Carolyn Chandler, dividem o processo de avaliação em 4 partes, e foi exatamente isso que fiz:

1. Reúna o conhecimento sobre a origem do produto, do projeto e do usuário: chamei a equipe do projeto e perguntei quando, quem e por que foi desenvolvido esse site. Pedi para equipe me apresentar as personas do projeto, para conhecer os usuários e compreender quais são suas dores e quais necessidades o site precisa atender.

2. Escolha a heurística que será utilizada: como eu já disse, eu gosto das 10 heurísticas de Nielsen.

3. Passe por áreas de prioridade do site, identificando escrevendo observações das áreas em que a heurística é bem seguida ou esquecida: o foco da tarefa era a busca de um site e-commerce, portanto a avaliação e as observações foram voltadas apenas para a usabilidade do site ao buscar um produto. Como são 10 heurísticas, eu focava em uma enquanto buscava um produto, fazia as observações e passava para a próxima heurística. As observações eram feitas quando notava que em algum ponto do site uma heurística era esquecida.

Cada observação conteve as seguintes informações: uma observação geral com uma breve declaração resumindo a descoberta de uma heurística deixada de lado ou apenas o a heurística relacionada, uma breve descrição do contexto da observação e uma avaliação de impacto entre alta, média ou baixa.

Alta para problemas que farão com que muitos usuários fracassem em uma tarefa particular ou percam informações permanentemente.

Média quando podem causar frustrações e podem causar erros que são reversíveis.

Baixa para problemas menores que podem causar alguma confusão para os usuários, que geralmente não causa frustração.

Veja um exemplo de uma observação de impacto médio como ficou:

4. Apresente as descobertas para a equipe do projeto e para os stakeholders e explique cada observação: reuni novamente a equipe e apresentei todas as observações. Discutimos, analisamos o Analytics para validar possíveis problemas na navegação e planejamos testes A/B para propor a melhor solução.

Vantagens de se conduzir uma avaliação heurística

É uma técnica rápida e barata para obter um compreensão atual da qualidade da usabilidade da aplicação, lembrar dos concorrentes e de referências no mercado, pensar em soluções primárias para a lista de requisitos do projeto e planejar as ações futuras.

Espero ter ajudado com a minha experiência, estou disposto a ouvir qualquer, crítica e comentários.

Até a próxima :)