1.

Conceitos Bsicos Desde os anos 90 quando os sistemas de software passaram a ser disponibilizados para um publico maior, houve uma necessidade de se preocupar coma as interfaces dos sistemas. Muitos profissionais no davam a devida importncia para a rea, pois na maioria dos sistemas at ento eram fechados. !om isto se come"ou a ser desenvolvidas aborda#ens, m todos, t cnicas e ferramentas para au$iliar na constru"o de interfaces intuitivas e padronizadas, ho%e em dia #rande parte da produ"o de software se concentra nessa ideia, uma vez que o usurio s& se comunica com um computador atrav s de uma interface favorecendo um novo campo de estudos denominado 'ntera"o (omem !omputador, esta nova rea permite estudar o desi#n das interfaces com usurio em #eral.)e%amos al#uns conceitos so a base da disciplina de '(M tais quais* Interao: 'ntera"o si#nifica a atua"o de um a#ente em outro, a"o entre indiv+duos distintos e comunicveis atrav s de um padro. Atividade: ,tividade representa a a"o e faculdade de operar, desta forma atividade suporta vrias a"-es, mas no restrita a elas. Interatividade: 'nteratividade um processo que favorece a participa"o ativa de a#entes ou su%eitos, quando associada a computa"o interatividade pode ser descrita como o dilo#o entre humano computador. 1.1. Interface ,s interfaces ho%e em dia so descritas como %anelas, +cones e barras de rola#em. .ara aumentar o n+vel de abstra"o decorrente dessa intera"o entre humano interface, foram inclu+dos aspectos co#nitivos e emocionais no processo de desenvolvimento de interfaces. ,s interfaces com usurios so formadas por apresenta"-es de informa"-es de dados, de controles de comandos, de estrat #ias, enfim comando todas intera"-es que so permitidas fazer com um computador, influenciam diretamente na produtividade entre outros. 1.2. Importncia de um projeto de interfaces , e$peri/ncia humano computador pessoal e 0nica, portanto cada desenvolvedor ter uma ideia acerca de um pro%eto de interfaces e isso provoca uma despadroniza"o na rea de interfaces, sendo que para al#uns usurios elas se tornam complicadas e dif+ceis. , modela#em e constru"o de um pro%eto de interface considerada de alta importncia. 1m dos conceitos que levaram a esta importncia que ficaria muito caro se treinar pessoas especificamente para cada tipo de interface, para tal e$istem padr-es que au$iliam na percep"o de componentes etc. !omo um e$emplo o t&pico anterior, deve2se ser simples mas padronizada de modo a prover descri"-es adequadas para as fun"-es, validar erros de usurios pois atrav s delas que o usurio se intera#e com todo o sistema. 1.3. Mu tidiscip inaridade em I!C , rea de '(! compreende diversos conte0dos associados ao estudo de interfaces. 3stes conte0dos compreendem diferenciar fatores como* 4e#uran"a, efici/ncia, produtividade, aspectos or#anizacionais, comportamentais. )e%amos al#uns conte0dos importantes da rea*

Ci"ncia da Computao: ,%uda a e$plorar todo potencial das possibilidades tecnol&#icas, provendo ferramentas e solu"-es de #erenciamento, implementa"o, prototipa"o entre outras. #sico o$ia Co$nitiva: 3studa a percep"o, aten"o, mem&ria e aprendiza#em entre outros. 3m termos #erais ela estuda as capacidades e limita"-es humanas. #sico o$ia %ocia : 3studa a natureza das causas do comportamento humano no conte$to social. 3m termos #erais ela estuda o impacto que determinado comportamento pode causar em um #rupo. #sico o$ia &r$ani'aciona : 3studa as estruturas or#anizacionais e o impacto que determinados componentes causa. 3ntende aspectos como* poder, comple$idade, tamanho, efici/ncia, flu$o de informa"-es, t cnicas de trabalho etc. (atores )umanos e de *r$onomia: .rov/ artefatos para se modelar diferentes ambientes de trabalho. Ma$imiza a se#uran"a, efici/ncia e performance em linhas #erais estuda o impacto que a intera"o causa na f+sica dos humanos. Inte i$"ncia Artificia : .rocura imitar a inteli#/ncia humana por meios computacionais. 5 uma rea da ci/ncia da computa"o. *n$en)aria: 6eferente a associa"o de en#enharia de software. 1.+. #rinc,pios de -esi$n

