Design de interface sistematizado como processo de produto

Interface design systematized as product process

Jaire Ederson Passos, Tnia Luisa K. da Silva

design, interao, interface, metodologia

Este artigo relata a proposio de metodologia para o design de interface sistematizado como processo de
desenvolvimento de produto, considerando princpios de design de interao e aspectos de usabilidade e ergonomia. A
composio de metodologia que agrega ferramentas do processo de produto, como o desdobramento da funo
qualidade, a princpios do design grfico e do design de interao objetiva fornecer forte embasamento cientfico para as
usualmente aplicadas heursticas do design de interface. Nesse sentido, a pesquisa recorre ainda a referncias de
engenharia de software e de arquitetura da informao, alm de princpios de composio visual. Para validao do
processo, desenvolveu-se a interface do ambiente digital HyperCAL online (mdulo do professor), um projeto do Grupo
de Pesquisa Virtual Design, da Universidade Federal do Rio Grande do Sul (UFRGS), desenvolvido para apoiar o ensino
presencial de Design e Expresso Grfica nos cursos de graduao da universidade.

design, interaction, interface, method

This article reports the proposition methodology for systematic interface design as product development
process, considering principles of interaction design and aspects of usability and ergonomics. The
composition of methodology that combines tools of the process of product, such asthe quality function
deployment, to principles of graphic design and interaction design aims to provide a strong scientific basis for
the commonly applied heuristics of interface design. In this sense, the research also uses references to
software engineering and information architecture, as well as principles of visual composition. To validate the
process, has been developed the interface of digital environment HyperCAL online (module for academics),a
project of the Virtual Design Research Group, from Universidade Federal do Rio Grande do Sul (UFRGS),
developed to support classroom teaching of Design and Graphic Expression in the undergraduate courses of
the university.

1. Introduo
Este artigo apresenta o desenvolvimento de metodologia especfica para design de interface de
ambiente virtual centrado no usurio. A metodologia Hypercal, como foi denominada,
sistematizada como processo de desenvolvimento de produto, com princpios de Design de
Interao e considera aspectos de usabilidade e ergonomia. Objetiva-se, assim, favorecer o
trabalho do usurio, permitindo a apropriao do contedo e a execuo das tarefas atravs das
funcionalidades do sistema. Este artigo apresenta os desdobramentos da metodologia Hypercal,
explicitando suas fases e etapas de processo, desenvolvidas para o projeto de interface do
sistema HyperCAL online, mdulo de gerenciamento de produo flexvel de objetos educacionais.
O HyperCAL online, um projeto do Grupo de Pesquisa Virtual Design, da Universidade Federal
do Rio Grande do Sul (UFRGS) construido com base na pesquisa de Silva (2005) e consiste em
um ambiente digital para apoio ao ensino presencial de Design e Expresso Grfica. Desde sua
primeira verso, em 1999, esse sistema vem sendo utilizado em diversas disciplinas dos cursos de
Engenharia, e mais recentemente, tambm nos cursos de Design Visual e de Design de Produto,
preponderantemente na UFRGS.
Para consecuo do trabalho foram investigados: os Elementos da Experincia do Usurio
(Garret, 2003); os conceitos do Design de Interao (Preece, Rogers e Sharp, 2005); as tcnicas
da Engenharia de Software (Pressman, 2002); e ferramentas do Processo de Desenvolvimento de
Produto (Baxter, 1998). A combinao desses estudos deu origem metodologia proposta nesta
pesquisa. Consideram-se, ainda, heursticas e pesquisas de usabilidade como as de Nielsen
(2008), Norman (2002) e Kalbach (2009). Destaca-se que essa metodologia integra a tcnica do
desdobramento da funo qualidade a estudos usualmente adotados para o design de interface
InfoDesign | Revista Brasileira de Design da Informao / Brazilian Journal of Information Design
So Paulo | v. 9 | n. 3 [2012], p. 178 188 | ISSN 1808-5377

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

grfica. O prximo item se destina descrio dos principais estudos que deram base para a
pesquisa e o desenvolvimento da metodologia Hypercal.

