Este documento descreve o desenvolvimento de uma interface digital de autoatendimento para busca de produtos em lojas. Ele começa apresentando a motivação e objetivos do projeto. Depois resume os fundamentos teóricos envolvidos como arquitetura da informação, interação, gestalt e ergonomia. Em seguida detalha as etapas do projeto incluindo análise de dados, geração de alternativas, seleção e detalhamento da interface. Por fim, conclui que a interface desenvolvida pode melhorar a experiência dos usuários na busca

1. FUNDAÇÃO, CENTRO DE ANÁLISE, PESQUISA E
INOVAÇÃO TECNOLÓGICA FACULDADE FUCAPI
COORDENAÇÃO DE GRADUAÇÃO EM
DESIGN DE INTERFACE DIGITAL
INTERFACE DE AUTO-ATENDIMENTO PARA BUSCA DE INFORMAÇÕES DE
PRODUTOS DE ENTRETENIMENTO ATRAVÉS DE TOQUE NA TELA
MARCONI AMARANTE PACHECO
Manaus 2010

2. INTRODUÇÃO
PADRÃO DE BUSCA
INTERFACE DIGITAL
NOVAS TECNOLOGIAS

3. INTRODUÇÃO :: NOVAS TECNOLOGIAS
“Temos que reconhecer o impacto das telecomunicações, do computador, da internet, da
multimídia ou da convergência digital no aumento da produtividade, na difusão da cultura e na
elevação da qualidade de vida” (SIQUEIRA, 2007).

4. INTRODUÇÃO :: INTERFACE DIGITAL
“O design de interface eficiente permite a um usuário isolado navegar intuitivamente através
de seus documentos a aplicações, comunicando-se ocasionalmente” (JOHNSON, 2001).

5. INTRODUÇÃO :: PADRÃO DE BUSCA
“A principal meta na busca é achar, procuramos achar objetos e respostas, buscamos
encontrar (e re-encontrar) páginas, pessoas, lugares, produtos, e fatos”.
(MORVILLE e CALLENDER, 2010) .

6. NOVAS TECNOLOGIAS E PADRÃO DE BUSCA
INTERFACE DE AUTO-ATENDIMENTO PARA BUSCA DE INFORMAÇÕES
DE PRODUTOS DE ENTRETENIMENTO ATRAVÉS DE TOQUE NA TELA
Problema:
- Necessidade de auxilio para busca de produtos.
- Desorganização do produto nas prateleiras.
- Atendentes indisponíveis.
- Grande quantidade de produtos.
- Leitores de código de barra limitados para pequenos detalhes e preço.
- Sistemas de buscas somente para vendedores.

7. OBJETIVOS
Objetivo geral:
Desenvolver uma proposta de interface de auto-atendimento para busca de
informações de produtos, com recurso de toque na tela, para lojas de departamento,
seção de entretenimento da cidade de Manaus.
Objetivo Especifico:
Investigar sobre o comportamento dos usuários em lojas de departamentos, seção
de entretenimento, na cidade de Manaus para elaborar critérios de busca de
produtos de áudio, vídeo e livros.
Pesquisar sobre modelos de interação dos mecanismos de busca e auto-
atendimento para elaborar melhores formas de interação durante a busca dos
produtos.
Estudar os critérios ergonômicos de Bastien e Scapim para minimizar erros e durante
o desenvolvimento do projeto da interface do sistema de auto-atendimento.
Pesquisar sobre Gestalt para compreender os critérios de leitura visual para
aplicação no arranjo e distribuição dos elementos gráficos da interface.

8. PROCEDIMENTOS METODOLÓGICOS
Quanto à finalidade: Pesquisa Aplicada
Quanto à abordagem: Qualitativa e Quantitativa
Quanto ao objetivo: Exploratória e Descritiva

