UARhere Projecto – 3º ano - NTC TP3 – DEMO Gráfica e Técnica

   Liliana Costa – 46201

Maria Silva – 46758 Paulo Dias – 47167 Pedro Martins - 47645

 2  

Introdução   O presente documento serve como guia das demos gráfica e técnica. Após o grupo ter apurado os requisitos da aplicação e a viabilidade técnica, eis que surge o momento de proceder a estudos de interface e interacção por parte do utilizador. Assim, este documento encontra-se subdividido nas seguintes secções: Conceito e principais funcionalidades do projecto;

Necessidades e elementos funcionais do projecto tendo presente um

cenário de contexto; Métodos de interacção e (des) vantagens;

Mapa de navegação; Proposta de de storyboards / guiões (comentados e detalhados); Enumeração dos diferentes elementos da aplicação e seus atributos; Soluções e conceitos - chave;

Outras considerações sobre o projecto; Conclusão e Reflexões sobre as DEMOS;

É de referir a importância deste documento, bem como do protótipo para reuniões e discussões que envolvem trabalho ao nível funcional e a necessidade de informação no que diz respeito aos paradigmas de interacção a implementar.

 3  

1. Conceito e principais funcionalidades do projecto Com a concretização das demos, é necessário definir à priori quais as principais funcionalidades do projecto bem como relembrar o seu conceito e objectivos. É de referir que o protótipo irá focar-se na aplicação 3D e que o CMS (content management system) apenas funcionará como suporte. Realça-se também que a demo técnica não apresenta qualquer tratamento ao nível estético / gráfico, sendo meramente funcional. Assim sendo, não espelha os cenários retratados na demo gráfica.

1.1. Conceito do projecto O projecto UARhere apresenta como conceito retratar a evolução do campus de Santiago através do desenvolvimento de um ambiente imersivo, de navegação virtual.

Tendo presente este conceito, delinearam-se duas funcionalidades - chave do protótipo.

1.2. Funcionalidades - chave do protótipo e de que modo estas conferem identidade ao projecto As funcionalidades - chave deste projecto no que diz respeito à prototipagem, são:

• Navegação do utilizador pelo cenário explorável do campus de Santiago;

• Acesso a informação sobre determinado edifício; O desenvolvimento destas funcionalidades comprometem a identidade do projecto, na medida em que geram o ambiente navegável pelo utilizador e o acesso a informação que respeita o conceito do projecto – evolução histórica do campus.

 4  

2. Necessidades e elementos funcionais do projecto tendo presente um cenário de contexto Para cada cenário da aplicação é necessário reflectir sobre as diferentes necessidades e elementos funcionais da aplicação.

 5  

3. Métodos de interacção A equipa do projecto UARhere reuniu-se e reflectiu sobre a interacção com a aplicação. Tendo presente as questões feitas a seis participantes sobre as preferências de interacção com a aplicação (Post dos Requisitos Funcionais) e as (des) vantagens de diferentes métodos de interacção, concluiu-se que o teclado e o cursor do rato reuniam as melhores condições para a aplicação.

 6  

4. Mapas de Navegação

É de referir que este mapa de navegação é preliminar e, que irá ser reformulado e mais sofisticado no próximo desafio da especificação técnica e funcional. Serve apenas de referência e orientação para a equipa, dado que pensar na DEMO gráfica e técnica, exigiu, em primeira instancia, ter mentalmente presente o mapa de navegação.

 7  

5. Proposta de de storyboards/guião 5.1. Os diferentes ecrãs ECRÃ 1 – PÁGINA INICIAL

Legenda: Neste ecrã, o utilizador tem acesso a todas as áreas possíveis de navegação sobre o projecto: desde menus para o acesso a informação sobre o projecto, campus , FAQ, pesquisa, registo/login, link para entrar na aplicação Unity e informação sobre os passos na navegação pelo projecto.

 8  

 9  

ECRÃ 2 – VISITA VIRTUAL

Legenda: O utilizador acede à visita virtual através do menu, clicando em campus ou no link da página inicial. Este começa por:

1. Instalar o Unity Web Player;

 10  

2. Salvar o Unity Web Player – Save File;

3. Finish Player:

4. Loading:

 11  

O utilizador, ao efectuar o loading da aplicação, visualiza a dica rápida. ECRÃ 3 – MENU

Legenda: Depois de instalados os diferentes plugins, o utilizador pode escolher o ponto de entrada na aplicação e aceder à ajuda da aplicação e controlo do áudio.

 12  

Timeline – Escolha do Período Temporal:

Legenda: O utilizador, para aceder à aplicação, percorre uma timeline interactiva – escolhendo o período temporal. Esta tem por objectivo a apresentação e representatividade de acontecimentos, ao longo do tempo. São representados diferentes momentos temporais que correspondem ao momento de construção de vários departamentos. Perante o clique na fotografia e a data escolhida pelo utilizador, é gerado o ambiente representativo dessa época. O utilizador assume, sempre, a posição referencial que estava no período anterior, assistindo-se, apenas, à alteração do cenário.

 13  

É de referir que esta timeline está contemplada como um elemento extra da aplicação, funcionando numa primeira fase, como elemento informativo – devido a algumas condicionantes: restrições temporais e o embutir de apenas um ficheiro Unity.

Navegação pela aplicação

Legenda: O utilizador pode navegar na aplicação, utilizando as teclas de atalho, wasd, setas de navegação ou cursor.

 14  

ECRÃ 4 – INFO NAVEGAÇÃO

Legenda: Para despoletar a informação sobre determinado edifício, é necessário posicionar uma mira sobre este e clicar. Surge, então, a ficha técnica do edifício, seguido de imagens que irá buscar à base de dados.

 15  

ECRÃ 5 – CHAT DE NAVEGAÇÃO

Legenda: Uma funcionalidade extra da aplicação, é a interacção com os diferentes utilizadores que ao clicar sobre um utilizador, é despoletado a informação sobre este e o serviço chat.

 16  

ECRÃ 6 – GALERIA FOTOS

Legenda: Em alguns elementos do cenário da navegação 3D, o utilizador poderá visualizar fotografias do Departamento que foram submetidas no blog do website –Memórias.

 17  

ECRÃ 7 – MAPA

Legenda: Neste ecrã, é identificada a posição do utilizador e a localização dos diferentes POIs (Point of Interests) da aplicação.

 18  

ECRÃ 8 – AJUDA DA APLICAÇÃO 3D

Legenda: O ecrã de ajuda da aplicação 3d fornece a informação necessária para a navegação e interacção com a aplicação.

 19  

ECRÃ 9 – OPÇÕES

Legenda: O ecrã Opções diz respeito às opções de controlo de volume e a qualidade do gráficos.

 20  

ECRÃ 10– VISITA GUIADA

Legenda: Este ecrã visa uma orientação relativamente à navegação pelo espaço virtual. Constitui uma das ajudas ao utilizador, ilustrando em forma de tutorial como é que o utilizador interage com a aplicação.

 21  

ECRÃ 11 – INSERIR COMENTÁRIO

Legenda: O utilizador poderá comentar todas as entradas no blog Memórias (Não precisa de estar logado)

 22  

ECRÃ 12 – REGISTO/LOGIN – REGISTAR NOVO UTILIZADOR

Legenda: O utilizador pode registar-se, se for a primeira vez que acede ao website, clicando no botão registar novo utilizador.

1.Escolha do OpenID

 23  

– LOGIN

Legenda: Neste ecrã, o utilizador acede à área de login através do clique no botão presente no canto superior direito. Este despoleta um novo ecrã em que se pode efectuar o login – através do preenchimento do nome do utilizador e password. Há ainda a possibilidade de se manter logado, clicando na checkbox

1. Login efectuado com sucesso

 24  

ECRÃ 13 – MEMÓRIAS CAMPUS

Legenda: O utilizador pode aceder ao blog através do acesso ao menu Campus, submenu Memórias. Neste, o utilizador pode publicar as suas experiência/memórias, ilustradas de imagens. Os outros utilizadores podem comentar, clicando no link comentários. Para que o utilizador possa contribuir com conteúdo, terá que estar logado.

 25  

ECRÃ 14 – INSERÇÃO NOVO POST

Legenda: O utilizador da aplicação poderá, ainda, contribuir com conteúdo para o Website (Menu Campus – Submenu Memórias). É de referir que este contributo diz respeito, única e exclusivamente, ao utilizador logado.

 26  

ECRÃ 15 – SOBRE A EQUIPA

Legenda: Neste ecrã, o utilizador acede à informação sobre a equipa, através do menu SOBRE e no submenu SOBRE EQUIPA ou a linkagem no centro inferior do website.

 27  

ECRÃ 16 – SOBRE O PROJECTO

Legenda: Neste ecrã, o utilizador acede à informação sobre o projecto, através do menu SOBRE e submenu SOBRE O PROJECTO ou da linkagem no canto inferior do Website.

 28  

ECRÃ 17 – AJUDA

