Atividades relacionadas ao design de interfaces para produtos digitais:

Conhecer os usuários do produto em profundidade, com ferramentas como personas, cenários, diagramas de fluxo, storyboards, wireframes, pesquisas de/com usuários, para verificar elementos e requisitos necessários ao produto. Acompanhamento das entrevistas e pesquisas etnográficas, participação na elaboração de histórias de uso (user stories), para conhecer  padrões culturais de grupos de usuários e seus códigos visuais (cores, sinais, ícones, tipologias).

Também faz parte da atividade de design o conhecimento dos usuários prioritários, para os quais o canal será desenvolvido. Quanto mais amplo é o público, mais preparada a interface precisa ficar para grande variedade de situações de acesso, o que não significa que precise para isso ter mais recursos e funcionalidades. Pelo contrário, o foco no cliente ajuda a reduzir os recursos aos mínimos necessários ao atendimento das necessidades mais importantes.

Mapear experiências dos usuários para dialogar com os desenvolvedores, sejam jornadas de usuários (para mostrar como os usuários avançam em suas ações no produto), diagramas de serviços a serem realizados (para revelar as ações visíveis e invisíveis que o cliente realliza), mapas de empatia (para ver como os usuários reagem durante suas ações com o produto), mapas de relacionamento entre as partes do produto (para compor a experiência geral de uso). Os mapas ajudam a focar as soluções nas demandas dos público.

Além do conhecimento do usuário, é importante também entrar o mais profundamente possível no contexto de produção (processual, informacional, técnico, comercial, editorial) do produto e, de maneira mais específica, no objetivo a alcançar e nos pontos críticos a enfrentar.

O conhecimento do assunto e do contexto de uso também facilita o processo de criação, a escolha de referenciais técnicos, a defesa de soluções na hora de tomar decisões.

O cliente confia mais no fornecedor que entende (ou procura entender) os objetivos do produto e tende a se converter em parceiro da equipe de design – em vez de cruzar os braços e esperar que o produto apareça pronto para aprovação na sua frente –, e coopera mais na criação e no aperfeiçoamento do produto.

Participar da elaboração e de testes de usabilidade, a partir de protótipos de papel ou protótipos interativos, de modo a avaliar funcionalidades e motivações dos usuários em relação ao produto.

Avaliar o conceito editorial, bem como os casos de sucesso na mesma área, para a criação de uma maneira de traduzi-lo visualmente.

Conversar com o editor ou responsável pelo conteúdo sobre o tamanho dos títulos e textos, a necessidade de teasers e subtítulos, o tamanho das chamadas na página Principal e páginas internas, de olhos dentro dos textos, a necessidade de estilos especiais para citações e fontes bibliográficas, de agrupamentos de links.

Avaliação do conceito editorial
A malha e os pontos são elementos que estruturam o design deste site sobre Lucio Costa. A estreita ligação entre estes elementos e a atividade do arquiteto relaciona o layout ao conteúdo publicado (acesso em 22.6.2013)

Detalhar/criar uma malha (grid) adequada ao produto final. No caso de sites responsivos, pode-se optar por uma malha de 1200 ou 1280 dpi, como em http://1200px.com/. Pode-se também optar pelos modelos baseados nas malhas do Bootstrap 3, que usam malha para desktop com base em 1170 px. Em caso de aplicativos móveis, são comuns as malhas baseadas em 4 ou 8 colunas.

Pode-se optar por estabelecer também um limite horizontal para publicar as informações mais importantes. No entanto, a área “acima da dobra”, ou localizada em uma área limite de tela com um tamanho definido como padrão para os usuários mais comuns, já não é tão importante, pois a maioria das pessoas está mais acostumada a fazer a rolagem da tela do que no início da web.

Organizar imagens gerais das interfaces como esboços e verificar sua aderência às necessidades do projeto. Imagens genéricas podem ser esboços conceituais, que incluam apenas os elementos básicos, como fontes, cores, aplicação de logotipo, uso de imagens para formatação de botões. Padrões ou estilos visuais, ou “style tiles”, ou “style prototypes” podem ser feitos como imagens estáticas ou em HTML, já prevendo uma largura padrão para a tela em monitor com resoluções especificadas.

Os estilos visuais, ou de layout, reveem modelos simples para desktop e para dispositivos móveis, embora nesse momento seja mais importante avaliar a inventividade e a originalidade da solução e sua afinidade com o público principal.

