O projeto de interface está organizado em 4 páginas: Home, Pets Perdidos e Encontrados, Pets para Adoção e Contato. O conteúdo foi organizado de forma que a pessoa tenha fácil acesso ao seu objeto, utilizando de cores específicas e característica para cada grupo principal: pets perdidos/encontrados e adoção. Dentro desses grupos principais subpáginas serão apresentadas conforme adição de anúncio de animais e interações com os anunciados.
A home foi pensada para que o usuário consiga visualizar rapidamente seu objetivo na plataforma. Organizada em 4 faixas: logo, pets perdidos/ecnotnrados e adoção com cores e textos mais chamativos e, por fim a galeria/carrosel de pets que já encontraram ou reencontraram seu lar.
por meio do clique no botão "Saiba Mais" na faixa dos pets perdidos na Home, ou por meio do menu superior de navegação, o usuário será digido para essa página. Nela buscamos organizar de forma bastante simples e clara as opções de quem deseja anunciar a perda de um animal e de quem encontrou um animal perdido. Também será inserida uma galeria com os anúncios de pets mais recentes e, logo abaixo, um botão para indicar o acesso para outra página que conterá todos os animais cadastrados ativos. Abaixo indicamos um campo que terá o mapeamento dos animais por meio do endereço fornecido no cadastro.
Clicando sobre o botão "perdi meu pet" o usuário será direcionado para uma página contendo um formulário para cadastro do anúncio:
Da mesma forma, para aquele usuário que encontrou um pet perdido e deseja efetuar um anúncio, ao clicar em "encontrei um pet", será direcionado para o formulário abaixo:
Ao clicar no ícone da seta lateral em "ver galeria completa", o usuário será dirigiado para a página seguinte, contendo todos os anúncios de pets perdidos e encontrados com uma breve descrição do animal.
Ao clicar sobre um anúncio, seja na página anterior ou no card da galeria completa, por exemplo, no "Doguinho", uma página padrão de anúncio será aberta com fotos, descrição e geolocalização. O usuário encontrará botões que irão permitir que o dono se comunique diretamente com o tutor por meio do "SOU O DONO", relatar algum problema ou entrar em contato com a PetSearch sobre esse anúncio.
Clicando sobre "SOU O DONO", será direcionado a uma página de contato direto com o tutor:
Caso o tutor deseje alterar o anúncio, ao clicar em "Editar" na página de anúncio do animal, será exibido uma janela poup-up de confirmação de e-mail e posterior liberação do botão de edição, que fará com que o usuário retorne ao formulário inicialmente preenchido ou remover o anúncio.
Caso o anúncio seja de um pet perdido, feito pelo seu dono, como é o caso fictício do "Garfield", a página do anúncio é praticamente igual, muda apenas o botão que permitirá o contato direto do tutor - quem encontrou - com quem perdeu por meio do "ENCONTREI".
por meio do clique no botão "Saiba Mais" na faixa dos pets perdidos na Home, ou por meio do menu superior de navegação, o usuário será digido para essa página. Utilizamos a mesma estrutura dos Animais Perdidos a fim de criar uma mesma linguagem visual, alterando apenas as cores e no caso especial dessa página, com a adição de um carrossel/galeria com links para as ONGs parceiras.
O usuário que desejar doar um pet poderá criar um anúncio clicando em "fazer doação", e será direcionado para a página com o formulário abaixo:
O usuário que deseja adotar um pet será dirigido, poderá clicar no botão "quero adotar" ou clicar no botão de seta lateral abaixo da galeria completa para visualizar todos os animais disponíveis para um novo lar.
Ao clicar sobre um anúncio, seja na página anterior ou no card da galeria completa, por exemplo, no "Easter", uma página padrão de anúncio será aberta com fotos, descrição e geolocalização. O usuário encontrará botões que irão permitir que o dono se comunique diretamente com o tutor ou ONG por meio do botão "QUERO ADOTAR", relatar algum problema ou entrar em contato com a PetSearch sobre esse anúncio. A funcionalidade de edição é igual à da pagina dos Pets Perdidos.
Clicando sobre "QUERO ADOTAR", será direcionado a uma página de contato direto com o tutor:
Através da homepage, no menu de navegação é possível acessar a opção "Contato" que leverá o usuário até a página de identificação do projeto. Na página é possível conhecer um pouco mais sobre a PetSearch e ter uma comunicação direta conosco.
Visão geral da interação do usuário pelas telas do sistema e protótipo interativo das telas com as funcionalidades que fazem parte do sistema (wireframes).
Apresente as principais interfaces da plataforma. Discuta como ela foi elaborada de forma a atender os requisitos funcionais, não funcionais e histórias de usuário abordados nas Documentação de Especificação.
Fluxo de usuário (User Flow) é uma técnica que permite ao desenvolvedor mapear todo fluxo de telas do site ou app. Essa técnica funciona para alinhar os caminhos e as possíveis ações que o usuário pode fazer junto com os membros de sua equipe.
Links Úteis:
São protótipos usados em design de interface para sugerir a estrutura de um site web e seu relacionamentos entre suas páginas. Um wireframe web é uma ilustração semelhante do layout de elementos fundamentais na interface.
Links Úteis:
- Protótipos vs Wireframes
- Ferramentas de Wireframes
- MarvelApp
- Figma
- Adobe XD
- Axure (Licença Educacional)
- InvisionApp (Licença Educacional)