Foto: Bruno Capella

UX Weekend com Edu Agni

Olá, quero compartilhar aqui sobre a minha experiência no workshop UX Weekend promovido pelo iMasters nos dias 28 e 29/03/2015 em São Paulo onde tivemos como facilitador o consultor especialista em User Experience Edu Agni.

Participar do workshop e poder interagir com demais profissionais da área de design e tecnologia foi algo muito interessante para minha carreira. Além de ser uma oportunidade de testar minhas habilidades adquiridas nesses últimos 5 anos em que tenho me dedicado à criação de web sites, e mais especificamente aos últimos 2 anos como web designer em eCommerce – onde a experiência do usuário no ambiente digital tem sido assunto de bastante discussão.

Edu falou sobre o importância de fazer o design centrado no usuário; focando nas suas necessidades, desejos e limitações durante todo o projeto.

UX Weekend com Edu Agni / Foto: Bruno Capella

UX Weekend com Edu Agni / Foto: Bruno Capella

Em equipes realizamos exercícios criação de Personas, Jornada do Consumidor e Testes de Usabilidade. E isso me trouxe uma luz de recursos que podem me auxiliar na concepção de projetos.

Realizar esses exercícios durante o workshop foi interessante para perceber que podemos aplicá-los no dia-a-dia, de forma simples e objetiva. Onde nossos próprios colegas de trabalho, por exemplo, possam nos ajudar realizando um teste de usabilidade ou descrevendo a sua relação com um determinado produto.

UX Weekend / Foto: Welton Matos

UX Weekend / Foto: Welton Matos

Mais detalhes sobre o UX Weekend você pode obter aqui. Abraço! Até o próximo post.

Um forte abraço, até a próxima…

Anúncios

Fim de Semana do Consumidor: Ecommerce da Marisa com frete grátis para todo Brasil

Confira a campanha “Fim de Semana do Consumidor” desenvolvida para o eCommerce da Marisa. Todos o site com Frete Grátis para todo Brasil. Job meu 🙂

ecommerce_marisa_frete_gratis_welton_matos_design

Lições de varejo
Apelo varejista. Frete grátis é o maior atrativo para mercado E-commerce. O amarelo luminoso na letras garrafais das palavras ‘Frete Grátis Brasil’ transmite vida e sugerindo solução. Produzir sensação de alegria, ativa a mente proporcionando concentração, uma vez que sua ação está diretamente ligada ao sistema nervoso central.

Valores da marca
Apelo emocional. Humanização da peça com valores da marca. Bem estar e felicidade proporcionada pela experiência de compra no ambiente virtual.

Click na imagem abaixo para ampliar.

Lições de Varejo e Valores da Marca No eCommerce

Veja outros trabalhos meus no meu portfólio online no Behance

90 anos de The New Yorker

A revista americana The New Yorker decidiu comemorar os 90 anos da marca convidando nove artistas produzir nove capas diferentes, uma para década.

Para  vejam o resultado:

A missão foi reproduzir, cada qual com as suas peculiaridades, a primeira capa da revista, cuja arte mostrava um cavalheiro usando uma cartola. Serão três edições de aniversário e cada uma delas contará com três capas, todas elas patrocinadas pela Rolex.

O conteúdo também traz matérias especiais, entre elas, um perfil de Johnny Ive, o chefe de design e vice-presidente sênior da Apple. Até mesmo os anúncios da edição foram cuidadosamente trabalhados com os anunciantes e pensados especialmente para a ocasião comemorativa.

Fonte: adnews

Rock & Design: 25 anos de Photoshop

A Adobe resolveu celebrar os 25 anos do Photoshop ao som de Aerosmith. O novo filme da marca homenageia o Photoshop ao som da balada “Dream On”, de 1973.

“Por 25 anos, o Adobe Photoshop tem sido usado para criar imagens de beleza deslumbrante e criatividade realista”, disse Shantanu Narayen, Presidente e CEO da Adobe em comunicado. “Desde a editoração eletrônica, os editoriais de moda, produção de filmes, design de website, criação de aplicativos móveis e agora a impressão 3D, o Photoshop continua a redefinir indústrias e possibilidades criativas. E hoje, a magia do Photoshop está disponível para milhões de novos usuários, graças à Adobe Creative Cloud”.

