Clipper On Line • Ver Tópico - Interface visual

Interface visual

Discussão sobre interface com o Cliente.

Moderador: Moderadores

 

Interface visual

Mensagempor JoséQuintas » 09 Out 2020 16:31

Vamos ver o que dá pra melhorar no visual do aplicativo.
Vamos partir do console como referência.

Com certeza, o primeiro ponto, que obrigatoriamente deve ser feito, é o uso do mouse.
Porque?
Porque até uma criança sabe apontar o dedo pra alguma coisa, é algo normal.
No computador, isso é feito com o mouse.

É muito mais prático apontar com o mouse e clicar, do que ficar pensando/lembrando de teclas.
Não requer prática, basta apontar e clicar.
Qualquer usuário sabe apontar o mouse e clicar no que está vendo.
Já usar teclas.... requer primeiro aprender qual é a tecla que precisa apertar.

ENTER, ESC, setas, mouse, e outras, o usuário já conhece.
Acho que nem precisa lembrar ao usuário pra que serve, dá pra eliminar a maioria dos textos avisando o usuário disso.
Isso vai deixar as telas mais leves.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Interface visual

Mensagempor JoséQuintas » 09 Out 2020 16:44

tela.png


Cor dos GETs, pro usuário saber aonde está digitando, e pra saber o tamanho disponível.

data.png


Até achei que ficou legal com box, mas isso exige pular linha.
E pra telas com muita coisa, pode ficar poluído demais, ou faltar espaço.
Ainda vou avaliar, mas pelo menos as cores do GET, são necessárias pra dar informação para o usuário.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Interface visual

Mensagempor JoséQuintas » 09 Out 2020 16:49

button.png


Com certeza, button com ícone é muito mais prático.
O usuário apenas olha o desenho e clica.

O Itamar me chamou a atenção sobre o texto.
E se pensar direito, pra que o usuário precisa ler texto, se o ícone passar a informação que precisa?
É mais rápido para o usuário olhar o desenho do que ler o texto.

É essa minha próxima mudança: Confirmar se os ícones estão informativos, e eliminar o texto.
Mesmo simples, dá pra considerar que é a primeira mudança realmente GUI: o ícone passa a fazer parte do aplicativo, e a substituir o texto.

E se fosse puro console....
Ia faltar espaço pra descrever teclas para o usuário, ou o usuário nem saberia que tecla apertar.
Considero importante, e já não fico sem isso.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Interface visual

Mensagempor Claudio Soto » 09 Out 2020 17:44

JoséQuintas escreveu:Confirmar se os ícones estão informativos, e eliminar o texto.

Para estos casos se usan los tooltip. El tooltip se utiliza para que cuando el usuario pase el puntero del mouse por encima de un elemento se desplegue un texto informando la funcion del mismo.

Por regla general el toolbar lleva solo iconos sin texto. Por convencion los botones siempre llevan texto y en muchos casos tambien iconos.
Saludos.
Dr. Claudio Soto
(Uruguay)
http://srvet.blogspot.com
Avatar de usuário

Claudio Soto
Colaborador

Colaborador
 
Mensagens: 555
Data de registro: 27 Ago 2012 12:31
Cidade/Estado: Uruguay
Curtiu: 35 vezes
Mens.Curtidas: 166 vezes

Interface visual

Mensagempor JoséQuintas » 09 Out 2020 18:15

button.png


Uso tooltip também.
Só faltava mesmo me livrar do texto, talvez mania vinda do DOS.
Prefiro o button do que toolbar, porque ele redimensiona automático.

Uma alteração futura será alterar pra ícone transparente.
Mas isso vai depender de fazer outras coisas primeiro.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Interface visual

Mensagempor JoséQuintas » 09 Out 2020 18:26

Acho que assim fica mais elegante.
Mas não me agrada trocar button por icon, porque vou perder recursos do button.
Até lá vamos ver o que dá pra fazer.
Talvez um button customizado.

button.png
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Interface visual

Mensagempor JoséQuintas » 11 Out 2020 10:19

Voltando aos buttons:

Qual a vantagem dos buttons com ícone?
Eles são uma espécie de manual e/ou índice.
O usuário olha a tela, e pelos ícones sabe que ali é pra incluir, ou alterar, ou excluir.
Ele não precisa ler nada, ele apenas procura o desenho que representa o que ele quer.
Mesmo que ele nunca tenha mexido naquele programa, ele já tem noção do que as imagens representam.

Então está aí o primeiro componente GUI: o button com imagem

- o button passa a informação ao usuário do que ele pode fazer
- o button, ao ser clicado, efetua uma operação
- o button passa a fazer parte da tela e do aplicativo
- GUI = interface gráfica com o usuário, o button está sendo uma interface gráfica, uma forma gráfica de comunicação entre o usuário e o programa

Muito útil, e convém dar destaque nisso: se a imagem já passa informação, não tem porque adicionar texto, texto é a parte ultrapassada em GUI, é a parte a ser substituída por imagem.

