November 18, 2014 - No Comments!

A complete guide to Responsive Grid development

*Sorry I haven't translate this post yet, but it will soon be available in english. Meanwhile you can contact me and I can show you my thoughts on this topic.

[coll_social_icon url="http://www.andreapacheco.com.br" color="#c1a885" color_hover="#c1a885" background_color_hover="#f9f7f5"]

*Publicado originalmente em Blog de AI

É possível pensar que o papel de criar um Design Responsivo esteja todo nas mãos do time de design (Ai ou UID). Eles tem que ser responsáveis por entregar os PSD’s com os layouts em pelo menos três resoluções, para desktop, tablet e mobile? Esqueça isso. Quem faz com que o design seja responsivo ou não, no final das contas, é o desenvolvedor front-end.

Muitas agências ainda tercerizam o desenvolvimento. Quando você não tem o desenvolvedor front-end do seu lado dentro de casa, a comunicação entre os times de design e dev tem que ser impecável, caso contrário, as chances de um resultado abaixo do esperado é grande.

Mas como o time de Design pode resolver esse problema de comunicação e colocar no ar um produto que seja exatamente o que foi pensado? Entendendo do assunto. Lembra que eu disse que o responsável por tornar o Design Responsivo é o desenvolvedor? Então vamos lá…

Tecnicamente falando...

Design responsivo é um conceito, não é uma técnica.

responsive-showcase-presentation-dribbble_1x

Ele representa a adaptação de uma interface a qualquer resolução de tela, adaptando a experiência de navegação de acordo com as necessidades dos usuários e também de cada tipo de mídia. Ele é o melhor amigo da experiência do usuário.

O Design fluído (liquido) é uma técnica de desenvolvimento

fashion-gallery

Ele utiliza medidas relativas para que o layout de um site possa aumentar ou diminuir de tamanho de acordo com o tamanho da área de visualização.

Ou seja, você pode ter todo seu conteúdo adaptado a uma resolução de mobile, por exemplo, e mesmo assim ele pode não ser responsivo. Por quê?

Porque imagine que o Design Fluído de um Blog de Receitas apenas “diminua” o site para que ele caiba em uma resolução mobile. O sidebar desse Blog vai encolher, vai ocupar digamos que 30% da pequena tela do smartphone, e o conteúdo irá ocupar os outros 70%. Temos aí uma péssima experiência de uso.

O que o Design Responsivo faria é adaptar esse conteúdo a uma melhor experiência, transformando o sidebar em um menu de navegação, por exemplo, e liberando espaço para o mais importante: o conteúdo do Blog.

O Design Responsivo não simplesmente encolhe o conteúdo, mas adapta os elementos a fim de entregar ao usuário o melhor conteúdo e navegação para aquele cenário.

Para colocar em prática esse conceito é preciso de técnica, e uma das melhores técnicas é o Design Responsivo Fluído: ele é Responsivo, ou seja, garante a melhor experiência ao usuário, e utiliza a técnica de Design Fluído na construção da sua base em HTML e CSS para garantir que o conteúdo se torne flexível.

O Grid

grid-responsive-ux-design

É comum que a função de utilizar o Grid acabe sendo exclusiva do Designer de Interface? Parece que sim. Mas já faz algum tempo que tenho observado a quantidade enorme de UI Designers que não utilizam Grid em seus trabalhos (usar uma linha guia aqui e ali não é a mesma coisa). Sendo assim, confiar no UI Designer para que ele aplique e estude um Grid que seja adequado para o projeto pode se tornar um problema.

Definir Grid pode e, para mim, deve ser uma tarefa do AI. Muitos designers passam um tempo olhando para uma tela em branco, tentando descobrir onde os elementos devem ser posicionados, mas, se você tem um Grid Flexível, muitos desses problemas já estão resolvidos, deixando o designer com mais tempo para trabalhar em design gráfico e outros componentes da página.

Em vez de tomar decisões arbitrariamente, os Grids permitem criar uma linguagem visual comum em toda a página. Os componentes se relacionam entre si, o que torna mais fácil para os usuários scanearem conteúdo e desenvolver familiaridade com ele.

