Universidade de Aveiro
         2011/2012

          Projeto




BackToBasics
Guião - Demo Gráfica


                             Orientador: Ana Amaro



                                Carla Taveira |47065
                            Liliana Almeida | 49905
                             Francisco Silva | 51054
                                  Sílvio Dias | 51068
Guião – Demo Gráfica – BackToBasics



       A presente demo gráfica pretende apresentar o conceito do nosso projeto ilustrando o
caminho feito para chegar até ao pretendido. São mostradas as formas possíveis para obter a
informação. O nosso objetivo passou por verificar como se comportam as opções de
navegação e interação com o utilizador. Este estudo deu-nos algumas indicações do futuro
comportamento da nossa grelha.

      Foi utilizado o Adobe Premiere Pro para a montagem desta demo e o Balsamiq
Mockups para criar as páginas apresentadas.

       Neste exemplo o pretendido é a obtenção da informação necessária para solucionar o
problema narrado no início da demo.

        Serão apresentadas todas as páginas que estão pensadas para fazerem parte da nossa
aplicação, algumas delas que não foram mostradas na demo.



Demo Gráfica – Vídeo

1. Utilizador entra na aplicação;

2. Faz registo (preenchimento de formulário);

3. Passa para a página de criação do seu perfil (preenchimento de formulário);

4. Carrega imagem para o seu perfil;

5. Home Page;

6. Seleciona no menu ‘Culturas’ a Cultura ‘Ervas’;

7. Procura informação dentro desta cultura (não encontra o pretendido);

8. Procura informação na pesquisa rápida;

9. Seleciona o que aparentemente lhe interessa;

10. Analisa a pesquisa (não encontra o pretendido);

11. Seleciona separador ‘Fórum’;

12. Seleciona tópico onde a sua pergunta/comentário se insere;

13. Coloca questão no Fórum;

14. Aguarda (Teve sorte! Esperou pouco.);


                                                                                         2
15. Recebe notificação (responderam à sua questão);

16. Clica na notificação;

17. É direcionado para o Fórum;

18. Repara que quem respondeu à sua questão foi um parceiro da nossa aplicação
(informação fidedigna);

19. Acede ao perfil do parceiro a partir de link na foto e nome;

20. Clica ‘Marcar Visita’;

21. Seleciona o dia em que pretende fazer a visita;

22. Clica ‘Marcar’;

23. Acede á área de ‘Actividade Online’, visualização em direto de imagens captadas por
câmaras instaladas na respetiva quinta – streaming de vídeo;

24. Acede à página onde tens todos os parceiros;

24. Sai da Aplicação.



Descrição das páginas:




                                                                   Fig. 1 Página Inicial.




       A navegação na nossa aplicação começa com a página iniciar apresentada acima, esta
dá a possibilidade ao utilizador para se registar ou fazer login. Exibirá também uma galeria de
imagens que servirá para informar o utilizador do tipo de perfil a escolher no registo. Esta
escolha servirá para filtrar o conteúdo que será visto. Se o utilizador escolher ‘Horta
Comunitária’ visualiza no murar comum (explicado mais à frente) comentários, noticias, etc,

                                                                                             3
sobre o tipo de perfil. No caso de ser curioso vê tudo. O utilizador poderá mudar o tipo de
perfil mais tarde, se assim desejar.

        Se é a primeira vez que o utilizador acede à nossa aplicação, depois de efetuado o
registo é direcionado para uma página onde irá criar o seu perfil. Este poderá preenche-lo no
momento ou preencher mais tarde acedendo à edição do perfil. Posto isto entra na Home
Page. Caso já seja um utilizador registado ao efetuar o Login é redirecionado para a Home
Page.




                                                                    Fig. 2 Home Page.




         A Home Page irá conter um mural comum. Este mural exibirá posts relacionados com o
tipo de perfil escolhido pelo utilizador. No entanto, este poderá ver os posts de outros tipos de
perfil acedendo ao drop down menu e escolhendo o tipo de perfil dos posts que pretende
visualizar. Será possível comentar os posts ou então denunciá-los por ter conteúdo impróprio.

        As diferentes culturas abordadas na aplicação estarão dentro do menu culturas e terão
