Интерфейс как форма выражения процедуры: как устроен калькулятор
В книгах и статьях по дизайну интерфейсов часто встречаются попытки описать пользователя и рассказать, почему это важно. Так, вся концепция Дональда Нормана построена вокруг психики человека и попыток связать её с дизайном устройства. Алан Купер, который оппонирует Норману, также уделяет пристальное внимание человеку – правда, в контексте не психики, а потребностей и рыночного/клиентского поведения. Между тем, оба этих автора, да и многие другие, не обращают внимание на связь между интерфейсом и возможностями проектируемой системы, а также между интерфейсом и процедурами, формирующими человеко-машинное взаимодействие (и, как результат, пресловутый user experience – UX).
В этой статье мы на простом примере продемонстрируем связь между внешним видом интерфейса (UI) и процедурой, ради которой он создан.
Классический калькулятор
Дальнейшее повествование мы будем строить вокруг интерфейса мобильного калькулятора. Это достаточно простой объект для понимания и весьма непростой – в смысле редизайна, как будет видно из дальнейшего повествования.
В книге «UX/UI дизайн: практическое руководство» мы рассматриваем задачу проектирования интерфейса на трёх уровнях: (1) уровне бизнес-задачи (цели), (2) уровне процедуры и (3) уровне действия. Используем этот подход, чтобы описать мобильный калькулятор.
Цель калькулятора – осуществлять арифметические операции над числами. То есть, число в нашем случае – это основной объект, с которым придётся работать и который придется преобразовывать.
Процедуры, необходимые для реализации поставленной цели
- Создание числа (целого и десятичного)
- Удаление числа
- Преобразование числа
Рассмотрим каждую из процедур подробнее.
Правила создания числа
- Число создается последовательно, от старшей позиции к младшей (число 24: сначала вводится «2», потом – «4»). При добавлении нового числа, ранее введённые сдвигаются на один порядок влево.
- Десятичная точка может быть вставлена единожды. Разряд, после которого вставлена десятичная точка, становится разрядом единиц.
- Вводимое число по умолчанию является положительным. Его можно сделать отрицательным, отметив знаком «минус».
Правила удаления числа
- Число в процессе создания можно удалить, обнулить его.
- Результат, полученный до начала введения текущего числа, можно удалить.
- Последовательность этих удалений фиксированна: сначала удаляется текущее число, только потом – предыдущее.
Правила преобразования числа
- Есть четыре базовые арифметические операции: сложение, вычитание, умножение и деление.
- Введение операции завершает введение числа.
- Операция производится между тем числом, которое было на экране до ввода операции, и тем, которое будет введено после неё.
Мы ограничились базовыми операциями, чтобы упростить повествование.
Разобрав процедуры, можно ответить на главный вопрос данного блока: почему калькулятор имеет тот вид, к которому мы привыкли? Ответ: кнопочный интерфейс калькулятора – прямое следствие процедуры создания числа. Последовательный ввод цифр приводит к необходимости иметь клавиатуру в интерфейсе.
Главный вопрос редизайна в данном случае: возможен ли интерфейс калькулятора, который будет построен вокруг иной процедуры создания числа? И если возможен, то как он будет выглядеть и как функционировать?
Редизайн калькулятора
Чтобы провести редизайн калькулятора, необходимо решить три задачи
- Описать новый подход к созданию числа и переработать все процедуры
- Создать графический интерфейс под новые процедуры
- Сформулировать новые правила взаимодействия и объяснить их пользователю
Новые процедуры
Число будем создавать последовательным прибавлением к текущему значению числа, кратного шагу, где шаг – это число, равное степени десятки. Конкретное значение шага может быть выбрано пользователем. Стартовое значение вводимого числа – «0» для операций сложения и вычитания, «1» для операций деления и умножения.
Ввод числа, как и прежде, завершается выбором арифметической операции. При смене операции шаг сбрасывается, то есть становится равным 1.
Изменение результата происходит синхронно с изменением вводимого числа.
Операция, как и прежде, производится между результатом на момент начала ввода нового числа и новым числом.
Новый графический интерфейс
У нас есть три стартовых условия. Во-первых, новый интерфейс не должен иметь кнопок. Во-вторых, необходимы поля, где будут представлены результат и текущее число. В-третьих, в интерфейсе должны отображаться текущие значения шага и операции.
Интерфейс, удовлетворяющий заявленным требованиям, может выглядеть так:
Индикатор шага и текущей операции находятся в непосредственной близости к вводимому числу и к результату, что исключает необходимость перемещать внимание по экрану.
Новые правила взаимодействия и их объяснение
Для изменения вводимого числа используется горизонтальное скольжение по экрану: вправо – в сторону увеличения, влево – уменьшения. Так мы избавляемся от необходимости иметь отдельную операцию, связанную с изменением знака числа (с плюса на минус и обратно).
Шаг меняется вертикальным скольжением: вверх – в сторону увеличения степени, вниз – уменьшения. Теперь нет необходимости иметь десятичную точку в качестве отдельной функции.
Двойной тап по экрану обнуляет вводимое число, повторный двойной тап сбрасывает шаг (делает его равным 1), третий двойной тап обнуляет результат.
Тап по индикатору операции открывает выпадающий список со всеми арифметическими операциями.
Инструкцию с правилами изменения числа и шага, а также сбрасывания их значений, уместно расположить в нижней части экрана. Размер шрифта – 10.
Пример работы
Поскольку язык описания достаточно сухой, важно привести пример, показывающий работу новых процедур и соответствующего им интерфейса.
Начальное состояние: текущее число равно 0, текущий результат равен 0, шаг равен 1, текущая операция – сложение.
Добавим скольжением вправо 14 пунктов к текущему значению числа. Результат автоматически обновится.
Добавление по единице не ограничено, так можно увеличить число на сотни и, если хватит терпения, на тысячи. Изменим скольжением вверх шаг до сотен и добавим к текущему числу 400.
Нажав на индикатор операции, мы видим выпадающий список доступных арифметических операций.
Сменим операцию на умножение. Ввод текущего числа будет завершён. 414 заменяется на 1, выпадающий список закрывается, а индикатор операции меняет внешний вид.
Попробуем разделить 414 на -2 или, по-другому, умножить на -0.5. Для этого понизим шаг на один порядок, до 1/10.
После введём значение -0.5 скольжением влево. Результат, как и прежде, автоматически изменится.
Чтобы завершить пример, осталось продемонстрировать функцию сброса. В результате двойного тапа число сбросится до 1, а результат вернётся к прежнему значению, то есть, к 414.
Повторный двойной тап сбросит шаг, то есть сделает его равным 1.
Третий двойной тап сбросит результат, обнулит его, после чего мы вернёмся в исходное состояние, то есть то, с которого начинали.
Подведём итоги
Что мы сделали в этой статье
- На примере калькулятора продемонстрировали разбор системы на процедуры.
- Изменили основополагающую процедуру калькулятора – последовательный позиционный ввод числа.
- Переработали остальные процедуры так, чтобы состыковать их с процедурой ввода числа.
- Предложили новый вариант интерфейса.
- Описали правила взаимодействия человека с новым интерфейсом.
- Продемонстрировали принцип работы на примере.
Тем самым мы показали, что процедуры решения задачи и интерфейса связаны напрямую, так как старый интерфейс неприменим с новыми процедурами, и наоборот.
Сильные разработки создаются не в одиночку, а в коллективе. LIVREZON CLUB объединяет более 50-ти коллективов в разных отраслях научного знания. В ежедневном режиме они делятся опытом, собирают новые данные, пишут книги и статьи, тестируют технологии и получают друг от друга полезную обратную связь.
Хотите присоединиться к коллективу разработчиков? Пишите на info@livrezon.com
ЧТО ТАКОЕ БАЗА ЗНАНИЙ?
Концентрированная книга издательства LIVREZON складывается из сотен и тысяч проанализированных источников литературы и масс-медиа. Авторы скрупулёзно изучают книги, статьи, видео, интервью и делятся полезными материалами, формируя коллективную Базу знаний.
Пример – это фактурная единица информации: небанальное воспроизводимое преобразование, которое используется в исследовании. Увы, найти его непросто. С 2017 года наш Клуб авторов собрал более 80 тысяч примеров. Часть из них мы ежедневно публикуем здесь.
Каждый фрагмент Базы знаний относится к одной или нескольким категориям и обладает точной ссылкой на первоисточник. Продолжите читать материалы по теме или найдите книгу, чтобы изучить её самостоятельно.
📎 База знаний издательства LIVREZON – только полезные материалы.