Grid é uma malha que divide a tela ​em partes proporcionais e possibilita ​a distribuição do conteúdo de forma​ uniforme, proporcionando equilíbrio visual e estrutural. Construir um Design Responsivo se torna muito mais fácil se ele for apoiado em um Grid Flexível.

Benefícios do Grid…para o usuário

  • Facilita a leitura e o scaneamento dos elementos. ​
  • Melhora a experiência visual.​
  • Menos esforço cognitivo para interpretar o conteúdo.​
  • O olho humano percebe a distribuição proporcional dos elementos e associa as informações com maior facilidade.

Benefícios do Grid…para o designer

  • Rapidez para adicionar, alterar e mover elementos.​
  • Padrões de espaçamento e alinhamento proporcionam uma linha de trabalho uniforme.​
  • Linguagem visual comum em toda a página.
  • Mantém a consistência do trabalho caso outro designer mexa no arquivo.

Benefícios do Grid… para o desenvolvimento

  • É o caminho para que o layout que irá ao ar fique o mais pixel perfect possível.​
  • Atualização do layout de maneira consistente.
  • Rapidez na construção do front-end do site.

Grid Responsivo

Se você está criando um layout responsivo a primeira coisa que tem que saber é que tudo funciona com base em porcentagens(%). O Grid Fluído, como o nome diz, vai sempre dar a impressão de ocupar toda a tela.

Qual melhor formato?

O famoso formato 960gs foi bastante usado durante muitos anos, quando a resolução mais popular era 1024x768px. Nos dias de hoje, 13,28% dos monitores utilizam 1024x768px como resolução. A grande maioria utiliza 1366x768px como resolução. Ou seja, utilizar o Grid 960g pode tornar o design limitado e preso a uma grade ultrapassada. O mais comum, vem sendo ultilizar uma largura de 1140px, para que no Grid para que se adapte bem as maiores resoluções de monitores.

fullish_tease

Como escolher o número de colunas?

pic

Isso vai depender de você e do seu projeto. A razão para trabalhar com 12 colunas, que é o formato mais utilizado, é por causa da flexibilidade proporcionada e por ser capaz de dividir o layout uniformemente. Ou seja, você pode dividir 12 por 2,3,4 e ter uma serie de modulações disponíveis (2 x 6 , 3 x 4) e também em várias outras combinações. Se você dividir 12 colunas por 2, vai perceber que consegue ter 6 conjuntos de 2 colunas sem que sobre nenhuma coluna.

Mas o número de colunas pode variar de projeto para projeto. Basicamente, quanto maior o número de colunas, (14 ou 21, por ex.) maior o quantidade de possibilidades para dividir o layout. Geralmente esse tipo de Grid é utilizado quando se tem muito conteúdo editorial e o design é projetado com uma largura de 1140px ou mais.

Calculando as porcentagens

Os desenvolvedores da PopUp Design explicam de um jeito bem fácil como calcular a porcentagem de um elemento.

Digamos que você tem as dimensões abaixo no Photoshop:

mockup_pixels

Ou seja, temos um Sidebar de 300px e uma área de conteúdo de 660px. O wrap, ou seja, o repositório que envolta todos os elementos, tem 960px.

Para calcular esses valores em porcentagens (aliás, qualquer valor de Pixel para Porcentagem), é só utilizar a fórmula:

design_responsivo

O wrap nesse caso é o Contexto. Para calcular o sidebar (nosso Objeto), fazemos assim: sidebar ÷ wrap = resultado. Para descobrir a porcentagem é necessário multiplicar o resultado por 100. No caso do sidebar temos 300 ÷ 960 = 0.3125, e multiplicando o resultado por 100, temos finalmente nossa porcentagem, que é 31.25%.

mockup_porcentagem

 

O Grid dos designers