Legenda : O utilizador acede ao ecrã de ajuda, através do clique no menu – AJUDA. Este tem acesso a um FAQ, onde poderá consultar perguntas e respostas nas categorias do website e navegação virtual.

 29  

ECRÃ 18 – CONTACTOS

Legenda: O utilizador acede aos contactos através do menu CONTACTOS. Este poderá enviar mensagem à equipa, através do preenchimento de um formulário.

1. Envio de sugestão (confirmação);

 30  

5. Enumeração dos diferentes elementos da aplicação e seus atributos

 31  

6. Soluções e conceitos-chave;

1- Entrada na aplicação

A presente imagem demonstra como é despoletada a informação no ecrã inicial e que explica como é que o utilizador estabelece a interacção com a aplicação. 2- Cenário da aplicação de navegação virtual

A imagem apresenta a criação de um cenário virtual em Unity 3D – desde a criação de terrenos, envolvente através de skybox e a importação de objectos do 3ds Max (formato .fbx ou .max).

 32  

3- Clique no edifício e despoletar informação e conteúdo com

ligação a Base de Dados

Este print diz respeito ao aparecimento de informação dos edifícios perante o clique nos edifícios e a ligação do conteúdo a aparecer no elemento GUI (Graphical User Interface) , quer textual ou fotográfico, ao Website – Base de Dados. Este último passo, foi muito importante para resolver através de texto, a codificação do texto em UTF-8, a integração de galerias na aplicação e, também, a importação de fotografias que se assumam como textura dos objectos da aplicação. 3- Inserção da aplicação no Website

Por último, esta imagem comporta a performance da aplicação no Website.

 33  

Outras considerações sobre o projecto

Área Administrativa (Backoffice) Na apresentação da demo técnica, foi ponderada a hipótese de se representar, graficamente, toda a interacção do administrador enquanto gestor do sistema, através do backoffice. Esta funcionalidade foi contemplada nos requisitos funcionais. No entanto, dado o facto desta estar implementada, de raiz, pelo CMS Wordpress, não há qualquer intervenção na sua criação por parte do grupo. Foi considerado que não haveria motivo para ilustrar este módulo na demo. Para além disso, este módulo apresenta, também, como uma componente de menor realce na visão global do que se pretende para o projecto, isto apesar da sua grande relevância. Registo / Login Outro módulo, este pertencente ao cenário 2 dos requisitos funcionais, diz respeito à inserção de conteúdos por parte de utilizadores registados. Este cenário apresenta-se cada vez mais provável com o sucesso obtido nos vários testes realizados na criação da demo técnica, que provaram, embora com alguma dificuldade, que é possível integrar na aplicação elementos multimédia a partir de base de dados externas, inclusive de outros domínios (crossdomain). Dessa forma, a implementação de um sistema de registo e login de utilizadores torna-se essencial para que possa existir uma forma de controlar a inserção desses conteúdos. A demo gráfica contempla então este módulo, sem entrar em pormenores muito detalhados. Convém referir que este sistema de controlo de utilizadores não se pretende muito avançado, e como tal, fez-se preferência para um sistema de openID, a integrar por um plugin. Descartando, pelo menos para já, a integração com o utilizador universal. Pesquisa e outros sistemas de ajuda Outro ponto com menor focalização por parte do grupo, durante a criação das demos, foram os sistemas de ajuda. Embora sejam de extrema importância para este projecto, e para qualquer projecto centrado no utilizador, o grupo considerou ainda não haverem elementos suficientes para criar os sistemas de ajuda idealizados. Estes elementos que o grupo se refere, são todas funcionalidades e características detalhadas do sistema realmente a implementar e que estarão assumidas, certamente, durante o próximo módulo da disciplina.

 34  

Cenário 3 Ao criar a demo gráfica verificou-se que a hipótese pensada com o cenário 3, de interacção dos utilizadores durante a aplicação, estilo multi-player com chat, apesar de poder ser exequível, não traria grande vantagem nem para o projecto nem para os utilizadores. Com a existência do blog no site do projecto, onde os utilizadores poderão partilhar e comentar experiências vividas no campus, este espaço de comunicação pouco acrescentaria ao projecto.

Requisitos funcionais Feita uma análise dos requisitos funcionais do projecto, verificou-se algumas alterações. A citar:

- Requisito Preenchimento questionário dados pessoais – Esta informação não contemplada no preenchimento do formulário, uma vez que se definiu uma conta OpenID que estabelece a ligação com a informação do utilizador na respectiva conta. (ex.: facebook, Google, etc)

- Ligação à UA (Docente / estudante)- Dadas as dificuldades no uso do utilizador universal da Universidade de Aveiro, esta funcionalidade irá ficar para segundo plano.

