Objetos de interação em interfaces

Prévia do material em texto

Aula 5 – Objetos de interação em interface 
 
Introdução 
 
Nesta aula, você conhecerá os principais objetos com os quais os usuários interagem nas interfaces. O conhecimento 
sobre esses objetos e seu comportamento é essencial, pois é através deles que o projetista transmite sua mensagem 
aos usuários. 
Uma escolha equivocada pode comprometer a compreensão da interface e prejudicar o desenvolvimento da tarefa 
pelo usuário. 
Sendo assim, a escolha dos elementos componentes das telas das aplicações é de importância fundamental na 
garantia de sua usabilidade. 
 
Composição de interfaces 
 
Imagine que as duas interfaces a seguir integram as telas de uma pesquisa de satisfação feita junto aos alunos ao 
final da realização de um curso. 
 
Observe-as e reflita sobre suas semelhanças e diferenças: 
 
 
 
Você deve ter percebido que, no Exemplo 1, a opção deve ser marcada em um dos pequenos círculos exibidos ao 
lado dos textos Excelente, Muito boa, Boa, Razoável e Indiferente. 
 
Entretanto, no Exemplo 2, embora os textos sejam os mesmos, a opção escolhida deve ser assinalada em um 
quadradinho. No mais, todos os outros elementos que compõem as interfaces são exatamente iguais. 
 
Será que a diferença entre os exemplos está apenas nesse pequeno detalhe visual? 
 
A resposta a essa pergunta é NÃO! 
Vejamos a explicação sobre essa questão! 
 
No Exemplo 1, os pequenos círculos utilizados nas alternativas de resposta são chamados de radio buttons (seletores 
exclusivos). Em um grupo de botões desse tipo, SOMENTE UM deles pode ser assinalado. 
 
Já no Exemplo 2, os quadradinhos das opções são denominados check box (seletores não exclusivos). Em um grupo 
de botões desse tipo, mais de uma opção pode ser assinalada. 
 
Percebemos, portanto, uma diferença no comportamento dos componentes das interfaces. 
 
No Exemplo 1, somente uma resposta pode ser assinalada, enquanto que, no Exemplo 2, mais de uma resposta pode 
ser selecionada pelo usuário. 
 
Dessa forma, vemos que o Exemplo 2 tem um comportamento inadequado e pode acarretar problemas à aplicação, 
pois essa certamente não espera duas respostas para a pergunta feita ao usuário. 
 
O caso apresentado nos faz perceber que a seleção de objetos para composição das interfaces está muito menos 
relacionada à estética e muito mais ligada à funcionalidade. Uma escolha equivocada pode acarretar em um 
comportamento não esperado por parte da aplicação. 
 
Sendo assim, é essencial conhecermos os principais elementos para construção de interfaces bem como o 
comportamento que apresentam, a fim de não criarmos problemas simplesmente por conta de uma escolha 
equivocada. 
 
Objetos de interação 
 
 
 
 
 
O conceito de metáfora do mundo real diz respeito à tentativa de fazer com que as interfaces imitem o mundo no 
qual os usuários estão inseridos e com o qual já estão acostumados. 
 
Um bom exemplo disso é a calculadora do MS Windows. Se comparada a uma calculadora real, veremos que o 
aplicativo é bastante semelhante e traz, basicamente, todas as funções implementadas na calculadora física. 
 
Outro bom exemplo é o de passagem de páginas, encontrado em revistas virtuais. O efeito visual é muito 
semelhante ao de uma pessoa virando a página de um livrou ou revista. 
 
