Uma interface gráfica do usuário (GUI) mostrando vários elementos: botões de rádio, caixas de seleção e outros elementos. A imagem mostrada utiliza o ambiente de área de trabalhoKDE.
A GUI é apresentada (exibida) na tela do computador. É o resultado do processamento da entrada do usuário e, geralmente, a interface principal para a interação humano-máquina. As UIs táteis populares em pequenos dispositivos móveis são uma sobreposição da saída visual sobre a entrada visual.
Projetar a composição visual e o comportamento temporal de uma GUI é uma parte importante da programação de aplicações de software na área da interação humano-computador. O seu objetivo é aumentar a eficiência e a facilidade de uso do design lógico subjacente de um programa de computador armazenado, uma disciplina de design chamada usabilidade. Métodos de design centrado no usuário são usados para garantir que a linguagem visual introduzida no design seja bem adaptada às tarefas.
As características visíveis da interface gráfica de uma aplicação são por vezes referidas como chrome ou GUI. Tipicamente, os usuários interagem com a informação manipulando widgets visuais que permitem interações apropriadas ao tipo de dados que contêm. Os widgets de uma interface bem projetada são selecionados para apoiar as ações necessárias para atingir os objetivos dos usuários. Um modelo-visão-controlador permite estruturas flexíveis nas quais a interface é independente e indiretamente ligada às funções da aplicação, para que a GUI possa ser personalizada facilmente. Isto permite aos usuários selecionar ou projetar uma skin ou tema diferente à vontade, e facilita o trabalho do designer para alterar a interface conforme as necessidades do usuário evoluem. Um bom design de GUI relaciona-se mais com os usuários e menos com a arquitetura do sistema. Widgets grandes, como janelas, geralmente fornecem uma moldura ou recipiente para o conteúdo principal de apresentação, como uma página web, mensagem de e-mail ou desenho. Os menores geralmente atuam como uma ferramenta de entrada do usuário.
Uma GUI pode ser projetada para os requisitos de um mercado vertical como GUIs específicas para aplicações. Exemplos incluem caixas eletrônicos (ATM), telas táteis de pontos de vendas (POS) em restaurantes, autoatendimento em lojas de varejo, check-in e emissão de bilhetes aéreos, quiosques de informações em espaços públicos, como estações de trens ou museus, e monitores ou telas de controle em aplicações industriais embarcadas que empregam um sistema operacional de tempo real (RTOS).
Celulares e sistemas de jogos portáteis também empregam GUIs de tela tátil específicas para aplicações. Automóveis mais novos usam GUIs nos seus sistemas de navegação e centros multimídia, ou combinações de navegação e centros multimídia.
Uma GUI usa uma combinação de tecnologias e dispositivos para fornecer uma plataforma com a qual os usuários podem interagir para as tarefas de reunir e produzir informação.
Uma série de elementos que compõem uma linguagem visual evoluíram para representar informação armazenada em computadores. Isto torna mais fácil para pessoas com poucos conhecimentos de informática trabalhar e usar software de computador. A combinação mais comum de tais elementos em GUIs é o paradigma janelas, ícones, campos de texto, telas, menus, ponteiro (WIMP), especialmente em computadores pessoais.
O estilo de interação WIMP usa um dispositivo de entrada virtual para representar a posição da interface de um dispositivo apontador, mais frequentemente um mouse, e apresenta informações organizadas em janelas e representadas com ícones. Os comandos disponíveis são compilados em menus, e as ações são executadas fazendo gestos com o dispositivo apontador. Um gerenciador de janelas facilita as interações entre janelas, aplicativos e o sistema de janelas. O sistema de janelas lida com dispositivos de hardware, tais como dispositivos apontadores, hardware gráfico e posicionamento do ponteiro.
Em computadores pessoais, todos estes elementos são modelados através de uma metáfora de área de trabalho para produzir uma simulação chamada ambiente de área de trabalho, na qual a tela representa uma área de trabalho, sobre a qual documentos e pastas de documentos podem ser colocados. Gerenciadores de janelas e outros softwares se combinam para simular o ambiente de área de trabalho com graus variados de realismo.
As entradas podem aparecer em uma lista para dar espaço a texto e detalhes, ou em uma grade para compactação e ícones maiores com pouco espaço por baixo para texto. Existem variações intermediárias, como uma lista com várias colunas de itens e uma grade de itens com linhas de texto que se estendem lateralmente a partir do ícone.
Layouts de várias linhas e colunas comumente encontrados na web são "shelf" (prateleira) e "waterfall" (cascata). O primeiro é encontrado em mecanismos de busca de imagens, onde as imagens aparecem com uma altura fixa, mas comprimento variável, e é tipicamente implementado com a propriedade e parâmetro CSS display: inline-block;. Um layout de cascata encontrado no Imgur e TweetDeck com largura fixa, mas altura variável por item, é geralmente implementado especificando column-width:.
Dispositivos móveis menores, como assistentes digitais pessoais (PDAs) e smartphones, utilizam tipicamente os elementos WIMP com metáforas unificadoras diferentes, devido a restrições de espaço e dispositivos de entrada disponíveis. Os aplicativos para os quais o WIMP não é adequado podem usar novas técnicas de interação, coletivamente denominadas UIs pós-WIMP.
Desde 2011, alguns sistemas operacionais baseados em tela sensível ao toque, como o iOS da Apple (iPhone) e o Android, utilizam a classe de GUIs designada por pós-WIMP. Estes suportam estilos de interação que usam mais do que um dedo em contato com a tela, o que permite ações como beliscar e girar, que não são suportadas por um único ponteiro e mouse.
Existem também ações executadas por programas que afetam a GUI. Por exemplo, existem componentes como inotify ou D-Bus para facilitar a comunicação entre programas de computador.
Ivan Sutherland desenvolveu o Sketchpad em 1963, amplamente considerado o primeiro programa gráfico de design auxiliado por computador. Utilizava uma caneta óptica para criar e manipular objetos em desenhos de engenharia em tempo real com gráficos coordenados. No final da década de 1960, investigadores do Stanford Research Institute, liderados por Douglas Engelbart, desenvolveram o On-Line System (NLS), que utilizava hiperlinks baseados em texto manipulados com um dispositivo então novo: o mouse. (Uma demonstração do NLS em 1968 ficou conhecida como "A Mãe de Todas as Demonstrações".) Na década de 1970, as ideias de Engelbart foram ainda mais refinadas e estendidas aos gráficos por pesquisadores do Xerox PARC e, especificamente, Alan Kay, que foi além dos hiperlinks baseados em texto e usou uma GUI como interface principal para a linguagem de programação Smalltalk, que rodava no computadorXerox Alto, lançado em 1973. A maioria das GUIs modernas de uso geral deriva deste sistema.
O Xerox Alto foi um computador pessoal pioneiro lançado em março de 1973 pelo centro de pesquisas Xerox PARC, considerado o primeiro da história a utilizar uma interface gráfica baseada na metáfora de "mesa de trabalho" (desktop).
A GUI do Xerox PARC consistia em elementos gráficos tais como janelas, menus, botões de rádio e caixas de seleção. O conceito de ícones foi introduzido mais tarde por David Canfield Smith, que tinha escrito uma tese sobre o assunto sob a orientação de Kay. A GUI do PARC emprega um dispositivo apontador juntamente com um teclado. Estes aspectos podem ser enfatizados usando o termo alternativo e acrônimo para janelas, ícones, menus, dispositivo apontador (WIMP). Este esforço culminou no Xerox Alto de 1973, o primeiro computador com uma GUI, embora o sistema nunca tenha atingido a produção comercial.
O primeiro computador comercialmente disponível com uma GUI foi a estação de trabalho PERQ de 1979, fabricada pela Three Rivers Computer Corporation. O seu design foi fortemente influenciado pelo trabalho no Xerox PARC. Em 1981, a Xerox comercializou finalmente as ideias do Alto sob a forma de um sistema novo e melhorado – o Xerox 8010 Information System – mais conhecido como Xerox Star. Estes sistemas iniciais estimularam muitos outros esforços de GUI, incluindo máquinas Lisp da Symbolics e outros fabricantes, o Apple Lisa (que apresentou o conceito de barra de menus e controles de janelas) em 1983, o AppleMacintosh 128K em 1984, e o Atari ST com o GEM da Digital Research, e o Commodore Amiga em 1985. O Visi On foi lançado em 1983 para computadores IBM PC compatível, mas nunca foi popular devido às suas altas exigências de hardware. No entanto, foi uma influência crucial no desenvolvimento contemporâneo do Microsoft Windows.
Apple, Digital Research, IBM e Microsoft usaram muitas das ideias da Xerox para desenvolver produtos, e as especificações Common User Access da IBM formaram a base das GUIs usadas no Microsoft Windows, OS/2Presentation Manager da IBM, e o kit de ferramentas e gerenciador de janelas Unix Motif. Estas ideias evoluíram para criar a interface encontrada nas versões atuais do Microsoft Windows, e em vários ambientes de área de trabalho para sistemas operacionais do tipo Unix (Unix-like), como o macOS e o Linux. Assim, a maioria das GUIs atuais tem, em grande parte, expressões comuns.
Um Apple Lisa (1983) demonstrando o Lisa Office System (LisaOS), que apresentava a primeira GUI comercialmente disponível da Apple Computer
O início da década de 1980 viu um interesse crescente nas GUIs. O Apple Lisa foi lançado em 1983, mas era caro e comercialmente malsucedido. Aplicações individuais para muitas plataformas apresentaram as suas próprias variantes de GUI. Apesar das vantagens da GUI, muitos críticos questionaram o valor de todo o conceito, citando limites de hardware e problemas em encontrar software compatível.
Em 1984, a Apple introduziu o Macintosh através do anúncio televisivo "1984" durante o Super Bowl XVIII, com alusões ao romance Nineteen Eighty-Four de George Orwell. O objetivo do anúncio era fazer as pessoas pensar sobre computadores, identificando a interface de fácil utilização como um computador pessoal que se afastava dos sistemas anteriores orientados para os negócios, e tornando-se uma representação de assinatura dos produtos Apple.
O Atari ST de 1985 foi lançado com a GUI GEM da Digital Research, que também foi publicada para MS-DOS.
O Amiga 1000 foi lançado no mesmo ano, embora não estivesse amplamente disponível até 1986, com o ambiente de trabalho gráfico Workbench. Esta interface funcionava como uma tarefa separada, o que significava que era muito responsiva e, ao contrário de outras GUIs da época, não congelava quando um programa estava ocupado.
O Windows 95, acompanhado por uma extensa campanha de marketing, foi um grande sucesso no mercado no lançamento e rapidamente tornou-se o sistema operacional de desktop mais popular.
Em 2007, com o iPhone e mais tarde em 2010 com a introdução do iPad, a Apple popularizou o estilo de interação pós-WIMP para telas multitoques, e esses dispositivos foram considerados marcos no desenvolvimento de dispositivos móveis.
As pessoas disseram que é mais uma máquina para o lado direito do cérebro e tudo mais — acho que há alguma verdade nisso. Penso que há algo em lidar com uma interface gráfica e uma interface mais cinética — você está realmente movendo informação, vê que ela se move como se tivesse substância. E você não vê isso em um PC. O PC é muito uma máquina conceitual; você move informação da mesma forma que move fórmulas, elementos de cada lado de uma equação. Acho que há uma diferença.
Como os comandos disponíveis em interfaces de linha de comando podem ser muitos, operações complexas podem ser realizadas usando uma curta sequência de palavras e símbolos. Funções personalizadas podem ser usadas para facilitar o acesso a ações frequentes.
As interfaces de linha de comando são mais leves, pois apenas carregam a informação necessária para uma tarefa; por exemplo, não há miniaturas de pré-visualização ou renderização gráfica de páginas web. Isso permite maior eficiência e produtividade uma vez aprendidos muitos comandos. Mas alcançar esse nível leva algum tempo, porque as palavras de comando podem não ser facilmente descobertas ou mnemônicass. Além disso, usar a linha de comando pode se tornar lento e propenso a erros quando os usuários têm que inserir comandos longos que compreendem muitos parâmetros ou vários nomes de arquivos diferentes de uma só vez. No entanto, interfaces com janelas, ícones, menus, ponteiro (WIMP) apresentam aos usuários muitos widgets que representam e podem acionar alguns dos comandos disponíveis do sistema.
As GUIs podem se tornar bastante difíceis quando as caixas de diálogo estão ocultas profundamente em um sistema ou movidas para lugares diferentes durante reformulações de interface. Além disso, ícones e caixas de diálogo são geralmente mais difíceis de programar para os usuários.
As WIMPs usam extensivamente modos, pois o significado de todas as teclas e cliques em posições específicas na tela é redefinido a todo momento. As interfaces de linha de comando usam modos apenas de formas limitadas, tais como para o diretório atual e variáveis de ambiente.
A maioria dos sistemas operacionais modernos fornece tanto uma GUI quanto algum nível de CLI, embora as GUIs recebam geralmente mais atenção.
Wrappers de GUI
Wrappers de GUI encontram uma forma de contornar as versões de (tipicamente) software Linux e tipo Unix de interface de linha de comando (CLI) e suas UIs baseadas em texto ou rótulos de comando digitados. Embora aplicações de linha de comando ou baseadas em texto permitam aos usuários executar um programa de forma não interativa, os wrappers de GUI sobre eles evitam a íngreme curva de aprendizado da linha de comando, que exige que os comandos sejam digitados no teclado. Ao iniciar um wrapper de GUI, os usuários podem intuitivamente interagir, iniciar, parar e alterar os seus parâmetros de trabalho, através de ícones gráficos e indicadores visuais de um ambiente de área de trabalho, por exemplo. As aplicações também podem fornecer ambas as interfaces, e quando o fazem, a GUI é geralmente um wrapper WIMP em torno da versão de linha de comando. Isso é especialmente comum com aplicações projetadas para sistemas operacionais do tipo Unix. Estas últimas costumavam ser implementadas primeiro porque permitiam aos desenvolvedores focar exclusivamente na funcionalidade do seu produto sem se preocuparem com detalhes de interface, tais como desenhar ícones e posicionar botões. Projetar programas dessa forma também permite aos usuários executar o programa em um shell script.
Interface gráfica do usuário tridimensional
Esta seção é sobre UIs 3D exclusivamente de software. Para dispositivos de entrada/saída 3D de software e hardware, ver UIs 3D.
Muitos ambientes e jogos utilizam os métodos de gráficos 3D para projetar objetos de GUI 3D na tela. O uso de gráficos 3D tornou-se cada vez mais comum nos principais sistemas operacionais (ex.: Windows Aero e Aqua (macOS)) para criar interfaces atraentes, denominadas de "enfeite visual" ou eye candy (que inclui, por exemplo, o uso de sombras projetadas sob as janelas e o cursor), ou para fins funcionais possíveis apenas usando três dimensões. Por exemplo, a alternância de usuários é representada girando um cubo com faces que representam o espaço de trabalho de cada usuário, e a gestão de janelas é representada através de um mecanismo de viragem ao estilo Rolodex no Windows Vista (ver Windows Flip 3D). Em ambos os casos, o sistema operacional transforma janelas em tempo real enquanto continua a atualizar o conteúdo dessas janelas.
A GUI é geralmente baseada em WIMP, embora ocasionalmente surjam outras metáforas, tais como as utilizadas no Microsoft Bob, 3dwm, File System Navigator, File System Visualizer, 3D Mailbox, e GopherVR. Zooming (ZUI) é uma tecnologia relacionada que promete entregar os benefícios de representação de ambientes 3D sem as desvantagens de usabilidade de problemas de orientação e objetos ocultos. Em 2006, a Hillcrest Labs introduziu a primeira ZUI para televisão. Outras inovações incluem os menus no PlayStation 2; os menus no Xbox; o Project Looking Glass da Sun; Metisse, que era semelhante ao Project Looking Glass; BumpTop, onde os usuários podem manipular documentos e janelas com movimento realista e física como se fossem documentos físicos; Croquet OS, que foi construído para colaboração; e gerenciadores de janelas de composição como Enlightenment e Compiz. A realidade aumentada e a realidade virtual também fazem uso de elementos de GUI 3D.
Na ficção científica
As GUIs 3D apareceram na literatura de ficção científica e em filmes, mesmo antes de certas tecnologias serem viáveis ou de uso comum.
O filme norte-americano de 1993 Jurassic Park apresenta o gerenciador de arquivos 3D da Silicon Graphics, o File System Navigator, um gerenciador de arquivos real para sistemas operacionais Unix.
O filme Minority Report tem cenas de oficiais da polícia usando sistemas de dados 3D especializados.
↑«VisiCorp Visi On». O produto Visi On não era destinado ao usuário doméstico. Foi projetado e com preço para estações de trabalho corporativas de gama alta. O hardware que exigia era bastante considerável para 1983. Exigia um mínimo de 512k de RAM e um disco rígido (5 megs de espaço).
↑Smith, David A.; Kay, Alan; Raab, Andreas; Reed, David P. «Croquet – A Collaboration System Architecture»(PDF). croquetconsortium.org. Consultado em 17 de setembro de 2022. Arquivado do original(PDF) em 27 de setembro de 2007. Os esforços no Xerox PARC sob a liderança de Alan Kay que impulsionaram o desenvolvimento de [...] interfaces de usuário baseadas em tela de mapas de bits poderosas foram fundamentais. De certa forma, tudo o que estamos fazendo aqui é estender este modelo para 3D e adicionar um novo modelo robusto de colaboração de objetos.
Marcin Wichary's GUIdebook(em inglês), galeria de interfaces gráficas de usuário: mais de 5.500 capturas de tela da história de GUIs, aplicativos e ícones.
3D Graphical User Interfaces no Wayback Machine(arquivado em 2017-08-29) (PDF) (em inglês), Farid BenHajji e Erik Dybner, Departamento de Ciências da Computação e Sistemas, Universidade de Estocolmo
.png)
