Este documento resume um trabalho de conclusão de curso sobre design de interação realizado por quatro alunos da Universidade Estadual de Maringá. O trabalho aplicou várias técnicas de design como brainstorming, mapas mentais, card sorting e wireframes para desenvolver um site sobre bebês. Estes estudos ajudaram a definir cores, fontes, layout e estrutura de navegação do site para melhorar a usabilidade e a experiência do usuário.

1. UNIVERSIDADE ESTADUAL DE MARINGÁ - UEM
Campus Maringá
Trabalho de Design de Interação
do curso de pós-graduação
Resumo geral das atividades
Rodrigo Pereira Bonini
Silvio Sales do Nascimento Júnior
Henrique Rezende Pinto
Acácio Rodolfo Purgano
Maringá-PR
2010

2. UNIVERSIDADE ESTADUAL DE MARINGÁ - UEM
Campus Maringá
Rodrigo Pereira Bonini
Silvio Sales do Nascimento Júnior
Henrique Rezende Pinto
Acácio Rodolfo Purgano
Resumo geral das atividades
Trabalho submetido à Universidade Estadual de Maringá como trabalho de conclusão das
aulas de Design de Interação do curso de pós-graduação – Desenvolvimento de aplicativos
para web.
Professor Frederick van Amstel
Maringá-PR
2010

3. Sumário
Introdução ............................................................................................................................................... 1
1. Design de Iteração ........................................................................................................................... 2
2. Brainstorming .................................................................................................................................. 3
3. Mapa mental (Mind Map) ............................................................................................................... 4
4. Card-sorting..................................................................................................................................... 5
5. Estudo de Cores e Fontes ................................................................................................................ 6
6. Wireframe ....................................................................................................................................... 7
7. Write Maps ...................................................................................................................................... 9
8. Layout final ................................................................................................................................... 10
9. Conclusão ...................................................................................................................................... 11
Referencias Bibliográficas .................................................................................................................... 13

4. 1
Introdução
Diversas novas tecnologias estão sendo inseridas no mercado, oferecendo ao
consumidor um produto atraente que irá lhe proporcionar muitas vezes comodidade,
facilidade, agilidade e até diversão. Muitos desses produtos realizam suas funcionalidades,
porém muitos deles são de difícil utilização, complexos, possuem desagradáveis aparências e
o pior de tudo não possui design voltado ao público consumidor, ou seja, o produto não
apresenta características que facilitem a comunicação com o usuário.
A questão de usabilidade é essencial para a busca de informação, os meios de
comunicação como os web sites devem possuir mecanismos que facilitem o rápido acesso as
informações, o usuário sempre procura agilidade que pode ser adquirido através de um
agradável design que permita uma interação precisa. Esse é um fator importante para o
sucesso de um produto, a relação que ele tem com o seu usuário, o artefato tem que oferecer
uma boa interação com o humano. A maneira do ser humano utilizar determinados artefatos
computacionais e de sistemas de informação é o principal foco para se buscar o design de
interação com o ser humano. Isso tem sido feito usando-se poderosas ferramentas
computacionais na análise de dados coletados de acordo com métodos experimentais.
Tomando como base os conceitos, técnicas, ferramentas e trabalhos em grupos
apresentado nas aulas de Design de Interação, elaboramos este relatório descrevendo claro e
objetivamente os conhecimentos adquiridos.

5. 2
1. Design de Iteração
As complexidades relativas a desenvolvimento de novos produtos e serviços, é
inerente à diversas áreas técnico-científica do conhecimento. É importante no processo
criativo de desenvolvimento de novos produtos o uso de técnicas que disponibilizem
facilidade de visões conceituais sobre o objetivo do produto.
Fatores socioculturais, acessibilidade, publico alvo, e outros fatores devem ser
considerados no desenvolvimento não só de novos produtos, como de serviços.
Design de interação com o estudo de metodologias consiste em métodos
apoiados em pesquisa com usuários, testes de usabilidade, pesquisa de mercado, etc.
No produto de software é relevante considerar alguns desses métodos, no
produto final valores agregados podem ser criados, diminuindo os custos com re-projeto,
assistência técnica e treinamento com os usuários.
“Design é alma das criações humanas” (Steve Jobs)

