Superando a falta geral de habilidade em design de interface do usuário em desenvolvedores [fechado]


17

Foi-me dito e descobri por mim mesmo que muitos desenvolvedores não são bons em design de interface do usuário (não sei quão verdadeiro é isso), mas é verdade sobre mim, pelo menos .

No desenvolvimento da Web, boas habilidades de desenvolvimento de código não são suficientes sem grandes habilidades em design de interface do usuário para acompanhá-las.

Então, para mim e para muitos desenvolvedores como eu, que possuem apenas metade da coisa (boas habilidades de desenvolvimento), como devemos concluir nossa outra metade, além de pagar por um designer?

O uso de modelos da Web de código-fonte aberto com pequenas modificações é a melhor solução para isso, ou existem outras opções?


12
"Como uma pessoa do UX com poucas habilidades de desenvolvimento, como devo desenvolver um site sem pagar um desenvolvedor?"
Steven Evers

Você deve ver no que estou trabalhando agora - desastre na interface do usuário. Acho que ninguém que já trabalhou no projeto já olhou para os guias de design da interface do usuário. O mesmo vale para o meu projeto anterior, apenas naquele que forcei a questão e entrei em contato com o designer gráfico, mas havia algumas partes do código que estavam fora do meu controle que eram realmente terríveis.
Skizz 26/09

7
Contrate um designer. É a única maneira de ter certeza.
SF.

1
Esta questão é problemática. Você pode também falar sobre como superar a falta geral de habilidades de programação em designers.
Alex Feinman

Respostas:


11

Eu sou um desenvolvedor que também não é tão bom em design. Tento ao máximo, ao trabalhar em um projeto no qual devo fazer o design, manter as coisas o mais simples possível. Adoto uma abordagem muito lógica e o design apenas para a experiência do usuário. Não posso torná-lo realmente bonito, mas posso torná-lo fácil de usar e relativamente agradável aos olhos.

Eu li vários desses livros: http://www.uxbydesign.org/2009/06/24/20-user-experience-books-you-should-own/ e eles realmente me ajudaram.

editar o meu favorito nessa lista é Não me faça pensar: uma abordagem de senso comum à usabilidade na Web, 2ª edição por Steve Krug


Não sei por que os desenvolvedores sentem que devem ser tudo para todos o tempo todo. Já sou desenvolvedor, designer, arquiteto, analista de negócios, suporte à produção e controle de qualidade. Ainda não é suficiente e eu tenho que ser um DBA agora também.
maple_shaft

3
Como freelancer, você precisa ter todas as habilidades sozinho ou ser forçado a terceirizar partes de um projeto. Se você é totalmente incapaz de fazer algo, é uma pena encontrar outra pessoa. Mas se você pode aprender as habilidades, por que não e se torna capaz de ganhar mais e se tornar um desenvolvedor mais atraente do ponto de vista de clientes em potencial.
precisa saber é o seguinte

2
Eu sei e concordo com você, estou ficando com nojo do que a indústria está se tornando. Estou cercado por pessoas que odeiam seu trabalho e estão sobrecarregadas de trabalho, e tenho uma idéia estúpida de que eles esperam que sejam os próximos Angry Birds e me perguntam se podem pagar um indiano de US $ 6 / por hora para fazer TODO O TRABALHO e apenas abrir fonte para tudo sem contribuir, porque o código aberto é GRATUITO. Então eles esperam ganhar milhões e deixar o emprego. Esses portadores de más idéias esperam cada vez mais e mais ainda por quase nenhum dinheiro. Isso só me deixa doente.
Maple_shaft

5

Design (de qualquer coisa) é uma negociação entre as necessidades das várias partes interessadas (cliente, desenvolvedor, usuários). Normalmente, nenhuma das partes interessadas está em boa posição para criar o melhor design, porque elas tendem a entender melhor suas próprias necessidades e colocá-las acima das necessidades das outras partes interessadas. Um bom designer pode identificar as necessidades das várias partes interessadas - muitas vezes necessidades que o próprio interessado não percebe que tem - e apresentar uma solução que funcione para todos.

