Vous êtes sur la page 1sur 92

UNIO EDUCACIONAL MINAS GERAIS S/C LTDA

FACULDADE DE CINCIAS APLICADAS DE MINAS

Autorizada pela Portaria no 577/2000 MEC, de 03/05/2000


BACHARELADO EM SISTEMAS DE INFORMAO

UM ESTUDO DE PADRES EM
PROJETO DE INTERFACE HOMEM - MQUINA

FERNANDO GONZAGA SOUZA

Uberlndia
2006

FERNANDO GONZAGA SOUZA

UM ESTUDO DE PADRES EM
PROJETO DE INTERFACE HOMEM - MQUINA

Trabalho de Final de curso submetido


UNIMINAS como parte dos requisitos para
a obteno do grau de Bacharel em
Sistemas de Informao.

Orientador: Prof. Msc. Francisco Jos Muller

Uberlndia
2006

FERNANDO GONZAGA SOUZA

UM ESTUDO DE PADRES EM
PROJETO DE INTERFACE HOMEM - MQUINA

Trabalho de Final de curso submetido


UNIMINAS como parte dos requisitos para
a obteno do grau de Bacharel em
Sistemas de Informao.

Orientador: Prof.Msc. Francisco Jos Muller


Banca Examinadora:
Uberlndia, 19 de Julho de 2006.
__________________________________
Prof. Dr. Mauro Hemerly Gazzani
__________________________________
Prof. Msc. Francisco Jos Muller
_________________________________
Prof. Esp. Carlos Barros

Uberlndia
2006

AGRADECIMENTOS

Agradeo a DEUS em primeiro lugar, por ter me concedido esta oportunidade


valorosa de conseguir vencer mais uma etapa de minha vida. Agradeo aos
meus pais e familiares pela confiana, motivao e por acreditar na minha
capacidade. A minha noiva, pela pacincia, compreenso e pela fora que tem
me dado. A UNIMINAS, a professora Ktia Lopes e ao professor e orientador
FRANCISCO JOS MULLER, que me ajudaram na realizao deste trabalho, e
todos aqueles que tenham participado diretamente ou indiretamente para a
construo do mesmo....OBRIGADO !

RESUMO

A evoluo da informtica tem facilitado a vida nos dias atuais, devido a sistemas que
foram ou so desenvolvidos com a funo de ajudar vrias tarefas no dia a dia, tanto
em empresas, como em escolas, residncias, hospitais etc. Entretanto, muito desses
programas ao invs de auxiliar em diversas rotinas de trabalho, faz muito pelo
contrrio, ou seja, o prprio software que fora desenvolvido para determinado objetivo
especfico, se torna um programa confuso, complicado de entender suas
funcionalidades e ainda por fim, causa pnico na maioria das pessoas que os utilizam.
Este trabalho apresenta os problemas encontrados no desenvolvimento de interfaces
para programas de computador e demonstra a importncia de se criar um projeto
especfico e detalhado, projetando uma interface de fcil compreenso, facilitando o
entendimento do usurio. Para o desenvolvimento deste trabalho, utilizou-se como
mtodo de estudo, pesquisa bibliogrfica e a criao de um pequeno projeto de
interface, envolvendo desde a construo de casos de uso at chegar s interfaces
propriamente ditas, apresentando as melhores formas de interao que uma tela de
sistema possa ter, possibilitando a juno de informaes concisas sobre o assunto
abordado e um maior conhecimento sobre as falhas existentes no desenvolvimento de
interface

para

sistemas

computacionais.

No

decorrer

deste

estudo

foram

apresentados vrios conceitos e regras de como iniciar e desenvolver um projeto


como um todo, mostrando solues em possveis falhas na criao de interfaces,
apresentando de forma clara e objetiva, corretas tcnicas e normas para a criao de
telas para programas de computador, mostrando a importncia de ser bem projetada
para alcanar a satisfao do usurio final. Atualmente, no existe nenhum projeto de
interface 100% perfeito, que obedea todas as regras e siga todas as normas
especficas para o seu desenvolvimento; mas importante para uma equipe de
projetistas ou analistas procurar manter o mais perfeito possvel criao das
mesmas, observando sempre a qualidade de interao e visar a forma de como o
usurio dever interagir com o sistema, garantindo assim a sua satisfao no uso do
programa computacional.

Palavras Chave: interface, usurio, projeto, interao

ABSTRACT

The evolution of the computer science has been facilitating the life in the current
days, due to systems developed for helping several tasks in companies, schools,
residences, hospitals etc. However, a lot of these programs instead of auxiliar in work
routines, make a lot on contrary. In other words, the software that had been
developed for certain specific objectives becomes a confused program, complicated
of understanding, causing panic in most of the people that use it. This work presents
the problems found in the development of computer programs interfaces and
demonstrates the importance of growing up a specific and detailed project, projecting
an interface of easy understanding, facilitating the user's understanding. For the
development of this work it was used as study method bibliographical research and
the creation of a small interface project, involving since the construction of use
cases until the interfaces. It is presented the best interaction forms that a screen
could be, making possible the junction of concise information on the approached
subject and a larger knowledge on the existent imperfections in the interface
development for computational systems. In elapsing of this study were presented
several concepts and rules to begin and develop a project as a whole, showing
solutions for possible imperfections in creation of interfaces. It still presents in a
objective and clear way, correct techniques and norms for the creation of screens for
computer programs, showing the importance of a good project to reach final user's
satisfaction. Nowadays, any project of interface that obeys all rules and specific
norms for your development, 100% perfect, doesn't exist, but it is important for a
team of planners or analysts try to maintain the most perfect possible the creation of
interfaces, always observing the quality interaction with the user and seek the better
form how it should interact with the system, guaranteeing your satisfaction in the use
of the computational program.

LISTA DE FIGURAS

1- Resultado obtido pela maquina de perfurar carto...................................................................................7


2- Interface de interao mainframe..............................................................................................................8
3- Exemplo de interface atual........................................................................................................................8
4- Exemplo de interface em ambiente DOS..................................................................................................9
5- Exemplo da Janela Primria....................................................................................................................10
6- Exemplo de Janela Secundaria...............................................................................................................11
7- Interface desenvolvida para POCKET ....................................................................................................12
8- Interface desenvolvida para QUIOSQUES .............................................................................................12
9- Exemplo da interface usando Realidade Virtual......................................................................................13
10- Exemplo do uso prtico da interface com Realidade Virtual.................................................................14
11- Utilizao de metforas representando manipulao de dados...........................................................16
12- Utilizao de metforas representando funo.....................................................................................16
13- Exemplo da utilizao de metforas representando funo.................................................................17
14- Calculadora do Windows, outro exemplo do uso de metforas...........................................................18
15- Exemplo de utilizao de formulrio (Mestre / Detalhe).......................................................................19
16- Resultado da ao da interface.............................................................................................................22
17- Resultado do andamento de operao da interface.............................................................................23
18- Princpios da interface com o usurio... ................................................................................................25
19- Caminhos da prototipao ..................................................................................................................30
20- Processo de interao homem-computador .......................................................................................31
21- Exemplo de fcil interao com o usurio (Microsoft)..........................................................................32
22- Atributos de Usabilidade .......................................................................................................................33
23- Modelo de interao da Engenharia Cognitiva ...................................................................................37
24- Etapas de ao do usurio durante a interao com o sistema .........................................................37
25- Mensagem que o projetista quer passar para ao usurio ..................................................................39
26- Mensagem que o projetista quer passar para o usurio ...................................................................39
27- Processo de Interface na Eng. Semitica ............................................................................................40

28- Paralelo entre desenvolvimento do software com o projeto de interface.............................................43


29- Representao diagramtica da meta...................................................................................................45
30- Representao do modelo de interao................................................................................................47
31- Exemplo da utilizao de um storyboard ..............................................................................................48
32 Diagrama de Caso de Uso Modulo Comercial.................................................................................56
33-Cadastro.de.Cliente.................................................................................................................................62
34- Cadastro de Fornecedor........................................................................................................................62
35- Cadastro de Produto..............................................................................................................................63
36 - Pedido de Venda..................................................................................................................................63
37 - Consulta Cliente / Vendas....................................................................................................................64
38 - Barra de Ferramentas utilizando consistncia.....................................................................................64
39 - Boto utilizando consistncia................................................................................................................64
40 Padronizao entre as telas.................................................................................................................65
41 - Utilizao de signos...............................................................................................................................66
42 - Exemplo de componentes Chek List e Radio Button...........................................................................66
43 - Resultado de aes realizadas pelo usurio........................................................................................67
44 - Orientao ao usurio por meio de mensagens..................................................................................67
45 - Orientao ao usurio por meio do estado do aplicativo.....................................................................68
46 - Orientao ao usurio por meio de dicas sobre botes.......................................................................68
47 - Interface utilizando Mestre-Detalhe......................................................................................................69
48 - Utilizao de Metfora c/ manipulao de funo................................................................................70
49 - Recurso de Ajuda, visvel ao usurio....................................................................................................71
50 Recurso de Recuperao, visvel ao usurio......................................................................................71
51 - Comparao entre layouts de uma mesma interface..........................................................................72
52 - Utilizao de componentes Microsoft...................................................................................................73
53 - Utilizao de componentes semelhantes ao sistema operacional......................................................73
54 - Utilizao de componentes Microsoft...................................................................................................74

LISTA DE ABREVIATURAS E SMBOLOS

IHC

- Interface Homem Computador

TI

- Tecnologia da Informao

DOS - Disk Operating System


RV

- Realidade Virtual

IU

- Interface de Usurio

UML - Language Unified Modelling

SUMRIO

1 INTRODUO ......................................................................................................................................1
1.1 CENRIO ATUAL................................................................................................................................1
1.2 IDENTIFICAO DO PROBLEMA ...........................................................................................................2
1.3 OBJETIVOS DO TRABALHO .................................................................................................................3
1.4 JUSTIFICATIVA PARA A PESQUISA .......................................................................................................4
1.5 ORGANIZAO DO TRABALHO ...........................................................................................................5
2 CARACTERISTICAS DE UM BOM PROJETO DE INTERFACE........................................................6
2.1 INTERFACE .......................................................................................................................................6
2.2 CARACTERSTICAS DE UMA BOA INTERFACE......................................................................................14
2.3 VALIDAO DE INTERFACE ..............................................................................................................24
3 CONCEITOS DE PROJETO DE INTERFACE ...................................................................................25
3.1 DIFERENTES MODELOS DE PROJETO ....................................................................................26
3.1.1 MODELO DE PROJETO ......................................................................................................26
3.1.2 MODELO DE USUARIO.......................................................................................................26
3.1.3 Modelo de usurio ou Percepo do Sistema......................................................................27
3.1.4 Imagem do Sistema..............................................................................................................27
3.2 DESENVOLVIMENTO DE INTERFACE PARA USUARIOS........................................................29
3.2.1 Benefcios do uso de prototipao em projetos de interfaces .............................................30
3.3 MODELOS DE APOIO A TESTES DE USABILIDADE.................................................................34
3.4 ENGENHARIA COGNITIVA E ENGENHARIA SEMIOTICA ........................................................36
3.4.1 ENGENHARIA COGNITIVA .................................................................................................36
3.4.2 ENGENHARIA SEMITICA .................................................................................................38
3.5 ENGENHARIA COGNITIVA OU ENGENHARIA SEMIOTICA .....................................................40
3.6 TECNICAS PARA CONSTRUO DE INTERFACES ................................................................41
3.6.1 FATORES E ANALISES QUE FAZEM PARTE DO PROJETO DE INTERFACE ...............42
3.6.2 ANALISE E MODELAGEM DE TAREFAS ...........................................................................44
3.6.3 ETAPAS DO PROCESSO DA CONSTRUCAO DE INTERFACES.....................................44
4 CRIAO DO PROJETO DE INTERFACE .......................................................................................49
4.1 INCIO DA CONSTRUO DO PROJETO DE INTERFACE.......................................................50
4.1.1 FUNCIONALIDADES PARA OS CASOS DE USOS ...........................................................51
4.1.2 DIAGRAMA DE CASOS DE USO ........................................................................................56
4.1.3 ESPECIFICAO DOS CASOS DE USOS.........................................................................57
5 CRIAO DAS INTERFACES COM BASE NOS CASOS DE USOS ..............................................61
5.1 INTERFACES PROJETADAS......................................................................................................61
5.1.1 CONSISTNCIA...................................................................................................................61
5.1.2 UTILIZAO DE SIGNOS ...................................................................................................65
5.1.3 ORIENTAO AO USURIO ..............................................................................................67
5.1.4 MESTRE DETALHE (MASTER DETAILS) ........................................................................68
5.1.5 METFORAS .......................................................................................................................69
5.1.6 RECURSO DE AJUDA VISVEL AO USURIO ..................................................................71
5.1.7 FACILIDADE DE RECUPERAO VISVEL AO USURIO ...............................................71
5.1.8 LAYOUT BEM DEFINIDO ....................................................................................................72
6 CONCLUSES ...................................................................................................................................75

1 INTRODUO

1.1 Cenrio atual

Os sistemas computacionais a cada dia esto mais presentes em nossas


vidas, ganhando rpido espao na sociedade, podendo ser encontrados em vrios
lugares, como escolas, empresas, hospitais, residncias etc, deixando de ser
utilizados no apenas por especialistas em computao, abrangendo uma grande
quantidade de usurios comuns, de vrios conhecimentos, idades, culturas, etc.
muito comum usurios de programas de computador procurarem por
aplicaes que possuam interfaces amigveis, que sejam fceis de aprender e usar,
fazendo com que eles tomem gosto pelo seu uso, atravs da interao direta com o
software, realizada pela interface.
Para que acontea uma perfeita comunicao entre homem e computador,
necessrio que haja um meio que faa com que o prprio sistema transmita ao
usurio a informao bem clara e objetiva daquilo que deve ser realizado naquele
momento, facilitando o seu entendimento durante determinada operao com o
mesmo.
Para isso, diversos estudos esto sendo propostos direcionados viso do
usurio final, sobre a utilizao do sistema computacional, focalizando sobre o que
ele pensa e o que precisa ao utilizar o software, atravs da utilizao da interface do
sistema, constituindo assim a IHC.
A IHC Interface Homem Computador, trata-se das diversas formas e
diretrizes que possam ocorrer no dilogo entre homem e software, constituindo-se
no estudo da melhor interface a ser implantada, atravs do desenvolvimento do
projeto da mesma com o usurio.
Toda a comunicao entre homem-software realizada atravs da interface
que cada sistema possui especificadamente. Sendo esta o principal canal de
comunicao existente no programa de computador, influenciando desta forma o
resultado final do produto a ser entregue ao cliente.

2
[...] as interfaces de sistemas computacionais assumem um papel
importante para o sucesso do software. Para o usurio, que no conhece o
contedo da caixa preta do sistema, a interface a sua nica viso do
produto em questo. Diante desses fatos, existe uma grande preocupao
com a comunicao adequada desses sistemas computacionais com os
seus usurios. (ZANCHETA, 2004, p.9)
As interfaces ser humano-computador tm como papel principal promover,
ou facilitar, a relao do usurio com um objeto ou sujeito. Elas podem ser
compreendidas como um espao composto por diversas representaes
com capacidade comunicativa. As interfaces representam as condies para
possveis aes que so constitudas atravs do apoio ou impedimento de
certas operaes direcionadas ao artefato e aos sujeitos ou objetos, atravs
do artefato. (BARSOTTI, 2002, p.32)

