O que faz esse design de PDV parecer datado?

Estou tentando entender o que faz com que esse design de tela de ponto de venda (PDV) pareça datado.

São os botões 3D, as cores, o layout, a fonte? E o que você faria para parecer atual?

Não sendo um profissional de design, posso ver que é datado. Mas não sei por que e como mudar isso.

Outras respostas focam em como melhorar o design, mas desde que você perguntou por que o design parece datado:

Fonte muito pequena . A extrema esquerda parece menos datada que o resto, por que? À esquerda, o tamanho da fonte corresponde ao espaço vertical disponível para o texto, enquanto em todos os outros botões a fonte é muito pequena. Também vamos colocar as letras maiúsculas Arial e as três linhas de texto fixas em cada botão (todos os botões, exceto Pay, parecem estar formatados para receber texto na parte superior vertical, central e inferior, levando ao constrangimento se houver apenas 2 linhas do texto real).

Cores pouco atraentes . Parece que a tela usa 9 cores quase aleatórias, que fazem parte das 64 cores EGA originais. Muitas GUIs modernas usam diferenças de cores mais sutis, a menos que haja uma grande diferença entre os botões. Algumas GUIs modernas também usam gradientes de cores nos botões.

Sem imagens.

Efeito 3D de 2 cores. Os botões 3D que usam uma borda de 2 pixels de largura com branco uniforme na parte superior esquerda e cinza uniforme na parte inferior direita, além de uma borda preta de um pixel toda à sua volta, estão realmente fora de moda.

Tão simples. Ao usar apenas botões, há uma oportunidade perdida de indicar intuitivamente que estamos vendo a seção Comida no momento. Um Gui moderno usaria outras pistas para indicar que as partes magenta e amarela estão juntas, como um retângulo preenchido atrás dos botões amarelos que se estende até o fundo atrás do botão de comida:

Finalmente, o cabeçalho do sistema POS me incomoda, mas acho que é apenas um design ruim e não tem nada a ver com a data.

Antes de alterar qualquer coisa, verifique se a saída atual da tela suporta mais de EGA (paleta de 16 cores, escolhida em uma tabela de 64 cores) e se você deseja usar imagens, verifique se a resolução da tela permite que o usuário reconheça o que é mostrado na tela. imagens. Às vezes, os dispositivos usados ​​no campo são um pouco mais antigos do que se poderia imaginar. Além disso, ao alterar as cores, lembre-se do daltonismo.

Considerando que este é um sistema POS, eu diria que a funcionalidade está lá. Os botões são grandes, relativamente fáceis de ler e estão organizados em grupos, o que me facilitaria a encontrar o que estou procurando.

Dito isto, vejo boas decisões estruturantes, mas não muitas decisões de design. Isto é o que eu procuraria:

• Fontes : tudo no seu aplicativo está usando letras maiúsculas de Arial, mas nem todos os elementos são iguais. Existe uma hierarquia e você pode usar estilos ou famílias de fontes para representá-lo. Por exemplo, as linhas inferiores podem usar letras maiúsculas e minúsculas, porque elas realmente não fazem parte das opções principais. Você optou por aumentar o "Pagamento", o que é ótimo, mas é o único botão com um tamanho de fonte diferente. Por que mudar a fonte e não a cor, por exemplo? Não dizendo que você deveria, quero dizer, pensar dessa maneira pode fazer você descobrir novas maneiras de separar elementos. Por exemplo: Você já pensou em usar divisores?

• Espaçamento : você não está usando o mesmo espaçamento (margens) para muitos dos elementos. Olhe para os sistemas de grade , você se beneficiaria muito com o uso de um. Um layout equilibrado fará com que o design pareça mais organizado e polido. Você também tem alguns problemas de espaçamento estranho (IMO) com o texto dentro dos botões. O botão com 1 linha é centralizado, 2 linhas tem um espaço imenso entre as linhas e 3 linhas parecem boas, porque há espaçamento igual em todos os lugares. Não faria mais sentido sempre ter o mesmo espaço entre as linhas de texto, em vez de tentar puxar o texto o mais próximo possível das bordas?

• Cor : o agrupamento funciona para deixar claro que botões diferentes fazem coisas diferentes, mas não vejo uma razão por trás da paleta. Tente pensar na direção de: Posso usar cores para aumentar ainda mais minha mensagem? Posso usar cores para facilitar a tarefa de encontrar botões? Você já está fazendo isso, dando ao "Enviar" um tom diferente. Esta é uma ótima decisão. Mas então vejo que a cor selecionada é diferente dependendo da coluna da direita ou da central. porque?. Thenn pensa: onde mais você poderia usar as cores de maneira semelhante? Dê uma olhada no Google Material , eles podem inspirar você a experimentar novos combos.