2. Metodologias de projeto
O Design de Interao (Preece, Rogers e Sharp, 2005) considerado nesta pesquisa por ressaltar
o foco no usurio e estabelecer metas para garantir-lhe uma experincia satisfatria quando do
contato com uma interface. Para isso, recorre a heursticas e pesquisas de usabilidade como as
de Nielsen (2005) e Norman (2002). A Engenharia de Software (Pressman, 2002), com a Iweb, por
sua vez, contribui com embasamento terico consistente e com um processo de desenvolvimento
de interface em etapas detalhadas, descrevendo com maior preciso os passos necessrios at
se alcanar o produto final.
J a abordagem de Garrett (2003) interessa ainda mais a este trabalho por dois motivos
especficos, que so os seguintes: d nfase especial ao design visual dos elementos grficos que
faro parte do leiaute e prev soluo para quando a interface usada como software remoto na
internet. A Iweb j tratava de interfaces para aplicativos, porm no estabelecia uma diferenciao
explcita entre metodologias para interface voltada tarefa e interface para hipertexto. Os
Elementos da Experincia do Usurio, no entanto, definem com clareza as etapas prprias a cada
processo e trazem uma proposta adequada ao projeto do HyperCAL online.
Ainda, a questo visual tratada por Pressman (2002) como principalmente esttica. Garrett
(2003), todavia, argumenta que o design visual mais que esttica, pois envolve tambm
funcionalidade, legibilidade e estratgia de posicionamento de marca. O projeto grfico , nesse
caso, tratado com maior relevncia e desdobrado em maiores detalhes.
Alm de apoiar-se nas etapas dos Elementos da Experincia do Usurio, para garantir que o
design de interface seja centrado no usurio e para que a qualidade esteja presente em todas as
etapas do projeto, este trabalho sistematizado como Processo de Desenvolvimento de Produto
(Baxter, 1998). A metodologia de Garrett (2003) prope, em sua primeira etapa, a pesquisa de
interesses do usurio e o estabelecimento de objetivos. O Processo de Desenvolvimento de
Produto, entretanto, d conta de sistematizar a transformao das necessidades do usurio em
metas e estabelecer ferramentas para que o foco nessas metas seja mantido ao longo do projeto.
O foco no usurio fator central no design de uma interface, e para tornar as necessidades do
usurio em requisitos tcnicos, mantendo-se a qualidade no processo de produo, so usadas
ferramentas profissionais para o desenvolvimento de produto, como o desdobramento da funo
qualidade (QFD). A matriz de correlao, ou casa de qualidade, utilizada com a inteno de
obterem-se informaes teis para o controle de qualidade, precisas e fiis s necessidades do
consumidor identificadas (Baxter, 1998).
A partir desses estudos, prope-se uma metodologia que no se apropria, simplesmente, da
abordagem de algum autor, mas que construda com base em diversos autores e de acordo com
o contexto do problema em questo. Considera-se, portanto, que a combinao dos processos
apresentados em cada uma das obras citadas resulta em uma metodologia que proporciona a
construo de uma interface mais regida por constataes cientficas e no somente por
heursticas. O Quadro 1 traz relatos dos aspectos mais relevantes de cada processo,
sistematizados de forma a permitir a comparao.
Quadro 1

Processo de Produto

Engenharia de Software

Baxter (1998)

Pressman (2001)

Especificao do projeto

Formulao

Converso das necessidades do consumidor em

Identifica metas e objetivos; apresenta escopo

requisitos tcnicos

resumido do projeto; define perfil do usurio

- Matriz de correlao
- Anlise dos concorrentes

Planejamento

- Fixao metas quantitativas

Avalia os riscos associados, custos, planejamento

- Priorizao das metas

detalhado.

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 179

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

Levantamento de aspectos relevantes no

Anlise

percebido pelos consumidores

Definio de equisitos tcnicos

- Pesquisa de informaes internas e externas

Identificao do contedo

- Especificao preliminar

Definio de requisitos de design

- Reviso da especificao

- Anlise de contedo (textos, vdeos, grficos,

- Verso final

imagens e sons)
- Anlise da interao

Plano de desenvolvimento

- Anlise funcional

Projeto conceitual

- Anlise da configurao (descrio detalhada

- Princpios de projeto e idias preliminares,

da estrutura que ser usada pela WebApp,

princpios funcionais e de estilo, diferenciao

internet ou intranet)

da concorrncia.

Configurao do projeto

Engenharia

- Arquitetura do produto, formas e funes,

Desenho de contedo (produo do contedo)

definio das melhores opes (fase onde

Produo

construdo o prottipo)

Projeto detalhado

Desenho arquitetnico

- Detalhamento do projeto para a produo.

Definio de templates