Pode-se usar para isto ferramentas de AI, como a Stable Doodle, da Clipdrop. Mas é preciso cuidado para que a transformação de imagens de rascunho em imagens finalizadas para publicação, muito prática para designers sob pressão, não corra o risco de circular em um universo de informações autorreferente e baseadas em clichês. E neste universo visual, com ou sem o uso de Ai, são os verdadeiros criadores que se sobressaem.

Criar o layout e alternativas em programa adequado ao projeto, para a escolha do cliente e/ou da equipe responsável pela seleção. Muitas vezes as soluções são esboçadas de maneira informal, com os elementos essenciais, como descrito acima, e vão sendo detalhadas, com a inserção de elementos menos críticos e de acabamento até que fiquem satisfatórias tanto para seus autores quanto para clientes e o público. A produção de diversas soluções, por diversos profissionais, atenua a ligação de cada um com apenas um resultado e enriquece o resultado com soluções de consenso.

Embora seja comum a apresentação ao cliente de layouts em formato de imagem, o desenvolvimento do layout em HTML com CSS mostra a ideia com maior precisão, especialmente os efeitos visuais que mudam com a ação dos usuários, bem como o modo de uso dos botões e recursos dinâmicos e detalhes de acabamento. Muitos clientes aprovam um layout apresentado como imagem e, ao ver o resultado em HTML, pedem para fazer tantas mudanças que é preciso quase refazer a solução.

Mesmo que os elementos, a composição e a descrição sejam satisfatórias em papel ou na imagem estática, a demonstração do uso permite uma percepção completa da solução, tanto sob o ponto de vista visual como funcional.

No momento da criação do layout, o designer precisa considerar aspectos do mercado (tendências, identidade específica), aspectos relacionados à composição do conjunto de elementos (funcionais, de conteúdo) no contexto do veículo. E também aspectos específicos da interface digital, como o estímulo à interação com/entre pessoas e dispositivo, micro etapas entre estágios das ações, possíveis contextos de uso.

Testar a solução com conteúdo em diferentes formatos, seja conteúdo editorial (textos, imagens, vídeo, músicas) ou funcional, como formulários, botões. Testar imagens em diferentes formatos, aplicar barras de navegação adicionais em áreas internas, prever a diagramação de gráficos e tabelas.

Apresentar presencialmente as soluções aos clientes, patrocinadores e stakeholders, de modo a que a soma de opiniões enriqueça a solução.

Apresentação das soluções aos clientes, patrocinadores e stakeholders
Estas duas telas explicam o redesenho do site da WebMD para o público. Descrevem como funciona, como usar e como se pode achar o conteúdo de cada área. A apresentação permite que o usuário passe o mouse sobre cada área e visualize as explicações e o layout de cada uma.
webMD_desenvolvimento-21c
A apresentação pode funcionar também para mostrar aos stakeholders de um projeto de website as justificativas para o conteúdo e o layout da interface. O ponto de vista do usuário lembra a todas as pessoas relacionadas ao projeto quem, afinal, vai acessar o canal.
Apresentação das soluções aos clientes, patrocinadores e stakeholders
A imagem acima explica o redesenho de um site para os leitores. Descrevem como os donos de negócios de alimentação podem comprar online seus acessórios. A linha vermelha destaca os elementos sobre a imagem, azulada e cinza. Embora as explicações não estejam próximas ao destaque, o título está claro e valorizado pelo ícone, o que facilita a localização. Além disso, os textos são objetivos e sintéticos, adequados para buscas rápidas de informações.

O cliente pode pedir que, para a escolha do layout seja feito um teste com usuários representativos do público-alvo do site. Nos testes, a apresentação de duas ou mais soluções permite que os usuários se sintam mais confortáveis para rejeitar totalmente as que não agradam, embora evidencie que os designers podem não estar seguros em relação à melhor opção.

Aperfeiçoar o produto de maneira incremental, à medida em que tiver retorno sobre os resultados parciais, e, se possível realizar alguns testes rápidos das novas soluções.

Detalhar as soluções por escrito, incluindo todos os elementos da interface, como diferentes tipos de títulos, subtítulos, textos, imagens (fotos, gráficos, tabelas, ícones) elementos de navegação (barras, botões, menus, links), diferentes tipos de formulários, gráficos e tabelas, vinheta de apresentação de vídeos e arquivos sonoros, moldura para apresentação de vídeos, páginas especiais e elementos específicos a cada orientação comercial e editorial.

Também registrar as decisões e especificações gerais editoriais e de layout (conceito geral, tipologias, palheta de cores, imagens, composição, resolução de tela prioritária considerada, aparência dos botões, setas, bullets elementos secundários de sinalização), que serão detalhadas ao longo da produção. Este documento é útil para a orientação da equipe de programação sobre o layout das páginas elementos e funcionalidades especiais.