• Sombras e efeitos : o efeito 3D é muito útil nesse contexto, e acho que você pode forçá-lo ainda mais. Aqui está um exemplo de POS 3D. Além disso, você já pensou em usar ícones? Eles podem ser uma boa ajuda visual.

Eu acho que o aplicativo parece datado porque realmente não segue nenhuma tendência, além de blocos de cores com algumas sombras, que era a norma quando o software de design e as linguagens de codificação não permitiam muita criatividade a esse respeito. Agora, você pode fazer quase qualquer coisa. Seu design parece datado porque não está tirando proveito dos truques e escolhas de design que se tornaram populares nos últimos anos.

Eu recomendo que você dê uma olhada em outros aplicativos semelhantes, verifique o que eles estão fazendo certo ou errado, veja como o seu pode se beneficiar de algumas dessas idéias. Você já tem um ótimo esqueleto, só precisa de um pouco de carne. Uma grade e talvez jogar com algumas cores complementares faria grandes coisas para o seu aplicativo.

À primeira vista, não sei dizer rapidamente o que é o que (e tenho experiência com sistemas de PDV em restaurantes). Para mim, os itens em cinza à direita da interface do usuário não parecem pertencer um ao outro. Os itens amarelos no centro da tela parecem ter 3 seções, mas isso não está claro?

A partir dos exemplos que mostramos abaixo (e não estou dizendo nada de sua qualidade, eles são uma seleção aleatória de uma pesquisa rápida) Você pode ver o uso de ícones, imagens e grandes blocos de cores. Essas são ferramentas úteis para identificar ações e distinguir áreas de função separadas ou uma hierarquia de informações.

Não tenho tempo para uma resposta mais detalhada, mas o que vou dizer é dar uma olhada nos exemplos do design atual da interface do usuário (interface do usuário). Por exemplo, uma pesquisa rápida por 'POS UI Design' fornecerá imagens como:

Design à parte, é funcional e as pessoas que o operam entendem como usá-lo? Há um elemento de não consertar o que não está quebrado, se for esse o caso.

Sim, parece datado, mas muitos sistemas que usei são culpados da mesma aparência simples. Botões e cores arredondados escolhidos com a acessibilidade em mente podem melhorar, mas meu pressentimento é que essa é uma peça puramente funcional e tentar "jazz-up" pode causar confusão aos funcionários.

O efeito 3D é realmente útil neste caso, pois informa rapidamente ao usuário que este é um botão clicável, e eu imagino que no horário comercial do restaurante seja de grande importância.

Também não sou profissional de design, mas como tenho que considerar esse tipo de coisa ao criar aplicativos móveis ...

1. Vala o efeito 3d win32 da velha escola. É literalmente fora de toque em uma época em que todos esperam que as coisas pareçam sensíveis à tela de toque. O que você deseja usar são grandes regiões planas para cada área de ação (botão), sem espaçamento entre grupos de botões relacionados ou sombras abaixo dos botões. Veja o design de materiais do Android . É útil mesmo para aplicativos não móveis.

2. Use bordas (não cores) para agrupar itens relacionados se esses itens tiverem espaçamento entre eles. Se não houver espaçamento entre eles, continue usando cores para que toda a área relacionada pareça ter uma cor de fundo sólida.

3. Escolha cores mais suaves (pense em cores pastel) e faça parte de um esquema de cores gratuito. Certifique-se de ter versões claras e escuras de cada cor na sua paleta. Espero que você ainda não esteja lidando com um sistema que só possa ser exibido na antiga paleta de cores CGA / VGA 16.

4. Os elementos da interface do usuário devem ser consistentemente coloridos de acordo com o esquema de cores. Por exemplo: os botões que fornecem entrada da interface do usuário podem ser considerados diferentes dos botões que alteram as páginas ou acionam a funcionalidade principal, mas geralmente deve haver 1 cor usada para cada um desses tipos de botões, em vez de 1 cor para todos os botões em uma determinada área funcional. Isso ajuda o usuário a ter uma idéia melhor do que cada elemento da interface do usuário fará.

5. Prefira usar o espaçamento entre as áreas de ação para separá-las e bordas suaves e planas entre os itens de ação. Os itens de ação em uma área devem ter tamanho regular (imagine que cada item de ação tenha 1 ou mais células adjacentes em uma grade).

6. Ao usar uma área de título na janela:

   uma. Todos os itens de ação nessa área devem caber na área de título.

   b. Todos os itens de ação nessa área devem ser globais para o aplicativo (por exemplo, logon, configurações etc.).

   c. O título não deve ser sobreposto por outra coisa senão um logotipo.

