Storyboard

De acordo com Martin e Hanington (2012) storyboards constituem e representam narrativas gráficas de um contexto de uso de um produto (conforme figura abaixo). Às vezes são associadas a rápidas descrições textuais. Segundo os autores, elaborar storyboards ajuda “a capturar visualmente os fatores sociais, ambientais e técnicos importantes que moldam o contexto de como, onde e porque as pessoas engajam-se com produtos” (MARTIN e HANINGTON, 2012 p.154). Segundo Cybis (2010) essa técnica representa a interação dos usuários com produtos em ambiente de trabalho. “Ela corresponde ao detalhamento de um cenário de uso especificado para o sistema, consistindo em uma sequência de desenhos representando não só os esboços de telas, mas também os elementos do contexto (usuários, equipamentos, móveis, telefones, colegas, etc.)” (CYBIS, 2010 p.181). Segundo o autor, elas devem ser avaliadas e validadas pelos usuários e especialistas com base em heurísticas. Desta forma, para desenhar as narrativas gráficas o autor recomenda o uso de folhas de papel grandes que possam ser coladas nas paredes do ambiente de trabalho no intuito de serem constantemente observadas e analisadas.

storyboard

Fonte: Cybis (2010 p.181)

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Cenário Hipotético

De acordo com Preece, Roger e Sharp (2005), cenários correspondem a uma narrativa informal que descreve tarefas humanas em uma história que permite a exploração e discussão de contextos, necessidades e requisitos.

“É uma narrativa, textual ou pictórica, concreta, rica em detalhes contextuais, de uma situação de uso da aplicação, envolvendo usuários, processos e dados reais ou potenciais. […] Um cenário possui um enredo que inclui sequências de ações e eventos: o que os usuários fazem, o que acontece com eles, que mudanças ocorrem no ambiente, e assim por diante. Essas ações e eventos podem ajudar, atrapalhar ou ser irrelevantes para o atingimento do objetivo final (BARBOSA e SILVA, 2010 p.184).”

Complementando, Cybis (2010 p.170) destaca que são úteis para “comunicar uma parte das especificações de requisitos produzidas para a usabilidade e para a interface”. Para Kalbach (2009), geralmente possuem linguagem não técnica e uma visão clara do contexto, o que os torna fáceis de entender. São definidos a partir da perspectiva do usuário e da maneira como o mesmo compreende e, supostamente, interage com o produto. Segundo Cybis (2009) os cenários podem descrever a realização de uma tarefa já existente (cenários problema) e/ou definir uma situação futura (cenários de solução). Os cenários hipotéticos aqui propostos referem-se exclusivamente aos cenários de solução. Meurer e Szabluk (2010) recomendam que os cenários sejam elaborados utilizando-se como agentes da interação as personas definidas na contextualização.

 

cenarioHipotetico

cenarioHipotetico2

cenarioHipotetico2

Fonte da Figura. Caue Borella.Swell Check Aplicativo de previsão das ondas colaborativo. 2012.

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Definição das ferramentas, funcionalidades e conteúdos

Para que os alunos tenham uma ideia concreta do escopo, eles poderão iniciar a projetação definindo que ferramentas, funcionalidades e conteúdos farão parte do produto. Para isso, poderão estabelecer a organização, hierarquia e inter-relações entre conteúdos, ferramentas e funcionalidades através de organogramas, dividindos-os em categorias ou módulos. Meurer e Szabluk (2012) recomendam a técnica do card sorting (cartões sortidos) como sendo uma boa alternativa para executar essa tarefa. Para Martin e Hanington (2012), o card sorting gera opções para estruturação de informações e pode revelar diferentes esquemas organizacionais para menus, taxonomias e navegação (conforme figura abaixo). Segundo os autores, pelo fato de envolver diretamente os usuários, o método possibilita desenvolver aplicações onde a informação é encontrada com maior facilidade e com tarefas mais simples e objetivas. O card sorting estabelece diferentes modelos de classificação, importantes para entender que categorias parecem semelhantes ou complementares. É importante descobrir sobre o que pode e não pode ser agrupado (Barbosa e Silva, 2010 p.159). Em relação ao procedimento, Cybis (2010), recomenda que a informação seja descrita nas fichas de papel para serem espalhadas aleatoriamente numa mesa. Cada usuário convidado organiza-as em grupos de acordo com sua perspectiva. Por último, os resultados dos grupamentos de cada participante são combinados, e se necessário, tratados estatisticamente. “As uniformidades em termos de grupamentos e denominações serão mais fáceis de serem percebidas em amostras mais numerosas (mais de 12 usuários)” (CYBIS, 2010 p.178).

