Estilo De Vida

Fluxos de trabalho de design para desenvolvedores: entregando melhor UX / IU em tempo e forma

Nota do editor: Lubos Volkov é um designer experiente que trabalhou remotamente com um grande número de desenvolvedores ao longo de sua carreira. Como o _designer do produto No ApeeScape, Lubos interage diariamente com membros da equipe de uma variedade de departamentos, incluindo desenvolvimento, comunidade e conteúdo. Ele é um designer talentoso cujas habilidades de comunicação contribuem para seu sucesso. Neste tutorial, Lubos compartilha suas experiências e maneiras de otimizar os fluxos de trabalho de designer para desenvolvedor, IU e UX que levarão a produtos de alta qualidade entregues mesmo antes do prazo ._

Trabalhe com um grande designer o A equipe de design pode ser um recurso inestimável para qualquer equipe. Com canais de comunicação claros e cooperação fluida, o projetista deve fornecer tudo o que você precisa para acelerar o processo de construção e limitar ao máximo as dúvidas e confusões.

O que você pode fazer, o desenvolvedor UX , para garantir que o produto que você construiu seja entregue em tempo hábil, sem sacrificar a qualidade da interface e a experiência do usuário?

Ligue para seu designer; É hora de reestruturar o fluxo de trabalho de design da IU.

Minha resposta: Deixe seus designers se envolverem desde o primeiro dia e mantê-los envolvidos durante todo o processo de desenvolvimento de UI / UX. Certifique-se de estabelecer linhas de comunicação claras e de que haja um processo de mensagens consistente entre desenvolvedores e designers.

Você tem tudo que você precisa?

A pior coisa que pode acontecer durante a implementação de qualquer IU é falta de comunicação entre designer e desenvolvedor (a menos que sejam a mesma pessoa) . Alguns designers pensarão que seu trabalho está concluído assim que enviarem o PSD, mas, na realidade, isso está errado! Você deve sempre ter um processo de comunicação que perdure até o envio dos PSDs.

Projetos onde o designer solteiro envia os arquivos de design, e o desenvolvedor solteiro os implementa, são projetos que simplesmente falhou.

Em muitos casos, levará algum tempo até que os designers vejam algum UX / UI final implementado. Para sua surpresa, o Construir muitas vezes é completamente diferente da apresentação inicial. (Isso aconteceu comigo mais de uma vez. Enviei os arquivos originais com descrições completas e protótipos de interação, mas quando finalmente vi o projeto alguns meses depois, ele tinha uma estrutura diferente, cores diferentes e nenhuma interação no local.)

Alguns designers podem me odiar por isso, mas este processo de trabalho de design requer muito trabalho “extra” da sua parte. No entanto, criar e fornecer informações e recursos de forma organizada é melhor para o projeto e a equipe em grande escala.

Se um desenvolvedor tiver tudo o que precisa diante de seus olhos, o processo será mais rápido. Um PSD limpo e organizado não é suficiente.

O que você precisa para realizar o trabalho de maneira eficaz e eficiente?

Esses são os grandes recursos que um desenvolvedor deve esperar de um designer para implementar Design UX / UI :

Arquivo original - O designer deve colocar todos os elementos do aplicativo em um único arquivo. Este arquivo deve conter botões, caixas de seleção , Estilos de cabeçalho , fontes, cores, etc. Basicamente, com base nas informações deste arquivo, o desenvolvedor deve ser capaz de recriar qualquer interface do zero. É muito mais fácil para um desenvolvedor exportar qualquer elemento de um PSD sozinho do que pesquisar vários arquivos.
Recursos - Certifique-se de que os desenvolvedores tenham todos os recursos necessários, pois os arquivos originais não devem ser alterados novamente.
Protótipos de interação - Os dias de 'telas estáticas' não existem mais. Usar animações e interações inteligentes para suavizar o processo de UX e implementá-lo é uma prática muito comum hoje. Mas, você não pode simplesmente dizer 'isso vai deslizar da esquerda' para um desenvolvedor. O designer deve criar o protótipo para essa interação e incluir informações como velocidade, velocidade, etc., e o designer deve especificar cada um desses valores.
A convenção de nomenclatura - Requer uma estrutura para nomear os diferentes arquivos e mantê-los organizados. Isso tornará as coisas mais fáceis para vocês dois quando se trata de navegar pelos arquivos. (Ninguém gosta de ter coisas escondidas em uma pasta invisível.)
Recursos HDPI - Vivemos “tempos difíceis”, com a grande densidade de telas. Certifique-se de que o designer forneça as imagens em todas as resoluções necessárias, para que seu aplicativo tenha uma boa aparência em qualquer lugar. Nota: use o máximo de vetores que puder, vai te ajudar muito (svg).

