Um desenvolvedor deve fazer modelos de interface do usuário se não houver designers no projeto?

57

Estou trabalhando com uma equipe pequena que cria um aplicativo da web proprietário e o UX não é uma prioridade, pois nosso pessoal será quem o operará, mas tentamos facilitar o trabalho deles.

Como desenvolvedor, devo criar uma maquete da interface do usuário antes de começar a criar uma nova tela? Nada muito chique, principalmente o layout geral para conversar com os colegas e ter um modelo de referência. Eu o comparava com a criação de alguns diagramas UML antes de começar a escrever o código cegamente.

Um dos meus colegas de trabalho diz que isso é absurdo e não é meu trabalho fazer isso.

design modeling user-experience front-end Konstantine
fonte
51
Se você não tem designers, e não é o trabalho dos desenvolvedores, quem deve fazer isso? O zelador, talvez?
GrandmasterB
10
Você certamente poderia, talvez devesse, mas está longe de ser incomum e definitivamente não é "absurdo", como diz seu colega de trabalho excessivamente dramático. Dependendo da situação e do ambiente, é melhor fazer uma maquete propositadamente grosseira do que algo que se parece muito com um produto acabado. O Balsamiq é uma boa ferramenta para isso, pois é apenas desenhar sua maquete em papel ou em um quadro branco.
Joe Ballard
3
Eu suponho que você realmente quer dizer "maquete?" Um "mock" é outra coisa .
Robert Harvey
23
O design da experiência do usuário vai além de deixar as coisas bonitas. Os programadores devem estar muito envolvidos com isso.
Jeffo
2
o que é absurdo é a reação de seus colegas de trabalho. isso é muito comum
Claudiu Creanga

Respostas:

74

Muitas vezes trabalho nesses projetos, e a resposta é um retumbante SIM, e o mais cedo possível.

As pessoas acham muito mais fácil criticar a melhoria de algum rascunho do que apresentar uma solução do zero. Então, começo a desenhar cedo por dois motivos:

  • Dê aos especialistas do assunto uma impressão de como as informações podem ser apresentadas.
  • Mostrar minha compreensão atual do problema e das estruturas informativas.

Em casos raros, também foi bom ter algumas provas de que realmente entreguei o que combinamos ...

Stefan Schmiedl
fonte
16
E honestamente, é muito mais fácil escrever o código se você tiver pelo menos um esboço de guardanapo na sua frente.
Kathy
9
O ponto 2) é extremamente importante se o negócio não for trivial!
bigstones
4
Como alguém que trabalhou no UX por 3 anos, apenas ter um esboço para conversar com pessoas (desenvolvedores, clientes, usuários finais) é incrivelmente útil e importante. Você economizará muito tempo no caminho, quando não precisar refazer completamente o site, porque alguém ficou frustrado!
Gnomejon
39

Os modelos são fantásticos e não há razão para que um desenvolvedor não os faça. (Pode até ser útil para um desenvolvedor fazer um rascunho de um layout de interface do usuário, mesmo quando você tiver designers de interface do usuário no projeto.)

Eu recomendo que você não faça modelos que pareçam telas reais. Se você as compartilhar com usuários finais, muitas vezes focam em coisas que não importam, como cores e temas. O que eu recomendo que você faça é criar desenhos desenhados à mão em papel ou em quadros brancos. Ou, se você quiser que eles estejam no computador, use algo como Pencil Project ou Visio ( aqui estão alguns stencils do Visio de Jonathan Abbett que parecem desenhados à mão).

Matthew Whited
fonte
6
Você pode desenhar sobreposições à mão, caixas de diálogo etc., recortá-las com uma tesoura e colocá-las na parte superior da tela principal desenhada à mão quando o usuário toca em um botão desenhado à mão. Muito rápido para ter uma idéia do que eles acham intuitivo, de quantos botões você realmente precisará e assim por diante.
RemcoGerlich 16/06
Isso é apenas uma conversa maluca ... realmente fazendo storyboard. Caminho para a velha escola para esses novatos: P
Matthew Whited
1
"não faça modelos que pareçam telas reais" é uma visão muito profunda.
Andrew Myers
1
Lembro-me de uma anedota de que os usuários julgariam a conclusão de um projeto pela aparência polida das capturas de tela apresentadas. Para usuários não técnicos que não diferenciam apresentação e funcionalidade, é muito importante manter um rascunho para comunicar "isso não foi feito".
precisa
1
@ Andrew ... é uma das coisas que aprendi quando zombava de aplicativos no Access e no VB. Você mostrar a alguém algo que se parece com um screenshot e eles esperam que você pode enviá-lo :)
Matthew Whited
11

