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

Front-end-разработка для инфокиосков • Петров Евгений • Ведущий frontend-разработчик

Особенности разработки модулей • Отличие работы с инфокиоском от обычного сайта • Различные разрешения инфокиосков • Организация системных элементов • Работа с данными • Настройка среды для работыи документация

Почти как планшет Сенсорный экран Поддерживается ли swipe? Есть ли у пользователя опыт работы с жестом swipe? Остальное «железо» Какая комплектация? Насколько велико быстродействие?

Контекст использования Использование Сколько экранов (шагов) в основных сценариях? Какова длительность ожидания между шагами? Предусмотрен ли информер ожидания и ошибок? Сколько обращений к серверу в основных сценариях? Как выглядят мелкие элементы на 17‘’ мониторах? Насколько контрастны интерфейсы при искусственном или прямом освещении? Есть ли терминальная кнопка прерывания сеанса? Дополнительные условия Нужна ли печать с итогами работы (чек, талон)? Требуется ли использование пластиковой карты?

Где вы, сферические кони?.. Реальность может оказаться иной Нас всё ещё интересует поддержка swipe?) Мы точно знаем всё про контекст использования?

Много информации Слайды вместо баров Вертикальная и горизонтальная прокрутка нежелательна Используем работу со слайдами Достаточно разных паттернов: Пачка слоёв в разных вариантах Metro И другие... Аккордеон Просто бесконечная лента

Разрешения Что выбрать за основу? 16:10 4:3 5:4 5:3 16:9 1280 х 800 1440 х 1050 1600 х 1024 1680 х 1050 1280 х 1024 800 х 600 1024 х 768 1152 х 864 1280 х 960 1400 х 1050 1600 х 1200 1280 х 768 1280 х 720 1360 х 768 1366 х 768 1440 х 900 1600 х 900 1768 х 992 1920 х 1080 Наш выбор 1280 х 1024 как основа Разрешения меньше 900 по вертикали не используются

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

Системные элементы Клавиатура Занимает существенную часть пространства Требует разный состав клавиш для разных типов полей • text • email • url • tel Переключение автоматически по выбранному типу (по умолчанию — текст) Для формата 5:4 занимает ~45% рабочего пространства Может использоваться не только с формой

Системные элементы Календарь Для формата 5:4 занимает ~75% рабочего пространства Потребуется движение рабочего пространства для перемещения активной области над календарём Можно ли выбирать интервал часов или нужны конкретно часы? Каков диапазон месяцев и лет? Очень важно — сколько недель будет отображаться

Системные элементы Форма Полей не может быть много — помним про контекст использования Поля формы могут быть ниже верхней границы клавиатуры Предусмотрена ли проверка перед отправкой? Как реализуется информирование об ошибках?

Данные Время актуальности При загрузке часть данных считается актуальной на время сеанса — храним При закрытии сеанса удаляем (даже при переходе на другую страницу) Список клиник Список специальностей Список услуг Оперативные данные Расписание врачей Часть данных постоянно требует обновления (по запросу)

Документирование Для разработчиков Для себя Для коллег Тщательно составленное описание с примерами экономит массу времени Чем лучше описано API, тем выше шансы на успех Грамотные примеры помогают понять назначение модуля Описываем сценарии, ищем ошибки в логике Описываем формат обмена для разных ситуаций, возможные исключения и реакцию на них Описываем параметры инициализации — назначение, формат, диапазон, исключения, реакция на исключения Описываем дополнительные настройки среды, если это необходимо Указываем места настройки параметров управления и инициализации модуля (модуль, данные, компонент, шаблон)

Финал Время собирать камни Проверяем комплект модуля Передаём в руки back-end специалисту Ждём итогов тестирования Вносим коррективы (при необходимости) Помогаем сформировать документацию модуля Празднуем выход нового модуля

Спасибо за внимание! Вопросы? Евгений Петров petroveg@gmail.com

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