card01

card02.fw

Elaborado por Henrique Beier. Design Uniritter, disciplina de Projeto Gráfico IV, 2012.

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Reconstrução

reconstrucao

A reconstrução corresponde às etapas de escopo, estrutura e esqueleto do Projeto E. É caracterizada pelo início da projetação do produto propriamente dito. De acordo com Meurer e Szabluk (2012), essa fase é definida por sucessiva geração de alternativas. Requer o domínio de métodos e técnicas que possibilitem definir e conceituar a arquitetura informacional do produto, organizar e hierarquizar os conteúdos, planejar e esquematizar o modelo interacional, desenhar o fluxo das tarefas que constituem as ferramentas e funcionalidades, e estabelecer a estrutura das telas. A seguir, são recomendados alguns métodos e técnicas para que os alunos possam compreender, planejar e projetar um produto que corresponda às restrições, requisitos e possibilidades definidos na verificação. Entre as habilidades mais exigidas nesta etapa está a expressão e comunicação gráfica. A maioria dos métodos a serem usados terão como resultado desenhos preliminares, esquemas organizacionais, infográficos explicativos, fluxogramas, wireframes e wireflows, entre outros.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Verificação

verificacao

De acordo com Meurer e Szabluk (2012), ao término da etapa de desconstrução, a equipe de alunos está apta a definir a lista de restrições (o que representa limitações), requisitos (o que é compulsório e necessário) e possibilidades (o que é desejável e que agrega valor) a serem consideradas no novo produto. A verificação deverá levar em conta todas as informações e resultados obtidos nas técnicas e métodos executados na contextualização e na desconstrução e, consequentemente, sintetizados em forma de listas de verificação. É um momento crucial para o projeto. Requer vasta reflexão através de discussões para que o grupo possa definir, com segurança e precisão, quais fatores orientarão o processo projetual deste ponto em diante. É exigida capacidade de síntese. Cada aluno do grupo pode expor seu ponto de vista e argumentar a favor dele com base no que aprendeu até o momento. Para Meurer e Szabluk (2012), a verificação deve ser a mais específica e clara possível para que os alunos percebam com facilidade quando restrições, requisitos e possibilidades forem atendidos ou preenchidos. É recomendada a elaboração de um quadro no qual se identifica os requisitos ou as possibilidades e como se pretende atendê-los. No caso das restrições a situação é parecida, porém refere-se a como minimizar ou driblar uma situação ou circunstância indesejada.

listaDeVerificacao.fw

Fonte da Figura: Elaborado por Lucas Winck. Design Uniritter – TCC 2012 1.Website para nano-cervejaria Maniba

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Focus groups (grupos focais)