- Escolha de um departamento específico - Não se considerou pertinente esta opção, existindo outras alternativas como a escolha de pontos de entrada no mapa.

 35  

Conclusão e Reflexões sobre as DEMOS Com o desenvolvimento destas demos (gráfica e técnica), pode-se concluir que estas são decisivas para seleccionar das múltiplas soluções que possam servir necessidades em especial, a mais eficiente quer para o utilizador quer para a equipa. Nem sempre é fácil decidir qual a solução que se correlaciona melhor com os cenários e objectivos da aplicação, que exija menos esforço (mental e físico) por parte do utilizador e a que seja mais fácil de construir. Para responder a este desafio, foi necessário perceber desde o estado inicial do projecto - o que há de benéfico em ambientes de navegação virtual para aplicar-se na aplicação da evolução do campus (análise SWOT e revisão do estado de arte). De um modo geral, algumas funcionalidades da DEMO gráfica permitiram que se começasse a definir prioridades de implementação, algumas regras de usabilidade e acessibilidade (economia do nº de cliques, várias opções de navegação na aplicação), regras de interacção e fortaleceu a ideia da disposição dos conteúdos ao utilizador. A equipa tem consciência de algumas fragilidades do desenvolvimento das DEMOS. Estas reportam soluções ao nível macro que satisfazem o estado de arte e dão resposta às funcionalidades básicas da aplicação. Porém, parecem existir algumas incongruências ao nível micro, nomeadamente ao nível de: - Disposição das imagens relativas a cada edifício, de forma linear, na galeria de fotos da aplicação de navegação virtual. (Muitas fotografias podem representar problemas na navegação por parte do utilizador – é preciso repensar esta interacção) ; - Analisar uma forma de melhorar a timeline, e a sua comunicação com a aplicação; - Integração de botões na interface gráfica da aplicação de navegação virtual terá de ser totalmente descartada, dada a dificuldade no seu uso, afectando a própria navegação. Para resolver essa situação os diferentes menus seriam acedidos através de atalhos no teclado. - A interacção com os objectos no próprio ambiente virtual também terá de ser repensado, mais uma vez para facilitar a navegação. Assim, a solução que poderá resolver esse problema será a inserção de uma mira (crosshair) no centro do ecrã, que permitiria clicar nos edifícios de uma forma mais eficiente.

 36  

No que diz respeito à DEMO técnica da aplicação, esta permitiu detectar e resolver problemas que não estavam contemplados na fase de planeamento – nomeadamente os elementos GUI apenas funcionarem dentro de funções onGUI () que chamadas continuamente na aplicação tal como um enterFrame e apenas controladas com uma sucessão de ifs, a codificação de caracteres em utf8 e a formatação de texto e a importação de imagens quer para a integração informativa na aplicação quer para a importação de texturas. A implementação do mapa da aplicação de navegação virtual na demo técnica, também ajudou a verificar qual a melhor forma de potenciar a sua acção na aplicação e na forma como poderá ajudar o utilizador ao percorrer o campus. Algumas ideias retiradas, como alteração do ângulo bem como um acompanhamento mais real do utilizador (ex. o mapa deve acompanhar a rotação do utilizador). Para fornecer maior realismo, ao campus, também se considerou a inclusão de pessoas, vestidas à época, a passear no campus. Dessa forma também se enriquece o cenário com algum dinamismo. Para concluir, é de referir que as decisões das demos gráficas e técnicas da aplicação são primordiais para desenvolvimentos futuros e o apuramento da especificação técnica. Estas reduzem a incerteza técnica e contribuem para o afunilamento de decisões e coesão do grupo.  

 37  

Bibliografia GOODWIN, Kim – Designing for the digital age – How to create human-centered products and services. Willey Publishing, Inc. (DATA) GOLDSTONE, Will - Unity Game Development Essentials, Build fully functional, Professional 3D games with realistic environments, sound, dynamic effects, and more. PACT Publishing. 2009. CREIGHTON, Ryan Henson – Unity 3D Game Development by Example – A seat-of-your-pants manual for building fun, groovy little games quickly. Begginerʼs Guide. VIANA, Thiago Campos – Unity 3D – Uma introdução. São Carlos, SP – Brasil. MCALLISTER, Graham – Introduction to the Unity Interface MCALLISTER, Graham – Introduction to scripting with Unity KLEIN, Leslie, Issues and Challenges of 3D User Interfaces: Effects of Distraction. TECH, Virgina, COQUILLART, Sabine, FROEHLICH, Bernd – 3D User Interfaces: New Directions and Perspectives (Survey)