Se você não conhece essa metáfora, visite a Revista New Routes, da Livraria Disal (linkar com 
http://www.disal.com.br) 
 
Os painéis de controle não são um objeto, mas um conceito de organização. Trata-se de são uma coletânea de 
objetos de todos os outros tipos (manipulação, seleção, edição e informação) que, juntos, viabilizam a execução de 
uma tarefa 
 
Os objetos para seleção têm o objetivo de facilitar a entrada de dados, visto que disponibilizam na interface um 
grupo de opções a partir do qual o usuário seleciona a opção que deseja. 
 
Nesse caso, diminui-se o esforço cognitivo, pois não há a necessidade de memorização de comandos ou nomes de 
opções. 
 
Os objetos para edição são utilizados na entrada de dados via teclado. Nesse tipo de objeto, o valor digitado pelo 
usuário não pode ser antecipado. Portanto, os objetos para edição são menos seguros do que as listas de seleção, 
por exemplo. 
 
Os objetos para edição podem ser campos de dados ou linha/área de comando. 
 
Os objetos para informação são utilizados na apresentação de dados e informações para os usuários. Esses objetos 
compõem apresentações classificados como estruturadas e simples, que, por sua vez, podem ser criadas a partir de 
diferentes estruturas. 
 
Painéis de controle 
 
No grupo dos painéis de controle estão as janelas, os formulários, as caixas de diálogo e as caixas de mensagem. 
 
A figura a seguir representa o esquema dessa categoria: 
 
 
 
Janelas 
 
As janelas servem de base para a construção das interfaces. Sobre elas, são dispostos os outros objetos de interação 
que, juntos, farão a mediação das interações com os usuários. 
 
As janelas são objetos retangulares redimensionáveis e estão divididas em duas grandes áreas: a barra de títulos e a 
área para colocação dos outros objetos de interação. 
 
Elas também podem ser reposicionadas, maximizadas e minimizadas. É importante observar que, idealmente, não 
deve ser necessário rolar ou paginar, muitas vezes, o conteúdo que se vê na janela, pois essa ação cansa o usuário. 
Veja, a seguir, uma janela com informações sobre o navegador Firefox: 
 
 
 
Formulários 
 
Os formulários são janelas destinadas à entrada de dados ou à visualização de informações. Por isso, é comum que 
os formulários exibam objetos de interação que viabilizem inclusão, exclusão, alteração e consulta de dados, bem 
como objetos para navegação por entre os dados apresentados. 
 
O ideal é que o formulário permita a navegação entre os campos através da tecla <TAB>, pois, dessa forma, o 
usuário não precisa ficar alternando entre o teclado e o mouse para digitar e posicionar-se nos campos. 
 
Também é importante observar que, quando possível e para minimizar a carga de memória, podem ser 
estabelecidos valores default para alguns campos do formulário. 
 
Veja, a seguir, um formulário de transferência de valores entre contas do Banco Itaú: 
 
 
 
Caixas de diálogo 
 
As caixas de diálogo são janelas usadas na comunicação entre a aplicação e o usuário. A intenção é estabelecer um 
diálogo: disso resulta sua nomenclatura. Essas caixas podem dar informações ou solicitar uma resposta do usuário. 
 No que se refere à persistência, essas caixas podem ser classificadas como modais ou não modais. 
 
Lembre-se sempre de somente exibir uma caixa de diálogo quando a interação com o usuário for realmente 
necessária, pois a exibição de uma mensagem interrompe o fluxo de tarefas e, portanto, não deve ser infundada. 
 
Veja, ao lado, uma caixa de diálogo para formatação de nota de rodapé do MS Word: 
 
 
 
 
 
Caixas de mensagem 
 
As caixas de mensagem costumam ser do tipo modal, visto que, normalmente, chamam a atenção do usuário para a 
execução de operações perigosas. Portanto, essas caixas demandam total atenção do usuário. 
 
As caixas de mensagem costumam exibir dois botões: um para confirmação e outro para cancelamento da operação. 
 
Nesse tipo de caixa, é importante assinalar como default a opção de anulação da tarefa, a fim de que a operação 
destrutiva não seja executada sem a devida leitura da mensagem de alerta. Apesar de aumentar a carga de trabalho 
para o usuário, esse procedimento é mais seguro e evita que erros indesejados aconteçam. 
 
 
 
Objetos para seleção 
 
A figura a seguir representa o esquema da categoria objetos para seleção: 
 
 
 
Estrutura de menus 
 
A estrutura de menus é formada por um grupo de menus hierárquicos associados às diferentes tarefas executadas 
por uma aplicação. Essa estrutura costuma começar com um menu principal queaninha painéis de menus de ordem 
inferiores. 
 
Isso significa que, a partir de uma opção de um menu principal, é possível abrir um submenu (de segunda ordem), 
que, por sua vez, pode conter uma opção que dê acesso a outro submenu (de terceira ordem), e assim 
sucessivamente. 
 
É importante ressaltar que os nomes das opções que constituem os diferentes menus devem ser significativos e 
familiares aos usuários da aplicação. Outro ponto importante é respeitar o fluxo de pensamento dos usuários, que 
antecede a execução da tarefa. 
 
Por exemplo, se a aplicação permitirá a criação de tabelas, o ideal é que a opção para realizar essa tarefa esteja 
dentro de Incluir, pois o usuário possivelmente pensará: Quero incluir uma tabela. 
 
Vale lembrar, também, que é essencial que os as opções dos menus estejam associadas a teclas de atalho, visto que 
isso facilita seu acionamento pelos usuários. 
 
Veja, a seguir, uma estrutura de menus do Microsoft Outlook: 
 
 
 
Barra de menu 
 
A barra de menu é o objeto responsável pela criação do menu principal da aplicação. Essa barra deve estar 
horizontalmente distribuída na parte superior da janela e deve conter entre 5 e 9 opções, de modo a respeitar a 
memória do usuário. 
 
Os nomes das opções exibidas na barra de menu devem ser curtos e não abreviados, sem qualquer efeito na fonte 
(como negrito ou itálico), e devem apresentar somente a primeira letra da opção em maiúscula. 
 
A barra de menu somente pode desaparecer da interface se o usuário optar por não visualizá-la. Se esse for o caso, é 
preciso que, uma vez desativada a barra de menu, o usuário disponha de uma opção para reativar sua exibição. 
 
Veja, a seguir, uma barra de menu do Microsoft Internet Explorer: 
 
 
Painel de menu 
 
Os painéis de menu são áreas gráficas sobre as quais são criados os submenus das opções do menu principal. 
 
O ideal é que os painéis sejam capazes de exibir todas as subopções de uma única vez e que façam uma distinção 
visual entre as subopções disponíveis e as não disponíveis no contexto em que o usuário se encontra. Os estados 
mais comuns assumidos pelas opções do painel de menu são ativa, inativa, em foco, ativada e desativada. 
 
Veja um painel de menu do Paint: 
 
 
 
 
 
 
Barra de ferramentas 
 
As barras de ferramentas é uma espécie de painel de menu no qual o alinhamento das opções é horizontal e onde a 
forma textual de identificação das opções dá espaço à forma gráfica, ou seja, a representação das opções disponíveis 
é feita por meio de ícones. 
 
É importante observar que não há espaço disponível na barra de ferramentas para que sejam exibidas todas as 
opções da estrutura de menu. Sendo assim, há que se julgar quais são as opções mais frequentemente utilizadas 
pelos usuários e incluir essas opções na barra. 
 
Entretanto, como as opções mais frequentes para um usuário podem não ser mais utilizadas por outro, o ideal é que 
a barra de ferramentas possa ser customizada, como permite a suíte do Microsoft Office. 
 
Quando o apontador do mouse for posicionado sobre os ícones das barras de ferramentas, esses devem contar com 
um apoio textual. Dessa forma, um usuário que, eventualmente, não venha a associar a forma gráfica à opção que 
ela representa pode contar com uma espécie de dica. 
 
Veja, a seguir, uma barra de ferramentas do Microsoft Word com exibição de dica para a opção em foco: 
 
 
 
Lista de seleção 
 
As listas de seleção representam grupos de valores possíveis para um dado a ser informado pelo usuário. É comum 
que essas listas apresentem os valores mais frequentemente escolhidos no topo e, a seguir, os outros valores 
possíveis. 
 
O ideal é adotar um padrão de ordenação para os valores (como alfabético ou crescente, por exemplo). 
 
No que se refere ao tamanho, o ideal é que as listas consigam exibir de 5 a 9 itens por vez, em função da 
preocupação com a carga de memória do usuário. 
 
Entretanto, se o total de valores for maior do que 9, o ideal é adotar listas pull-down que possam ter o restante de 
seu conteúdo exibido ao ser acionada uma tecla, normalmente identificada por uma seta para baixo (com aspecto 
semelhante a ▼). 
 
É comum que se adote a largura da lista equivalente à extensão do valor mais longo, de modo que o usuário consiga 
sempre ler a opção em foco. 
 
Veja, ao lado, uma lista para seleção de impressora para envio de documento: 
 
 
Seletores exclusivos 
 
Os seletores exclusivos visam garantir que, em um grupo de opções, somente uma seja escolhida. Esses seletores 
são uma forma mais segura de entrada de dados, visto que não há digitação por parte do usuário. 
 
Os seletores exclusivos são representados graficamente por círculos. 
 
Veja, ao lado, uma pesquisa de opinião do blog Programação On-line, que apresenta seletores exclusivos: 
 
 
 
Seletores não exclusivos 
 
Os seletores não exclusivos funcionam de modo oposto aos seletores exclusivos. Com aqueles, forma-se um grupo 
de opções no qual mais de uma opção pode ser selecionada. 
 
A representação gráfica desses seletores é feita por pequenos quadrados. 
 
Veja, a seguir, uma configuração do bloqueador de pop-ups do Internet Explorer, que apresenta seletores não 
exclusivos: 
 
 
Botões de comando 
 
Os botões de comandos são comumente encontrados nas janelas sobre as quais são criadas as interfaces. Eles têm 
forma retangular e são identificados por um pequeno texto eventualmente acompanhado de uma imagem. 
 
Esses botões representam comandos que podem ser executados pelo computador no contexto atual da aplicação ou 
possíveis respostas para uma pergunta feita ao usuário. Os botões mais comuns são os do tipo Ok, Sim, Não, Aplicar, 
Fechar e Ajuda. 
 
Os botões de comando podem assumir os estados ativo, inativo ou default. 
 
Veja, a seguir, botões de comando na janela Escolher tema do MS PowerPoint: 
 
 
 
Objetos para edição 
 
A figura a seguir representa o esquema da categoria objetos para edição: 
 
 
 
Campos de dados 
 
Na utilização de campos de dados, o usuário dispõe de uma área para digitação da informação solicitada. 
 
Não é possível antecipar o valor a ser digitado, mas há que se adotar algum procedimento de validação, de modo a 
garantir que não haja discrepância, por exemplo, entre o tipo de dado esperado e aquele digitado pelo usuário. A 
explicitação do formato aceito para o dado a ser informado deve, portanto, estar visível na interface. 
 
Outro item que deve acompanhar os campos de dados é o rótulo que identifica o conteúdo a ser digitado. Esse 
rótulo deve ser simples e, normalmente, é posicionado à esquerda do campo de dados ou acima desse campo, com 
o mesmo alinhamento. 
 
Veja, a seguir, os campos de dados agência e conta no site do Banco Santander: 
 
 
Linha/área de comando 
 
A linha e as áreas de comando são campos de entrada uni e multilineares que aceitam comandos a serem 
interpretados e executados pelo computador. 
 
Com esses objetos, os usuários dispõem de maior flexibilidade, pois podem digitar a instrução que desejam sem 
percorrer estruturas hierárquicas complexas, por exemplo. Contudo, pelo mesmo motivo, crescem a carga de 
trabalho demandada na digitação e a possibilidade de erros no processamento do comando. 
 
Veja, a seguir, uma linha de comando do recurso Executar do MS Windows: 
 
 
 
Objetos para informação 
 
A figura a seguir representa o esquema da categoria objetos para informação: 
 
 
 
Apresentações estruturadas 
 
As apresentações estruturadas utilizam listas, tabelas, gráficos, mensagens e textos para mostrar as informações aos 
usuários. 
 
O uso desses objetos facilita a compreensão do que se vê na interface e permite a criação de hierarquias e 
tendências, por exemplo. 
 
Apresentações simples 
 
As apresentações simples, como o próprionome sugere, são menos complexas que as estruturadas. Elas fazem uso 
de rótulos e dados individuais para mostrarem as informações nas interfaces 
 
ATENÇÃO! 
 
Embora os objetos sejam isoladamente classificados e agrupados, é comum que as interfaces sejam compostas por 
objetos de diferentes tipos, de modo a dar conta da necessidade de interação. 
 
 
 
Uma caixa de mensagem – também chamada de caixa de alerta – é uma pequena janela que surge na tela para 
alertar sobre o fato de o computador estar prestes a executar uma operação que pode resultar em danos. 
 
Por exemplo, quando você escolhe esvaziar a lixeira do sistema, um alerta pode surgir perguntando se você tem 
certeza que deseja excluir os itens. Nessa caixa, somente dois botões são exibidos: Sim (para confirmar a exclusão 
dos itens) e Não (para cancelar a operação). 
 
Uma caixa de diálogo, por sua vez, é uma janela não redimensionável exibida na tela como resposta à seleção de 
uma opção pelo usuário. Sua função é obter parâmetros para a execução de uma tarefa ou confirmar solicitações do 
usuário. 
 
Ao solicitar a formatação de fonte no MS Word, por exemplo, o usuário verá uma caixa de diálogo na qual deverá 
definir, dentre outros parâmetros, estilo da fonte, tamanho, cor e efeito.