Existem muitas maneiras de criar um Grid de marcação ( aquele que você sobrepõe sobre seu design no Photoshop ou qualquer outra ferramenta visual, afinal, você não é programador e não vai criar um Grid em CSS e HTML), você pode criar manualmente, utilizar Actions no Photoshop entre outras maneiras. Hoje eu vou mostrar para vocês o que para mim é o mais fácil e pode ajudar vocês a construir um Grid Flexível.

Calma, você não precisa fazer mil e uma contas para conseguir fazer seu Grid Responsivo. Sabe aquele ditado que “fiz design para se livrar dos números”? É mais ou menos assim. Quando se desenvolve um layout responsivo, a parte mais casca grossa acaba ficando para os desenvolvedores front-end. É preciso converter pixels em porcentagens e EM’s e fazer algumas continhas bem chatas. Mas mesmo assim é importante entender o processo do desenvolvimento front-end para que você e seu time de Design consigam passar para o time de desenvolvimento exatamente o que foi pensado.

grid-responsivo-flexivel-design-ux

Gridpak é um excelente gerador de Grid Flexível que pode te salvar de ter que fazer alguns cálculos. É só digitar a quantidade de colunas que você quer, o valor do padding entre as colunas e o valor da calha. Defina um breakpoint e exporte seu Grid em PNG, CSS entre outros formatos.

O número de colunas de um Grid costuma diminuir a medida que a resolução de tela diminui, isso acontece porque se você diminui o tamanho da tela, você tem que aumentar o tamanho dos elementos, e um Grid com poucas colunas acaba aumentando a proporção dos elementos.

O mais comum, é utilizar sempre um número par para as colunas. Sendo assim, para Tablets o número de colunas costuma ser de 8 col. e para smartphones 6 col. 8 e 6 colunas permitem uma serie maior de modulação disponível.

Mas eu sou designer, porque preciso entender sobre porcetagens, EM's e códigos?

Da próxima vez que você for falar com o desenvolvedor do seu Design Responsivo, vai poder ficar de olho para ver se ele está usando porcentagens e EM's na construção do CSS (é isso que vai garantir que seu design fique Fluído).

Além disso, é importante que no seu documento de especificações você deixe bem claro o Grid utilizado, a quantidade de colunas, largura das colunas e o padding e glutter do seu Grid, todos esses dados, claro, em porcentagens.

Assim vai ficar muito mais fácil acompanhar o desenvolvimento do seu design e entender o por quê das coisas.

Entendi, mas porque não usar apenas Break Points?

Digamos que você e/ou seu desenvolvedor decidem não tornar o design flexível, ou vocês não tem tempo ou verba para isso. Então fica decidido que o design será construído em cima de Break Points que irão indicar quando a mudança do design deve ser feita. Bom, como você já deve saber, existem inúmeros dispositivos por aí, e a cada ano algo novo é lançado ( que o diga o novo iPhone 6 e iPhone 6s). Fica impossível prever qual a nova resolução que será adotada pelo mercado. Se você for tentar satisfazer a todos, vai terminar tendo que adaptar seu layout a algumas dezenas de breakpoints e vai acabar louco fazendo isso. Ok, você pode adpatar seu layout aos breakpoints mais "famosos" como 1200 px (Desktops widescreen), 960px (Monitores antigos), 768 px (Tablets), 480 px (Smartphones em formato paisagem) e 320 px (Smartphones em formato retrato) e pode até ser que seu design fique agradável em um iPhone4s, mas quem irá garantir que ele ficará agradável no novo iPhone6s ou um modelo de Android?

Utilizar um Design Adaptável (que só utiliza BreakPoints), pode ajudar se você precisar resolver um problema a curto prazo, mas definitivamente não é uma solução permanente.

Mas o Grid não vai limitar a minha criatividade?

De jeito nenhum, pelo contrário. Além de trazer organização e clareza para o design, nada o impede de criar áreas no seu layout que podem ser digamos... "Grid Free", espaços para aplicar uma ilustração ou algo do tipo. O Grid também pode ser usado em qualquer formato de design, seja ele horizontal, vertical, não importa. O Grid não deve limitar sua criatividade ele é apenas uma ferramenta para melhorar o seu trabalho.