Por ser um recurso de suma importncia, tanto para o usurio quanto para a
criao do programa, o projeto de interface tem sido implantado pela maioria das
empresas de desenvolvimento de sistemas computacionais. Porm, muitos
profissionais ainda no percebem a grande importncia que o projeto possa ter num
desenvolvimento de software, no se adaptando para a utilizao desse novo
paradigma de desenvolvimento, que visa primeiramente integridade da informao
transmitida pelo programa ao entendimento do usurio final.
sobre este contexto que est sendo realizado este trabalho. Os problemas
relevantes sobre o mau desenvolvimento do projeto de interface, bem como suas
vantagens quando desenvolvido da maneira correta e confivel so

abordados

propiciando ao usurio a total confiana durante a manipulao das informaes que


ali esto sendo lidadas e interpretadas por ele.

1.2 Identificao do problema

Com a evoluo da tecnologia da informao, com a grande massa de


produtos de software existentes no mercado mundial, cresce ainda mais o contato
do homem com o computador. Praticamente o software est presente em todos os
lugares, conquistando cada vez mais uma diversidade muito grande de usurios,
independente da idade ou cultura do prprio indivduo.
Com esse crescimento excessivo de pessoas que usam sistemas
computacionais, preocupante a maneira de como elas utilizam o aplicativo, com
sua forma de operao, entendimento e facilidade de operao da ferramenta.

A variedade de perfis de usurios e operaes a serem realizadas diante


dos sistemas informatizados torna-se um grande desafio para o projeto de software.
Diversas empresas de desenvolvimento de software no levam em conta a
importncia do projeto de interface, caracterizando-se este passo por apenas um
mdulo parte que tem que ser desenvolvido ao longo do sistema, no tendo a
devida preocupao com o processo de interao com o usurio.
Estudos mais recentes sobre o projeto de interface, mostram que uma
interface bem projetada faz com que o software ganhe mais familiaridade entre seus
usurios, tornando-se o carto de visita para a venda do produto. At hoje j foram
desenvolvidos milhares de sistemas com diversas formas de interfaces, cada uma com
seu objetivo e entendimento. E cada vez mais se fazem estudos e pesquisas para
conseguir a melhor satisfao do usurio. E mesmo assim, existem softwares que
foram ou so desenvolvidos sem a perspectiva da diversidade dos usurios que
possam ter, no se preocupando com a forma de como ser utilizada a ferramenta,
desenvolvendo assim softwares confusos e difceis de serem entendidos, fazendo com
que o produto se torne ineficiente e exaustivo para o usurio final.

1.3 Objetivos do trabalho

Este trabalho tem por objetivo apresentar diversas formas e tcnicas para
o bom desenvolvimento do projeto de interface com o usurio, oferecendo aos
analistas e projetistas de interface uma melhor eficincia no processo de criao de
telas para programas, atravs de regras e normas estabelecidas.
Com este estudo, pretende-se apresentar a diversos profissionais da rea
de

Tecnologia

da

Informao

(TI),

principalmente

queles

voltados

ao

desenvolvimento de softwares, a importncia de se tratar a construo de interface


como um projeto definido e concreto, seguindo normas e estudos detalhados para a
construo do mesmo.
O foco deste trabalho detalhar os processos para a criao do projeto
como um todo, tendo como objetivo o entendimento dos processos e a importncia
dos resultados cabveis aplicao do mesmo.

Pretende-se descrever e exemplificar o histrico do desenvolvimento de


interfaces, mostrando suas passagens at chegar s atuais que conhecemos hoje.
As corretas formas de planejamento do projeto de interface so mostradas,
apresentando desde recursos tecnolgicos at diversos meios de anlise
envolvendo a percepo humana, englobando meios utilizados pela engenharia de
software, cognitiva e semitica.
Esta

pesquisa

no

possui

como

objetivos

apresentar

recursos

de

programao e desenvolvimento de softwares em geral, e tambm no pretende


descrever ferramentas de prototipao para a criao especfica de cada interface, e
nem a realizao de trabalho de campo com usurios finais.
Por fim, o trabalho desenvolvido formar uma fonte detalhada de dados sobre
os processos do desenvolvimento da interface com o usurio, a fim de facilitar o
trabalho de empresas de desenvolvimento de sistemas, autnomos da rea em geral
e todos os profissionais envolvidos em TI.

1.4 Justificativa para a pesquisa

Muitos sistemas que so desenvolvidos apresentam uma interface muito difcil


de se trabalhar, levando o usurio a possveis erros, podendo at mesmo cometer
falhas gravssimas que venham a corromper os dados ou at mesmo causar danos
muito graves no sistema.
Os projetistas de interfaces tm que levar em conta a capacidade fsica e
mental dos seus usurios, principalmente quando lidam com muitas informaes.
Desta forma, de suma importncia a preocupao dos projetistas e analistas
para o projeto de interface, levando em conta as normas tcnicas necessrias e
tentando sempre chegar boa qualidade na implantao dos recursos de interface.
Este trabalho tem como objetivo de apresentar solues para diminuir as
falhas na criao de interfaces, apresentando tcnicas e normas estabelecidas de
desenvolvimento de telas para sistemas computadorizados.
Essa pesquisa detalha diversas diretrizes de desenvolvimento de interface,
apresentando ao leitor informaes necessrias para a criao da mesma,
procurando mostrar a importncia da interface bem projetada para o usurio final.

1.5 Organizao do Trabalho

O capitulo dois apresenta a interface em geral, ressaltando sua importncia


em relao ao sucesso do software como tambm a satisfao daquele que vai
utilizar aquele programa de computador, mostrando um pequeno histrico das
interfaces at os tempos atuais. So abordadas tambm regras de aplicao no
desenvolvimento de interfaces, como diretrizes, normas e exemplos para se alcanar
a qualidade na criao da mesma.
Todas essas informaes iniciais se fazem necessrias para apresentar ao
projetista de interface a importncia da aplicao do projeto, reconhecendo que nem
todos que desenvolvem sistemas para computadores preocupam-se com as formas
de entendimento do usurio em relao ao software a ser implantado.
No capitulo trs, so apresentados os conceitos para se iniciar um projeto de
interface com o usurio, mostrando exemplos e associando-os aos princpios de
criao de interface, indo desde as regras de prototipao do projeto, at o momento
de avaliao com o usurio final, trantando-se de regras de usabilidade, percepo
humana, interao com o usurio, comunicao entre usurio/sistema, etc.
No captulo quatro e cinco, sero apresentados de forma prtica e objetiva
todos os conceitos voltados para o bom desenvolvimento do projeto de interface,
mostrando por meio de especificaes, casos de uso e tambm por meio de
exemplos (interfaces desenvolvidas), as corretas formas de se aplicar diretrizes para
a construo do projeto de interface.
Por fim no captulo seis, as concluses obtidas pela realizao do trabalho,
apresentando as limitaes do estudo praticado, e tambm as possveis sugestes
que possam

vir para a realizao de estudos futuros, dando seqncia a este

trabalho de pesquisa.

2 CARACTERISTICAS DE UM BOM PROJETO DE INTERFACE

2.1 Interface

No dizer de Pressman (1995) o projeto de desenvolvimento de sistemas


envolve vrias atividades para chegar ao produto final, envolvendo desde o projeto
de hardware at o projeto de interface.
Um dos aspectos fundamentais do desenvolvimento de sistemas para
computador , desta forma o projeto de interface com o usurio. Ele fundamental
para o sucesso de um sistema. A interface um meio de interao entre o homem e
o computador. atravs dela que o usurio consegue manipular todas as
informaes necessrias durante seu trabalho. A interface , de muitas maneiras, a
embalagem do software de computador (PRESSMAN, 1995, p.602).
Segundo>o>documento>eletrnico>(Carto perfurado, 2005) nos primrdios
da era tecnolgica, um dos marcos para a programao foi a mquina perfuradora
de carto. O trabalho realizado com este tipo de sistema era bem tedioso, pois a
interface era totalmente rstica. Para alimentar o cdigo no computador era preciso
perfurar cada carto, sendo que cada um deles continha uma linha de programa e
os resultados eram impressos em listagens de formulrio contnuo, para
posteriormente verificar algum erro de programa.
Este tipo de interface propiciava ao usurio vrias frustraes: alm de
perfurar cada carto, era preciso passar horas e horas na frente da mquina para
coletar os resultados esperados, e caso outra pessoa necessitasse utilizar o
equipamento, teria que esperar at o processo do outro ser concludo. A Figura 1
mostra um modelo dos resultados obtidos pelas mquinas de perfurar carto.

Figura 1 Resultado obtido pela maquina de perfurar carto (Carto perfurado, 2005)

Atravs do estudo e o surgimento de outras tecnologias, as opes de


interao entre usurio e mquina crescem cada vez mais ao longo dos anos. Com
o aparecimento dos mainframes1, a interface de interao era baseada em teclas de
funes e canetas marcadoras de tela, onde todas as funes realizadas eram
distribudas em uma nica tela, ficando cada funcionalidade mapeada para um
programa, exigindo que o operador conhecesse e executasse vrios comandos por
vez para concluir qualquer operao. Todos os processos eram visualizados em um
monitor monocromtico, com nica exibio de caracteres, linhas e pontos.
Sendo assim, o que dominou por muito tempo o mercado, foi a
centralizao do processamento com a utilizao de terminais de vdeo pelos
usurios finais, sem nenhuma utilizao de interface grfica. A Figura 2 mostra um
exemplo das interfaces utilizadas pelos mainframes.

_____________
1

Mainframes = Computadores de grande porte com alta escala de processamento que podem
manipular memria de alta capacidade e dispositivos auxiliares de armazenamento.

Figura 2 Interface de interao mainframe


(Trying to read what is in telnet window, 2005)

Conforme Pressman (1995) aps a era mainframes, surgiram os sistemas


baseados em interface de comando e consulta. Tais sistemas no possuam
interface grfica, e a comunicao com o usurio final era apenas por formas de
comandos e respostas consultas retornadas pelo sistema. Este tipo de interface
possibilitava a ocorrncia de erros freqentes e sua interao era de difcil
entendimento. A Figura 3 representa um exemplo de interface textual.

Figura 3 Exemplo de interface textual

Aps a era de interfaces base de consultas e comandos, deu-se inicio s


interfaces j com menu de opes, telas, etc, caracterizadas por Pressman (1995)
como interfaces de menu simples. Esses programas eram desenvolvidos em

linguagens como CLIPPER, PASCAL, C, etc. Suas interfaces eram bem diretas, e
menos favorveis a erros do que a interface no formato de linha de comando. Os
usurios operavam nestes sistemas somente por meio do teclado e nesta poca
ainda no havia a necessidade de utilizar o mouse.
A utilizao deste tipo de interface pode ser tedioso para o usurio final,
devido forma de se obter a informao do sistema. Os programas apresentavam
um menu de opes que era composto, por exemplo, de cdigos, sendo que para
executar cada funo do programa, era preciso digitar nmeros referentes a cada
menu, alcanando assim a opo desejada.
Este tipo de interface tem como vantagem o rpido acesso ao menu de
opes, j que o mesmo realizado diretamente pelo teclado. A Figura 4 apresenta
um modelo tpico das interfaces de menu simples ou interfaces em ambiente DOS.

Figura 4 Exemplo de interface em ambiente DOS

Segundo Pressman (1995), este tipo de interface diminui a probabilidade do


operador cometer erros, em comparao com a interface baseada em linhas de
comando e consultas, mesmo assim, seu uso tambm frustrante e confuso para o
entendimento do usurio. Por exemplo, na escolha de qualquer opo desse menu,
ele ter outras telas com mais opes de escolha, caracterizando-se um sub-menu
de opes, fazendo com que o usurio no consiga chegar diretamente a opo
desejada, forando-o a trabalhar em sub-niveis at alcanar a opo escolhida,
tornando-se trabalhosa a rotina de trabalho.

10

Logo aps os sistemas com interfaces baseadas em DOS, deu-se o incio


das famosas janelas que conhecemos hoje, nada mais do que programas com base
na interface Windows (Microsoft ). As interfaces atuais so desenvolvidas com o
mais alto padro de tecnologia, mesmo assim, muitas ficam a desejar, devido ao
mau planejamento do projeto das mesmas.
O processo de interao com as interfaces grficas, so hoje mais
comumente utilizadas em forma de janela, caracterizando-se pelo principal canal de
interao entre usurio e sistema, permitindo o trabalho simultneo de varias tarefas,
facilitando o trabalho de quem utiliza programas com este tipo de layout grfico. As
janelas so dividas em primrias e secundrias. A primria a principal tela dos
aplicativos, sendo a primeira tela a ser carregada quando se abre o programa. A
Figura 5 representa um modelo de janela primaria.

Figura 5 Exemplo da Janela Primria

Este tipo de janela, geralmente apresentar todos os recursos para acessar


diversos mdulos do programa atravs de menu de opes ou atalhos adicionados
prpria tela, propiciando acessos mais rpidos e de fcil entendimento.
Outros tipos de janela so chamados de Secundria; elas so chamadas a
partir da tela principal (Janela Primria). A partir delas o usurio executar todas as

11

funes que necessita durante seu trabalho. A Figura 6 mostra um exemplo de


janela secundria.

Figura 6 Exemplo de Janela Secundaria

Existem tambm interfaces bem interativas, um pouco diferentes daquelas


baseadas em sistemas Windows, que so interfaces em que o usurio interage com
o sistema diretamente na tela do computador; tecnologia esta chamada TOUCH
SCREEN. Esta caracterizada pela sua fcil aprendizagem e por ser muito amigvel
ao nvel de operao, pois com esse tipo de interface o processo ganha vida, j que
as telas mudam a cada toque.
Apesar desta tecnologia ser cara, este recurso muito utilizado em pockets
e quiosques de apresentao, tendo como caracterstica a rpida interao com o
usurio, possibilitando ao mesmo realizar consultas diretas no sistema. As Figuras 7
e 8 ilustram modelos de interfaces utilizando esta tecnologia.

12

Figura 7 Interface desenvolvida para POCKET


(Wireless touch screen control, 2005)

Figura 8 Interface desenvolvida para QUIOSQUES


(Introduction to Electronic Classrooms, 2006)

13

Fazendo um comparativo entre as interfaces atuais e as antigas que foram


citadas, o avano foi muito grande, buscando sempre como prioridade o conforto do
usurio, pois com uma boa interface desenvolvida, capaz de responder as
necessidades de quem est usando o programa, tem-se um bom sistema
funcionando e a satisfao garantida durante seu uso.
H varias Universidades que esto estudando possveis formas de interao
entre o usurio e sistema bem realstico do que temos hoje no mercado de
programas para computador. Experincias esto sendo realizadas principalmente no
ramo da Medicina e tambm em outras reas, como Engenharia, Arquitetura,
Educao, etc. Este estudo est sendo realizado no tipo de interface que capaz de
fazer com que o usurio interaja praticamente cem por cento com o sistema, fazendo
parte daquele meio de interao, constituindo-se o nascimento da realidade virtual
(RV). Esta caracterizada pela sua fcil interao e por ser muito amigvel ao nvel
de operao, pois se tem a impresso de que o usurio est dentro do sistema,
simulando um ambiente realstico, permitindo que eles se interajam com o sistema,
fazendo parte do mundo virtual. As Figuras 9 e 10 ilustram um exemplo de RV.

Figura 9 Exemplo da interface usando Realidade Virtual


(Departamento de Estatstica, 2006)

14

Figura 10 Exemplo do uso prtico da interface com Realidade Virtual


(Realidade virtual no ensino mdico, 1998)