Cronograma e distribuio de tarefas

- Estabelecimento de etapas de

Desenho de navegao

desenvolvimento.

Definio da semntica de navegao para

diferentes usurios (sinalizao).

Desenho de interface

Desenho da interface

Implementao

Validao da interface

Anlise de usurios tarefas e entornos

Gerao de pginas e testes

Teste no navegador
Avaliao do cliente

Experincia do Usurio

Design de Interao

Garrett (2003)

Preece, Rogers e Sharp (2005)

Estratgia inicial

Requisitos

Definio de metas

Identificar necessidades e estabelecer requisitos

Levantamento de necessidades do usurio

- Objetivos do site de origem externa

Design

identificados por meio de pesquisa com o

Desenvolver designs que preencham os requisitos

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 180

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

usurio.
Verso interativa
Escopo

Construir verses interativas dos designs de

maneira que possam ser comunicados e avaliados

Especificaes funcionais para atender s

necessidades do usurio.

Descries detalhadas de funcionalidades que

Avaliar

atendam s necessidades do usurio

Avaliar o que est sendo construdo durante o

processo.

Estrutura

Design de interao

Caractersticas importantes no processo:

- Identificao de como o usurio interage com

as funcionalidades do site.

Os usurios devem estar envolvidos em todas

as etapas.

Desenho de fluxos de aplicao para facilitar as

tarefas do usurio

A usabilidade especfica e as metas decorrentes

de experincia do usurio, devem ser
identificadas, documentadas e acordadas no

Esqueleto

incio do projeto.

Design de informao

A iterao inevitvel nas 4 etapas

- Hierarquia da informao

Design da interface
- Design de elementos da interface para facilitar
a interao do usurio com as funcionalidades

Superfcie
Tratamento grfico dos elementos da

interface.

3. Metodologia Hypercal
A seguir, tem-se a descrio da Metodologia Hypercal, obedecendo aos seguintes passos: a)
Percepo; b) Alvo; c) Configurao; d) Esboo; e) Refino. Essas fases so descritas em seus
procedimentos especficos em um total de 25 etapas.

Fase (a) Percepo:

A fase percepo apresenta uma viso geral das questes envolvidas na situao inicial do
problema. Diferentemente da primeira etapa de Garrett (2003), no busca-se por uma estratgia,
mas apenas pela compreenso e pelo registro das definies gerais, como nas primeiras etapas
da Engenharia de Web (Pressman, 2002). Para tanto, as etapas desenvolvidas constam de
levantamento de informaes; de identificao de objetivos, recursos e prazos; de definio de
requisitos de usurio e de anlises relativas ao assunto a ser tratado. Para compor essa fase
inicial recorreu-se s quatro abordagens citadas anteriormente, a saber: Processo de Produto
(Baxter, 1998), Engenharia de Software (Pressman, 2002), Experincia do Usurio (Garrett, 2003)
e Design de Interao (Preece, Rogers e Sharp, 2005). Em cada uma delas, esto presentes
etapas semelhantes s que sero apresentadas mesmo que em algumas delas o nvel de
detalhamento seja menor.
O destaque para a fase percepo est na etapa de investigao de tendncias, onde, com
base no Processo de Produto, busca-se a diferenciao da concorrncia. Para tanto, procede-se
s anlises diacrnica e sincrnica de temas relacionados. Ainda, a etapa de identificao de

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 181

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

