Um Design De Fluxo De Trabalho Para Developers: Concretize Melhor UI/UX Design

UX Design | 08th Março 2017

Trabalhar com um ótimo designer, ou equipa de design, pode ser uma mais- valia inestimável. Com canais abertos e não formais de comunicação e colaboração o designer será capaz de lhe fornecer tudo o que é necessário para acelerar o processo de construção, limitando o mais possível questões e confusões que possam surgir.

Em que pode o UX developer contribuir para assegurar que o produto que construiu é entregue dentro do tempo previsto, sem sacrificar a qualidade da interface em utilização, bem como a experiência de utilizador?

A minha resposta: Envolva os seus designers desde o primeiro dia, e mantenha-os envolvidos no decorrer de todo o processo de desenvolvimento do UI/UX. Assegure-se que estabelece linhas de comunicação aberta e uma consistente transmissão de comunicação entre developers e designers.

ux ui and development working prototyping

 

TEM TUDO O QUE PRECISA?


O pior que pode acontecer no decorrer da implementação de qualquer UI é a falta de comunicação entre designers e developers (a não ser que sejam a mesma pessoa). Alguns designers acreditam que o seu trabalho só está concluído após o PSD ser enviado. No entanto, isso não é verdade! Deve ser criada uma constante comunicação no decorrer do trabalho (workflow) que permanece além da entrega dos PSDs.

Os projetos em que os designers se limitam a submeter os ficheiros de design, e o criativo apenas os implementa, os projetos simplesmente falham.

Em muitos casos, demorará até os designers verem efetivamente a implementação do design UI/UX. Para sua surpresa, a sua construção é totalmente diferente da submetida inicialmente. (O que já me aconteceu mais do que uma vez. Enviei arquivos com descrições completas e protótipos interativos, mas quando finalmente vi o projeto, meses depois, tinha um layout completamente diferente, com cores diferentes e sem interações.)

Alguns designers podem odiar-me por isto, dado que o fluxo de trabalho do design requer muito trabalho “extra”, realizado à parte. No entanto, criar e entregar mais valias completas e informação, de forma organizada, é melhor para o projeto e para a equipa como um todo.

Se um developer tem tudo o que precisa à sua frente, ser-lhe-á possível acelerar o processo. Um PDS claro não é suficiente.

Do que precisa para fazer o trabalho de forma eficaz e eficiente?

Estas são as mais valias que um developer deve esperar de um designer para a implementação do UI/UX design:

  • Arquivo - O designer deve colocar todos os elementos da aplicação num só ficheiro. Este ficheiro deverá conter botões, checkboxes, estilos de cabeçalho, fontes, cores, etc., resumidamente. Com base na informação contida neste ficheiro, o developer deverá ser capaz de recriar qualquer interface do zero. Sendo que é muito mais fácil para um criativo exportar qualquer elemento de apenas um PSD, do que procurá-los em vários ficheiros.
  • Recursos  - Garantir que os developers têm todos os recursos necessários, sendo que os arquivos não devem voltar a ser alterados.
  • Protótipos de interação  -  Os dias de “telas estáticas” ficaram no passado. Recorrer a interações e animações para atenuar o fluxo de trabalho e implementação do UX design é, hoje em dia, uma prática comum. No entanto, não pode simplesmente dizer a um developer “isto vai aparecer da esquerda”.  O designer deve criar o protótipo efetivo da interação. O protótipo deverá incluir informações como velocidade, ritmo, etc., e espera-se que o designer especifique cada um destes atributos
  • Convenção da nomenclatura  -  É necessária uma estrutura de nomenclatura dos ficheiros para manter as coisas organizadas. Será mais fácil para ambos (designers e criativos) conseguirem encontrar os ficheiros. (ninguém gosta de ter as coisas escondidas numa pasta de segundo plano).
  • Recursos HDPI  -  Vivemos em “tempos difíceis”, com a enorme densidade dos ecrãs. Garanta que o designer entrega imagens dentro dos parâmetros e resolução requeridos, de forma a que a sua aplicação tenha boa apresentação em todo o lado. Nota: utilize o maior número de vetores possíveis, será bastante útil.