Criado pela Goodby, Silverstein & Partners, o filme será veiculado no intervalo do Oscar em mercados selecionados. O que faz todo sentido, já que muitos longas famosos aparecem sendo modificados ao longo do vídeo, caso de “Garota Exemplar” e “Shrek”.

Fonte: AdNews

#EUQUEROCUPOM

Todo mundo gosta de Cupom de Desconto, isso não dá pra questionar. Essa tendência vem trazendo novas estratégias entre as lojas virtuais brasileiras.

Confira abaixo o hotsite da campanha de cuponagem #EUQUEROCUPOM que criei para o e-commerce das Lojas Marisa. Uma estratégia do marketing e comercial do e-commerce Marisa.com.br.

CUPOM DE DESCONTO MARISA

Criei toda arquitetura de informação, Usabilidade e design da campanha.

Cupom de Desconto Wireframe

3 Vantagens de oferecer Cupom de Desconto

Aumentar suas vendas e consecutivamente aumentar o ticket médio

O cupom de desconto causa no cliente uma sensação de satisfação. Ele está economizando, levando mais por menos, e além disso deixá-lo mais propenso a finalizar a compra.

Diminua o abandono de carrinho

Uma vez que o cupom é uma oportunidade de deixar a compra mais barata, pode facilitar a venda, sem contar que os cupons costumam ter data de validade então é até uma certa pressão para que não se perca essa oportunidade.

Viralizar campanhas e promoções

A viralização dos cupons de desconto é também uma grande vantagem dessa estratégia. Quando encontramos uma oferta boa na Internet, a tendência é que compartilhemos essa boa notícia com nossos amigos para que eles também aproveitem o desconto.

Ficha Técnica:
Welton Matos: Web Designer – Arquitetura de informação, Usabilidade e design da campanha.
Andreza C S Ferrari: SEO – Otimização da página para os buscadores.
Jana Guiotti: Front-end – Programação da página e cadastro no Admin.

Confira esse projeto no meu portfólio.

Quatro princípios básicos do design

Princípios básicos do design

Alinhamento

Aqui no ocidente, sempre começamos a olhar algo começando do canto superior esquerdo descendo pela lateral. Se eu alinhasse apenas este parágrafo do centro pra direita da página (deixando o resto do texto como está), possivelmente seus olhos iriam ignorar este parágrafo e passar adiante.

Se começar a alinhar algo pela esquerda, alinhe tudo pela esquerda. Se for pra alinhar tudo a direita, alinhe tudo pela direita. Se alinhar a um, dois ou quatro centrímentros da borda, alinhe tudo a um, dois ou quatro centímetros da borda. Evite a todo custo alinhar text pelo centro: isto dá um ar de desordenado e a pessoa se perde facilmente quando vai de uma linha pra outra, já que ela não têm um ponto de referência fácil (no caso, o início da última linha lida). E você não gosta de se sentir perdido ao ler um texto ou ver uma image né? Ninguém gosta.

Design Básico - Alinhamento

Proximidade

Elementos similares devem estar próximos. Por exemplo, acima deste de parágrafo existe o título “Proximidade”. Se eu colocasse o título três linhas acima do início deste parágrafo, isso poderia gerar certa confusão pra você leitor; você estaria se perguntando “O que essa palavra tá fazendo aí no meio do texto? É uma palavra-chave? Qual a relação dele com o resto do texto?”.

A lei é: não faça a pessoa ter que pensar nisso. Se ela ficar se questionando o por que desta distância, ela não vai conseguir concentrar-se no conteúdo. O mesmo vale para imagens: se uma imagem não têm nexo nenhum com uma segunda, por que deixá-los próximos? Vamos manter uma distância para não confundir a pessoa que está visualizando a obra. Aproximando elementos similares, você diminui a confusão, e deixa a informação mais clara e direta.

Design Básico - Proximidade

Contraste

Não é incomum de ver gente usando fundo amarelo com letra branca. Pessoal, amarelo é muito próximo do branco. Se você colocar aquilo no sol, o pessoal não vai conseguir ler nada. Contraste é algo importantíssimo, ainda mais quando existe uma figura e um fundo. Convenhamos, até quando não existe um fundo, existe uma cor da mídia (por exemplo, o papel ou a tela do PC). Claro, dá pra colocar um texto preto sobre um papel branco. É uma ótima forma de contraste. Mas se quiser destacar algo em amarelo, por que não colocar uma tarja preta no fundo desta palavra? É uma ótima forma de contraste; faz aparecer bem aquilo que você quis que se destacasse e não acabou sumindo no fundo.