6. 3
2. Brainstorming
Técnica utilizada para gerar idéias. Consiste em uma discussão em grupo onde se
externam, sem censura, todo tipo de associações que vierem à mente sobre determinado
problema proposto. Objetiva obter dos participantes a maior quantidade possível de idéias
para uma avaliação posterior. Geralmente é feita em conjunto por duas ou mais pessoas.
Fonte: “http://rodolfox19.wordpress.com/2009/08/19/mini-glossario-do-design-
de-a-ate-d/”
O primeiro brainstorming realizado no projeto foi para a definição das idéias do
projeto e de escopo. Durante 10 minutos os membros da equipe discutiram idéias livremente
sem interrupção ou críticas, e ao final foi definido um serviço de vendas de fraldas para bebês.
O ultimo brainstorming foi utilizando a ferramenta on-line mindmeister
(www.mindmeister.com), aonde foram colocadas e organizadas algumas idéias sobre os
possíveis menus da aplicação.

7. 4
3. Mapa mental (Mind Map)
Quando no processo de desenvolvimento é necessário que a equipe toda entenda
as funcionalidades gerais do produto, um diagrama é totalmente aceitável e de fácil
entendimento. Com o auxílio do serviço on-line em tempo real mindmeister, foi desenvolvido
o mapa mental abaixo, como primeira definição das funcionalidades do projeto do site a ser
desenvolvido (meubebe.com).
Imagem 1: Mapa mental, projeto site sobre bebês.

8. 5
4. Card-sorting
Trata-se de uma técnica utilizada pelos arquitetos da informação para
compreender como os usuários classificam determinadas informações em sua mente.
Para o desenvolvimento do projeto do site meubebe.com foram realizados testes
com card-sorting utilizando o site visando a criação de menus que classificassem melhor as
informações e facilitassem a utilização das navegações do site:
Imagem 2: Resultado da análise do card-sorting.
As analises não são totalmente consistes sendo que os estudos foram realizados
com especialistas na área e não com potenciais usuários do produto final, também não foi
possível realizar os testes com um número suficiente de pessoas para tirar conclusões
significativas. Porém já foi possível identificar algumas falhas na consistências das
informações com esse estudo, para que tudo seja resolvido na fase de projeto, evitando gastos
com modificações futuras.
A organização dos grupos sofreu algumas modificações importantes depois da
análise do dendograma. Tendo seus menus quase que totalmente reformulados.

9. 6
5. Estudo de Cores e Fontes
As combinações de cores foram estudadas pelo grupo levando em consideração
os usuários potenciais dos produtos (mães e pais de bebês) por isso foram estudas cores leves
e fonte que facilita a leitura, visando dar um ar confortável para estudos sobre bebes e
compras on-line.
Imagem 3: Resultado de um estudo de cores.

10. 7
6. Wireframe
Wireframe é um desenho básico, como um esqueleto, que demonstra de forma
direta a arquitetura de como o objeto (interface, página da internet, modelo, etc.) final será de
acordo com as especificações relatadas.
Ele é elaborado para organizar os elementos que entrarão na composição do
projeto final, no entanto, ele deve ser feito da maneira mais simples possível, mostrando
apenas o essencial, como uma espécie de rascunho, sem cores ou imagens.
O objetivo do Wireframe é auxiliar o desenvolvedor no entendimento dos
requisitos que foram recolhidos junto ao cliente com relação as funções e objetos que um
sistema (mas não somente relacionado a informática ou internet, pode ser um objeto, modelo,
etc.) deverá conter.
Fonte: http://www.baixaki.com.br/info/976-o-que-e-wireframe-.htm
Algumas telas foram esboçadas para definição dos posicionamentos de
componentes, imagens, etc. Com o uso dos wireframes feito de maneira correta, no momento
de projetar as telas e definir o design final, o processo fica mais curto ajudando o design de
interface a chegar em um produto final em menos tempo. Abaixo encontram-se os wireframes
desenvolvidos:
Imagem 4: Tela principal do projeto site sobre bebê.

11. 8
Imagem 5: Tela dos dados sobre o bebê.
Imagem 6: Tela de vídeos do bebê.