requisitos, mesmo estando presente nas quatro abordagens, , aqui, focada tambm na proposta
do Processo de Produto. Os itens a seguir apresentam cada uma das etapas dessa fase.
Levantamento de informaes
O levantamento das informaes trata-se do estudo dos temas relacionados e do agrupamento
dos assuntos disponveis e relevantes para a pesquisa. Para este trabalho, foram levantadas as
informaes documentadas em Silva (2005) e Mendes (2009).
Identificao dos objetivos do projeto
Com base em Powell, Jones e Cutts (1998) esta etapa inicial procura respostas diretas e
sucintas para as perguntas seguintes: a) Qual a motivao principal para o aplicativo? B) Por que
necessrio o aplicativo? C) Quem vai utilizar o aplicativo? Essas respostas so obtidas a partir
do levantamento das informaes, efetuado na primeira etapa da metodologia.
Identificao dos recursos disponveis
preciso conhecer a disponibilidade de recursos humanos e materiais (financeiros e
tecnolgicos) antes de dar prosseguimento ao projeto.
Identificao dos prazos
Os prazos de desenvolvimento e entrega final precisam ser conhecidos para a montagem do
cronograma de trabalho.
Anlises denotativa e conotativa
A etapa das anlises ajuda a identificar a situao inicial do problema e a direcionar os passos
a serem seguidos. As informaes obtidas nessa fase enriquecem o projeto, do base ao
processo criativo e podem ajudar a identificar necessidades latentes. So propostas as anlises
denotativa e conotativa de conceitos relacionados ao tema, com base no Dicionrio de informtica
e internet, de Sawaya (1999).
Investigao de tendncias
A investigao das tendncias feita a partir das pesquisas diacrnica e sincrnica de temas
relacionados com a pesquisa. A anlise diacrnica olha para o passado e estuda a evoluo dos
acontecimentos em busca de referncias que subsidiem a criao. A anlise sincrnica olha para
os lados e rene pesquisas recentes que possam contribuir para o trabalho.
Identificao dos requisitos do usurio
Essa etapa baseada no Processo de Produto (Baxter, 1998) e busca identificao e
hierarquizao dos requisitos do usurio. Para tanto, feito levantamento inicial de requisitos e em
seguida construdo um questionrio para investigar diretamente com o usurio quais seus
principais interesses. Nessa pesquisa, o levantamento e identificao dos requisitos do usurio foi
feito atravs da pesquisa descrita em Mendes (2009), de entrevistas com usurios e de pesquisa
em literatura especfica da rea de interface.
Registro das informaes
preciso que o material levantado seja devidamente organizado e registrado. Para tanto, a
fase de registro das informaes prev a elaborao de relatrio de pesquisa.

Fase (b) Alvo

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 182

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

A segunda fase da metodologia recebe o nome de alvo porque objetiva o detalhamento e refino
das informaes. Para tanto, apresenta investigaes mais aprofundadas e especficas do que as
realizadas na fase anterior.
As etapas principais da fase alvo esto embasadas no Processo de Produto (Baxter, 1998),
com a definio dos requisitos de projeto e a casa de qualidade, propostas na investigao de
oportunidades para inovao; a montagem de condicionantes e listagem de projetaes (essa
ltima tambm presente na Engenharia de Software e na Experincia do Usurio). J a etapa de
investigao da identidade visual construda a partir da nfase que a proposta da Experincia do
Usurio (Garrett, 2003) d ao assunto, enquanto a etapa de definio de tarefas e prazos
baseada no Planejamento Detalhado da Engenharia de Software (Pressman, 2002).
Investigao de oportunidades para inovao
A investigao de oportunidades para inovao envolve a anlise de sistemas similares e o uso de
ferramentas de Processo de Produto (Baxter, 1998). Inicialmente, usa-se a tcnica do
desdobramento da funo qualidade (quality function deployment ou QFD) e aplica-se a casa de
qualidade. Essa etapa prev a contribuio de profissionais e pesquisadores da rea do design de
interface para o trabalho de transformao dos requisitos de usurio em requisitos de projeto.
Em seguida, a investigao de necessidades latentes do usurio e proposta de inovaes
efetuada a partir da avaliao dos resultados do QFD e tambm atravs da anlise de sistemas
similares. Nesta pesquisa, os sistemas estudados foram o Google Docs e o Microsoft Word 2007.

Investigao de identidade visual

Essa etapa investiga o perfil de identidade visual que ser empregado. Para tanto, desenvolvido
um questionrio e aplicado com os responsveis pelo projeto, procurando identificar suas
expectativas quanto a imagem pretendida para a marca. Em seguida construdo um painel de
diferencial semntico, que trata-se de um grfico que permite a melhor visualizao dos ideais
conceituais e a priorizao de qualidades desejveis interface.
Montagem dos condicionantes
A montagem dos condicionantes uma tcnica apresentada em Baxter (1998) para estimular a
criatividade. O mapa do problema traz uma representao grfica que auxilia na definio e
permite visualizao das fronteiras do problema, do espao do problema, das solues existentes
e da meta do problema.
Listagem de projetaes
A lista de projetaes rene as necessidades do usurio identificadas a partir das anlises e
traz a definio das metas e do conceito para o projeto. Trata-se de uma lista resumida e objetiva
com itens para verificao.
Definio de tarefas e prazos
A fase alvo encerrada com a difuso das informaes levantadas para a equipe de projeto e
a definio de tarefas, com estabelecimento de responsabilidades e prazos.
Fase (c) Configurao
A configurao a primeira fase projetual; quando as informaes levantadas e analisadas
comeam a ser transformadas em estruturas que daro base programao do sistema e nova
interface. Essa fase comea com uma viso geral, na construo do mapa do site, passa pelo
desenho de contedo e funo, e, em seguida, parte para detalhamentos mais especficos no
fluxo das tarefas e nos caminhos de navegao. Essas trs etapas tm base na Engenharia de
Software (Pressman, 2002) e na Experincia do Usurio (Garrett, 2003). Por fim, a validao dos
grficos mediante consulta com a equipe de desenvolvimento uma etapa criada a partir da
proposta de avaliao do que est sendo feito durante o processo, advinda do Design de
Interao (Preece, Rogers e Sharp, 2005).
Mapa do site

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 183

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

