SlideShare ist ein Scribd-Unternehmen logo
1 von 6
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (8)

Catalogo estética
Catalogo estéticaCatalogo estética
Catalogo estética
 
Historia
HistoriaHistoria
Historia
 
Quimica jope
Quimica jopeQuimica jope
Quimica jope
 
Manual De Word
Manual De WordManual De Word
Manual De Word
 
Exposición trabajos EPV
Exposición trabajos EPVExposición trabajos EPV
Exposición trabajos EPV
 
Madeira - Funchal - 2009
Madeira - Funchal - 2009Madeira - Funchal - 2009
Madeira - Funchal - 2009
 
Hans Kelsen
Hans KelsenHans Kelsen
Hans Kelsen
 
mercadotecnia
mercadotecniamercadotecnia
mercadotecnia
 

Ähnlich wie Guiao demografica

Facebook Timeline para Marcas - Estratégias e Possibilidades
Facebook Timeline para Marcas - Estratégias e PossibilidadesFacebook Timeline para Marcas - Estratégias e Possibilidades
Facebook Timeline para Marcas - Estratégias e PossibilidadesPaperCliQ Comunicação
 
Ppt unidade2 ied_2014
Ppt unidade2 ied_2014Ppt unidade2 ied_2014
Ppt unidade2 ied_2014dmangstman
 
Aplicativo Exame
Aplicativo ExameAplicativo Exame
Aplicativo ExameLuana
 
Propostas de metodologias para Monitoramento
Propostas de metodologias para MonitoramentoPropostas de metodologias para Monitoramento
Propostas de metodologias para MonitoramentoAna Célia Costa
 
Aplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais popularesAplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais popularesPaperCliQ Comunicação
 
Aplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais popularesAplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais popularesTarcízio Silva
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2aiadufmg
 
Treinamento para Tutores do PNC
Treinamento para Tutores do PNCTreinamento para Tutores do PNC
Treinamento para Tutores do PNCIedo Brito
 
Skoob - parte 2
Skoob - parte 2Skoob - parte 2
Skoob - parte 2aiadufmg
 
Dicas de Marketing Pessoal utilizando as Mídias Sociais
Dicas de Marketing Pessoal utilizando as Mídias SociaisDicas de Marketing Pessoal utilizando as Mídias Sociais
Dicas de Marketing Pessoal utilizando as Mídias SociaisTarcízio Silva
 
Exemplo de Interface Homem Máquina
Exemplo de Interface Homem MáquinaExemplo de Interface Homem Máquina
Exemplo de Interface Homem MáquinaPatricia Batista
 
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas DigitaisCRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas DigitaisCauê de Souza
 
35 reports úteis para monotorização de redes sociais
35 reports úteis para monotorização de redes sociais35 reports úteis para monotorização de redes sociais
35 reports úteis para monotorização de redes sociaisE.LIFE
 
Web com Pipoca 2013 - Linkedin
Web com Pipoca 2013 - LinkedinWeb com Pipoca 2013 - Linkedin
Web com Pipoca 2013 - LinkedinCínthia Demaria
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)maumoreira
 

Ähnlich wie Guiao demografica (20)

Facebook Timeline para Marcas - Estratégias e Possibilidades
Facebook Timeline para Marcas - Estratégias e PossibilidadesFacebook Timeline para Marcas - Estratégias e Possibilidades
Facebook Timeline para Marcas - Estratégias e Possibilidades
 
Passo a passo redes sociais
Passo a passo redes sociaisPasso a passo redes sociais
Passo a passo redes sociais
 
Ppt unidade2 ied_2014
Ppt unidade2 ied_2014Ppt unidade2 ied_2014
Ppt unidade2 ied_2014
 
Aplicativo Exame
Aplicativo ExameAplicativo Exame
Aplicativo Exame
 
Propostas de metodologias para Monitoramento
Propostas de metodologias para MonitoramentoPropostas de metodologias para Monitoramento
Propostas de metodologias para Monitoramento
 
Aplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais popularesAplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais populares
 
Aplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais popularesAplicativos Sociais no Orkut - os cinco mais populares
Aplicativos Sociais no Orkut - os cinco mais populares
 
Guiao terrapura
Guiao terrapuraGuiao terrapura
Guiao terrapura
 
Terra pura guião
Terra pura guiãoTerra pura guião
Terra pura guião
 
Skoob parte 2
Skoob   parte 2Skoob   parte 2
Skoob parte 2
 
Treinamento para Tutores do PNC
Treinamento para Tutores do PNCTreinamento para Tutores do PNC
Treinamento para Tutores do PNC
 
Skoob - parte 2
Skoob - parte 2Skoob - parte 2
Skoob - parte 2
 
Social
Social Social
Social
 
Digitalks - FLN
Digitalks - FLNDigitalks - FLN
Digitalks - FLN
 
Dicas de Marketing Pessoal utilizando as Mídias Sociais
Dicas de Marketing Pessoal utilizando as Mídias SociaisDicas de Marketing Pessoal utilizando as Mídias Sociais
Dicas de Marketing Pessoal utilizando as Mídias Sociais
 
