631-1787-1-PB

Sistema de Projetação de Interfaces Dígito-Virtuais: a utilização do Projeto E como

metodologia para construção do Ambiente Virtual de Aprendizagem

Flow System Design for Digital Interfaces: use of E Project as a methodology for construction of the

Virtual Learning Environment Flow

Anaís Schüler BertoniSidnei Renato Silveira

RESUMOO presente trabalho tem como objetivo relatar, por meio de uma revisão bi-bliográfica, como o Projeto E guiou o desenvolvimento do AVA Flow, propor-cionando-lhe o alcance dos princípios de usabilidade verificados através de uma avaliação heurística trabalhados juntamente com princípios universais de projeto da área do Desenho Industrial.

PALAVRAS-chAVEUsabilidade; Projeto E; Interfaces Gráficas com o Usuário; Ambientes Virtuais de Aprendizagem; Avaliação Heurística.

ABSTRAcT A projecting system, for design, can be regarded as a technique for solving problems, as known methodology, which is intended to guide the design of a product. A multitude of authors in this area has developed and categorized projective methodologies. However, only some of them have established metho-ds for projecting virtual-digit products. This paper aims to present, through a literature review, how the E Project guided the development of virtual learning environment Flow and gave him the scope of usability principles, verified by a heuristic evaluation, worked together with the universal principles of Design.

KEy WORDSUsability; E Project; Graphical User Interface; Virtual Learning Environment; Heuristic Evaluation.

Sistema de Projetação de Interfaces Dígito-Virtuais:

a utilização do Projeto E como metodologia para construção do Ambiente Virtual de Aprendizagem

12 Revista D • 4 • 2012

1 INTRODUÇÃO

Um sistema de projetação para o Desenho Industrial pode ser consi-

derado como uma técnica de resolução de problemas conhecida como

metodologia, que tem o propósito de guiar a concepção de determinado

produto. Muitos autores dessa área já desenvolveram e categorizaram

metodologias projetuais. Porém, apenas alguns deles criaram métodos

para projetação de produtos dígito-virtuais. A Metodologia Projetual

E, também chamada Projeto E, de acordo com seus criadores, Meurer

e Szabluk (2009, p.1), baseia-se em “conceitos, definições, métodos

e em processos de autores consagrados em design, estruturados de

acordo com as etapas sugeridas por Garrett (2003)”. Consiste em “uma

metodologia projetual com aplicação prática em projetos profissionais e

acadêmicos” da área de Desenho Industrial. Surgiu para sanar a neces-

sidade de definição sobre um procedimento de projeto que pudesse ser

utilizado em Interfaces Gráficas com o Usuário (GUI)1 para diferentes

tipos de produtos interativos dígito-virtuais, dentre esses a projetação

de ambientes virtuais de aprendizagem (AVAs) utilizados na modalidade

de Educação a Distância (EaD).

Essa metodologia guiou o projeto do AVA Flow, instrumento inte-

grante da Dissertação de Mestrado em Design do UniRitter2 intitulada

“Sistema de projetação de interfaces dígito-virtuais: diretrizes para o

projeto centrado no usuário de ambientes virtuais de aprendizagem”

–, que buscou, conforme Bertoni (2011, p.14), “projetar uma situação

comunicacional para a área de Educação, por meio do desenho de in-

terface de um ambiente virtual de aprendizagem, visando alcançar os

princípios de usabilidade”.

Este trabalho, nesse sentido, tem como objetivo relatar por meio de

uma revisão bibliográfica, como o Projeto E guiou o desenvolvimento

do AVA Flow, proporcionando-lhe o alcance dos princípios de usabili-

dade (NIELSEN, 2005) verificados através de uma avaliação heurística,

trabalhados juntamente com princípios universais de projeto da área do

1 GUI é a sigla para o termo em inglês “graphi-cal user interface”.

2 UniRitter - centro Uni-versitário Ritter dos Reis – Laureate International Universities

Anaís Schüler Bertoni e Sidnei Renato Silveira

13Revista D • 4 • 2012

Desenho Industrial (NORMAN, 2006; LIDWELL; HOLDEN; BUTLER,

2010). Dessa forma, a primeira seção apresenta, de maneira sucinta, as

etapas do Projeto E. A segunda mostra, em forma de relato, a aplicação

das etapas da metodologia em questão durante a construção do AVA

“Flow”, apresentando também como a avaliação heurística foi realizada.

Já a última seção apresenta as Considerações Finais do estudo em ques-

tão e as contribuições acadêmicas que resultaram da Dissertação citada.

2 PROJETO E: cONcEITO E ETAPAS