Cada vez mais, cientistas de software esto se aprofundando em estudos e


testes voltados a IHC (Interao Homem Maquina), procurando desenvolver o que
mais h de tecnologia para a satisfao do usurio, propiciando lhe facilidade e
rapidez, em se tratando de programas para computador ou qualquer outro dispositivo,
como celulares, aparelhos eletrnicos, automveis, etc.
O bom desenvolvimento de interfaces muito importante para o projeto como
um todo. As interfaces esto em constantes modificaes, buscando sempre melhorias
voltadas diretamente para o usurio, conseguindo cada vez mais a sua satisfao,
procurando sempre ouvi-lo e resolver seus problemas, com produtos fceis e
amigveis.
At hoje j foram desenvolvidos diversos sistemas, com vrias formas
diferentes de interfaces, cada uma com seu objetivo e entendimento. E cada vez mais
se fazem pesquisas e testes para conseguir a melhor satisfao do usurio.

2.2 Caractersticas de uma boa interface

Ao longo dos anos, o computador tem deixado de ser um instrumento de


trabalho voltado apenas especialistas de informtica, tornado-se ferramenta de apoio
a diversos profissionais nas vrias reas existentes. Hoje temos uma grande variedade
de usurios e tarefas exercidas por eles, que impem desafios para o desenvolvimento
de projeto de sistemas computacionais.

15

Os usurios de computadores sempre buscam por aplicaes amigveis, ou


seja, que sejam fceis de aprender e usar, independente dos recursos oferecidos pelo
sistema. Um projeto de interface geralmente exige cinqenta por cento do tempo e dos
recursos utilizados durante todo o projeto, representando uma importante fase na
criao de sistemas para computador.
Um bom projeto de interface de fundamental importncia para a boa
aceitao do software desenvolvido. ele que faz a aproximao entre o homem e a
tecnologia utilizada, representando um canal de interao entre o usurio final e o
computador.
Um aspecto importante para uma interface utilizar uma linguagem de forma
natural, para que o usurio e o software se comuniquem de forma mais simples,
facilitando a troca de informaes entre homem e mquina. Uma boa interface deve
apresentar associaes que possam facilitar a memorizao de operaes por parte
dos usurios. Isso ser possvel atravs da utilizao de metforas. Elas ajudam o
reconhecimento de uma funo do sistema, associando-se aquele recurso com um
objeto comum e familiar ao conhecimento dos usurios. No dizer de Paula Filho (2001),
a interao com um produto de software se torna mais fcil quando estes conseguem
formular um modelo mental consistente.e. ntegro.
Atravs do modelo mental, os usurios conseguem compreender o
funcionamento do sistema, apresentando facilidades durante a utilizao do programa.
A no utilizao de metforas pode causar confuso e aumentar os ndices de erros,
dificultando o aprendizado, por surgirem dificuldades de interao do prprio sistema.
As Figuras 11 e 12 representam um exemplo tpico do uso de metforas.

16

Figura 11 Exemplo da utilizao de metforas representando manipulao de dados

Figura 12 Exemplo de menu com utilizao de metforas representando funo

17

A Figura 11 representa um modelo bem prtico do uso de metfora, que o


modelo com manipulao de dados, que se refere a um objeto do meio realstico 2 para
o programa de computador. Ela apresenta a interface do aplicativo Word, desenvolvido
pela (Microsoft ). Sua caracterstica assemelha-se a uma mquina de escrever, tendo
como referncia no centro de sua tela o formato de uma folha A4 (meio realstico), com
suas rguas de medidas, etc. A Figura 12 representa tambm outro modelo de
metfora, que o modelo com representao de funes, que utiliza vrias
representaes, como botes, menus de acesso e outros para informar ao usurio
sobre tal operao. Quando este se depara, por exemplo, com um menu contendo o
seguinte desenho (...), indica a ele que ao acion-lo surgir uma outra tela para
concluir sua operao, no caso da figura referida, seria a de salvar o documento. A
Figura 13 representa por meio de boto de opo, o mesmo modelo da utilizao de
metfora com uso de funes, indicando ao usurio a mesma caracterstica do menu
utilizado na Figura 12, que ao acionar este boto surgir uma outra janela para
completar a operao desejada.

Figura 13 Exemplo da utilizao de metforas representando funo

Como no exemplo da Figura 12, o usurio seleciona a opo Salvar Como... e


em seguida surge a tela para que ele escolha o local de destino para armazenar o
documento. Quando uma interface rica em utilizao de metforas, o usurio poder
fazer associaes prticas pelas tarefas que realiza no seu dia a dia, facilitando sua
interao com o programa, sendo mais fcil e rpido o aprendizado com a ferramenta
computacional.
Outro exemplo do uso de metfora o da calculadora que vem com o pacote
Windows (Microsoft ). Ela apresenta as mesmas caractersticas de uma calculadora
comum, facilitando o uso at mesmo de pessoas com conhecimento bsico em
_____________
2

Meio Realstico = Ambiente real, o que existe na vida real.

18

microinformtica. A Figura 14 representa a calculadora da Microsoft, caracterizando-se


tambm a utilizao de metforas.

Figura 14 Calculadora do Windows, outro exemplo do uso de metforas

Alm do uso de metforas para garantir a padronizao e qualidade para


programas de computador, necessrio tambm um bom projeto de layout,
procurando obedecer a padres pr-estabelecidos e que possam fazer com que o
usurio entenda perfeitamente a comunicao que aquela tela representa.
Para a interface de uma aplicao, o layout representa tambm um importante
papel na qualidade do software. Objetos visuais provem valiosas impresses e
fornecem sugestes importantes ao comportamento interativo de recursos do
programa, deixando o usurio sempre informado nas operaes que devem ser
executada. Num bom projeto de interface, o layout deve oferecer um ambiente
coerente para o entendimento da informao apresentada. O usurio ficar mais
vontade diante do software se formular um modelo mental consistente e ntegro. A
Figura 15 representa um tpico modelo de layout utilizando Master Detail (Mestre /
Detalhe).

19

Figura 15 Exemplo de utilizao de formulrio (Mestre / Detalhe)

Este tipo de interface apresenta uma facilidade na leitura da informao. Neste


exemplo apresentado um curso de graduao qualquer, contendo ao mesmo tempo
todas as turmas referentes quele curso especfico, oferecendo desta forma um melhor
resultado em consultas e manutenes de novas turmas para determinado curso,
constituindo-se de uma interao entre tabelas distintas, apresentando um s um
conjunto de informao unificado em apenas uma tela.
Para um programa de computador ter uma boa interface, necessrio que o
seu projeto de desenvolvimento envolva fatores de conhecimentos humanos e da
tecnologia de interfaces a ser utilizada. A percepo humana, o perfil do usurio, seu
jeito de pensar, etc, so conhecimentos importantes para o projetista de interface,
juntamente com outros conhecimentos como o estilo de interface associada quele
perfil de usurio, tecnologia de hardware e software disponvel para a aplicao. Todos
esses itens associados tero um salto muito grande para o resultado final do projeto.
Quando essas diretrizes so utilizadas simultaneamente, o resultado
alcanado ser um produto de software bem acabado e com uma boa qualidade de
entendimento, ambiente amigvel e de fcil operao, e conseqentemente a
satisfao do usurio ser das melhores possveis.

20

O ideal fazer com que a interface utilize termos familiarizados, ou seja, o


principio fazer com que ela se adapte ao usurio final, e no fazer o inverso, que ele
se adapte ao modo da interface.
Uma interface bem projetada oferece fcil aprendizagem e diminuio de
erros, at mesmos usurios sem nenhuma experincia em informtica podem aprender
a utilizar o programa que tem uma boa interface aps algumas horas de treinamento.
Isso possvel atravs da qualidade do prprio layout desenvolvido.
De acordo com Sommerville (2003), necessrio seguir alguns critrios
especficos para alcanar o resultado esperado durante o projeto de interface com o
usurio. Consistncia, objetividade, orientao ao usurio e facilidade de recuperao
so uns dos meios adequados para este fim.
A consistncia de interface com o usurio indica que os recursos utilizados
como menus de opes e outros recursos a mais do prprio sistema, devem seguir o
mesmo formato, constituindo um padro de interface para o software. E com isso
diminuir o tempo de aprendizagem, possibilitando que aquele recurso aprendido possa
ser utilizado em outras partes do aplicativo.
A consistncia ajuda os usurios a reaproveitar o conhecimento j adquirido,
por meio de analogias. Com isso, eles aprendero novas funes e novos
mecanismos com maior rapidez.
(PAULA FILHO, 2001).

Segundo Paula Filho (2001), para fazer utilizar consistncia em um


desenvolvimento de interface, depender de alguns atributos para colocar em prtica
esta tcnica:
Nomenclatura adequada, consistente no jargo da rea de aplicao;
Aspectos visuais dos elementos das interfaces (cor, tamanho, leiaute);
Comportamento das funes;
(PAULA FILHO, 2001).

Exemplos de utilizao do uso da consistncia:


Caracteres especiais de textos devem ter a mesma funo;

21
Comandos Globais

(Ajuda, Cancelar, etc) devem ser invocveis de qualquer

estado do aplicativo;
Comandos genricos

(Recortar, Copiar, Colar) devem ter a mesma funo em

qualquer estado do aplicativo;


(PAULA FILHO, 2001).

Estes so alguns dos vrios critrios exigidos no desenvolvimento do projeto


de interface. Num sistema que no leva em conta a questo de padronizao de
recursos, sua interao pode ser difcil e complexa, agravando muito a dificuldade de
uso. Os projetistas de interface devem empenhar-se em desenvolver um layout que
corresponda e simplifique as necessidades do usurio final.
Outro meio para se alcanar qualidade no projeto de interface a objetividade.
Ela caracteriza-se pela forma de representao dos dados manipulados pelo usurio
atravs da mesma. Esta ser cada vez mais objetiva quanto mais prxima for da
realidade que o usurio vive. Se ela for simples de se usar, e amigvel, ele estar bem
disposto a fazer bom uso dos processos que lhe esto destinados.
Orientao ao usurio constitui em respostas que o programa lhe apresenta
de acordo com determinadas aes executadas atravs de mensagens, barra de
progresso, etc. A orientao inclui trs aspectos distintos:
Resultado de aes O resultado de cada operao executada pelo usurio
final, deve ser mostrado a ele, deixando-o informado sobre tal operao.
A Figura 16 representa uma ao de excluir um registro do banco de dados, e a
interface oferece orientao sobre o resultado naquele momento, deixando-o
informado sobre o evento correspondente.

_____________
3
4

Comandos Globais: comandos e funes disponveis em qualquer parte do software.


Comandos Genricos: comandos e funes disponveis em lugares estratgicos do software.

22

Figura 16 Resultado da ao da interface

Andamento de operaes Qualquer tipo de operao que leve alguns


segundos de processamento deve ser indicado ao usurio. Caso isso no acontea,
tem-se a impresso de que o sistema no est mais respondendo, tendo a sensao
que o programa travou.
Quando se usa esse tipo de recurso, faz parecer que a operao est sendo
executada mais rpida, devido ao andamento mostrado pela interface. A Figura 17
representa um modelo de interface que contm uma barra de progresso, mostrando
ao usurio o andamento da operao solicitada.

23

80%

Figura 17 Resultado do andamento de operao da interface

Estado do aplicativo O software deve oferecer recursos que possibilite


acompanhar o estado do aplicativo, medida que forem executadas funcionalidades
no programa.
Facilidade de recuperao faz com que a interface oferea recursos de
desfazer sempre que possvel para uma ao finalizada ou que esteja em andamento,
muito importante deixar o usurio informado, para evitar o mnimo de surpresas.
Segundo Pressman (1995), o recurso de recuperar informaes (UNDO ou
REVERSE) deve estar disponvel em qualquer sistema interativo. Quanto mais os
usurios tiverem facilidade em reverterem suas aes, mais confiveis ficaro e tero
menos receio de causar estragos, sentindo-se mais vontade na utilizao da
aplicao.
Ter uma interface transparente, permite uma melhor concentrao na tarefa
que deve ser realizada, evitando erros banais de operao, facilitando o manuseio dos
dados e fcil entendimento dos parmetros estipulados pelo programa.

24

2.3 Validao de interface

Durante um projeto de interface, todo o processo ser sempre voltado para a


satisfao do usurio. No inicio de um projeto de software, os projetistas devem refletir
sobre uma simples pergunta a si mesmos: Estamos a construir o produto desejado ?
Com essa preocupao em satisfazer sempre a comodidade do usurio e
manter a integridade do software, os projetistas de interface passam por um processo
de validao de interface. Este processo visa a garantia dos efeitos da prpria interface
sobre os usurios em relao ao sistema, visando garantir que a interface se comporte
conforme desejado e que responda s expectativas esperadas.
A validao deve ser aplicada em cada estgio do processo de software. Seu
objetivo de considerar as caractersticas do usurio e as tarefas de interao que a
interface transmite a ele, respeitando a utilidade (adequao tarefa) e a usabilidade
(facilidade de uso), para atender os objetivos finais do projeto de software.
Um meio de utilizar o recurso de validao durante as fases de testes do
software. So utilizados grupos de pessoas com experincias distintas, fazendo testes
em diversos mdulos do programa, para posteriormente serem analisados os
resultados obtidos atravs de formulrios de perguntas entregues a cada membro do
grupo, fitas com gravaes apresentando cada operao executada, etc. Outros meios
de validao tambm so utilizados para a garantir integridade e confiana de uma
interface, como a aplicao de questionrios ao usurio final, observao de tempo de
execuo gasto em cada tarefa, etc.
A interface um mecanismo que estabelece um dilogo entre o programa e
o ser humano. Os fatores humanos devem ser levados em conta durante o projeto
de interface, resultando em um dilogo harmonioso e uma boa interao entre
homem e programa. Um projeto de interface deve seguir um padro especifico,
sendo que toda informao visual deve ser organizada seguindo um padro definido,
oferecendo ao usurio final um sistema de qualidade, com um design confivel e
ergonmico, fazendo com que at se esquea de que est trabalhando em um
sistema de computador. Para que o projeto de interface consiga alcanar esses
objetivos, necessrio primeiramente conhecer quem utilizar o programa, para
formar uma base na construo dos estudos de casos, chegando assim a um projeto
confivel e interativo.

25

3 CONCEITOS DE PROJETO DE INTERFACE

De acordo com Pressman (1995), o projeto de interface ser humanocomputador um dos elementos de maior importncia durante o projeto de software.
Para a sua criao, inicia-se com a construo de diferentes modelos de funes do
sistema a ser desenvolvido, por meio de prototipao em papel. Todas a tarefas
rotineiras que so executadas e que vo ser implementadas ao computador so
mescladas a um s projeto, constituindo assim um sistema interativo, com suas
possveis telas (interfaces) que vo fazer a comunicao dos usurios com o programa
em si.
Diversas ferramentas podem ser usadas para construir prottipos de
interfaces e por fim implementar o modelo de projeto at chegar a um resultado final.
Aps a elaborao dessas telas, o projetista verifica se as mesmas
correspondem a todas as diretivas dos padres de interfaces a serem aplicadas, at
chegar a um nvel de excelncia em qualidade.
Segundo Sommerville (2003), para um bom desenvolvimento de projeto de
interface, o projetista tem que tomar como base capacidade humana; ela que
estabelece os princpios gerais aplicveis a todos os projetos de interface com o
usurio. A Figura 18 mostra os princpios da interface com o usurio:
Princpios
Familiaridade
com o usurio