É um método que também envolve os usuários. De caráter qualitativo, servem, de acordo com Martin e Hanington (2012), para avaliar as opiniões, sentimentos e atitudes de um grupo de usuários acerca de um produto ou serviço. Para Barbosa e Silva (2010 p.154) “os grupos de focos têm como vantagem permitir obter, em pouco tempo, múltiplos pontos de vista de um grupo de pessoas. […] Podem ser realizados para gerar ideias; obter opiniões de pessoas sobre tópicos, conceitos ou demonstrações; […] identificar expectativas de diferentes grupos de pessoas, descobrir problemas, desafios, frustrações, atitudes, preferências e aversões […]”. Cybis (2010) ressalta que o sucesso de um focus group depende muito da habilidade do moderador. Segundo o autor, ele deve planejar a reunião preparando um roteiro com uma lista de assuntos que serão abordados em períodos de duas a quatro horas. É importante que conduza a reunião sem perder o foco. Os participantes (de seis a doze) devem ser de diferentes origens e perfis. Martin e Hanington (2012) recomendam que os participantes possam se apresentar antes da reunião começar e sejam esclarecidos sobre os objetivos da técnica. Focus groups, segundo os autores, servem especificamente para obter opiniões variadas dos usuários, não importando a profundidade das mesmas. O moderador possui o papel de encorajá-los a expor seu ponto de vista (Martin e Hanington, 2012). Representam uma oportunidade para os alunos organizar e moderar grupos de pessoas no intuito de obter informações e opiniões relevantes para seu projeto e aos próprios usuários, em forma de resultados.

 

FocusGroup

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Teste de resposta emocional

É um método que pressupõe testes com usuários. Para isso, recomenda-se recrutá-los e convidá-los a interagir com os produtos digitais que estão sendo investigados. De acordo com Memória (2005), é possível mensurar a experiência do usuário a partir do preenchimento de uma escala de valores apresentada a um grupo de usuários durante ou após terem interagido com um ou mais produtos. Neste teste, os valores são apresentados por pares de adjetivos polarizados (bipolares ou antagônicos) que se apresentam nas extremidades das escalas. A neutralidade está no centro. As marcações na escala permitem que o usuário se aproxime de um valor, conforme o seu grau de identificação com o mesmo.

emocional

Fonte da Figura:Elaborado por Lucas Winck Santi. Design Uniritter, disciplina de Projeto Gráfico IV, 2012.

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Da identidade gráfico-visual

Segundo Löbach (2007), as funções dos produtos estão divididas em funções práticas (aspectos fisiológicos e cognitivos de uso), funções estéticas (aspectos psicológicos da percepção sensorial) e funções simbólicas (aspectos espirituais, psíquicos e sociais). Para o autor, “a função simbólica dos produtos possibilita ao homem, por meio de sua capacidade espiritual, fazer associações com as experiências passadas” (Löbach, 2007 p.64). Ela deriva dos aspectos estéticos do produto e, em se tratando de produtos gráficos e digitais, tanto as funções estéticas quanto as funções simbólicas são representadas pela identidade gráfico-visual. Segundo Strunck (2007), a identidade gráfico-visual é definida por quatro elementos institucionais: os principais (logotipo e símbolo) e os secundários (cores padrão e tipografia ou alfabeto padrão). Meurer e Szabluk (2012) propõem a análise das características estéticas e simbólicas a partir desses quatro elementos, pois contribuem na identificação, credibilidade e usabilidade dos produtos digitais. Além disso, os autores acrescentaram a análise das imagens em suas diversas características e utilidades. No meio digital, imagens podem assumir grande importância na identidade gráfico-visual. Desta forma, recomenda-se aos alunos, as seguintes técnicas:

  1. A Análise da Assinatura Visual (logotipo e símbolo) considerando, segundo Weeler (2008), os seguintes aspectos: conceito (o que se pretende transmitir), legalidade (boas características óticas), personalidade (originalidade e credibilidade), atemporalidade (perene), pregnância (de fácil memorização), uso e aplicabilidade (aceita diferentes processos de impressão e em distintos materiais).
  2. A Análise Tipográfica para verificar e comparar o uso de fontes tipográficas, pesos, estilos, corpo, espaçamentos, combinações, legibilidade, leiturabilidade e outros.
  3. A Análise Imagética para identificar de que forma os produtos exploram as possibilidades de uso das imagens. Meurer e Szabluk (2012) identificaram as imagens quanto a sua função (imagens de conteúdo e de leiaute) e quanto a suas características (imagens estáticas e imagens em movimento). Desta forma, fotografias, ilustrações, pictogramas, texturas, fundos, ícones, botões, esquemas, infografias, texturas, animações, vídeos e outros podem ser primeiramente classificados para que, em seguida, sejam estudadas conforme o contexto.
  4. E a Análise Cromática (cores) para identificar quais são as cores predominantes, a porcentagem de uso de cada uma no leiaute, se possuem relação com ao conceito simbólico e se existe cuidado e coerência nas combinações das mesmas para gerar bons contrastes e evitar ruídos. Além disso, Meurer e Szabluk (2012) recomendam verificar se, além do padrão visual, as cores são utilizadas para distinguir diferentes módulos ou seções do produto.

