Você desenvolvedor, inconscientemente, usa qualquer parte do design UX/UI

Danielle Teixeira
7 min readJul 21, 2019

--

Talvez você não saiba, mas essa parte do design com User Experience e User Interface também é executada por nós, desenvolvedores e analistas de requisitos.

Eu estou escrevendo este artigo é mostrar os pontos escuros sobre o design. Se você quer ler este artigo em inglês, clique aqui english, por favor! = D

Eu não sou especialista em design, então vou falar sobre minha experiência com UX / UI e como usar para desenvolver. Primeiro passo, você conhece o design de interface do usuário? Bom, esse assunto pode ser confundido às vezes. Você pode me perguntar, por que eu deveria saber? Porque, tudo no mundo se conecta, mesmo que você não concorde agora. Pessoas, ruas, processos, sistemas, tudo!

UX Design ou User Experience: são definidos por Donald Norman (ex-UX design Apple) e Jakob Nielsen é tudo que possa fazer parte da experiência do usuário. (colaborou extensivamente para a disseminação do design para o usuário, ou melhor, o design do Experience Design na mensagem de Norman’s).

“UX não é apenas app ou sistemas, UX é tudo e está ao seu redor, é simples, a maneira como você experimenta sua vida, experimenta o serviço ou um aplicativo, sistemas e pessoas! UX é mais do que você vê.

UI Design ou Interface de Usuário, tem como conceito a parte visual do projeto, mas a interface do usuário processa a interação entre usuário e o meio da interface gráfica.

Diferenças entre UX e UI

Design de interface do usuário lidar com a interface do produto, sistema, aplicativo interage com a pessoa de forma clara e objetiva. Um exemplo de interface de usuário é a máquina de lavar roupa, quando você pega as roupas para lavar, você interage com a máquina, seleciona o tipo de roupa, se é delicada ou jeans, edredom e outras opções. Você escolhe a função com base na sua necessidade. Em outras palavras, a interface do usuário é como o usuário interage com o produto. Exemplo de interface do usuário, tocando na tela para a atualização de sua conta, a interface é um intermediário ou a ponte entre a pessoa e o objetivo.

Fonte: Dribbble

Design de experiência do usuário lidar com a experiência do usuário, pense no usuário em sua emoção em usar o produto, serviço, site, sistema e qualquer outro objeto que pode ser usado por pessoa por exemplo. O foco da UX é o comportamento das pessoas sobre o uso e mais, aspectos de usabilidade, eficiência na execução de tarefas, valor do sistema e outros. Em outras palavras, como o usuário se sente ao fazer a interação.

Pode-se dizer que interface do usuário e experiência do usuário caminhando juntos, um completa o outro.

Fonte: Pinterest

Os desenvolvedores são muito cobrados e precisam mudar rapidamente

Author — Chatbot Rayban

Os desenvolvedores são muito exigentes, mas nem imaginam que assumem o papel de designers UX/UI também. Hoje temos muitas responsabilidades, não é suficiente desenvolvedor front-end, desenvolvedor back-end ou full-stack, precisamos ampliar nossas habilidades e escolher as melhores cores, fontes, tamanho de widgets e estudo de dispositivos para interfaces(visão do Design UI). É a realidade, por outro lado, precisamos estudar e pesquisar a experiência do usuário. Quem usa metodologia de desenvolvimento ágil SCRUM, usa canvas e cria personas, wireframes, usabilidade de teste, etc. Por exemplo, para criar os chatbots precisamos estudar o comportamento, escrever sobre o persona, wireframe e chatbot script para diálogo, é um projeto de UX.

A importância do design UX / UI na vida dos desenvolvedores

UI / UX é muito importante, porque fornecem sistemas e produtos mais coesos, a usabilidade fica em primeiro lugar. A tecnologia está mudando, desenvolvedores e designers estão mais próximos, precisamos absorver uma parte de cada área. Portanto, fique em contato com a experiência do usuário e estude suas interações. Quando você cria sistema, site ou mesmo aplicativos, você deve pensar em alguns requisitos, como:

Dê feedback aos usuários, tempo de resposta rápido e objetivo. Imagine você fazendo operações bancárias e a função cash no banco deve ser rápida, todo mundo espera isso, informe ao usuário o que se passa.
Use a linguagem do usuário, talvez seja redundante, mas os usuários precisam das coisas e, assim, escrever, olhe os botões, o que a meta diz?
Use branch, mostre ao usuário onde ele está, use o branch para voltar a tela ou mostre saída fácil do sistema, se ele quiser fazer, ele pode. É simples.