9. ESTRUTURAÇÃO DO PROJETO
Fundamentação Teórica
Arquitetura de Informação: Padrões de busca
Interação: Tecnologia e modelos de interação
Gestalt: Forma, cor e tipo
Semiótica: Signos e ícones
Design: Etapas, técnicas e procedimentos
Ergonomia: Critérios de avaliação de interface
Desenvolvimento do projeto
1º Analise de Dados 4º Geração de Alternativas
2º Tabulação de Dados 5º Seleção das Alternativas
3º Requisitos e Parâmetros 6º Detalhamento
Conclusão
Referências

10. FUNDAMENTAÇÃO TEÓRICA :: ARQUITETURA DE INFORMAÇÃO
- Sistema de organização
- Sistema de Rotulação
- Sistema de Navegação
- Sistemas de Busca
“O foco da Arquitetura de Informação é o projeto de estruturas (ambientes
informacionais) que fornecem ao usuário recursos necessários para transformar suas
necessidades em ações e para atingir seus objetivos com sucesso”. (AGNER 2009)

11. FUNDAMENTAÇÃO TEÓRICA :: INTERAÇÃO
Pontos mais comuns em design de
interação:
- Visibilidade
- Feedback
- Restrições
- Mapeamento
- Consistência
- Affordance
Prototipação e construção de
Modelos de Interação
Processo cognitivo:
- Atenção
- Percepção e reconhecimento
- Memória
- Aprendizado
- Leitura
- Fala e audição
- Resolução de problemas

12. FUNDAMENTAÇÃO TEÓRICA :: GESTALT
TIPOGRAFIA
COR
Cores nas interfaces digitais
FORMA

13. FUNDAMENTAÇÃO TEÓRICA :: SEMIÓTICA
ÍCONES
SIGNOS

14. FUNDAMENTAÇÃO TEÓRICA :: DESIGN
Etapas, Técnicas e Procedimentos
- Analise de dados
- Tabulação de dados
- Requisitos e parâmetros
- Geração de alternativa
- Seleção das alternativas
- Detalhamento

15. FUNDAMENTAÇÃO TEÓRICA :: ERGONOMIA DE IHC
Critérios Ergonômicos
1º Condução
2º Carga de trabalho
3º Controle explícito
4º Adaptabilidade
5º Gestão de erros
6º Homogeneidade/consistência
7º Significados de códigos
8º Compatibilidade
“A interação humano-computador é um campo de estudo interdisciplinar que tem como
objetivo geral entender como e por que as pessoas utilizam (ou não utilizam) a tecnologia
da informação” (MORAES E SANTA ROSA 2008).

16. DESENVOLVIMENTO DO PROJETO :: ANÁLISE DE DADOS
Pesquisa Bibliográfica

17. DESENVOLVIMENTO DO PROJETO :: ANÁLISE DE DADOS
Pesquisa de Campo - Registro Cursivo e Continuo - Entrevistas e Questionários

18. DESENVOLVIMENTO DO PROJETO :: TABULAÇÃO DE DADOS
50% dos entrevistados costumam utilizar
aparelhos eletrônicos como telefone celular,
computador e maquina de fotografia digital.
60% dos entrevistados consideraram a
especificação do produto (titulo, gênero,
autor) como a informação mais importante,
20% consideraram o preço mais importante

19. DESENVOLVIMENTO DO PROJETO :: TABULAÇÃO DE DADOS
- 60% dos entrevistados imaginam um campo para fazer sua suas buscas por palavras chave.
- 25% imaginam ícones que representariam as seções.
- 15% imaginam menu com as principais seções e para cada seção um sub-menu dividido por
categorias

20. DESENVOLVIMENTO DO PROJETO :: ANÁLISE DE SIMILARES
Apresentação DVD
Livros CD
Saraiva

21. DESENVOLVIMENTO DO PROJETO :: ANÁLISE DE SIMILARES
Apresentação Produtos referentes
ao esporte
Produto escolhido Vídeo
The North Face

