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