Você provavelmente já viu isso muitas vezes. Os usuários pensam em como eles precisam interagir com um sistema, geralmente em termos de outro sistema com o qual eles já estão familiarizados. Os desenvolvedores pensam principalmente em termos de como o sistema funciona. Os clientes geralmente querem algo que resolva todos os seus problemas, ou então querem resolver algum problema muito específico pelo menor custo.

Para se tornar um bom designer, você precisa aprender a parar de pensar em como implementar algo. Em vez disso, você deve se concentrar no que as outras partes interessadas estão dizendo sobre o que elas precisam e querem, e você deve ser capaz de ler nas entrelinhas. Como desenvolvedores, clientes e usuários geralmente têm em mente alguma solução preconcebida e tendem a descrever essa solução em vez dos requisitos subjacentes. (Dito isso, é importante perceber que, às vezes, um cliente quer dizer o que diz quando diz exatamente o que deseja; se não tiver certeza, pergunte.)

Mais superficialmente, o design estético de uma interface do usuário também é algo com o qual alguns desenvolvedores têm problemas. Eu acho que isso é parcialmente porque os desenvolvedores de software geralmente não têm muito treinamento em estética - os alunos de CS podem não ter muito tempo para aulas de arte. Também é parcialmente novamente porque estamos mais interessados ​​em como algo funciona do que em como ele é; nós apenas não nos importamos se os cantos de um botão têm um raio de 9 pixels ou um raio de 10 pixels. Esses dois fatores estão certamente relacionados. Às vezes, você pode superar isso confiando em soluções enlatadas na forma de estruturas de interface do usuário, e o uso de componentes pré-projetados tem a vantagem de unificar seu próprio trabalho visualmente com outros aplicativos no mesmo sistema. Você pode melhorar suas habilidades estéticas lendo, olhando o trabalho de outras pessoas, e prestando muita atenção aos detalhes visuais que você pode ter ignorado no passado. Você também deve tentar entender a lógica por trás das diferenças visuais: os botões com cantos quadrados significam algo diferente dos botões arredondados? Como é usada a cor? etc.


1
obrigado pela resposta gr8, existem recursos, livros e sites que falam sobre esse tópico: "lógica por trás das diferenças visuais: os botões com cantos quadrados significam algo diferente dos botões arredondados? Como as cores são usadas? etc."
Ali

Em uma nota lateral e puramente por curiosidade, fazer botões quadrados encurralados significar algo diferente a partir de botões arredondados? Isso foi abordado no UX SE, imagino?
Sean Hanley

Os botões coloridos e arredondados são uma preocupação gráfica e realmente não têm nada a ver com o UX. Uma pergunta melhor para o UX seria "o que o usuário acha do nosso site com esquema de cores x vs esquema de cores y" e o posicionamento dos botões mencionados.
Nic

@Yadyn, isso depende do contexto. A geometria dos botões pode fornecer ao usuário uma pista sobre o funcionamento e o comportamento: os botões com cantos quadrados formam grupos atraentes e geralmente funcionam bem para selecionar opções ou modos. Os botões arredondados não são tão bons e geralmente indicam operações distintas. Mas esses tipos de dicas visuais só têm significado se forem usados ​​consistentemente em um aplicativo ou (melhor) em toda uma GUI.
Caleb

@ melee, eu estou chegando a isso do ponto de vista de desenvolvimento de aplicativos. Tende a haver muito mais variedade de interfaces na Web, e eu concordo que é mais difícil argumentar nesse contexto. Mas se você pegou um aplicativo de desktop típico no Mac e disse "Os botões azuis estão ótimos - vamos deixar todos os botões azuis!" você criaria muita confusão para os usuários porque eles atribuem significado à cor e à forma de um botão. Exemplos aqui (Apple HIG): tinyurl.com/6agv54v
Caleb

3