Conforme Kalbach (2009) o mapa do site demonstra os relacionamentos entre contedo e

funcionalidade na arquitetura de um site. Em uma representao visual, captura o conceito, a
estrutura da informao e o esquema da organizao do site.
Desenho de contedo ou funo
O desenho de contedo trata-se da produo ou reunio de todos os elementos que faro
parte de cada uma das pginas, como: textos, grficos e animaes. Da mesma forma, o desenho
de funo descreve quais funes estaro disponveis nas pginas do sistema (Pressman, 2002).
Fluxo de tarefa e caminhos de navegao
O fluxo de tarefa uma representao grfica que mostra como se d a execuo das
atividades em um sistema. Dessa forma, contribui para a elaborao de respostas do sistema bem
como para o design da interao. O caminho de navegao, por sua vez, demonstra a navegao
de forma mais completa que o mapa do site, trazendo tambm as ligaes secundrias. Kalbach
(2009) afirma que no mapa do site a apresentao de cima para baixo, enquanto o caminho de
navegao atravessa toda a estrutura conforme exista necessidade de unir contedos
relacionados.
Validao da configurao
A fase de configurao encerra com a validao dos grficos pelos desenvolvedores e
responsveis pelo projeto. Kalbach (2009) considera que a apresentao do mapa para a equipe
de desenvolvimento importante para que sejam evitados problemas de interpretao.
Fase (d) Esboo
Acessibilidade, usabilidade e ergonomia envolvem preocupaes que esto presentes em
todas as fases do projeto, mas que se tornam evidentes na fase do esboo. Esta etapa se destina
composio da pgina, visando a compreenso das informaes e a utilizao das funes por
parte do usurio. Trata-se de estabelecer as relaes entre os elementos grficos e de demonstrar
a hierarquia da informao. O design da interface aqui definido atravs da malha construtiva, da
malha estrutural e do design de navegao. O embasamento para essas etapas vem dos
Elementos da Experincia do Usurio (Garrett, 2003). Por fim, a validao do esboo tem base na
validao do desenho de interface proposta na Engenharia de Software (Pressman, 2002).
Malha construtiva
A malha ou grade de construo um sistema modular que serve de base para o desenho.
Samara (2007, p.24) define grade como um conjunto especfico de relaes de alinhamento que
funcionam como guias para a distribuio dos elementos num formato. Garrett (2003) afirma que
essa tcnica trazida do impresso pode assegurar uniformidade e consistncia interface Web.
Malha estrutural
A malha estrutural ou wireframe definir a distribuio espacial dos elementos da interface
levando em conta a relevncia de cada informao. Kalbach (2009) descreve wireframe como o
esboo preliminar das pginas que mostra o esqueleto do sistema de navegao ainda sem o
design visual.
Design da navegao
O design da navegao define a forma como o usurio se movimenta no sistema, com a
localizao e os tipos de links (texto, cones, botes ou metforas grficas). Conforme Garrett
(2003) o design da navegao refere-se ao design dos elementos da tela que permitem a
movimentao do usurio atravs da arquitetura da informao.

Validao do esboo

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 184

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

