Петров Евгений Ведущий frontend -разработчик

Петров ЕвгенийВедущий frontend-разработчик

Front-end-разработка для инфокиосков

Отличие работы с инфокиоском от обычного сайта

Различные разрешения инфокиосков

Организация системных элементов

Работа с данными

Настройка среды для работы и документация

Особенности разработки модулей

Почти как планшет

Сенсорный экранПоддерживается ли swipe?

Есть ли у пользователя опыт работы с жестом swipe?

Остальное «железо»Какая комплектация?

Насколько велико быстродействие?

Контекст использования

ИспользованиеСколько экранов (шагов) в основных сценариях?

Какова длительность ожидания между шагами?

Предусмотрен ли информер ожидания и ошибок?

Сколько обращений к серверу в основных сценариях?

Как выглядят мелкие элементы на 17‘’ мониторах?

Насколько контрастны интерфейсы при искусственном или прямом освещении?

Есть ли терминальная кнопка прерывания сеанса?

Дополнительные условияНужна ли печать с итогами работы (чек, талон)?

Требуется ли использование пластиковой карты?

Где вы, сферические кони?..

Реальность может оказаться иной

Нас всё ещё интересует поддержка swipe?)

Мы точно знаем всё про контекст использования?

Много информации

Слайды вместо баровВертикальная и горизонтальная прокрутка нежелательна

Используем работу со слайдами

Достаточно разных паттернов:

Metro

Просто бесконечная лента Аккордеон

Пачка слоёв в разных вариантах

И другие...

Разрешения

Что выбрать за основу?

1280 х 1024 как основаРазрешения меньше 900 по вертикали не используются

1280 х 768

5:3800 х 6001024 х 7681152 х 864

1280 х 9601400 х 10501600 х 1200

4:31280 х 1024

5:41280 х 7201360 х 7681366 х 768

1440 х 9001600 х 9001768 х 9921920 х 1080

16:91280 х 800

1440 х 10501600 х 10241680 х 1050

16:10

Наш выбор

Форматы и элементы

Подход к формированиюФормат 4:3 отличается пропорцией размеров элементов и текстаФорматы 16:9 и 16:10 требуют изменения интерфейсов

5:4

5:3

16:10

16:9

Системные элементы

КлавиатураЗанимает существенную часть пространства

Требует разный состав клавиш для разных типов полей

text

Переключение автоматически по выбранному типу (по умолчанию — текст)

Для формата 5:4 занимает ~45% рабочего пространства

Может использоваться не только с формой

email url tel

Системные элементы

КалендарьДля формата 5:4 занимает ~75% рабочего пространства

Потребуется движение рабочего пространства для перемещения активной области над календарём

Можно ли выбирать интервал часов или нужны конкретно часы?

Каков диапазон месяцев и лет?

Очень важно — сколько недель будет отображаться

Системные элементы

ФормаПолей не может быть много — помним про контекст использования

Поля формы могут быть ниже верхней границы клавиатуры

Предусмотрена ли проверка перед отправкой?

Как реализуется информирование об ошибках?

Данные

Время актуальностиПри загрузке часть данных считается актуальной на время сеанса — храним

При закрытии сеанса удаляем (даже при переходе на другую страницу)

Часть данных постоянно требует обновления (по запросу)

Оперативные данные

Список клиник

Список специальностей

Список услуг

Расписание врачей

Документирование

Для себяОписываем сценарии, ищем ошибки в логике

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

Описываем параметры инициализации — назначение, формат, диапазон, исключения, реакция на исключения

Для коллегОписываем дополнительные настройки среды, если это необходимо

Указываем места настройки параметров управления и инициализации модуля (модуль, данные, компонент, шаблон)

Для разработчиковТщательно составленное описание с примерами экономит массу времени

Чем лучше описано API, тем выше шансы на успех

Грамотные примеры помогают понять назначение модуля

Финал

Время собирать камниПроверяем комплект модуля

Передаём в руки back-end специалисту

Ждём итогов тестирования

Вносим коррективы (при необходимости)

Помогаем сформировать документацию модуля

Празднуем выход нового модуля

Спасибо за внимание!Вопросы?

Евгений Петровpetroveg@gmail.com