sp_1x

June 1, 2014 - No Comments!

Copywriters or… UX Designers?

*Sorry I haven't translate this post yet, but it will soon be available in english. Meanwhile you can contact me and I can show you my thoughts on this topic.

[coll_social_icon url="http://www.andreapacheco.com.br" color="#c1a885" color_hover="#c1a885" background_color_hover="#f9f7f5"]

Services_Content-Development_Copywriting1

Durante anos, redatores vem sendo treinados para criar textos e campanhas persuasivas. Com a migração para o digital, uma máxima foi seguida a risca. "Escrever para web é escrever pouco"? Pode até ser. Mas ao que parece, escrever pouco vem sendo traduzido em elaborar conteúdos secos e nem um pouco amigáveis.

Se como UX Designers nosso papel é tornar qualquer interface amigável e fácil de usar, isso quer dizer que também somos responsáveis por todo e qualquer texto escrito em uma tela?

A resposta é sim. Interfaces requerem conteúdo. Labels, call-to-actions, formulários, mensagens de erro. A lista é interminável.

UX Designers como redatores

Esqueça o Lorem Ipsum e use conteúdo de verdade. Ao desenhar wireframes, procure escrever o conteúdo mais próximo ao que será posto no ar. Não se trata de querer cumprir o papel de outro profissional, mas elevar o nível do seu trabalho.

Como UX Designers, sabemos exatamente qual a finalidade de um projeto, como ele tem que se comportar, qual o ideal de interação entre o usuário final e a interface, e por isso também devemos saber o tom de linguagem que queremos transmitir.

Read more

March 25, 2014 - No Comments!

How Rewards and Social Belonging can get user to do what you want

*Sorry I haven't translate this post yet, but it will soon be available in english. Meanwhile you can contact me and I can show you my thoughts on this topic.

[coll_social_icon url="http://www.andreapacheco.com.br" color="#c1a885" color_hover="#c1a885" background_color_hover="#f9f7f5"]

Usuários são acima de tudo pessoas, e como pessoas, são movidos por emoções o tempo todo e nós não podemos ignorar os seus efeitos. Estimulando as emoções certas aumentamos as chances de tê-los fazendo o que esperamos que eles façam.

O sentimento de recompensa é um dos meios mais comuns de ter pessoas fazendo algo que você queira (existem outros meios mais eficazes que a recompensa, como o desejo pelo domínio, mas esse é certamente um dos mais comuns). Se você estiver pensando em usar recompensas para motivar as pessoas, é melhor você conhecer a ciência por trás dessa técnica.

Em 1950, BF Skinner, psicólogo especializado em psicologia comportamental,  pesquisou o assunto recompensa, quando e como dar. Ele pesquisou sobre o efeito de recompensar as pessoas em tempos diferentes. Por exemplo, você deve recompensar alguém toda vez que ela fizer o que você espera? Ou só às vezes?

Quando recompensar o usuário

Aqui vai um exemplo, digamos que você queira que seus clientes usem um novo recurso do seu App. Como se trata de um feature novo, eles não estão acostumados a usá-lo, ou seja ele não se tornou parte de sua forma habitual de utilizar o produto.Você pode recompensá-los por exemplo, com pontos, ou um crédito o mês seguinte, a cada vez que eles usarem o recurso. Esse é um exemplo do chamado reforço contínuo em que você recompensa alguém cada vez que ela realiza o comportamento desejado.

Skinner também pesquisou o reforço variávelque consiste em variar a frequência com que a pessoa recebe uma recompensa quando uma ação é realizada, por exemplo, recompensar o comportamento, em média, a cada cinco vezes que a pessoa realizar a ação, mas você pode variar, por isso às vezes você dá a recompensa na terceira vez que eles fazem o comportamento, ou na sétima vez, outra na segunda, etc, sendo em média a cada 5 vezes.

Uma vez que o comportamento contínuo é obtido você passa a recompensá-los a cada 3 ou 5 vezes, em média. Este é o esquema do reforço variável.

