Em um post anterior aqui no blog eu citei a problemática que vejo em profissionais associarem o trabalho de design responsivo a etapa de front-end, se preocupando com frameworks e elementos técnicos e esquecendo da importância da concepção de interface e do trabalho de pesquisa com usuários.
O Design Responsivo não é apenas uma questão tecnológica de adaptação para diferentes dispositivos, mas sim uma adaptação para diferentes contextos. Desenvolver interfaces com layouts e conteúdos flexíveis e adaptáveis a uma ampla variedade de resoluções de tela, dispositivos e, principalmente, contextos de uso.
Tratando desse assunto é que apresentei no 7Masters Design Responsivo uma rápida palestra sobre Responsive Design Workflow, detalhando o que acredito ser um fluxo ideal de trabalho para a criação de interfaces responsivas, tirando o foco do front-end e dando maior ênfase a UX. Abaixo, vocês podem ver o vídeo e os slides dessa palestra, e também o detalhamento desse fluxo.
Responsive Design Workflow
Quando começo a trabalhar em uma interface responsiva (seja concebida desde o início, seja em um redesign), meu fluxo de trabalho percorre inevitavelmente cinco etapas básicas:
- Pesquisa com usuários
- Estratégia de Conteúdo
- Design de Interação
- Design Visual
- Implementação
Pesquisa com usuários
A primeira etapa de um Responsive Design Workflow que considero ideal é a investigação para descobrir as necessidades, desejos e limitações dos usuários ao interagir com a nossa interface.
Quando falamos no contexto de uso de um site no desktop (interface gráfica de usuário), sabemos que os usuários possuem uma atenção elevada com maior precisão e menor imersão, produtividade e eficiência nas tarefas, conexão rápida e posição estática, o que nos leva a um ambiente razoavelmente controlado e previsível. Porém, quando consideramos o uso do mesmo site no contexto mobile (interface natural de usuário), temos um usuário com pouca atenção em uma tela pequena com manipulação direta, com menor precisão e maior imersão, com maior foco em tarefas sociais e colaborativas, além da conexão lenta e posição dinâmica, o que nos coloca diante de contextos caóticos e imprevisíveis.
Por isso, entender e investigar os diferentes contextos de uso é tão importante. Entender como os usuários interagem com os seus dispositivos ou quanta informação eles estão dispostos a consumir é essencial para a concepção de uma interface eficiente e usável. Nesse cenário, as pesquisas e entrevistas com usuários para a criação de personas e o mapeamento da jornada do usuário são muito importantes.
Estratégia de conteúdo
De modo geral, para que um conteúdo seja útil na web, ele precisa suportar ao menos um dos seguintes requisitos: [1] representar um objetivo fundamental para o negócio ou [2] auxiliar os usuários na conclusão de uma tarefa.
Quando projetamos a utilização de uma interface nos contextos desktop e mobile, é importante estabelecermos uma escala hierárquica de importância das informações textuais e gráficas do site, para então repensarmos a hierarquia e a pertinência de apresentação dessas informações em diferentes contextos e dispositivos.
Para que isso funcione, é essencial que o nosso Responsive Design Workflow adote uma abordagem Content first, parando de pensar no conteúdo em termos de layout, e planejando o conteúdo independente do design.
Com o suporte de personas e mapas de jornada de usuário, podemos criar inventários de conteúdo para organizar os elementos da interface, considerando a prioridade de execução das tarefas nos diferentes contextos, e reordenando esses esses elementos de acordo com as necessidades específicas dos usuários.
Design de Interação
Depois das pesquisas realizadas e do inventário de conteúdo, é importante nos preocuparmos com a forma que os usuários interagem com os seus dispositivos. Detalhes como a área de toque para os dedos na interface e o tamanho do fluxo de uma tarefa podem fazer toda a diferença na busca de uma informação ou na compra de um produto pelos usuários.
Em um Responsive Design Workflow é essencial o trabalho de prototipação e testes com usuários. Criar sketchs e wireframes para os diferentes breakpoints ajudará a implementar a hierarquia das informações definida no inventário de conteúdo. Criar protótipos navegáveis pode ajudar a simular a experiência de navegação com usuários, a detalhar o fluxo de tarefas e a dimensionar o projeto de maneira mais eficiente.
Design Visual
Projetar uma interface flexível desenhando layouts estáticos com medidas absolutas chega a ser incoerente e contraditório. Aquele processo de ficar desenhando telas e mais telas no Photoshop, além de não simular qualquer interação do usuário com a interface de forma clara, ainda dificulta bastante a criação de elementos de interface consistentes e padronizados.
Um designer visual não precisa perder tempo replicando inutilmente no Photoshop toda a estrutura que já foi definida nos wireframes. Ao invés disso, ele pode dedicar seu tempo na criação da linguagem visual, na definição do modelo de grids e proporções, e na definição de guias de estilo ou style tiles consistentes, deixando o trabalho de montar o layout para a próxima etapa.
Implementação
Existem hoje diversas técnicas do chamado Designing in the browser como metodologia ágil mais eficiente e eficaz para se trabalhar com interfaces responsivas.
Nesse processo, com base na linguagem visual definida, o profissional de front-end – com suporte dos designers – poderá trabalhar em um HTML Style Guide para aplicar todos os estilos na estrutura definida pelos wireframes, criando assim o layout diretamente no código, com os grids fluidos, imagens flexíveis e media queries, testando a flexibilidade e as interações em diferentes navegadores e dispositivos em tempo real.
Conclusões
Logicamente que esse Responsive Design Workflow não precisa ser trabalhado como uma abordagem cascata e sequencial. Para que o projeto tenha consistência, é essencial que profissionais de planejamento, conteúdo, arquitetura de informação, design visual e front-end trabalhem de forma colaborativa em todas as etapas do processo, que também pode ser adaptado ou incrementado de acordo com a necessidade de cada projeto.
As etapas de design de interação, design visual e implementação front-end devem se complementar e se repetir. A criação de sketchs, wireframes, linguagem visual, protótipos navegáveis e aplicação de testes com usuários devem acontecer em ciclos iterativos, da baixa até a alta fidelidade, até se obter o nível de consistência necessário para o lançamento definitivo do site.
Como qualquer processo de trabalho existente, esse Responsive Design Workflow pode (e deve) continuar evoluindo. Por isso, espero que você possa compartilhar nos comentários as suas opiniões e processos de trabalhos, para que possamos continuar discutindo e trocando informações 🙂
Outras palestras do 7Masters Design Responsivo:
Algumas referências interessantes sobre Responsive Design Workflow:
