CSS: Position e Transform

CSS: Position e Transform

  21 de junho de 2018    henrique

---

Position

     Para tirar algum elemento do fluxo da página, utiliza-se o float ou position (absolute ou fixed). O position sempre será relativo à algum outro elemento acima dele que tenha o position configurado, caso nenhum tenha essa configuração será tomada como base a página. Para adicionar um position a um elemento sem alterar a posição, apenas para servir como base a outro é só utilizar a opção relative.

Transform

    O transform serve para alterar formas ou elementos, isso é bastante usado por exemplo para colocar textos flutuantes na página, textos rotacionados, caixas com formas diferenciadas e até objetos 3D.

Algumas opções para se utilizar com transform:

rotate(10deg)                  - serve para rotacionar o elemento.

scale(1.2)                         - serve para redimensionar o elemento 

skew(10deg)                   - serve para entortar (cisalhamento)

translate(10px, 20px)     - serve para alterar a posição

     Podemos utilizar quantas transformações forem necessárias, mas quando fazemos isso temos que prestar atenção na ordem entre elas, pois o navegador as aplica da direita para a esquerda.

transform : translate(10px, 20px) scale(1.2)

Primeiro vai alterar o tamanho e depois transladar a posição.

    Para aplicar transformações em elementos inline (texto por exemplo), devemos transformar eles em blocos, para isso podemos utilizar:

display: inline-block;

    Quando vamos utilizar a transformação de rotação o navegador tem por padrão tomar como base o centro do elemento, mas quando necessário podemos alterar essa definição para isso é só utilizar a opção de alterar a origem da transformação.

transform-origin: 0 0;

Este exemplo altera a base para o canto superior esquerdo.

Ler

CSS: O que são prefixos CSS

CSS: O que são prefixos CSS

  18 de junho de 2018    henrique

---

     O CSS está em constante evolução e novas opções são lançadas sejam novos recursos ou novos valores para comandos já existentes e nem sempre substituir uma propriedade antiga largamente utilizada é uma boa ideia. Por este motivo, quando surge uma nova funcionalidade no CSS os navegadores tem que se atualizar e implementá-la para próximas versões, porém, até que tais recursos estejam totalmente estáveis e prontos para a utilização, são utilizadas propriedades próprias de CSS, e essas propriedades são os prefixos.

    Abaixo segue a lista dos prefixos utilizados pelos browsers mais conhecidos:

-moz-     = Mozilla

-ms-       = Edge

-webkit- = Chrome, Opera, Safari

Um ressalve para o Opera que utilizava o prefixo -o-, mas após um tempo passou a utilizar também o -webkit-, assim como o Chrome e Safari

     O caniuse.com é um catálogo onde mostram as funcionalidades por navegador e versão, bastante interessante para ter certeza que deve ou não usar um prefixo.

     Também existem ferramentas e .js que fazem essas conversões e tratamentos de prefixos para você não precisar ficar colocando-os em todos os elementos CSS e bagunçando (aumentando) o código.

Ler

JavaScript: Eventos

JavaScript: Eventos

  14 de junho de 2018    henrique

---

    Para adicionar um evento a um elemento é só adicionar usando o addEventListener, ele necessita de dois parâmetros, o primeiro é qual evento que será disparado e o segundo a função que será executada.

td.addEventListener("click", mensagemErro);

function mensagemErro(){

    console.log("Mensagem de erro exibida");

}

     Ou podemos passar a function diretamente na adição do evento, sendo uma função anônima.

td.addEventListener("click", function(){

     console.log("Mensagem de erro exibida");

});

    Para não deixar que o browser execute os eventos padrão podemos especificar isso, é só dentro do evento que estamos criando adicionar o comando:

event.preventDefault();

e na function passar o event como parâmetro, assim:

function(event). Isso se faz bastante útil por exemplo quando estamos lidando com eventos de um botão de enviar do form, que por padrão seleciona os dados do form e envia a uma página e recarrega, pode ser que nem sempre queiramos ir à outra página, caso um erro ocorra por exemplo, os dados digitados no form seriam perdidos.