Se houver algo que você não encontrar durante a implementação, não tenha medo; Fale com o designer e peça. Nunca pule ou economize em nada! Eles são membros da mesma equipe e seu trabalho é entregar o melhor produto possível. Se o designer falhar, você também falha.

Trabalho em processo

Use seus designers durante o processo de implementação de UI / UX. Não os coloque de lado, esperando que apenas 'empurrem os pixels'. Um designer vê possíveis inovações antes mesmo do início da implementação. Aproveite isso, mantenha-os informados. Forneça a eles acesso para visualizar e testar o trabalho em andamento. Tenho certeza de que ninguém gosta de compartilhar coisas inacabadas, mas é muito mais fácil fazer alterações no meio do Construir para fazer quando acabar. Isso poupará seu tempo e evitará trabalho desnecessário. Depois de dar ao designer a chance de testar o projeto, peça a ele para compilar uma lista de problemas e soluções e sugerir melhorias.

O que fazer quando um desenvolvedor tem uma ideia que mudará a aparência de um aplicativo? Converse sobre isso com ele designer e nunca permita que um desenvolvedor modifique o design sem consultar o designer. Este processo de trabalho de design o ajudará a entrar no caminho certo. Um grande designer tem uma razão para cada item na tela, e remover uma única peça sem entender por que está lá pode arruinar a experiência do usuário do produto.

Design de gerenciamento de projeto UI / UX

Os designers pensarão que os desenvolvedores podem dar vida a um design em um dia, ou mesmo em uma hora. Mas, como um ótimo design, um ótimo desenvolvimento exige tempo e esforço. Mantenha seu designer ansioso um pouco longe para que ele veja pelo menos o processo do Construir . Usar software externo para gerenciar um projeto, para ter certeza de que todas as análises foram vistas, é uma ótima maneira de garantir que você não se esqueça de nada importante ou de qualquer informação que foi discutida em uma conversa por Skype ou e-mail. E sejamos honestos: às vezes as mudanças e atividades nunca são comunicadas até que aconteçam.

Qualquer solução que você usar, certifique-se escolha um processo de trabalho que toda a equipe possa adotar e usar de forma consistente. Em nossa equipe, tentei propor Basecamp porque era isso que eu estava usando, mas nossos desenvolvedores de front-end pensaram que tinha recursos limitados. Eles já estavam usando outro software de gerenciamento de projeto para acompanhar insetos , progresso, etc., como JIRA, GitHub e até mesmo Evernote. Eu entendi que o processo de gerenciamento e controle de informações e comunicação deveria ser o mais simples possível, então tive que migrar meu processo de trabalho de design de IU para o JIRA. Eu queria ter certeza de que eles entendiam meu processo de trabalho e progresso, mas não queria que eles sentissem que design seria qualquer coisa além de gerenciamento.

Aqui estão algumas sugestões para ferramentas de gerenciamento de projetos:

Campo de base - Mantém o controle das tarefas de design e desenvolvimento em andamento e permite exportá-las facilmente. Ele também possui um cliente móvel muito simples.
JIRA - Uma plataforma totalmente personalizável onde você pode facilmente criar painéis para controlar atividades como back-end, front-end, design, etc. E acho que, embora o cliente móvel seja um pouco fraco, é uma ótima solução para grandes equipes que incluem rastreamento de bugs .
Email - Excelente para iniciar uma conversa ou enviar fotos. Mas por favor, tenha cuidado se você usa e-mails para enviar críticas ou comentários. As coisas podem se perder facilmente.

Você também pode tentar Trello e outros softwares de gerenciamento de projetos, mas os mais usados em nossa indústria são Basecamp e JIRA. Novamente, o mais importante é encontrar um sistema de gerenciamento de projetos que todos possam usar consistentemente, caso contrário, não terá sentido.

UX design e desenvolvimento vêm juntos

O designer e o desenvolvedor são uma combinação poderosa. Certifique-se de compartilhar ideias de UI e UX com a maior frequência possível. Os desenvolvedores devem estar dispostos a ajudar o designer a ter ideias, enquanto um designer deve ter pelo menos uma compreensão básica das tecnologias que estão sendo usadas.