Antes de dar prosseguimento ao refino do projeto o esboo deve obter a devida validao em
apresentao aos pesquisadores, desenvolvedores e responsveis pelo projeto.
Fase (e) Refino
Na fase do refino, a aparncia final da interface revela-se atravs do design visual. Conforme
Garrett (2003) o design visual interfere no apenas na esttica da interface, mas tem influncia
tambm na funcionalidade, na estratgia de posicionamento de marca e na legibilidade de textos e
imagens. A definio da identidade visual garante personalidade ao sistema, forma um conceito
visual e d base para o restante do tratamento grfico da pgina. As etapas de desenho da
identidade visual e de tratamento grfico da interface advm da abordagem da Experincia do
Usurio (Garrett, 2003), ao passo que as duas ltimas, validao do refino e identificao de
possveis aperfeioamentos, tm base na Engenharia de Software (Pressman, 2002).
Identidade visual
As pesquisa referentes identidade visual e ao painel semntico, fornecem, nesse momento,
orientao e do o direcionamento na definio da paleta de cores, das famlias de fontes, das
formas e dos elementos grficos que sero empregados na nova marca e comporo o leiaute da
interface.
Tratamento grfico da interface
Trata-se do design visual, quando os elementos grficos, textos e componentes da navegao
recebem tratamento de acordo com princpios de design grfico, tais como: agrupamento,
equilbrio, contraste, propores e legibilidade (Garrett, 2003). Nessa etapa, os cones e menus
so projetados e finalizada a composio e aparncia da interface.
Validao do refino
A etapa final do refino prev a apresentao do projeto grfico para os responsveis pela
pesquisa do HyperCAL online para identificao de possveis ajustes e validao do projeto.
Identificao de possveis aperfeioamentos
Mediante a construo do prottipo e finalizada a pesquisa, podem ser identificados possveis
aperfeioamentos e formuladas proposies de melhorias.
O Quadro 2 apresenta graficamente as 5 fases e as 25 etapas da metodologia Hypercal.

Quadro 2

Fase

Atividade
Levantamentos de informaes
Identificao dos objetivos do projeto
Identificao dos recursos disponveis (humanos, financeiros e tecnolgicos)
Identificao dos prazos

Percepo

Anlises
- Denotativa e Conotativa
Investigao de tendncias
- Diacrnica e Sincrnica
Identificao dos requisitos do usurio
Catalogao das informaes obtidas

Alvo

Investigao de oportunidades para inovao

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 185

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

- Desdobramento da funo qualidade - QFD

- Anlise de concorrente e/ou similares
Investigao de identidade visual
- Questionrio de perfil de identidade visual
- Diferencial semntico
Montagem dos condicionantes
Listagem de projetaes
- Anlise dos dados obtidos, definio das metas e formulao do conceito.
Definio de tarefas e prazos
Mapa do site
Configurao

Desenho de contedo ou funo

Fluxos de tarefa e caminhos de navegao
Validao da configurao
Malha construtiva, mdulos

Esboo

Malha estrutural, wireframes

Design de navegao
Validao do esboo
Identidade dgito-virtual
Tratamento grfico da interface

Refino

- Elementos grficos, paleta de cores, estilo de texto, menus, cones, interface das
funes (respostas do sistema)
Validao do refino
Identificao de possveis aperfeioamentos

4. Representao circular da metodologia

Outra representao para esta metodologia pode ser vista na Figura 1. Esse modelo circular
demonstra as caractersticas especficas de cada fase de processo. O crculo azul indica que a
preocupao com a ergonomia cognitiva, usabilidade e acessibilidade deve estar presente em
todas as fases. O semicrculo verde mostra que a arquitetura da informao abrange quase
todas as etapas. A parte amarela distingue as duas fases de diagramao e composio,
respectivamente Esboo e Refino. Enquanto isso, o laranja destaca a Configurao e o Esboo
como fases de sinalizao e navegao.
A fase da Percepo, por ser uma etapa de coleta e anlise de dados dita analtica, sendo
que as informaes levantadas podem ser apresentadas em forma de imagens, desenhos ou
palavras. A fase Alvo destinada a organizao e estruturao das informaes obtidas e pode
tambm ser representada com textos ou desenhos. As fases Configurao e Esboo mantm as
caractersticas organizacional e estrutural e tornam a ser analticas em seus detalhes especficos.
As representaes na Configurao podem ser desenhsticas ou lingusticas, enquanto no Esboo
so predominantemente desenhsticas. A fase final, Refino, desenhstica, trazendo o design
visual da interface. Mais ao centro, so expostas as principais aes de cada fase, j detalhadas
acima, neste artigo.

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 186

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

Figura 1: Metodologia Hypercal