22. DESENVOLVIMENTO DO PROJETO :: REQUISITOS E PARÂMETROS
REQUISITOS PARÂMETROS
Arquitetura de Informação
Delimitar a apresentação e a organização categorizando o conteúdo
Dar suporte visual para as principais informações de navegação
Auxiliar o campo de busca com filtros
Ter várias formas de busca através do espaço informacional
Formas de Interação
Tornar o conteúdo com fácil visibilidade
Fazer com que toda ação seja dada uma resposta visível ao usuário
Torna restritos os tipos de interação temporariamente informacional
Fazer com que o conteúdo de áudio e vídeo possa ser controlado
Manter consistência para todas as telas
Utilizar informações que destacam campos interativos como botões
Boa pregnância da Forma
Manter organização na leitura visual
Conter poucos elementos
Ter formas e elementos consistentes
Legibilidade
Fontes sem serifa
Contraste de letra e fundo
Consistente o layout
Ícones legíveis
Ter um contraste de luz e sombra
Critérios Ergonômicos
Ter meios intuitivos para uma boa condução
Obter menos informações irrelevantes
Disponibilizar meios para uso de usuários de níveis diferentes
Evitar e prevenir erros em comandos ou ações
Controle sobre as ações do usuário e sobre o processamento do sistema
Manter os comandos, rótulos e procedimentos de uso em todas as telas
Ser objetivo nas informações apresentadas
Manter características das tarefas e coerências entre ambientes

23. DESENVOLVIMENTO DO PROJETO :: MAPA DA INTEFACE

24. DESENVOLVIMENTO DO PROJETO :: GERAÇÃO DE ALTERNATIVA
Protótipo de baixa-fidelidade - Wireframe

25. DESENVOLVIMENTO DO PROJETO :: GERAÇÃO DE ALTERNATIVA
Alternativa 01
Tela de apresentação principal Tela de apresentação do produto

26. DESENVOLVIMENTO DO PROJETO :: GERAÇÃO DE ALTERNATIVA
Alternativa 02
Tela de apresentação principal Tela de apresentação do produto

27. DESENVOLVIMENTO DO PROJETO :: GERAÇÃO DE ALTERNATIVA
Alternativa 03
Tela de apresentação principal Tela de apresentação do produto

28. DESENVOLVIMENTO DO PROJETO :: SELEÇÃO DAS ALTERNATIVAS
SELEÇÃO DE ALTERNATIVA
Critérios de Seleção Peso Alternativa 01 Alternativa 02 Alternativa 03
Padrão de busca 03 36 30 39
Organização da informação 03 36 33 39
Legibilidade 03 36 33 42
Ações mínimas 03 30 27 33
Visibilidade das informações 03 39 36 39
Interatividade 02 24 20 26
Segurança 02 22 20 28
Consistência e padrões 02 20 16 22
Aspectos visuais 02 24 20 26
Total 267 235 294

29. DESENVOLVIMENTO DO PROJETO :: SELEÇÃO DAS ALTERNATIVAS
Alternativa 03 – Testes entre possíveis usuários

30. DESENVOLVIMENTO DO PROJETO :: SELEÇÃO DAS ALTERNATIVAS
Alternativa 03 – Adequações pós-testes
Sugestão Solução

31. DESENVOLVIMENTO DO PROJETO :: SELEÇÃO DAS ALTERNATIVAS
Alternativa 03 – Adequações pós-testes
Sugestão Solução

32. DESENVOLVIMENTO DO PROJETO :: DETALHAMENTO
Detalhamento Dimensional da Interface
Tela de apresentação principal Tela de apresentação do produto

33. DESENVOLVIMENTO DO PROJETO :: DETALHAMENTO
Detalhamento das Cores

34. DESENVOLVIMENTO DO PROJETO :: DETALHAMENTO
Detalhamento das Fontes

35. DESENVOLVIMENTO DO PROJETO :: DETALHAMENTO
Detalhamento das Funcionalidades

45. CONCLUSÃO
Satisfação dos usuários - Observação dos similares – Estudos em Design Digital
Satisfação no uso das novas tecnologia - Contribuir para futuros projetos

46. MUITO OBRIGADO!
Aluno: Marconi Amarante Pacheco
Site: www.marconidesenhos.com
E-mail: marconidesenhos@hotmail.com