Design de interface de usuário de software

A interface do usuário é a visualização do aplicativo front-end com a qual o usuário interage para usar o software. O usuário pode manipular e controlar o software e também o hardware por meio da interface do usuário. Hoje, a interface do usuário é encontrada em quase todos os lugares onde existe tecnologia digital, desde computadores, telefones celulares, carros, tocadores de música, aviões, navios, etc.

A interface do usuário faz parte do software e é projetada de forma que se espere fornecer uma visão do usuário sobre o software. A interface do usuário fornece uma plataforma fundamental para a interação homem-computador.

A IU pode ser gráfica, baseada em texto, baseada em áudio e vídeo, dependendo da combinação de hardware e software subjacente. A IU pode ser hardware ou software ou uma combinação de ambos.

O software se torna mais popular se sua interface de usuário for:

  • Attractive
  • Simples de usar
  • Responsivo em pouco tempo
  • Claro para entender
  • Consistente em todas as telas de interface

A IU é amplamente dividida em duas categorias:

  • Interface da Linha de comando
  • Interface gráfica do usuário

Interface de linha de comando (CLI)

CLI tem sido uma grande ferramenta de interação com computadores até que os monitores de vídeo surgiram. CLI é a primeira escolha de muitos usuários técnicos e programadores. CLI é a interface mínima que um software pode fornecer a seus usuários.

CLI fornece um prompt de comando, o local onde o usuário digita o comando e alimenta o sistema. O usuário precisa se lembrar da sintaxe do comando e de seu uso. CLI anteriores não foram programados para tratar os erros do usuário de forma eficaz.

Um comando é uma referência baseada em texto para um conjunto de instruções, que se espera que sejam executadas pelo sistema. Existem métodos como macros, scripts que facilitam a operação do usuário.

CLI usa menos quantidade de recursos do computador em comparação com a GUI.

Elementos CLI

Uma interface de linha de comando baseada em texto pode ter os seguintes elementos:

  • Command Prompt- É um notificador baseado em texto que mostra principalmente o contexto no qual o usuário está trabalhando. Ele é gerado pelo sistema de software.

  • Cursor- É uma pequena linha horizontal ou uma barra vertical da altura da linha, para representar a posição do personagem durante a digitação. O cursor é encontrado principalmente no estado piscando. Ele se move conforme o usuário escreve ou exclui algo.

  • Command- Um comando é uma instrução executável. Pode ter um ou mais parâmetros. A saída na execução do comando é mostrada em linha na tela. Quando a saída é produzida, o prompt de comando é exibido na próxima linha.

Interface gráfica do usuário

A interface gráfica do usuário fornece ao usuário meios gráficos para interagir com o sistema. A GUI pode ser uma combinação de hardware e software. Usando a GUI, o usuário interpreta o software.

Normalmente, a GUI consome mais recursos do que a CLI. Com o avanço da tecnologia, os programadores e designers criam designs de GUI complexos que funcionam com mais eficiência, precisão e velocidade.

Elementos GUI

A GUI fornece um conjunto de componentes para interagir com software ou hardware.

Cada componente gráfico fornece uma maneira de trabalhar com o sistema. Um sistema GUI tem os seguintes elementos, como:

  • Window- Uma área onde o conteúdo do aplicativo é exibido. O conteúdo de uma janela pode ser exibido na forma de ícones ou listas, se a janela representar a estrutura do arquivo. É mais fácil para um usuário navegar no sistema de arquivos em uma janela de exploração. As janelas podem ser minimizadas, redimensionadas ou maximizadas para o tamanho da tela. Eles podem ser movidos para qualquer lugar na tela. Uma janela pode conter outra janela do mesmo aplicativo, chamada janela filha.

  • Tabs - Se um aplicativo permite a execução de várias instâncias de si mesmo, elas aparecem na tela como janelas separadas. Tabbed Document Interfacesurgiu para abrir vários documentos na mesma janela. Essa interface também ajuda na visualização do painel de preferências no aplicativo. Todos os navegadores modernos usam esse recurso.

  • Menu- Menu é um conjunto de comandos padrão, agrupados e colocados em um local visível (geralmente no topo) dentro da janela do aplicativo. O menu pode ser programado para aparecer ou ocultar com cliques do mouse.

  • Icon- Um ícone é uma pequena imagem que representa um aplicativo associado. Quando esses ícones são clicados ou clicados duas vezes, a janela do aplicativo é aberta. O ícone exibe aplicativos e programas instalados em um sistema na forma de pequenas imagens.

  • Cursor- Dispositivos de interação, como mouse, touch pad e caneta digital, são representados na GUI como cursores. O cursor na tela segue as instruções do hardware quase em tempo real. Os cursores também são nomeados como ponteiros em sistemas GUI. Eles são usados ​​para selecionar menus, janelas e outros recursos do aplicativo.

Componentes específicos da interface do usuário

A GUI de um aplicativo contém um ou mais dos elementos GUI listados:

  • Application Window - A maioria das janelas de aplicativos usa as construções fornecidas pelos sistemas operacionais, mas muitos usam suas próprias janelas criadas pelo cliente para conter o conteúdo do aplicativo.

  • Dialogue Box - É uma janela filha que contém mensagem para o usuário e solicitação de alguma ação a ser executada. Por exemplo: o aplicativo gera uma caixa de diálogo para obter a confirmação do usuário para excluir um arquivo.

  • Text-Box - Fornece uma área para o usuário digitar e inserir dados baseados em texto.

  • Buttons - Eles imitam botões da vida real e são usados ​​para enviar entradas para o software.

  • Radio-button- Exibe as opções disponíveis para seleção. Apenas um pode ser selecionado entre todos os oferecidos.

  • Check-box- Funções semelhantes à caixa de listagem. Quando uma opção é selecionada, a caixa é marcada como marcada. Várias opções representadas por caixas de seleção podem ser selecionadas.

  • List-box - Fornece lista de itens disponíveis para seleção. Mais de um item pode ser selecionado.