Descrio
A interface deve utilizar termos e conceitos que tenham como
Base a experincia das pessoas que mais vo utilizar o sistema.
A interface deve ser consistente, no sentido que, sempre que
Consistncia
Possvel, operaes semelhantes devem ser ativadas da mesma maneira.
Os usurios nunca devem ser surpreendidos com o comportamento
Mnimo de surpresa
de um sistema.
Facilidade
A interface deve incluir mecanismos para permitir aos usurios a
de recuperao recuperao a partir de erros.
Orientao
A interface deve fornecer feedback significativo, quando ocorrem erros,
do usurio
e oferecer recursos sensveis ao contexto de ajuda ao usurio.
Diversidade
A interface deve fornecer recursos de integrao apropriados a
de usurios
diferentes tipos de usurios do sistema.
Figura 18-Princpios da interface com o usurio (SOMMERVILLE, 2003, p. 280)

26

Segundo Pressman (1995), quando se inicia um projeto de interface, deve-se


levar em conta a utilizao da Engenharia Cognitiva, que trata em desenvolver um
sistema que permita ao usurio, durante o processo de interao, criar um modelo
mental consistente com o modelo criado pelo projetista. Para que isto seja possvel,
Pressman argumenta que o projetista de interface precisa entender o processo atravs
do qual o usurio interage com a interface do sistema, pondo em prtica pelo menos
quatro diferentes modelos de projeto que entram em cena durante o desenvolvimento:

3.1 DIFERENTES MODELOS DE PROJETO

3.1.1 MODELO DE PROJETO


Criado pelo engenheiro de software, este modelo incorpora todas as
representaes procedimentais, arquiteturais e de dados do software.
3.1.2 MODELO DE USUARIO
Criado pelo engenheiro humano ou engenheiro de software, este modelo
descreve o perfil dos usurios finais do sistema.
Os usurios so classificados em trs grupos distintos:
Usurios principiantes: usurios sem conhecimento para utilizar os recursos do
programa eficientemente, e pouco conhecimento das funes que devem ser
executadas, do significado de entrada e sada das informaes e das metas e
objetivos do sistema.
Usurios instrudos e intermitentes: usurios com razovel conhecimento das
funes da aplicao, mas com pouca lembrana em saber como utilizar
operacionalmente o sistema.
Usurios instrudos e freqentes: usurios com bom conhecimento tanto a
nvel operacional quanto a execuo de funes no software, o que
freqentemente leva a sndrome de usurios com poder, ou seja, indivduos
que procuram atalhos e modos abreviados de interao. (PRESSMAN, 1995,
p. 611)

27

3.1.3 Modelo de usurio ou Percepo do Sistema


Criado pelo usurio final, este modelo representa a imagem do sistema que o
usurio tem em sua mente.
3.1.4 Imagem do Sistema
Criado pelos desenvolvedores do sistema. Este modelo faz a interao do
exterior do sistema baseado em computador, com as informaes de apoio a sintaxe e
semntica do sistema.
Estes modelos representam para o projetista um importante papel durante o
desenvolvimento do projeto de interfaces, que conhecer o usurio final, e tambm as
tarefas executadas pelo mesmo.
Todos estes modelos fazem parte de um processo pelo qual se pode adquirir
conhecimento, aplicando essas teorias na compreenso das capacidades e limitaes
mente dos usurios.
medida que o desenvolvimento do projeto de interface se desenvolve,
importante abordar trs questes de projeto: tempo de resposta do sistema, recursos
de ajuda ao usurio e mensagens enviadas pelo sistema.
O tempo de resposta do sistema medido a partir do ponto em que o usurio
realiza qualquer tipo de ao de controle at a resposta do sistema com uma sada de
informao ou alguma ao desejada. Se o tempo de resposta for muito longo, com
certeza o usurio sofrer frustrao e estresse.
J os recursos de ajuda so fundamentais para um sistema interativo. Quase
todo usurio de sistemas baseados em computador precisa de ajuda, agora e sempre.
(PRESSMAN, 1995, p.616).
De acordo com Pressman (1995), muitos sistemas modernos oferecem
recursos de ajuda on-line, que facilita ao usurio ter uma resposta a uma consulta ou a
um problema sem abandonar a interface.
H dois tipos diferentes de ajuda encontrados em sistemas interativos:
facilidades integradas e add-on (RUB, 1988). Ambos os recursos tm a funcionalidade
de auxiliar o usurio na utilizao de recursos do programa. O recurso de facilidade de
ajuda integrada desenvolvido junto com os mdulos do sistema desde o comeo do

28

projeto, tornado-se assim sensvel ao contexto, oferecendo desta forma ao usurio final
a seleo de opes de ajuda voltadas para aquela interface que ele est usando no
momento, reduzindo assim o tempo exigido quando obtm ajuda, aumentando a fcil
interao com o tipo de interface desenvolvida. O outro tipo de ajuda add-on,
desenvolvido somente quando o programa estiver sido construdo por completo,
caracterizando-se como um manual on-line, com consultas limitadas de ajuda. No dizer
de Pressman (1995), com este tipo de opo, o usurio talvez se depare por vrios
tpicos at chegar opo desejada, podendo trazer informaes irrelevantes e no
satisfazendo a dvida real do usurio.
Quando alguma operao por parte do usurio sai errada, a primeira
informao que ele recebe por meio de mensagens enviadas pelo sistema interativo.
Em muitos casos, as mesmas representam informaes inteis ou enganosas e
servem para aumentar a sua frustrao.
De acordo com Pressman (1995), para que as mensagens sejam eficientes e
que verdadeiramente possam dizer alguma coisa que ajude o usurio, elas devem ter
as seguintes caractersticas:

As mensagens devem usar uma linguagem simples, para que o usurio


possa entender;

As mensagens devem apresentar conselhos construtivos, e ser


acompanhada por um sinal sonoro ou visual;

As mensagens no devem fazer julgamentos e nem colocar a culpa no


usurio;

Desta forma, se as mensagens de aviso seguirem essas caractersticas,


representaro uma melhor qualidade na informao transmitida e reduzir a frustrao
do usurio quando um problema acontecer.
A construo de interfaces para aplicativos considerada um desafio num
projeto de software, porque ela necessita de uma juno de diversas reas de
conhecimento, para ter como resultado uma interface de qualidade e que represente
as necessidades dos usurios.
Segundo Silva Filho (2005), desenvolver um projeto de interface no
simplesmente desenvolver uma fatia do software do sistema. O projeto em si requer,

29

alm disso, outras atividades, tais como:


Projeto da comunicao entre usurios e computador: Identificao e
representao de tarefas dos usurios e informaes pertinentes;
Projeto grfico e textual da interface: Projeto de software IU (Interface de
Usurio) atravs do qual outras decises de projeto sero implementadas;
Avaliao da interface;
(SILVA FILHO, 2005, p.85).

O desenvolvimento de uma interface de usurio parte do sistema que


mais requer do projeto tanto em termos de tempo de desenvolvimento quanto na
proporo de software dedicada a esta fatia do sistema (SILVA FILHO, 2005, p.85).
Sendo assim, todo projeto de interface antes de ser iniciado, deve
primeiramente ter um estudo detalhado de todos os processos que fazem parte dos
usurios, passando por processos de prottipos e reunies com todos os envolvidos
pelo processo de construo da interface.

3.2 DESENVOLVIMENTO DE INTERFACE PARA USUARIOS

No desenvolvimento do projeto de interface, as indstrias de software utilizam


processos iterativos de construo e avaliao de prottipos baseadas em princpios e
diretrizes prticas e tericas. Este processo orientar a elaborao do projeto de
interface, possibilitando ao projetista a soluo para o conjunto de problemas que a
aplicao pretende resolver, transmitindo ao sistema o mesmo ambiente que o usurio
j esta acostumado a trabalhar.
Segundo Preece e outros (1994) quando se inicia o desenvolvimento de
layout para sistemas computacionais, um dos primeiros passos a serem dados a
utilizao da prototipao do layout da interface.
Prototipao um recurso utilizado pelos projetistas (designers), que permite
fazer uma avaliao de suas idias durante o processo de criao de interface. Ela
apresenta uma viso, como um todo, de como ser o resultado final da interface
projetada, facilitando desta forma o entendimento entre projetistas e usurios finais. A

30

Figura 19 apresenta as formas de como realizado a prototipao em um projeto de


interface:
Estabelecer
objetivos do
prottipo

Definir a
funcionalidade
do prottipo

Desenvolver

o prottipo

Avaliar o
prottipo

Figura 19 Caminhos da prototipao modificada (PROTOTIPAO de Software, 2006)

Segundo o artigo (PROTOTIPAO DE SOFTWARE, 2006), para fazer uso


da prototipao de interfaces, recomendvel seguir um caminho especifico para obter
resultados satisfatrios durante o desenvolvimento do projeto. De acordo com a Figura
18, primeiramente necessrio fazer o plano de prototipao, ou seja, definir os
objetivos reais da interface que ser desenvolvida. Em seguida, faz-se a definio das
funcionalidades do prottipo, detalhando seus objetivos, suas vantagens, etc. Aps
esta etapa, necessria a construo do mesmo, tornando-se o que foi discutido
anteriormente como prottipo prtico para ser avaliado pelo usurio, e aps a
validao, o mesmo deve ser analisado novamente, certificando-se de que o prottipo
desenvolvido est cumprindo ou no com as necessidades do usurio final.

3.2.1 Benefcios do uso de prototipao em projetos de interfaces


A prototipao fundamental em um projeto de interface, pois ela oferece
facilidade por parte dos usurios para utilizar os recursos e facilitar o entendimento da
interface, oferecendo benefcios voltados ao prprio meio de trabalho do usurio,
sendo possvel de ser aplicado antes mesmo de informatizar seu meio de trabalho
(PROTOTIPAO DE SOFTWARE, 2006).
Benefcios:

Maior aproximao das necessidades requeridas dos usurios;

Melhoria na qualidade do projeto desenvolvido;

Melhoria na facilidade de utilizao da interface;

31

Alem do uso de prototipao, h outros meios de se conseguir qualidade no


produto a ser desenvolvido. Segundo Moran (1981), uma das caractersticas bsicas
do projeto de interface a interao e usabilidade que o sistema possa oferecer. Essas
diretrizes so essenciais durante o projeto de construo de interfaces.
De acordo com Moran (1981), a interao um processo que envolve aes
dos usurios sobre um sistema atravs da interface, obtendo interpretaes sobre
respostas reveladas pela mesma (Figura 20).

Figura 20 Processo de interao homem-computador


(SOUZA, C et al, 2006, p. 4)

Segundo Souza e outros (2006), atravs da interao com o sistema, o


usurio capaz de entender sem grandes dificuldades as premissas, decises e
intenes que foram projetadas durante o projeto de interface.
Quanto maior o conhecimento do usurio da lgica do designer embutida na
aplicao, maiores suas chances de conseguir fazer um uso criativo, eficiente e
produtivo [...] (SOUZA et al., 2006, p.5).
Para representar um exemplo do modelo de interao da interface, a Figura
21 ilustra um tpico software para controle de volume multimdia, desenvolvido pela
MICROSFT . Atravs da sua semelhana com um painel de volume analgico de um
aparelho de som. Esta interface comunica de forma efetiva com o exterior, passando
para o usurio a maneira que deve interagir para regular o volume do som no
computador.

32

Figura 21 Exemplo de fcil interao com o usurio (Microsoft)

A qualidade da interao dos usurios com o sistema recebe o nome de


usabilidade. Ela caracterizada como uma das principais metas dos projetistas de
interfaces, considerado o principal meio para avaliao do layout que est sendo
desenvolvido. ela que faz a medio da qualidade de uma interface, envolvendo
vrios fatores como a facilidade de uso e aprendizagem por parte dos usurios na
realizao de suas tarefas, evidenciando o seu esforo em reconhecer a parte lgica
do software a ser utilizado e sua aplicabilidade na resoluo de problemas, procurando
chegar ao alcance das metas desejadas em relao s operaes executadas no
programa.
Segundo Oliveira e Garcia (2002), a usabilidade medida pela utilizao de
mtodos de avaliao sobre a interface. Cada mtodo tem um objetivo especifico,
sendo que todos so utilizados com um nico objetivo: de obter um projeto de interface
com qualidade e confivel ao usurio.
A usabilidade apresenta alguns atributos especficos, que se deve levar em
conta durante sua utilizao, caracterizando-se em tcnicas simples e fundamentais
para o desenvolvimento da interface. A Figura 22 apresenta um modelo geral de
atributos utilizados na usabilidade.

33

Figura 22 Atributos de Usabilidade (PROTOTIPAO DE SOFTWARE, 2006)

Dentro do projeto de interface, a avaliao no deve ser considerada como


fase nica e nem como uma atividade a ser realizada apenas no final do
desenvolvimento da aplicao.
De acordo com Rocha (2000), quando se inicia a construo das interfaces,
logo de incio ela j deve ser avaliada, permitindo assim aos projetistas vrios
resultados, possibilitando desta maneira a realizaes de mudanas e adaptaes de
acordo com os resultados obtidos pela avaliao, podendo mostrar os problemas que
podem acontecer durante a interao dos usurios com o software. A avaliao de
interface possui trs objetivos:
Avaliar a funcionalidade do sistema, verificando sua adequao aos
requisitos das tarefas do usurio, que deve executa-las de modo fcil e
eficiente;
Avaliar o efeito da interface junto ao usurio;
Levantar resultados inesperados sobre o uso da interface, mostrando os
pontos crticos que causam confuso entre os usurios, caracterizando
como problemas de usabilidade;
(ROCHA, 2000, p.82).

De acordo com Rocha (2000), os mtodos de avaliao de usabilidade so


classificados em dois grupos, e devem ser aplicados de forma combinada. So eles:
testes de usabilidades e inspeo. Os testes de usabilidade envolvem a participao
de usurios, utilizando um modelo de interface que foi desenvolvida para a execuo

34

de tarefas, mostrando assim os problemas obtidos durante a interao do usurio com


o software.
No inicio dos testes de usabilidade, necessrio tambm aplicar o teste de
inspeo, nesta fase inicial as idias esto sendo exploradas e a usabilidade sendo
avaliada, tendo desta forma a participao e observao de especialistas neste tipo de
teste, vistoriando cada fase de interao por parte do usurio.
De acordo com Rocha (2000), no decorrer do processo, os testes devem ser
aplicados em estgios mais avanados do projeto da interface, podendo apresentar
possveis alteraes durante esta fase, caso seja necessrio.
Conforme Oliveira e Garcia (2001), a aplicao de testes de usabilidade pode
ser realizada com o apoio de modelos definidos, que foram desenvolvidos unicamente
para apoiar os avaliadores na aplicao dos testes.

3.3 MODELOS DE APOIO A TESTES DE USABILIDADE

MODELO DE CAPTURA apresenta a forma de como as aes dos usurios


so capturadas e registradas durante sua interao com o sistema de avaliao.
Segundo Oliveira e Garcia (2002), para a utilizao deste modelo. So usadas
diferentes tcnicas conforme a citao abaixo:

Captura e registro do tempo de acionamento das teclas;


Captura e registro dos eventos do mouse e teclado;
Captura e registro das aes de mouse e teclado;
Captura e registro da freqncia de uso de comandos e objetos da
interao;
Captura e armazenamento das imagens de interao;
(OLIVEIRA, GARCIA, 2002).

MODELO DE REPRODUCAO: apresenta como so as interaes que foram