Originalmente, Garrett (2003) desenvolveu uma metodologia para a

concepção de produtos dígito-virtuais formada por cinco fases: estra-

tégia, escopo, estrutura, esqueleto e estética. Meurer e Szabluk (2009)

acrescentam no Projeto E uma fase a mais: a execução. Ressalte-se,

conforme Desconsi (2009, p. 106), que as fases que compõem essa

metodologia são formadas por rotinas, processos e por outros métodos

auxiliares, os quais consistem na produção de análises da atuação da

arquitetura de informação e da ergonomia cognitiva, bem como na

definição da navegação, diagramação, composição e no desenho de

superfície, incluindo-se a introdução da identidade visual na interface,

dentre outros elementos. A Figura 1 ilustra o Projeto E, esquematizado

a sua forma integral, juntamente com as etapas subjacentes.



14 Revista D • 4 • 2012

Figura 1 - Projeto E. Fonte: da autora, baseada em MEURER; SZABLUK, 2009

O detalhamento das etapas do Projeto E é apresentado na Figura 2.


15Revista D • 4 • 2012

Figura 2 - Etapas do Projeto E. Fonte: BERTONI, 2011 baseado em MEURER; SZABLUK, 2009

3 PROJETO E: APLIcAÇÃO DAS ETAPAS PARA cONSTRUÇÃO DO

AVA FLOW

Todas as etapas do Projeto E foram devidamente seguidas durante o

desenvolvimento do projeto do AVA Flow. Estimou-se que os critérios desta

metodologia proporcionariam o desenvolvimento dos atributos necessários



16 Revista D • 4 • 2012

para projetar o AVA, levando em consideração as heurísticas de usabilidade

(NIELSEN, 2005), muitas das quais foram atingidas por meio da aplicação

de princípios universais de projeto (LIDWELL; HOLDEN; BUTLER, 2010)

relacionados com a usabilidade, classificados conforme a Figura 3.

Figura 3 - Princípios universais de projeto relacionados com a usabilidadeFonte: BERTONI, 2011

Os princípios descritos (Figura 3) foram organizados de acordo com

a relação existente com cada um dos dez princípios de usabilidade de


17Revista D • 4 • 2012

Nielsen (2005). Para a sua utilização durante a construção do AVA foi

necessário iniciar o processo de projetação da interface para identificar

como aqueles seriam inseridos no respectivo desenho. Por isso, delineou-

-se a metodologia de projetação com a aplicação das etapas do Projeto

E, mais especificamente através da etapa da Estratégia.

A Estratégia é uma etapa de definição e de delimitação em que se

faz necessário responder as seguintes questões projetuais: “O quê?

Por quê? Como? Para quem? Qual será a tecnologia utilizada?”. Em

um segundo momento, levantou-se a situação inicial e final para bem

definir e para contextualizar o produto e as taxonomias responsáveis

por situar o AVA, tanto no momento em que é comparado com outros

AVAs como no entendimento da origem desse tipo de interface. Para

delimitar o público-alvo do AVA foi trabalhado o princípio universal de

projeto apresentado por Lidwell, Holden e Butler (2010): “Personas”.

Esse princípio auxilia na identificação dos perfis dos usuários de GUI,

além de traçar os objetivos que desejam alcançar.

A fim de facilitar mais ainda a construção do conceito deste produto,

também foram levadas em consideração as análises: (I) denotativa, que

revelou significados, a partir do dicionário de palavras relacionadas ao

contexto do trabalho; (II) conotativa, que identificou a importância

da usabilidade durante a experiência do usuário de produtos dígito-

-virtuais; (III) diacrônica, que mostrou as mudanças sofridas pela EaD

no decorrer do tempo; (IV) sincrônica, que apresentou para então ana-

lisar nas outras fases dessa etapa, três AVAs: Rooda (Rede Cooperativa

de Aprendizagem, utilizado na Universidade Federal do Rio Grande do

Sul), Moodle (customizado pelo Centro Universitário Ritter dos Reis)

e Teleduc (desenvolvido pela Universidade Estadual de Campinas);

(V) desenhísticas, levando em consideração a estrutura, as funções, as

ferramentas, a logomarca, as cores, as tipografias e os ícones utilizados

nos três AVAs anteriores; (VI) diferencial semântico, que identificou,

classificou e comparou as características marcantes de cada AVAs ana-

lisado; (VII) heurística, que buscou por problemas de usabilidade que



18 Revista D • 4 • 2012

pudessem comprometer ou atrapalhar a realização de tarefas durante

o uso de AVAs. Ao final desta primeira etapa, foi possível levantar uma