Aqui estão algumas coisas que eu acho que me ajudam:

  • Anote o que você gosta / não gosta em outro software. Somos programadores, passamos grande parte de nossas vidas no computador. Tente tomar nota do que você ama / odeia ao usar o software. Não importa se é software de computador, videogame, dispositivo móvel, etc, apenas tente ficar de olho no que é conveniente e fácil de usar, e o que não é.

  • Encontre uma ferramenta de desenho fácil de usar para desenhar a interface do usuário para você e seus usuários. Adoro usar o Balsamiq, pois é rápido, simples e a versão da Web é gratuita.

  • Lembre-se de que você não precisa encontrar alguém especializado em design de software para ajudá-lo a projetar algo - qualquer usuário fará. Costumo executar meus esboços por algumas pessoas que não têm nenhuma relação com o projeto, apenas porque sei que elas usam o software o dia todo e podem me dizer se algo parece bom ou é fácil de usar. Lembre-se de que eles geralmente oferecem idéias malucas sobre o que fazer e você precisa saber o que seria simplesmente "legal" de fazer e o que realmente melhoraria a produtividade.

  • Não hesite em perguntar em /ux// para perguntas detalhadas


1
Bons conselhos, boa ferramenta
NoChance

2

Para ser sincero, o design da interface do usuário é tudo diferente. Um desenvolvedor sempre pensa em um design sutil e não é muito criativo quando se trata de design. A abordagem definitiva que sinto é manter um desenvolvedor diferente para o design da interface do usuário. Embora aumente o custo, definitivamente ajudará você a obter melhores resultados.

Para alguém que faz as duas coisas sozinho, nunca dá o melhor resultado. Portanto, IMHO esses dois aspectos diferentes devem ser atribuídos a dois desenvolvedores diferentes. Um pouco de conhecimento de HTML e CSS para desenvolvimento de aparência e tema é recomendado no caso de CMS diferente, mas quando você precisar desenvolver um design totalmente novo, consulte um designer de interface do usuário.



2

O design da interface do usuário não é algo natural para muitas pessoas. No entanto, recentemente me tornei muito melhor seguindo alguns princípios fáceis.

  1. Não surte, não é tão difícil quanto você pensa.

  2. Modele a estrutura de dados e seu mecanismo primeiro. Crie modelos claros e correspondentes ao mundo real. Obviamente, isso pressupõe que você gastou um tempo para entender o que o cliente precisa.

  3. Agora, com uma folha de papel e um lápis, sente-se e comece a desenhar o layout lógico das telas. Normalmente, isso simplesmente apresenta seu modelo de dados ao usuário de forma organizada. Seu objetivo deve ser simplesmente:

    uma. Imite o ambiente de onde o aplicativo será implantado. Por exemplo, se for um aplicativo do Windows, ele precisa se comportar como um aplicativo do Windows, se for um aplicativo da Web, deve se comportar como aplicativos da Web semelhantes mais populares que o seu.

    b. Seu objetivo é orientar o usuário através do seu modelo de dados de uma maneira que eles previssem. Uma interface do usuário é bem projetada quando um usuário faz algo em seu aplicativo e faz exatamente o que eles esperavam.

    c. Isso leva tempo e é uma curva de aprendizado, mas qualquer um pode fazê-lo.

  4. Não se preocupe com os gráficos, ou seja, os botões, os fundos, etc ... seu único objetivo neste momento é o layout lógico da página.

  5. Você precisa dominar a guia que você está usando, seja html, gtk, cacau, android, Windows.Forms e assim por diante, na medida em que entenda os mecanismos de manipulação de eventos, o mecanismo de layout e a recuperação de entrada e exibição dados. Qualquer desenvolvedor deve ser capaz de fazer pelo menos isso.

  6. Não há vergonha em conseguir um designer gráfico para assumir a partir daqui. Mas você deve conseguir, pelo menos, passar da etapa 5. Isso representa 95% da carga de trabalho de todo o aplicativo.

Aqui está um artigo útil que me transformou de um pobre designer de GUI para um designer de GUI muito melhor.