capturadas, variando de acordo com o modelo de captura descrito logo acima.
MODELO DE ANALISE: apresenta as funcionalidades que devem ser
implementadas, para ajudar o projetista ou avaliador dos testes durante a anlise das
interaes entre usurio e sistema.

35

O processo da utilizao de usabilidade em projetos de interface depende de


vrios aspectos para se alcanar um resultado satisfatrio:

Facilidade de aprendizado: tempo e esforo necessrios para que os usurios


consigam um determinado nvel de desempenho;

Facilidade de uso: avalia o esforo fsico e o conhecimento do usurio durante o


processo de interao, medindo a velocidade e o nmero de erros cometidos
durante a execuo de uma determinada tarefa;

Satisfao do usurio: avalia se o sistema satisfaz as exigncias do mesmo;

Flexibilidade: mede a capacidade do usurio de utilizar o sistema de uma forma


gil e criativa, possibilitando a execuo de tarefas de vrias formas diferentes;

Produtividade: verifica se o sistema faz com que o usurio seja mais produtivo
com o seu uso, do que seria se no o utilizasse.
Estas caractersticas so relevantes a construo do projeto de interface, e em

muitos casos, o prprio designer deve identificar entre estes fatores quais tm
prioridade sobre outros, uma vez que difcil conseguir alcanar todos de forma
equivalente.
Estes fatores determinam a forma de interao entre usurios e sistemas,
definindo a facilidade de uso como sendo o aspecto de usabilidade prioritrio,
desenvolvendo desta forma aplicativos em que os usurios no cometam erros, ms
tambm no tem opes para os mesmos fazerem tomadas de ao ou deciso.
E importante que alm de desenvolver um sistema que amplie as capacidades
do usurio, a interface deve atingir tambm a aplicabilidade, sendo til na resoluo
dos mais variados problemas.
Segundo Fischer (1998) todo usurio experiente em um domnio, e um
programa de computador deve servir a sua especialidade, funcionando como um
instrumento de trabalho, no fazendo com que o usurio assuma as exigncias de
peculiaridades tecnolgicas.

36

3.4 ENGENHARIA COGNITIVA E ENGENHARIA SEMIOTICA

3.4.1 ENGENHARIA COGNITIVA


Segundo Preece e outros (1994), o que caracterizou o processo de IHC foram
s bases cognitivas, ou seja, processo pelo qual se pode adquirir conhecimento, e que
aplica suas teorias na capacidade e limitao da mente dos usurios.
A estratgia da engenharia cognitiva para apoio ao desenvolvimento do
projeto de interface consiste na construo de modelos que ajudam os projetistas a
entender os processos cognitivos humanos usados na interao e a realizar
experimentos ou previses com estes modelos.
Segundo a pesquisa cientifica de Souza e outros (2006), os modelos
cognitivos servem para representar os processos e estruturas mentais como
recordao, interpretao e aprendizado. Tais estruturas podem mostrar para os
projetistas de interface que os modelos de interao devem funcionar de maneira com
que a este possa ser desempenhado mais facilmente pelos usurios.
Segundo Pdua ([199-?]), o desenho de interfaces deve fornecer o mximo de
confiana ao usurio e deve minimizar o possvel de transformaes mentais
necessrias.
Para que o projeto de interface consiga alcanar esses objetivos cognitivos,
Norman (1986), afirma que o projetista deve criar primeiramente o modelo mental do
sistema, caracterizando-se o inicio para a criao do layout, com base nos modelos de
tarefa e de usurios. O resultado alcanado atravs da implementao do modelo de
design a imagem do sistema. O usurio final no tem nenhuma interao neste caso,
criando desta forma sua prpria estrutura mental, caracterizando-se no modelo do
usurio. Este modelo que faz com que o usurio possa formular suas intenes e
objetivos em termos de comandos e funes do prprio sistema. A Figura 23 abaixo,
apresenta a abordagem do processo de design, segundo Norman (1986).

37

Figura 23 Modelo de interao da Engenharia Cognitiva (SOUZA, C et al, 2006, p.


13)

O projeto de interface realizado com estes aspectos cognitivos do usurio


chamado de design de sistemas centrado no usurio (User Centered System Design
UCSD) Norman (1986).
Segundo a Engenharia Cognitiva, o projetista deve procurar desenvolver uma
aplicao que permita ao usurio criar um modelo mental de acordo com a interface
projetada. De acordo com Norman (1986), necessrio que o projetista entenda do
processo de interao do usurio com a interface do sistema, aplicando-se assim a
teoria da ao, que simplesmente a interao usurio-sistema, envolvendo GOLFO
da EXECUO , caracterizando-se pelas etapas de formulao da meta do projeto de
interface, especificao das aes e atividade fsica de execuo, e tambm o GOLFO
da AVALIAO, caracterizado pelas etapas de percepo, interpretao e avaliao
da meta.

Figura 24 - Etapas de ao do usurio durante a interao com o sistema


(SOUZA, C et al, 2006, p. 14)

38

De acordo com Preece e outros (1994), a Figura 24 representa a ao do


usurio final quando utiliza um software para realizar uma determinada operao, ele
deve primeiramente formular metas a serem alcanadas atravs da interao com as
funes do sistema. Seqencialmente o usurio deve definir quais so as aes que
devem ser executadas para conseguir atingir o resultado esperado, realizando assim
toda a preparao mental para a execuo da meta, restando-lhe concretizar o que foi
mentalizado atravs de operaes realizadas no sistema, compreendendo assim o
golfo de execuo. Aps a execuo da ao definida pelo usurio, inicia-se o GOLFO
DE AVALIAO. Sua etapa inicial a compreenso do usurio do novo estado que o
sistema se encontra, mas em muitas situaes ele no consegue interpretar este novo
estado e o avalia com base em sua meta inicial, prosseguindo assim a definio da sua
prxima ao a ser executada no sistema.
Se o usurio no perceber que o sistema mudou de estado atravs
de uma sinalizao clara, ele possivelmente interpretar que nada ocorreu e
que a sua meta inicial no ser atingida.
O projetista pode ajudar o usurio a atravessar estes golfos
diminuindo-os. Para isto ele deve definir quais so as aes e estruturas mais
adequadas para comandar as funes do sistema, escolher os elementos de
interface que melhor comunicam a informao desejada, optar por feedbacks
significativos, dentre outras escolhas de design. Assim, quanto mais prxima
da tarefa e das necessidades do usurio for linguagem de interface oferecida
pelo projetista, menos esforo cognitivo o usurio ter que fazer para atingir
seus objetivos.
(Preece et al., 1994, p. 14)

3.4.2 ENGENHARIA SEMITICA


A Engenharia Semitica complementa a Engenharia Cognitiva. Ela refere-se a
comunicao entre diferentes meios, constituindo-se em estudos sobre a forma de
como o emissor transmite a mensagem ao receptor, compreendendo desta maneira
uma forma de dialogo entre as partes, atravs da utilizao e interpretao de signos.
Signo algo que representa alguma coisa para algum. Por exemplo, tanto a
palavra <co> em portugus, quanto uma fotografia de um co representam o animal
cachorro, e assim so signos de cachorro para falantes da lngua portuguesa
(PEIRCE, [19--]).
Um sistema computacional considerado como um ato de comunicao, que
inclui o projetista no papel de emissor de uma mensagem para os usurios

39

(receptores) dos sistemas por ele criados (ANDERSEN et al., 1993; DE SOUZA,
1993).
De acordo com Souza (1993; 1996), a interface de um programa de
computador vista como sendo uma mensagem enviada pelo projetista de interface ao
usurio final.
Esta mensagem tem como objetivo comunicar ao usurio a resposta
a duas perguntas fundamentais: Qual a interpretao do projetista (designer)
sobre o(s) problema(s) do usurio, e como o usurio pode interagir com a
aplicao para resolver este(s) problema(s)? O usurio concebe a resposta a
estas perguntas medida que interage com a aplicao.
(SOUZA, 2006, p.17).

O design de interfaces envolve no apenas a concepo do modelo da


aplicao, mas a comunicao deste de maneira a revelar para o usurio o espectro
de usabilidade da aplicao (SOUZA et al., 2006, p. 18).
A Engenharia Semitica ressalta ainda que a presena do projetista de
interface no cenrio comunicativo deve ser explicitada e tornada sensvel para os
usurios para que tenham maior chance de entender as decises tomadas, sendo
assim capazes de fazer um uso mais criativo e eficiente da aplicao.
As figuras abaixo representam um exemplo da mensagem que o projetista de
interface est transmitindo ao usurio. A Figura 25 mostra que apenas permitida a
emisso de um relatrio por vez, devido s opes de seleo da interface. J a
Figura 26 mostra que, com esse tipo de interface possvel emitir um relatrio
selecionando varias opes ao mesmo tempo, assinalando mais de um item na tela,
devido s caixas de seleo.

Figura 25 Mensagem que o projetista quer

Figura 26 - Mensagem que o projetista quer

passar para ao usurio

passar para o usurio

40

Na abordagem da Engenharia Semitica, o projeto de interface compe-se de


quatro etapas bsicas para o seu desenvolvimento: anlise, design, prototipao e
avaliao. A Figura 27 apresenta o processo de design na Engenharia Semitica.

Figura 27 - Processo de Interface na Eng. Semitica


(LEITE, SOUZA, [200-],p.4).

A Figura acima representa as atividades de um projeto de interface num


processo cclico, ou seja, no qual o design da interface pode ser corrigido ou sofrer
evolues para novas etapas a partir da avaliao da interface (LEITE, SOUZA, [200]).
O projetista contempla no projeto tanto a funcionalidade quanto o modelo de
interao. A interface bem desenvolvida responsvel por fazer com que o usurio
tenha condies de interagir com as funcionalidades do sistema. E o layout bem
projetado depende da especificao dos modelos de interao e das funcionalidades
do sistema, visando descrever quais funes o sistema deve oferecer para os seus
usurios.

3.5 ENGENHARIA COGNITIVA OU ENGENHARIA SEMIOTICA

Tanto a Engenharia Semitica quanto a Engenharia Cognitiva vem o


processo de layout se iniciando com o projetista de interface que cria o seu modelo
mental da aplicao, e com base neste, implementa a prpria interface para a
aplicao (LEITE, SOUZA, [200-], p. 19).

41

O usurio ao interagir com esta aplicao cria-se seu prprio modelo mental
do uso do software. A criao das interfaces do sistema e a interao do usurio com o
projeto de construo funcionam em diferentes momentos no tempo de projeto.
A Engenharia Cognitiva se concentra na interao usurio-sistema, deixando
a etapa designer-sistema em segundo plano. Ela oferece subsdios para se definir a
meta ideal do processo de layout, um produto cognitivamente adequado para a
populao de usurios.
A Engenharia Semitica por sua vez, junta estas duas etapas ao
transferir seu ponto de vista para um nvel mais abstrato, no qual o projetista
envia ao usurio uma meta-mensagem. Desta forma, a Engenharia Semitica
d um zoom-out no processo de design e inclui a Engenharia Cognitiva.
(LEITE, SOUZA, [200-], p. 19).

No dizer de Leite e Souza ([200-]) todos os resultados que so obtidos na


engenharia cognitiva so vlidos tambm na engenharia semitica, deixando de ser o
foco a interao usurio-sistema, dando subsdios para a definio do plano de design,
que se faz tornar um processo coeso e consistente, levando com segurana a
mensagem que o projetista de interface passa ao usurio final.

3.6 TECNICAS PARA CONSTRUO DE INTERFACES

A construo do projeto de interfaces depende de vrios fatores para chegar a


um resultado satisfatrio, envolvendo toda uma atividade intelectual com tcnicas e
ferramentas especializadas, todas aliadas a criatividade do projetista que ir
desenvolver o projeto de comunicao com o usurio.
Como j foi mostrado neste trabalho, quando um projeto de interface for
desenvolvido, preciso

criar um

prottipo das futuras

telas do sistema. A

prototipao consiste no que foi discutido e imaginado nos primeiros contatos com o
usurio final, utilizando materiais mais simples para formular a primeira apresentao
do esboo, permitindo uma descrio e pr-avaliao mais concreta do produto a ser
construdo.

42

Especificao tambm faz parte do projeto de interface, pois consiste na


descrio e avaliao detalhadas do projeto, a partir de tcnicas associadas s
notaes utilizadas.
A utilizao da prototipao e especificao no projeto de interface permitem
vrias formas de vises e avaliaes complementares, levando o projetista a um novo
layout a ser construdo, e posteriormente ser avaliado, ajudando-o desta forma a
desenvolver uma interface que corresponda com as perspectivas do usurio.
O prottipo da interface dever permitir uma avaliao da interao com os
usurios do sistema. Esta avaliao pode ser feita utilizando-se dois tipos de testes:
testes de usabilidade e comunicabilidade (LEITE, SOUZA, [200-], p. 22).
Os testes de usabilidade avaliam fatores relacionados com facilidade de uso
do programa, produtividade, flexibilidade e satisfao do usurio. Os testes de
comunicabilidade avaliam as diferentes formas de layout desenvolvidas, at chegar
num melhor modelo para o software.
Segundo Sommerville (2003), no incio de um projeto de interface, deve-se
levar em conta a anlise e modelagem de usurios. O usurio final sempre deve ser o
foco central, durante o desenvolvimento do layout do programa. O objetivo da
modelagem e anlise, para identificar quem so os usurios que iro utilizar o
sistema e caracteriz-los de acordo com sua funo, definindo quais so suas
capacidades, etc.
3.6.1 FATORES E ANALISES QUE FAZEM PARTE DO PROJETO DE
INTERFACE

Papel ou Funo de cada usurio: necessrio definir quais tarefas que eles
exercero no aplicativo;

Conhecimentos em microinformtica: de suma importncia saber o grau de


conhecimento de informtica dos usurios e pela familiaridade com o modelo de
interao do ambiente de interface.

Domnio da aplicao: conhecer o grau de domnio da aplicao do usurio


importante para desenvolver uma interface que oferea recursos tanto para os
iniciantes quanto para especialistas.

43

Contexto scio-cultural: h um conjunto de fatores que visam analisar as


diferenas scio-culturais entre os usurios da aplicao, tais como problemas
de lnguas ou dialetos diferentes e tradies culturais distintas. Estes fatores
tm grande importncia em aplicaes que sero distribudas em diversos
pases, ou em diversas regies de um mesmo pas ( o caso de software de uso
geral e software de companhias multinacionais).
Segundo Cooper (1995), h vrios modelos que definem um processo de

construo de software, caracterizando-se um processo para o projeto e outro para a


construo da interface com o usurio. Esses modelos so construdos atravs da
analise do perfil e das tarefas do usurio.
De acordo com Abreu e outros ([199-]), durante um projeto de software, h um
paralelismo com a construo do projeto de sistema com o projeto de interface,
podendo o mesmo ser executado na fase inicial do ciclo de vida do desenvolvimento
do software. O projeto de interface poder ser desenvolvido tanto pela mesma equipe
de desenvolvedores do sistema, quanto por equipes especializadas unicamente para o
projeto de<telas para programas de computador. Essa distino ir depender dos
recursos investidos no projeto como um todo, sendo mais favorvel aquela equipe que
possui um grupo apenas para lidar com a construo do projeto de interface. A Figura
28 apresenta o paralelismo entre as fases de construo de software e a construo da
interface.

Figura 28 Paralelo entre desenvolvimento do software com o projeto de interface (modificada)


(CINCIA E TECNOLOGIA DA INFORMAO, 2005)

44

3.6.2 ANALISE E MODELAGEM DE TAREFAS


