leticia.mayumiLetícia Ozono

Todos os artigos por leticia.mayumi

 

Navegando com abas no mobile

No app Imagly a primeira versão da navegação utilizava apenas o side menu: Só que, depois de realizados testes de usabilidade, perceberam que muitos usuários se confundiam quando estavam na página de timeline de imagens ou quando estavam na parte de imagens favoritadas. Isto porque as duas páginas eram muito semelhantes entre si e, uma
Continuar lendo…  

UX não é só para designers

Uma dúvida que surge com muita frequência por aí é: “Eu gostaria de trabalhar com user experience (UX), mas não sou designer. O que eu faço?” Bom, a primeira coisa que precisamos entender do que se trata a User Experience (UX), para que então esse conceito fique mais claro. O que é UX? Quando lançamos
Continuar lendo…  

Utilizando side menus em apps

No app Imagly temos a primeira tela mais ou menos assim: Logo de cara nos deparamos com um menu imenso, cheio de opções para interagirmos, mas que acabou jogando todo o conteúdo do app lá para baixo. Para visualizar o que realmente importa no app eu preciso scrollar mais e mais até que todo o
Continuar lendo…  

Ícones femininos na história da tecnologia

Se te perguntassem hoje todas as mulheres ícone que você conhece na história da humanidade, quantas conseguiria lembrar? E dentro da sua área profissional? Muitas pessoas (até mesmo eu) poderiam acabar lembrando de alguns poucos nomes… Ao longo da história acabamos dando pouca evidência às grandes conquistas femininas e passamos batido por uma série de
Continuar lendo…  

Quando coletar cadastros de usuário

No Aluroom, um aplicativo de e-commerce, foi implementada uma feature de login logo que o usuário abre o app: Nessa tela temos apenas duas opções: Fazer login ou criar uma conta. Isto é, não conseguimos entrar no app sem estar logados. Só que, sem saber ainda do que se trata o app e o esquema
Continuar lendo…  

Lidando com Empty States em apps

No app Imagly, quando se entra a primeira vez em uma aba específica, temos a seguinte tela: Uma tela em branco, sem nenhuma orientação, não diz muito para nós… Do que será que se trata? Como faço para adicionar dados nessa tela? Deu algum bug? Acontece que essa é a aba de itens “Salvos”. Só
Continuar lendo…  

Guiando o usuário pelo seu app

A primeira vez que um usuário entra no app Imagly, se depara com essa tela: Depois disso, a primeira intenção do usuário seria começar a interagir com o app, mas por onde começar? Em uma primeira experiência, podemos entender do que se trata o app pela descrição do aplicativo na loja em que baixamos ou
Continuar lendo…  

Coletando informações do usuário através de Wizards

Na plataforma de ecommerce da Casa do Código, quando queremos comprar algum livro, precisamos passar estas informações: Analisando o que recebemos é possível perceber que a quantidade de informações a passar é muito grande. Se todas essas informações formassem um único formulário, teríamos algo como: Os usuários que lidassem com ela poderiam acabar se confundindo
Continuar lendo…  

Apresentando seu app com Walkthroughs

Hoje na Alura todos nós usamos o Slack como ferramenta interna de comunicação da empresa. E, se é uma ferramenta de comunicação, a primeira coisa que pensei é em instalar o app também no celular e poder acompanhar de qualquer lugar as mensagens. Só que, quando instalei o app, algumas coisas eu ainda não sabia
Continuar lendo…  

Quando usar carrossel em um site?

Em um site de vendas online adicionaram um carrossel logo na primeira página do site: A ideia do carrossel era mostrar diversos produtos destaque aos usuários que entrassem no site. Só que, olhando para esse carrossel, podemos perceber que algumas coisas dificultam um pouco essa proposta: Muito texto e pouco apelo visual Pouco tempo de
Continuar lendo…  

Entenda, de fato, o que é o design thinking?

Você já enfrentou alguma situação em que precisava levantar soluções para problemas reais que enfrentava? Bom, tanto em empresas, quanto no dia a dia de nossas vidas, nos deparamos com diversas situações que demandam muito de um pensamento criativo e jogo de cintura. Para isso, existe uma prática chamada Design Thinking que, assim como diz
Continuar lendo…  

Designer ou UX Designer?