Ler

JavaScript: querySelectorAll e limitar casas decimais

JavaScript: querySelectorAll e limitar casas decimais

  11 de junho de 2018    henrique

---

    Para selecionar todos os valores de um elemento, como por exemplo para selecionar todas as linhas de uma tabela.

    E caso eu queira percorrer todos os elementos poderia utilizar um loop como o for.

var tabelaAlunos = document.querySelectorAll(".alunos");

for (var i = 0; i < tabelaAlunos.length; i++)

{

     var aluno = tabelaAlunos[i];

}

Limitar casas decimais

     Podemos também limitar as casas decimais de um número, para isso temos a opção de utilizar o toFixed. Como segue o exemplo, onde setamos para o número conter 3 casas decimais.

var numero = 10/3;

td.textContent = numero.toFixed(3);

Ler

JavaScript: Alterando estilos CSS

JavaScript: Alterando estilos CSS

  7 de junho de 2018    henrique

---

    Uma boa prática em JS é alterar estilos CSS através do próprio CSS, alterando as classes dos elementos HTML, mesmo sendo possível alterar os estilos dentro do JS. Para alterar as classes podemos utilizar o classList para acessar a lista de classes do elemento e o add para adicionar uma classe, vamos a um exemplo:

Quero alterar uma linha de uma tabela de alunos e quando o aluno estiver abaixo da média de notas seja adicionada a classe CSS aluno-abaixoMedia:

aluno.classList.add("aluno-abaixoMedia");

Essa classe aluno-abaixoMedia pode conter os códigos CSS que eu quiser e repare que o . da classe não é adicionado, apenas o nome.

    Mesmo assim caso você tenha a necessidade de alterar um estilo dentro do JS, você pode utilizar o style como seria seguindo o exemplo anterior, aluno.style.estiloQueEuQuiser. Vale ressaltar que caso a propriedade CSS que estou alterando contenha mais de uma palavra, no CSS é separada por - no JS deve ser escrita junta utilizando camel case, como text-align deve ser textAlign

Ler

Mongo: Atualização (Update)

Mongo: Atualização (Update)

  4 de junho de 2018    henrique

---

     Neste post estarei mostrando alguns comandos para atualização de documentos, o conhecido update do SQL.

     Para atualizar um documento podemos utilizar:

db.funcionarios.update({}, {}) onde o primeiro parâmetro é a condição do que queremos atualizar, seria o where do SQL e o segundo é o valor que será atualizado.

    Mas passando um update desta forma fazemos com que o mongo intenda que estamos atualizando um documento inteiro que é o padrão dele.

     Para atualizar o campo de um documento podemos utilizar:

db.funcionarios.update(

     { "departamento.nome" : "RH"},

     { $set : {"departamento.nome" : "Recursos humanos"}}

)

    Mas como disse anteriormente o padrão do mongo é atualizar um documento, mesmo que estejamos passando o set para atualizar apenas um campo e na condição passamos uma condição onde possam ter vários registros, ele só vai atualizar o primeiro que encontrar.

     Para atualizar todas as linhas encontradas temos que avisar ao mongo que é isso que desejamos, utilizando o multi:

db.funcionarios.update(

     { "departamento.nome" : "RH"},

     { $set : {"departamento.nome" : "Recursos humanos"}},

     { multi : true }

)

     Agora e quando queremos adicionar um valor a um documento? Imagine que estou em um banco de dados de controle de alunos e esses alunos podem ter várias notas, ou seja tenho um db.alunos contendo um .notas.

     Para adicionar um valor a um documento, temos uma opção que é o $push:

db.alunos.update(
    {"_id" : ObjectId("16db0004b8d72ea12f75d3b9")},
    { $push : { notas : 7.0 } }
)

    Certo e caso eu queira adicionar mais de uma nota de uma só vez?

    Para adicionar mais de um valor no push temos que utilizar o comando each

