UX-тест простого калькулятора на JavaScript

UX-тест простого калькулятора на JavaScript

Что скажут UX-тестировщики про наш проект

Мы плавно двигаемся по профессии тестировщика. В прошлый раз мы закончили на том, что сделали свой калькулятор на JavaScript — быстро и просто, как от нас требовалось. Теперь отдадим наш проект UX-тестировщикам и посмотрим, что они скажут.

Что делают UX-тестировщики

Если упростить, то они проверяют сайт, сервис или программу на то, насколько ей будет удобно пользоваться, например:

  • удобно ли расположены кнопки?
  • читаемый ли шрифт?
  • а можно ли пользоваться программой без мышки?
  • понятно ли, что вообще происходит на экране?

Проверка правильности вычислений и работоспособности программы — не их конёк, только если это напрямую не влияет на удобство использования. Главное для UX-тестировщика — сделать так, чтобы было удобно пользователю.

Что сказали в отделе UX-тестов

  1. Элементы слишком мелкие, очень сложно попасть мышкой.
  2. Шрифты тоже мелкие и надписи плохо читаются.
  3. Непонятно, какую операцию выбрал в итоге пользователь.
  4. Во втором поле ввода нет обработки нажатия энтера, чтобы сразу посчитать результат.

После согласования с руководителем проекта нам поступили такие задачи:

  1. Сделать все элементы в три раза крупнее и разместить по центру, чтобы калькулятор сразу был заметен на странице.
  2. Увеличить шрифт пропорционально элементам.
  3. Подсвечивать и оставлять подсветку на той математической операции, которую выбрал пользователь.
  4. Добавить обработку нажатия энтера во втором поле ввода.

Это 4 тикета, которые появились в нашем трекере задач. Сделаем их все по очереди.

Увеличиваем размер

Чтобы было понятно, что это калькулятор, добавим заголовок:

Калькулятор

Чтобы выровнять всё по центру и сделать калькулятор больше, возьмём код со стилями из нашего старого проекта про генератор паролей:

/*задаём общие параметры для всей страницы: шрифт и отступы*/
body {
  text-align: center;
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/* настраиваем внешний вид полей ввода*/
input {
  display: inline-block;
  margin: 20px auto;
  border: 2px solid #eee;
  padding: 10px 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
Уже гораздо лучше. Теперь надо сделать кнопки побольше
Уже гораздо лучше. Теперь надо сделать кнопки побольше

Увеличиваем кнопки и надписи на них

Сделаем с ними то же, что и с остальными элементами — добавим отдельный стиль для кнопок и в нём пропишем все параметры:

button{
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
  margin: 10px;
  padding: 10px;
}
Во, так гораздо лучше!
Во, так гораздо лучше!

Подсвечиваем выбранное действие

Первое, что нужно сделать, — написать отдельный класс, который будет подсвечивать нажатую кнопку выбранного математического действия:

/* стиль подсветки выбранной операции */
.light{
background-color: yellow;
}

Дальше логику сделаем такой:

  1. Сделаем отдельную функцию, которая уберёт класс подсветки со всех кнопок, а потом добавит только в нужную.
  2. Передадим название нужной кнопки в параметре клика по самой кнопке.
  3. Чтобы не потерять выбранную операцию, добавим изменение переменной op внутри этой новой функции.

Сначала разберёмся с кнопками — при нажатии вызываем новую функцию и передаём ей название кнопки:

<!-- блок с кнопками -->
<div id="operator_btns">
  <button id="plus" onclick="sel_ligth('plus')">+</button>
  <button id="minus" onclick="sel_ligth('minus')">-</button>
  <button id="times" onclick="sel_ligth('times')">x</button>
  <button id="divide" onclick="sel_ligth('divide')">:</button>
</div>

Теперь напишем новую функцию, которая и будет управлять подсветкой:

// функция, которая подсветит выбранное математическое действие
function sel_ligth(sel_id) {
	// убираем класс подсветки со всех кнопок
	document.getElementById("plus").classList.remove("light");
	document.getElementById("minus").classList.remove("light");
	document.getElementById("times").classList.remove("light");
	document.getElementById("divide").classList.remove("light");

	// и добавляем его только к нажатой
	document.getElementById(sel_id).classList.add("light");

	// в зависимости от нажатой клавиши меняем значение переменной op
	switch (sel_id) {
	  case "plus":
	    op = "+"
	    break;
	  case 'minus':
	    op = '-'
	    break;
	  case 'times':
	    op = "*"
	    break;
	  case 'divide':
	    op = "/"
	    break;
	}
}
Теперь видно, что именно будет делать калькулятор
Теперь видно, что именно будет делать калькулятор

Добавляем обработку энтера

Последнее, что осталось сделать из замечаний UX-тестов, — добавить обработку энтера во втором поле ввода. Для этого просто находим по ID второе поле и вешаем на него обработчик событий. Внутри обработчика делаем проверку кода нажатой клавиши и, если это энтер, — вызываем функцию подсчёта результата:

// добавляем обработчик нажатия на клавиши ко второму полю ввода
  document.getElementById("num2").addEventListener('keydown', function(e) {
	if (e.keyCode === 13) {
	  func();
	}
  });
Всё готово!
Всё готово!

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<title>Калькулятор</title>

	<style type="text/css">
		/*задаём общие параметры для всей страницы: шрифт и отступы*/
		body {
		  text-align: center;
		  margin: 10;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 16px;
		}
		/* настраиваем внешний вид полей ввода*/
		input {
		  display: inline-block;
		  margin: 20px auto;
		  border: 2px solid #eee;
		  padding: 10px 20px;
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 16px;
		}
		/* внешний вид кнопок */
		button{
		  font-family: Verdana, Arial, sans-serif;
		  font-size: 16px;
		  margin: 10px;
		  padding: 10px;
		}
		/* стиль подсветки выбранной операции */
		.light{
			background-color: yellow;
		}
	</style>

</head>
<body>

	<!-- заголовок -->
	<h1>Калькулятор</h1>
	<!-- поле ввода первого числа -->
	<input id="num1" />

	<!-- блок с кнопками -->
	<div id="operator_btns">
	  <button id="plus" onclick="sel_ligth('plus')">+</button>
	  <button id="minus" onclick="sel_ligth('minus')">-</button>
	  <button id="times" onclick="sel_ligth('times')">x</button>
	  <button id="divide" onclick="sel_ligth('divide')">:</button>
	</div>

	<!-- поле ввода второго числа -->
	<input id="num2" />
	<br>

	<!-- кнопка для расчётов -->
	<button onclick="func()">Посчитать</button>

	<!-- здесь будет результат -->
	<p id="result"></p>

	<!-- наш скрипт -->
	<script>
	  // переменная, в которой хранится выбранное математическое действие
	  var op; 

	  // функция, которая подсветит выбранное математическое действие
	  function sel_ligth(sel_id) {
	  	// убираем класс подсветки со всех кнопок
	  	document.getElementById("plus").classList.remove("light");
	  	document.getElementById("minus").classList.remove("light");
	  	document.getElementById("times").classList.remove("light");
	  	document.getElementById("divide").classList.remove("light");

	  	// и добавляем его только к нажатой
	  	document.getElementById(sel_id).classList.add("light");

	  	// в зависимости от нажатой клавиши меняем значение переменной op
	  	switch (sel_id) {
	  	  case "plus":
	  	    op = "+"
	  	    break;
	  	  case 'minus':
	  	    op = '-'
	  	    break;
	  	  case 'times':
	  	    op = "*"
	  	    break;
	  	  case 'divide':
	  	    op = "/"
	  	    break;
	  	}
	  }

	  // добавляем обработчик нажатия на клавиши ко второму полю ввода
      document.getElementById("num2").addEventListener('keydown', function(e) {
		if (e.keyCode === 13) {
		  func();
		}
	  });
	  
	  // функция расчёта
	  function func() {
	  	// переменная для результата
	    var result;
	    // получаем первое и второе число
	    var num1 = Number(document.getElementById("num1").value);
	    var num2 = Number(document.getElementById("num2").value);
	    // смотрим, что было в переменной с действием, и действуем исходя из этого
	    switch (op) {
	      case '+':
	        result = num1 + num2;
	        sel = document.getElementById("plus").classList;
	        sel.add("light");
	        break;
	      case '-':
	        result = num1 - num2;
	        break;
	      case '*':
	        result = num1 * num2;
	        break;
	      case '/':
	        result = num1 / num2;
	        break;
	    }

	    // отправляем результат на страницу
	    document.getElementById("result").innerHTML = result;
	  }
	</script>

</body>
</html>

Посмотреть на новый калькулятор на сайте проекта.

Что дальше

Наш калькулятор после первого теста стал красивее и удобнее. Но всё ли в нём в порядке с точки зрения остальных тестов и проверок? Узнаем об этом в следующей статье.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Тестирование — это билет в ИТ
Простой вход в мир ИТ, ваша первая работа и быстрый старт в профессии. Изучите основы — и за дело. Мы поможем с обучением и трудоустройством. Старт бесплатно.
Приступить
Тестирование — это билет в ИТ Тестирование — это билет в ИТ Тестирование — это билет в ИТ Тестирование — это билет в ИТ
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства и компенсация, если вы пойдёте работать в «Яндекс».
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Генератор лабиринтов
Генератор лабиринтов

Рисуем лабиринты любого размера.

Задача про вёрстку баннера
Задача про вёрстку баннера

Для тех, кто любит конкурсы разработчиков.

Конец ретроградному Меркурию! Пишем собственный гороскоп на Python

Наш гороскоп точен и прост! Сбросим иго астрологов!

Простейший математический фокус
Простейший математический фокус

Можно использовать для пикапа или на пьяных вечеринках

Как запустить стартап и не разориться
Как запустить стартап и не разориться

Всё дело в правильных расчётах на старте.

Мегапроект: расшифровщик аудио в текст… через облако Яндекса!

Сегодня мы будем эксплуатировать чужие облака.

Что означает ошибка: TypeError: ‘undefined’ is not an object
Что означает ошибка: TypeError: ‘undefined’ is not an object

Это значит, что браузер не может найти нужный объект.

Красивые ссылки на вашем сайте

Меняем стандартное подчёркивание на дизайнерское.

Как сделать красивый сайт на Вордпрессе

Быстрее, чем экспресс-дизайн. Дешевле, чем экспресс-дизайн. Лучше, чем экспресс-дизайн.

Что означает ошибка SyntaxError: missing ) after formal parameters

На самом деле это не просто пропущенная скобка.

Автоматическое оглавление на странице
Автоматическое оглавление на странице

Поручите это машине.

Создаём статичный сайт на Hugo
Создаём статичный сайт на Hugo

Превращаем простой текст в полноценный сайт.

Как убрать что угодно на любом сайте
Как убрать что угодно на любом сайте

Самый популярный приём разработчиков.

easy