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

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

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

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.

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)

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.

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.

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.

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.

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ê.

8

Imagem 5: Tela dos dados sobre o bebê.

Imagem 6: Tela de vídeos do bebê.

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.

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.

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

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.

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