,l#uns princ+pios bsicos de desi#n foram propostos por estudiosos da rea de '(! de modo a fornecer a intera"o homem computador. .isi/i idade: !onsistem em dei$ar apenas as coisas necessrias vis+veis. 7eralmente o que torna um sistema dif+cil de operar a falta de visibilidade de suas capacidades. Bom Mode o Conceitua : 4em um bom modelo conceitual fica dif+cil de se prever atividades inesperadas no produto, de forma que isso influ/ncia diretamente diversos fatores. (eedBac0: 8uando o assunto desenvolvimento de software o feedbac9 sempre bem aceito. 5 um princ+pio bsico e #eral na rea da computa"o. 2. (atores !umanos e de Interatividade .ara se desenvolver uma interface de qualidade preciso que se responda al#umas quest-es de forma prtica tais quais* quem o usurio: ; o que faz o usurio intera#ir com o sistema: ; como este usurio interpreta a informa"o: ; o que o usurio espera do sistema: <a rea de '(! o usurio sempre est no topo das aten"-es devido a isso os fatores humanos sempre esto em foco, pois quando no levamos os princ+pios, re#ras e conceitos de '(M um sistema quase sempre ta$ado como no2ami#vel. 2.1. Mecanismos de #ercepo !umana , percep"o humana al#o muito comple$o, diversas t cnicas se beneficiam deste termo para prover fatores referentes a* .ro$imidade, similaridade, continuidade, simetria para a%udar a percep"o de forma condicionada durante a intera"o humano computador. %istema #erceptua : 4e baseia no transporte das emo"-es atrav s de sensores atrav s do corpo, e as transforma em representa"-es cab+veis ao nosso cer bro.

%istema Motor: 4e resolve atrav s de impulsos nervosos que ocorrem ap&s a tradu"o do pensamento baseado em m0sculos voluntrios e padr-es, meio que um refle$o. %istema Co$nitivo: =em a fun"o de conectar entradas do sisteme perceptual, para as sa+das corretas do sistema motor, en#loba o aprendizado, as mem&rias de curta e lon#a dura"o. 2.2. Mode os Mentais

Modelos mentais so representa"-es ima#inrias referentes a uma realidade descrita, so criadas temporariamente na mem&ria humana. 4o modelos incompletos devido a limita"-es nos mecanismos de percep"o e co#ni"o humano. 3ste conte$to importante pois vale lembrar que uma interface deve* se adaptar aos diversos tipos de modelos mentais que podem vir a acarretar o uso em #rande escala de um produto. .odemos dividir este modelos em duas cate#orias* Mode o menta *strutura : 4ubstitui al#o do mundo real, o usurio vivencia a e$ecu"o de um sistema e interpreta por dedu"o, Mode o menta funciona : 6eferente ao conhecimento adquirido anteriormente dominando produtos similares. 2.3. Componentes de Interao !umano Computador >s componentes de interfaces homem computador, so a#rupados por reas do conhecimento formando modelos de trabalho, so or#anizados a partir de dilo#os, ob%etos de intera"o, sistemas de si#nificados. -i o$os: 4o sequ/ncias de intera"o entre homem e sistema, as fun"-es de dilo#os definem as classes, e dei$am clara a inten"o do sistema. 1. Ao: um componente elementar destinado a disparar tarefas de sistema. 4endo que o sistema recebe a a"o e devolve o feedbac9 requerido. 2. 1arefa: 5 uma sequ/ncia de a"-es ou inten"-es. Deve2se nesse ponto pensar em mostrar os erros ocorridos em uma tarefa de forma a se encai$ar aos diversos tipos de percep"o e conhecimento. 2.3.+. &/jetivos de Interao 5 de parte do software que recebe a requisi"o e retorna ao usurio uma hierarquia onde o usurio possa intera#ir. .ode se basear em metforas de ob%etos reais para ob%etos computacionais, #eralmente definido em primeiro plano, plano de fundo e bordas de uma interface, assim o ob%etivo deve ficar bem vis+vel e se utilize de sistemas de si#nificados e si#nificados primitivos para melhor or#aniza"o e e$presso de seus ob%etivos.. 2.3.2. %istemas de %i$nificado =em a ver com simbolo#ia e$ibida ao usurio de forma que esta simbolo#ia se%a percept+vel pelo sistema co#nitivo humano e que realize todas as fun"-es definidas. !ompreendem detalhes usados para compor uma interface bem como* icones; c&di#o de formas; denomina"-es; abreviaturas; c&di#os de cores; c&di#os de te$tura; intermit/ncia visual entre outros.3stes detalhes formam o #eral de visualiza"o sendo que tem a

