UNIVERSIDADE ESTADUAL DE MARINGÁ - UEM
              Campus Maringá




       Trabalho de Design de Interação
         do...
UNIVERSIDADE ESTADUAL DE MARINGÁ - UEM
                                 Campus Maringá




                               ...
Sumário


Introdução ........................................................................................................
1


             Introdução

            Diversas novas tecnologias estão sendo inseridas no mercado, oferecendo ao
consum...
2


             1. Design de Iteração


             As complexidades relativas a desenvolvimento de novos produtos e ser...
3


               2. Brainstorming


               Técnica utilizada para gerar idéias. Consiste em uma discussão em gru...
4


            3. Mapa mental (Mind Map)


            Quando no processo de desenvolvimento é necessário que a equipe to...
5


             4. Card-sorting


             Trata-se de uma técnica utilizada pelos arquitetos da informação para
comp...
6


            5. Estudo de Cores e Fontes


            As combinações de cores foram estudadas pelo grupo levando em co...
7


             6. Wireframe


             Wireframe é um desenho básico, como um esqueleto, que demonstra de forma
dire...
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 estrutur...
10


            8. Layout final


            Ao final dos estudos o grupo chegou a um layout principal final, com a
orga...
11


             9. Conclusão


             Um produto não pode ser projetado somente com o intuito de realizar
determin...
12

que, no entanto, se tornam evidentes quando se coloca o protótipo em situação semelhante à
de trabalho.
              ...
13


                                    Referencias Bibliográficas



Websites:


Writemaps. Create, Edit and Shate your ...
Próximos SlideShares
Carregando em…5
×

Trabaho design de interação

1.829 visualizações

Publicada em

Publicada em: Educação, Tecnologia, Design
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
1.829
No SlideShare
0
A partir de incorporações
0
Número de incorporações
29
Ações
Compartilhamentos
0
Downloads
46
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Trabaho design de interação

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. 8 Imagem 5: Tela dos dados sobre o bebê. Imagem 6: Tela de vídeos do bebê.
  12. 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. 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. 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. 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. 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

×