5. Consideraes finais
Para validao, a metodologia foi apilcada no projeto de interface do HyperCAL online mdulo
do professor (Passos, 2010). O estudo desenvolvido permite observar que o design de interface
deve consistir em um processo que se inicia na definio das necessidades do usurio e objetivos
do site; passa pela escolha de funcionalidades; pelo design de interao; segue com a arquitetura
da informao e com o design dos elementos da interface; e culmina em um tratamento grfico
especializado em design visual para superfcie web (Garrett, 2003). Ressalta-se que, para manterse a qualidade em todas as etapas do processo, importante que sejam adotadas tcnicas
profissionais de design de produto (Baxter, 1998). Dessa forma, propicia-se que as questes
visuais e de usabilidade, imprescindveis a uma experincia de usurio satisfatria, encontrem
amparo em tcnicas que garantem preciso e qualidade ao processo. O HyperCAL online
encontra-se, atualmente, em fase de prottipo. Novas publicaes podero relatar os resultados
da interao entre os usurio e a nova interface desenvolvida seguindo a metodologia
apresentada neste artigo.
Referncias
BAXTER, M., 1998. Projeto de Produto: guia prtico para o design de novos produtos / Mike
Baxter; traduo Itiro Iida. 2 ed. ver. So Paulo: Edgard Blcher.
GARRETT, J.J., 2003. The elements of user experience: user centered design for the web. New
York/Berkeley: Aiga/New Riders.
KALBACH, J., 2009. Design de navegao Web. Porto Alegre: Bookman.

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 187

Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto

MENDES, R. M., 2009. Avaliao da interface de desenvolvimento de materiais educacionais

digitais no ambiente HyperCAL online. Dissertao submetida ao Programa de Ps-Graduao
em Design da UFRGS.
MEURER, H., 2004. Projetao de Sistemas de Administrao de Stios Virtuais: O Atualizador /
por Heli Meurer Santa Maria.
NIELSEN, J. Ten Usability Heuristics. 2005. Disponvel em:
<http://www.useit.com/papers/heuristic/heuristic_list.html>. Acesso em dezembro de 2008.
NORMAN, D. A., 2002. The design of everyday things. New York: Basic Book.
PASSOS, J. E., 2010. Metodologia para o design de interface de ambiente virtual centrado no
usurio. Dissertao (Mestrado), Universidade Federal do Rio Grande do Sul.
POWELL, T. A. JONES, D. L. CUTTS, D.C., 1998. Web site engineering: beyond Web page
design. Upper Saddle River: Prentice-Hall.
PREECE, J. ROGERS, Y. SHARP, H., 2005. Design de Interao: alm da interao homemcomputador. Porto Alegre: Bookman.
PRESSMAN, R. S., 2002. Ingeniera del Software: Un enfoque prtico. Madrid: Concepcin
Fernndez Madrid.
SAMARA, T., 2007. Grid: construo e desconstruo. Traduo de Denise Bottmann. So Paulo:
Cosac Naify.
SAWAYA, M. R., 1999. Dicionrio de informtica e internet: ingls - portugus. So Paulo: Nobel.
SILVA, T. L. K., 2005. Produo flexvel de materiais educacionais personalizados: o caso da
geometria descritiva. Florianpolis: Programa de Ps-Graduao em Engenharia de Produo PPGEP/UFSC (Tese de Doutorado).
Sobre os autores
Jaire Ederson Passos, mestre, Universidade Federal do Rio Grande do Sul (UFRGS), Centro
Universitrio Ritter dos Reis (UNIRITTER), atua como professor nos cursos de Design Visual e de
Design de Produto nas disciplinas de Projeto Editorial e Hipermdia. Pesquisa design de interface,
arquitetura da informao, processo de desenvolvimento de produto e planejamento visual.
<jairepassos@gmail.com>
Tnia Luisa Koltermann da Silva, doutora, Universidade Federal do Rio Grande do Sul, professora
do Departamento de Design e Expresso Grfica da Faculdade de Arquitetura e do Programa de
Ps-Graduao em Design. Atua principalmente nos seguintes temas: geometria descritiva,
objetos de aprendizagem, aprendizagem, ensino, hipermdia adaptativa, projeto de produto,
tecnologia assistiva e metodologia de pesquisa.
<tania.koltermann@ufrgs.br>

[Artigo recebido em dezembro de 2012, aprovado em dezembro de 2012]

InfoDesign | So Paulo | v. 9 | n. 3, p. 178 188

| 188