Skinner descobriu que o reforço variável tem dois benefícios:

  1. Eles resultam na maioria dos casos de comportamento obtido.
  2. Eles resultam em comportamentos difíceis de se extinguir, ou seja, o comportamento persisti ao longo do tempo, mesmo quando as recompensas não estão sendo mais dadas.

Quando BF Skinner pesquisou recompensas ele as chamou de reforços.  Um reforçador eficaz é qualquer coisa que, quando você dá a alguém, resulta em um aumento no comportamento desejado. Uma recompensa eficaz depende do que uma pessoa em particular entende como uma boa recompensa. A lista de possíveis recompensas ou reforços é infinita. Alguns exemplos são:

  • Dinheiro
  • Descontos
  • Comida
  • Sexo
  • Atenção
  • Louvor
  • Amor
  • Diversão

Escolhendo a recompensa certa

Para escolher uma recompensa eficaz, o ideal é você conhecer o seu público e saber o que ele quer. E para isso só existe um jeito: pesquisando.

É indicado que você faça alguma pesquisa antes para saber o que usar como recompensa para o seu público em uma situação particular, já que cada público quando exposto a situações diferentes manifestam emoções diferentes.

Sentimento Social

Um outro exemplo de emoção motivadora de ações é o sentimento social. Diversos estudos apontam que as pessoas ficam mais felizes quando se sentem como parte de um grupo. Quando as pessoas se sentem ligadas umas as outras, elas ficam muito mais motivadas a trabalhar em grupo.

Gregory Walton, professor na Universidade de Stanford, estudou os efeitos da inclusão nos comportamentos individuais. Em um de seus experimentos, Walton descobriu que, quando os estudantes universitários acreditavam que eles compartilhavam um aniversário com um outro estudante, eles ficavam mais motivados a completar uma tarefa com aquele o aluno e ter melhor desempenho na tarefa.

Em outro estudo, Walton colocou duas pessoas em uma sala, sendo uma delas integrante do estudo e outra sendo voluntária do experimento. Walton disse ao participante que ele tinha o mesmo aniversário que a outra pessoa na sala. Quando a outra pessoa começou a correr dentro da sala e sua freqüência cardíaca aumentou, a freqüência cardíaca do participante voluntário também subiu, mesmo sem ele estar correndo dentro da sala. Isso porque o participante do experimento havia estabelecido uma conexão com o outro (ou seja, a mesma data de aniversário). Walton concluiu que é fácil para as pessoas assumirem as mesmas metas, motivações, emoções e até mesmo reações físicas quando elas se sentem conectadas.

Estudo de caso: KOHLS

KOHLS é a maior rede de lojas de departamento nos Estados Unidos, com milhões de cliente fiéis a marca. Eles utilizaram dessas emoções, recompensa e sentimento social, para criar laços reais de fidelidade entre a marca e seus clientes.

 

"Fidelidade é sobre construir relações através de emoções"

 

Nessa estratégia de UX, dentro da jornada do usuário, a persona, Lauren, é uma cliente da KOHLS que já compra na loja há mais de 10 anos, mas ainda não tem uma conta registrada. Como estabelecer uma relação mais duradoura com esse perfil específico de cliente?

Estratégia de UX

Da jornada exposta no vídeo podemos deduzir que a marca busca três coisas: talvez o ponto principal seja trazer os clientes da KOHLS para as plataformas digitais, onde a marca poderá ter muito mais domínio sobre os gostos e preferências desses clientes, criando laços mais fortes de relacionamento, fidelização e o princial, conhecendo melhor seu público, a marca pode oferecer benefícios maiores que irão distinguir seu produto da concorrência.

Para isso, as estratégias são, trazer clientes apaixonados pela marca para as plataformas digitais, tornar o uso das plataformas digitais cada vez maior por parte desses clientes, utilizar o engajamento desses usuários assíduos como espelho para a chegada de novos usuários nas plataformas digitais.

A persona e suas emoções