lista de requisitos e de restrições do projeto que ajudaram a descrever o

modo como o AVA Flow deveria ser projetado, a fim de evitar problemas

de interação, permitindo assim passar para a fase do Escopo.

Tendo em vista o desenvolvimento do conteúdo que fará parte da GUI

inicial durante o Escopo, para facilitar o processo foi utilizada a técnica

de card sorting. Conforme Agner (2009, p.133), constitui-se em uma ma-

neira de categorizar entidades (objetos, idéias e ações) por semelhança,

formando-se assim a arquitetura de informação que originará as estrutu-

ras de navegação, menus e as taxonomias de hierarquia de informação.

Essa técnica é empregada por meio da organização de cartões, tomando

como base a forma como o usuário entende determinados conteúdos.

Na mesma etapa definiram-se, também, as funcionalidades e as tarefas

que seriam desenvolvidas pelo AVA Flow, além do posicionamento da

linguagem gráfico-visual pretendida perante os concorrentes.

A etapa seguinte, a Estrutura, consistiu no momento determinante

para a definição do Organograma Geral da GUI, já que essa apresenta

toda a estrutura do AVA Flow e dos caminhos que o usuário percorrerá

durante a sua interação com a ferramenta, além do Fluxograma das

tarefas, focalizado em um tipo de tarefa específica, que mostra como a

interface comporta-se para então ser definido o Esqueleto.

O Esqueleto trabalha com Wireframe Estrutural e Wireframe Ar-

quitetural. O primeiro apresentou a malha diagramacional obtida por

meio da proporção áurea; o segundo, apresenta a disposição inicial dos

conteúdos dentro da GUI, sem a aplicação da linguagem gráfico-visual,

já que teve sua realização na fase da Estética.

Durante o desenvolvimento da Estética, definiu-se a identidade gráfi-

co-visual do AVA Flow, malha diagramacional elaborada para compor seu

layout. Foram estipulados, também, os padrões de cores, de tipografia,

de ícones e de pictogramas. Nessa etapa foi possível descrever como

cada um dos princípios universais de projeto mostrados na Figura 3


19Revista D • 4 • 2012

atuaram na composição da interface do produto, para então montar-se

o seu Modelo Funcional Navegável, na etapa da Execução.

O Modelo Funcional Navegável ou MFN, segundo Meurer e Szabluk

(2009, p.11), “não se trata de um protótipo, mas sim de um modelo que

apresenta algumas funcionalidades do produto”. Os autores recomendam

que “o MFN tenha de 15 a 25 telas representativas de tarefas e navegá-

veis entre si para que o cliente e o usuário compreendam como será o

produto final, após a programação computacional propriamente dita”.

Os mesmos autores ainda explicam: “quando o produto estiver em fase

de acabamento, com todas as suas ferramentas e funcionalidades ativas,

passará por uma avaliação heurística”. Essa etapa volta-se à finalidade

de identificar e corrigir possíveis erros de programação e usabilidade.

Contudo, deve-se saber que foi trabalhada a etapa de Execução no

contexto do desenho de interface, isto é: não foi implementada nessa

pesquisa tipo algum de programação computacional. Essa fase levou em

consideração o desenho de diversas telas do AVA, as quais apresenta-

ram, por meio de representação gráfica, as funcionalidades da interface

projetada. As Figuras 4 e 5 apresentam duas telas que integram o MFN

do produto em questão.

Figura 4 – MFN: Tela de Login do AVA Flow. Fonte: BERTONI, 2011



20 Revista D • 4 • 2012

Figura 5 – MFN: Tela Inicial do AVA Flow. Fonte: BERTONI, 2011

Porém, o fato de apenas seguir a metodologia não bastou para

responder o problema de pesquisa. Para comprovar a utilização dos

princípios de usabilidade, bem como resolver possíveis problemas

relacionados ao tema, foi necessário que a GUI do AVA Flow passasse

por uma verificação, conhecida como avaliação heurística. Para Santa

Rosa e Moraes (2008, p.96), essa avaliação constitui um termo cunhado

por Jakob Nielsen e Molich, em 1990, que referem-se a um “método

de inspeção para encontrar determinados tipos de problemas em uma

interface do usuário”, ou, ainda, como caracteriza Dias (2007, p.42),

refere-se a qualquer característica, “observada em determinada situação,

que possa retardar, prejudicar ou inviabilizar a realização de uma tarefa,

aborrecendo, constrangendo ou traumatizando o usuário”.

A avaliação heurística da GUI do AVA envolveu três avaliadores. O

avaliador 1 era do sexo feminino, tinha 34 anos, era professor univer-