db.alunos.update(
    {"_id" : ObejctId("16db0004b8d72ea12f75d3b9")},
    { $push : { "notas" : {$each : [7.5, 5.0] } }}

)

     Existem muitas outras opções como o $inc que serve para incrementar um valor, como por exemplo foi adicionada a nota de um aluno como 7.5, mas o mesmo teve trabalhos extras que valeram mais um ponto, poderíamos utilizar o inc para adicionar 1 à nota ficando com 8.5.

     Ou o $currentDate que seta a data atual à um campo.

Como sempre faço aqui vai a Documentação MongoDB, pois existem várias outras opções.

Ler

Mongo: Find limitando registros e ordenação sort

Mongo: Find limitando registros e ordenação sort

  29 de maio de 2018    henrique

---

    Muitas vezes desejamos selecionar um número específico de registros, imaginemos o seguinte caso, tenho uma loja e quero lançar um desconto promocional para o funcionário que tem o melhor aproveitamento em vendas. Esse aproveitamento é um número de 0 a 10 que é lançado baseado na quantidade de atendimentos, vendas e elogios por parte dos clientes.

     Poderíamos executar este comando:
db.funcionarios.findOne({
    aproveitamento : { $gt : 8}
})

     O findOne retorna o primeiro valor encontrado, no caso seria o primeiro funcionário que tenha aproveitamento maior que 8.

     Portanto talvez fosse interessante partir para outra opção. Como listar os funcionários ordenando pelo aproveitamento. Para isso usamos o sort.

db.funcionarios.find().sort({"aproveitamento" : 1})

     Com este comando estamos ordenando por ordem crescente, caso queira que seja por ordem decrescente é só alterar o segundo parâmetro para -1.

db.funcionarios.find().sort({"aproveitamento" : -1})

     Tendo ordenado podemos limitar a quantos registros desejamos. Imagine que quero lançar aquele desconto para os 5 funcionários com aproveitamento mais alto. O limit tem esta função, nele se pode colocar o número de registros desejados.

db.funcionarios.find().sort({"aproveitamento" : -1}).limit(5)

Ler

Mongo: Comandos para selecionar (find)

Mongo: Comandos para selecionar (find)

  24 de maio de 2018    henrique

---

Pretty comando para identar o selecionar

     Ao utilizar o find como mostrado anteriormente são trazidos todos os dados sem filtro, como por exemplo db.alunos.find(), mas note que são exibidos os dados sem identação e fica um tanto quanto confuso para visualizar quando temos muitos dados, para melhorar isso podemos utilizar o comando pretty, ficaria dessa forma db.alunos.find().pretty(), veja como fica bem mais fácil de visualizar.

Find

    O comando find é utilizado para selecionar valores, anteriormente vimos como podemos selecionar em documentos simples, onde temos apenas uma estrutura, como por exemplo: db.alunos.find(

     { "nome" : "Mateus" }

).pretty()

     Mas e quando temos uma estrutura dentro desse aluno como por exemplo os cursos que ele está estudando, teríamos que pensar em um join se fosse SQL normal, alunos join cursos, mas no mongo fazemos isso de uma forma bem parecida como em linguagens de programação orientada a objetos como por exemplo:

db.alunos.find(

     { "curso.nome" : "Contabilidade" }

).pretty()

Neste exemplo pesquisei os alunos que estão estudando Contabilidade, simples não é?

Condições ("ou/or" e "e/and")

    Em SQL é muito comum termos uma seleção com mais de uma condição, no mongo também podemos fazer isso como por exemplo o "or" em um banco onde estamos trabalhando os funcionários.

db.funcionarios.find({

    $or : [

               {"departamento.nome" : "RH"},

               {"departamento.nome" : "Manutenção"}

             ]

     }).pretty()

     Agora caso quiséssemos filtrar esta consulta ainda pelos funcionários onde o gênero é feminino poderíamos fazer da seguinte forma.

