Académique Documents
Professionnel Documents
Culture Documents
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
requisitos tcnicos
- Matriz de correlao
- Anlise dos concorrentes
Planejamento
detalhado.
| 179
Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto
Anlise
Identificao do contedo
- Especificao preliminar
- Reviso da especificao
- Verso final
imagens e sons)
- Anlise da interao
Plano de desenvolvimento
- Anlise funcional
Projeto conceitual
internet ou intranet)
da concorrncia.
Configurao do projeto
Engenharia
Produo
construdo o prottipo)
Projeto detalhado
Desenho arquitetnico
Definio de templates
Desenho de navegao
desenvolvimento.
Desenho de interface
Desenho da interface
Implementao
Validao da interface
Experincia do Usurio
Design de Interao
Garrett (2003)
Estratgia inicial
Requisitos
Definio de metas
Design
| 180
Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto
usurio.
Verso interativa
Escopo
Avaliar
Estrutura
Design de interao
as funcionalidades do site.
tarefas do usurio
Esqueleto
incio do projeto.
Design de informao
- 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.
| 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.
| 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.
| 183
Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto
Validao do esboo
| 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
| 185
Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto
Esboo
Refino
- Elementos grficos, paleta de cores, estilo de texto, menus, cones, interface das
funes (respostas do sistema)
Validao do refino
Identificao de possveis aperfeioamentos
| 186
Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto
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.
| 187
Jaire Ederson Passos, Tnia Luisa K. da Silva | Design de interface sistematizado como processo de produto
| 188