Este documento apresenta uma demo gráfica para o projeto BackToBasics. A demo mostra o caminho de navegação e interação com o usuário através da aplicação, incluindo registro, criação de perfil, pesquisa de informações, uso do fórum e marcação de visitas a parceiros. O documento também descreve as páginas principais da aplicação e fornece insights sobre o estudo de design realizado.

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 – 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

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 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

5. 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

6. Fig. 4 Menu pensado inicialmente.
Fig. 5 Menu actual.
Referências Bibliográficas
Preece, R. S. Design de Interação (ARTMED ed).
6