E contraste não é só de cor, mas de elementos também. Uma frase com tipografia diferente do restante do texto pode ser contrastante. Até uma palavra ou frase negritada pode dar o ar de contraste. Isso serve não só para destacar algo, mas também para diferenciar dois elementos.

Design Básico - Contraste

Repetição

Quando falo sobre repetição, estou falando sobre repetição de elementos visuais. Em um site, por exemplo, você deve repetir a estrutura dele em todas as páginas internas. Ou seja, nada de mudar a posição do menu nas páginas internas.

A repetição de elementos é importante especialmente para a pessoa saber que ainda está no mesmo site. No caso do design de impressos, você pode repetir a cor, fontes, relações espaciais, etc. A repetição cria uma sensação de organização.

Design Básico - Repetição

fonte: http://design.blog.br/geral/quatro-principios-basicos-do-design

UX no E-commerce: 3 tendências de design para seguir e para fugir

UX no E-commerce: 3 tendências de design para seguir e para fugir

No ecommerce, o ux é importantíssimo, a seguir listo 3 tendências para fugir e 3 para seguir quando pensamos em desenvolver nossa loja virtual.

1ª Tendência a seguir: Maiores fotos de produtos.

Talvez pelo aumento das telas e resoluções, designs mais espaçosos ou pelo benefício da experiência do usuário, os sites estão utilizando imagens de produtos maiores. Imagens cresceram em tamanho nas páginas de produto, resultando numa maior quantidade de detalhes visíveis.

Nós todos sabemos que uma fotografia vale por 1000 palavras, e em sites de e-commerce, uma (boa) foto vale por 1000 reais. Em testes de usabilidade, os usuários ciscam por detalhes do produto nas imagens, incluindo detalhes que não são citados nas descrições. Imagens maiores, tem a capacidade de mostrar mais detalhes, e múltiplos ângulos de visualização oferecem ainda mais informações. Fotografias de produtos me utilização ou em seu contexto de uso, funcionam muito bem para responder dúvidas dos e-consumidores.

Nós chegamos a ver um usuário perceber que numa torradeira cabiam bagels, ou que um porta copos tinha feltro que não machuacaria seus móveis, somente olhando para as fotografias no site. O aumento nas imagens de produto não são vistas apenas nas páginas de produtos.

As páginas de categoria, as quais geralmente amontoam o maior número de “micro” imagens possíveis de produtos também adotou a medida. Isso permite ao usuário ver os detalhes rapidamente na “comparação de vitrines”, ajudando-os a gastarem seu tempo explorando os produtos certos.

Category page on ColdwaterCreek.com with large product images

2ª Tendência a seguir: Reviews mais robustas

Reviews ajudam os usuários a entenderem melhor sobre a qualidade e uso de um produto. Reviews podem ser a resposta para as perguntas ou endereçarem preocupações que os usuários tem sobre o produto, simplesmente porque elas são escritas pela perspectiva das pessoas as quais precisavam ou queriam e realmente têm o produto.

Oferecer reviews é de bastante ajuda, mas sites estão cada vez mais optando por oferecer informações adicionais ou um resumo sobre as reviews. Muitos sites estão adicionando detalhes às reviews: detalhes relevantes sobre a pessoa que escreveu a review, como gênero ou idade. Além disso, as reviews estão sendo feitas com filtros sobre características particulares dos produtos, como tamanho e qualidade.

Os sites estão reconhecendo os maiores contribuintes e deixando os leitores avaliarem suas reviews. Eles estão resumindo palavras chaves e frases usadas em reviews tanto positivas quanto negativas, ou até mesmo valorizando citações de reviews bem descritivas ou úteis.

Tais informações adicionais, quando bem feitas, facilita aos usuários receberem o máximo do benefício das opiniões alheias. Detalhes dos “Reviewers” permite aos usuários acharem reviews pertinentes a suas situações ou usos, e os resumos ajudam os clientes a relamente perceber quais são as forças do produto, e seus defeitos comuns.

OrientalTrading.com reviews with criteria for price and quality

3ª Tendência a seguir: Cupons de fácil utilização

Em um passado não muito distante, nós assistimos usuários lutando para utilizar cupons e se qualificar para conseguir descontos. Ficamos felizes que começamos a ver mais sites facilitando cada vez mais a utilemização de cupons para os compradores, ou até automaticamente ganhá-los.