http://www.joelonsoftware.com/uibook/fog0000000249.html


Um bom conselho, mas não concordo com o ponto 2. Também envolveria o usuário nas etapas acima.
NoChance

1
@Emmad Se você acha que seu aplicativo é uma série de operações sendo executadas em dados, o único objetivo da interface do usuário é fornecer uma maneira organizada de receber entradas para o modelo de dados e exibi-lo. A razão pela qual eu coloquei 2 é porque acho que, depois de modelar os dados, a interface do usuário simplesmente se encaixa. Faço entrevistas extensivas com o usuário final com relação a que tipo de dados ele deseja fazer o quê? Essa é a aplicação. Coloco as coisas na página e pergunto: agora, como você quer que isso pareça? Isso nunca me fez mal.
Jonathan Henson

1
Além disso, quando eu permito que os designers gráficos desenhem a GUI, ela sempre acaba em desastre. Eles não sabem como os dados devem ser organizados e quase nunca sabem o que é e o que não é possível.
Jonathan Henson

Obrigado por explicar, eu concordo com você que os designers gráficos não devem ser encarregados do gerenciamento de informações.
NoChance

1

Você também pode procurar exemplos bem-sucedidos de sites "semelhantes" para obter idéias de layouts, gráficos e designs. Com alguns ajustes no seu programa de pintura favorito, você pode emprestar muitas idéias e torná-las suas. Não copie diretamente - não é apenas má educação, é provavelmente também ilegal na maioria dos casos.

Depois de emprestar algumas vezes, você começará a ter uma idéia melhor dos designs dos sites de sucesso e conhecerá as ferramentas para criar esses designs também (com seus pequenos ajustes).


1

Com a introdução do HTML, a criação de um site simples e não-feio se tornou um desafio. Embora você possa ter o conceito, são necessários vários truques, ferramentas, gráficos prontos e conhecimento de CSS para acertar. Além disso, são necessárias técnicas de usabilidade e outros fatores humanos que influenciam o processo de design para produzir páginas com aparência nítida.

Os desenvolvedores passam a maior parte do tempo lutando para aprender linguagens complexas, OOP, ORM, SQL, T-SQL, etc. Também raramente investem em ferramentas para criar sites (a maioria é cara).

Como resultado, muitos desenvolvedores sofrem com sua incapacidade de produzir páginas da web impressionantes. Acredito que, se você aprender as ferramentas necessárias, também poderá criar boas páginas.

Também é importante saber qual é o seu rolo no processo de desenvolvimento de aplicativos. Você pode achar que o design da web é uma habilidade agradável, e não obrigatória. Em grandes projetos, não deve ser uma tarefa de programador pelos motivos mencionados acima, pelo menos.

Achei que essa ferramenta é uma ótima ferramenta, pode ajudar você:

Artisteer

Dê uma olhada e experimente a demo, é muito boa.


1

Ainda no desenvolvimento web, boas habilidades de desenvolvimento não são suficientes sem grandes habilidades em projetar

Não sei se essa afirmação é verdadeira, acho que depende de onde você trabalha.

Por exemplo, uma empresa menor provavelmente exigirá que você seja mais flexível com seu conjunto de habilidades, enquanto uma empresa grande pode não ter a mesma expectativa e você pode realmente gastar todo o seu tempo desenvolvendo enquanto uma equipe de design trabalha no design.

A Microsoft atualizou seu conjunto de ferramentas para destacar a clara separação entre desenvolvedores e designers. Eles introduziram o Expression Blend com o WPF, o que significa que o desenvolvedor pode trabalhar na funcionalidade de um software e outra pessoa pode fazer o design para ele. Ambos usam ferramentas diferentes, podem trabalhar no projeto ao mesmo tempo, mas um faz funcionalidade e outro faz o design.

O desenvolvedor especifica os pontos de dados e o designer os exibe.


obrigado, eu estava pensando sobre isso enquanto fazia isso com nenhuma equipe enquanto fazia isso como freelancer sozinho!
Ali

