um modelo teorico-pratico para a construcao de interfaces ... pereira gasparello... ·...

Download Um modelo teorico-pratico para a construcao de interfaces ... Pereira Gasparello... · organização…

Post on 03-Dec-2018

213 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 1

    Universidade Estadual de Maring

    Centro de Tecnologia

    Departamento de Informtica

    Curso de Especializao Desenvolvimento de Sistemas para Web

    Um Modelo Terico Prtico para a Construo de Interfaces para

    Websites

    Ktia Pereira Gasparello Sforni

    Prof. Dr. Dante Alves Medeiros Filho

    Orientador

    Maring, 2011

  • 2

    Universidade Estadual de Maring

    Centro de Tecnologia

    Departamento de Informtica

    Curso de Especializao Desenvolvimento de Sistemas para Web

    Ktia Pereira Gasparello Sforni

    Um Modelo Terico Prtico para a Construo de Interfaces para

    Websites

    Trabalho submetido Universidade Estadual de Maring

    como requisito para obteno do ttulo de Especialista

    em Desenvolvimento de Sistemas para Web.

    Orientador: Prof. Dr. Dante Alves Medeiros Filho

    Maring, 2011

  • 3

    Universidade Estadual de Maring

    Centro de Tecnologia

    Departamento de Informtica

    Curso de Especializao Desenvolvimento de Sistemas para Web

    Ktia Pereira Gasparello Sforni

    Um Modelo Terico Prtico para a Construo de Interfaces para

    Websites

    Maring, 20 de Dezembro de 2011.

    Prof. MSc. Jos Roberto Vasconcelos Ass.:________________________

    Prof. MSc. Paulo Csar Gonalves Ass.:________________________

    Prof. Dr. Dante Alves Medeiros Filho (Orientador) Ass.:________________________

  • 4

    Dedico este trabalho aos meus pais,

    minha irm, meu marido e minha

    sogra.

  • 5

    AGRADECIMENTOS

    Primeiramente agradeo a Deus que me deu o dom da vida, e a vrias pessoas que

    influenciaram diretamente na realizao deste trabalho as quais citarei:

    A meus pais Nelson e Maria pelo imenso amor, incentivo;

    A minha irm Carina pelas crticas construtivas;

    A meu marido Fbio pelo auxlio na realizao deste;

    A minha sogra Marinez pelo apoio e carinho;

    Ao professor Dr. Dante Alves Medeiros Filho por toda ateno, orientao, amizade e

    confiana depositada em mim;

    A todo corpo docente do DIN - Departamento de Informtica da UEM que neste perodo

    compartilhou conhecimento, disponibilizando recursos num aprendizado mais comprometido;

    A empresa Microline por ter permitido a realizao deste trabalho;

    A todos da turma, pela amizade e compartilhamento de conhecimentos;

    E a todos pelo incentivo.

  • 6

    RESUMO

    O presente trabalho realiza um estudo sobre construo de interfaces web utilizando conceitos

    prticos e tericos de usabilidade e ergonomia. Este estudo vale-se de um estudo de caso para

    mostrar como alguns conceitos de ergonomia e usabilidade podem melhorar a comunicao

    de um website. Neste sentido, foi realizada uma anlise de um site existente onde detectou-se

    a ausncia de critrios mais elaborados para seu desenvolvimento. Com esta anlise foi

    possvel propor um novo website com a utilizao de critrios ergonmicos e de usabilidade.

    O resultado ilustrado com a apresentao do novo site.

    Palavras-chave: Ergonomia, Modelo, Interface, Usabilidade, Website.

    ABSTRACT

    This paper conducts a study on building web interfaces using practical and theoretical

    concepts of usability and ergonomics. This study draws on a case study to show how some

    concepts of ergonomics and usability can improve the communication of a website. In this

    sense, we performed an analysis of an existing site where they detected the absence of more

    sophisticated the criteria for its development. This analysis was possible to propose a new

    website with the use of ergonomic and usability the criteria. The result is illustrated with the

    presentation of the new site.

    Key Words: Ergonomics, Model, Interface, Usability, Website.

  • 7

    LISTA DE FIGURAS

    Figura 1 - Arquitetura projetada da informao ................................................................... 16

    Figura 2 - Componentes da usabilidade ............................................................................... 18

    Figura 3 - Organizao da interface muito utilizada na internet .......................................... 20

    Figura 4 - Exemplo de wireframe ......................................................................................... 22

    Figura 5 - Layout .................................................................................................................. 24

    Figura 6 - Home do website em estudo ................................................................................ 29

    Figura 7 - Pgina empresa .................................................................................................... 31

    Figura 8 - Pgina curso ......................................................................................................... 32

    Figura 9 - Pgina detalhes do curso ...................................................................................... 33

    Figura 10 - Pgina servios .................................................................................................. 34

    Figura 11 - Pgina jogos ....................................................................................................... 35

    Figura 12 - Pgina Fale Conosco .......................................................................................... 36

    Figura 13 - Diagrama da arquitetura da informao ............................................................. 42

    Figura 14 - Wireframe da pgina principal ........................................................................... 43

    Figura 15 - Paleta de cores ................................................................................................... 44

    Figura 16 - Esboo do layout ................................................................................................ 45

  • 8

    LISTA DE QUADROS

    Quadro 1 - Cronograma de atividades .................................................................................. 38

    Quadro 2 - Contedo ............................................................................................................ 39

    Quadro 3 - Reestruturao das taxonomias .......................................................................... 41

    Quadro 4 - Checklist de inspeo de interface para websites ............................................... 47

  • 9

    SUMRO

    INTRODUO ...................................................................................................................... 11

    1 Objetivo Geral................................................................................................................. 12

    1.2 Objetivos Especficos .................................................................................................... 12

    1.3 Justificativa ................................................................................................................... 12

    1.4 Metodologia da pesquisa .............................................................................................. 13

    1.4.1 Tipo de estudo ............................................................................................................. 13

    1.4.2 Quais procedimentos para coleta e anlise dos dados ................................................. 13

    1.4.3 Estrutura do trabalho ................................................................................................... 14

    2 INTERFACE WEB ............................................................................................................. 15

    2.1 Conceituar, pesquisar e organizar contedo .............................................................. 15

    2.2 Especificaes funcionais e esboo da aparncia e sensao ................................ 19

    2.2.1 Diagramas e fluxogramas para tratar da funcionalidade e navegao ......................... 19

    2.2.2 Tipografia: legibilidade e esttica para realizao do esboo das pginas .................. 21

    2.3 Produo de imagens grficas e documentos HTML ................................................ 25

    2.4 Criao do prottipo para anlise ............................................................................... 26

    2.5 Configurao no servidor final, e avaliao novamente. .......................................... 27

    3 ESTUDO ORGANIZACIONAL ........................................................................................ 28

    3.1 Estrutura atual .............................................................................................................. 28

    4 PROPOSTA PARA NOVO WEBSITE ............................................................................. 38

    4.1 Cronograma de atividades ........................................................................................... 38

    4.1.1 Etapa 1 - Atividade: Conceituar, pesquisar e organizar contedo ............................... 39

    4.1.2 Etapa 2 - Definio das novas taxonomias .................................................................. 40

    4.1.3 Etapa 3 - Diagramas e fluxogramas para tratar da funcionalidade e navegao ......... 41

    4.1.4 Etapa 4 - Tipografia: legibilidade e esttica para realizao do esboo das pginas .. 44

    4.1.5 Etapa 5 - Produo de imagens grficas e documentos HTML ................................... 46

    4.1.6 Etapa 6 - Criao do prottipo para anlise ................................................................. 46

    4.1.7 Etapa 7 - Configurao no servidor final