Eu espero que isso ajude.

Quase todos os elementos parecem ser botões. Mas quando leio os rótulos, parece que alguns botões são botões de ação, enquanto outros são para navegação.

Em uma interface moderna, você distinguiria os dois. Uma linha de guias serve como um auxílio de navegação eficaz, para mostrar onde você está atualmente e como chegar a outro lugar. Tenha uma guia Pizza para todas as opções de pizza e uma guia Pasta para todas as massas.

Talvez o botão roxo FOOD já atue como uma aba e o DRINKS seja outra aba. Eles definitivamente não devem estar à direita - o inglês é lido de cima para baixo, da esquerda para a direita, e seu fluxo de trabalho deve copiar isso.

Uma linha de guias funciona razoavelmente bem, mas aqui você pode ter uma hierarquia mais profunda. Nesse caso, pode ser aconselhável mostrar o estado atual da interface do usuário como um caminho:, Food > Starters >uma linha na parte superior da página inicial. Faça a primeira entrada do menu "Entradas" no botão "<Voltar para comida"; isso permite que você oculte alguns controles.

Primeiro, eu perguntaria qual é o propósito?

Exige que o operador encontre rapidamente a chave e torne o pedido mais rápido, sem erros de digitação? ou precisa atrair e incentivar os usuários a usar a GUI da máquina?

Nesse caso, o objetivo da peça indica claramente que é para entrada de transação eficiente e rápida. Portanto, podemos seguir de maneira mais simples e organizada que forma, cor e hierarquia precisam ditar a ordem lógica sobre a tendência e a fantasia do design.

O problema com a GUI atual é:

Cor : cores muito fortes, que criarão estresse ao longo do tempo e afetarão a eficácia da decisão do usuário. O fundo branco com outras cores de alto contraste cria definitivamente fadiga ocular e é difícil encontrar rapidamente as informações necessárias que o usuário precisa reunir.

Fonte : pequena demais para encontrar e tomar decisões, isso também é afetado pela cor áspera e pelo contraste entre o texto. Isso pode afetar muito os usuários iniciantes a se acostumarem ao sistema por mais tempo e produzirem mais erros de digitação.

Ordem e agrupamento : Temos que ter o nome "Sistema POS" lá em tamanho de fonte grande? Isso é benéfico? NÃO! Os usuários deste sistema e os elementos na tela o informam claramente. O agrupamento faz sentido? Na verdade, o lote pode ser agrupado, para que os usuários possam encontrá-lo logicamente. Algumas das palavras escolhidas fazem sentido? NÃO! "MANDAR"? mandar o quê? "Definir menus"? você define menus todos os dias? NÃO! adiante. A hierarquia e a escolha de palavras precisam ser examinadas com cuidado.

Algumas pessoas postaram com GUI com imagens e coisas sofisticadas, pois, a partir do objetivo do próprio equipamento, isso indica claramente que não precisa ser sofisticado, mas precisa ser altamente funcional e atencioso.

Como não se parece nada com a maneira como os "tiles" são projetados para dispositivos móveis, Android ou Windows OS especificamente, isso também é totalmente não-Apple - o que causa um conflito porque eles comandam muito do que está visualmente em voga. Praticamente tudo está "errado", então vou pular detalhes.

Todas essas são ótimas respostas, mas se você quiser algum material de referência, um exemplo brilhante de como é um bom e moderno sistema de POS, confira o aplicativo Square no iPad.

https://itunes.apple.com/us/app/square-register-point-sale/id335393788?mt=8

A maior coisa que acho que você poderia fazer para melhorar o existente (e por que parece tão antigo) é que a interface do usuário moderna tende a gostar de muito espaço em branco - e também a deixar o espaço em branco. Atualmente, muitos designs usam o tipo reverso (texto branco em fundo preto ou texto branco em qualquer cor escura) com moderação. Como este site: https://developer.wordpress.com/calypso/

Os botões devem ser organizados por função, hierárquicos e os botões devem ser consistentes com a metodologia de layout.

Em termos leigos:

1) Coloque os botões mais usados ​​em um local onde todos possam encontrá-los facilmente;

2) Os botões internos devem ser "controlados" pelo invólucro externo (janela dentro de uma janela, dentro da janela);

3) Se você tiver um botão Enter (ou qualquer outro botão), mantenha-o no mesmo local, mesmo que as telas possam mudar.

Muitos sistemas de POS tentaram otimizar o design funcional, mas acho que um POS está um pouco à frente do jogo é o Rezku POS .