Definitivamente não é verdade com uma grande empresa. Possui equipes de design e desenvolvimento separadas, e ambas precisam apenas de um conhecimento mínimo umas das outras (saiba o que é possível, saiba o que está quebrado).
SF.

1

Lembre-se de que o design também pode ser testado, não apenas o código. Comece simples, experimente seu design em um pequeno grupo de pessoas, registre seus comentários e vá a partir daí. Isso pode ajudar a identificar problemas com seu design e fornecer idéias sobre o que poderia / deveria ser feito de diferente. Em seguida, revise o design e itere.


0

Você apenas precisará fingir e copiar outros designs. Evite qualquer coisa sofisticada, exceto um ou dois recursos que serão um grande benefício para os usuários. Siga algumas práticas básicas de limitação de fontes, cores e desordem.

Não tenha medo de postar perguntas em UI.stackexchange.com


+ 1- ponto positivo da limitação de cores, etc. A marca da interface do usuário de um programador geralmente é um fundo azul-petróleo com uma tag piscando em todos os botões e uma marca de seleção em todo o resto. Sites com boa aparência usam os padrões (fundo branco, fontes regulares etc.) em 90%, com alguns desvios interessantes.
Morgan Herlocker

0

Embora não seja sua área de especialização, acho sempre interessante estudar como criar interfaces de usuário. Atualmente, a maioria das páginas da web é muito dinâmica e o conhecimento de algumas habilidades da interface do usuário certamente ajudaria ao criar componentes e definir suas interações com os elementos da sua página. Eu vim de um background de desenvolvimento somente de back-end e fiquei surpreso com o quanto de envolvido na criação de interfaces.

Há um livro particularmente bom que eu li sobre web design e que é voltado para desenvolvedores:

Web Design para Desenvolvedores: http://pragprog.com/book/bhgwad/web-design-for-developers

É um livro de fácil leitura que aborda todas as fases da criação de interfaces: desde esboçar e prototipar UIs simples até criar designs com HTML + CSS.

Para melhorar ainda mais suas habilidades de interface do usuário, também recomendo o mais recente screencast do PeepCode com Ryan Singer: http://peepcode.com/products/ryan-singer-ux


0

Eu acho que pegar alguns conceitos básicos de UX / UI / gráficos / tipografia é certamente um empreendimento valioso. Você nem sempre pode ter uma equipe de especialistas "completa", é claro. Muitas vezes as pessoas têm que usar vários chapéus. Um bom desenvolvedor verá valor em gastar tempo aprendendo coisas fora de seu domínio e deve ser capaz de, pelo menos, reconhecer um bom trabalho em design.

No entanto, há algo a ser dito sobre o que os designers fazem. Um desenvolvedor só pode fazer muito na área de design (reconhecidamente alguns mais que outros). Em particular, grandes projetos voltados para o público, que se estendem além de um nicho estreito, beneficiam-se enormemente ao empregar profissionais de design reais. E não me refiro simplesmente às pessoas que podem usar códigos de cores css e html. Quero dizer, pessoas que passaram ANOS estudando coisas como tipografia, que leram e entenderam o livro de Josef Alber sobre cores , que podem fazer belos esboços com carvão em ruínas em papel de jornal. Essas são habilidades valiosas e os projetos que reconhecem isso e que podem colocar essas habilidades em uso focado têm uma vantagem decisiva sobre a concorrência.

Dito isto, existem algumas áreas em que designers e desenvolvedores podem sobrepor suas habilidades. Especialmente o UX e seu subdomínio, UI. Eu recomendo ...


0

Contrate um profissional.

Sério, as interfaces de usuário dos desenvolvedores têm uma reputação terrível. Isso não ocorre porque os desenvolvedores estão abaixo da média no design, mas porque os desenvolvedores estão abaixo da média ao pedir ajuda.

Um desenvolvedor tem a tendência de enfrentar todos os desafios digitais que surgirem.

(Eu fui desenvolvedor profissional por 10 anos e minha esposa é designer de interface de usuário por 20 anos)

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.