sitário e pesquisador em uma Instituição de Ensino Superior da região


21Revista D • 4 • 2012

metropolitana de Porto Alegre. Possuía conhecimento na área de Ciências

da Computação, Desenho Industrial, Usabilidade, métodos de avaliação

de usabilidade em GUI e Ergonomia Cognitiva, além de ser usuário de

AVAs, por ser ministrante de aulas na EaD. O avaliador 2, também do

sexo feminino, tinha 36 anos de idade, era professor de informática em

uma Instituição de Ensino Superior da região metropolitana de Porto

Alegre. Possuía experiência em Ciências da Computação, Usabilidade,

métodos de avaliação de usabilidade e em EaD. Já o avaliador 3 era do

sexo masculino, tinha 36 anos de idade, era arquiteto de informação,

desenhista industrial e professor universitário. Tinha experiência em

Informática na Educação, Engenharia da Produção, Desenho Industrial,

Usabilidade, métodos de avaliação de GUI, Ergonomia Cognitiva e em

EaD. A avaliação foi enviada a cada um dos integrantes, juntamente com

as orientações necessárias, via correio eletrônico. Nessa, as possíveis

falhas de usabilidade encontradas deveriam ser classificadas conforme

o grau de severidade apresentado pela Figura 6.

Figura 6 – Escalas de avaliação da interface. Fonte: BERTONI, 2011 baseado em SANTA ROSA; MORAES, 2008; BARBOSA; SILVA, 2010

Foram constatados apenas 15 problemas de usabilidade em todo o

MFN, todos, ou de desenho ou de baixa complexidade, aspecto que per-



22 Revista D • 4 • 2012

mitiu o ajuste dos mesmos logo após a sua verificação. De uma maneira

geral, o avaliador 1 classificou a estética da GUI como limpa e adequada.

O avaliador 2 destacou a forma como os conteúdos correlacionam-se,

de forma a simplificar a interação dos usuários mais inexperientes. O

avaliador 3, por sua vez, elogiou os elementos estético-formais, justifi-

cando que a interface gerava empatia desde o primeiro contato, devido

ao uso coerente de tipografia, elementos imagéticos e de cores. Na

opinião do último avaliador, a interface encontra-se totalmente focada

no conteúdo, transferindo ao layout somente a questão de organização

desse conteúdo. Além disso, para ele a predominância de cores cinza

e branco fez com que a linguagem do AVA se tornasse clara, limpa e

harmoniosa, possibilitando a fácil localização dos diferentes conteúdos

e ferramentas. Ele ressaltou como pertinente o aspecto da qualidade

estética, enquanto fator de influência positiva na usabilidade do sistema.

Dessa maneira, o desenvolvimento da avaliação heurística permitiu

a compreensão dos modos de interação dos usuários e dos tipos de

problemas de usabilidade que podem ocorrer no projeto de GUI, pois

cada um deles pode referir-se a uma heurística e a um grau de seve-

ridade diferente. A identificação desses problemas também se deveu

às questões da avaliação heurística, servindo de roteiro para que os

avaliadores pudessem guiar-se durante o processo avaliativo.

4 ConsiDeRações Finais

Esta pesquisa resultou em uma forma de Contribuição e em diretrizes

para o projeto centrado no usuário de AVAs, que poderão servir como

referência para os desenhadores de produtos dígito-virtuais. Acredita-se

que apesar de constituir uma pequena listagem de tópicos relevantes, a

possibilidade vista por parte desses profissionais, de aliar tais requisitos

aos seus conhecimentos em Desenhos pode vir a criar uma unidade formal

e coerente em projetos centrados no usuário, como mostra a Figura 7.


23Revista D • 4 • 2012

Figura 7 – Diretrizes para o projeto centrado no usuário de AVAs. Fonte: BER-TONI, 2011

Nesse sentido, percebe-se a importância da usabilidade no projeto

de GUI, já que essa não é considerada apenas um atributo de qualidade

importante, como também é necessária no que diz respeito aos produtos

dígito-virtuais, principalmente em relação àqueles de caráter educa-

cional. Projetar um AVA é um desafio, mesmo para os desenhadores

mais experientes, já que constitui um tipo de interface complexa – pelo

fato de envolver diversas modalidades de recursos, tanto de tecnologias

como de conteúdos –, uma vez que o projeto educacional exige uma

carga cognitiva muito elevada do desenhador e uma rotina de trabalho



24 Revista D • 4 • 2012

amplamente focada no cronograma e no funcionamento das ferramentas

a serem implementadas na interface. Tais fatores serão determinantes