Sim absolutamente.

Não deixe que outra pessoa lhe diga como fazer seu trabalho. E você está certo, é muito parecido com fazer UML para o seu modelo de dados. Supondo que você seja um desenvolvedor, seu trabalho é fornecer software de qualidade. Se as maquetes o ajudarem a fazer isso, isso fará parte do seu trabalho.

Faça modelos de baixa fidelidade - não os faça parecer telas reais. Você perderá muito tempo ajustando fontes, pixels e bordas, e seus usuários ficarão obcecados com esses detalhes, em vez de se concentrarem na funcionalidade. Algo como o balsamiq é ótimo para isso, não há dúvida de outras ferramentas semelhantes. Com a maquete em mãos, fica muito mais fácil discutir os recursos do projeto com seus usuários e com os outros membros da equipe de desenvolvimento.

Bryan Oakley
fonte
Claro que, como você diz, estou falando de modelos de baixa fidelidade. Pessoalmente, uso o draw.io como uma solução super leve e para facilitar o compartilhamento entre colegas.
Konstantine
10

Ao projetar "uma nova tela", você deseja discutir primeiro a idéia aproximada da interface do usuário com um usuário e / ou seus colegas. Você não pode discutir isso com um usuário "no código" ou "na UML", que simplesmente não funciona (nem funciona entre os programadores). E você deve esperar jogar fora seus dois ou três primeiros scetches ou, pelo menos, reorganizar os elementos da interface do usuário.

Portanto, se você possui uma ferramenta gráfica de design de interface do usuário que permite fazer isso rapidamente, faz sentido usá-la. No entanto, se você precisar codificar os elementos da interface do usuário manualmente e jogar fora ou reorganizar os elementos da interface do usuário exige muito esforço, obviamente faz mais sentido não "codificar" a interface do usuário primeiro. Será muito mais eficaz criar modelos separados, usando uma ferramenta de desenho gráfico ou simplesmente usando lápis e papel.

Doc Brown
fonte
5

Não necessariamente. Há pelo menos duas razões pelas quais os modelos podem ser pouco úteis.

Primeiro, se houver práticas bem estabelecidas da indústria em fazer as coisas que você está prestes a fazer, basta seguir em frente e fazer exatamente isso. Você não estará avançando na arte do design da interface do usuário, mas isso também é bom.

Segundo, seus usuários finais geralmente não sabem o que é bom para eles e por quê. Eles não sabem até que começam a usar o programa (com dados reais ou simulados). Nenhuma quantidade de modelos estáticos ajudará nisso.

Com uma estrutura da Web modestamente flexível, para "apenas outra tela da interface do usuário, como as N telas anteriores", você pode começar com um protótipo funcional e reorganizar à medida que avança. Faça uma maquete e discuta com os colegas sempre que estiver prestes a fazer algo sofisticado.

Eugene Ryabtsev
fonte
Semi-verdade sobre os usuários finais que não sabem o que é melhor. Mas você não pode nem dizer honestamente que sabe o que é melhor até ver o layout e o fluxo do aplicativo. O maior problema com o uso da interface do usuário como maquete é a expectativa que você está definindo. As pessoas vêem algo e reclamam das pequenas coisas que não importam ou se perguntam por que você está demorando tanto em tudo o resto.
Matthew Whited
@MatthewWhited Eles se queixam de pequenas coisas quando você discute a interface do usuário ou se queixam quando você propõe usar o produto para realizar o thask em questão? Prefiro esperar que o caso mais tarde seria mais construtivo, e isso se presta bem a uma aplicação web em casa com base instalada de 1.
Eugene Ryabtsev
3

SEMPRE!

Eu trabalho para uma pequena empresa e sou a única pessoa de TI "Soft". Eu faço todos os requisitos, design, codificação, testes (embora alguém sempre valide meus testes), design de banco de dados etc.

NUNCA CORTE OS CANTOS NAS ETAPAS DE PROJETO - seus usuários finais agradecerão. Você vai agradecer a si mesmo também, porque você vai acabar re-trabalhar-lo para fazer os usuários finais felizes. Mesmo que sua maquete não seja nada além de um pedaço de papel rabiscado à mão, ela fornece uma idéia do que esperar. Levar 10 minutos para rabiscar algo pode economizar o tempo de trabalho de uma semana (esteve lá, fez isso)

