Interface e Usabilidade de Software

UNIFASIPE CENTRO UNIVERSITÁRIO CAMPUS AQUARELA SINOP ANÁLISE E DESENVOLVIMENTO DE SISTEMAS PROFº YURI IGNACIO DA SILVA GOBATTO Disciplina Interface e Usabilidade de Software Atividade N1 5 Pontos 1º Semestre Sinop MT 2024 SUMÁRIO 1 INTRODUÇÃO 3 2 A SOLICITAÇÃO 3 3 A ESPECIFICAÇÃO 3 3 1 INTRODUÇÃO Você como um Tecnólogo em Analise e Desenvolvimento de Sistemas foi contratado para especificar a interface gráfica de uma aplicação móvel A empresa contratante fez as seguintes solicitações via email Nós da Sinop Software estamos desenvolvendo uma aplicação mobile para complementar nosso sistema de Gestão de Insumos nós necessitamos de uma especificação técnica dos componentes e das telas e como elas irão interagir Em anexo segue o que precisamos 2 A SOLICITAÇÃO O aplicativo terá 4 telas uma de login onde deverá ser preenchido os dados de email e senha além de dois botões um que realizara o login e outro que deverá levar para a tela de cadastro Na tela de cadastro o usuário terá de preencher o nome email senha e confirmação de senha e por fim dois botões um para efetivar o cadastro e outro para retornar a tela de login Após o login ou o cadastramento o usuário será redirecionado para a tela principal onde será possível visualizar informações analíticas sendo um gráfico de insumos entregues ao longo do tempo e a lista de insumos comprados bem como seu respectivo estado aguardando entrega e entregue Por fim ao clicar em um dos itens da lista deverá mostrar as informações sobre a compra como data de compra valor local de entrega estado da entrega e vendedor 3 A ESPECIFICAÇÃO Com a solicitação em mãos é de sua responsabilidade especificar de forma dissertativa os componentes e suas características como caixas de texto labels botões listas de seleção checkboxes etc que cada tela terá além de desenhar o esquema de navegação entre as telas Especificação técnica Aplicativo de Gestão de Insumos Empresa SINOP Software Analista Tela 1 Login 1 Título da tela O título da tela é Login Está posicionado na parte de cima da tela para indicar o propósito da página 2 Texto de instrução É apresentado abaixo do título o texto de instrução Insira email e senha para entrar para orientar o usuário 3 Campos de entrada Campo Email Textfield com propriedade required com contorno e preenchimento em cinza e nome interno Email Acima possui rótulo Digite seu email Campo Senha Textfield com propriedade required com contorno e preenchimento em cinza e nome interno Senha Acima possui rótulo Digite sua senha Ao inserir a senha apresenta a mesma escondida Type password Apresenta ícone com evento click em seu canto direito representado por um olho que ao clicar exibe a senha inserida e ao clicar novamente esconde a senha Campo Permanecer conectado Elemento checkbox com texto Permanecer conectado fornecido para possibilitar ao usuário selecionar salvar suas informações de login e permanecer conectado 4 Botões Botão de Login Botão contido em azul habilitado e clicável utilizado para validar os dados do usuário email e senha e caso estejam corretos redireciona para a tela principal com o usuário logado Possui rótulo Login Botão de Cadastro Botão delineado em azul habilitado e clicável utilizado para redirecionar o usuário para a tela de cadastro possui o rótulo Cadastrarse 5 Logotipo Uma representação de logotipo da empresa fictícia Sinop Software em azul é exibida no rodapé da tela para identificar a responsável pelo aplicativo Tela 2 Cadastro 1 Título da tela O título da tela é Cadastrese Está posicionado na parte de cima da tela para indicar o propósito da página 2 Campos de entrada Campo Nome Textfield com propriedade required com contorno e preenchimento em cinza e nome interno Nome Completo Campo Email Textfield com propriedade required com contorno e preenchimento em cinza e nome interno Email Campo Senha Textfield com propriedade required com contorno e preenchimento em cinza e nome interno Senha Ao inserir a senha apresenta a mesma escondida Type password Apresenta ícone com evento click em seu canto direito representado por um olho que ao clicar exibe a senha inserida e ao clicar novamente esconde a senha Campo Confirmação de Senha Textfield com propriedade required com contorno e preenchimento em cinza e nome interno Confirmação de Senha Ao inserir a confirmação da senha apresenta a mesma escondida Type password Apresenta ícone com evento click em seu canto direito representado por um olho que ao clicar exibe o texto inserido e ao clicar novamente esconde a senha O texto inserido deve corresponder ao texto preenchido no campo Senha 3 Botões Botão de Cadastro Botão contido em azul habilitado e clicável utilizado para validar os dados do usuário Nome completo Email Senha e Confirmação de Senha e caso estejam corretamente preenchidos cria o registro do usuário e redireciona para a tela principal com o usuário logado Possui rótulo Concluir cadastro Botão de Login Botão delineado em azul habilitado e clicável utilizado para redirecionar o usuário para a tela de login possui o rótulo Já possui conta Faça login 4 Logotipo Uma representação de logotipo da empresa fictícia Sinop Software em azul é exibida no rodapé da tela para identificar a responsável pelo aplicativo Tela 3 Principal 1 Título da tela O título da tela é Dashboard de insumos Está posicionado na parte de cima da tela para indicar o propósito da página 2 Texto de boasvindas É apresentado no topo da tela o texto de identificação do usuário logado Bemvindo nomeusuario 3 Campos de saída Gráfico de insumos Gráfico do tipo Bar Chart com dois indicadores com a linha horizontal representando o tempo e a linha vertical representando a quantidade de insumos entregues Deve apresentar legenda para auxiliar no entendimento Lista de insumos Componente table com título Listagem de insumos com as colunas de Código Nome e Estado atual Campo Código Campo numérico inteiro não habilitado para edição deve apresentar hiperlink no código para redirecionar para a visualização da tela de consulta Campo Nome Campo de texto não habilitado para edição Campo Estado atual Campo de texto com valores pré definidos não habilitado para edição É atualizado de acordo com o estado da entrega Tela 4 Consulta 1 Título da tela O título da tela é Consulta de insumo Está posicionado na parte de cima da tela para indicar o propósito da página 2 Texto de boasvindas É apresentado no topo da tela o texto de identificação do usuário logado Bemvindo nomeusuario 3 Campos de saída Campo Nome do insumo Campo de texto não habilitado para edição Deve corresponder ao valor apresentado na listagem de insumos deve estar obrigatoriamente preenchido Campo Data de compra Campo de texto não habilitado para edição Datetime com formato ddmmaaaa às hhmm Campo Valor total Campo de texto não habilitado para edição Deve apresentar o prefixo padrão R antes do valor numérico obrigatório Campo Local de entrega Campo de texto não habilitado para edição Deve apresentar a cidade e estado que a entrega será feita separados por uma vírgula Campo Estado da entrega Campo de texto não habilitado para edição Deve obrigatoriamente apresentar o estado da entrega e deve corresponder ao valor apresentado para o registro na listagem de insumos Campo Vendedor Campo de texto não habilitado para edição Deve obrigatoriamente apresentar o nome de um vendedor Esquema de navegação entre as telas Navegação utilitária Tela de Cadastro Tela de Login Navegação Estrutural Tela Principal Tela de Consulta Protótipos de alta fidelidade Tela 1 Login Tela 2 Cadastro Cadastrese Nome Completo Email Senha Confirmação de Senha Já possui conta Faça login Concluir cadastro SINOP SOFTWARE Tela 3 Principal Bemvindo Fulano Dashboard de insumos Listagem de insumos Código Nome Estado 56168 Alcool Entregue 56167 Algodão Aguardando entrega 56166 Água mineral Entregue Tela 4 Consulta Bemvindo Fulano Consulta de insumo 56167 Nome do insumo Algodão Data de compra 15022024 às 1530 Valor total R25039 Local de entrega Campinas SP Estado da entrega Aguardando entrega Vendedor Jorge Amado