A utilizao de modelos se torna fundamental para os projetistas de interface
refletirem desde as etapas iniciais do projeto, permitindo um entendimento mais
concreto e organizado sobre o que ser desenvolvido no projeto de interface, ajudando
na tomada de decises da prpria equipe.

3.6.3 ETAPAS DO PROCESSO DA CONSTRUCAO DE INTERFACES


No dizer de Barbosa e outros [(200-?)], as etapas do processo de construo
de interface compem-se dos seguintes passos: anlise, cenrios, modelagem de
tarefas, modelagem de interao, storyboarding e prototipao rpida.

Anlise = Este processo focaliza-se na compreenso do domnio do problema e


no contexto do usurio. Sendo realizado por meio de questionrios, entrevistas
e estudos sobre o seu comportamento.

Cenrio = Cenrios so narrativas textuais, pictricas ou encenadas, de


situaes fictcias, mas plausveis (seno desejveis) de uso situado da
aplicao (LEITE, SOUZA, [200-], p. 25). construdo com base na anlise
que foi realizada junto ao usurio, permitindo uma exposio de vrias situaes
de.uso,com.grande.variedade>de>informaes.
Eles devem ser ricos em contextualizao, validando junto aos usurios, o
entendimento dos projetistas sobre as idias e tarefas a serem desenvolvidas.
Os mtodos baseados em cenrios permitem aos projetistas a identificao de
componentes de layout, facilitando a compreenso dos usurios envolvidos,
podendo os mesmos avaliar, criticar e dar sugestes sobre o que est sendo
desenvolvido. Apesar dos cenrios serem bem minuciosos, eles no devem
apresentar detalhamento da interface propriamente dita, como textos, rtulos,
seleo de widgets, etc (BARBOSA et al,.[200-?]). Esse no detalhamento da
interface fundamental para o projetista, assim ele no passa por um

45

comprometimento tardio com a escolha do modelo de interface a ser adotada, o


que causaria dificuldades na explorao de solues alternativas para a
realizao do projeto. Quando um cenrio aprovado, inicia-se a construo de
representaes de todas as tarefas que foram argumentadas e trabalhadas
durante o mesmo, seqencialmente dando forma ao produto de software.
Aps a concluso dos cenrios, o projetista j apresenta vrios elementos para
modelar a interface e dar seqncia para o inicio dos outros passos do processo
de IHC.

Modelagem de tarefas = Trata-se de atingir os objetivos (metas) que se


pretende alcanar ao utilizar o sistema, possibilitando a criao de uma lista de
metas do usurio final, atravs do trabalho realizado por meio dos cenrios,
sendo representado em forma de diagrama com especificaes textuais,
possibilitando uma viso mais ampla das metas, com sua seqncia de tarefas
a serem realizadas. Cada meta obtida pelo cenrio ser representada por um
modelo de tarefas, sendo organizado pela seqncia das aes ou de forma
independente. A Figura 29 apresenta uma meta obtida atravs de um cenrio.

Figura 29 Representao diagramtica da meta - Modificada (Proceedings IHC 2002)

O objetivo da representao por diagramas na modelagem de tarefas de


apresentar uma viso geral das metas e tambm da hierarquia de cada tarefa a ser

46

executada. Todos os itens que constituem o modelo de tarefas (meta, tarefas e


operadores) devem ser expressos baseando-se no ponto de vista do usurio (como
Consultar documentos, Efetuar Login, etc).
Com a utilizao deste modelo, o projetista obtm definies detalhadas de
cada objetivo a ser desempenhado pelo usurio no sistema, conseguindo chegar a um
resultado satisfatrio para o desenvolvimento da interface.

Modelo de interao = Aps a construo do modelo de tarefas inicia-se o


modelo de interao. O objetivo deste modelo de apresentar as possveis
formas de interaes que os usurios tero ao utilizar a interface, dando uma
ampla viso aos projetistas, da interao entre usurio e sistema. Segundo
Barbosa e outros ([200-?]), durante este processo fundamental modelar a
interao utilizando um nvel mais alto de abstrao, sem incluir detalhes da
interface para no tornar a notao complexa e de difcil compreenso. Um
diagrama de interao constitui-se de alguns elementos bsicos, tais como:
cenas, processos do sistema e processos externos. Uma cena corresponde a
um componente estruturado da interface, como as janelas (telas), que
representam vrios dilogos entre usurio e sistema. Quando ocorre alterao
em algum dialogo existente, acontece uma transio entre cenas, podendo levar
o usurio outra cena, ou a um outro processo do sistema.
A Figura 30 ilustra um exemplo da meta CONSULTAR DOCUMENTOS,

apresentando a utilizao do modelo de interao, mostrando ao projetista de interface


todas as possveis formas de comunicao do usurio com o sistema.

47

Figura 30 - Representao do modelo de interao Modificada (Proceedings IHC


2002)

Uma cena mostra o dilogo do usurio com o sistema como a fala (efetuar
login). Os retngulos na figura so representados pelo processo do sistema, como
exemplo o processo PROCESSA LOGIN. As mudanas entre cenas e processos
do sistema so representadas por setas juntamente com seus rtulos, identificando
a funo de cada um. Algumas cenas podem ser acessadas por qualquer outra
cena, esse acesso chamado de UBIQUA. Na figura representado por um
retngulo vazio com preenchimento cinza.
Este tipo de modelo apresentado pela Figura 30, facilita o desenvolvimento do
projeto de interface, apresentando ao projetista um mapeamento mais detalhado
das funes exercidas pelo usurio final, facilitando possveis correes e fcil
entendimento entre ambas as partes.

Storyboarding = uma tcnica que envolve especificaes atravs de imagens,


descrevendo situaes que esto sendo planejadas no projeto de interface.
Esta tcnica utiliza meios de desenhos e ilustraes, sendo realizado

48

manualmente ou por ajuda de softwares, permitindo a validao dos cenrios


construdos pelo projetista e a elaborao de prottipos de interfaces para
layouts iniciais. um recurso que pode ser usado de uma forma mais livre e
simples, facilitando o dialogo entre usurios e projetistas. A Figura 31 mostra um
exemplo de storyboarding gerado a partir de um cenrio especifico:

Figura 31 Exemplo da utilizao de um storyboard (SOUZA, C et al, 2006, p. 34)

49

4 CRIAO DO PROJETO DE INTERFACE

Neste captulo, ser mostrado de forma prtica e objetiva, o conceito


apresentado nos captulos anteriores focalizando na qualidade da construo do
projeto de interface para usurios. De incio ser abordado o procedimento de como
construir o projeto, seguindo as principais caractersticas e regras que foram
apresentadas nos captulos anteriores. O foco deste captulo de apenas
apresentar uma viso geral da construo do projeto de interface, entretanto, devese observar que no foi realizado um trabalho de campo, ou seja, no h nenhuma
participao de usurios reais para a construo do mesmo.
Por meio de exemplos, sero apresentadas as principais tcnicas utilizadas
em um projeto de desenvolvimento de telas para programas de computador, com o
objetivo de alcanar a excelncia na qualidade do desenvolvimento da mesma,
caracterizando-se um desafio para os profissionais da rea de projeto e de
desenvolvimento.
Atravs da utilizao de casos de usos, ser construdo o modelo mental do
sistema, e posteriormente desenvolver a prototipao das futuras telas, at chegar
no modelo final com o layout definido, finalizando o projeto com as interfaces prontas
para serem utilizadas.
O modelo escolhido para o estudo detalhado da construo do projeto ser o
mdulo comercial de um sistema de vendas qualquer. O mesmo ser composto de
cinco especificaes que determinaro as funcionalidades do modelo estudado,
indicando as possveis formas de interao que o usurio dever ter ao utilizar a
interface do sistema. As especificaes de cada funcionalidade deste mdulo,
constituem-se em:

Cadastro de Fornecedores

Cadastro de Produtos

Cadastro de Clientes

Lanamento de Vendas (Pedido de Venda)

Consultar Pedidos

50

Aps a criao destas, sero construdos casos de usos para cada


especificao abordada, utilizando a ferramenta de modelagem UML - Visual
Paradigma. Com a criao deste modelo, ser possvel apresentar a forma de
interao com o sistema, atravs da utilizao simblica de um ator, correspondendo
a ao do usurio diante da funo a ser realizada no sistema atravs da interface
que ser ser projetada.
Com a criao destes casos de usos, ser possvel desenvolver a
prototipao das telas, com base ao modelo mental do possvel usurio,
determinando assim o primeiro esboo prtico para a criao das janelas do sistema
e posteriormente chegar ao desenvolvimento prtico das mesmas, atravs de
ferramentas de programao, como de exemplo DELPHI, VISUAL BASIC, etc . Com
relao a este trabalho, as interfaces foram construdas utilizando-se a ferramenta
de programao.Delphi.6.0.

4.1 INCIO DA CONSTRUO DO PROJETO DE INTERFACE

Para a criao do projeto, o primeiro passo o contato direto com usurio,


atravs de reunies e encontros para obter especificaes detalhadas de todas suas
rotinas no seu dia a dia, procurando por parte do projetista ou desenvolvedor
entender o modelo mental que o usurio tem em relao as suas tarefas exercidas.
Tendo entendido o modelo mental e as necessidades dos usurios, cabe a equipe
do projeto passar todas as idias obtidas para o papel e assim serem discutidas, e
conseqentemente passar para a etapa seguinte, que so as especificaes
detalhadas de acordo com as necessidades obtidas.
Aps o estudo detalhado destas necessidades, inicia-se a construo da
planta das futuras interfaces, que a criao dos casos de usos e seqencialmente
a construo da prototipao, tendo assim um conjunto de informaes necessrias
para a criao das interfaces que constituiro o projeto como um todo,
representando para o usurio a principal forma de entendimento e comunicao com
o sistema a ser implantado.

51

4.1.1 FUNCIONALIDADES PARA OS CASOS DE USOS

Cadastro de Fornecedor
O usurio ser capaz de incluir um novo fornecedor. Toda entrada de
produtos na empresa realizada pela negociao com cada fornecedor. Para que o
usurio consiga fazer o cadastro de produtos, ser necessrio ter os dados do
fornecedor cadastrado no sistema, pois existe um relacionamento entre entrada de
produtos com o fornecedor correspondente. Se no cadastro de fornecedor no
houver seus dados registrados, no ser possvel realizar o cadastro do produto no
sistema.
Para cada fornecedor, necessrio armazenar dados sobre razo social,
nome fantasia, endereo, cidade, estado, CNPJ, Insc. Estadual e contatos. Estes
dados so obrigatrios no ato do cadastro. Todo fornecedor relacionado a um
contato especificadamente, constituindo a lista de contatos, eles representam os
responsveis pelo contato direto por cada fornecedor lanado no sistema.
Antes de o usurio fazer o lanamento do novo fornecedor, ele pode realizar
uma consulta para verificar se h existncia do mesmo no sistema. No ser
permitido realizar o cadastro do fornecedor caso j exista suas informaes no
banco de dados. Se atravs da consulta, for verificado que no h registros sobre
determinado fornecedor, deve-se realizar ento o novo cadastro, informando todos
os dados necessrios para a sua concluso.
No momento de salvar as informaes no sistema, ser verificada a
validao dos dados digitados, como de exemplo o calculo do CNPJ, caso no
esteja correto, o usurio ser notificado pelo sistema, indicando que o valor digitado
no CNPJ est errado, obrigando-o a corrigir o valor digitado. Aps a verificao e
correo do CNPJ, o cadastro do fornecedor ser concludo, finalizado assim a
operao.

52

Cadastro de Produtos
O usurio deve ser capaz de incluir um novo produto, os mesmos
representam tudo que comercializado pela empresa, representando o giro de todo
o fluxo comercial. Antes de fazer o cadastro do novo produto, o usurio pode realizar
uma consulta, verificando se o mesmo j foi lanado no sistema. A consulta dever
ser realizada pelos principais dados que identificam o produto, como cdigo do
produto ou a descrio do mesmo.
Ao realizar a consulta, o usurio ser informado pelo sistema, mostrando se
existe o produto com a mesma descrio cadastrada. No ser permitido cadastrar
produtos que tenham a mesma descrio, caso no ocorra esse tipo de alerta, o
usurio ser liberado para realizar o cadastro.
Para a realizao do cadastro, necessrio armazenar para cada produto,
dados sobre descrio, complemento, local do estoque, lista de opes, marca,
grupo e fornecedor. Essas informaes so obrigatrias para a concluso do
cadastro. Todo produto registrado identificado por um numero nico, este numero
chamado de cdigo e deve ser gerado automaticamente pelo sistema.
Durante o lanamento, o usurio devera fazer consultas internas no cadastro,
pois algumas informaes obrigatrias so armazenadas em outras tabelas do
banco de dados, e elas esto relacionadas com o cadastro do produto, como a
identificao do fornecedor correspondente, somente ser cadastrado o produto,
caso o fornecedor do mesmo j esteja lanado no cadastro de fornecedores.
Outra opo que tambm est vinculada em outra tabela, a escolha do grupo
pertencente ao determinado produto, somente ser cadastrado o produto, caso
tenha algum grupo especifico no cadastro de grupo e sub-grupo, caso no haja
grupos especficos para o produto, o sistema emitira um alerta informando o usurio
sobre a falta do grupo definido.
Depois de realizado o preenchimento de toda a ficha, o usurio devera registrar
as informaes na base de dados, concluindo assim a operao. Este cadastro est
ligado ao controle de estoque, refletindo assim em sua quantidade de produtos
armazenadas em cada local.

53

Cadastro de Clientes
O usurio ser capaz de incluir um novo cliente. Cada cliente ligado a um
vendedor especifico, tornando-se exclusivo para aquele determinado vendedor.
Antes de fazer o cadastro, o usurio pode realizar uma consulta para verificar se os
dados do cliente j foram lanados no sistema, caso no seja, liberado o cadastro
para o usurio. Essa consulta ser realizada por meio de um dado principal, que o
cdigo do cliente.
A indicao ao usurio se j existe ou no o cliente cadastrado, ser por meio
de mensagem trazida pelo sistema, informando que j existe o cliente com o mesmo
CPF, impossibilitando a seqncia do lanamento. Se no existir o cliente, o usurio
dever preencher os campos necessrios para concretizar o cadastramento do
mesmo. Durante o preenchimento do cadastro, alguns campos so obrigatrios,
entre eles: Cdigo, Nome, CPF, e situao do cliente. O usurio tambm devera
preencher a classificao fiscal do cliente, essa seleo ira identificar a classificao
do ICMS, podendo ser selecionada apenas uma opo, dividindo-se em:
Consumidor Final, Revendedor, Produtor rural ou isento de ICMS. Aps o
preenchimento de todos os dados, o cliente ser cadastrado no sistema, finalizando
assim a operao.

Lanamento de Vendas (Pedido de Venda)


O usurio ser capaz de realizar uma nova venda caso j seja registrado no
sistema informaes do cliente que esteja fazendo o pedido, como tambm
fornecedor e produto a ser comercializado.
O pedido de venda composto por 3 partes distintas, que se divide em
cabealho, corpo do pedido e rodap. Primeiramente, o usurio devera preencher o
cabealho, contendo as principais informaes do novo pedido, como nome do
cliente, data de negociao, data de faturamento, tipo de negociao, e
observaes. Essas informaes devero ser digitadas manualmente pelo usurio,
ficando a opo do numero do pedido para ser gerado automaticamente pelo
sistema.

54

Neste mesmo cabealho, o usurio selecionar o cliente que esta fazendo o