db.funcionarios.find({

    $or : [

               {"departamento.nome" : "RH"},

               {"departamento.nome" : "Manutenção"}

             ],

              "genero" : "F"

     }).pretty()

     Ou seja, para o mongo sempre que adicionamos uma nova condição sem especificar nada ela será um "e/and".

Documentação find Mongo

Ler

Mongo: Comandos para inserção e remoção (insert e delete)

Mongo: Comandos para inserção e remoção (insert e delete)

  21 de maio de 2018    henrique

---

Comandos simples para inserção

Para criar coleções utilizamos o comando createCollection.

db.createCollection("alunos")

Para inserir valores na collection alunos podemos usar o insert

db.alunos.insert({

    "nome" : "João",

    sobrenome : "Silva"

    data_nascimento : new Date(1992,01,10)

})

É feito dessa forma pois é como um objeto javascript.

Também podemos inserir mais de uma collection para indicar collections referenciadas como por exemplo, este aluno cadastrado tem notas das matérias realizadas, poderíamos usar o insert da seguinte forma:

db.alunos.insert({

    "nome" : "João",

    sobrenome : "Silva"

    data_nascimento : new Date(1992,01,10)

},

{

"curso" :

     { "nome" : "JavaScript"}

},

"notas" : [9.0, 8.7]

})

Repare que em notas eu inseri dois valores de uma vez, isso é possível utilizando os colchetes []

Comando para remoção (delete)

     Para remover um aluno temos a opção de remover por ID como no exemplo:

db.alunos.remove({

    "_id" : ObjectId("78as0001q6w89gh25h69x3b5")

})

onde este ObjectId contido nas aspas é só um exemplo, no seu caso (no seu banco) ele será diferente.

Ler

JavaScript: Introdução

JavaScript: Introdução

  17 de maio de 2018    henrique

---

    Java script trabalha com a interatividade de sites com seus usuários, ela é a linguagem nativa da web, e ganhou muita popularidade por sua versatilidade, onde alguns desenvolvedores fizeram com que fosse possível utilizar java script para outras funcionalidades que não apenas no navegador.

     Como o NodeJs que o trouxe para o back-end, onde se é possível tratar requisições, enviar consultas para bancos de dados e etc.

     Também é possível utilizar em aplicações desktop, utilizando o Electron, um framework dedicado a isso, construir aplicativos desktop com html, css e javascript.

    E não bastasse, existe também um framework para utilizar javascript com arduino que é o Johnny-Five.

Boas práticas

    Uma boa prática é adicionar o javascript ao final da tag body, pois como os navegadores leem as páginas linearmente de cima para baixo, pode ser que algo da página ainda não tenha sido carregada quando ele for tentar executar o javascript.

     Document contém o DOM ou Document Object Model, que é como o navegador enxerga o HTML utilizado por ele para renderizar a página e com a função querySelector podemos selecionar uma parte do HTML, como por exemplo document.querySelector("h2").

    Lembrando sempre que é uma boa prática não atrelar muito o js com o html, portanto seria melhor selecionar por #id ou .classe css como por exemplo document.querySelector(".titulo").

    Separar o código js do código HTML é muito importante em alguns casos onde se tem muitas linhas de javascript e para fazer isso basta utilizar o comando <script src=""></script> onde o "" será preenchido pelo caminho do arquivo como, por exemplo <script src="scripts/principal.js"></script> indicando que na pasta principal da aplicação tem uma pasta scripts e dentro dela um arquivo principal.js.

Ler

Mongo DB: Introdução

Mongo DB: Introdução

  14 de maio de 2018    henrique

---

