Tag: Design

Essenciais para o desenvolvimento de softwares, a experiência do usuário (User Experience) e o design como um todo auxiliam na otimização dos negócios. Confira conteúdos que mostram como isto funciona na prática!

  • A importância do Guia de Estilos no processo de desenvolvimento de software

    A importância do Guia de Estilos no processo de desenvolvimento de software

    A competividade do mercado e a necessidade de projetos serem entregues de maneira mais rápida e com qualidade é algo que toda empresa almeja. Não existe uma fórmula mágica para atingirmos esse objetivo, mas é possível dar pequenos passos para chegarmos lá. A padronização de alguns processos internos é um desses passos, principalmente quando nos referimos ao desenvolvimento de software.

    Na Neomind, um dos processos que recebeu uma atenção especial foi a etapa de criação e desenvolvimento de interfaces. Tudo começou com um Guia de Estilos criado pela equipe de User Experience e é essa história que vamos contar a você hoje.

    Por que criar um Guia de Estilos?

    Seguir padrões pré-estabelecidos é muito importante para manter a consistência de um produto. Isso permite com que o processo de criação e desenvolvimento aconteça de forma mais rápida, possibilitando a viabilidade dos projetos executados e garantindo a qualidade do produto.

    Percebemos isso quando ainda não tínhamos um padrão de código-fonte. Na ocasião, muitos dos componentes acabavam sendo criados diversas vezes, por várias pessoas e sempre com um código-fonte diferente. Além disso, existiam pontos de inconsistência que não batiam com o mockup das telas, tanto no estilo, como no comportamento daquele componente.

    Foi aí que vimos a necessidade da adoção de um guia de estilos (style guide). Com a adoção, o projeto passou a facilitar a aprendizagem dos padrões utilizados no design e no código-fonte do produto, além de se tornar um recurso acessível a todos os colaboradores para visualização dos componentes.

    Era uma vez… nosso Style Guide

    No início, nosso Guia de Estilos era um pequeno livro (físico) e um arquivo PDF, nos quais eram exibidos os padrões de cores, tamanhos de fontes, botões, iconografia e alguns modelos de componentes. Manter um guia de estilos físico trazia certos problemas. Um deles era o de que a cada alteração ou inserção de um componente novo era necessário imprimir uma nova versão e descartar a antiga, o que ocasionava em custos de impressão e muito desperdício de papel (fato que não combina com uma mentalidade paperless, a qual somos adeptos aqui na Neomind).

    Percebendo isso, começamos a utilizar apenas o arquivo PDF. Desse modo, todos os colaboradores passaram a ter o documento em seus computadores e a atualização do mesmo era mais fácil.

    Elementos do Fusion Platform no Guia de Estilos da Neomind

    Nosso guia de estilos passou para uma nova etapa, com o projeto batizado de “Style Guide”. O objetivo era o de torná-lo digital e, para isso, ele foi baseado no framework Bootstrap.

    O Bootstrap foi criado em 2010 por um designer e um desenvolvedor do Twitter, com o propósito de facilitar o desenvolvimento de telas. Essencialmente, trata-se de uma biblioteca que possui diversos componentes com interfaces amigáveis e modernas, além da responsividade que facilita muito a criação de telas que necessitam se adaptar conforme a resolução dos monitores, tablets e smartphones.

    Ele é uma das bibliotecas mais populares e mais utilizadas no mundo, em virtude da facilidade de uso, da documentação disponibilizada e por ser totalmente gratuito. Isso faz com que exista também uma grande comunidade envolvida.

    Bootstrap

    Como o Bootstrap possui o seu próprio padrão de interface, fizemos a customização, transformando-o em uma biblioteca específica para uso da Neomind. Além disso, foi necessário adaptar os componentes para que os mesmos ficassem com a cara do Fusion Platform. Fazendo isso, conseguimos manter a nossa identidade visual e adaptar os comportamentos dos componentes. Também atualizamos nossa biblioteca com componentes que já haviam sido criados ou que estavam em processo de desenvolvimento.

    Como trabalhamos com o Guia de Estilos

    Todas as interfaces criadas para o Fusion Platform são modeladas com base nos comportamentos e necessidades dos usuários, que são nossos clientes. Isso acontece porque buscamos sempre deixar nosso produto intuitivo e fácil de ser utilizado.

    Toda vez que notamos que os usuários estão com dificuldades de realizar determinada ação, reavaliamos a funcionalidade e aplicamos os devidos ajustes para torná-la mais usual possível. Por isso é tão importante manter nossos clientes próximos dos nossos processos de criação e de desenvolvimento.

    Com o guia de estilos, nossa equipe de UX consegue ter uma referência para a criação de novas telas e funcionalidades, sem que seja necessário criar diferentes componentes com comportamentos similares e até mesmo iguais. Assim é possível ter ganhos de produtividade na etapa de criação e de desenvolvimento, pois os componentes são desenvolvidos apenas uma vez.

    Muitos dos componentes possuem variações, como por exemplo o componente de seleção de itens, onde em um dos modelos é possível selecionar apenas um dos itens. Em outro, pode-se selecionar vários itens, itens com ícones ou fotos, itens pré-selecionados e opção apenas para o modo de visualização.

    Design Fusion Platform
    Exemplo de componente do Guia de Estilos

    Quando há a necessidade de criação de um novo componente, é realizado um alinhamento da equipe de UX com o time de Inovação para discutir a viabilidade técnica. Além de seguir os padrões pré-estabelecidos, é necessário que os componentes sejam compatíveis com diferentes navegadores e versões antigas desses navegadores, o que muitas vezes inviabiliza alguns cenários planejados.

    O código-fonte dos componentes deve ser criado de uma maneira que possibilite a reutilização em outros cenários sem que seja necessário realizar ajustes. É claro que algumas vezes mudanças precisam ser feitas, pois alguns cenários podem ser muito específicos e não terem sido pensados no momento de criação.

    Fechando…

    Todos os componentes ficam disponíveis para serem consultados e testados para que o cliente possa ter sempre o melhor em interface. Como o Style Guide é um projeto a parte, nossos desenvolvedores só precisam fazer o download do projeto em nosso repositório e executá-lo.

    Para os colaboradores da empresa, o Guia de Estilos é de grande valia, pois dessa forma é possível entender os padrões que foram pré-estabelecidos no design e no desenvolvimento do produto e conhecer a gama de componentes disponíveis.

    Um guia de estilos não é algo imutável. Por isso, é importante mantê-lo em constante evolução, já que a tecnologia evolui rapidamente e precisamos acompanhá-la para não ficarmos para trás.

    Referências:
    Coletivo UX, Get Bootstrap, UX Design Brasil, Guia de Estilo Web



  • Designando o design – Desmistificando o verdadeiro design

    Designando o design – Desmistificando o verdadeiro design

    Você já deve estar cansado de escutar por aí que, para fazer Design, você deve gostar de desenhar. Pois bem, se você concorda com isso, saiba que nem de longe isso resume o real papel do Design.

    O termo design vem do inglês, e não existe uma tradução no Português para ele, apesar de Antônio Houaiss ter sugerido o neologismo “projética”, também não foi aceito. A palavra coloquial que é utilizada pelas pessoas é “desenho“, resumindo o Design ao nível a apenas representações visuais. Porém, a que mais abrange e consegue se ajustar à maioria dos casos é ainda a palavra “projeto”, pois especifica o processo necessário em qualquer área que o design seja aplicado.

    Para que se tenha design, é necessário ter o pensamento projetual,  procurando entender o verdadeiro problema comum às pessoas e ao negócio, isso é um dos principais pontos que diferenciam o Design da Arte.

    O designer gráfico Alexandre Wollner, no documentário “Alexandre Wollner e a formação do design moderno no Brasil”, da editora Cosac Naify, contribui com essa questão com o seguinte posicionamento:

    Design é projeto, não ilustração. Capa de disco não é design, caixa de sabão em pó não é design. Se eu projetar a caixa para fazer com que o pó caia facilmente, isso é design. Mas pegar uma caixa quadrada ou retangular e pintá-la de vermelho e branco não é. Isso até poderia ser design se tratasse de uma linha de produtos, pois a preocupação com o comportamento da identidade de uma empresa entraria como parte da ilustração das caixas” 

     

    Design of Everyday Things

    Portanto, ilustrações, objetos gráficos e elementos visuais em geral podem contribuir com um projeto de design partindo do princípio que os mesmos sejam utilizados com o objetivo de apresentar funções indutivas, psicodinâmicas e emocionais. Além disso, a estética, aqui tratada com seu sentido de percepção em geral e não apenas visual como normalmente utilizada, tem a necessidade de estar alinhada junto à ergonomia, usabilidade, à arquitetura da informação entre outros quesitos, para que tudo isso, em harmonia, possa atingir, no projeto final o propósito planejado inicialmente.

    Deste modo, pode-se entender o design como uma área multidisciplinar que não só visa a solução de problemas, mas também que se dedica à gerar uma melhor experiência de uso, não importando o formato, seja uma embalagem ou uma interface de um sistema. Por isso que dedicamos nossos dias para o pensamento projetual, de oferecer cada vez mais uma melhor experiência de uso dos nossos clientes com o nosso produto Fusion.

  • Você sabe aplicar o Design Thinking?

    Você sabe aplicar o Design Thinking?

    Não é uma novidade que o design tem como objetivo promover o bem-estar máximo na vida das pessoas por meio do olhar diferenciado que um designer tem sobre o mundo. Na busca por uma solução, estes profissionais abordam seu desafio sob diversas perspectivas e ângulos, contando com olhares e interpretações diferentes  para chegar a uma solução inovadora. Esta forma de pensar despertou a atenção dos gestores, transformando-se na metodologia Design Thinking. Por pensar “fora da caixa”, a Neomind aplica este conceito no seu dia a dia para encontrar soluções inovadoras que atendam as reais necessidades de seus clientes.

    Embora ligado diretamente ao designer, o Design Thinking é multidisciplinar e cocriativo, permitindo que qualquer pessoa possa utilizá-lo para buscar soluções de problemas em diferentes áreas. Para identificar os verdadeiros problemas e gerar soluções mais assertivas para os mesmos, a metodologia tem um processo multifásico e não linear chamado Fuzzy Front End, que possui as etapas de Imersão, Ideação e Prototipação.

    Quer saber mais sobre design? Fizemos um artigo sobre UX Design (experiência do usuário) em softwares de gestão. Confira!

    As etapas do Design Thinking

    Imersão (Entender)

    A etapa de imersão é dividida em duas partes: preliminar e em profundidade. Na imersão preliminar, entende-se inicialmente o problema e seu contexto para definir o escopo do projeto. Já a imersão em profundidade, começa com um plano de pesquisa para mapear os contextos que serão estudados, a fim de buscar informações com foco no ser humano, como: o que as pessoas falam? Como agem? O que pensam? Como se sentem? Pesquisas exploratórias e entrevistas são exemplos de ferramentas utilizadas durante a imersão. Após essa etapa, as informações são analisadas e sintetizadas para auxiliarem na organização dos dados de forma visual, servindo de apoio para a fase seguinte.

    As etapas do Design Thinking (Foto: Reprodução).
    As etapas do Design Thinking (Foto: Reprodução).

    Ideação (Criar)

    IMG_5414

    Na etapa de ideação são geradas e selecionadas as ideias que irão resolver os problemas do contexto trabalhado, a partir dos dados levantados nas etapas anteriores, levando também em consideração os objetivos do negócio e a viabilidade tecnológica. Neste processo é importante que haja diferentes perfis de pessoas, ou seja, além da equipe envolvida no projeto. Também devem participar usuários, profissionais da área a ser estudada e/ou uma amostra do público. O Brainstorm é uma das ferramentas utilizadas nessa etapa, que auxilia na geração de um grande volume de ideias em um curto espaço de tempo. Como você conhece como ninguém seu negócio, sua ajuda é sempre bem-vinda neste processo!

    “O objetivo de reunir diferentes expertises é o de contribuir com diferentes perspectivas, o que, por consequência, torna o resultado final mais rico e assertivo” (VIANNA et al., 2012, p. 100).

    Prototipação (Testar)

    A etapa de prototipação consiste na tangibilização da ideia, para que esta seja testada e avaliada, além de permitir validar com o usuário, que poderá fornecer mais insumos para seu aprimoramento. O Storyboard é uma ferramenta utilizada para a prototipação que permite, por exemplo, tangibilizar um serviço através de uma história em quadrinhos.

    2014-01-15-14.04

    Veja bem: embora descritas de forma linear, as etapas do Design Thinking podem ser configuradas e adequadas da melhor forma. Um projeto, por exemplo, pode iniciar pela prototipação, ou pode ter sessões de ideação ao longo de todo seu desenvolvimento, ao invés de um ponto fixo no mesmo.

    Mas lembre-se! Esta é uma prática criativa e participativa que não pode ser executada sozinho. Por isso, designer e clientes devem unir competências para chegar a um resultado surpreendente.

    “Para garantir a sinergia do processo de inovação, as diferentes perspectivas devem ser colaborativamente construídas, não sendo suficiente que cada ator traga apenas seu ponto de vista. Necessidades do usuário, novas ideias e oportunidades de negócio devem ser, portanto, mutuamente constituídas”. (VIANNA et al., 2012, p. 159)

    Quer se aprofundar ainda mais no assunto? Confira nosso infográfico:

    Referência:
    Design Thinking

Fale com a gente