pedido, atravs de consulta por meio do cdigo do cliente, nome ou cpf.
obrigatrio preencher as informaes do cliente no cabealho do pedido, caso o
cliente no seja selecionado ou encontrado, o pedido no poder ser finalizado,
impedindo assim a confirmao do mesmo. O usurio ser informado sobre o
resultado da consulta, por meio de um alerta do sistema, sinalizando a existncia ou
no do cliente no cadastro.
Se o cliente for selecionado ou encontrado na base dados, o usurio poder
continuar o preenchimento atravs do corpo do pedido, informando na seqncia os
itens do mesmo, como o produto a ser adicionado, quantidade a ser comprada, local
de estoque e valor unitrio. Para cada pedido existe o item do pedido, que se
caracteriza por produtos que esto armazenados em estoque, representando o
contedo do mesmo.
Para adicionar o produto no item do pedido, o usurio devera realizar uma
consulta por meio do cdigo, descrio, localizao do estoque ou por referencia do
fornecedor correspondente. O usurio ser informado sobre a existncia ou no do
produto na base de dados, por meio de mensagem de alerta emitida pelo prprio
sistema. Se o produto for localizado, ser apresentado um resumo geral do seu
cadastro,

visualizando

os

principais

campos

como

descrio

completa,

complemento, lugar e total em estoque. Atravs desta consulta, o usurio ficar


informado sobre o produto selecionado, tendo assim uma quantidade precisa de
informaes para realizar o lanamento no pedido de venda. Se o produto no
estiver sido lanado no cadastro de produtos, a continuao do pedido no ser
possvel. O usurio ter o livre direito de acrescentar outros produtos para o mesmo
pedido, caso o produto a ser lanado j esteja registrado na base de dados.
Aps o preenchimento dos itens do pedido, o usurio ter que preencher o
rodap do mesmo, contendo dados como transportadora, desconto e seguro. Aps o
preenchimento das trs partes que constituem o pedido, ele ser confirmado. Aps a
confirmao do pedido, o mesmo dever ser impresso e o usurio tambm poder
enviar um copia do PV via e-mail para o cliente, apenas informando o e-mail do
destinatrio que ira receber a copia do pedido.

55

Consultar Pedidos

O usurio poder fazer consultas a todos os pedidos que esto ligados a um


determinado cliente. Essas informaes sero visualizadas de acordo com cada
vendedor relacionado ao seu cliente especifico.
A consulta devera ser feita pelo cliente desejado, informando seu cdigo,
nome ou CPF correspondente, se o usurio informar um dado errado ou cliente que
no exista no cadastro, o sistema ira trazer uma mensagem informando para o
usurio refazer a consulta novamente.
Aps realizar a consulta e localizar o cliente desejado, o usurio poder
visualizar todas os pedidos feitos para aquele cliente, podendo classificar alguns
filtros por pedidos pendentes e no pendentes e data de negociao.
Atravs deste recurso, ser possvel identificar cada item do pedido,
identificando o numero do pedido, data de negociao, valor, cliente, tipo de
negociao e valor do frete.
Por meio desta opo, o vendedor ter um maior controle de seus pedidos
realizados, sabendo tambm quais esto pendentes ou no.

56

4.1.2 DIAGRAMA DE CASOS DE USO


Aps cada funcionalidade do sistema, os projetistas tero

informaes

suficientes para iniciarem o modelo do sistema, baseado-se em cada funcionalidade


descrita sobre o mesmo. A Figura 32 apresenta um pequeno modelo de caso de
uso, com base nas funcionalidades detalhadas no item 4.1.1.

Figura 32 Diagrama de Caso de Uso Mdulo Comercial

57

4.1.3 ESPECIFICAO DOS CASOS DE USOS


Nome = Cadastrar Fornecedor
Pr-condio = No ter fornecedor cadastrado
Ps- condio = Fornecedor cadastrado
Fluxo principal

1- Solicitar o CNPJ do fornecedor

2- Verificar se existe o fornecedor


3- Criar novo fornecedor
4- Solicitar demais dados do fornecedor
5- Validar CNPJ
6- Incluir fornecedor na base de dados
Fornecedor j cadastrado

Fluxo Secundrio

2.1 Estende consulta fornecedor


2.2 Retornar para item 1
CNPJ invlido
4.1 Exibir mensagem de alerta
4.2 - Retornar para item 4

Nome = Cadastrar Produto


Pr-condio = No ter produto cadastrado
Ter cadastro do fornecedor
Ter cadastro do grupo e subgrupo
Ps- condio = Produto cadastrado
Fluxo principal

1- Solicitar cdigo ou descrio do produto


2- Verificar se existe o produto
3- Criar novo produto
4- Solicitar demais dados do produto
5- Solicitar cdigo do fornecedor

58

6- Verificar se existe fornecedor


7- Solicitar cdigo do grupo e subgrupo de produtos
8- Verificar se existe o grupo e subgrupo
9- Incluir produto na base de dados

Produto j cadastrado

Fluxo Secundrio

2.1- Estende consulta produto


2.2 Retornar para item 1
Fornecedor no cadastrado
5.1- Exibir mensagem de aviso
5.2- Retornar para item 5
Grupo e subgrupo no cadastrado
7.1- Exibir mensagem de aviso
7.2- Retornar para item 7

Nome = Cadastrar Cliente


Pr-condio = No ter cliente cadastrado
Ps- condio = Cliente cadastrado

1- Solicitar CPF do cliente

Fluxo principal

2- Verificar se existe cliente cadastrado


3- Criar novo cliente
4- Solicitar demais dados do cliente
5- Solicitar cdigo do vendedor
6- Incluir cliente na base de dados
Cliente j cadastrado
2.1- Estender consulta Cliente
2.2 - Retornar para item 1

Fluxo Secundrio

59

Nome = Emitir pedido de venda


Pr-condio = Ter cadastro do cliente
Ter cadastro do produto
Ps- condio = Pedido de Venda lanado
Fluxo principal

1- Solicitar dados para o cabealho do pedido


2- Verificar se existe cliente cadastrado

3- Solicitar dados para o corpo do pedido (itens do pedido)


4- Verificar se existe produto cadastrado
5- Solicitar dados para o rodap do pedido
6- Incluir pedido na base de dados
7- Imprimir pedido de venda
8- Enviar e-mail com o pedido de venda

Cliente no cadastrado

Fluxo Secundrio

2.1- Exibir mensagem de aviso


2.2 - Retornar para item 2
Produto no cadastrado
4.1- Exibir mensagem de aviso
4.2- Retornar para item 4
E-mail invalido
8.1- Exibir mensagem de erro
8.2- Retornar para item 8
Nome = Consultar Pedido de Venda
Pr-condio = Ter cadastro do cliente
Ter cadastro do fornecedor
Ter cadastro do produto
Ter cadastro do grupo e subgrupo de produtos
Ter cadastro do vendedor
Ps- condio = Consulta executada

60
Fluxo principal

1- Solicitar o cdigo ou nome do cliente


2- Verificar se existe cliente cadastrado

3- Solicitar alguns filtros para a consulta


Fluxo Secundrio

Cliente no cadastrado ou no fez pedido de venda


2.1- Exibir mensagem de aviso
2.2 - Retornar para item 2

61

5 CRIAO DAS INTERFACES COM BASE NOS CASOS DE USOS

Neste captulo, sero apresentadas as interfaces projetadas com base no


caso de uso criado no captulo 4. As tcnicas utilizadas para a criao destas telas,
esto de acordo com os conceitos citados nos captulos 2 e 3.
O layout e a forma de padronizao descritas neste captulo, no devero ser
entendidos como a nica forma de padronizao para ser aplicada em todos os
projetos de interface, mas este estudo serve apenas como um guia para a criao de
projetos que venham a ser desenvolvidos.
Para facilitar a leitura e o entendimento do leitor, as interfaces sero
apresentadas por meio de tpicos, sendo organizados separadamente pelas principais
caractersticas que constituem o projeto de interface com o usurio.

5.1 INTERFACES PROJETADAS

As Figuras 33 a 37 constituem as telas do mdulo comercial abordado no


cap tulo 4, dividindo-se em cadastro de cliente, fornecedor, produto, lanamento de
pedido de venda e consulta vendas/clientes.

5.1.1 CONSISTNCIA
A Figuras 33 a 37 representam o princpio da consistncia da interface com o
usurio. De acordo com Sommerville (2003), este princpio significa que os menus,
botes, etc devem seguir a mesma padronizao, tendo de forma similar o mesmo
formato em todas as telas do sistema.
Sommerville (2003) tambm afirma que consistncia aplica-se a padres
existentes em determinadas funes que a interface possa oferecer, como exemplo a
funo de salvar um registro em um aplicativo, se em uma tela qualquer para realizar
esta funo, deve-se fazer de uma maneira especificadamente, em outras telas do
sistema a funo de salvar um registro deve seguir a mesma forma de execuo da

62

interface anterior, ou seja, seguindo a mesma padronizao na execuo de funes


que so oferecidos pela interface. Utilizando este conceito de consistncia no projeto
de interface, diminui-se o tempo de aprendizado do usurio, ou seja, os conhecimentos
adquiridos em uma tela do sistema ser reaproveitado em outras partes do programa.

Figura 33 Cadastro de Cliente

Figura 34 Cadastro de Fornecedor

63

Figura 35 Cadastro de Produto

Figura 36 Pedido de Venda

64

Figura 37 Consulta Cliente / Vendas

Nesta primeira representao, nota-se a aplicao do conceito de consistncia


principalmente pela barra de ferramentas inferior (Figura 38), onde se localizam todos
os procedimentos bsicos de operao do usurio, como as funes de voltar e
avanar registros, excluir e salvar informaes no banco de dados, etc.

Figura 38 - Barra de ferramentas utilizando consistncia

Outra representao da utilizao de consistncia, atravs dos botes de


operao (Figura 39), independente da interface que o usurio esteja usando, as
funes e as formas de representaes sero as mesmas, facilitando assim sua
memorizao em utilizar a interface.

Figura 39 Boto utilizando consistncia

65

A Figura 40, apresenta a padronizao do layout entre as telas do sistema,


tendo como exemplo as telas de consulta cliente e consulta fornecedor. Nota-se nesta
figura, que o projetista procurou manter a padronizao dos botes de comandos e a
posio dos objetos que constituem o contedo da interface, tais como as posies
dos campos, rtulos de textos etc.

Figura 40 Padronizao entre as telas

5.1.2 UTILIZAO DE SIGNOS


Como apresentado no captulo 3, outro recurso fundamental para a criao de
interfaces a forma de comunicao que a mesma possa fazer com o usurio. Ela
deve ser desenvolvida de forma simples e natural, fazendo com que a comunicao
entre usurio e sistema se torne confivel, de fcil entendimento e compreenso, e que
no cause incertezas nas aes que o usurio possa vir a executar.
A Figura 41 mostra como o projetista expressa atravs da interface os
conceitos associados aos tipos de dados utilizados. Nesta figura esto contidos dois
grupos distintos: Tipo de Pessoa (Tela de Cadastro de Fornecedor), que foi criado
pelo componente Radio-Button e Compras (Tela de consulta vendas/clientes), recurso
este.criado.pelo.componente.check.list.

66

Figura 41 Utilizao de signos

Quando a interface apresenta este tipo de componente, Radio Button e Check


List, estes identificam ao usurio final as possibilidades distintas de seleo que
existem entre as duas opes, sendo que a primeira somente fornece recurso de
selecionar uma nica opo, j a outra fornece recurso de selecionar mais de uma
opo simultaneamente. Note tambm que a utilizao destes recursos, associa-se
com a idia de padronizao de componentes com o sistema operacional Windows,
aplicando-se assim o conceito de consistncia, devido associao utilizada com o
padro usado pelo sistema operacional. A Figura 42, mostra um exemplo deste mesmo
recurso, sendo utilizado pelo sistema operacional Windows.

Figura 42 Exemplo de componentes Chek List e Radio Button

67

5.1.3 ORIENTAO AO USURIO


As Figuras 43 e 44, apresentam uma das principais funes que uma interface
possa oferecer ao usurio com relao orientao das funcionalidades a serem
executadas em um determinado momento. Qualquer layout desenvolvido, deve
sempre orientar o operador do sistema, deixando-o informado sobre qualquer
operao que ele possa executar em qualquer parte do sistema.

Nome Fantasia
Aaaa

Figura 43 Resultado de aes realizadas pelo usurio

Figura 44 Orientao ao usurio por meio de mensagens

68

A Figura 45, representa a mesma orientao ao usurio utilizada na Figura 44, a


diferena que o resultado da orientao se encontra na barra de status, indicando o
estado do aplicativo no instante de executar a funo de salvar registro.

Figura 45 - Orientao ao usurio por meio do estado do aplicativo

Na mesma barra de ferramentas apresentada na Figura 45, nota-se outro tipo


de orientao ao usurio com padronizao baseada no sistema operacional Windows.
A Figura 46 apresenta o exemplo da utilizao de dicas de tela, quando se posiciona o
ponteiro do mouse sobre os botes de operao existentes na barra de ferramentas da
interface.

Figura 46 - Orientao ao usurio por meio de dicas sobre botes

5.1.4 MESTRE DETALHE (MASTER DETAILS)


A Figura 47, representa o relacionamento de vrias informaes vindas de
tabelas distintas do banco de dados, reunindo tudo em uma s janela, facilitando a
interao e a forma de visualizao das informaes. Este recurso recebe o nome de
Mestre Detalhe (Master Detail ). Para o usurio final, tem-se a idia de que tudo est
centralizado em apenas uma janela representando uma s informao. Geralmente,
os dados que aparecem na parte superior, so dados vindos da tabela principal,
chamada de tabela mestre. J as informaes apresentadas na parte central ou inferior
da tela, geralmente so vindas de tabelas, caracterizadas como tabela detalhe.

69

Figura 47 Interface utilizando Mestre-Detalhe

Informaes vindas de
tabelas distintas

5.1.5 METFORAS
A Figura 47, tambm representa outro recurso de suma importncia
para o bom projeto de interface. A figura mostra recursos de associaes, que facilitam
a memorizao do usurio, ajudando-o no reconhecimento de determinadas funes
do sistema, atravs da utilizao de metforas. A Figura 48 mostra o exemplo de
metfora com manipulao de funo, sendo aplicado na tela de lanamento de
pedidos.

70

Figura 48 Utilizao de Metfora c/ manipulao de funo

Quando o usurio aciona o boto com as (...), surgir uma outra tela para
completar sua operao, no caso da Figura 48 a funo seria de carregar a tela de
consultar estoque por produto.
A Figura 47 tambm est utilizando outro recurso de associao a interface,
caracterizando-se na utilizao de metfora com manipulao de dados, ou seja, a
tela de lanamento de pedidos foi desenvolvida com base no lanamento que era
realizado manualmente pelo vendedor, assemelhando-se ao seu objeto de trabalho
da vida real. Tal recurso, tambm se encaixa no conceito de objetividade, ou seja, a
interface ser cada vez mais objetiva quanto mais prxima for da realidade do que o
usurio vive.

71

5.1.6 RECURSO DE AJUDA VISVEL AO USURIO


Uma interface bem desenvolvida, deve oferecer tranqilidade e confiana ao
usurio, quando o mesmo se defronta com uma mensagem de erro ou algo lhe passa
incerteza do que esteja fazendo, eles procuram por meio da interface algum recurso
que possa lhe dar apoio e ajuda. A Figura 49 mostra atravs da barra de ferramentas
um boto com a opo de ajuda.

Figura 49 Recurso de Ajuda, visvel ao usurio

5.1.7 FACILIDADE DE RECUPERAO VISVEL AO USURIO