01
02
0304
05

06

Fonte da Figura: Elaborado por Cauê Borella. Swell Check Aplicativo de previsão das ondas colaborativo.

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Comparativa de funcionalidades

Segundo Meurer e Szabluk (2010) analisando outros produtos é possível observar ferramentas e funcionalidades que podem servir de referência para o desenvolvimento de novos produtos. Nesta técnica, os autores recomendam a comparação entre ferramentas e funcionalidades de maior relevância encontradas nos produtos selecionados na análise contextual. Serve para verificar características funcionais e utilitárias das tarefas. Para proceder à comparação, recomenda-se a atribuição de escores e descrições críticas através de um quadro comparativo.

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL

Estruturais, morfológicas, funcionais e heurísticas

Para Löbach (2007 p.147) “o objetivo da análise estrutural é tornar transparente a estrutura de um produto, mostrar sua complexidade estrutural”. A partir de um processo de racionalização, é possível reconhecer e compreender, segundo Bonsiepe (1984), os tipos de componentes, a importância dos mesmos e as inter-relações entre eles. Em relação à configuração e morfologia, Bonsiepe (1984) e Löbach (2007) destacam a importância de identificar a concepção e a estrutura formal. Neste caso, os autores referem-se aos princípios geométricos, transições, concordâncias, acabamento cromático e tratamento de superfície que definem a composição estético-formal do produto.
Já em relação às propriedades ergonômicas e características de uso, Bonsiepe (1984) e Löbach (2007) recomendam realizar uma análise funcional. Trata-se de “um método para estruturar as características técnicas e funcionais de um produto, que podem ser observadas através de suas qualidades funcionais” (LÖBACH, 2007 p.146). No meio digital, a usabilidade define a facilidade e a qualidade de uso. Nielsen (2000) apresenta dez heurísticas que podem ser utilizadas para realizar a avaliação da usabilidade, servindo como guias para o desenvolvimento de novos produtos.
Com base em Meurer e Szabluk (2010), recomenda-se às equipes o seguinte procedimento para a realização da análise das características estruturais, morfológicas, funcionais e heurísticas: (1) Definição de quais produtos identificados e catalogados na análise de ‘similares e referências’ serão utilizados para esta análise. Por se tratar de um procedimento muito mais detalhado e aprofundado em relação à análise anterior, o número de produtos investigados pode ser bem menor. (2) Identificar se os produtos estabelecem alguma ordem estrutural com base em malhas estruturais e diagramacionais (grids). (3) Explorar todo conteúdo, ferramentas e funcionalidades disponíveis nos produtos escolhidos e a partir de então, desenhar o organograma estrutural dos mesmos. (4) Elaborar wireflows para mapear as principais tarefas (figura 9). (5) Relacionados aos wireflows, descrever a interação dos usuários com o produto através de casos de uso. (6) Com base nas heurísticas de Nielsen (2000), associar aos casos de uso e aos wireflows a avaliação da usabilidade, identificando quais heurísticas são violadas e qual a gravidade.

estrutural

Fonte da Figura: Elaborado Henrique Beier. Design Uniritter – TCC 2012. Aplicativo Android para desenho de tipografia modular

 

Texto extraído da tese de doutorado do professor Heli Meurer intitulada:
FERRAMENTA DE GERENCIAMENTO E RECOMENDAÇÃO COMO RECURSO NA APRENDIZAGEM BASEADA EM
PROJETO EM DESIGN DIGITAL