Como melhorar essa interface gráfica para uma melhor experiência de usuário?

Front-end
, , ,
#1

Olá alguém?

O que vocês acham dessa interface gráfica?
Fiz essa interface gráfica e gostaria de saber se existe algo para ser melhorado ou como melhorar ainda mais a experiência de usuário. Estou utilizando o framework Bootstrap, ele é bom ou existem outros melhores?

É uma calculadora web responsiva que usa tabs: tem as opções; somar, dividir, subtrair e multiplicar. Será implementada em PHP. Utiliza a biblioteca Javascript: Jquery


<!doctype html>
<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Exercício</title>
  </head>
  <body>
  	
<div class="container">
	<div class="alert alert-success" role="alert"></div></div>
	<div id="draggable" class="ui-widget-content">  
	<div class="container">
  <div class="card">
  <div class="card-header">
  	<ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="one-tab" data-toggle="tab" href="#one" role="tab" aria-controls="One" aria-selected="true">Somar</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="two-tab" data-toggle="tab" href="#two" role="tab" aria-controls="Two" aria-selected="false">Dividir</a>
            </li>
            
<li class="nav-item">
                <a class="nav-link" id="three-tab" data-toggle="tab" href="#three" role="tab" aria-controls="Three" aria-selected="false">Multiplicar</a>
            </li><li class="nav-item">
                <a class="nav-link" id="four-tab" data-toggle="tab" href="#four" role="tab" aria-controls="Four" aria-selected="false">Subtrair</a>
            </li>
          </ul>
  </div>
  <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade p-3 active show" id="one" role="tabpanel" aria-labelledby="one-tab">
            <h5 class="card-title">Área de Soma</h5>
            <p class="card-text">Forneça os valores para a entrada e espere o resultado.</p>            
          </div>
          <div class="tab-pane fade p-3" id="two" role="tabpanel" aria-labelledby="two-tab">
            <h5 class="card-title">Área de Divisão</h5>
            <p class="card-text">Forneça os valores para a entrada e espere o resultado.</p>            
          </div>
          <div class="tab-pane fade p-3" id="three" role="tabpanel" aria-labelledby="three-tab">
            <h5 class="card-title">Área de Multiplicação</h5>
            <p class="card-text">Forneça os valores para a entrada e espere o resultado.</p>            
          </div>
          <div class="tab-pane fade p-3" id="four" role="tabpanel" aria-labelledby="four-tab">
            <h5 class="card-title">Área de Subtração</h5>
            <p class="card-text">Forneça os valores para a entrada e espere o resultado.</p>            
          </div>
        </div>
        <script type="text/javascript">
        	
        	function validateNumber(event) {
        		var key = window.event ? event.keyCode : event.which;
        		if (event.keyCode === 8 || event.keyCode === 46) {
        			return true;
        		} else if ( key < 48 || key > 57 ) {
        			return false;
        		} else {
        			return true;
        		}
        	};

        </script>
        <script type="text/javascript">
        	
        	$(document).ready(function(){ 
        		$('[id^=edit1]', '[id^=edit2]').keypress(validateNumber);
        	});

        </script>
        <script>
        	
        	function formSubmit() {
        		document.forms["myForm"].submit();
        	}
</script>
<div class="card-body">
<form name="myForm" action="index.php" method="get">
<div class="input-group mb-3">
  <input type="number" class="form-control" id="edit1" placeholder="Valor A" aria-label="Valor A" aria-describedby="basic-addon2" value="0" size="5" maxlength="5" name="valor" pattern="[0-9]+" required="required">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="submit">Enviar</button>
  </div>
</div>
<div class="input-group mb-3">
  <input type="number" class="form-control" id="edit2" placeholder="Valor B" aria-label="Valor B" aria-describedby="basic-addon2" value="0" size="5" maxlength="5" name="valor" pattern="[0-9]+" required="required">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary"  onclick="formSubmit()"  type="submit">Enviar</button>
  </div>
</div>
</form>
  </div>
</div> 
</div>
</div>
  
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
</body>
</html>
#2

Visual clássico de calculadora seria melhor, pelo menos pela minha experiência.

1 curtida
#3

Obrigado pela sua informação, existe outra consideração que gostaria de falar? Vou fazer um novo modelo baseado nisso :smiley:

#4

Tem vários exemplos na internet. Um deles:

https://codepen.io/dougjuliao/pen/vtazA

1 curtida
#5

Esse exemplo é ótimo, mas gostaria de criar uma interface gráfica com uma experiência de usuário também ótima e que se fosse possível não fosse uma cópia simplesmente :smiley:

#6

Então faz algo que nao existe.

1 curtida
#8

Ai decisão é sua, se quer ser criativo ou simplesmente copiar uma ideia que já funciona faz séculos.

1 curtida