A cada ação que Lauren realiza, como participar dos programas da marca, deixar recomendações e etc, ela é recompensada com pontos em sua conta. Ou seja, o sentimento de recompensa já é estimulado.

Além da recompensa, como parte da estratégia de relacionamento, Laura recebe "presentes" da marca, que através de inteligência de dados reconhece os comportamentos do usuário pelas plataformas e oferece "presentes" relacionados as iterações que ele realiza, como oferecer uma receita super legal, sabendo que Lauren deu uma olhada na seção de itens para cozinha.

Depois de ganhar pontos suficientes (ter um relacionamento contínuo com a marca) , ela é recompensada com uma promoção a embaixadora da marca (status), além de ganhar um convite para um evento.

O poder está nas emoções

Em resumo, nessa estratégia de UX a base do relacionado é literalmente dar e receber. Quanto mais o usuário interage com a marca, online e fisicamente nas lojas, mais recompensas ele ganha, e a cereja do bolo é quando esse usuário atinge um nível de relacionamento tão grande que se torna parte de algo maior (é promovido a embaixador da marca) estimulando o sentimento social.

Quais benefícios isso pode trazer para uma marca? Ter um cliente extremamente comprometido com a marca, desbancando a concorrência.Esse é um ótimo exemplo de estratégia de UX que utiliza as emoções como base para gerar fidelidade entre o cliente e a marca tanto no online quanto no offline.

Se pararmos para pensar no poder de influência que as emoções tem sobre as pessoas e como isso pode ser utilizado como estratégia de negócio, um ótimo exemplo é o caso da Apple, que em poucos anos conseguiu despertar emoções fortíssimas nos consumidores, que mesmo sabendo de algumas limitações de seus produtos (principalmente nos dias de hoje) continuam extremamente fiéis a marca.

February 12, 2014 - No Comments!

Being a UX and UI Designer

*Sorry I haven't translate this post yet, but it will soon be available in english. Meanwhile you can contact me and I can show you my thoughts on this topic.

[coll_social_icon url="http://www.andreapacheco.com.br" color="#c1a885" color_hover="#c1a885" background_color_hover="#f9f7f5"]

como-vir-de-outra-area-pode-diferencia-lo-como-projetista-de-UX-

Enquanto o termo UX Design vem crescendo, cada vez mais vejo profissionais de outros departamentos se interessando pelo estudo da experiência do usuário. Um exemplo disso é o (mito do) UX/UI híbrido. Ao meu ver, parece que há uma tendência em tentar estabelecer que as duas coisas são tão diferentes uma da outra que cada um tem que ficar no “seu quadrado”.

UX é diferente de AI

A experiência do usuário (UX) é como uma pessoa se sente com relação a uma interface e um sistema, sendo assim, o projetista de UX deve estudar como esses usuários se sentem, olhando para usabilidade, utilidade, eficiência na execução de tarefas e assim por diante.

Como um campo multidisciplinar, o estudo da UX envolve inúmeras disciplinas como a psicologia, sociologia, marketing, planejamento, T.I, design de interfaces, design de produto, e entre tantas, a arquitetura de informação.

A Arquitetura de Informação é considerada um dos grandes alicerces do estudo da UX, por explorar a fundo a organização e estrutura dos conteúdos de maneira que o usuário consiga navegar por ele.

Como vir de outra área pode diferenciá-lo como profissional de UX

Vejo muitos profissionais do campo digital querendo ingressar com projetista de UX divididos entre dois sentimentos. O medo em relação à sua aceitação no mercado, e a dúvida por não saber por onde começar exatamente.

A grande questão é que esses profissionais, que geralmente são designers de interface, desenvolvedores, P.O.’s e planners, possuem um conhecimento que talvez um Arquiteto de Informação demore muito mais tempo para adquirir. Essas pessoas estão acostumadas a lidar no seu dia a dia com o outro lado da moeda. Muitas vezes mais centradas nas necessidades de produto e dos stakeholders envolvidos, essa gama de experiência e conhecimento mercadológico pode trazer grandes benefícios quando somados à um design centrado no usuário.

Read more