durante a experiência do usuário, dos novatos até os mais experientes.

Outro aspecto importante a ser ressaltado neste tipo de projeto diz

respeito às tecnologias. Atualmente os usuários de AVAs acessam a

internet por meio de diversos tipos de dispositivos, e a diferença de

resolução de tela em cada um deles passa a ser mais um importante

requisito para o projeto de GUI, porque esse exige um desenho que após

a implementação pelos programadores terá que ser adequado a essas

diferentes resoluções, já que o constante aprimoramento tecnológico

exige que o assunto seja reiteradamente retomado.

Dessa forma, a aplicação desses conceitos em situações comunica-

cionais para Educação é importante, observando-se que ainda há muito

mais a que se trabalhar, principalmente no que diz respeito às ferra-

mentas de interação dos usuários, como wikis, fóruns, ferramentas de

edição de textos e exercícios colaborativos que venham a integrar um

AVA. O conjunto dessas ferramentas pode estimular a interação em AVAs

e potencializar os processos de ensino e de aprendizagem, dependendo

da forma como vierem a ser projetadas, visto que há necessidade de

aprimoramento das ferramentas utilizadas nos cursos a distância devido

ao aumento da oferta e da procura por cursos nessa modalidade.

Os usuários de AVAs necessitam de tecnologias de informação e de

comunicação que contribuam de maneira eficaz e eficiente nos proces-

sos de ensino e de aprendizagem, e o desenhador de GUI pode ser um

importante personagem neste contexto, pois possui os conhecimentos

necessários para esse fim.


25Revista D • 4 • 2012

REFERêNcIAS

AGNER, Luiz. Ergodesign e arquitetura de informação: trabalhando com o usuário. 2.ed. Rio de Janeiro: Quartet, 2009.

BARBOSA, Simone Diniz Junqueira Barbosa; SILVA, Bruno Santana da. Interação Humano-Computador. Rio de Janeiro: Elsevier, 2010.

BERTONI, Anaís Schüler. Projetação de interfaces dígito-virtuais: di-retrizes para o projeto centrado no usuário de ambientes virtuais de aprendizagem. 2011. 186f. Dissertação (Mestrado em Design) – Centro Universitário Ritter dos Reis, Porto Alegre, 2011.

DESCONSI, Juliana. Psicologia cognitiva: fundamentos para a projetação de ambientes dígito-virtuais. 2009. 179f. Monografia (Especialização em Design: Produto, Gráfico e Informação) – Centro Universitário Ritter dos Reis, Porto Alegre, 2009.

DIAS, Cláudia. Usabilidade na web: criando portais mais acessíveis. 2.ed. (publicação em português) Rio de Janeiro: Alta Books, 2007.

GARRETT, Jesse James. The elements of user experience: user-centered design for the web. New York: AIGA, 2003.

LIDWELL, William; HOLDEN, Kritina; BUTLE, Jill. Princípios Universais do design. Trad. Francisco Araújo da Costa. Porto Alegre: Bookman, 2010.

MEURER, Heli; SZABLUK, Daniela. Projeto E: aspectos metodológicos para o desenvolvimento de projetos dígito-virtuais. In: 9 ERGODESIGN | 9 USIHC, 2009, Curitiba. Anais do 9 ERGODESIGN | 9 USIHC, 2009.

NIELSEN, Jakob. Durability of usability guidelines. Useit.com, jan. 2005. Disponível em: <http://www.useit.com/alertbox/20050117.html>. Acesso em: 21 abr. 2011.

NORMAN, Donald A. O design do dia-a-dia. Trad. Ana Deiró. Rio de Janeiro: Rocco, 2006.

SANTA ROSA, José Guilherme; MORAES, Anamaria de. Avaliação e projeto no design de interfaces. Rio de Janeiro: 2AB, 2008.

ANAíS SCHüLER BERTONI

Mestrado pelo UniRitter

E-mail: [email protected]



26 Revista D • 4 • 2012

SIDNEI RENATO SILVEIRA

UniRitter

E-mail: [email protected]

Recebido em 30/07/2012Aceito em 30/11/2012

BERTONI, Anaís Schüler; SILVEIRA, Sidnei Renato. Sistema de

Projetação de Interfaces Dígito-Virtuais: a utilização do Projeto E como

metodologia para construção do Ambiente Virtual de Aprendizagem.

Revista D. Porto Alegre, n. 4, p. 11-26, 2012.

631-1787-1-PB

Documents

interfaces dgito

guide the design of

projeto do ava flow

projeto centrado

procedimento de projeto

projecting virtual

metodologia projetual

tambm chamada projeto