Exemple: the branch, you come back when you want to comeback — Credits: Medium

Consistência, em multi-dispositivos use a consistência, mantendo a identidade do sistema/aplicativo, o usuário deve ter a mesma opção no aplicativo e sistema. Ok, imagine que você precisa usar o serviço de internet banking, compare com os aplicativos bancários entre internet banking e o terminal do banco, as interfaces são muito diferentes e na maioria das vezes faltam opções entre as interfaces. O exemplo claro de consistência é a Netflix, mantendo as mesmas opções que existem no app, web,tv ou console do game. Se o desenvolvedor não prestar atenção, todo o seu trabalho será perdido. Não adianta o desenvolvedor projetar o melhor e maravilhoso sistema se você não mantem a coesão entre as plataformas e claro nem o design top salvará você.

Exemple: Netflix

Escrever boas mensagens, o usuário espera cada vez mensagem simples e objetiva. A mensagem de erro, por exemplo, é mais importante, mas, quando estivermos desenvolvendo, tenhamos cuidado em passar a mensagem sem código. Deve ser claros e diretos, mais exemplos a seguir:

Mensagem error clara— Author credit
Mensagem de validação do formulário — Author Credits
UX/UI juntos mostrando envio de notificações — Author:Dribble

Complementar, um dos serviços que você deve pensar quando se desenvolve é o uso complementar de serviços em diferentes plataformas mantendo interface e experiência complementares como por exemplo o Youtube com o aplicativo de controle de interface com possibilidade de exibição na TV ou até mesmo em videogame.

Youtube service complementary — Credits Author

Continuidade, é um aspecto fundamental para dispositivos. A continuidade prove suporte a interrupção de serviço, por exemplo, quando você para de ler o artigo no Medium seja no aplicativo ou na web, ele provê que o serviço aqui está parado e ao acessa-lo ele reinicia mantendo a continuidade de onde você parou. Outro exemplo acontece no streaming da Netflix em qualquer dispositivo (app / game / web / tv), quando você pára por qualquer motivo, o sistema detecta automaticamente onde você parou de assistir e começa a partir de onde parou. Isso é fantástico porque a experiência do usuário fica mais fluida e poderosa.

Como posso praticar UX/UI design ?

UX UI Design está onde você não pode imaginar! Mas como você pode praticar o design do ux/ui? Quando você tem base de requisitos de software fica mais próxima da experiência do usuário e interface do usuário.
Antes de desenvolver, costumo fazer uma lista do que fazer:

  1. Briefing do produto ou serviço que se desenvolve: escreva os requisitos (se você quiser escrever os requisitos de software de uma forma simples, clique aqui) e identifique as personas (interface de proposta dos usuários) e veja quais interfaces você pode tomar como exemplo próximo ao seu.
  2. Arquitetura da Informação: com base nos requisitos, você faz o sitemap, mostra quantas páginas você precisa de desenvolvedor, nomeando a página e usa a hierarquia. Isso ajuda você a nomear suas classes e funções.
  3. Wireframe: Eu acho que o wireframe é o mais conhecido, isto é parte pode testar sua ideia, fazer protótipos e alinhar os elementos e propriedades.
  4. Teste de Usabilidade: Depois de desenhar o wireframe é hora de testar a usabilidade do seu protótipo, eu sei que isso não é responsabilidade sua, mas acho que você com o teste de experiência do usuário pode minimizar erros antes e desenvolver, acredite isto te poupará tempo. Teste a interação, dê o protótipo para outra pessoa testar. Acredite, você pode fazer tudo antes de desenvolver.
  5. Desenvolver: Após o protótipo e os testes, inicie o código.

Estes são os passos que sigo, é a minha experiência, como posso fazê-lo, funciona para mim, mas você tem o seu caminho.

Resumo

Nós entendemos o que são interface de usuário e experiência do usuário e vimos diferenças entre o UX e UI com exemplos. Acredite, você usa design para interface de usuário ou experiência do usuário mais do que pensa. Eu diria que ainda mais, o design UX / UI também faz parte do desenvolvimento, um completo o outro. Espero que tenha gostado!

Referências

https://designculture.com.br/o-que-e-ui-design-e-ux-design

--

--

Danielle Teixeira

Desenvolvedora Mobile , Pesquisadora em IoT e Machine Learning, Organizer GDG Lauro de Freitas e Embaixadora Women Techmakers