obri#a"o de se#uir as re#ras de cada detalhe de modo a beneficiar o usurio com uma melhor disposi"o da informa"o. 2.3.3. %istemas #rimitivos 4e refere a formas de se e$pressar ob%etivos de intera"o que se%am percept+veis ao sistema co#nitivo. 3n#lobam um con%unto dos artefatos fundamentais para a constru"o de uma interface, tais quais* as cores; as fontes; as bordas; os arran%os ou la?outs; os fundos ou bac9#rounds; as formas sensoriais; 3. A Comunicao !umano Computador e -esi$n de Interfaces > processo de desi#n de interfaces tem em vista fatores humanos para a constru"o de interfaces, % os processos de desi#n relacionados a '(! so baseados em modelos de ciclo de vida clssicos, que so usados no desenvolvimento de softwares, tais quais so ori#inrios da rea de en#enharia de software. (o%e em dia e$istem diversos modelos espec+ficos para au$iliar o desenvolvimento de interfaces. 4endo que quando se trata de desi#n al#umas outras reas e quest-es come"am a ser levantadas e al#uns modelos podem ser aplicados ao estudo do desi#n. 3.1. *n$en)aria Co$nitiva 3 en#enharia co#nitiva pode ser descrita como uma esp cie de ci/ncias aplicadas, que tenta aplicar o conhecimento co#nitivo humano a constru"o de interfaces. <esta rea devemos ter os se#uintes ob%etivos* 3ntender os princ+pios fundamentais @s a"-es humanas relevantes ao desi#n e intera"o com o mesmo. !riar sistemas a#radveis de se usar, indo al m dos aspectos fundamentais de uso.

, en#enharia co#nitiva considera relaciona os tr/s tipos de conhecimento* de desi#n; de pessoas; de comunica"o e intera"o com o mundo computacional. Desta forma ela considera diversos fatores comuns entre os tr/s mundos. 3.2. Manipu ao -ireta 4o interfaces onde no h opera"-es a serem escolhidas, de forma que o 0nico conhecimento requerido para sua manipula"o o dom+nio da tarefa a ser e$ecutada. 3las usam um sistema de opera"o na qual, baseado em a"-es manuais, ao inv s do envio tradicional de instru"-es via teclado. 3.3. Mode os de -esi$n de %oft4are 1m desi#n de software, chamado de pro%eto de software, relaciona as formas de se fazer determinada tarefa com as fun"-es a serem e$ecutadas criando assim hierarquias de tarefas; 3m um processo de desi#n em en#enharia de software devemos ter em mente al#uns princ+pios* > resultado do desi#n um produto; > produto derivativo de e$plica"-es formais e informais de parte dos clientes. ,ssim podemos caracterizar al#uns modelos de en#enharia de software quando ao desi#n de interfaces. Mode o Cascata: > modelo cascata caracteriza uma viso tradicional em en#enharia de

software de forma que se%am reproduzidas representa"-es lineares e sequenciais. <o muito 0til pois se torna meio comple$o a ponto de se tornar sua manuten"o e modifica"o meio que invivel, al m do fato de no mant m uma boa comunica"o com os interessados. Mode os *spira : > modelo espiral mais abran#ente do que o modelo cascata sendo poss+vel praticar altera"-es e manuten"-es de forma mais prtica, al m disso introduz a ideia de prototipa#em e avalia"o, proporcionando um maior controle sobre as atividades a uma maior viso dos requisitos de usurios. Mode os *stre a: > modelo estrela parte dos m todos e t cnicas do modelo cascata por m ele prop-e a ideia de se manter um controle de testes e avalia"o no centro da cadeia de atividades, sendo que cada passo do pro%eto se%a avaliado antes de se partir para um outro. +. *sti os de Interao >s estilos de intera"o so cole"-es de ob%etos de interfaces e t cnicas associadas ao desenho de componentes de intera"o entre homem e computador. !ompreendem interfaces de manipula"o direta, podemos as principais como sendo* linha de comando, %anelas, cardpios, formulrios, interfaces entre outros. 3nfim os estilos so componentes que permitem a manipula"o de informa"-es na tela de um ambiente computacional. 5in)a de Comando: 4o %anelas simples, #eralmente em modo te$to, um bom e$emplo so as %anelas dos. 6ane as 74indo4s8: Aanelas so componentes que fornecem espa"o para intera#irmos com informa"-es e outros componentes. .odem ser primrias, secundrias, divididas etc. .ara se pro%etar uma %anela devemos ter em mente* 3vitar o e$cesso de %anelas nos aplicativos. .ermitir redimensionamento. 3$ibir %anelas de formas e modelos padro. 1sar %anelas diferentes para tarefas diferentes.

Cardpios 7menus8: 4o estilos de intera"o onde as informa"-es ou componentes so dispostos em listas, onde o usurio pode intera#ir diretamente com eles. ,l#umas vanta#ens do uso de menus so* 6edu"o na tarefa de memoriza"o humana. Diminuir a di#ita"o de dados. 6edu"o em treinamentos, de forma que as informa"-es ficam dispon+veis de forma prtica.

