2.2.2. Разработка

Для понимания размера интерфейса начинаем разработку в программе CINEMA 4D внешнего корпуса будущего терминала, на рисунке 66 видим первый результат.

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

Рис. 66. Начало разработки, первый рендер в CINEMA 4D

Приходим к выводу, что нужны более ярко выраженные границы корпуса и нижняя граница экрана должна находиться чуть выше пола, для сохранности и безопасности самого экрана.

Так-же добавляем световые идентификаторы линии нахождения терминала, они позволят всегда точно определять на какой пассажир ветке.

Заранее определяемся, что в интерфейсе на самом верху будет написано название станции цветом линии, что дополнительно улучшит восприятие.­­

Визуализируем терминал в двух цветах чёрном и белом (см. рис. 67).

Рис. 67. Вариант терминала в двух цветах, с названием и световой идентификацией линии.

Далее приступаем к первым вариантам расположения элементов в интерфейсе (см. рис. 68a), под названием станции нужно расположить всегда полезную для пассажиров информацию: дату, время и погоду на улице.

Располагаем карту Москвы, кнопки смены языка и перехода с карты метро карту города и обратно.

Так-же создаём полосу прокрутки и окна для информации.

Разрабатываем верхнюю часть интерфейса, устанавливаем дату, время и погоду, для того чтобы у всех пассажиров всегда перед глазами была простая, полезная и часто нужная информация.

Понимаем, что нижняя граница экрана может быть поднята ещё, до 40см. от пола (см. рис. 68b), такая высота будет эргономически обоснованной, чуть ниже колена инвалида колясочника и самого низкого пользователя и чуть выше колена ребёнка.

68a 68b

Рис. 68. Наброски интерфейса (68a) и визуализация на терминале (68b)

с поднятой нижней границей

Составляем эргономическую область высоты рабочей зоны интерфейса (см. рис. 69), учитываем рост целевой аудитории, это пассажиры метро от 8 до 70 лет и инвалиды колясочники, которые возможно в будущем смогут самостоятельно передвигаться по метро.

Рост взрослого человека в рамках 95 процентиля равен 185см для мужчин и 170см для женщин, с учетом современных распространенных видов обуви стоит принять усредненный рост человека равным 175-180см, минимальный рост ребёнка 8 лет 120,3 см. и инвалида в коляске 130,8 см.

Создаём направляющие которые помогут при дальнейшем проектировании.

Рис. 69. Начало разработки интерфейса, эргономические области и направляющие

Разрабатываем кнопку для перехода в раздел метро и берём логотип «Яндекс.Карты» как кнопку для перехода в раздел карты Москвы (см. рис. 70).

Рис. 70. Кнопки «Яндекс.Карты» и карты метро

Отрисовываем кнопки Яндекса из приложения для смартфонов, на рисунке 71 и адаптируем под наш интерфейс, дорисовываем пару нужных кнопок «Достопримечательности» и «Парки».

Рис. 71. Кнопки для меню

Сразу решено изменить внешний вид кнопок, сделать их ярче, контрастнее и в итоге виднее на белом экране.

Так-же для удобства переименовываем кнопку «Достопримечательности» в «Места», для более эстетичного внешнего вида, но без особой потери смысла (см. рис. 72).

Рис. 72. Конечный вариант кнопок для меню

Дорабатываем кнопки смены языка с флагами, на рисунке 72, делаем главный рабочий вариант с одним выделенным языком, а остальными полупрозрачными, на рисунке 74, сменяться язык будет просто при нажатии на любой другой полупрозрачный флаг.

Рис. 73. Кнопки смены языка

Рис. 74. Рабочий вариант с одним выделенным языком

Рисуем окна поиска, для прокладывания маршрутов (см. рис. 75).

Так как точки прибытия две, станция метро и конечный адрес окон должно быть три А- ст. м. отправления, Б- ст. м. Прибытия, В- конечный адрес.

Для прокладывания маршрута в режиме город можно оставить только два окна ввода.

Рис. 75. Окна поиска

Разрабатываем виртуальную клавиатуру (см. рис. 76), по подобию тех которые используются в современных смартфонах и терминалах, для введения в окнах поиска названий станций и адреса.

Рис. 76. Виртуальная клавиатура

Рисуем полосу прокрутки (см. рис. 77), делаем её нейтрально-серой и довольно минималистичной чтобы не отвлекать пассажира от контента громоздкими элементами, разработана простая тонкая полоска с ползунком и двумя кнопками стрелками показывающими направление прокрутки для большей информативности и возможностью быстро перемещать весь интерфейс в верхнее и нижнее положение.

Рис. 77. Полоса прокрутки

Будущий терминал, что вполне логично, для загруженного метро Москвы, решено сделать двухсторонним, но использовать вторую сторону, не как рабочий интерфейс, а вывести на неё большую карту метро (см. рис. 78), для того чтобы у пассажиров, которым не нужно досконально прокладывать маршрут, была возможность ознакомится с картой.

Рис. 78. Большая карта метро на размещаемая на второй стороне терминала

Из разработанных элементов компонуется первый пробный вариант интерфейса (см. рис. 79a) и визуализируется на терминале (см. рис. 79b), кнопки с полезной информацией размещаются вертикально с левой стороны, так как они не являются основными, с права размещаются с верху вниз окна поиска, виртуальная клавиатура, кнопки разделов «Яндекс.Карты» и карта метро, под ними кнопки смены языка, правее ставим полосу прокрутки.

На визуализации видно, что интерфейс получился слишком размашистый, кнопки «Яндекс.Карты» и карта метро на вид получились слишком большие и их будет не очень удобно нажимать.

Также понятно, что экран шириной в один метр не рационально большой.

79a 79b

Рис. 79. Первый вариант интерфейса (79a) и рендер (78b)

­Отталкиваясь от размеров оптимальной зоны активных действий человека составляющей около 30 дюймов или 76,2 см. решено уменьшить ширину экрана до 80 см. (см. рис. 80a), что позволит разместить элементы интерфейса более компактно и удобно, так-же уменьшится ширина самого терминала.

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

Уменьшаем ширину и визуализируем терминал со вторым вариантом интерфейса (см. рис. 80b).

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

80a 80b

Рис. 80. Уменьшенный по ширине интерфейс (80a) и рендер (80b)

Дорабатываем интерфейс, слева вертикально остаются кнопки с полезной информацией с возможностью расширить ассортимент запрашиваемой информации, справа, сверху вниз располагаются кнопки: «i»- информация, после нажатия которой откроется полупрозрачное окно с обзором функций терминала и информацией по работе с ним, ниже располагаются кнопки «Яндекс.Карты» и карта метро, под ними окна поиска, виртуальная клавиатура и кнопки смены языка, ниже как и прежде остаётся полоса прокрутки.

В итоге интерфейс получился простой, понятный и удобный, с пространством для дальнейшего развития (см. рис. 81).

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

Рис. 81. Конечный вариант интерфейса

Закончив разработку интерфейса решено доработать внешний корпус терминала и добавить кнопку «SOS», на рисунке 82, с правой и левой стороны терминала на высоте в один метр, чуть выше пояса взрослого человека, на кнопку сбоку будет удобно нажимать и даже бить по ней в экстренном случае, дотянутся до неё может и ребёнок, и инвалид.

Чуть выше кнопки должны размещаться микрофон и динамик с помощью которых пассажир будет связываться с дежурным.

Рис. 82. Визуализация с кнопкой «SOS»