Recentemente me fizeram uma pergunta muito interessante: “Eu sou da área de Design Gráfico, mas gostaria de migrar para UX. Você acha que vale a pena? Faz sentido?” Mas o que mais me chamou atenção nessa pergunta é: Por que não valeria a pena? Bom, eu também trilhei esse mesmo caminho. Quer dizer, ainda estou
Continuar lendo…  

Ancorando elementos com HTML5

No blog da Caelum temos alguns posts bem longos sobre determinados assuntos que demandam muito conteúdo, mas isso deixa a rolagem da página gigantesca. Isso é o que aconteceu, por exemplo, com o post que o Sérgio Lopes escreveu de Por uma Web mais rápida: 26 técnicas de otimização de Sites: Mas, e se eu
Continuar lendo…  

Prós e contras do scroll infinito

No passado, a pesquisa de imagens no Google Imagens tinha um sistema de paginação mais ou menos assim: Para pesquisar imagens de qualquer tema precisávamos seguir um processo de scrollar a página até o limite de resultados e passar para a página seguinte com mais resultados. A cada nova página isso se repetia. Depois de
Continuar lendo…  

Como o design thinking é aplicado como ferramenta estratégica nos negócios?

O design thinking é uma estratégia criada nos Estados Unidos na década de 2000 a partir de uma observação do grande sucesso das empresas de design. Vendo a enorme criatividade desse ramo, gestores de outros setores começaram a se questionar — o que o torna tão diferente de nós? Após muita observação, a resposta encontrada
Continuar lendo…  

Criando regras para microinterações

O desenvolvedor de um projeto de aplicativo recebeu a tarefa de adicionar as novas microinterações planejadas para o app da marca, porém a única orientação que recebeu foi: Adicionar botão intuitivo para verificar notificações. Porém, quando o desenvolvedor ia começar a elaborar a nova feature algumas dúvidas surgiram: Esse botão abre uma nova página, um
Continuar lendo…  

Melhore a experiência do usuário com Motion Design

Você precisa comprar um botijão de gás e escolhe o app Chama para fazer seu pedido. Quando abre o app, suponha, hipoteticamente, que se depara com algo mais ou menos assim: Agora, se analisarmos em paralelo essa interação hipotética com o app real, teríamos algo assim: Note que, no primeiro caso, temos uma mudança muito
Continuar lendo…  

A importância do feedback para a experiência do usuário

Já imaginou ter que realizar um cadastro de informações suas e acabasse enviando as informações assim: Perceba que no campo “Email” do formulário de cadastro, o texto digitado parece mais com o endereço de um site do que de um e-mail, justamente porque não tem um “@” ali no meio. Ou seja, enviamos nosso cadastro
Continuar lendo…  

Como bons gatilhos facilitam a vida do usuário

Imagine que você está em sua timeline no Instagram e encontra uma imagem que gostaria de curtir, comentar ou mesmo enviar para outra pessoa, mas se depara com esta tela: Olhando para este resultado pela primeira vez, você poderia se questionar: Onde clico para curtir a imagem? E como comentar ou enviar para outras pessoas?
Continuar lendo…  

Como montar um portfólio de Design

Imagine que uma proposta de freelance, ou mesmo de emprego, surge e você precisa entregar seu portfólio para avaliação. Quando o cliente abre o portfólio, encontra algo mais ou menos assim: Logo em seguida, este mesmo cliente recebe um portfolio mais ou menos assim: Repare que, no primeiro caso, temos uma apresentação simples, não tão
Continuar lendo…  

O que são microinterações?

Imagine que você está tentando fazer o download de um arquivo e se depara com esta situação: Note que, aparentemente, nada aconteceu. Mas, ao verificar a relação de arquivos no sistema, encontramos o arquivo baixado. Você acredita que ao interagir com este App o usuário conseguiria, intuitivamente, entender o que aconteceu? Provavelmente não. Isto porque,
Continuar lendo…  

Automatizando ações e tarefas repetitivas no Photoshop

Para fazer o livro das turmas formandas de uma faculdade, o designer recebeu as seguintes orientações: “Todos as fotos dos alunos deverão ter um filtro azul, juntamente com seu nome. São um total de 100 alunos.” Então, para fazer as edições, só precisamos ir aplicando o filtro em todas as fotos, repetidas vezes, incluir o
Continuar lendo…  

UX não é só uma questão de usabilidade