Pra adicionar um button, há várias opções de LIB, assim como há várias opções de ícones ou visuais.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Interface visual

Mensagempor JoséQuintas » 11 Out 2020 11:17

UIA

tela.jpg


A cor das letras é pra chamar a atenção de que pode ser usada aquela letra pra selecionar a opção.

Recurso visual é coisa antiga.
Com texto, tínhamos a opção de indicar uma letra, talvez maiúscula
Depois com cores, tínhamos a opção de fazer isso usando cores
E agora... temos imagens.

Ou seja, nada mudou, a não ser os recursos disponíveis pra fazer o que sempre foi feito.

E lógico... criaram modelos padrão, porque tem gente que fica criando verdadeiros carnavais na tela.
Se com texto já era assim, com imagens e milhões de cores pode ficar pior.
Na dúvida... é só seguir o padrão Windows, e usar tudo que já vém pronto, com as cores que já vém prontas.

Tanto é assim, que hoje em dia estão se destacando as FLATUI, as interfaces mais limpas, justamente porque usuários cansaram de telas com mais enfeite do que coisa útil.
José M. C. Quintas
Harbour 3.2, mingw, gtwvg, multithread, dbfcdx, ADO+MySql, PNotepad
"The world is full of kings and queens, who blind our eyes and steal our dreams Its Heaven and Hell"

https://github.com/JoseQuintas/
Avatar de usuário

JoséQuintas
Membro Master

Membro Master
 
Mensagens: 18013
Data de registro: 26 Fev 2007 11:59
Cidade/Estado: São Paulo-SP
Curtiu: 15 vezes
Mens.Curtidas: 1206 vezes

Interface visual

Mensagempor Claudio Soto » 11 Out 2020 21:41

JoséQuintas escreveu:Pra vocês pensarem:

Se todos que vão pra GUI, alteram o comportamento pra funcionar igual console.....

Porque é problema uma LIB fornecer os dois comportamentos ao mesmo tempo?

Poder se puede, pero es como ya dije no se trata de iconos y botones se trata de la forma en que el usuario interacciona (física y sicologiacamente) con el entorno GUI. Es como la filosofia de viajar en automovil y la de viajar antiguamente en carros tirados por caballos, las acciones fisicas y reacciones sicologicas del pasajero son diferentes. El automovil es mas rapido, comodo, menos cansativo y mas seguro que el caballo. Date cuenta que hoy en dia la mayoria de los usuarios son personas jovenes, acostumbradas y entrenadas para esta filosofia GUI, eso los hace mas productivos en estos entornos y eso es lo que les interesa a las empresas. Más allá que pueda existir algún cliente que prefiera las "semi" GUI mezcladas con console la tendencia mundial ya esta fuertemente instalada en el sentido opuesto, hasta Linux que es el sistema preferido de los hackers (hacker en el sentido original de la expresión) no sobreviviría sin un entorno GUI. Basta ver a algun niño pequeño con el celular de sus padres, es impresionante el dominio que logran del teléfono, eso es porque es GUI, algo intuitivo, llamativo y fácil de usar. Creo que todos acá cuando decimos GUI nos estamos refiriendo al uso pleno de las funcionalidades del API del SO que ya esta diseñado visual e interactivamente para sacar el mejor resultado con el usuario. Colocar algunos botones, imágenes y algún menú no es GUI, es console con algunos componentes gráficos porque no reúne todos los efectos psicofisico que produce una GUI de un SO que lleva siendo estudiada y ha ido evolucionando desde mediados de los 80. No se puede competir contra eso, se puede mejorar, pero no se puede revertir eso. Repito, a alguien en particular le puede hasta gustar el console con algunos elementos gráficos, pero el 99.99% de los usuarios que operan los programas de las empresas en el mundo con la carga laboral que tienen no serían ni la mitad de productivos en un entorno diferente al GUI.
Saludos.
Dr. Claudio Soto
(Uruguay)
http://srvet.blogspot.com
Avatar de usuário

Claudio Soto
Colaborador

Colaborador
 
Mensagens: 555
Data de registro: 27 Ago 2012 12:31
Cidade/Estado: Uruguay
Curtiu: 35 vezes
Mens.Curtidas: 166 vezes

Interface visual

Mensagempor Eolo » 11 Out 2020 22:15

Com certeza, o primeiro ponto, que obrigatoriamente deve ser feito, é o uso do mouse.
Porque? Porque até uma criança sabe apontar o dedo pra alguma coisa, é algo normal.
No computador, isso é feito com o mouse.


Quintas, nem li os próximos posts, reconheço, mas vou dar um pitaco. A premissa, pra mim, tá meio capenga.

Por que o mouse é obrigatório? Pensa numa conveniência de bairro, balcão apertado, o atendente com a mão suja porque acabou de voltar da cozinha... Pensou? Pra quê o mouse, nessas situações? A sua afirmativa vale sim pra um ambiente, não pra "qualquer" ambiente.

Vi, na minha carreira, muito usuário cobrindo o teclado com uma película, pra proteger...
Avatar de usuário