Se um desconto é publicado em um website, automaticamente aplique o desconto para os usuários que estão navegando. Se há códigos de descontos disponíveis faça com que os usuários possam aplicá-los bem antes da página de checkout. Usuários querem ver os descontos aplicados o mais rápido possível em seu processo de compra.

Embora os sites talvez dificultem a utilização de descontos com o objetivo de aumentar valores brutos de venda, prevenir usuários de poderem tirar vantagem de seus descontos devasta sua credibilidade, e pode frustá-los a ponto deles não comprarem mais. Além disso, facilitando a utilização desses descontos existe outra vantagem: muitos consumidores decidem em gastar um pouco mais para se qualificarem ao “Frete Grátis”.

An Add Coupon Code button in the shopping cart preview on ChildrensPlace.com

1ª Tendência a fugir: Descrições de produtos menores e escondidas

Descrições de produtos estão sumindo  em muitos sites de e-commerce. Elas estão localizadas longe do centro, longe das imagens de produto, inteiramente escondida entre links e apertadas em pequenos espaços. Isso pode ser uma mudança influenciada pelo design para mobile, enquanto as empresas tentam criar informações concisas para uso tanto em telas grandes quanto pequenas.

Enquanto o crescimento das fotografias de produto é recomendada, não pode custar às descrições de produto. Descrições podemresponder questões sobre uso, benefícios, cuidados, materiais e medidas. Isso para não dizer que a descrição deve ser vista logo que a página carregar, porém usuários precisam conseguir rapidamente e com certa facilidade achar e utilizar-se da descrição do produto quando ele quiser.

Informações sobre o produto, em websites, podem ser feita em camadas. Caso o espaço seja muito justo, inclua um resumo ou uma breve descrição no alto da página, com um link visível levando aos detalhes adicionais. Esteja certo que a informação do resumo deve ser clara e descritiva. Os usuários vão procurar por detalhes, mas eles não devem caçá-los, não se deve transformar a busca da informação em uma busca ao tesouro.

A 4-line product description on EsteeLauder.com

2ª Tendência a fugir: Adicionando produtos ao carrinho

Usuários não devem adivinhar se um produto foi adicionado ao carrinho. Muits sites falham em dar feedback adequado em relação à essa ação crucial. Os consumidores não querem procurar a página inteira para descobrir se um produto foi realmente adicionado ao seu carrinho, e você certamente não quer que ele suspenda o processo de compra para tal. A ação precisa ser imediatamente e claramente confirmada.

Feedback pode ser alcançado de uma variedade de modos, desde levando o usuário para o carrinho sobreposto ou modal. Entretanto o que não funciona é adicionar uma linha de texto à página, ou atualizar a quantidade de itens ao lado do ícone do carrinho. Os consumidores deixam passar essas pequenas alterações.

Mudanças sutis de design que são feitas com a intenção de manter os consumidores engajados com a experiência de compra, pode agir como uma distração. Se os usuários não sabem se algo foi adicionado, eles podem largar o processo de compra para checar o carrinho, outros podem simplesmente adicionar novamente o mesmo produto. Se os consumidores não percebem que fizeram tal, eles erão um carrinho lotado e culparão o site pelo fato de ter múltiplos itens repetidos, ao invés de um que ele pretendia comprar.

The result of adding an item to the cart on Costco.com

3ª Tendência a fugir: Falta de atenção com o atendimento ao consumidor

Muitos designs de e-commerce se tornaram mais abertos e arejados ao longo do tempo – até você chegar a área de atendimento ao consumidor do site. Então você verá o quão apertado, desarrumado essa área é. Se um cliente está indo à essa área do seu site, ele provavelmente já encontrou um problema, ou está com alguma pergunta em mente.

Qual a sensação que se passa ao ver a área do seu site que representa a voz da empresa sendo limpa, leve e amigável e a área que é fria, poluída e confusa? Assim que os designs mudam e se atualizam ao longo do tempo, não esqueça a área de atendimento ao cliente do site. 

Designs desatualizados podem ser problemáticos para os usuários caso sejam inconsistentes com o resto do site. Os usuários podem se perguntar se as políticas da empresa se mantém ou duvidam da informação apresentada. Alem disso tipografia minúscula e murais de texto com conteúdo complexo são mais difíceis de se ler e compreender.

Fonte: nextecommerce by Victor Ferrante