Protótipos de alta fidelidade - ravileal/ezhealth_desktop_-_2020.2_PIES GitHub Wiki

Realizamos os protótipos de alta fidelidade de algumas telas, as quais julgamos de maior importância para um entendimento mais amplo do funcionamento do sistema. A seguir temos 4 telas apresentadas, são elas: Tela de Login, Tela home, Tela de Adicionar alimentos e Popup com a tabela nutricional.

Obs: Todo os protótipos foram criados usando o Adobe XD.

Tela de Login

A tela de login acima será a primeira tela que o usuário verá ao entrar no sistema se não estiver logado, como pode-se perceber, além de realizar o login utilizando o usuário (email cadastrado) e a senha, o usuário também poderá realizar o cadastro no sistema, há um botão que o enviará para tal tela se clicado.

Tela Home

A tela acima mostra a tela inicial do sistema, é a primeira que o usuário verá ao realizar login. Há um menu lateral onde todas as opções disponíveis dentro do sistema estão sendo mostradas ao usuário. Nessa tela nos é apresentado uma espécie de Diário Alimentar do usuário, é aqui onde ele pode registrar tudo o que comeu durante o dia, bem como visualizar os alimentos ou refeições prontas que ingeriu em cada horário de alimentação. Ao clicar em Café da manhã, por exemplo, ele será direcionado para uma página de Adicionar alimentos onde poderá então adicionar tudo o que foi ingerido por ele.

Adicionar Refeição

Após o usuário clicar em adicionar refeição em algum momento do dia, o sistema mostrará a tela acima, onde o usuário poderá adicionar alimentos na refeição. A aba esquerda contém os alimentos adicionados na refeição atual e na aba direita uma área de pesquisa, onde o usuário poderá buscar um alimento para adicionar à refeição atual ou buscar refeições personalizadas criadas anteriormente pelo próprio usuário. Além disso, o usuário poderá ver os valores nutricionais da refeição atual caso clique na opção “Ver tabela nutricional”.

Tabela Nutricional

Esta tela funcionará como um popup, e irá aparecer para o usuário após ele clicar em “Ver tabela nutricional”. Os dados apresentados ao usuário serão referentes aos dados nutricionais de todos alimentos contidos na refeição anterior. Dentre os dados apresentados estão, os carboidratos, proteínas e gorduras. Todos eles são apresentados com um valor de medida ao seu lado, informando o valor em g correspondente a refeição. Algumas informações adicionais são apresentadas na tela no canto superior esquerdo. Nesse campo será apresentado o tipo de refeição e a data em que a refeição foi realizada. Após a visualização de todas estas informações, o usuário poderá retornar para tela de refeição da qual ele veio clicando na seta com sentido direita para esquerda que está presente no canto superior direito.

Home (após usuário consumir alimentos)

Após o usuário adicionar alimentos na refeição atual, o programa voltará para a tela Home, porém a tabela de calorias será modificada de acordo com o que foi consumido pelo mesmo. Logo, a quantidade de calorias que precisam ser consumidas diariamente, será diminuída. O mesmo ocorre se o usuário realizar um exercício (será contabilizado na área de “Gastas”), porém o número de calorias a ser consumida aumenta.

Refeições personalizadas

Após o usuário clicar na aba de refeições personalizadas, o sistema mostrará a tela acima, onde o usuário poderá visualizar suas refeições personalizadas, assim como criar novas refeições. Há um campo de busca, caso o usuário possua muitas refeições e queria buscar alguma específica. Além disso, também é possível deletar ou editar essas refeições. Na parte inferior da tela, o usuário poderá clicar na opção “Criar uma nova refeição personalizada” para criar uma nova refeição.

Criar nova refeição personalizada

Após o usuário clicar em criar uma nova refeição personalizada, o sistema mostrará a tela acima, onde o usuário poderá adicionar alimentos na nova refeição. Na parte superior, o usuário poderá editar o nome da refeição. Na aba esquerda contém os alimentos adicionados na refeição a ser criada e na aba direita uma área de pesquisa, onde o usuário poderá buscar um alimento para essa refeição. Além disso, o usuário poderá ver os valores nutricionais da refeição caso clique na opção “Ver tabela nutricional”. Após clicar em “Salvar”, a refeição estará criada.

Refeições personalizadas

Ao clicar no botão “Salvar” na imagem anterior, a refeição será criada e ficará pronta para ser utilizada em algum momento. O sistema voltará para a tela principal de refeições personalizadas, e mostrará a nova refeição criada na lista de refeições personalizadas, no exemplo da imagem, a refeição se chama “Meu almoço 2”.