Exemplo de Interface Homem Máquina
Exemplo de Interface Homem MáquinaExemplo de Interface Homem Máquina
Exemplo de Interface Homem Máquina
 
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas DigitaisCRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
CRP- 0420: Comunicação Digital - Aula 8: Trabalho Final e Ferramentas Digitais
 
35 reports úteis para monotorização de redes sociais
35 reports úteis para monotorização de redes sociais35 reports úteis para monotorização de redes sociais
35 reports úteis para monotorização de redes sociais
 
Web com Pipoca 2013 - Linkedin
Web com Pipoca 2013 - LinkedinWeb com Pipoca 2013 - Linkedin
Web com Pipoca 2013 - Linkedin
 
12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)12° Encontro de WebDesign (usabilidade)
12° Encontro de WebDesign (usabilidade)
 

Mehr von Silvio Dias

Fase 2 resultados
Fase 2   resultadosFase 2   resultados
Fase 2 resultadosSilvio Dias
 
Questionario satisfacaouso fase2_tablet
Questionario satisfacaouso fase2_tabletQuestionario satisfacaouso fase2_tablet
Questionario satisfacaouso fase2_tabletSilvio Dias
 
Questionario preliminar fase2_tablet
Questionario preliminar fase2_tabletQuestionario preliminar fase2_tablet
Questionario preliminar fase2_tabletSilvio Dias
 
Questionario satisfacaouso fase2
Questionario satisfacaouso fase2Questionario satisfacaouso fase2
Questionario satisfacaouso fase2Silvio Dias
 
Questionario preliminar fase2
Questionario preliminar fase2Questionario preliminar fase2
Questionario preliminar fase2Silvio Dias
 
Questionario satisfacaouso fase1
Questionario satisfacaouso fase1Questionario satisfacaouso fase1
Questionario satisfacaouso fase1Silvio Dias
 
Questionario preliminar fase1
Questionario preliminar fase1Questionario preliminar fase1
Questionario preliminar fase1Silvio Dias
 
Fase 1 resultados
Fase 1   resultadosFase 1   resultados
Fase 1 resultadosSilvio Dias
 
Relatorio especificacao tecnica-e_grafica
Relatorio especificacao tecnica-e_graficaRelatorio especificacao tecnica-e_grafica
Relatorio especificacao tecnica-e_graficaSilvio Dias
 
áLbum de fotografias
áLbum de fotografiasáLbum de fotografias
áLbum de fotografiasSilvio Dias
 
áLbum de fotografias
áLbum de fotografiasáLbum de fotografias
áLbum de fotografiasSilvio Dias
 
áLbum de fotografias
áLbum de fotografiasáLbum de fotografias
áLbum de fotografiasSilvio Dias
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnicaSilvio Dias
 
Briefing final postr
Briefing final postrBriefing final postr
Briefing final postrSilvio Dias
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnicaSilvio Dias
 

Mehr von Silvio Dias (18)

Fase 2 resultados
Fase 2   resultadosFase 2   resultados
Fase 2 resultados
 
Questionario satisfacaouso fase2_tablet
Questionario satisfacaouso fase2_tabletQuestionario satisfacaouso fase2_tablet
Questionario satisfacaouso fase2_tablet
 
Questionario preliminar fase2_tablet
Questionario preliminar fase2_tabletQuestionario preliminar fase2_tablet
Questionario preliminar fase2_tablet
 
Questionario satisfacaouso fase2
Questionario satisfacaouso fase2Questionario satisfacaouso fase2
Questionario satisfacaouso fase2
 
Questionario preliminar fase2
Questionario preliminar fase2Questionario preliminar fase2
Questionario preliminar fase2
 
Questionario satisfacaouso fase1
Questionario satisfacaouso fase1Questionario satisfacaouso fase1
Questionario satisfacaouso fase1
 
Questionario preliminar fase1
Questionario preliminar fase1Questionario preliminar fase1
Questionario preliminar fase1
 
Fase 1 resultados
Fase 1   resultadosFase 1   resultados
Fase 1 resultados
 
Aula projeto 9
Aula projeto 9Aula projeto 9
Aula projeto 9
 
Terrapura mi
Terrapura miTerrapura mi
Terrapura mi
 
Relatorio especificacao tecnica-e_grafica
Relatorio especificacao tecnica-e_graficaRelatorio especificacao tecnica-e_grafica
Relatorio especificacao tecnica-e_grafica
 
Quinta moleiro
Quinta moleiroQuinta moleiro
Quinta moleiro
 
áLbum de fotografias
áLbum de fotografiasáLbum de fotografias
áLbum de fotografias
 
áLbum de fotografias
áLbum de fotografiasáLbum de fotografias
áLbum de fotografias
 
áLbum de fotografias
áLbum de fotografiasáLbum de fotografias
áLbum de fotografias
 
Guiao demotecnica
Guiao demotecnicaGuiao demotecnica
Guiao demotecnica
 
Briefing final postr
Briefing final postrBriefing final postr
Briefing final postr
 
Guião demotécnica
Guião demotécnicaGuião demotécnica
Guião demotécnica
 

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