Foi criado um App de previsão do tempo e o resultado ficou mais ou menos assim: Note que, em poucos passos, conseguimos chegar ao principal objetivo do App de forma relativamente simples. Ou seja, a usabilidade está bem resolvida e, portanto, garantimos que o usuário terá uma boa experiência, certo? Não exatamente. Comumente cometemos o
Continuar lendo…  

Entendendo o Material Design

Ao fazer uns testes de layout, a equipe de design avaliou esta primeira versão: Percebe-se que há elementos demais neste layout. Muitas imagens, ilustrações e detalhes decorativos . Além disso, ao rodar o layout em uma página, o tempo de carregamento fica enorme, devido à quantidade de imagens que pesam para carregar. Certo, então vamos
Continuar lendo…  

Detalhes que fazem toda a diferença em usabilidade

Você já passou pela situação de entrar em um site de ecommerce e ter que escolher um produto sem foto? Algo mais ou menos assim: Mas afinal, do que se trata este produto? Como ele é? Ou ainda, por que eu iria comprá-lo se não faço a menor ideia do que ou como é? Perceba
Continuar lendo…  

Otimizando imagens para melhorar a performance

Quando o site da startup Armazém de Ideias foi ao ar, perceberam que a página, ao ser requisitada, apresentava o seguinte comportamento: Note que, ao carregar a página, algumas imagens demoraram alguns milésimos de segundos para serem apresentadas na tela. E então você pode estar se perguntando: “Ok, mas qual o problema disso?” Analisando o
Continuar lendo…  

Diagrame como um profissional: veja 7 hacks para o Indesign

Certamente você já sabe que trabalhar com diagramação usando o Adobe InDesign é uma das melhores alternativas para a criação de livros, revistas, folhetos, e-books, aplicativos e outros tipos de documentos com altíssima qualidade. Mas, você sabia que o seu trabalho pode ser facilitado? Para isso é que existem os chamados InDesign hacks! No post
Continuar lendo…  

Site único e responsivo ou sites dedicados?

Ao desenvolver um site para uma empresa, a equipe chega ao seguinte questionamento: Devemos desenvolver um site único, responsivo para diferentes tamanhos de tela, ou um site dedicado especialmente para desktop e outro para mobile? Para entender as diferenças em cada possibilidade, desenvolveram os seguintes layouts: Bom, observando os modelos não identificamos problemas, de fato.
Continuar lendo…  

5 Dicas de usabilidade para textos na web

Um cliente pede a produção de um layout para blog e, na entrega final, as áreas de textos ficaram assim: Repare que quando olhamos para este resultado temos um desconforto na leitura dos textos. Por que será que isso acontece? A fonte muito clara em fundo branco, os buracos ao longo do texto, e mesmo
Continuar lendo…  

Como melhorar a usabilidade com ícones?

Um aplicativo de vendas foi lançado e o layout desenvolvido pelos designers ficou assim: Ao olharmos para este layout percebemos que existem diversas opções e botões a serem acionados, mas ao clicar no ícone da pessoa sorrindo, por exemplo, para onde seremos direcionados? Poderia ser uma aba de “itens mais populares” ou, quem sabe, “itens
Continuar lendo…  

Definindo a dimensão ideal para o layout do meu site

Ao desenvolver o layout de um site o designer entregou apenas a versão para desktop e, no momento de realizar os testes em diferentes dispositivos chegou-se a esta situação medonha/preocupante/esquisita: Se analisarmos, percebemos que as imagens estão muito reduzidas, comprometendo a visualização de detalhes, bem como o logo espremido e quase ilegível. Além disso, não
Continuar lendo…  

Por que usar Web Safe Fonts é uma boa ideia?

Desenvolvendo um site para um cliente fictício me deparei com a seguinte situação: Ao acessar meu site em um navegador diferente do que estava habituada, os textos ficaram todos diferentes. Por que será que isso aconteceu? A utilização de fontes na web é até hoje um problema quando pensamos em compatibilidade. De uma forma geral,
Continuar lendo…  

Como inserir textos sobre imagens e obter um melhor design?

A empresa AirTravellers, uma agência de viagens, solicitou um banner e chegaram ao seguinte resultado: Olhando para esse banner percebemos que a leitura do texto ficou prejudicada nas áreas em que a segunda frase se sobrepõe aos prédios, devido ao baixo contraste texto-imagem, ou seja, a legibilidade foi comprometida. Generalizando, sempre que precisamos escrever em
Continuar lendo…