Alm de a interface oferecer recursos de ajuda, etc ela tambm deve
apresentar meios que possam facilitar a recuperao de dados, atravs de botes
ou teclas de atalhos. De acordo com Sommerville (2003), a interface deve sempre
permitir a recuperao de dados a partir de erros cometidos pelos operadores do
sistema.
Se a interface no apresentar recursos de recuperao, o usurio poder
ficar inibido em realizar novas operaes em partes do sistema que ele no
conhea. importante a interface fazer com que ele aprenda novos recursos atravs
de tentativas e erros, assim ele ser mais confiante e perder o medo de causar
possveis estragos com relao aos dados do sistema. A Figura 50, mostra um tpico
boto

de

desfazer

operao,

criado.em.cada.interface.deste.projeto.

Figura 50 Recurso de Recuperao, visvel ao usurio

72

5.1.8 LAYOUT BEM DEFINIDO


Todo e qualquer projeto de telas para computador, deve apresentar seu layout
o mais fcil e simples possvel para a identificao das funcionalidades do sistema,
sendo que quanto mais carregado for, mais difcil ser a visualizao e entendimento
por parte de quem estiver utilizando a interface. A Figura 51 mostra a interface com o
layout bem carregado, dificultando desta forma leitura do usurio.

Figura 51 Layout carregado

A Figura 52 representa a mesma interface mostrada na Figura 51, a diferena


que ela possui o layout mais organizado e de fcil leitura por parte do usurio.

73

Figura 52 Layout com os campos mais organizados

Outra caracterstica de um bom layout desenvolvido, utilizar as mesmas


particularidades de interfaces que o usurio j est acostumado a trabalhar, como o
ambiente do Windows (Microsoft

), etc.

Recursos familiarizados ao usurio, facilitaro seu entendimento e o


aprendizado ser mais rpido, passando mais segurana e preciso durante sua
interao com a interface do sistema.
A Figura 53 (opo da tela de Cadastro de Produtos), apresenta um recurso
bem semelhante ao utilizado pelo Windows. Quando o usurio aciona o boto de Abrir
imagem..., carregada uma tela com as mesmas caractersticas da tela de abrir
imagens do sistema operacional.

Figura 53 Utilizao de componentes semelhantes ao sistema operacional

74

A Figura 54 representa outra semelhana do layout desenvolvido com o


sistema operacional. Quando o usurio aciona o boto imprimir (opo da tela
Consulta Ficha Cliente / venda), carregada uma janela de imprimir relatrio, est
apresenta as mesmas caractersticas da tela de impresso utilizada pelo Windows.

Figura 54 Utilizao de componentes Microsoft

Este captulo apresentou um projeto contendo diversas interfaces, sendo todas


voltadas a garantir uma simples e fcil utilizao. Quando se faz um projeto de
interface com base no modelo mental do usurio, inicialmente deve-se saber o que ele
realmente precisa para ajud-lo em suas tarefas do dia a dia, buscando sempre a
desenvolver um layout amigvel e de fcil interao, passando satisfao, confiana
nas operaes e nas tomadas de decises
computador.

para quem utiliza o programa de

75

6 CONCLUSES

Neste captulo so apresentadas as concluses obtidas a partir da pesquisa


previamente realizada. E para finalizar so descritas as propostas e sugestes de
trabalhos futuros que possam ser realizados de acordo com o desenvolvimento deste
trabalho.
CONSIDERAES FINAIS
Este trabalho faz uma anlise das diversas formas e tcnicas para o bom
desenvolvimento do projeto de interface com o usurio, apresentando um pequeno
projeto de interface com os principais conceitos para a criao de telas para
programas de computador.
Foram apresentadas diferentes maneiras de se obter qualidade durante a
criao do layout das telas de um sistema, seguindo conceitos e diretrizes para a
concluso do mesmo, tendo como resultado final satisfao de quem ir utilizar o
programa computacional.
Este estudo reuniu, em um s lugar, vrios conceitos de diversas
metodologias de desenvolvimento de projeto de interface. O trabalho rene todo o
estudo realizado em forma de guia de consulta, que acompanha as fases para a
criao do projeto, permitindo que o mesmo seja seguido facilmente pelo leitor.
O projeto de interface desenvolvido neste trabalho, foi baseado em modelos
voltados a interao do usurio, com base na teoria da engenharia em software,
cognitiva e semitica, conforme detalhado com capitulo 3.
Conseguir desenvolver interfaces fceis de se usar, que consiga prever as
aes dos usurios e causar o mnimo de surpresa durante suas operaes, situaes
assim e entre outras so consideras tarefas nada fcil, comparado pela maioria dos
projetistas como um desafio a ser conquistado, principalmente pela diversidade de
usurios que existem hoje.
Conforme analisado no capitulo 3, antes de se iniciar um projeto de interface,
deve-se primeiramente diagnosticar qual a necessidade do usurio, deve-se

76

compreender o seu modelo mental, ou seja, o que ele pensa em relao as suas
tarefas dirias em serem executadas em um sistema informatizado, como ser sua
interao com este sistema, etc. Atravs destas perguntas entre outras, que o
projetista de interface conseguir absorver com preciso, quais so essas
necessidades, e por fim dar incio ao projeto como um todo, passando por vrias
etapas, at conseguir chegar ao projeto final, que a interface do sistema pronta e
rica em recursos que vo ajudar a executar suas tarefas no seu dia a dia, tornado-se
assim, o principal canal de comunicao entre o ele e o sistema computacional.
O projeto de interface desenvolvido no captulo quatro, mostrou que
fundamental para qualquer projeto sendo pequeno ou no, que no basta apenas criar
algumas janelas para interagir com o usurio de qualquer maneira e pronto, e depois
deixar por conta da pessoa que esta utilizando o sistema se adaptar com a tela que foi
desenvolvida tornando seu trabalho confuso e irritante a medida que ele se interage
com a interface. Com este trabalho, mostra-se claramente que cada projeto que for ser
desenvolvido, deve-se projeta-lo para se adaptar conforme as exigncias do usurio e
no que o usurio se adapte a interface.
Atravs de conceitos detalhados entre os captulos 2, 3 e 4, o leitor encontrar
uma diversidade muito ampla com relao ao assunto em como desenvolver um
projeto de interface. J que este um assunto novo, no muito comum na literatura,
este trabalho procurou apresentar de forma precisa e simplificada vrios conceitos
utilizados por uma das melhores empresas do ramo de desenvolvimento de interfaces,
a Microsoft.
Por meio de vrios exemplos ilustrativos, foram apresentados as principais
caractersticas de interfaces bem desenvolvidas, com todos os seus requisitos para
manter uma perfeita comunicao entre homem e computador, tornando-se a interface
a embalagem principal do software a ser comercializado.

Propostas de trabalhos futuros


Como este trabalho no realizou pesquisa de campo, no tendo nenhuma
participao de usurios reais para o desenvolvimento do projeto de interface, uma boa
proposta para complemento do mesmo, seria em desenvolver um projeto como este,
tendo em prtica o trabalho de campo, com participao direta de usurios, desde o

77

momento da entrevista at a entrega das interfaces validadas e prontas para a


utilizao.
Outra proposta, fazer um estudo detalhado de ferramentas (software)
voltadas exclusivamente ao desenvolvimento de interface.

78

REFERNCIAS BIBLIOGRFICAS

PINHO, M. Realidade Virtual Viso Tridimensional. 1.ed. Rio Grande do Sul:


PUCRS. 15 p. Disponvel em

http://www.inf.pucrs.br/~pinho/TACCII/Aula3-Visao3D.pdf. Acesso em: 09 Mar de


2006.

PROJETO de interfaces. Processo de desenvolvimento da interface. 32 p.


Disponvel em http://www2.uepa.br/paulolima/disciplinas/ufpa/IHCUFPA2004-P2.pdf.
Acesso em: 02 Dez de 2005.
RIBEIRO, C; CHIARAMONTE, M. Validao experimental de recomendaes
grficas bsicas em interfaces de aplicaes educacionais. Santiago, 2003. p. 8

Disponvel

em

http://www.tise.cl/archivos/tise2003/papers/validacao_experimental_de_recomendacoes_graficass.pdf
. Acesso em: 03 de Dez de 2005.

SILVA, ANDR. C et al. Relacionamento de Padres de Engenharia de Software


e de Interao Humano-Computador para o Desenvolvimento de Sistemas
Interativos. p.15. Disponvel em
http://sugarloafplop2005.icmc.usp.br/papers/9692.pdf. Acesso em: 17 de Nov de
2005.
SOFTWARE, Instrues para um computador que criam signos. p. 11.
Disponvel em http://www.dimap.ufrn.br/~jair/piu/slides/cap1.pdf. Acesso em: Acesso
em: 17 de Nov de 2005.
PIRES, S; SIQUEIRA, I. Padronizao de Interfaces para Sistemas de
informao. Goinia. p. 9. Disponvel em: http://www.alfa.br/revista/pdf/6.pd. Acesso
em: 17 de Nov de 2005.
INTERFACE de Usurio para Mltiplos Dispositivos. Disponvel em:
http://www.espacoacademico.com.br/045/45amsf.htm. Acesso em: 17 de Nov de
2005.
O PAPEL da Diversidade Humana no Design de Interfaces. Disponvel em:
http://www.espacoacademico.com.br/032/32amsf.htm. Acesso em: 17 de Nov de
2005.
USER-CENTERED Design Principles. Disponvel em:
http://msdn.microsoft.com/library/default.asp?url=/library/en-s/dnwue/html/ch02b.asp.
Acesso em: 30 de Nov de 2005
A BELA E A FERA: Aplicando Interface Grfica em Sistemas Legados.
Disponvel em: http://www.celepar.gov.br/batebyte/edicoes/2000/bb100/abela.html.
Acesso em: 10 Set de 2005.
SABATINI, R. Realidade Virtual no ensino Mdico. Disponvel em:

79

http://www.informaticamedica.org.br/informaticamedica/n0202/sabbatini.htm. Acesso
em: 09 de Mar de 2006.
SOUZA, C et al. Projeto de Interfaces de Usurio. Perspectivas Cognitivas e
Semiticas. Rio de Janeiro. p. 46. Disponvel em:
http://www.eesc.usp.br/nomads/tics_arq_urb/JAI_Apostila.pdf. Acesso em: 23 de Jan
de 2006.
ENGENHARIA de Software. Disponvel em:
http://www.ime.usp.br/~anderson/ES2.ppt. Acesso em: 23 de Jan de 2006.
PROTOTIPAO de Software. USP. p. 41. Disponvel em:
http://beast.dcce.ibilce.unesp.br/~ines/cursos/eng_soft/aula07.pdf. Acesso em: 14 de
Mai de 2006.
PROJETO de Interface com o Usurio. USP. p. 45. Disponvel em:
http://beast.dcce.ibilce.unesp.br/~ines/cursos/eng_soft/aula11.PDF. Acesso em: 14
de Mai de 2006.
VERIFICAO e Validao. USP. p. 34. Disponvel em:
http://beast.dcce.ibilce.unesp.br/~ines/cursos/eng_soft/aula12.PDF. Acesso em: 14
de Mai de 2006.
FILHO, A. O papel de protagonistas no desenvolvimento de sistemas interativos.
Disponvel em: http://www.espacoacademico.com.br/047/47amsf.htm. Acesso em: 23
de Jan de 2006.
FILHO, A. Interface de Usurio para Mltiplos Dispositivos: Questes de
Desenvolvimento e Tendncias de Pesquisa
Disponvel em: http://www.espacoacademico.com.br/045/45amsf.htm. Acesso em: 23
de Jan de 2006.
FILHO, A. Percepo Humana na Interao Humano-Computador
Disponvel em: http://www.espacoacademico.com.br/025/25amsf.htm. Acesso em: 23
de Jan de 2006.
FILHO, A. O Papel da Diversidade Humana no Design de Interfaces
Disponvel em: http://www.espacoacademico.com.br/032/32amsf.htm. Acesso em: 23
de Jan de 2006.

PINNA, C et al. Uma Abordagem para Projeto da Interface e da Navegao de


Aplicativos Web orientada pelo Processo de Negcio. So Paulo. p. 10. Disponvel
em: http://www.univates.br/sicompi/wcompi2003/11-pinna-souza-arakaki.pdf. Acesso
em: 23 de Jan de 2006.

80

ENGENHARIA de Software. Projeto de Software. Disponvel em:


http://www.classilages.com.br/rodrigo/software/aula5.ppt. Acesso em: 22 de Jan de
2006.
O PROJETO de sistemas interativos envolve atividades bastante complexas...
.Rio de Janeiro. p. 4. Disponvel em:
http://www2.dbd.puc-rio.br/pergamum/tesesabertas/0115643_03_cap_01.pdf.
Acesso em: 22 de Fev de 2006.
SOMMERVILLE, Ian. Engenharia de software. Traduo de Andr Maurcio de
Andrade Ribeiro; reviso tcnica Kechi Hirama. 6.ed. So Paulo: Addison Wesley,
2003. 592 p. Ttulo original: Software Engineering.
PRESSMAN, Roger S. Engenharia de software.Traduo de Jos Carlos Barbosa
dos Santos; reviso tcnica Jos Carlos Maldonado, Paulo Csar Masieiro, Rosely
Sanches. So Paulo: Makron Books, 1995. 1056 p. Ttulo original: Software
engineering.

PROJETO de Interface com Usurio para Programadores. Disponvel em:


http://brazil.joelonsoftware.com/vibook/chapters/1.html. Acesso em: 10 de Set de
2005.
O CONJUNTO de cartes perfurados representou um marco na programao.
Disponvel em: http://pt.wikiedia.org/wiki/historia_da_computacao.html. Acesso em:
16 de Mar de 2006.
PROJETO de Interface com Usurio para Programadores. Disponvel em:
http://brazil.joelonsoftware.com/uibook/chapters/8.html. Acesso em: 10 de Set de
2005.
MODELOS e Formalismos para a Engenharia Semitica de Interfaces de
Usurio.
Rio de Janeiro. p. 205. Disponvel em:
http://www.serg.inf.puc-rio.br/serg/pub/jair/tese_jair.pdf. Acesso em: 11 de Abr de
2006.

AVALIAO da interface de um aplicativo computacional atravs de teste de


usabilidade, questionrio ergonmico e anlise grfica do design. Santa Catarina.
p. 146. Disponvel em:
http://teses.eps.ufsc.br/defesa/pdf/14001.pdf . Acesso em: 11 de Abr de 2006.

81

FILHO, Wilson. Engenharia de Software: Fundamentos, Mtodos e Padres.


2.ed. Rio de Janeiro, Editora LTC, 2001. p. 602
ORTALEZA, J et al. Proceedings - Symposium On Human Factores in Computer
System. SBC, Fortaleza, Ceara, 2002. 405 p.
TRYING to read what is in telnet window. Disponvel em:
http://members.cox.net/amuk/as400.JPG. Acesso em: 10 de Nov de 2005.
WIRELESS touch screen control. Disponvel em:
http://www.jdstechnologies.com/images/PocketPCfront1.jpg. Acesso em: 10 de Nov
de 2005.
INTRODUCTION TO Electronic Classrooms. Disponvel em:
http://www.columbia.edu/acis/facilities/classrooms/intro/touchscreen.gif
Acesso em: 10 de Jan de 2006.
Departamento de Estatstica. Disponvel em:
http://www.de.ufpb.br/~ronei/pyr_maia.gif. Acesso em: 10 de Jan de 2006.

Vous aimerez peut-être aussi