o seu próprio ‘espaço’. Nesse espaço será exposta toda a informação relativa a essa cultura.

        No perfil do utilizador haverá um mural dos posts escritos pelo próprio utilizador. Aqui,
no momento em que se escreve o post seleciona-se o tipo de perfil em que este post se insere.
Assim, no caso de o utilizador mudar o seu tipo de perfil, aquele post estará sempre
relacionado com o tema tratado. Isto tornará a filtragem mais fácil e organizada.

        É no próprio perfil que poderá editar ou eliminar posts, ver amigos, fotos e outros.




                                                                                               4
Fig. 3 Perfil utilizador.




        As entradas no Forúm ficarão registadas na base de dados e uma das vantagens de
colocar aqui as questões é o facto de estas poderem ser respondidas pelas parcerias da
aplicação o que torna a informação daqui retirada fidedigna. Este está organizado por temas
(Geral, Agricultura Biológica, Culturas, etc), estes podem dividir-se ou não por mais subtemas
(dentro de Culturas a divisão é feita pelas diferentes culturas, por exemplo).

        Os parceiros serão todos exibidos no menu ‘Parceiros’ e cada um terá o seu próprio
perfil que será acessível a partir desta página. Poderão ou não ter marcação de visitas e
atividade online, dependendo do Parceiro.



Aspetos retirados neste estudo:

        Positivos: O nosso estudo de grelha mostrou-se adequado, contudo tivemos que fazer
alguns ajustes propostos pelos professores Ivo e Júnior. Este estudo permitiu lembrar alguns
botões e área de conteúdos esquecidos.

        Negativos: Conceptualmente o menu inicialmente criado parecia muito bom, com
inspiração do que é utilizado pelo jornal JN, mas quando foi criado mostrou-se visualmente
inestético e exibia informação redundante, por isso recorremos a outra solução mais eficaz.
Chegámos à conclusão que era muito confuso o utilizador poder postar e comentar em vários
locais e reduzimos as opções. A página das quintas parceiras foi retificada, verificou-se que
tinha demasiados link. A sua informação foi melhor organizada.



                                                                                              5
Fig. 4 Menu pensado inicialmente.




                                                        Fig. 5 Menu actual.




Referências Bibliográficas

       Preece, R. S. Design de Interação (ARTMED ed).




                                                                                            6