3$istem diversos tipos de menus onde cada um possu+ uma caracter+stica pr&pria. (ormu rios: 1m formulrio uma %anela contendo campos para que o usurio preencha, um estilo muito utilizado em cadastros, requerimentos entre outras atividades. +.2. Interfaces #ict9ricas

,s interfaces que contenha %anelas, bot-es, +cones, etc. 5 chamada de %anela pict&rica. 3m e$emplo podemos chamar de %anelas pict&ricas* visualiza"o cientifica de dados, banco de dados visual, anima"o, v+deo, multim+dia, realidade virtual. 2. #rojeto de Interfaces <esta fase so definidos os detalhes com que uma intera"o ocorrer, isso dentro do conceito de usabilidade. 3le apoia a base estrutural do sistema a ser constru+do de forma a relacionar os vrios tipos de usurios, suas tarefas e seus ambientes t cnicos, or#anizacionais e sociais. 3$istem muitas aborda#ens de pro%eto de interfaces em '(!, por m duas so mais famosas. 2.1. A/orda$em de #onte , aborda#em de ponte, do in#l/s B=he brid#eC, baseada em uma sequ/ncia de sess-es de pro%etos participativos, que envolve usurios, en#enheiros, pro#ramadores entre outros,ara que se crie uma ponte entre os requisitos e o produto, sendo que ambos se apoiem no desenvolvimento. ( u:o de 1arefa: compreende a primeira etapa, onde todos envolvidos definem um flu$o que baseado nos requisitos, assim pode2se por meio de um dia#rama de blocos definir quais passos so e$ecutados desde o inicio at o fim, de modo a formar uma cadeia de flu$os de tarefas. ,bai$o a ima#em descreve como feita a intera"o entre um sistema de hotel e seus usurios, por meio de tarefas, que correspondem a cada quadrado.

Depois de definir as tarefas que sero e$ecutadas pelo sistema, deve2se analis2 las e transform2las em classes de ob%etos, que correspondem a %anelas que se comp-e da a anlise do dia#rama de flu$o de tarefas, , identifica"o de propriedades, a"-es e rela"-es entre os ob%etos. =odo este processo meio que como uma abstra"o, onde os requisitos so estruturados e modelados provendo dia#ramas para a orienta"o e identifica"o de classes ob%etos atributos m todos entre outros. 2.2. A/orda$em de -esi$n Centra 3sta aborda#em pode ser implementada de tr/s tipos de modela#ens, de usurios e cate#orias relacionadas, estruturas de trabalho e arquitetura de interface. ;surios e Cate$orias <e acionadas: 3ste tipo de modela#em compreende a requisitos das se#uintes cate#orias* usurios finais, consumidores e #erentes, especialistas de dom+nio, mar9etin#, apoio t cnico etc. #ape do usurio: > usurio a%uda a definir um con%unto de necessidades, interesses, e$pectativas, comportamentos, responsabilidades, relacionamentos etc.

3sta modela#em pode dividir usurios em #rupos, sendo que cada #rupo tem n+veis de acesso diferentes, e que prov/ uma esp cie de documenta"o do pro%eto do sistema.

*struturas de 1ra/a )o: 3ste tipo de modela#em compreende conceitos de cenrios, casos de uso e casos de uso essenciais. Cenrios: Descri"o de uma sequ/ncia de eventos em uma situa"o espec+fica. Casos de ;so: Descri"o ou <arra"o de uma intera"o de um usurio com al#uma parte do sistema. Casos de ;so *ssenciais: Descri"o ou <arra"o simplificada, de modo a descrever sem detalhes t cnicos os casos de uso.

Ar=uitetura de Interfaces: 3ste tipo de modela#em apoia usurios e casos de uso % definidos, por meio de modelos de conte0do de interface e mapas de nave#a"o entre conte$tos. Mode o de Conte>do de Interface: 6epresenta a cone$o entre conte$tos internos e e$ternos de uma interface.

3ste modelo composto por ferramentas abstratas que fornecem fun"-es, materiais abstratos que fornecem dados e apresenta"-es de ambientes de intera"o deste sistema, de forma a se basear em conte$tos de uso, formando assim as %anelas de interface com usurios e suas funcionalidades. Mapa de ?ave$ao entre Conte:tos: 3ste tipo de modela#em na verdade um dia#rama que descreve as transi"-es de estados, envolve a limita"o de espa"os de conte0do de forma a se pensar o que queremos apresentar em cada caso. , ima#em abai$o apresenta um dia#rama de nave#a"o entre conte$to de uma compra.