Outros componentes de GUI impressionantes são:

  • Sliders
  • Combo-box
  • Data-grid
  • Lista suspensa

Atividades de design de interface do usuário

Há uma série de atividades realizadas para projetar a interface do usuário. O processo de design e implementação da GUI é semelhante ao SDLC. Qualquer modelo pode ser usado para implementação de GUI entre modelos em cascata, iterativo ou espiral.

Um modelo usado para design e desenvolvimento de GUI deve cumprir essas etapas específicas da GUI.

  • GUI Requirement Gathering- Os designers podem querer uma lista de todos os requisitos funcionais e não funcionais da GUI. Isso pode ser obtido do usuário e de sua solução de software existente.

  • User Analysis- O designer estuda quem vai usar o software GUI. O público-alvo é importante, pois os detalhes do projeto mudam de acordo com o conhecimento e o nível de competência do usuário. Se o usuário tiver experiência técnica, uma interface gráfica avançada e complexa pode ser incorporada. Para um usuário novato, mais informações sobre como fazer o software estão incluídas.

  • Task Analysis- Os projetistas devem analisar qual tarefa deve ser realizada pela solução de software. Aqui na GUI, não importa como isso será feito. As tarefas podem ser representadas de maneira hierárquica, pegando uma tarefa principal e dividindo-a em subtarefas menores. As tarefas fornecem objetivos para a apresentação da GUI. O fluxo de informações entre as subtarefas determina o fluxo do conteúdo da GUI no software.

  • GUI Design & implementation- Os designers, após obterem informações sobre requisitos, tarefas e ambiente do usuário, projetam a GUI e implementam no código e incorporam a GUI com software funcional ou fictício em segundo plano. Em seguida, é autotestado pelos desenvolvedores.

  • Testing- O teste de GUI pode ser feito de várias maneiras. A organização pode ter inspeção interna, envolvimento direto dos usuários e lançamento da versão beta são alguns deles. O teste pode incluir usabilidade, compatibilidade, aceitação do usuário, etc.

Ferramentas de implementação de GUI

Existem várias ferramentas disponíveis com as quais os designers podem criar GUI inteira com um clique do mouse. Algumas ferramentas podem ser incorporadas ao ambiente de software (IDE).

As ferramentas de implementação de GUI fornecem uma matriz poderosa de controles de GUI. Para personalização do software, os designers podem alterar o código de acordo.

Existem diferentes segmentos de ferramentas GUI de acordo com seu uso e plataforma diferentes.

Exemplo

GUI móvel, GUI do computador, GUI da tela de toque, etc. Aqui está uma lista de algumas ferramentas que são úteis para construir uma GUI:

  • FLUID
  • AppInventor (Android)
  • LucidChart
  • Wavemaker
  • Estúdio visual

Regras de ouro da interface do usuário

As regras a seguir são mencionadas como as regras de ouro para o design de GUI, descritas por Shneiderman e Plaisant em seu livro (Designing the User Interface).

  • Strive for consistency- Sequências consistentes de ações devem ser exigidas em situações semelhantes. Terminologia idêntica deve ser usada em prompts, menus e telas de ajuda. Comandos consistentes devem ser empregados em todo o processo.

  • Enable frequent users to use short-cuts- O desejo do usuário de reduzir o número de interações aumenta com a frequência de uso. Abreviações, teclas de função, comandos ocultos e recursos de macro são muito úteis para um usuário experiente.

  • Offer informative feedback- Para cada ação do operador, deve haver algum feedback do sistema. Para ações frequentes e menores, a resposta deve ser modesta, enquanto para ações não frequentes e principais, a resposta deve ser mais substancial.

  • Design dialog to yield closure- As sequências de ações devem ser organizadas em grupos com início, meio e fim. O feedback informativo na conclusão de um grupo de ações dá aos operadores a satisfação da realização, uma sensação de alívio, o sinal para retirar planos de contingência e opções de suas mentes, e isso indica que o caminho a seguir está claro para se preparar para o próximo grupo de ações.

  • Offer simple error handling- Tanto quanto possível, projete o sistema de forma que o usuário não cometa erros graves. Se um erro for cometido, o sistema deve ser capaz de detectá-lo e oferecer mecanismos simples e compreensíveis para lidar com o erro.

  • Permit easy reversal of actions- Esse recurso alivia a ansiedade, pois o usuário sabe que erros podem ser desfeitos. A reversão fácil de ações incentiva a exploração de opções desconhecidas. As unidades de reversibilidade podem ser uma única ação, uma entrada de dados ou um grupo completo de ações.

  • Support internal locus of control- Operadores experientes desejam fortemente a sensação de que estão no comando do sistema e de que o sistema responde às suas ações. Projete o sistema para tornar os usuários os iniciadores das ações, e não os respondentes.

  • Reduce short-term memory load - A limitação do processamento de informações humanas na memória de curto prazo requer que as exibições sejam mantidas simples, exibições de várias páginas sejam consolidadas, a frequência do movimento da janela seja reduzida e o tempo de treinamento suficiente seja alocado para códigos, mnemônicos e sequências de ações.