UNIVERSIDADE FEDERAL DE PERNAMBUCO CENTRO ACADÊMICO DO AGRESTE
DEPARTAMENTO DE DESIGN
LUCIANA OLIVEIRA DE CARVALHO
DESIGN DE INTERFACES DIGITAIS COM ÊNFASE EM
PROTÓTIPOS
LUCIANA OLIVEIRA DE CARVALHO
DESIGN DE INTERFACES DIGITAIS COM ÊNFASE EM
PROTÓTIPOS
Monografia apresentada a Universidade Federal de Pernambuco como pré-requisito para a obtenção de título acadêmico de bacharel em Design, sob orientação do professor doutor Manoel Guedes Alcoforado.
Prof. Manoel Guedes Alcoforado
Catalogação na fonte:
Bibliotecária - Simone Xavier CRB/4-1242
C331d Carvalho, Luciana Oliveira de.
Design de interfaces digitais com ênfase em protótipos. / Luciana Oliveira de Carvalho. - Caruaru: O Autor, 2015.
77f. : il. ; 30 cm.
Orientador: Manoel Guedes Alcoforado Neto
Monografia (Trabalho de Conclusão de Curso) – Universidade Federal de Pernambuco, CAA, Design, 2015.
Inclui referências bibliográficas
1. Design - metodologia. 2. Design de interface. 3. Interação homem - máquina. I. Alcoforado Neto, Manoel Guedes. (Orientador). II. Título.
740 CDD (23. ed.) UFPE (CAA 2015-070)
RESUMO
Esta pesquisa teve como objetivo desenvolver uma proposta metodológica de design de interfaces digitais com ênfase em protótipos para orientar designers quanto a utilização das ferramentas de prototipagem de acordo com as fases do processo de design, buscando inserir a experiência do usuário no processo através do feedback que se pode obter nos testes de usabilidade. A proposta metodológica foi aplicada em um experimento entre dois estudantes do curso de design, onde um dos estudantes utilizou a proposta em um projeto de website e o outro estudante realizou o mesmo projeto utilizando o conhecimento empírico adquirido no curso de Design. Ao final da pesquisa os resultados dos estudantes foram comparados, nos ajudando a compreender como a metodologia com ênfase em protótipos pode contribuir com o processo de design. Palavras-chave: Metodologia de design de interação. Design com ênfase em protótipos. Prototipagem de interfaces digitais. Design de interfaces digitais. Design de interação. Design da experiência do usuário.
ABSTRACT
This research aimed to develop a methodology for digital interfaces design with an emphasis on prototypes to guide designers to use prototyping tools according to the phases of the design process, trying to put the user experience in the process through feedback that can get out with usability tests. To test the proposed methodology was carried out an experiment between two design course students, where one of the students used the proposal in a website project and other student performed the same project using empirical knowledge acquired in the design course. At the end of the research, the progress of the students were compared, helping us to understand how the methodology with an emphasis on prototyping can contribute to the design process. Keywords: Interaction design methodology. Design with an emphasis on prototypes. Digital interfaces prototyping. Digital interfaces design. Interaction design. User experience design.
LISTA DE FIGURAS
Figura 1. Modelo de ciclo de vida simples ... 4
Figura 2. Modelo de ciclo de vida HAD ... 5
Figura 3. Modelo de ciclo de vida espiral ... 6
Figura 4. Modelo de ciclo de vida cascata ... 7
Figura 5. Modelo de ciclo de vida estrela ... 8
Figura 6. Exemplo de Storyboard ... 12
Figura 7. Exemplo de Sketch ... 13
Figura 8. Exemplo de Protótipo de papel ... 14
Figura 9. Exemplo de interface animada ... 14
Figura 10. Exemplo de Façade ... 14
Figura 11. Exemplo de Wizard of Oz ... 16
Figura 12. Exemplo de Mockup Digital ... 16
Figura 13. Exemplo de protótipo virtual imersivo ... 17
Figura 14. Exemplo de protótipo de alta fidelidade ... 17
Figura 14. Exemplo de protótipo de alta fidelidade ... 20
Figura 16. Protótipo de baixa fidelidade ... 22
Figura 17. Protótipo de média fidelidade ... 23
Figura 18. Protótipo de alta fidelidade ... 24
Figura 19. Captura de tela do software Pidoco ... 25
Figura 20. Captura de tela do software Dreamweaver ... 26
Figura 21. Captura de tela do software Flash ... 27
Figura 22. Captura de tela do software Illustrator ... 28
Figura 23. Captura de tela do software Powerpoint ... 29
Figura 24. Captura de tela do software Visio ... 30
Figura 25. Captura de tela do software Denin ... 31
Figura 26. Captura de tela do software Suede ... 32
Figura 27. Captura de tela do software Visual Studio ... 33
Figura 28. Captura de tela do software Axure ... 34
Figura 29. Captura de tela do software Justinmind ... 35
Figura 30. Captura de tela do software Indigo Studio ... 36
Figura 31. Captura de tela do software Sketchflow ... 37
Figura 32. Captura de tela do software iRise ... 38
Figura 33. Captura de tela do software Wix ... 39
Figura 34. Fluxograma da metodologia de design de interação com ênfase em protótipos ... 43
Figura 35. Materiais disponibilizados para confecção de protótipos ... 49
Figura 36. Materiais disponibilizados para confecção de protótipos ... 50
Figura 37. Protótipo de alta fidelidade confeccionado pelo estudante 1 ... 56
Figura 38. Protótipo de baixa fidelidade confeccionado pelo estudante 2 ... 56
Figura 39. Protótipo de média fidelidade confeccionado pelo estudante 2 ... 57
Figura 40. Protótipo de alta fidelidade confeccionado pelo estudante 2 ... 57
Figura 41. Páginas do site desenvolvido pelo estudante 1 ... 61
LISTA DE QUADROS
Quadro 1. Etapas dos ciclos de vida e o processo de Design ... 8 Quadro 2. Estágios dos protótipos ... 19 Quadro 3. Grau de fidelidade das ferramentas de prototipagem ... 40 Quadro 4. Modelo de ciclo iterativo de design de interfaces digitais com ênfase em protótipos ... 42 Quadro 5. Utilização de protótipos de acordo com as fases do processo de Design .. 44 Quadro 6. Perfil do estudante 1 (não utilizou a metodologia proposta) ... 47 Quadro 7. Perfil do estudante 2 (utilizou a metodologia proposta) 48 Quadro 8. Atividades realizadas pelos estudantes durante o experimento ... 54 Quadro 9. Distribuição do tempo no processo de design ... 55 Quadro 10. Produtividade das equipes com relação a pesquisas, protótipos e testes 58 Quadro 11. Análise do produto gerado ... 58
SUMÁRIO
INTRODUÇÃO ... 1
1. DESIGN DE INTERAÇÃO ... 2
2. METODOLOGIA DE DESIGN DE INTERFACE DIGITAIS ... 4
3. PROTOTIPAGEM DE INTERFACE DIGITAIS ... 10
3.1 Tipologia dos Protótipos ... 12
3.2 Classificação dos Protótipos ... 18
3.2.1 por área do design ... 18
3.2.2 por estágio do protótipo ... 18
3.2.3 por potencial de comunicação do protótipo ... 20
3.2.4 por grau de fidelidade do protótipo ... 21
3.3 Ferramentas e métodos de prototipagem para interfaces digitais ... 24
4. PROPOSTA METODOLÓGICA ... 40
5. EXPERIMENTO ... 45
5.1 Metodologia científica ... 45
5.2 Planejamento do Experimento ... 45
5.2.1 Planejamento da amostra ... 46
5.2.2 Planejamento das ações e dos procedimentos para a execução do experimento ... 48
5.4.3 Definição dos procedimentos de análise dos dados ... 51
5.3 Condução do experimento ... 52
5.4 Análise dos resultados ... 53
CONCLUSÃO ... 64
REFERÊNCIAS ... 66
1
INTRODUÇÃO
A evolução humana trouxe consigo muitos benefícios em suas descobertas ao longo dos anos. A humanidade tem buscado o conhecimento aprofundado para melhorar as condições de vida das pessoas em diversas áreas de atuação profissional. Na informática, as tecnologias vêm sendo desenvolvidas a passos largos. Com o desenvolvimento de novos produtos, poderão surgir usuários iniciantes que nunca utilizaram um produto semelhante antes. Os projetos que são realizados atualmente nesta área podem causar estranheza aos usuários inexperientes. Projetar interfaces que sejam compreensíveis favorece a interação dos usuários com os produtos, esta atividade merece a atenção do designer.
O Designer é um dos profissionais responsáveis por projetar as coisas do mundo, tais coisas que chamados de artefatos. A palavra artefato deriva de artifício, diz respeito aos objetos criados pelo homem, que não são produzidos pela natureza. No processo de desenvolvimento de artefatos, o designer projeta os elementos que irão compor o produto, incluindo sua interface. A interface possibilita as relações interativas entre o homem e o artefato, ela pode ser física ou digital. Projetar uma interface é uma tarefa que requer estudos e análises, principalmente conhecer o usuário para quem se está projetando. Existem muitas ferramentas, técnicas e métodos para coletar informações do usuário, que serão comentados mais à frente. A prototipagem pode ser entendida como um dos métodos que fornece o feedback do usuário ainda na fase inicial do processo de design. Através deste método podemos entender as questões referentes a usabilidade, acessibilidade, navegabilidade, atratividade e emotividade do usuário.
Esta pesquisa compreende o desenvolvimento de uma proposta metodológica para orientar a utilização dos tipos e ferramentas de prototipagem dentro do processo de design de interação. A partir desta proposta realizou-se um experimento para verificar como esta metodologia pode contribuir com o processo de design. Acredita-se que a utilização de uma metodologia com ênfase na prototipagem pode conduzir a experiência do usuário para o processo de design, prevendo situações de uso e possibilitando correções da interface no início do processo, reduzindo o tempo de finalização e o custo do projeto.
2
1.
DESIGN DE INTERAÇÃO
Em nossa vida cotidiana nos relacionamos constantemente com o mundo à nossa volta, sejam seres vivos ou objetos materiais. Relacionar-se com os objetos pode ser mais complexo do que se imagina, uma vez que a maioria deles não pode se comunicar conosco através da linguagem falada. Quando utilizamos um objeto pela primeira vez, é comum se sentir confuso com relação ao seu uso no primeiro instante. Quando um produto é bem projetado, logo esta confusão é desfeita, e o usuário começa a se familiarizar com os elementos que compõem aquela estrutura, seja por ter utilizado um produto similar anteriormente ou por associar seus elementos a conceitos que pertencem ao seu dia-a-dia. Um exemplo disto seria a sinalização dos sanitários, se o usuário for uma criança que nunca utilizou um banheiro público antes, ela poderia identificar a distinção de sexo associando os pictogramas às figuras masculina e feminina. Quando frequentamos ambientes públicos, este tipo de sinalização passa a fazer parte do nosso cotidiano, e a associação dos pictogramas tende a ser mais rápida. Até nos casos mais simples, como o exemplo citado, podem haver constrangimentos se houver problemas na compreensão dos pictogramas de modo que impeça a associação correta dos elementos com seus respectivos significados. Por isto, é importante que se conheça para quem estamos projetando, afim entender como estas pessoas, futuros usuários, receberão as informações que buscamos oferecê-las através de nossos projetos de design, seja uma informação visual, textual, auditiva ou sensorial.
É através da interface que o contato entre usuário e sistema é realizado, onde o sistema apresentará uma informação que será lida pelo usuário e permitirá a sua tomada de decisão. A interface está presente em todos os objetos materiais e virtuais, abrigam aspectos de usabilidade, acessibilidade, navegabilidade, atratividade e emotividade. Projetar uma interface é responsabilidade do designer, esta tarefa requer muitos estudos e análises. Preece, Rogers e Sharp (2005) tratam do assunto utilizando o termo “Design de Interação”, e definem este termo da seguinte forma: “Design de produtos interativos que fornecem suporte às atividades cotidianas das pessoas, seja no lar ou no trabalho”. Logo, o objetivo do design de interação é auxiliar as pessoas em suas tarefas, instruí-las a utilizar os objetos em sua volta, de forma que sua interação com a interface seja fácil, rápida e agradável. O design de interação tem sido tratado pelo
3
marketing como diferencial de um produto e pode determinar o sucesso ou o fracasso de uma empresa. Uma vez que a interface é mal projetada, o usuário não tem suas necessidades atendidas e se frustram, podendo não voltar a utilizá-la. Por isto, o design de interação é centrado na experiência do usuário, buscando compreender como o produto se comporta e é utilizado por pessoas do mundo real.
RUBIN (apud MARTINEZ, 2002) aponta os três princípios básicos para o design de interfaces digitais centradas no usuário:
1. Focalizar desde o começo no usuário e nas tarefas realizadas por ele, em um determinado ambiente (não adianta saber quais funções o software tem que executar sem saber quem é o usuário e porque precisaria dessas funções).
2. Medidas empíricas da usabilidade do produto observando a interação do usuário com ele (testes com usuários realizando tarefas representativas).
3. Utilizar um processo de design iterativo, com refinamentos sucessivos (onde o design pode ser modificado após as fases de prototipação ou testes), e análise de custo-benefício.
Sobre os aspectos relevantes para o design de interação Preece, Rogers e Sharp (2005) afirmam: “Os de maior importância são a usabilidade, a funcionalidade, a estética, o conteúdo, o look and feel e os apelos sensorial e emocional”. CARROLL (apud PREECE et al, 2005) complementa a afirmação acrescentando outros aspectos de grande alcance: “o divertimento, a saúde, o capital social (recursos sociais que se desenvolvem e são mantidos via redes sociais e compartilhamento de valores, metas e normas) e a identidade cultural, por exemplo, idade, grupos étnicos, raça, deficiências, situação familiar, ocupação e educação”. Todos estes aspectos nos mostram que a preocupação com o usuário é a base para se construir produtos interativos, como designers de interação devemos ter o contato com o usuário ainda na fase de conceituação de um projeto, e não apresentá-lo depois de finalizado, esperando que seja aceito, pois isto é incerto.
4
2.
METODOLOGIA DE DESIGN DE INTERFACES DIGITAIS
Segundo Oliveira Netto (2006) o processo de design de interação está baseado na lógica da construção cíclica e iterativa da interface, que envolve as seguintes etapas: (1) Análise do contexto; (2) Análise do usuário; (3) Análise da tarefa; (4) Realização de protótipos; (5) Avaliação da interface. Para Preece et al. (2005) este processo compreende quatro atividades básicas: (1) Estabelecer requisitos; (2) Criar alternativas de design; (3) Prototipar; (4) Avaliar. Durante o processo, estas atividades devem se complementar e se repetir, estas etapas compõem o ciclo de vida do design de interação. O ciclo de vida, representa a ordem que as atividades acontecem e como elas se relacionam umas com as outras. Existem vários modelos de ciclo de vida (simples, cascata, espiral, HAD, estrela) que devem ser utilizados de acordo com a necessidade de cada projeto.
• Modelo de ciclo de vida simples: Modelo iterativo e focado no usuário, desenvolvido por Preece a partir de observações e pesquisas acerca do design de interação. É baseado em outros modelos de ciclos de vida da IHC e representa como o design de interação ocorre na prática.
5
• Modelo de ciclo de vida HAD: Este modelo surgiu nos anos 90. Apresenta foco no usuário. Busca minimizar os riscos causados pelas alterações de requisitos durante o projeto. Neste modelo há uma limitação de tempo para se concluir o ciclo. São realizados workshops para discutir os requisitos do sistema e coletar pontos de vista diversos.
6
• Modelo de ciclo de vida espiral: Modelo desenvolvido por Boehm em 1988. Incorpora um modelo iterativo permitindo que o progresso seja revisado repetidamente. Sua construção define bem as fases de análise de riscos e prototipação, tem como foco a necessidade de controlar os riscos.
7
• Modelo de ciclo de vida cascata: Foi o primeiro modelo conhecido e a base de todos os outros. A sua construção é linear, uma etapa só deve ser iniciada após o termino da etapa anterior. É considerado um modelo falho pois os requisitos se alteram durante o processo.
8
• Modelo de ciclo de vida estrela: Modelo proposto por Hartson e Hix em 1989. Baseado no trabalho de designers de interfaces. Este modelo não especifica uma ordem de realização das atividades. É um modelo centrado na avaliação, sugerindo que o sistema seja avaliado após cada etapa do processo.
Figura 5. Modelo de ciclo de vida estrela (Fonte: Preece et al.)
Nestes cinco modelos de ciclo de vida podemos determinar algumas etapas em comum que representam o processo de design de interfaces digitais.
Quadro 1. Etapas dos ciclos de vida e o processo de Design. (Fonte: Autor)
Etapas M o d e lo s d e c ic lo d e v id a
Simples Identificar necessidades e
estabelecer requisitos
(Re)Design Construir uma versão interativa Avaliar
HAD Início do projeto
Workshop JAD
Design interativo e construção Avaliação do sistema final
Revisão da implemen tação
Espiral Determinação de objetivos,
alternativas e restrições Avaliação de alternativas, identificação, resolução de riscos Simulações, modelos, benchmarks Desenvolvimento e verificação do próximo nível do produto Planejamento das próximas fases Revisão
Cascata Análise dos requisitos Projeto Código Teste Manutenção
Estrela Requisitos/ especificaç ão Analise das tarefas, análise funcional
Projeto conceitual/ representação formal do design
Prototipação Implementação
Processo de Design
9
Observando as etapas destes ciclos de vida, podemos compreender que existe uma lógica de construção que favorece o processo de Design de interfaces Digitais. A partir da sequência das etapas é possível determinar as fases do processo de design, que podem ser traduzidas em: (1) Conceituação, (2) Desenvolvimento, (3) Finalização. Cada fase do processo é composta pelas atividades descritas a abaixo.
Conceituação: Inclui atividades como definição de requisitos, definição de metas, restrições, determinação de objetivos, definição das necessidades do usuário, do cenário, das necessidades do mercado, dos competidores, dos produtos similares, da empresa/cliente.
Desenvolvimento: Contempla as atividades de construção do design, construção de modelos, seleção de alternativas, implementação de códigos, representação formal do design.
Finalização: Esta etapa se resume na avaliação, revisão, manutenção, implementação e conclusão do projeto.
No quadro 1, observamos claramente a atividade de prototipação e criação de modelos nos ciclos Espiral e Estrela, durante a fase de desenvolvimento do processo de design. No ciclo Cascata podemos observar a atividade de realização de testes, subentende-se que são testes realizados com protótipos, porém não há especificações quanto ao tipo de teste. Os demais ciclos não especificam a fase de prototipação.
Para Oliveira Netto (2006) interface não deve ser testada em apenas uma fase, mas sim durante todo o processo de design, desde a construção do conceito. O designer pode confeccionar protótipos e realizar testes de usabilidade com os usuários, a partir destes analisar como a ação está sendo realizada. A análise pode ser feita inicialmente a partir da observação e acompanhamento do usuário, coleta de opiniões, testes de Benchmark, interpretação de interações feitas pelos usuários de forma natural ou utilizando métodos que tentam prever as dificuldades do usuário antes que ele possa testar a interface. Oliveira Netto (2006) afirma que “os testes de usabilidade visam medir em termos quantitativos o valor que o sistema atinge para fatores de usabilidade de interesse, tomados individualmente”. Desta forma é possível se obter resultados decorrentes da atividade prática da utilização da interface e a partir dos resultados
10
seguir moldando a interface de acordo com o projeto. Os testes práticos também avaliam quanto ao grau comunicação.
De acordo com as afirmações de Oliveira Netto (2006), propõe-se que a prototipagem seja a atividade principal do ciclo de vida do design de interação, pois pode auxiliar na fase de conceituação, desenvolvimento e finalização do projeto, fornecendo o feedback necessário para a construção de um projeto centrado na experiência do usuário. Alguns dos ciclos de vida citados por Preece (2005) apresentam prototipagem como atividade, mas não há direcionamento quanto ao uso adequado de protótipos de acordo com as etapas do processo de design e isto pode comprometer alguns aspectos no desenvolvimento do projeto. Por exemplo, dedicar muito tempo à confecção de protótipos de alta fidelidade no estágio inicial pode atrasar o projeto, caso os testes com usuários resultem em alterações na interface, alterações que poderiam ter sido previstas com protótipos de baixa fidelidade, de rápida confecção. Por isto é importante enfatizar e orientar a prototipagem no processo de design de interação.
3.
PROTOTIPAGEM DE INTERFACES DIGITAIS
Alcoforado (2007) define os protótipos como “Artefato físico ou digital desenvolvido para compreender, explorar, avaliar e comunicar um ou mais atributos do produto que está sendo desenvolvido”. Snyder (2009) completa afirmando que são ferramentas de grande ajuda para discutir o projeto entre membros da equipe, pois permitem uma melhor comunicação e exposição de ideias. Servem para viabilizar uma proposta, para definir alguns requisitos vagos, para realizar testes com usuários e avaliações. A atividade de construir protótipos estimula a reflexão sobre o design e direciona o projeto. Para Preece (2005), os protótipos são “representações limitadas de um design, que permite aos usuários interagir com ele e explorar a sua conveniência”. Pode ser um esboço feito em papel e também um modelo em escala menor de um prédio.
Sendo assim podemos concluir que protótipos são representações de uma ideia ou de características de um produto, podem ter finalidades diferentes, tais como analisar ideias com a equipe ou realizar testes com usuários, são construídos de acordo com a necessidade do projeto. Diferente do que alguns imaginam, até mesmo as
11
representações mais simples podem ser consideradas como protótipos, uma vez que oferecem feedback do usuário e assim auxiliam o processo de construção do projeto final.
Snyder (2009) acredita que existem 3 atividades básicas a serem consideradas no processo de prototipagem: (1) Designing (Pensar sobre o que o usuário vai experimentar); (2) Rendering what the user will see (Apresentar o que o usuário verá); (3) Coding the behavior (Codificar o comportamento).
A atividade de pensar o projeto é a mais difícil, pois nem todas as ideias podem ser viabilizadas com protótipos, por mais complexos que possam ser. As interfaces criadas pelo homem não podem representar toda a sua criatividade. Os métodos de prototipagem estão focados principalmente nas etapas de rendering e coding, e não nos ajudam necessariamente a nos tornar melhores designers. O processo de prototipagem pode inibir a criatividade do designer, caso não seja aplicado da forma correta. No estágio inicial do projeto o ideal é que os protótipos sejam realizados de forma rápida. Quando detalhamos demais um protótipo perdemos o foco da ideia e focamos em outros aspectos formais, com isto deixamos de pensar e desenvolver soluções melhores.
Existem muitas formas de apresentar uma interface, seja desenhando a mão ou em um computador utilizando os softwares Dreamweaver, Visual Basic entre uma infinidade de ferramentas. Nesta atividade devemos considerar quanto esforço é necessário em um determinado método e quanto precisamos detalhar a aparência do protótipo.
Sobre a atividade de codificar o comportamento de um protótipo, Snyder (2009) cita a afirmação de Joel Spolsky onde fala que codificar o comportamento de uma interface é a maior parte do trabalho, chegando a 90%. Porém, Snyder acredita que essa porcentagem pode variar de acordo com o tipo de interface e o tipo de ferramenta utilizada. Uma aplicação de Software pode compreender códigos complexos, prototipar utilizando estes códigos seria um desperdício de tempo na fase inicial de um projeto, uma vez que outras ferramentas mais simples podem responder às questões sem a necessidade da implementação de códigos.
12
3.1
TIPOLOGIA DOS PROTÓTIPOS
Segundo Alcoforado (2007), os protótipos podem ser classificados de acordo com seu tipo, estágio e nível de comunicação. Dentre os tipos citados por Alcoforado (2007) foram selecionados alguns que conseguem trabalhar melhor os aspectos das interfaces digitais são: Sketch, Storyboard, Protótipo de papel, Animação, Façade (não evolucionário), Façade (evolucionário), Wizard of Oz, Mockup digital, Protótipo virtual imersivo e Protótipo de alta fidelidade. A descrição de cada um segue de acordo com o estudo de Alcoforado (2007)
Storyboard: Consiste em uma sequência de telas desenhadas à mão livre que orienta o usuário desempenhar uma tarefa usando o sistema. Pode ser confeccionado com materiais de papelaria, tais como lápis, papel, cola branca, ou pode ser feito digitalmente utilizando softwares de desenho e mesa digitalizadora, para então ser impresso e testado no mundo real. O Storyboard é utilizado para confeccionar protótipos de baixa complexidade e necessita de um intermediador para interpretar as respostas do sistema para cada ação do usuário. Seu custo de produção é baixo, devido a isto é indicado para a fase de definição de requisitos do projeto.
13 Sketch: Pode ser entendido como um rabisco que fazemos para ilustrar uma ideia de forma rápida. É confeccionado com materiais de baixo custo como papel e lápis, ou pode ser feito digitalmente com a ajuda de uma mesa digitalizadora e softwares para desenho. Nesta técnica a interface é desenhada à mão livre podendo ser acompanhada por textos que descrevem alguma função do sistema. Por ser um protótipo de baixa fidelidade esta técnica é indicada para fase inicial do projeto. Pode ser útil para discutir o layout de uma interface entre os membros da equipe.
Figura 7. Exemplo de Sketch (Fonte: Gretchen Chern Design Research & Strategy).
Protótipo de papel: Esta técnica compreende uma simulação interativa da interface, utilizando materiais de baixo custo. Apresenta maior interatividade se comparada às técnicas de storyboard e sketch, embora seja confeccionada com os mesmos materiais. O designer não necessita de habilidades especiais para desenvolver este tipo de protótipo. Devido ao baixo grau de fidelidade do protótipo, esta técnica é indicada para fase de definição de requisitos do projeto.
14
Figura 8. Exemplo de Protótipo de papel. (Fonte: Bruno Biagioni)
Animação: Esta técnica compreende uma sequência de imagens que são exibidas em movimento contínuo. É muito utilizada para desenvolver tutoriais que auxiliam o usuário a executar uma determinada tarefa. Esta técnica é mais indicada para o ambiente virtual, pois a utilização de softwares especializados permite que animação seja feita com maior rapidez, ao contrário de uma animação feita com papel, onde cada quadro da animação seria desenhado manualmente. Este tipo de protótipo é considerado de média fidelidade e é utilizado para testar a navegação e o fluxo de telas de um projeto.
Figura 9. Exemplo de interface animada. (Fonte: A New Mobile UX Design Material por Rachel Hinman)
Façade: O nome “façade” se origina da palavra “facade” do francês que significa “fachada”, isto significa que esta técnica de prototipagem é uma representação superficial da interface. É considerada uma técnica de prototipagem de média
15
fidelidade, pois apresenta um maior grau de interatividade. Esta técnica permite que uma interface seja testada antes de ser construída de fato. Na construção de um website, por exemplo, existem muitos códigos por trás de cada função dos botões, que levam tempo para serem implementados, mas utilizando a técnica façade a mesma interface pode ser construída em outro software como o PowerPoint, que vai permitir a mesma interação de um website, sem a necessidade de escrever todos os códigos. Figura 10. Exemplo de Façade. (Fonte: JavaWorld)
Wizard of Oz: Esta técnica foi desenvolvida na década de 80 por John Gold, juntamente com Conti e Hovanyecs. Ela funciona da seguinte forma: O usuário interage com o software como se estivesse interagindo com o produto, e um operador humano simula a resposta do software para o usuário. Na aplicação desta técnica o operador instrui o usuário a realizar alguma tarefa no sistema, o operador antecipa a resposta do sistema e um assistente capta os dados para que o teste seja avaliado. A técnica Wizard of Oz tem o nome inspirado na obra O Maravilhoso Mágico de Oz de L. Frank Baum, devido ao fato de ter uma pessoa manipulando as respostas do sistema sem que o usuário saiba, a obra também retrata uma situação onde o personagem é enganado e a realidade é manipulada.
16
Figura 11. Exemplo de Wizard of Oz. (Fonte: The Chameleon Project)
Mockup Digital: É uma representação digital de uma interface construída com a utilização de softwares como PowerPoint, Flash, entre outros. Normalmente é utilizada para avaliar aspectos estéticos de uma interface, como o layout e elementos gráficos. Esta representação pode ser de baixa, média ou alta fidelidade.
Figura 12. Exemplo de Mockup Digital. (Fonte: ‘Aarh!’ Creative)
Protótipo virtual imersivo: Esta técnica possibilita que designers e usuários interajam com o sistema de forma natural-simulada através de recursos de realidade virtual, permitindo que a usabilidade do sistema possa ser avaliada. É possível avaliar o uso da interface de um dispositivo que ainda não foi desenvolvido materialmente, a partir de uma simulação no ambiente virtual.
17
Figura 13. Exemplo de protótipo virtual imersivo. (Fonte: Augmented Hyper-Reality film: the next interface after touch)
Protótipo de alta fidelidade: Esta técnica tem como objetivo atribuir ao protótipo todas as características que se espera do produto, em um alto nível de fidelidade. Trabalha de forma detalhada os aspectos estéticos, funcionais e de usabilidade, aproximando o protótipo ao máximo da interface final. Os protótipos de alta fidelidade levam tempo para serem construídos por serem mais complexos e detalhados. Podem ser construídos no ambiente real (para projetos de produto) ou no ambiente digital (para interfaces digitais). A aplicação desta técnica no ambiente virtual não necessita de intermediador ou de operador, o usuário realiza as ações e o sistema é configurado para responder a estas ações através de programação orientada a objeto, e outros tipos de linguagem de programação.
18
3.2
CLASSIFICAÇÃO DOS PROTÓTIPOS
Existe uma grande diversidade de tipos de protótipos, cada tipo de protótipo apresenta características próprias. Classificar os protótipos permite separar os tipos e agrupá-los por área do design, estágio do protótipo e pelo nível de comunicação do protótipo, desta forma é possível selecionar melhor o protótipo de acordo com a necessidade do projeto.
3.2.1
POR ÁREA DO DESIGN
O uso de protótipos é incentivado para diversas áreas do design, porém um tipo de protótipo pode servir para uma área e não servir para a outra, isto vai depender do nível comunicação que o protótipo pode oferecer e o que se pretende comunicar com o protótipo. No projeto de interfaces digitais um dos aspectos a serem avaliados com um protótipo é a usabilidade da interface, tal aspecto não poderia ser analisado utilizando a técnica de Rendering por exemplo, pois este tipo de protótipo serve apenas para avaliar o aspecto estético de uma interface, normalmente utilizado para o projeto de produtos.
Os estudos de Alcoforado (2007) revelam que as técnicas de prototipagem mais comuns para o projeto de interfaces digitais são: Sketch, Storyboard, Protótipo de papel, Animação, Façade (não evolucionário), Façade (evolucionário), Wizard of Oz, Mockup digital, Protótipo virtual imersivo e Protótipo de alta fidelidade, logo, utilizarei esta classificação para selecionar as técnicas a seres estudadas nesta pesquisa, que é voltada para a construção de interfaces digitais apenas.
3.2.2
POR ESTÁGIO DO PROTÓTIPO
Mesmo conhecendo as áreas de atuação dos protótipos, é importante entender quando usar cada um deles durante o processo de design. BUDDE (apud ALCOFORADO, 2007) afirma que “Protótipos podem ser caracterizados através de estágios de desenvolvimento. Cada estágio auxilia o designer a esclarecer os requerimentos definidos do projeto”. Podemos classificar os protótipos em três estágios: (1) Protótipo exploratório; (2) Protótipo experimental; (3) Protótipo evolucionário. Segundo
19
Alcoforado, o protótipo exploratório deve ser usado quando o problema não está claro suficiente para definirmos caminhos para o desenvolvimento de soluções projetuais. O protótipo experimental deve ser usado para implementação técnica e deve permitir que as ideias possam ser traduzidas em características do produto ou sistema. E o protótipo evolucionário, deve ser usado, não para o desenvolvimento de características isoladas do projeto, mas para um processo de evolução contínua até o produto final.
Dentre as técnicas de prototipagem selecionadas nesta pesquisa Sketch e Storyboard são as técnicas indicadas para o estágio exploratório do projeto, devido ao baixo custo e a rápida confecção do protótipo. As técnicas Protótipo de papel e a Animação podem ser aplicadas tanto no estágio exploratório como também no experimental. A técnica Façade não evolucionário é indicada para o estágio exploratório, e a Façade evolucionário pode ser aplicada tanto no estágio experimental como no estágio de evolucionário por permitir maior fidelidade do protótipo, assim como as técnicas Wizard of Oz e o Mockup digital, que são protótipos de média fidelidade. Para o estágio evolucionário são indicadas técnicas de alta fidelidade como o Protótipo virtual imersivo e o Protótipo de alta fidelidade, como observa-se no quadro 2
Quadro 2. Estágios dos protótipos. (Fonte: Alcoforado)
Nível de fidelidade Tipos Estágios
Baixa Sketch Ex p lo rat ó ri o Storyboard Protótipo de papel Ex p er imenta l Média Animação
Façade (não evolucionário) Façade (evolucionário) Ev o lu ci o n ár io Wizard of Oz Mockup digital
Alta Protótipo virtual imersivo Protótipo de alta fidelidade
20
3.2.3
POR POTENCIAL DE COMUNICAÇÃO DO PROTÓTIPO
Os protótipos podem ser classificados de acordo com seu potencial de comunicação. Alcoforado (2007) adota a classificação proposta pela German Association of Industrial Designers and Stylists (VDID – Verband der Deutschen Industrie Designer), German Counsel for Styling, e o modelo de Holde 2004, que analisa os seguintes aspectos: (1) Questões de usabilidade; (2) Questões funcionais; (3) Questões estéticas. Alcoforado explica que as questões de usabilidade são a interface entre o produto e usuário sobre o aspecto do uso, dando o senso de interações, usabilidade, proporções. Possui relação direta com o contexto de uso e com os procedimentos realizados por usuários na execução de uma tarefa. Questões funcionais habilitam o design a operar mecanismos, elementos funcionais e a avaliar as novas tecnologias dos produtos. Tem relação direta com a técnica, tecnologia e funcionalidade. Questões estéticas permitem comunicar a aparência do design. A imagem concreta de como será o produto. Com ele desejamos verificar as sensações referentes ao olhar e ao sentir, aspectos relacionados ao emocional da interação.
Figura 15. Relação dos protótipos com o potencial de comunicação (Fonte: Alcoforado)
Na figura 15 temos uma lista dos tipos de protótipo e um gráfico contendo três polos para representar a funcionalidade, usabilidade e estética dos protótipos. A proximidade do tipo de protótipo com um destes polos indica um maior atendimento do protótipo ao determinado potencial de comunicação. A maior proximidade do ponto
21
médio da curva que liga os dois polos, representa uma maior integração entre os níveis conectados. Uma maior aproximação do centro representa uma maior integração com todos os polos, ou seja é possível avaliar os três níveis de comunicação.
3.2.4
POR GRAU DE FIDELIDADE DO PROTÓTIPO
O grau de fidelidade de um protótipo aumenta à medida que se aproxima das características do produto final, assim como seu custo em dinheiro e tempo de confecção. Por outro lado, quanto maior o nível de fidelidade mais detalhado será o protótipo e mais aspectos poderão ser analisados. De acordo com a classificação de Reis (2004) os protótipos podem ser de baixa, média e alta fidelidade.
RETTING (apud PREECE et al. , 2005) argumenta que mais projetos deveriam utilizar a prototipação de baixa fidelidade por causa dos problemas inerentes à prototipação de alta fidelidade, como: Levam muito tempo para serem construídos; Os revisores e testadores (testers) tendem a comentar mais sobre aspectos superficiais do que sobre o conteúdo; Os desenvolvedores são relutantes em mudar algo em que trabalharam de forma artesanal por horas; Um protótipo de software pode criar expectativas muito altas. Apenas um bug em um protótipo de alta fidelidade já pode parar os testes.
• Baixa Fidelidade: De acordo com estudos de Reis (2004), os protótipos de baixa fidelidade são indicados para a fase de definição de requerimentos do projeto. Deve-se utilizar materiais de escritório para confeccionar os protótipos e podem ser feitos a mão.
Um dos tipos de protótipos mais simples pode ser confeccionado em papel ou cartão. Snyder (2009) afirma que esta técnica oferece feedback antecipado da usabilidade da interface, é confeccionado rapidamente. O protótipo de papel facilita a comunicação entre os membros da equipe de desenvolvimento do projeto, e entre a equipe e os usuários do sistema. Não requer habilidades específicas para ser confeccionado, sendo assim os membros de uma equipe multidisciplinar podem trabalhar juntos. Por fim, esta técnica incentiva a criatividade ainda no processo de desenvolvimento do produto.
22
Devido à sua simplicidade os protótipos de baixa fidelidade não apoiam a avaliação de todos os detalhes de um projeto (interações da interface com o usuário, layout e formato do produto, representações dinâmicas, tempo de resposta do sistema). Os testes realizados com protótipos de baixa fidelidade necessitam de um intermediador, que simulará as respostas do sistema a cada ação do usuário.
Figura 16. Protótipo de baixa fidelidade. (Fonte: Angus Center for Information Architecture)
• Média fidelidade: Os protótipos de média fidelidade são indicados para a fase de especificação da arquitetura de informação, são detalhados e com recursos de interação, podem ser confeccionados no Word, Power Point, Visio. Apoiam a avaliação do modelo conceitual usado no projeto e necessitam de pouco tempo e recursos para serem construídos. Os protótipos de média fidelidade são construídos para avaliar tudo que não se pôde avaliar com um protótipo de baixa fidelidade, é utilizado para coletar informações do usuário e assim aperfeiçoar o projeto. Este tipo de protótipo não necessita de intermediador, pois é fabricado com ferramentas que auxiliam a construção de interfaces digitais e simulam as respostas do sistema automaticamente.
23
Figura 17. Protótipo de média fidelidade. (Fonte: Angus Center for Information Architecture)
• Alta Fidelidade: Os protótipos de alta fidelidade tentam se aproximar ao máximo do projeto final, em um projeto de web design por exemplo, busca se manter o mesmo tamanho de página, corpo das fontes, cores, layout, dentre outros elementos que compõem um website. Este tipo de protótipo apoia a avaliação de todos os detalhes de um projeto, necessitam de mais tempo e recursos para serem construídos, devido a isto são pouco utilizados. São simulados com exatidão e não necessitam de intermediador. São indicados para a fase de lançamento de um projeto, são realísticos e podem ser confeccionados com auxílio das ferramentas Dreamweaver, Visual Basic e do código HTML.
24
Figura 18. Protótipo de alta fidelidade. (Fonte: Angus Center for Information Architecture)
3.3
FERRAMENTAS E MÉTODOS DE PROTOTIPAGEM PARA INTERFACES
DIGITAIS
Existem inúmeras ferramentas que possibilitam a construção de protótipos para interfaces digitais, cada um desses softwares é capaz de construir protótipos que pode ser de baixa, média ou alta fidelidade dependendo do suporte que o software oferece. Alguns softwares são mais indicados para a fase inicial do projeto, onde os conceitos ainda estão sendo construídos, outros são mais indicados para a fase final, por possibilitar uma maior interação ou permitir que o gráfico seja melhor trabalhado. Existem softwares que são similares e agrupam as mesmas funções entre si, é importante conhecer estes softwares para entender estas diferenças, quando devemos utilizar cada um e saber como o software poderá contribuir com o projeto. Utilizar um software que detalhe muito o protótipo na fase inicial do projeto pode ser desnecessário. Abaixo segue a relação de algumas ferramentas que podem ser
25
utilizadas na prototipagem de interfaces digitais seguidas da descrição de cada uma a partir da impressão do autor decorrente do uso destas ferramentas, acrescentando as informações fornecidas pelos desenvolvedores dos softwares.
• Pidoco: É um software online de criação de protótipos para interfaces de usuários (UI), acessado através do navegador de internet. Este software permite criar rapidamente interfaces digitais interativas para web, mobile, etc. Apresenta uma Interface amigável e inúmeras ferramentas de auxílio para a construção de interfaces digitais. Sua manipulação é simples, basta clicar em uma ferramenta e arrastá-la até a área desejada. A interface gerada neste software pode ter testada em modo on-line ou off-line. É possível ser testado não somente em computadores, mas em dispositivos móveis como Iphone, Ipad e dispositivos que ofereçam suporte ao sistema operacional Android. Entre seus recursos podemos citar possibilidade de realização de testes de usabilidade, personalização dos modelos e layout, permite a construção de protótipos interativos, variedade de formatos de exportação, integração de API, colaboração em tempo real. Figura 19. Captura de tela do software Pidoco. (Fonte: Wireframes Magazine)
26
• Adobe Dreamweaver: É um software voltado para o desenvolvimento de websites. As interfaces podem ser criadas no modo Design ou no modo HTML. O modo Design permite que a interface seja criada de uma forma mais rápida e o designer não precisa escrever códigos. Muitos usuários do Dreamweaver criticam o modo Design, pois ele acrescenta linhas de códigos desnecessárias que podem comprometer o funcionamento do projeto final. O ideal é conciliar os 2 modos, sempre que se utilizar uma ferramenta no modo Design, o código deve ser revisado. O Dreamweaver gera uma pré-visualização da página, simulando como se comportaria no navegador de internet. É possível criar protótipos interativos de alta fidelidade e exportá-los no formato html para que possam ser testados off-line em qualquer computador que possua um navegador, mesmo que não tenha o Dreamweaver instalado.
27
• Adobe Flash: É um software comumente utilizado para criação de animações para web, desenvolvimento de jogos digitais e projetos de websites, porém recentemente perdeu espaço para a ferramenta HTML5 no cenário web que oferece a mesma funcionalidade de forma mais leva e fluida. O Flash oferece suporte à programação orientada a objetos e utiliza a linguagem ActionScript. Sendo assim, permite que objetos sejam programados para receber funções, por exemplo, o menu de um website apresenta vários botões que levam a diferentes páginas ao serem acionados. Este software permite uma pré-visualização do projeto dentro do próprio ambiente e também é possível exportar o projeto no formato SWF, para que possa ser visualizado no navegador web em modo on-line ou off-line, facilitando a realização dos testes de usabilidade nos protótipos produzidos com esta ferramenta.
28
• Adobe Illustrator: Trata-se de um software voltado para criação de desenhos vetoriais, é muito utilizado na área de design gráfico para impressos. Valoriza o aspecto estético do protótipo, não admitindo interação no ambiente de trabalho (workspace). Pode ser utilizado na construção de protótipos de baixa fidelidade para aplicação das técnicas de storyboard, sketch e protótipos de papel em geral. Também pode ser utilizado para produzir protótipos de média fidelidade, por exemplo, muitos layouts de websites são criados no Illustrator e quando o layout está pronto o projeto é exportado para outro Software que permita a interação dos elementos que compõem a interface, como o Dreamweaver. Sendo assim pode ser confeccionado um protótipo descartável (impressos) ou evolucionário (digitais). Uma interface sem interatividade pode ser útil para testar outros aspectos do projeto, tais como configuração de elementos, contraste de cores, tamanho de fontes, etc.
29
• Microsoft PowerPoint: Muitos utilizam esta ferramenta para criar apresentações em slides, mas poucos sabem que neste software é possível confeccionar protótipos de interfaces digitais interativas de forma simples e rápida. Caso o projeto apresente inúmeras páginas, com o auxílio desta ferramenta processo pode ser agilizado, basta definir uma página como mestra e todas as outras manterão o mesmo estilo e elementos do layout, com isto o tempo para confecção do protótipo é reduzido. Os protótipos produzidos com esta ferramenta são considerados de média fidelidade porque simulam o aspecto estético e de usabilidade da interface, mas a funcionalidade do protótipo está comprometida por conta de ter sido confeccionado em um ambiente de simulação e não incorpora a linguagem de programação do produto final.
30
• Microsoft Visio: Trata-se de um aplicativo voltado para criação de diagramas de diversos tipos como organogramas, fluxogramas, modelagem de dados, diagramas de redes, plantas baixas, cartazes, etc. O Visio pode ser considerado um intermediário entre um programa de CAD (especializado em desenho vetorial de alta precisão para engenharia) e um programa de desenho artístico vetorial, como o Adobe Illustrator. Na comparação com essas ferramentas mais especializadas, as funcionalidades do Visio são bem inferiores; não é tão preciso quanto o AutoCAD, e não oferece recursos artísticos como o Illustrator. Porém, a flexibilidade, a simplicidade de uso e qualidade das ferramentas o tornam uma ferramenta excelente para aplicações rápidas, rascunhos, e diagramas de uso pessoal ou profissional.
31
• Dub Denim: É um software que ajuda os designers a desenvolver interfaces ainda no estágio inicial do projeto. É utilizado para fazer esboços com desenhos à mão livre que podem ser feitos com ajuda de uma mesa digitalizadora ou com o mouse. Permite que o desenho seja feito com maior grau de detalhamento, utilizando os cinco níveis da barra de zoom. Esta ferramenta não apresenta funcionalidade, só serve para testar configuração de elementos do layout da página. É apropriado para confeccionar protótipos de baixa fidelidade por ter certa restrição de ferramentas para construção. Figura 25. Captura de tela do software Denin. (Fonte: Dub)
32
• Dub Suede: Este software é apropriado para a aplicação da técnica Wizard of Oz, pois é baseado em comandos de voz. Pode ser utilizado para confeccionar protótipos que utilizem a voz como veículo de interação, por exemplo, você digita um número no seu celular para saber quanto lhe resta de crédito e o sistema responde com uma mensagem de voz. Mesmo utilizando o sistema de voz, a tarefa ainda está sendo realizada no ambiente digital. Alguns tutoriais também apresentam este sistema de voz para instruir o usuário a realizar uma determinada tarefa, é muito comum nos jogos digitais.
33
• Microsoft Visual Studio: Permite que os desenvolvedores criem com muita rapidez aplicativos que proporcionam experiências de usuário com a mais alta qualidade e riqueza. Para construir protótipos utilizando esta ferramenta é fundamental dominar o sistema .NET Framework e às linguagens Visual Basic (VB), C, C++, C# (C Sharp) e J# (J Sharp). Este software se baseia em três pilares para proporcionar melhor experiência para os programadores: Melhorias na produtividade do desenvolvedor; Gerenciamento do ciclo de vida do aplicativo; e Utilização das mais recentes tecnologias. Esta ferramenta trabalha bem o aspecto funcional do protótipo, e não necessariamente a aparência estética. Como há uma grande dedicação na construção do código, esta ferramenta é indicada para o desenvolvimento de protótipos de alta fidelidade.
34
• Axure RP Pro: Este software possibilita criação de protótipos digitais interativos a partir de wireframes (grid) de forma simples e rápida. Apresenta o conceito de página mestra, ou seja, a configuração da página mestra será repetida nas outras páginas do projeto. Dispõe de ferramentas de desenho para compor o layout, que são utilizadas da forma Drag & Drop, clicando na ferramenta, arrastando e soltando na área do wireframe. É possível configurar o comportamento dos elementos gráficos para acrescentar funcionalidade ao protótipo e possibilitar a interação nos testes com o usuário. É considerada uma ferramenta de prototipagem de média fidelidade, utilizada para testar a arquitetura da informação e navegabilidade de um sistema antes que seja construído de fato.
35
• Justinmind Prototyper: É uma ferramenta utilizada para criar protótipos de softwares e protótipos de websites de alta fidelidade. Oferece recursos normalmente encontrados em ferramentas de diagramação como o Drag & Drop, redimensionamento, formatação de widgets e possibilita a configuração de comportamentos como vínculo de páginas, animação, cálculos, simulação de banco de dados. Este software pode ser utilizado para testes remotos com o auxílio da ferramenta Justinmind UserNote, que permite aos usuários navegar através do protótipo remotamente. Os usuários também podem comentar acerca dos elementos do protótipo, a fim de dar o seu feedback.
36
• Indigo Studio: É uma ferramenta para o design de interação de interfaces digitais que possibilita a criação de storyboards e wireframes sem a utilização de códigos. É indicada para a prototipagem de interfaces web, softwares e aplicativos para dispositivos móveis. Pode confeccionar um protótipo de interface de usuário com rapidez, incluindo aspectos funcionais e animações, mantendo o foco na experiência do usuário em todas as etapas. É utilizado para rever o projeto juntamente com a equipe ou para realizar testes de usabilidade com os usuários. Pode ser considerada como uma ferramenta de confecção de protótipos de média fidelidade, por não aceitar a implementação dos códigos que serão utilizados no projeto final.
37
• Sketchflow: É um conjunto de recursos projetados para dar suporte ao processo de criação de protótipo que pode ser utilizado em diversas etapas do processo de design. É considerada uma ferramenta de prototipagem de média fidelidade mas, como é capaz de produzir protótipos experimentais e evolucionários, o grau de fidelidade do protótipo pode aumentar. O SketchFlow possibilita a exposição de ideias entre membros da equipe e apresenta grande relevância na realização de testes dinâmicos com usuários, cujos fornecerão feedback para a avaliação da interação do protótipo.
38
• iRise: É uma ferramenta de criação e simulação de interfaces digitais funcionais para softwares empresariais. Apresenta o método Drag&Drop para a construção de layout de páginas e widgets, possui recursos para a análise dados de interações e permite implementação de comportamentos para os elementos gráficos. A lógica de página mestra e modelos pode ser utilizada para tornar possível a reutilização do layout. Os protótipos confeccionados no iRise simulam todos os aspectos do produto final com exatidão, são protótipos de alta fidelidade e estágio evolucionário.
39
• Wix: É uma ferramenta de criação e simulação de interfaces digitais, mais especificamente utilizada na construção de interfaces para websites. É possível construir layouts e inserir interações, animações, entre outros elementos que favorecem o dinamismo do design. O Wix é uma das poucas ferramentas que constrói interfaces digitais interativas de alta fidelidade sem a necessidade de implementar códigos. Uma interface pode ser construída rapidamente com esta ferramenta. Além disto, existe uma opção de compartilhar o site com outras pessoas para que possam dar opinião a respeito.
40
De acordo com as informações coletadas acerca das ferramentas de prototipagem, foi possível fazer uma relação entre estas ferramentas e o grau de fidelidade dos protótipos que são produzidos através dos métodos (ver quadro 3). Quadro 3. Grau de fidelidade das ferramentas de prototipagem. (Fonte: Autor)
Grau de fidelidade
Ferramenta Baixa Média Alta
Pidoco X Dreamweaver X Flash X X Illustrator X X PowerPoint X Visio X Denim X Suede X Visual Studio X Axure X Justmind X Indigo X Sketchflow X X iRise X Wix X
4.
PROPOSTA METODOLÓGICA
Com toda a pesquisa realizada acerca dos protótipos, técnicas e ferramentas de prototipagem ficou clara a importância e os benefícios que trazem para o processo de Design, especialmente quando se fala em Design de Interação e Experiência do Usuário (UX). Porém, dentro da metodologia de Design de Interação, a prototipagem tem sido umas das últimas etapas do processo conhecido como ciclo iterativo. Além disto, nenhuma metodologia especifica como utilizar a prototipagem da melhor forma, deixando este campo muito aberto à escolha do Designer, escolha esta que precisa estar baseada nas necessidades do projeto. É importante que os designers conheçam bem sobre cada tipo de protótipo para saber qual o método mais adequado para cada fase
41
do processo de Design. Sendo assim, podemos afirmar que a prototipagem deve fazer parte de todas as etapas do processo de Design de Interação, se relacionando com todas as atividades do ciclo iterativo. A utilização de ciclos iterativos favorece o processo de design e ajuda a refinar as ideias e aprimorar todos os aspectos do design.
A proposta do ciclo de vida com ênfase em protótipos permite que a prototipação seja aplicada quantas vezes for necessário, na etapa de conceituação do projeto e durante todo o desenvolvimento da interface. Diversos tipos de protótipos podem ser aplicados simultaneamente, para avaliar aspectos diferentes da interface ou para garantir um resultado obtido anteriormente com outra técnica de prototipagem. A avaliação dos testes de prototipagem fornecerá informações valiosas para a evolução do projeto, quando o resultado desejado for obtido, o produto final estará pronto, caso contrário as atividades do ciclo deverão se repetir até que o resultado seja satisfatório. Devemos compreender que cada projeto de construção de interfaces apresenta suas particularidades. Durante o processo de design, a ordem em que ocorrem as atividades podem surgir de forma diferente, as repetições de cada etapa só poderão ser determinadas ao decorrer do projeto.
Analisando as fases do processo de Design, definidas a partir dos modelos de ciclo de vida existentes, foi possível compreender a lógica da construção de interfaces digitais, que se resume às seguintes etapas de um ciclo iterativo: (1) Projetar, (2) Construir, (3) Testar. Essas etapas se repetem em todas as fases do processo, seja na fase de Conceituação, seja na fase de Desenvolvimento ou na fase de Finalização, porém na fase de Conceituação recomenda-se a construção de protótipos de baixa fidelidade, na fase de Desenvolvimento recomenda-se protótipos de média fidelidade e na fase de Finalização recomenda-se protótipos de alta fidelidade. Antes de avançar de uma fase para a outra, no processo de design, é preciso fazer uma avaliação, e assim determinar se os objetivos foram atingidos, caso sim, dá-se início a próxima fase.
42
Quadro 4. Modelo de ciclo iterativo de design de interfaces digitais com ênfase em protótipos. (Fonte: Autor) Conceituação A va lia çã o Desenvolvimento A va lia çã o Finalização A va lia çã o
Baixa Fidelidade Média Fidelidade Alta Fidelidade
P ro to ti p age m
De acordo com o quadro 4, o modelo de ciclo de vida com ênfase em protótipos se inicia na etapa de Conceituação, onde deve-se projetar, construir e testar protótipos de baixa fidelidade, ao atingir os objetivos e metas, o projeto avança para a próxima etapa de Desenvolvimento, e segue realizando as etapas do ciclo utilizando protótipos de média fidelidade, até que os objetivos desta fase estejam concluídos. Então inicia-se a fase de Finalização, onde o ciclo será iniciado mais uma vez com protótipos de alta fidelidade. Caso haja alterações conceituais no decorrer do projeto, o designer poderá retornar a fase de conceituação e recomeçar o ciclo, independente da fase atual. Na figura 34 (fluxograma), a linha tracejada representa a mudança de conceito.
43
Figura 34. Fluxograma da metodologia de design de interação com ênfase em protótipos (Fonte: Autor)
A prototipagem pode ser realizada durante todo o ciclo de vida do Design de Interação, o designer precisa selecionar as técnicas de prototipagem mais adequadas e saber qual a melhor sequência de aplicação destas técnicas. A escolha da técnica está atrelada a fase do processo de Design. Quanto mais avançado esteja o projeto, mais fiel deverá ser o protótipo. Adotando a classificação de protótipos por estágio proposta for Alcoforado (2007), os protótipos do tipo Exploratório devem ser utilizados na fase de conceituação do processo de Design, para tal é indicado o desenvolvimento de protótipos de baixa fidelidade. Em geral são protótipos descartáveis, confeccionados com matérias simples. Os protótipos do tipo Experimental compreendem as técnicas de prototipagem de média fidelidade. Sua utilização é indicada para a fase de
44
desenvolvimento do processo de Design. Os protótipos do tipo Evolucionário podem ser de média fidelidade ou de alta fidelidade, são aplicados na fase de desenvolvimento e finalização, eles acompanham e evoluem durante o processo de Design.
Analisando o quadro 5 podemos entender melhor a utilização da proposta metodológica de acordo com os estágios de desenvolvimento do design de interfaces digitais. A proposta determina qual o melhor estágio de protótipo, qual grau de fidelidade deve ser utilizado, quais técnicas e ferramentas ideais e quanto tempo o protótipo leva para ser confeccionado.
Quadro 5. Utilização de protótipos de acordo com as fases do processo de Design. (Fonte: Autor)
Fases do Processo de Design de Interação
Conceituação Desenvolvimento Finalização
Estágio do protótipo Exploratório Experimental Evolucionário Evolucionário Grau de fidelidade
Baixa Média Alta
Tipos de protótipos Sketch Storyboard Protótipo de papel Animação Façade Wizard of Oz Mockup digital
Protótipo virtual imersivo Protótipo de alta fidelidade
Ferramentas e métodos Materiais de papelaria Illustrator Denim Pidoco Illustrator PowerPoint Visio Suede Axure Indigo Sketchflow Visual Studio Justinmind Sketchflow iRise Dreamweaver Flash Wix Tempo de confecção
45
5.
EXPERIMENTO
CRESWELL (2010, p 178) afirma que “a pesquisa experimental busca determinar se um tratamento específico influencia um resultado”. Para verificar como a proposta metodológica com ênfase em protótipos pode auxiliar no processo de design, foi realizado um experimento, inicialmente pensou-se em dois grupos de estudantes, onde um grupo utilizaria a metodologia proposta e o outro utilizaria o conhecimento empírico. Porém, devido as dificuldades enfrentadas o experimento foi realizado com dois estudantes do curso de design.
Segundo Barros (2008), na pesquisa experimental o investigador trabalha com a manipulação de variáveis, observação e interpretação de reações. É possível experimentar e comprovar se a proposta metodológica atingirá as expectativas desejadas.
5.1
METODOLOGIA CIENTÍFICA
Para orientar o experimento, foi utilizada a metodologia de pesquisa experimental proposta por Marinho (apud BARROS, 2008), que apresenta a seguinte estrutura:
(a) Investigação e definição do problema em estudo; (b) Literatura sobre o problema (pesquisa bibliográfica); (c) Elaboração de hipóteses;
(d) Definição do plano experimental; (e) Realização do experimento; (f) Apresentação de dados;
(g) Provas de significância (comprovam-se ou rejeitam-se as hipóteses); (h) Análises ou interpretação de resultados;
(i)
Conclusões.5.2
PLANEJAMENTO DO EXPERIMENTO
De acordo com Barros (2008), definir o plano experimental significa “Estabelecer os caminhos para a realização do experimento. Estruturam-se tarefas, além de
46
programar o método de controle sistemático de variável, da amostra e dos instrumentos de coleta de dados”. Para Barros o experimento abrange o estudo de dois grupos: (1) Grupo de controle, (2) Grupo experimental. A proposta metodológica deve ser aplicada apenas no grupo experimental, e o resultado do experimento entre os dois grupos deve ser comparado para verificar o comportamento das variáveis.
Para que o experimento fosse realizado corretamente foi preciso descrevê-lo inteiramente antes da sua condução. Corrêa da Silva (2005) afirma que o planejamento do experimento pode ser organizado da seguinte maneira:
Planejamento da amostra: Deve ser constituída por unidades que representem a gama de variabilidade das unidades da população objetivo. Se essa população é constituída por unidades dispersas no espaço e no tempo, então a amostra deve ser constituída por unidades dispostas em diferentes posições do espaço e do tempo.
Planejamento das ações e dos procedimentos para a execução do experimento: Esse planejamento é necessário para minimizar a ocorrência de situações não previstas que possam implicar prejuízos para o experimento, especialmente aquelas que possam originar fontes de variação estranhas perturbadoras.
Definição do modelo estatístico e dos procedimentos de análise dos dados: Constitui a base para a definição dos consequentes procedimentos estatísticos apropriados para a análise dos dados com vistas à derivação das inferências objeto do experimento.
5.2.1
PLANEJAMENTO DA AMOSTRA
A proposta inicial para seleção da amostra foi reunir dois grupos de estudantes do curso de Design. Solicitou-se que os estudantes realizassem a inscrição online, onde deveriam preencher um formulário (ver Apêndice A) para participar do experimento.
Depois os estudantes seriam distribuídos em duas equipes e a seleção dos membros de cada equipe se daria a partir das respostas aos formulários de inscrição, onde cada membro informou qual a sua ênfase no curso de design (Moda, Gráfico ou Produto), qual o seu período no curso, sua experiência em tecnologia, sua experiência em metodologias de design de interfaces digitais, sua experiência em softwares gráficos,
47
sua experiência em web design e se já cursou disciplinas sobre desenvolvimento de interfaces digitais. Com estas informações seria possível distribuir os membros de forma que o nível de ambas as equipes pudessem se aproximar ao máximo. Ao equilibrar o conhecimento em tecnologia e design, o uso da metodologia proposta seria o diferencial entre os projetos apresentados por ambas as equipes.
Além disto, os membros das equipes receberiam um treinamento onde aprenderiam a manipular alguns softwares de confecção de protótipos, que poderiam utilizar durante o experimento. Sendo um de baixa fidelidade, um de média fidelidade e um de alta fidelidade. As equipes receberiam o mesmo briefing (ver Apêndice B) e os mesmos materiais para trabalhar. Depois uma das equipes experimentaria a proposta metodológica com ênfase em protótipos, e a outra utilizaria o conhecimento empírico adquirido por suas experiências e no curso de design.
Porém, após quatro tentativas de realizar o experimento, não foi possível reunir voluntários suficiente parar formar grupos, restringindo o comparativo a dois estudantes. Conforme pode ser conferido no tópico de condução do experimento.
Nos quadros 6 e 7 podemos observar os perfis dos dois estudantes que participaram do experimento, de acordo com as informações coletadas no formulário de inscrição. O estudante 1 utilizou o conhecimento empírico adquirido no curso para desenvolver o seu projeto, e o estudante 2 utilizou a metodologia de design de interação com ênfase em protótipos proposta por esta pesquisa.
Quadro 6. Perfil do estudante 1 (não utilizou a metodologia proposta). (Fonte: Autor)
Estudante 1 (Não utilizou a metodologia proposta)
Ênfase no curso de Design Gráfico
Período do curso 4º
Já cursou alguma disciplina de desenvolvimento de interfaces digitais? Não Numa escala de 1 à 5, qual sua experiência em tecnologia? 4 Numa escala de 1 à 5, qual a sua experiência em metodologia de design de interfaces digitais? 2 Numa escala de 1 à 5, qual a sua experiência em manipulação de softwares gráficos? 4 Numa escala de 1 à 5, qual a sua experiência em desenvolvimento web? 2