Também ajuda na sua codificação. Isso lhe dá a chance de pensar sobre o que você precisa fazer, a maneira mais eficiente de realizá-lo e quaisquer obstáculos que possam estar no caminho.

Por exemplo, você pode achar que o relatório "simples" que você precisa criar é mais difícil do que você imaginou, porque não está capturando alguma data na tabela xyz. Ele também amplia seus horizontes e mostra que sua equipe, superiores ou mesmo pode ser usada para possíveis oportunidades futuras de carreira que você faz mais do que o mínimo necessário e pode sair dessa caixa de "não é meu trabalho" (<--- sério, NÃO seja esse cara, todos nós o odiamos) ou isso lhe dá uma chance de aprender mais.

Jon Milliken
fonte
2

Vejamos isso de uma maneira mais geral:

  • Criar rascunhos é uma boa ideia?
  • Quem deve criar os rascunhos?

Criar rascunhos é uma boa ideia?

A criação de rascunhos fornece principalmente 2 benefícios. Primeiro, ele fornece foco, o que leva a uma aceleração no trabalho real sendo realizado. Segundo, torna a discussão da direção do trabalho antes que o trabalho seja concluído muito mais simples.

A desvantagem de criar um rascunho é que ele usa tempo. Não faz sentido gastar 2 horas criando um rascunho elaborado para algo que leva 4 horas para ser criado.

No seu caso, o nível da maquete precisa levar em consideração a quantidade estimada de trabalho que entra no projeto e os benefícios do rascunho. Dependendo disso, sua maquete pode estar em qualquer lugar entre 10 segundos em um post-it e um site totalmente interativo. Para projetos muito grandes e caros, não é incomum que equipes inteiras trabalhem em um rascunho por semanas e criem rascunhos de rascunhos enquanto fazem isso.

Quem deve criar os rascunhos?

Não há necessidade de uma resposta elaborada aqui: Se você se beneficiar da criação de um rascunho, crie um rascunho. Se você se beneficiar de alguém fazendo um rascunho para você, peça a alguém que faça um rascunho para você.

Peter
fonte
Ponto realmente interessante sobre a importância de comparar os tempos de criação. Não faz sentido dobrar o tempo necessário apenas porque fizemos rascunhos.
21916 Konstantine
-2

Seu colega está absolutamente correto. Aplicativos internos geralmente têm uma aparência predefinida. Também para esses aplicativos, os usuários não procuram uma interface de usuário de ponta. Tudo o que eles querem é algo que funcione e seja razoavelmente fácil de usar. A menos que você planeje alterar radicalmente a interface do usuário (contra a qual eu recomendo fortemente ... para aplicativos internos), basta seguir a aparência existente. Os modelos são ótimos, mas no seu caso, apenas aumentam sua dor.

Kshitij Upadhyay
fonte
1
Os modelos não são para criar interface de usuário de ponta, são para simular o layout e o comportamento de uma tela. De fato, na maioria dos casos, eles não são tão bonitos assim. Eu só não concordo
Kieren Johnstone
3
Eu achei as maquetes úteis para um aplicativo interno específico que eu estava desenvolvendo. A idéia não era projetar a aparência ou inventar um novo paradigma de interface do usuário (como você diz, isso não era necessário), mas provocar dos usuários quais são os requisitos, já que uma interface do usuário oferece a você algo concreto para discutir.
James_pic
@KierenJohnstone Concordo plenamente com você. No entanto, ele próprio diz que "o UX não é uma prioridade". A menos que ele seja um membro razoavelmente sênior da equipe, suas recompensas não corresponderão aos esforços (criando modelos). Maquetes são ótimas. Mas não na situação dele.
Kshitij Upadhyay
Não concordo - os modelos são realmente úteis nesta situação - na maioria das situações - para ver como o aplicativo funcionará, se fizer sentido e se o requisito for entendido pelo desenvolvedor - antes que a parte cara aconteça (código de gravação)
Kieren Johnstone
1
Nossa equipe é de cerca de 3 pessoas. Há um membro sênior / líder de equipe, eu e outro cara que foi contratado para trabalhar no projeto. O rascunho foi feito principalmente para discutir a nova tela com o líder da equipe. Além disso, não havia uma aparência predefinida, já que o objetivo da nova tela era melhorar uma existente que era difícil de usar, então tudo tinha que ser refazer.
Konstantine