Introdução
     Mongo é orientado à documentos (JSON), ou seja, ele é um banco não relacional document-based.

     Basicamente neste tipo de banco (document-based ou document-oriented) temos coleções de documentos, nas quais cada documento é autossuficiente, contém todos os dados que possa precisar, ao invés do conceito de não repetição + chaves estrangeiras do modelo relacional.

     A ideia é que você não tenha de fazer JOINs pois eles prejudicam muito a performance em suas queries (são um mal necessário no modelo relacional, infelizmente). Você modela a sua base de forma que a cada query você vai uma vez no banco e com apenas uma chave primária pega tudo que precisa.

     Obviamente isto tem um custo: armazenamento em disco. Não é raro bancos MongoDB consumirem muitas vezes mais disco do que suas contrapartes relacionais.

     MongoDB é case-sensitive ao contrário dos bancos relacionais.

Aplicativos mongo instalados:

• mongod: inicializa o servidor de banco de dados;
• mongo: inicializa o cliente de banco de dados;
• mongodump: realiza dump do banco (backup binário);
• mongorestore: restaura dumps do banco (restore binário);
• mongoimport: importa documentos JSON ou CSV pro seu banco;
• mongoexport: exporta documentos JSON ou CSV do seu banco;
• entre outros.

Comandos básicos

Para subir um servidor mongo

C:\mongo\bin> mongod --dbpath C:\mongo\data

     Agora abra outro prompt de comando (o outro ficará executando o servidor) e novamente dentro da pasta bin do Mongo, digite:

c:\mongo\bin> mongo

    O comando abaixo no terminal cliente mostra os bancos existentes nesse servidor:

> show databases

    Agora digite o seguinte comando para “usar” o banco de dados “workshop” (um banco que você sabe que não existe ainda):

> use workshop

     O terminal vai lhe avisar que o contexto da variável “db” mudou para o banco workshop, que nem mesmo existe ainda (mas não se preocupe com isso!). Essa variável “db” representa agora o banco workshop e podemos verificar quais coleções existem atualmente neste banco usando o comando abaixo:

> show collections

    Além de campos com valores específicos, esse parâmetro do find permite usar uma infinidade de operadores como por exemplo, trazer todos documentos que possuam a letra ‘a’ no nome com regex:

> db.customers.find({nome: { $regex: /a/ }})

     Mas e se eu quiser trazer todos os customers maiores de idade?

> db.customers.find({idade: {$gte: 18}})

     O operador $gte (Greater Than or Equal) retorna todos os documentos que possuam o campo idade e que o valor do mesmo seja igual ou superior à 18. E podemos facilmente combinar filtros usando vírgulas dentro do documento passado por parâmetro, assim como fazemos quando queremos inserir campos em um documento:

> db.customers.find({nome: "Luiz", idade: {$gte: 18}})

Alguns outros operadores que você pode usar junto ao filtro do find são:

• $eq: exatamente igual (=)
• $ne: diferente (<> ou !=)
• $gt: maior do que (>)
• $lt: menor do que (<)
• $lte: menor ou igual a (<=)
• $in: o valor está contido em um array de possibilidades, como em um OU. Ex: {idade: {$in: [10,12] }}
• $all: MongoDB permite campos com arrays. Ex: { tags: [“NodeJS”, “MongoDB”] }. Com esse operador, você compara se seu campo multivalorado possui todos os valores de um array específico. Ex: {tags: {$all: [“NodeJS”, “Android”]}}

     Você também pode usar findOne ao invés de find para retornar apenas o primeiro documento, ou ainda as funções limit e skip para limitar o número de documentos retornados e para ignorar alguns documentos, especificamente, da seguinte maneira:

> db.customers.find().skip(1).limit(10)

     No exemplo acima retornaremos 10 customers ignorando o primeiro existente na coleção.

     E para ordenar? Usamos a função sort no final de todas as outras, com um documento indicando quais campos e se a ordenação por aquele campo é crescente (1) ou descrescente (-1), como abaixo em que retorno todos os customers ordenados pela idade:

> db.customers.find().sort({idade: 1})

Nota: assim como nos bancos relacionais, os métodos de consulta retornam em ordem de chave primária por padrão, o que neste caso é o _id.

Ler

UX: Microcopy (Microtexto)

UX: Microcopy (Microtexto)

  10 de maio de 2018    henrique

