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

Front-end-разработка для инфокиосков
Петров Евгений
Ведущий frontend-разработчик
Особенности разработки модулей
 Отличие работы с инфокиоском от обычного сайта
 Различные разрешения инфокиосков
 Организация системных элементов
 Работа с данными
 Настройка среды для работы и документация
Почти как планшет
Сенсорный экран
Поддерживается ли swipe?
Есть ли у пользователя опыт работы с жестом
swipe?
Остальное «железо»
Какая комплектация?
Насколько велико быстродействие?
Контекст использования
Использование
Сколько экранов (шагов) в основных сценариях?
Какова длительность ожидания между шагами?
Предусмотрен ли информер ожидания и ошибок?
Сколько обращений к серверу в основных
сценариях?
Как выглядят мелкие элементы на 17‘’ мониторах?
Насколько контрастны интерфейсы при
искусственном или прямом освещении?
Есть ли терминальная кнопка прерывания сеанса?
Дополнительные условия
Нужна ли печать с итогами работы (чек, талон)?
Требуется ли использование пластиковой карты?
Где вы, сферические кони?..
Реальность может оказаться иной
Нас всё ещё интересует поддержка swipe?)
Мы точно знаем всё про контекст
использования?
Много информации
Слайды вместо баров
Вертикальная и горизонтальная прокрутка нежелательна
Используем работу со слайдами
Достаточно разных паттернов:
Metro
Пачка слоёв в разных вариантах
И другие...
Просто бесконечная лента
Аккордеон
Разрешения
Что выбрать за основу?
5:4
4:3
16:10
5:3
16:9
1280 х 1024
800 х 600
1024 х 768
1152 х 864
1280 х 800
1280 х 768
1280 х 720
1360 х 768
1366 х 768
1280 х 960
1400 х 1050
1600 х 1200
1440 х 1050
1600 х 1024
1680 х 1050
Наш выбор
1280 х 1024 как основа
Разрешения меньше 900 по вертикали не используются
1440
1600
1768
1920
х
х
х
х
900
900
992
1080
Форматы и элементы
Подход к формированию
Формат 4:3 отличается пропорцией размеров элементов и текста
Форматы 16:9 и 16:10 требуют изменения интерфейсов
5:4
5:3
16:10
16:9
Системные элементы
Клавиатура
Занимает существенную часть пространства
Требует разный состав клавиш для разных
типов полей
 text
 email
 url
 tel
Переключение автоматически по
выбранному типу (по умолчанию — текст)
Для формата 5:4 занимает ~45% рабочего
пространства
Может использоваться не только с формой
Системные элементы
Календарь
Для формата 5:4 занимает ~75% рабочего
пространства
Потребуется движение рабочего
пространства для перемещения активной
области над календарём
Можно ли выбирать интервал часов или
нужны конкретно часы?
Каков диапазон месяцев и лет?
Очень важно — сколько недель будет
отображаться
Системные элементы
Форма
Полей не может быть много — помним про
контекст использования
Поля формы могут быть ниже верхней
границы клавиатуры
Предусмотрена ли проверка перед
отправкой?
Как реализуется информирование об
ошибках?
Данные
Время актуальности
При загрузке часть данных считается актуальной
на время сеанса — храним
Список клиник
При закрытии сеанса удаляем (даже при
переходе на другую страницу)
Список услуг
Список специальностей
Оперативные данные
Часть данных постоянно требует обновления (по
запросу)
Расписание врачей
Документирование
Для себя
Для коллег
Для разработчиков
Описываем сценарии,
ищем ошибки в логике
Описываем
дополнительные
настройки среды, если
это необходимо
Тщательно составленное
описание с примерами
экономит массу времени
Описываем формат
обмена для разных
ситуаций, возможные
исключения и реакцию
на них
Описываем параметры
инициализации —
назначение, формат,
диапазон, исключения,
реакция на исключения
Указываем места
настройки параметров
управления и
инициализации модуля
(модуль, данные,
компонент, шаблон)
Чем лучше описано API,
тем выше шансы на успех
Грамотные примеры
помогают понять
назначение модуля
Финал
Время собирать камни
Проверяем комплект модуля
Передаём в руки back-end специалисту
Ждём итогов тестирования
Вносим коррективы (при необходимости)
Помогаем сформировать документацию модуля
Празднуем выход нового модуля
Спасибо за внимание!
Вопросы?
Евгений Петров
petroveg@gmail.com