12. 9
7. Write Maps
Depois de analises com cardsorting e brainstorming foi definida uma estrutura
do mapa do site writemaps.
É importante destacar que a facilidade de uso do produto final e a economia de
tempo em que os usuários ganham com bons estudos e técnicas para desenvolvimento de
menus de fácil entendimento, geram além de agregação de valor ao produto, um conforto e
vontade de retornar ao site do usuário.
Imagem 7: Resultado writemaps.

13. 10
8. Layout final
Ao final dos estudos o grupo chegou a um layout principal final, com a
organização dos menus adquiridas pelos estudos de classificação de informações. Cores leves
e fontes de fácil entendimento foram prioridade, alem de um logotipo que identificasse a
empresa e que pudesse ser misturado com qualidade as cores do site.
Imagem 8: Layout do projeto sobre bebês.

14. 11
9. Conclusão
Um produto não pode ser projetado somente com o intuito de realizar
determinadas funções, ele precisa ser desenvolvido com o pensamento voltado ao seu
manuseio, é necessário um bom design de interação para facilitar o acesso às funções do
produto.
Desenvolvendo processos onde se aplica conceitos construídos com base na
observação das experiências de usuários, poderá projetar design especifico que irá adequar o
produto com uma perfeita interação do usuário. Os benefícios de um bom design são muito
vantajosos e consideráveis, como adequar respostas do sistema às entradas do usuário,
balancear interação e funcionalidade e também prevenir erros do usuário.
A idéia de um produto projetado com a técnica de Brainstorming traz uma
explosão de novidades, a princípio as idéias parecem não muito boas, mas depois que forem
analisadas e discutidas podem se transformar em soluções ou produtos inovadores. Com uma
entrevista de usuário descobre-se que a idéia realmente pode dar certo. Para analise do
desenvolvimento os diagramas são fundamentais para apresentar informações em todas as
fases do processo de planejamento. As cores utilizadas devem ser bem estudadas,
transmitindo o clima apropriado da idéia central do produto, isso garante certa estabilidade e
conforto ao usuário. A logomarca quando bem significativa e criativa juntamente com suas
cores fará a identificação do seu artefato, a imagem desta logomarca quando conhecida dará
referencia ao produto ou empresa.
As fontes, coleções de caracteres tipográficos, geralmente são esquecidas por
muitos designers, que acabam errando na escolha das fontes para os projetos. Antes de
escolher o tipo de uma fonte é preciso fazer um estudo para decidir qual fará parte do projeto.
Uma fonte bem escolhida pode transmitir até uma maior usabilidade, podendo transformar o
produto em algo agradável para se utilizar, ou até mesmo passar um maior significado de uma
empresa para seus clientes. Para a análise de fontes de uma empresas é preciso conhece-lá
mais a fundo, como sua história, produtos, logomarca entre outros. As fontes transmitem a
imagem, sendo de um produto ou uma empresa.
O processo de desenvolvimento de protótipos tradicionais permite que sejam
identificadas as falhas de projeto com o objetivo de fazer as devidas correções e melhorias
que não se conseguem prever ou, até mesmo, inferir durante a fase de desenvolvimento, mas

15. 12
que, no entanto, se tornam evidentes quando se coloca o protótipo em situação semelhante à
de trabalho.
Card-Sorting é essencial para evitar futuros problemas de usabilidade. O
desenvolvedor e o próprio design utiliza um cenário próprio, utilizando sua maneira de pensar
e muitas vezes essa maneira de pensar não é a mesma do usuário, o usuário tem em mente o
prático e especifico para atender suas verdadeiras necessidades de maneira rápida. A técnica
Card-Sorting permitiu avaliar se o cenário planejado possui usabilidade, essa técnica extrai a
experiência e a visão de um sistema apropriado para os costumes do usuário.
Observamos que ao utilizar todas as técnicas que mencionamos ficou muito
simples projetarmos um produto que terá muito mais chances de se destacar no mercado
concorrente.

16. 13
Referencias Bibliográficas
Websites:
Writemaps. Create, Edit and Shate your writemaps on-line.
Disponível em: <http://writemaps.com/>
Acesso em: 18 de maio de 2010
Card Sorting. Improve the organization of your site
Disponível: <http://websort.net/>
Acesso em: 18 de maio de 2010