Se verificar que falta alguma coisa durante a implementação, não se preocupe: fale com o designer e peça-lhe. Nunca salte passos e nunca poupe! Vocês são membros da mesma equipa e o vosso trabalho é proporcionar o melhor produto possível. Se o designer falha, o criativo também.

 

TRABALHO EM PROGRESSO


Recorra aos seus designers durante o processo de desenvolvimento do UI/UX. Não os deixe de lado, à espera que se limitem a “puxar os pixels”. Um designer tem a capacidade de ver possíveis inovações antes da implementação começar. Para tirar partido disso, mantenha-os dentro do processo. Dê-lhes acesso para verem e testarem o trabalho em progresso. Estou consciente de que ninguém gosta de partilhar trabalhos inacabados. Mas é mais fácil efetuar alterações no meio da construção do que no fim. Fazendo-o, poderá poupar tempo e evitar trabalho desnecessário. Ao dar ao designer a oportunidade de testar o projeto, peça-lhe que compile uma lista com os problemas e respetivas soluções, e que sugira aperfeiçoamentos.

O que fazer quando um criativo tem uma ideia que alteraria a aparência de uma aplicação? Discuti-lo diretamente com o designer, nunca permitindo que o criativo modifique o design, sem a consulta prévia ao designer. Este fluxo de trabalho do design assegurará que a construção se mantém dentro dos parâmetros supostos. Tirar uma peça, sem perceber o significado da sua presença na construção, poderá arruinar a experiência do utilizador do produto.

 

PROJETO DE GESTÃO DO DESIGN DO UI/UX


Os designers acham que os criativos conseguem recriar um design num dia, ou até mesmo numa hora. Mas quanto melhor o design, maior o desenvolvimento e esforço necessários para o recriar. Evite ter um designer ansioso, deixando-o ver o progresso da construção. Utilizando o software externo da gestão do projeto, para garantir que todas as revisões são reconhecidas e contabilizadas, permite assegurar que não se perdem informações importantes discutidas numa conversa por email ou numa sessão de Skype. E sejamos honestos: por vezes alterações e atividades nem sequer são comunicadas até acontecerem.

Qualquer que seja a solução escolhida, garanta que escolhe um processo de fluxo de trabalho que toda a equipa adote e utilize constantemente. Na nossa equipa, tentei pressionar para o Basecamp porque era o que eu estava a utilizar, mas os nossos criativos consideraram que tinha funcionalidades limitadas. Eles já estavam a utilizar outro sowtfware de gestão do projeto para identificar bugs, progresso, etc., como o JIRA, GitHub, e até o Evernote. Percebi que a gestão e a monotorização do projeto deveriam ser mantidas o mais simples possível, por isso migrei o meu fluxo de trabalho do UI design para o JIRA. Queria ter a certeza que percebiam o meu fluxo de trabalho e progresso, mas não queria que sentissem que o design era mais uma coisa a gerir.

Aqui se seguem algumas sugestões para a ferramenta da gestão do projeto:

  • Basecamp  -  Monitoriza o progresso do design bem como o desenvolvimento das suas respetivas tarefas, facilitando a exportação das mesmas. Também constituído por um cliente móvel.
  • JIRA - Plataforma altamente personalizável, na qual é possível monitorizar tarefas e projetos, garantindo a gestão de todas as atividades de diferentes áreas num único lugar. Considero o cliente móvel ligeiramente fraco, mas é uma ótima solução para equipas grandes e inclui uma funcionalidade de identificação de bugs.
  • Email  - Excelente para conversas ou envio de imagens. Caso utilize o email como ferramenta de obtenção de feedback, tenha atenção: é muito fácil perder as coisas.


Também pode experimentar Trello e outro software de gestão de projeto, mas os mais utilizados na nossa indústria são, efetivamente, o Basecamp e o JIRA. Mais uma vez, o mais importante é encontrar um sistema de gestão de projetos que todos possam utilizar regularmente, caso contrário é discutível.

 

UX DESIGN E O DESENVOLVIMENTO COMPLEMENTAM-SE


O designer e o criativo constituem uma combinação poderosa. Assegure-se que junta as ideias de UI e UX o mais frequentemente possível. Os criativos devem estar dispostos a auxiliar o designer a conceber ideias, enquanto que o designer deve ter no mínimo o conhecimento básico da tecnologia em utilização.