Eolo
Colaborador

Colaborador
 
Mensagens: 1134
Data de registro: 08 Dez 2005 17:24
Cidade/Estado: São Paulo - SP
Curtiu: 0 vez
Mens.Curtidas: 41 vezes

Interface visual

Mensagempor Eolo » 11 Out 2020 22:16

Pensa numa conveniência de bairro, balcão apertado...


Interface com cliente não pode impor uma regra geral.
Depende do cliente.
Avatar de usuário

Eolo
Colaborador

Colaborador
 
Mensagens: 1134
Data de registro: 08 Dez 2005 17:24
Cidade/Estado: São Paulo - SP
Curtiu: 0 vez
Mens.Curtidas: 41 vezes

Interface visual

Mensagempor Eolo » 11 Out 2020 22:26

Os meus dois derradeiros clientes, a quem me referi num outro tópico, têm oficina mecânica.
Vão lá, se lambuzam de graxa e depois vêm usar um mouse?

Imagina outra situação: um software em rede, num restaurante, com um terminal na COZINHA: aquele bando de Chefs, todos engordurados, fritando bife, na correria, vão mexer num mouse? Eu acho que não.
Avatar de usuário

Eolo
Colaborador

Colaborador
 
Mensagens: 1134
Data de registro: 08 Dez 2005 17:24
Cidade/Estado: São Paulo - SP
Curtiu: 0 vez
Mens.Curtidas: 41 vezes

Interface visual

Mensagempor MSDN » 11 Out 2020 22:31

Eolo tocou no ponto que o Quintas não está vendo com clareza.
Eu tenho uma tela de venda feita com MiniGUI, limpa e prática, meu cliente vende sorvete, quando está quente faz fila, ele pode usar o mouse, mas não usa pq é mais rápido usar o teclado, então otimizei para funcionar dessa forma, já um sistema que não demande agilidade para sua operação, usar o mouse seria mais prático.
Detalhe, daria para fazer a mesma coisa com Harbour puro, sim daria, porém como já explicou mais de uma vez o Claudio, saber usar o que está disponível para o SO utilizado é o melhor que o programador pode fazer.
Aquele sistema que vc falou Eolo, que teu cliente usa desde 1990, de uma oficina de carros importados, dá pra fazer em MiniGUI, HwGUI ou Fivewin e deixar com a mesma usabilidade que ele já tem não usando lib gráfica, ou mesmo criando um APP para Android ou iOS, limpo e funcional, tudo vai de saber usar corretamente os recursos para atender a necessidade e expectativa do cliente.
MSDN
Usuário Nível 4

Usuário Nível 4
 
Mensagens: 741
Data de registro: 28 Nov 2003 14:55
Cidade/Estado: CWB
Curtiu: 178 vezes
Mens.Curtidas: 123 vezes

Interface visual

Mensagempor Eolo » 11 Out 2020 22:38

Eolo tocou no ponto que o Quintas não está vendo com clareza.
Eu tenho uma tela de venda feita com MiniGUI, limpa e prática, meu cliente vende sorvete, quando está quente faz fila, ele pode usar o mouse, mas não usa pq é mais rápido usar o teclado, então otimizei para funcionar dessa forma


Exato, MSDN. Matou.

Interface com clientes não é só tela, teclado, mouse.

É como o cliente interage com o software e hardware.
Cada cliente interage de uma forma específica.
Nós (ops, vocês, que eu to aposentado) temos que ver a necessidade de cada cliente em particular.
Avatar de usuário

Eolo
Colaborador

Colaborador
 
Mensagens: 1134
Data de registro: 08 Dez 2005 17:24
Cidade/Estado: São Paulo - SP
Curtiu: 0 vez
Mens.Curtidas: 41 vezes

Interface visual

Mensagempor Eolo » 11 Out 2020 22:51

PS : Quando vc não quiser mais dar suporte pro teu cliente da oficina, me avisa, eu adoro carros !!!


Se for simples, curto e grosso, eu apresento vc a eles.
Mas eles não querem visual, querem RESULTADO.
Querem uma operação simples, nada que requeira treinamento e help/chat on line.
O negócio deles é OFICINA MECÂNICA, não PHD em informática.
Avatar de usuário

Eolo
Colaborador

Colaborador
 
Mensagens: 1134
Data de registro: 08 Dez 2005 17:24
Cidade/Estado: São Paulo - SP
Curtiu: 0 vez
Mens.Curtidas: 41 vezes

Próximo



Retornar para Interface com Clientes

Quem está online

Usuários vendo este fórum: Nenhum usuário registrado online e 2 visitantes


Ola Amigo, espero que meu site e forum tem lhe beneficiado, com exemplos e dicas de programacao.
Entao divulgue o link da Doacao abaixo para seus amigos e redes sociais ou faça uma doacao para o site forum...
MUITO OBRIGADO PELA SUA DOACAO!
Faça uma doação para o forum
cron
v
Olá visitante, seja bem-vindo ao Fórum Clipper On Line!
Efetue o seu login ou faça o seu Registro