---

    Pode ser usado para links, botões, títulos, ações, enfim para quase tudo.

    É muito importante ter em mente que os textos devem ser simples e diretos, mas sem ser invasivo ou autoritário, eles devem literalmente conversar com o usuário claramente e fazer com que ele fique confortável.

     Usemos o exemplo do trivago, a sua página inicial é esta, o logo, um texto simples explicando claramente o que o site faz e embaixo um campo para digitar o texto da pesquisa "Ex.: Foz do Iguaçu". Mas se pensarmos bem Foz do Iguaçu é uma cidade e este campo de busca não serve apenas para cidades, nele posso digitar estados por exemplo que também é realizada a pesquisa, por tanto, pode ser melhorado para explicar melhor ao usuário o que acontece alí e não limitar a funcionalidade. Se tivéssemos, por exemplo, "Onde deseja encontrar hotéis?" teríamos mais possibilidades para o usuário digitar, vale apontar que em alguns casos perguntas são muito bem vindas.

Ler

UX Research (Pesquisa em UX)

UX Research (Pesquisa em UX)

  30 de abril de 2018    henrique

---

    Para começar com research em UX, deve-se buscar referências de serviços ou aplicativos com o mesmo segmento ou ao menos parecido com o que se deseja fazer. Pois nada melhor do que se ter ao menos uma ideia do que estamos fazendo antes mesmo de começar e research é isso, pesquisa pré início da implementação, é pesquisar o que se tem no mercado, de onde se pode buscar inspirações.

     O problema é que nem sempre temos essa opção, pois e quando estamos inaugurando um segmento novo de mercado ou desenvolvendo um serviço inovador que não se tem nada igual? Bom neste caso é muito importante se pensar em padrões já muito bem definidos para somar com sua ideia inovadora, como por exemplo ter o design baseado em material do Google onde o menu fica na parte de baixo e já temos muitos usuários acostumados à isso, ou então termos os ícones muito claros e também já conceituados como o menu em formato hambúrguer "aqueles três riscos horizontais", tudo isso com o intuito de fazer com que o usuário não se sinta muito perdido na sua aplicação.

    Alinhando a esta pesquisa que vamos fazer irei passar os conceitos de concorrentes diretos e indiretos.

    Concorrentes diretos são aqueles que fazem o mesmo tipo de produto ou serviço que o seu, como por exemplo a Acer e a Compaq, que são duas fabricantes de notebooks, cada uma com seu estilo e notebook, mas as duas produzem no final das contas notebooks, por tanto, são concorrentes diretas.

    Concorrentes indiretos, são concorrentes que vendem produtos ou serviços similares, mas vendem de forma diferente, como por exemplo a netshoes e a C&A, as duas vendem calçados, mas a netshoes foca em vendas por internet e a C&A por lojas físicas.

Entrevistas

Em entrevistas é importante ter alguns pontos bem definidos antes de começar

• Entenda o que você quer descobrir;
• Não faça perguntas que influenciem respostas, deixe as perguntas mais abertas;
• Faça a mesma pergunta de formas diferentes, para caso o entrevistado não entender de primeira;
• Comece com perguntas simples para quebrar um pouco o gelo e fazer com que o entrevistado fique mais à vontade;

Sites de imagens e vetores

https://www.shutterstock.com/pt

https://br.freepik.com

https://pttrns.com

https://sketchrepo.com

Aplicativos para pesquisa:

https://pt.surveymonkey.com

https://www.google.com/intl/pt_br/forms/about/

https://binds.co

https://www.survio.com/br/

Ler

SQL: Collate, ignorando acentos

SQL: Collate, ignorando acentos

  19 de abril de 2018    henrique

