Dicas para melhorar a interface de usuário feita em LabVIEW Luciano Borges Engenheiro de Vendas Ilton Pereira Gerente de Engenharia de Aplicações 1
Antes de começarmos Existem gostos diferentes pode ser que nossas dicas não sejam aplicáveis Essa apresentação assume um nível básico de experiência Visite (e junte-se) ao UI Community Group para encontrar: Parte 1 dessa apresentação online Demonstrações e exemplos disponíveis para download Usuários do LabVIEW que são apaixonados por UI (e que as compartilham) decibel./content/groups/ui 2
Tópicos Revisão: Introdução ao design de UI parte um Como dar um visual customizado à sua UI Organização de UIs complexas Indicando o progresso de operações demoradas Conclusão 3
Bons artistas pedem empresetado grandes artistas roubam. Pablo Picasso 4
Fontes de inspiração Apple Microsoft Office Aplicações no seu próprio computador Galerias de ícones Tutoriais de web design Sua equipe corporativa de design Fotografia, arte Livros de: Design de interface de usuário Design de interação de usuário Usabilidade Design gráfico Visualização de informações 5
Os três mandamentos da parte um I. Pense no seu usuário II. Não seja inovador III. Menos é mais 6
I. Pense no seu usuário Eles sabem tanto quanto você (eles nunca sabem)? Como eles vão interagir com a aplicação? Por que eles estão usando o seu software? O software (e a UI) deve cumprir os objetivos deles 7
II. Não seja inovador Utilize elementos familiares Não altere a funcionalidade esperada Melhore não reinvente Os comandos do sistema imitam controles comuns do sistema operacional com os quais a maioria dos usuários estão familiarizados 8
III. Menos é mais Muito de uma vez só causa distração; direcione-se ao minimalismo Atenha-se aos requisitos Não faça o que não é necessário Você terá o seu trabalho pronto mais cedo Possuí-lo vai te custar menos O foco deve ser no que é importante Exemplo: guie o usuário com cores 9
Guiando o usuário com cores O efeito de caixa de cereais: Qual cereal chama a sua atenção em primeiro lugar? Por quê? 10
Parece que a perfeição é atingida não quando não há mais nada a ser acrescentado, mas quando não há mais nada a ser removido. Antoine de Saint-Exupéry 11
Técnicas de customização de UI Imagens e decoração no painel frontal Torne controles padrão transparentes Adicione uma imagem através do menu Edit» Paste Controles customizados Use para para customizar a estética de controles e indicadores Acesse pelo painel frontal clicando com o botão direito depois em Advanced» Customize 12
Adicionando uma imagem ao painel frontal Simples como copiar e colar! Utilize um editor de imagem para apagar, adicionar transparência Preencha controles nativos do LabVIEW Início: Clipart do PowerPoint 13
Janela do editor de controles Painel frontal normal Diferenças no editor de controles (Control Editor) 14
Quando você deve usar controles Para criar controles esteticamente diferentes e reutilizáveis Exemplo: redimensionamento de um botão de parada para torná-lo mais fácil de clicar Quando você deve usar Type Defs Para atualizar automaticamente o tipo de dados em controles customizados Exemplo: reutilização de um Enum cujos valores podem mudar Quando você deve usar Strict Type Defs Para criar controles reutilizáveis que são cópias idênticas Exemplo: propagação de mudanças feitas em tamanho e cores de um Gauge 15
Edit Mode vs. Customize Mode Edit Mode Alterar o tamanho ou a cor de um controle ou indicador Acesso a um menu de atalhos clicando com o botão direito Customize Mode Fazer vastas mudanças a controles ou indicadores Mudar partes individuais de um controle ou indicador 16
Componentes de um controle (slide) Índice do array Incremento de pixel Alojamento Ponteiro, preenchimento e escala Decremento de pixel 17 Estética
Componentes de um controle (Gauge) Índice do array Alojamento Ponteiro e escala Parte adicional da borda Borda 18
Visualizando componentes de controles Visualize componentes individuais de controles usando o menu Window» Show Parts Window 19
Adicionando uma decoração e imagens customizadas para um controle de Gauge CUSTOMIZANDO UM CONTROLE DE GAUGE 20
Organização de Uis complexas Tab Control Use quando não é necessário que todos os controles estejam visíveis de uma só vez Limite ao número de abas que você pode usar normalmente Carrega todos os controles na memória de uma só vez Visualização de conteúdo e categoria usando SubPainéis Use para decidir dinamicamente quais controles serão mostrados Sem limite ao número que você pode interagir normalmente Você controla quando o VI é carregado ou liberado da memória 22
Usando um Tab Control 1. Adicione ao painel frontal 2. Customize o tab control 3. Preencha com controles Mais flexível do que a maioria das pessoas percebem Abas transparentes Abas verticais Abas com imagens 23
Exemplo de aplicação de Tab Control Utilizando o LabVIEW para imitar o NI DIAdem, software que ofusca em Excel em pós-processamento de dados 24
Usando um subpainel 1. Determine os componentes imóveis da tela do VI de nível mais alto 2. Desenvolva SubVIs modulares de tamanho apropriado 3. Execute o SubVI dinamicamente 4. Insira o SubVI no subpainel dinamicamente 26
Exibindo subpainéis baseado em seleções do usuário SUBPANEL OPTIONS DIALOG 27
Indicando o progresso de operações demoradas Telas de splash são eficazes quando as aplicações demoram um longo tempo para carregar Forneça informações de suporte e desenvolvimento Cursores ocupados Barras de progresso Para dicas do uso de cursores ocupados, veja a parte 1 dessa apresentação, disponível no NI Community UI Interest Group no site 28
Utilização de uma estrutura Event para criar uma tela de splash DEMO DE TELA DE SPLASH 29
Pontos principais Não seja inovador Menos é mais Pense no seu usuário Customize controles usando o Control Editor Encapsule funcionalidade via XControls Limpe os seus painéis frontais com abas e subpainéis Disfarce tempos de carregamento usando telas de splash 30
Aprenda e compartilhe UI Interest Group decibel./content/groups/ui 31