Cheguem a um acordo sobre o processo de trabalho do design. Não implemente apenas cegamente o que seus designers criam. Seja proativo e crie algo que seja bonito, mas que tenha uma ótima experiência do usuário, aproveitando as vantagens de suas duas perspectivas diferentes. Os designers pensarão fora da caixa e verão animações, ideias, pixels e botões malucos, enquanto os desenvolvedores examinam a tecnologia, os limites e as velocidades de choque.

Seguindo este tutorial sobre design de IU, você obterá clareza em seu processo de trabalho de design.

Na minha experiência, todo designer enlouquece com pixels e conceitos legais, mas às vezes um designer chega ao ponto em que eles têm uma ideia, mas o desenvolvedor os interrompe e diz: “Isso não vai funcionar bem depois de feito. Implementado . Haverá problemas de desempenho no consumo ”. Recentemente, estava pensando em implementar uma janela modal com um fundo fora de foco, mas isso fazia com que os tempos de carregamento da imagem fossem muito pesados. Para resolver isso, o desenvolvedor sugeriu o uso de uma camada de cor simples, que carregaria mais rápido e manteria a qualidade da imagem. Designers prestam atenção: não comprometa a experiência do usuário para design .

O Círculo de Observações

As observações do designer são cruciais e devem acontecer tantas vezes quanto possível. É provavelmente o que mais exige tempo (e energia) de você, mas você precisará abraçá-lo para obter resultados perfeitos. Aqui estão algumas dicas no fluxo de trabalho de design de UX e UI para tornar suas observações perfeitas.

Seja visual - Os comentários e críticas devem ser o mais específicos possível. A melhor maneira de fazer isso com precisão é fazer uma captura de tela e destacar o problema que você deseja corrigir. Ficaria melhor se você tivesse fotos de um implementação atual vs como deveria ser . A comunicação visual eliminará 50% das perguntas.
Seja descritivo - As observações devem ser precisas. Você não pode simplesmente dizer 'mova este botão para cima'. O designer deve sempre especificar quantos pixels devem ser movidos para o referido botão, que espaçamento deve ser usado, etc. Sempre inclua uma explicação do problema e a solução apropriada. Vai demorar muito, mas vale a pena.
Seja paciente - Lembre-se de que o designer e o desenvolvedor não compartilham a mesma abordagem. Se os desenvolvedores não entendem totalmente a ideia do designer, isso pode levar a decisões erradas. Em cada caso, ambos os lados precisarão ser pacientes e estar dispostos a ajudar os outros membros da equipe. Realmente é difícil às vezes, mas é uma habilidade que todo designer e desenvolvedor deve aprender.

É bastante óbvio que essas coisas precisam ser combinadas para torná-las mais adequadas a um processo de trabalho de design. Mas que ferramenta poderia ajudá-lo a enviar críticas e comentários?

O email - Não tenho medo de dizer que esta é a plataforma mais comum para enviar comentários. Não há problema em usá-lo, se você seguir algumas regras simples:
- Primeiro, use um único tópico de conversa para observações. Não coloque todas as modificações em um novo e-mail com um título diferente.
- Em segundo lugar, crie uma lista de correções. Tente sentar e pensar sobre cada modificação ou correção que descobrir.
- E, por último, não envie listas em massa de uma vez. Tente separá-lo em pequenas listas individuais e analisar parte por parte.
Skype (Hangouts) - A voz é realmente uma ferramenta poderosa para fazer críticas construtivas. Você pode fazer e responder perguntas imediatamente. Mas não deixe de fazer anotações e enviá-las no próximo e-mail após a ligação.
Ferramentas colaborativas - Para ser honesto, não sou um grande fã de ferramentas de colaboração. Mas eles têm um grande benefício: ajudam você a obter feedback. Fazer e responder perguntas é rápido e permanece lá para sempre.

Aqui estão algumas das melhores ferramentas:

Anotações de críticas e observações:

Ferramentas de colaboração:

conclusão

Estabeleça um sistema de processo de trabalho de design de UI / UX que mantenha as linhas de comunicação abertas durante todo o processo de design e desenvolvimento. Isso permitirá que você implemente grandes ideias, preveja problemas em potencial e priorize questões importantes.

O desenvolvedor e o designer podem criar grandes coisas juntos, desde que estejam dispostos a trabalhar como um só equipamento , Para aprender juntos e criar tutoriais como este!