Guiao demografica

  • 1.
    Universidade de Aveiro 2011/2012 Projeto BackToBasics Guião - Demo Gráfica Orientador: Ana Amaro Carla Taveira |47065 Liliana Almeida | 49905 Francisco Silva | 51054 Sílvio Dias | 51068
  • 2.
    Guião – DemoGráfica – BackToBasics A presente demo gráfica pretende apresentar o conceito do nosso projeto ilustrando o caminho feito para chegar até ao pretendido. São mostradas as formas possíveis para obter a informação. O nosso objetivo passou por verificar como se comportam as opções de navegação e interação com o utilizador. Este estudo deu-nos algumas indicações do futuro comportamento da nossa grelha. Foi utilizado o Adobe Premiere Pro para a montagem desta demo e o Balsamiq Mockups para criar as páginas apresentadas. Neste exemplo o pretendido é a obtenção da informação necessária para solucionar o problema narrado no início da demo. Serão apresentadas todas as páginas que estão pensadas para fazerem parte da nossa aplicação, algumas delas que não foram mostradas na demo. Demo Gráfica – Vídeo 1. Utilizador entra na aplicação; 2. Faz registo (preenchimento de formulário); 3. Passa para a página de criação do seu perfil (preenchimento de formulário); 4. Carrega imagem para o seu perfil; 5. Home Page; 6. Seleciona no menu ‘Culturas’ a Cultura ‘Ervas’; 7. Procura informação dentro desta cultura (não encontra o pretendido); 8. Procura informação na pesquisa rápida; 9. Seleciona o que aparentemente lhe interessa; 10. Analisa a pesquisa (não encontra o pretendido); 11. Seleciona separador ‘Fórum’; 12. Seleciona tópico onde a sua pergunta/comentário se insere; 13. Coloca questão no Fórum; 14. Aguarda (Teve sorte! Esperou pouco.); 2
  • 3.
    15. Recebe notificação(responderam à sua questão); 16. Clica na notificação; 17. É direcionado para o Fórum; 18. Repara que quem respondeu à sua questão foi um parceiro da nossa aplicação (informação fidedigna); 19. Acede ao perfil do parceiro a partir de link na foto e nome; 20. Clica ‘Marcar Visita’; 21. Seleciona o dia em que pretende fazer a visita; 22. Clica ‘Marcar’; 23. Acede á área de ‘Actividade Online’, visualização em direto de imagens captadas por câmaras instaladas na respetiva quinta – streaming de vídeo; 24. Acede à página onde tens todos os parceiros; 24. Sai da Aplicação. Descrição das páginas: Fig. 1 Página Inicial. A navegação na nossa aplicação começa com a página iniciar apresentada acima, esta dá a possibilidade ao utilizador para se registar ou fazer login. Exibirá também uma galeria de imagens que servirá para informar o utilizador do tipo de perfil a escolher no registo. Esta escolha servirá para filtrar o conteúdo que será visto. Se o utilizador escolher ‘Horta Comunitária’ visualiza no murar comum (explicado mais à frente) comentários, noticias, etc, 3
  • 4.
    sobre o tipode perfil. No caso de ser curioso vê tudo. O utilizador poderá mudar o tipo de perfil mais tarde, se assim desejar. Se é a primeira vez que o utilizador acede à nossa aplicação, depois de efetuado o registo é direcionado para uma página onde irá criar o seu perfil. Este poderá preenche-lo no momento ou preencher mais tarde acedendo à edição do perfil. Posto isto entra na Home Page. Caso já seja um utilizador registado ao efetuar o Login é redirecionado para a Home Page. Fig. 2 Home Page. A Home Page irá conter um mural comum. Este mural exibirá posts relacionados com o tipo de perfil escolhido pelo utilizador. No entanto, este poderá ver os posts de outros tipos de perfil acedendo ao drop down menu e escolhendo o tipo de perfil dos posts que pretende visualizar. Será possível comentar os posts ou então denunciá-los por ter conteúdo impróprio. As diferentes culturas abordadas na aplicação estarão dentro do menu culturas e terão o seu próprio ‘espaço’. Nesse espaço será exposta toda a informação relativa a essa cultura. No perfil do utilizador haverá um mural dos posts escritos pelo próprio utilizador. Aqui, no momento em que se escreve o post seleciona-se o tipo de perfil em que este post se insere. Assim, no caso de o utilizador mudar o seu tipo de perfil, aquele post estará sempre relacionado com o tema tratado. Isto tornará a filtragem mais fácil e organizada. É no próprio perfil que poderá editar ou eliminar posts, ver amigos, fotos e outros. 4
  • 5.
    Fig. 3 Perfilutilizador. As entradas no Forúm ficarão registadas na base de dados e uma das vantagens de colocar aqui as questões é o facto de estas poderem ser respondidas pelas parcerias da aplicação o que torna a informação daqui retirada fidedigna. Este está organizado por temas (Geral, Agricultura Biológica, Culturas, etc), estes podem dividir-se ou não por mais subtemas (dentro de Culturas a divisão é feita pelas diferentes culturas, por exemplo). Os parceiros serão todos exibidos no menu ‘Parceiros’ e cada um terá o seu próprio perfil que será acessível a partir desta página. Poderão ou não ter marcação de visitas e atividade online, dependendo do Parceiro. Aspetos retirados neste estudo: Positivos: O nosso estudo de grelha mostrou-se adequado, contudo tivemos que fazer alguns ajustes propostos pelos professores Ivo e Júnior. Este estudo permitiu lembrar alguns botões e área de conteúdos esquecidos. Negativos: Conceptualmente o menu inicialmente criado parecia muito bom, com inspiração do que é utilizado pelo jornal JN, mas quando foi criado mostrou-se visualmente inestético e exibia informação redundante, por isso recorremos a outra solução mais eficaz. Chegámos à conclusão que era muito confuso o utilizador poder postar e comentar em vários locais e reduzimos as opções. A página das quintas parceiras foi retificada, verificou-se que tinha demasiados link. A sua informação foi melhor organizada. 5
  • 6.
    Fig. 4 Menupensado inicialmente. Fig. 5 Menu actual. Referências Bibliográficas Preece, R. S. Design de Interação (ARTMED ed). 6