Testar as soluções de layout para verificar sua efetividade, o que pode levar à revisão e ao aperfeiçoamento do produto, de acordo com a demanda do público. Dessa maneira, a designer pode ter certeza de que as soluções não estão atreladas a opiniões e percepções pessoais sobre o produto.

Outras atividades

Quando, nas primeiras reuniões, o cliente pedir um redesenho completo de seus canais online, verificar se podem ser feitas pequenas mudanças incrementais, que sejam testadas e aperfeiçoem aos poucos o veículo, seus processos de atualização, de avaliação, de SEO, à medida que são coletadas informações e examinados novos padrões tecnológicos e comportamentos do público.

Incluir um ou mais designers na equipe desde as primeiras etapas de projeto, inclusive no planejamento estratégico, desenvolvimento, marketing, que sugira soluções relacionadas ao formato do produto final.

Podem ser produzidos diversos tipos de diagramas como produtos preliminares ao design das interfaces, o que varia de acordo com questões específicas a examinar em cada projeto. As jornadas do cliente mostram como os usuários progridem nas (ou entre) as interfaces do produto, destacando os pontos de contato críticos para a experiência de uso. Os diagramas de serviços descrevem como a organização se interage com o cliente, revelando os passos muitas vezes invisíveis que acontecem para cada ação que um cliente realiza. Os mapas de empatia exploram o que clientes vêem, pensam, dizem e sentem, enquanto interagem com o produto em projeto. E os diagramas de fluxo de sistemas descrevem como as partes subjacentes do sistema interagem para produzir a experiência dos usuários. (1)

Incluir integrantes de diversas competências no processo de mapeamento da experiência do cliente, de modo a criar uma vivência real dos stakeholders em relação às principais questões a abordar no projeto do produto.

Descrever o processo de criação > avaliação > ajustes > aprovação e desenvolvimento antes de começá-lo, bem como os produtos relativos ao layout que serão apresentados. Dessa maneira, o cliente (ou dono do produto, se for o caso) pode acompanhar cada etapa e pedir antecipadamente o acréscimo ou supressão de uma atividade ou produto (entregável).

Checar a qualidade do layout de acordo com requisitos pré-estabelecidos ou lista de referência já existente. A lista pode ficar online e ser conferida pelo arquiteto da informação, gerente do projeto, analista de sistemas e desenvolvedores, para ver se não falta nada a criar e a apresentar ao cliente.

Embora a lista de checagem possa se basear em elementos genéricos de layouts de produtos digitais, é sempre necessário enfatizar a importância de adaptá-la a cada projeto.

Na avaliação do layout, é sempre importante manter em perspectiva que a perfeição total, de pixels, é praticamente impossível de alcançar. Se há uma diferença de 2 pixels na localização de um botão no Chrome em relação ao Firefox, podemos nos perguntar quanto isto vai realmente afetar a experiência do usuário e priorizar a plataforma que tem maior número de usuários.

(Atualizado em 17.11.2017)

 

Referências

1) The power of experience mapping, Jared M. Spool (User Interface Engeneering, acesso em 17.11.2017)

 Ferramentas e recursos auxiliares para o layout de interfaces

  Foundation – malha (grid) com colunas dimensionável para qualquer tamanho que permite a criação de
layouts com elementos pré-elaborados customizáveis.

MStyleguide and boilerplate patterns, coleção de links de guias de estilo front end e bibliotecas de padrões, com exemplos novos e já usados, incluindo agrupamentos de elementos com objetivos semelhantes.  (de Cloud Four Blog, acesso em 27.4.2015)

Macaw, ferramenta para a criação de layouts visualização direta do layout e configuração de CSS (acesso em 20.9.2014)

Sketch – ferramenta para o design de interfaces (Mac), fugindo do uso do Photoshop (acesso em 20.7.2014)

Spiffy HTML5 site templates – modelos responsivos em HTML5+CSS3 (HTML5up, acesso em 6.7.2014)

Get Templates – modelos responsivos em HTML5+CSS3 (GetTemplate, acesso em 6.7.2014)

Modelos de elementos de user interfaces para web designers (acesso em 21.7.2010)

Notable, permite o retorno sobre o design de telas, conteúdo e código de páginas ou plataformas web direto do browser (acesso em 24.5.2010)

Sketchbook Pro, permite o desenho livre de esboços, com suporte de ferramentas de texto e efeitos de texturas