Compreendam o fluxo de trabalho do design juntos. Não implementem cegamente o que os vossos designers criam. Sejam proativos e criem algo que seja bonito e dê uma ótima experiência ao utilizador, tirando partido das diferentes perspetivas. Os designers pensam fora da caixa, e visualizam animações loucas, ideias, pixels e botões, enquanto os criativos vêem a tecnologia, maneiras de acelerar o processo e limitações.

Designers and Development Working Together

Na minha experiência, todos os designers são obcecados por pixels e conceitos interessantes. No entanto, por vezes o designer chega a um ponto em que tem uma ideia mas o developer impede-o dizendo “isto não vai resultar bem quando for implementado. Irão existir problemas de consumo de performance”. Recentemente, estava a ponderar implementar uma modal window com um fundo desfocado, mas este desfoque causava um grande tempo de loading. Para resolver este problema, o developer sugeriu usar um overlay de uma só cor que é carregado mais rapidamente e mantém a qualidade de imagem. Designers, prestem atenção: não comprometam a experiência do utilizador em prol do design.

 

FEEDBACK LOOP


Receber feedback dos designers é crucial e deve acontecer o mais frequentemente possível. É, provavelmente, o que consome mais energia e tempo. No entanto, é indispensável para conseguir atingir resultados perfeitos. Aqui estão alguns conselhos do fluxo de trabalho UX e UI design para tornar o seu feedback perfeito.

  • Seja visual - O feedback tem que ser o mais específico possível. A melhor forma de o tornar preciso é fazendo um screenshot sublinhando o problema a ser resolvido. Seria ainda melhor se tivesse imagens da implementação a decorrer vs como é suposto decorrer. Comunicação visual eliminará 50% das questões.
  • Seja descritivo - O feedback deve ser claro e preciso. Não pode simplesmente dizer “mude este botão para cima”. O designer deve especificar quantos pixels por botão devem ser movidos. Inclua sempre uma explicação do problema e respectiva solução adequada. Vai consumir bastante tempo, mas vale a pena.
  • Seja paciente - Lembre-se que o designer e os developers não partilham o mesmo foco. Se os developers não compreendem na totalidade a ideia do designer, poderá originar confusão, bem como más decisões. Em todos os casos, ambos os lados têm que ser pacientes e estar disponíveis para ajudar os outros membros da equipa. O que muitas vezes é complicado, mas não deixa de ser uma soft skill que todos os designers e developers devem adquirir.


É bastante claro que estas coisas requerem ser combinadas de modo a que se adequem à situação especifica. Mas que ferramenta pode ajudá-lo a dar feedback?

  • Email  - Ainda a plataforma mais comum para dar feedback. No entanto, é necessário seguir algumas regras. Primeiro, utilizar uma única linha de email. Não criar sempre emails novos com diferentes assuntos. Segundo, criar uma lista de coisas que precisam de ser modificadas. Por fim, não envie uma lista enorme de uma só vez. Tente mandar pequenas listas individuais.
  • Skype (Hangouts) - A sua voz é uma ferramenta muito útil. Pode perguntar e responder a perguntas no momento. Mas assegure-se que tira notas e envia um email a dar seguimento após a chamada.
  • Ferramentas de colaboração  - Honestamente, não sou grande fã de ferramentas de colaboração. Mas têm uma grande vantagem. Ajudam-nos a manter o feedback. Perguntar e responder é rápido, e fica para sempre.


Aqui estão algumas ferramentas úteis:

Anotação de feedback:


Ferramentas de colaboração:


 

CONCLUSÃO


Definir um sistema e um fluxo de trabalho de UI/UX design que mantém a comunicação aberta durante o seu processo de implementação e desenvolvimento. Isto permitirá a implementação de grandes ideias, previsão de potenciais problemas, bem como priorizar assuntos importantes.

O developer e o designer podem criar grandes coisas juntas desde que ambos estejam disponíveis para trabalhar enquanto equipa. Aprendam uns com os outros e com tutorias de design como este!

 

Originalmente publicado em www.toptal.com

Deixe a nossa equipa levar o seu negócio ao próximo patamar: Contacte-nos.

Voltar