Engenharia de Software: Projeto de Interface Homem-Máquina

Engenharia de Software 1ª edição 2019 Autoria Parecerista Validador Juliana Padilha Sandra Gavioli Puga Paulo Lacerda Todos os gráficos tabelas e esquemas são creditados à autoria salvo quando indicada a referência Informamos que é de inteira responsabilidade da autoria a emissão de conceitos Nenhuma parte desta publicação poderá ser reproduzida por qualquer meio ou forma sem autorização A violação dos direitos autorais é crime estabelecido pela Lei nº 961098 e punido pelo artigo 184 do Código Penal 45 4 Unidade 4 4 Projeto de Interface HomemMáquina Para iniciar seus estudos Nesta unidade você conseguirá compreender o conceito da interação homemmáquina IHM e as etapas de projetos de interface com usabilidade A interface do usuário é o elemento mais importante de um software pois se a interface for mal projetada poderá reduzir a capacidade de interação do usuário final e consequentemente ele poderá desistir de usar o sistema Objetivos de Aprendizagem Definir o conceito e os objetivos da interação homemmáquina IHM Explicar os objetivos da interação homemmáquina IHM Identificar o conceito e a importância da usabilidade Identificar e explicar os princípios de usabilidade Explicar o processo de análise desenvolvimento e avaliação de projetos de interface de softwares Esclarecer a importância do IHM para projetos de interface de softwares no desenvolvimento de softwares que possuam redução da carga de memória do usuário e que principalmente sejam fáceis de usar 46 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina Introdução da unidade Nesta unidade serão apresentados os conceitos que permitirão ao aluno compreender a importância e os objetivos da interação homemmáquina IHM O sucesso de qualquer produto depende da aceitação pelo usuário e isso está intrinsecamente ligado à facilidade de uso e à produtividade proporcionada pelo produto características essas ligadas à interface do produto Também nesta unidade serão demonstrados os princípios que norteiam um bom projeto de interface de software e que elevam a satisfação dos usuários 41 Conceito de interface A interface é definida como o local onde o contato entre duas entidades ocorre Por exemplo a interface entre usuário e computador é o monitor ROCHA BARANAUSKAS 2000 Já a ISO 9241110 define interface como todas as partes de um sistema interativo de software ou hardware que fornecem informações e controle necessários para que o usuário realize uma determinada tarefa com o sistema interativo Segundo Laurel 1993 apud Rocha e Baranauska 2000 p 8 interface é uma superfície de contato que reflete as propriedades físicas das partes que interagem as funções a serem executadas e o balanço entre o poder e controle O mundo possui outros exemplos de interfaces como a maçaneta de uma porta a direção de um carro entre outros O formato das interfaces reflete as qualidades físicas das partes na interação por exemplo a maçaneta de uma porta é projetada para se adequar ao formato da mão da pessoa que a utilizará assim como o câmbio de um carro cuja localização sugere que será utilizado por uma pessoa destra ROCHA BARANAUSKA 2000 A interface tornouse um importante conceito a ser explorado nos últimos anos Essa evolução é atribuída à introdução ao computador LISA da Apple LISA foi um dos primeiros computadores pessoais a usar uma interface gráfica e mouse Quando se fala em interface homemmáquina é bem provável que você pense em ícones menus barras de rolagem e pastas Conforme vimos interface não é apenas isso Observando o nosso cotidiano é possível perceber que à medida que o hardware evoluiu se fez possível a evolução da interface gráfica Isso acabou ampliando o uso de computadores notebooks e dispositivos móveis smartphones tablets e smartwatch a qualquer tipo de pessoausuário Para saber mais informações sobre a evolução do hardware e da interface assista ao filme Os Piratas do Vale do Silício Pirates of Silicon Valley em inglês lançado em 1999 pela TNT escrito e dirigido por Martyn Burke O filme relata o surgimento das empresas Apple de Steve Jobs e Microsoft de Bill Gates e apresenta a rivalidade entre os proprietários dessas duas empresas Também mostra o surgimento dos computadores pessoais do MSDOS e do primeiro computador a utilizar software com interface gráfica Saiba mais 47 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina 411 Definição e objetivos da interface homemmáquina A interface homemmáquina IHM é também conhecida como interface homemcomputador IHC termo que tem sido adotado desde meados dos anos de 1980 A IHM é definida por Rocha e Baranauskas 2000 p 14 como uma disciplina preocupada com o design avaliação e implementação de sistema computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor deles Os objetivos da IHM consistem em desenvolver softwares fáceis de usar com usabilidade1 seguros e funcionais De acordo com Nielsen 1993 apud Rocha e Baranauska 2000 p 17 os objetivos elencados anteriormente podem ser englobados em um conceito mais amplo denominado aceitabilidade de um sistema A Figura 14 apresenta os atributos da aceitabilidade de um sistema São eles aceitabilidade geral social e prática Figura 14 Atributos da aceitabilidade de um sistema Fonte ROCHA BARANAUSKAS 2000 Segundo Rocha e Baranauska 2000 a aceitabilidade geral de um sistema consiste na combinação da aceitabilidade social com a aceitabilidade na prática A aceitabilidade social referese à aceitação de um sistema quanto à sua relevância no seu papel social No exemplo da porta giratória de uma agência bancária o sistema foi projetado para impedir que assaltantes entrem com armas armas de fogo faca canivetes No entanto esse sistema também impede a passagem de qualquer pessoa que esteja com algum tipo de metal como chaves ou muitas moedas Apesar de o benefício inicial da criação do sistema da porta giratória ser impedir assaltantes de entrarem com armas ele não é aceito socialmente pelos usuários das agências bancárias pois pode levar qualquer um a ser impedido diversas vezes até retirar do corpo todos os objetos de metal e muitas vezes não se sabe ao certo qual objeto estava impedindo a entrada ROCHA BARANAUSKA 2000 A aceitabilidade prática referese aos parâmetros de custo confiabilidade compatibilidade com sistemas existentes entre outros Essa categoria é composta por uma subcategoria denominada usefulness nesse contexto 1 De acordo com a Norma ISO 924111 a usabilidade é a medida na qual um produto pode ser usado por usuários específicos para alcançar objetivos específicos com efetividade eficiência e satisfação num contexto específico de uso 48 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina é traduzida como proveito Usefulness consiste em poder utilizar um sistema para atingir determinado objetivo Essa subcategoria pode ser dividida em outras duas utilidade e usabilidade Utilidade referese à verificação do propósito do sistema por exemplo verificar se um software educacional realmente auxilia o aprendizado Já a usabilidade se refere à quão fácil é para o usuário usar as funcionalidades do sistema pretendido Concluise que a IHM permite aos usuários de computadores executarem suas atividades com facilidade e segurança através de bom design projetoesbouço dos softwares sendo muito importante para o desenvolvimento de qualquer tipo de sistema 42 Análise e projeto de interfaces O processo de análise e projeto de uma interface iniciase pelo entendimento das tarefas necessárias para atender as funções eou necessidades dos usuários Posteriormente consideramse as questões de projeto que serão aplicadas a todas as interfaces utilizamse ferramentas para criar protótipos das interfaces essas ferramentas serão apresentadas na aula de aprofundamento e por fim ocorre a implementação do projeto para ser avaliada a qualidade da interface pelos usuários finais Segundo Pressman 2016 a análise e o projeto de interfaces contam com quatro modelos distintos para apoiar esse processo São eles Modelo de usuário visa estabelecer o perfil dos usuários finais do sistema Os usuários podem ser classificados como i Novatos tratase de usuários que não possuem conhecimento pregresso do estilo e significado da interface ii Usuários intermitentes e com conhecimento tratase de usuários que conhecem os termos da interface mas ainda não têm incorporado o conhecimento para a execução das tarefas na aplicação iii Usuários frequentes e com conhecimento referemse aos usuários que possuem o domínio completo da aplicação e que procuram atalhos e modos de interação abreviados Modelo de projeto ou modelo do designer referese aos conceitos que o designer projetista ou engenheiro de software tem em sua mente sobre o sistema É criado a partir das informações capturadas dos usuários Modelo mental do usuário também é conhecido como percepção do sistema Referese à imagem do sistema que os usuários finais possuem em suas mentes ou seja a imagem da estrutura de como a aplicação funciona de acordo com que o usuário final internalizou na sua memória Já o modelo de usuário referese ao que o usuário desenvolve para entender e explicar a operação do sistema Modelo de implementação ou imagem do sistema referese à imagem construída do sistema computacional em conjunto com livros manuais arquivos de ajuda entre outras informações de apoio A imagem do sistema é formada pelo layout aparência física e a forma como o sistema responde É papel do designer garantir que a imagem do sistema seja fiel ao modelo conceitual pois é através da imagem do sistema que o usuário elabora o seu modelo mental Em geral a satisfação do usuário ocorre quando o modelo de implementação e o modelo mental do usuário se assemelham 49 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina A Figura 15 ilustra a relação entre os três modelos mentais modelo do designer modelo do usuário e imagem do sistema Figura 15 Três aspectos de modelos mentais Fonte Adaptação de ROCHA BARANAUSKAS 2000 Pela figura anterior é possível perceber que ocorre o estudo das necessidades do usuário pelo designer que por sua vez construirá a imagem do sistema ou seja como o sistema deverá ser para atender as necessidades do usuário Por meio da interação entre usuário e designer será possível averiguar se a imagem do sistema layout e a forma como o sistema responde atendeu o modelo mental do usuário 421 Processo de projeto de interface O processo de projeto de interfaces do usuário é iterativo portanto pode ser utilizado um modelo espiral existente nos métodos tradicionais A Figura 16 apresenta o processo de análise e projeto de interfaces do usuário Esse modelo possui quatro atividades i análise e modelagem de interfaces ii projeto de interfaces iii construção de interfaces e iv validação de interfaces Pela figura percebese que o início do processo se dá pelo seu interior e que cada uma dessas atividades ocorrerá mais de uma vez Cada volta em torno da espiral representa a elaboração adicional dos requisitos e do projeto resultante Figura 16 Processo de projeto de interface do usuário Fonte PRESSMAN MAXIM 2016 50 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina A atividade análise e modelagem de interfaces foca no perfil dos usuários que interagem com o sistema Antes de os engenheiros de software se preocuparem com as questões técnicas é necessário que eles entendam o que o usuário deseja Conforme visto no tópico Análise e projetos de interfaces o modelo mental do usuário é diferente do modelo que o projetistadesenvolvedor tem em mente Diante desse impasse fazse necessário compreender bem o usuário antes de iniciar o desenvolvimento do projeto É nessa atividade que serão definidas as categorias de usuários através de registros do nível de habilidades conhecimento da área e da aceitação do novo sistema Em suma trabalhase para compreender a percepção do sistema para cada categoria de usuário A atividade projeto de interface define um conjunto de objetos e ações de interface que permite ao usuário realizar todas as tarefas definidas para atender as metas de usabilidade do sistema O ponto principal da engenharia de software é entender o problema antes de tentar desenvolver uma solução Só assim será possível oferecer um sistema com qualidade A construção da interface iniciase com a elaboração de um protótipo que permite que cenários de casos de uso possam ser avaliados Isso será discutido com mais detalhes no tópico Construção de interfaces com usabilidade Por último a atividade de validação da interface concentrase na verificação da capacidade da interface realizar corretamente todas as tarefas do usuário no grau de facilidade de uso e aprendizado da interface e por fim na aceitação dos usuários 43 Padrões e questões de projeto de interface do usuário Assim como no desenvolvimento de software surgiu a necessidade do uso de padrões do projeto para ajudar na solução de problemas recorrentes no desenvolvimento das interfaces gráficas do usuário esse uso de padrões também se faz necessário Um exemplo de um problema recorrente em projeto de interfaces é a situação em que um usuário deve inserir uma ou mais datas em um calendário A solução mais simples para esse problema é usar um padrão de calendário contínuo e que rola denominado por Laakso 2000 apud Pressman 2016 p 334 de FaixaDeCalendário Nesse modelo de calendário a data atual aparece destacada e as datas futuras podem ser selecionadas através da rolagem e simbolizadas pelos caracteres e conforme ilustra a Figura 17 Figura 17 Exemplo do padrão de calendário contínuo Fonte SHUTTERSTOCK 2018 51 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina Para saber mais sobre padrões de projeto leia o artigo Conheça os padrões de projeto disponível no site Devmedia E para mais informações sobre padrões de projeto de interface pesquise na internet o artigo Padrões de projeto de interface de usuário interface de usuário Saiba mais À medida que aumenta o número de dispositivos móveis fazse necessário evoluir o projeto de interface do usuário Essa evolução acarreta em quatro questões de projeto comumente empregadas Tempo de resposta possui duas características duração e variabilidade Sobre a duração a resposta do sistema não deve ser muito longa pois acarretará em frustação e estresse por parte do usuário A variabilidade referese ao distanciamento do tempo médio de resposta No entanto é preferível um tempo de resposta que varie 1 segundo a um comando que possui um tempo de resposta que varie na escala de 01 a 25 segundos Recursos de ajuda esse recurso deve ser acessado sempre que solicitado pelo usuário e sem ele ter a necessidade de abandonar a interface Tratamento de erros toda mensagem de erro ou alertas direcionadas aos usuários devem apresentar as seguintes características i o problema deve ser descrito em uma linguagem que o usuário consiga compreender ii indicar como o usuário fará para solucionar o erro iii indicar as consequências negativas que o erro poderá acarretar como arquivos poderão ter sido corrompidos ou perdidos esse alerta permitirá ao usuário verificar se algo ocorreu ou não e iv nunca colocar a culpa no usuário Atribuição de nomes a comandos e menus o uso de comandos digitados era o meio mais comum de interação entre usuários e software Atualmente com a disponibilidade de interfaces orientadas a janelas reduziuse o uso de comandos pois hoje é possível clicar e tocar nas telasícones Somente usuários com mais conhecimento ainda preferem utilizar comandos como CTRLP para imprimir um arquivo a interagir com interfaces Para saber mais sobre as diretrizes para o desenvolvimento de aplicações web com acessibilidade acesse o site que contenha o título Cartilha Acessibilidade na Web W3C Brasil Saiba mais 52 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina 44 Construção de interfaces com usabilidade Existem diversas interfaces de usuário projetadas para softwares tradicionais aplicações para web Web App2 dispositivos móveis ou simplesmente para um produto de consumo por exemplo o câmbio do automóvel que é projetado apenas para pessoas destras É notável que existem diferenças importantes entre as interfaces dos softwares explicitados anteriormente A maior diferença existe devido às restrições físicas impostas por pequenos dispositivos móveis por exemplo smartphone e tablets Devido a esse fator o projetista de interfaces móveis deve compactar a interação do usuário No entanto todas essas interfaces devem possuir os princípios de usabilidade conforme apresentado no tópico Princípios fundamentais para o desenvolvimento de interfaces De acordo com Dix 1999 apud Pressman 2016 p 341 as interfaces para aplicações web e para dispositivos móveis devem responder a três perguntas i Onde estou ii O que posso fazer agora e iii Onde eu estive e onde posso ir Se o usuário conseguir responder a todas essas perguntas significa que ele entendeu o contexto e consegue navegar de forma mais eficiente pela aplicação ou pelo aplicativo 441 Princípios fundamentais para o desenvolvimento de interfaces Existe um grande número de web apps e aplicativos móveis Para evitar a concorrência a interface para o usuário deve ser atraente pois uma interface malfeita desapontará o usuário o que poderá implicar na desistência do uso e fazêlo procurar outra opção Diante disso Bruce Tognozzi 2001 apud Pressman 2016 p 338 estabeleceu um conjunto de princípios de projeto fundamentais que foram adaptados por Pressman 2016 para contemplar as restrições físicas impostas pelos dispositivos móveis e consequentemente gerir uma melhor usabilidade Alguns desses princípios são Antecipação a aplicação deve ser desenvolvida para prever o próximo passo do usuário Por exemplo suponha que o usuário esteja pesquisando sobre um drive de uma impressora para o Windows 10 O projetista deve antecipar que o usuário pode desejar realizar o download do drive e disponibilizar um link que permita a realização dessa ação Comunicação a interface deve comunicar com o usuário A comunicação pode ser feita via texto ou imagem Por exemplo se o usuário enviou um documento para a impressão uma mensagem de texto deverá ser exibida ou então uma imagem de um papel se deslocando para a impressora Consistência o uso de controles de navegação menus e ícones deverá ser coerente Por exemplo se um aplicativo para dispositivo móvel possui um conjunto de três ícones ex Início Voltar e Sair e esses ícones são considerados importantes para representar funções então devem aparecer em todas as telas Eles não poderão ser movidos para outros cantos de acordo com a mudança das telas Portanto esse tipo de ícone deve ser utilizado para representar funções importantes e possuir um significado ostensivo no contexto do aplicativo Autonomia controlada a interface deve facilitar a navegabilidade do usuário e este por sua vez deve respeitar as regras estabelecidas para a aplicação Por exemplo se a navegação exigir acesso controlado senha e login aos conteúdos não deve existir nenhuma forma que permita ao usuário ludibriar esse controle imposto pelo projetista 2 Tratase de um site mobile ou seja um site que assume o comportamento de aplicativo 53 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina Eficiência o projeto de uma aplicação e de sua interface deve otimizar o trabalho dos usuários Esse princípio referese à eficiência alcançada por usuários experientes após certo tempo de uso do sistema Para tal é preciso que o sistema seja eficiente no uso ou seja de forma que uma vez que o usuário tenha aprendido a utilizálo consiga ter um alto nível de produtividade Flexibilidade a interface deve ser flexível a fim de permitir que usuários consigam realizar suas tarefas diretamente e outros consigam explorála para atingir tal objetivo Portanto a interface deve sempre permitir ao usuário saber onde ele está e desfazer ações por exemplo retornar à tela anterior Foco a interface juntamente com o seu conteúdo deve permanecer nas tarefas do usuário Esse princípio é muito importante principalmente no contexto de aplicativos para dispositivos móveis onde os usuários tendem a querer fazer coisas demais o que pode ocasionar lentidão Redução da latência não faça o usuário esperar que alguma operação interna seja concluída baixar uma imagem por exemplo para permitir que ele consiga usar outras aplicações ou continuar em suas tarefas Facilidade de aprendizagem a interface da aplicação deve ser projetada para minimizar o tempo de aprendizagem do usuário além disso deve ser fácil de memorizar pois após um tempo quando o usuário resolver reutilizála ele não deverá reaprendêla Sendo assim a interface deverá ser um projeto simples e intuitivo que organiza o conteúdo e funcionalidades em categorias explícitas para o usuário Legibilidade a interface deverá apresentar conteúdo legíveis a todos os usuários sejam eles jovens ou idosos Para alcançar esse princípio o projetista de interfaces deverá priorizar o uso de estilos de tipos e tamanhos de fontes que possam ser modificáveis pelos usuários Os projetistas deverão usar fundos coloridos para aumentar o contraste Acompanhar o estado da interação deverá ser permitido ao usuário sair da aplicação e retornar do ponto onde parou Geralmente utilizase de cookies3 para armazenar as informações de estado Nielsen e Wagner 1996 apud Pressman 2016 p 339 propuseram uma lista do que não se deve fazer em projetos de interfaces sendo um ótimo complemento aos princípios elencados anteriormente Não force o usuário a ler muitos textos principalmente quando for para explicar uma operação ou auxiliar na navegação Não obrigue o usuário a descer até o fim da página Não permita que a estética exceda a funcionalidade da aplicação Não obrigue o usuário a procurar na tela como acessar links que o direcionem a outros conteúdos ou serviços Por fim uma interface deverá ser bem projetada para aumentar a percepção do usuário ao conteúdo eou serviços oferecidos Ela não precisará ter um layout chamativo mas precisará estar bem estruturada e fácil de utilizar 3 Tratase de um pedaço de um texto que um servidor web armazena no HD hard disk do usuário Atualmente os cookies são muito usados para armazenar informações sobre os visitantes dos sites 54 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina 442 Fluxo de trabalho de projeto de interface para web apps e dispositivos móveis As informações coletadas através dos requisitos do usuário são importantes para a criação do layout da tela onde serão definidos o posicionamento de ícones a especificação de texto e título para as telas a especificação de itens de menus principais e secundários entre outros Para criar layouts das telas ou protótipos de telas podemos utilizar ferramentas para implementar os protótipos de interfaces simulando a combinação de cores tamanho dos ícones ou menus etc Pressman 2016 define algumas tarefas básicas para representar um fluxo de trabalho de projeto de interface 1 É importante revisar as informações contidas no documento de requisitos do usuário e aperfeiçoálo conforme a necessidade 2 É importante desenvolver um protótipo das telas do web apps eou dispositivos móveis 3 É importante mapear os objetivos do usuário em ações de forma que se permita responder à seguinte pergunta Como a interface permitirá ao usuário alcançar os seus objetivos 4 É importante definir um conjunto de tarefas do usuário que devem estar associadas a cada ação Durante o projeto os requisitos devem contemplar as interações específicas como comprar um livro que abrangem problemas de navegação dificuldade para acessar determinada tela conteúdo dos ícones e funções da aplicação 5 É importante criar uma sequência de imagens de storyboard imagens de tela para cada ação de interface para assim representar como a interface responde à interação do usuário identificando os links de navegação e objetos que serão acessados É importante frisar que esse conjunto de tarefas deve ser escolhido e adaptado de acordo com a aplicação que será desenvolvida A lista de tarefas completas é encontrada no livro Engenharia de Software Uma Abordagem Profissional PRESSMAN MAXIM 2016 p 341342 443 Avaliação do projeto de interface A avaliação de um projeto de interface se dá após a criação de um protótipo das telas conforme indicado na Figura 18 Existem duas formas de realizar essa avaliação sendo que em ambas ocorre uma solicitação ao usuário para testar o protótipo de interface navegável4 Na primeira forma será solicitado ao usuário que expresse seus pensamentos à medida que está navegando o que permite ao projetista coletar o feedback imediato do usuário em relação à eficácia da interface A segunda forma consiste em aplicar métodos estatísticos por exemplo questionários formulários de avaliação para avaliar a interface Através desses dados é possível extrair informações como 80 de todos os usuários não gostam da forma que é utilizada para salvar os arquivos Com base nas informações coletadas em qualquer uma dessas duas formas são feitas as modificações no protótipo O ciclo de avaliação dos protótipos da interface é contínuo até que nenhuma modificação adicional seja necessária 4 Consiste em um esboço da telapágina porém onde o usuário consegue acessar menus links e etc 55 Engenharia de Software Unidade 4 Projeto de Interface HomemMáquina Figura 18 Exemplo de um protótipo de tela para dispositivo móvel Fonte SHUTTERSTOCK 2018 Para uma discussão completa sobre métodos de avaliação de interfaces do usuário consulte STONE D et al User interface design and evalution Massachusetts EUA Morgan Kaufman 2005 Saiba mais Síntese da unidade A interface é conceituada como o local onde o contato entre duas entidades ocorre Por exemplo a interface entre usuário e computador é o monitor A interface homemmáquina IHM é também conhecida como interface homemcomputador IHC A IHM é definida como uma disciplina preocupada com o projeto avaliação e implementação de softwares para uso humano Portanto a IHM permite aos usuários de computadores executarem suas atividades com facilidade e segurança através de um bom design dos sistemas A usabilidade é um conceito implícito à IHM que por sua vez possui alguns princípios que permitem definir e medir o quanto a interface do sistema é agradável para os usuários finais Foi apresentado o processo de projeto de interface que se utiliza da mesma ideia do modelo espiral do modelo de processo de software tradicional Finalmente foram apresentadas as etapas do projeto de interfaces com usabilidade 56 Considerações finais Esperamos que você tenha conseguido assimilar da melhor forma possível o conteúdo aqui apresentado Para ampliar o seu conhecimento consulte o aprofundamento de conteúdo e assista à videoaula da unidade pois ambos contêm informações relevantes para seu aprendizado