---

     Na dica de hoje vou mostrar um comando SQL do qual eu precisei utilizar alguns dias atrás.

 
     Vamos imaginar a seguinte situação, você tem um cadastro de clientes e deseja filtrar alguns clientes pelo bairro onde ele mora. Até aí teríamos um select bem simples selecionando os clientes quando o bairro contiver as palavras digitadas, "SELECT * FROM CLIENTES WHERE BAIRRO LIKE '%Texto%', mas e para bairros que contenham acento, vamos fazer o usuário pesquisar duas vezes, uma digitando com acento e outra sem o acento para poder localizar o cliente correto? E maiúsculas e minúsculas? Muitas vezes isso não é interessante, aí que entra o tal do COLLATE.

 
     Retomando o select do exemplo acima teríamos apenas que adicionar "COLLATE SQL_Latin1_General_CP1_CI_AI", ou seja, ficaria "SELECT * FROM CLIENTES WHERE BAIRRO LIKE '%Texto%' COLLATE SQL_Latin1_General_CP1_CI_AI", com isso estamos ignorando acentos e diferenças entre letras maiúsculas e minúsculas.

Ler

UX: Thumb zone

UX: Thumb zone

  16 de abril de 2018    henrique

---

    Thumb zone diz respeito aos lugares mais confortáveis para o usuário interagir na tela, pensando em smartphones, daí o nome Thumb (dedo, polegar) zone (zona).

    Pesquisas indicam que 50% dos usuários utilizam smartphones apenas com uma mão fazendo uso do polegar para tocar a tela, isso faz com que o tamanho da tela influencie diretamente na experiência de usuário, pois quanto maior a tela mais espaço onde o usuário não consegue alcançar apenas com o polegar.

    Isso faz com que tenhamos que levar em consideração onde ficará algum elemento, se ele é mais utilizado, deverá ficar na área de mais fácil acesso (easy), se for um pouco menos utilizado deverá ficar na área de razoável fácil acesso (ok), e os pouco utilizados ou apenas para visualização na área de mais difícil acesso (hard).

    Seguindo este conceito o Google lançou a Material Design que é uma interface visual da qual o botão de ação fica na parte inferior direita, para facilitar o acesso aos usuários.

Ler

UX: Lei de Fitts

UX: Lei de Fitts

  12 de abril de 2018    henrique

---

    Lei de Fitts, levar em consideração a rapidez e facilidade com que o usuário vai ter para realizar uma ação, como por exemplo um botão menor é mais demorado para ser clicado do que um botão maior mesmo que os dois estejam na mesma distância, isso pelo fato de o usuário ter de acertar o clique em uma área menor, que é mais difícil.

     Isso também se aplica a submenus onde quanto mais longe a opção está do clique originário mais tempo o usuário vai demorar para clicar nele e por isso geralmente as opções mais utilizadas ficam mais próximas e as menos utilizadas vem depois.

     Como mostrado na imagem acima os itens que estão dentro da marcação em vermelho são mais rapidamente acessados do que os que estão em azul pois estão mais próximo do clique original que foi no topo em "Conversa".

    Um outro exemplo é o caso dos checkbox, que atualmente muitos perceberam que fica mais fácil para o usuário se a área de clique (ou toque) for não apenas ao quadrado, mas também o texto do checkbox.

Ler

UX: Microinterações, importância e aplicações

UX: Microinterações, importância e aplicações

  9 de abril de 2018    henrique

---

    Microinterações são pequenas ações que mostram para o usuário o que aconteceu devido a uma determinada ação. Serve para chamar a atenção do usuário para um ponto em específico. Alguns exemplos de microinterações são:

• Quando colocamos o celular na opção vibrar o celular emite uma vibração curta para indicar que a opção foi ativada com sucesso.
• Quando no smartphone estamos em um aplicativo que atualiza ao puxarmos a tela para baixo e um ícone de animação indicando que está carregando.
• Ou outro exemplo, são e-commerces que mostram no ícone de carrinho de compras quantos itens já adicionamos mesmo sem entrar na página do carrinho de compras propriamente dito, isso faz com que o usuário tenha certeza que aquele item foi adicionado ao carrinho ou então que ele confira que já adicionou os três itens procurados.

    Conforme vimos nos exemplos acima, uma microinteração pode ser uma animação, uma informação a mais exibida ao usuário ou mesmo uma ação de hardware (caso do smartphone vibrando).
    Uma microinteração necessita de um gatilho, uma ação, um feedback e um loop / mode.

