UNIVERSIDADE FEDERAL DE SANTA CATARINA Atualização da Interface de Usuário do dotProject+ Jean Fernando Hillesheim Vitor Jeremias Monticelli FLORIANÓPOLIS 2019/2 1 UNIVERSIDADE FEDERAL DE SANTA CATARINA DEPARTAMENTO DE INFORMÁTICA E ESTATÍSTICA CURSO DE SISTEMAS DE INFORMAÇÃO Atualização da Interface de Usuário do dotProject+ Jean Fernando Hillesheim Vitor Jeremias Monticelli Trabalho de Conclusão de Curso apresentado como parte dos requisitos para obtenção do grau de Bacharel em Sistemas de Informação. Florianópolis – SC 2019/2 2 Jean Fernando Hillesheim Vitor Jeremias Monticelli Atualização da Interface de Usuário do dotProject+ Trabalho de conclusão de curso apresentado como parte dos requisitos para obtenção do grau de Bacharel em Sistemas de Informação. Orientador: Jean Carlo Rossa Hauck Banca examinadora ___________________________________________ Prof. Dr. Jean Carlo Rossa Hauck Professor Orientador ___________________________________________ Prof. Dr. Raul Sidnei Wazlawick Membro da Banca Examinadora ___________________________________________ M.ª Thaisa Cardoso Lacerda Membro da Banca Examinadora 3 SUMÁRIO 1 Introdução ............................................................................................................. 12 1.1 Objetivos do Trabalho ....................................................................................... 15 1.2 Restrições do escopo ........................................................................................ 16 1.3 Método de pesquisa .......................................................................................... 16 1.4 Estrutura do Trabalho ........................................................................................ 20 2. Fundamentação Teórica ...................................................................................... 22 2.1 Usabilidade ....................................................................................................... 22 2.2 Refactoring de Usabilidade de Software Web ................................................... 26 2.3 Reengenharia de Software ................................................................................ 28 2.4 Estética de Aplicações Web .............................................................................. 30 2.5 Gerência de Projetos......................................................................................... 32 2.6 dotProject+ ........................................................................................................ 45 3. Estado da Arte ..................................................................................................... 51 3.1 Definição do Estudo .......................................................................................... 51 3.2 Execução da Busca........................................................................................... 53 3.3 Análise das Ferramentas .................................................................................. 59 3.4 Resultados da Análise ....................................................................................... 87 4. Proposta de Solução ........................................................................................... 96 4.1 Requisitos ......................................................................................................... 97 4.2 Análise de Personas ....................................................................................... 107 4.3 Diagrama Estrutural dos Módulos do Sistema ................................................ 109 4.4 Casos de Uso .................................................................................................. 111 4.5 Prototipação das Telas .................................................................................... 120 4.6 Tecnologias ..................................................................................................... 124 4.7 Entrevista com especialistas em Design e Usabilidade .................................. 126 5 Desenvolvimento ................................................................................................ 128 5.1 Preparação do ambiente de desenvolvimento ................................................ 128 5.2 Implementação ................................................................................................ 132 4 5.3 Implantação ..................................................................................................... 137 6 Avaliação ............................................................................................................. 140 6.1 Planejamento da avaliação ............................................................................. 140 6.2 Aplicação do survey com os usuários ............................................................. 141 6.3 Discussão sobre o resultado do survey ........................................................... 150 6.4 Entrevista de avaliação com fornecedores de requisitos ................................ 152 7. Conclusão .......................................................................................................... 155 7.1 Trabalhos futuros ............................................................................................ 157 REFERÊNCIAS ....................................................................................................... 158 APÊNDICE A - Casos de uso ................................................................................ 175 APÊNDICE B - Questionário sobre o dotProject+ ............................................... 236 APÊNDICE C - Resultado do teste de usabilidade do primeiro protótipo de tela desenvolvido .......................................................................................................... 241 APÊNDICE D - Protótipos de tela ......................................................................... 242 APÊNDICE E – Artigo da Monografia ................................................................... 246 APÊNDICE F – Código Fonte ................................................................................ 330 5 LISTA DE FIGURAS Figura 1 - Curvas de aprendizado para diferentes tipos de usuários ............................. 24 Figura 2 - Processo geral de reengenharia de software ................................................. 29 Figura 3 - Habilidades desejáveis de um Gerente de Projetos competente ................... 34 Figura 4 - Relação entre o projeto e as partes interessadas .......................................... 36 Figura 5 - Grupos de processos de gerenciamento de projetos ..................................... 39 Figura 6 - dotProject+: Visualização dos itens do EAP e atividades de um projeto ........ 46 Figura 7 - Arquitetura dos módulos core e add-on do dotProject+ ................................. 47 Figura 8 - JIRA: Parametrização das cores .................................................................... 60 Figura 9 - JIRA: Paleta de cores ..................................................................................... 61 Figura 10 - Trello: Overview do projeto ........................................................................... 62 Figura 11 - Trello: Paleta de cores ...................................................................................63 Figura 12 - Teamwork Projects: Overview do projeto ...............................................…... 65 Figura 13 - Teamwork Projects: Paleta de cores ............................................................ 66 Figura 14 - Wrike: Overview (quadros) ........................................................................... 67 Figura 15 - Wrike: Overview (lista) .................................................................................. 68 Figura 16 - Wrike: Paleta de cores .................................................................................. 69 Figura 17 - Podio - Overview de projetos ........................................................................ 70 Figura 18 - Podio - Paleta de cores ................................................................................. 71 Figura 19 - Asana: Kanban ............................................................................................. 72 Figura 20 - Asana: Notificações ...................................................................................... 73 Figura 21 - Asana: Paleta de cores ................................................................................. 74 6 Figura 22 - Project.net: Iniciando novo projeto …............................................................ 75 Figura 23 - Project.net: Inserindo um novo passo ........................................................... 76 Figura 24 - Project.net: Paleta de cores .......................................................................... 76 Figura 25 - phpCollab: Overview de um projeto .............................................................. 77 Figura 26 - phpCollab: Overview de uma tarefa .............................................................. 78 Figura 27 - phpCollab: Paleta de cores ........................................................................... 79 Figura 28 - ProjeQtOr: Tela inicial ................................................................................... 80 Figura 29 - ProjeQtOr: Criando um novo projeto ............................................................ 81 Figura 30 - ProjeQtOr: Paleta de cores ........................................................................... 81 Figura 31 - dotProject+: Overview dos pacotes