• Gatilho: Quando deverá ser iniciada.
• Ação: O que vai acontecer.
• Feedback: Como saber que a microinteração terminou e qual será a forma de mostrar ao usuário o que aconteceu ou se a operação foi concluída.
• Loop:  Quando deverá ser repetida.Mode: Ter ação ou feedback diferente para uma diferença de gatilho.

    Portanto quando estiver desenhando/desenvolvendo seu aplicativo ou site pense em como adicionar microinterações para trazer mais conforto ao usuário e deixá-lo sempre informado do que está acontecendo. Mas também lembre-se de que tudo em excesso faz mal, então adicionar excessivas microinterações sejam animadas ou não, pode tornar a experiência do usuário mais chata, com um ar mais pesado.

Ler

UX: Lei de Hick

UX: Lei de Hick

  5 de abril de 2018    henrique

---

    A Lei de Hick ensina que quanto mais opções o usuário tem, mais tempo ele demorará para decidir qual escolher, às vezes dar menos opções para o usuário pode ser melhor.
    A intenção aqui não é mostrar o cálculo ou dizer que para fazer uma interface de usuário você precisará fazê-lo sempre, caso queira poderá ver no wikipédia, mas conscientizar que muitas vezes dar muitas opções de escolha ao usuário pode fazer com que o mesmo demore a escolher uma e com isso perca o interesse em escolher ou utilizar seu aplicativo, pensemos em um site de compras onde a navegação é complicada, pois no menu o usuário tem de escolher entre muitas subdivisões quando na verdade ele só quer ver os notebooks mais vendidos do momento e escolher um, ao demorar à chegar na busca desejada e decidir entre tantas opções o mesmo perde o interesse e compra em outro site, pronto, foi perdida uma venda quase certa.

Ler

UX: Por onde começar (Leis básicas)

UX: Por onde começar (Leis básicas)

  3 de abril de 2018    henrique

---

     Quando pensamos em UX (user experience, ou experiência de usuário), devemos ter alguns conceitos básicos bem definidos em mente.
    Vou mostrar alguns para sempre que possível incluir os itens listados abaixo no trabalho de UX de modo geral.
     Sempre mostrar um feedback para o cliente para ele saber que tal ação foi ou não realizada (mensagens de sucesso, erro ou aviso), também na medida do possível ter e mostrar uma forma fácil do usuário cancelar ou reverter aquela ação. Ou seja, sempre deixar o usuário no controle da aplicação.
    Manter um padrão de ações (confirmar seguir um padrão, sempre ter opção de cancelar operação no mesmo lugar) e ícones (controles de um modo em geral, textbox, botão, ícones), e caso possível tentar reaproveitar a experiência do usuário para dentro da sua aplicação por exemplo um botão de editar ser um lápis (padrão para muitos aplicativos) ou então o menu estar na esquerda ou acima, etc.
    Ter prevenção de erros, como por exemplo ter auto complete ou auto correct, isso faz com que o usuário utilize mais facilmente sua aplicação sem ter de ir e voltar nas ações.
    Contar com a memória limitada do usuário, ou seja, exibir o que o usuário está fazendo e o que usuário já fez, como por exemplo nos sites que mostram as páginas acessadas até chegar aonde se está (home > produtos > eletrdomésticos), este conceito se chama breadcrumb.
    Ter documentação online ou no próprio aplicativo para caso o usuário tenha dúvidas de alguma funcionalidade, esta documentação deve ser o mais simples possível, uma boa opção é ter em esquemas de tutoriais e perguntas mais comuns juntos.
    Sempre pensar que menos é mais, ter uma interface simples apenas com as opções necessárias naquele momento.

Ler