Веб-интерфейсы с применением глифов
Мы все чаще решаем повседневные задачи с помощью Сети. Это экономит время и деньги – в том числе при поиске лучшего предложения товаров и услуг. В науке это направление описывается следующими терминами:
• системы массового обслуживания (сокр. СМО, с точки зрения механизмов управления очередью заявок на обработку);
• веб-сервис (с точки зрения точки доступа и взаимодействия с пользователем);
• service on demand (англ. услуга по запросу, описывает процессы обработки заявок из веб- и мобильных приложений).
Рассмотрим роль веб-интерфейсов и применение глифов для решения задач функционального диалога между пользователем и системой.
Рисунок 2.1 – Дизайн-макет главной страницы корпоративного сайта CIS. Local Counsel Forum для всероссийского юридического форума в Сочи.
Источник: http://sochilegal.com/en/
Цифровые устройства с наиболее удобными интерфейсами имеют наивысший рейтинг по отзывам клиентов. Он напрямую соотносится с маркетинговым показателем – индексом потребительской лояльности (сокр. англ. NPS). С помощью этого индекса руководство компании-производителя эконометрически оценивает отношение потребителей к коммерческому продукту. Это влияет на развитие цифрового продукта (с расширением функционала для заинтересованных пользователей).
Ключевые факторы оценки качества исполнения веб-интерфейсов
Начнем с основ технического дизайна по специализации user interface.
Рассмотрим ключевые критерии оценки качества исполнения веб-интерфейса с применением масштабируемой векторной графики.
1. Простота восприятия интерфейса.
2. Адаптивность интерфейса.
3. Масштабируемость функционала в интерфейсе.
4. Детализация визуальной оболочки и интеллектуальных решений интерфейса.
5. Доступность для мультиплатформенного использования.
6. Мультиязычность интерфейса.
7. Уникальность или наследуемость интерфейса.
Последовательно детализируем каждый критерий.
Простота восприятия интерфейса – это самое сложное для дизайнера: уместить композиционно по заданным приоритетам (в спецификации продукта или в ТЗ) весь представленный функционал веб-приложения — последовательно и логично, не потеряв при этом визуальной целостности и простоты.
Мартин ЛеБланк, основатель популярного графического веб-сервиса IconFinder.com, как-то сказал: «Interface like a joke. No needs to explain» («Интерфейс, как и шутка, не требует объяснений»). Либо просто и понятно, либо плохо сделано.
Как достичь такой простоты? Это интересный с технической точки зрения вопрос, имеющий ряд визуальных и логических шагов решения – над ним студенты смогут поработать в ходе практикума к этой лекции.
Адаптивность интерфейса – интуитивно более легкий критерий для реализации и оценки. Заявленный функционал веб-интерфейса должен четко укладываться в один (первый) экран до прокрутки (скроллинга) с учетом изменяемой ширины любого экрана (вертикальная и горизонтальная ориентации).
Есть визуально-технические решения (трюки), позволяющие до прокрутки уложить сложный функционал в малый экран смартфона – что-то вроде слоеного пирога, где начинка правильно приготовлена по слоям, и потребитель получает ее по мере использования (потребления) готового продукта.
Уровень требований заказчика ограничивается согласно спецификации к продукту. Допустимо выбирать версии браузеров не старше трех лет: иначе могут возникнуть проблемы на старых версиях Android и iPad (iOS).
Масштабируемость функционала в интерфейсе – это важный критерий с точки зрения развития продукта: потребительские запросы могут вырасти, будут добавляться новые функции (фичи, от feature). Достигается с помощью раскрывающихся панелей, всплывающих окон, виртуального помощника и других подобных инструментов.
Детализация визуальной оболочки и интеллектуальных решений интерфейса – критерий, сходный с адаптивностью интерфейса. Но есть дополнительный смысл: возможность надстройки визуальных эффектов (в развитие продукта), детализация с визуальной точки зрения (под retina экраны). Здесь применяется масштабируемая SVG графика, построение визуального диалога (с иллюстрациями) для связи между пользователем и системой (по реакции на логический выбор пользователя). Такая связь (система – пользователь) должна быть понятна и эмоционально окрашена.
Рисунок 2.2 – Форма заявки для клиентов компании Platinum Data Recovery выполнена в виде последовательных шагов при заполнения анкеты. Вспомогательные вопросы и ответы сделаны в виде раскрываемого аккордеона с детализацией ответа по выбору из списка FAQ (сокр. от Frequently Asked Questions – часто задаваемые вопросы)
На рис. 2.2 слева используется глиф комментария с подписью FAQ для подсказки пользователю. Источник: https://platinumdatarecovery.com/request-a-quote
Доступность для мультиплатформенного использования – сложный критерий оценки, сходный с адаптивностью интерфейса. Требует правильного решения для масштабирования продукта на другие платформы – с веб-версии в мобильные приложения iOS, Android и стационарные touchscreen-системы информационных помощников (например, в аэропортах). Речь идет о стандартизации файловой структуры и взаимозаменяемости форматов графических файлов с SVG на аналогичные форматы (без потерь): PDF, PNG и т. д. – в зависимости от требований к интеграции веб-интерфейса на другие платформы.
Мультиязычность интерфейса важна при переводе функционала с одного языка на другой.
Этот критерий напрямую влияет при переходе пользователя с международной англоязычной версии на региональную. К примеру, в немецком лексиконе слова длиннее, чем в английском.
Уникальность веб-интерфейса важна, если на рынок выходит новый, технологически революционный продукт. Интерфейс должен быть визуально новым, привлекательным для потребителя, но в какой-то части и наследовать веб-интерфейс. Наиболее сложная задача – уложить максимум функционала, системно сгруппированного по блокам функций одного назначения — в рамках экрана до прокрутки, удобно и логично для пользователя.
Рисунок 2.3 – Варианты дизайна веб-интерфейса авторизации для приложения Lillup
Функциональная роль глифов в веб-интерфейсах
Перейдем к роли глифов в создании визуальной оболочки цифровых продуктов. Веб-интерфейс обеспечивает диалог между пользователем и ИТ-системой. Приведем несколько доступных примеров из повседневной жизни.
Рисунок 2.4 – Меню стиральной машины на дисплее для управления программами стирки
Рисунок 2.5 – Интерфейс мобильного приложения для заказа такси с выбором типа кузова автомобиля на основе представленных глифов
Рисунок 2.6 – Интерфейс адаптивного меню корпоративного сайта с векторными глифами для визуализации разделов веб-сайта.
Источник: https://n-trade.spb.ru/
Визуальный анализ интерфейсов на рисунках 2.4–2.6 дает понять, что не всегда размеры (ширина и высота) блока навигационного меню выбора позволяют отразить полные наименования функций (и/или состояний) объекта (или продукта) применения. На помощь приходит интуиция технического (в литературе сокр. UI/UX) дизайнера: выбрать и отрисовать поверх устойчиво понятных глифов привлекательные кнопки, опции и состояния элементов веб-интерфейса так, чтобы это не вызывало задержек при выборе следующего шага (нажатием или кликом на экран, кнопку и т. д.).
На практике роль глифов – это визуальные подсказки в диалоге между пользователем и системой: запуск, приостановка, изменение, остановка системы.
Например, получив сообщение на панели (красный знак Внимание), пользователь видит, что нужно добавить бумагу в принтер для запуска электронного документа в печать.
Визуальные подсказки для пользователя веб-интерфейса
Форма, стиль и техническое исполнение глифовых подсказок трактуются дизайнером в прототипе интерфейса строго по согласованной спецификации и ТЗ.
Размеры глифов должны быть визуально доступны (не мелкие, контрастные) людям с плохим зрением.
Базовое правило гласит: черным по белому – и является приоритетом при выборе стиля визуализации глифов на панели инструментов и навигационного меню.
Рисунок 2.7 – Примеры визуальных подсказок и их значения на экране смартфона.
Слева направо: отключение сигнала вызова (тихий режим); разблокировка доступа к устройству
Дизайнер переносит сообщения о взаимодействии пользователя с системой на экран веб-интерфейса с помощью анимированной или статичной графики – в зависимости от состояния СМО после вызова, паузы или остановки/отказа функции.
Анимированные векторные элементы интерфейса
На смену статичным элементам постепенно приходит анимированная графика. Диалог между пользователем и цифровым продуктом получает яркую красочную визуализацию и поднимается на новый уровень взаимодействия. Пользователь подсознательно привыкает к высокому уровню визуального комфорта. Это определяет качество сервиса компании – поставщика услуг.
Анимирование статических векторных элементов
Требуется анимировать статические векторные элементы. У этой задачи несколько путей решения. Например, для веб-интерфейсов можно применять следующие технологические стеки (проще говоря, связки технологий):
• HTML + SVG + CSS3 (опционально + PNG/JPG);
• HTML + SVG + JavaScript (опционально + CSS);
• HTML + SVG + SMIL.
Рассмотрим детально каждый вариант.
HTML во всех трех вариантах применения анимации SVG – это веб-страница для вывода графики в содержание источника.
Технологический стек для анимации № 1. HTML + SVG + CSS3
Графика в формате SVG по определению есть масштабируемая векторная графика (Scalable Vector Graphics): отличная четкость отображения при любом масштабе, простота редактирования и легкость кода с точки зрения хранения в каталоге N изображений в SVG с возможностью оптимизации (сжатия) кода для минимизации потерь при загрузке на клиентском устройстве.
• Анимировать глиф в формате SVG можно, применяя каскадные таблицы стилей (CSS). Рассмотрим визуальные эффекты в стилях CSS – согласно спецификации CSS версии 3, актуальной на 2021 г.
• Анимация движения (изменение координат объекта и размеров – приближение или удаление объекта относительно формата макета).
• Поворот rotate.
• Проявление fade in / out.
• 3D-трансформация.
Совмещение фильтров и их последовательное использование (запуск с задержкой в миллисекундах) в цикле воспроизведения анимации в стилях CSS позволяют добиться интересных визуальных эффектов при выборе и нажатии на выбранную функцию в интерфейсе.
Рисунок 2.8 – Пример анимации по клику на кнопку
Технически при нажатии (состояние: target) или при наведении (состояние: hover) происходит обработка стилями в CSS и предоставляет инструкции для вывода графики и анимации в заданных параметрах:
• ширина (width) и высота (height) анимированного блока задаются в пикселях (px) или условных единицах (em или rem) в зависимости от установленного размера шрифта;
• цвет заливки блока:
– однотонная сплошная и плоская заливка:
1. в шестнадцатеричной (НЕХ) палитре:*
background-color: #CCDD332. в палитре RGB:*
background-color: rgb(255,255,255)3. с добавлением полупрозрачности путем включения альфа-канала:*
background-color: rga(255,255,255,0.5)– многоцветный градиент:
background: linear-gradient (to bottom,#fff 0%, #555 50%,#999 100%);Задание стиля фона блока возможно как с помощью background-color, так и с помощью background, что дает одинаковый визуальный эффект:
background: #fff,background-color: rgb(255,255,255),background-color: rgb(255,255,255)Равнозначные инструкции для стилей CSS
Для полного овладения всеми возможностями визуального оформления элементов навигации и блоков содержания веб-страницы HTML, включая анимацию для элементов SVG, рекомендуется изучить спецификацию CSS3 (в официальном источнике) и пробовать лично запускать и редактировать примеры анимации SVG и CSS.
Это позволит наработать навык создания анимированных динамических блоков с векторной графикой для использования в веб- и мобильных интерфейсах приложений.
Технологический стек для анимации № 2. HTML + SVG + JavaScript
В случае выбора технологии JavaScript в качестве способа визуализации анимации открывается ряд дополнительных возможностей:
• подключение внешних библиотек отрисовки векторной графики;
• подключение самописных скриптов обработки событий (по клику/нажатию, при наведении, при выборе определенной опции меню с вызовом функции по уникальному идентификатору ID и т. д.).
Рисунок 2.9 – Пример с выбором раздела сайта в мобильном меню навигации на корпоративном сайте.
Источник: http://markup.inmotus-design.ru/rk/index.php
Особенности этого функционального решения:
• необходим запуск скриптов JavaScript (по умолчанию эта опция подключена в браузерах);
• требуется знание языка JavaScript (это полезный инструментарий для визуализации графики и взаимодействия веб-интерфейса с пользователями, что гарантирует исполнителю широкий охват выполняемых задач).
В этом стеке реализована умная логика поведения интерфейса (по заданным условиям и обработке в JavaScript), система соответственно реагирует на действия пользователя. В CSS это невозможно – кроме примитивных условий при наведении, при нажатии, при фокусе, в состоянии покоя – без сложной обработки логических условий с заданными уровнями результатов взаимодействия.
Например, если пользователь превышает лимит по использованию (обращений), система выводит сообщение в веб-интерфейсе: исчерпан лимит на запросы к сервису компании. Это условие о лимитах задается в JS-скрипте веб-приложения разработчиками продукта.
Технологический стек для анимации № 3. HTML + SVG + SMIL
Язык анимации SMIL – специализированное решение для широкого охвата функций анимационных роликов на основе векторной графики в формате SVG. Применяется для мультипликации и веб-анимации (опционально). Это решение – аналог Flash-анимации (в формате SWF), ушедшей с приходом мобильных технологий, не поддерживающих Flash-анимацию по ряду причин, включая безопасность пользователя (от вызова неблагонадежных скриптов-вирусов и т. д.).
Рисунок 2.10 – Пример SMIL-анимации движения объекта карусели
О выборе стека для анимации SVG-графики
Выбор технологического решения (стека) для анимации веб-интерфейса по умолчанию за исполнителем, если в ТЗ не прописаны четкие требования по выбору библиотек JS-скриптов и сопутствующих технологий.
Технический дизайнер может самостоятельно выбрать вариант реализации для анимации элементов веб-интерфейса, если не заданы жесткие ограничения со стороны заказчика.
Если требования заданы только по формату и цветопередаче изображений, исполнитель может предложить заказчику варианты решения задачи, указав их преимущества и недостатки – желательно в формате A или B, так проще понять и сделать выбор.
Особенности использования SVG-графики для мультиплатформенных систем
Разработка единой экосистемы электронных устройств для удовлетворения основных потребительских запросов – ключевое направление в развитии крупных федеральных ИТ-компаний (Яндекс и Mail.ru).
Сложности в адаптации веб-интерфейсов для мультиплатформенных систем возможны в спецификациях (поддержка форматов графики и т. д.). Необходимо выбирать стандартные решения с минимальными ограничениями по поддержке на устройствах. Использование абсолютного или фиксированного позиционирования в HTML стилями CSS для блоков относительно друг друга может смещаться на разных платформах и экранах по причине точности задания пиксельной матрицы и точки отсчета относительно видимой области экрана.
Это возможно отладить путем добавления стилей и вывода их по специальным функциям определения типа и размеров устройства с отладкой по существу проблемы (в тех. литературе эти добавленные стили обозначаются {platform-version}-fix.css (например, ie9-fix.css) и задаются в блоке [1]
Цветовая схема должна быть четко ограничена фирменными цветами в заданной единой палитре RGB или HEX и наследоваться на всех типах платформ: устройства на iOS, Android, Windows и т. д. с фиксированными параметрами. Это требование и к цветовой схеме глифовых элементов интерфейса в формате SVG. Оно обеспечивает единый визуальный образ продуктов компании-производителя, фирменный стиль на всех поддерживаемых платформах.
Рисунок 2.11 – Наглядная демонстрация смещения элементов веб-интерфейса целевой страницы веб-сайта компании Platinum Data Recovery при адаптивном дизайне (слева – широкий экран компьютера, справа – адаптивный мобильный веб-интерфейс)
Архитектура файловой структуры для размещения графики
Структура цифрового продукта может отличаться в зависимости от архитектуры платформы. Рассмотрим следующие примеры размещения стилей CSS и элементов графики SVG в различных продуктах.
Пример A
Рисунок 2.12 – Архитектура интернет-магазина в CMS Bitrix
Пример B
Рисунок 2.13 – Архитектура корпоративного сайта в CMS WordPress
Имплементирование (проще, вставка) анимации в код цифрового продукта для тестирования и в итоговую версию происходит при участии фронтенд-специалиста, отвечающего за внешнюю часть продукта (оболочку в виде веб-интерфейса и визуализации обратной связи).
Потребительская и экспертная оценки качества исполнения веб-интерфейсов
Умение работать с графическими форматами растровой и векторной графики, владение анимацией формируют навыки технического дизайнера (designer’s skills) и делают его востребованным для заказчиков. Особенно в профессиональной среде ценятся работы в портфолио, не только имеющие статус прототипа, но именно доведенные до серийного и единичного (под заказчика) использования. Эти работы характеризуют дизайнера как аналитика, художника, творца – одним словом, профессионала.
В качестве кратких выводов обозначим ключевые моменты в работе с векторной графикой для визуализации интерфейсов.
• Знания и умения из области верстки, цветоделения по приоритетам и контрасту элементов композиции, понимание баланса между визуальными и текстовыми элементами в интерфейсе позволяют дизайнеру сбалансировать поставленные в ТЗ задачи.
• Правильное понимание ключевых факторов оценки качества веб-интерфейса позволяет исключить лишнее в работе и оптимизировать труд, сравнивая требования ТЗ и общую практику по дизайну UI.
• Потребительская и экспертная оценки качества исполнения веб-интерфейсов могут не совпадать. Пользователям важны простота и удобство, компания-разработчик может ставить цели значительно шире.
• Цель технического дизайнера – найти баланс интересов и получить положительные отзывы о готовом цифровом продукте.
• Цифровые продукты, получившие наивысший рейтинг потребительских оценок и/или награды экспертов, имеют значительную коммерческую ценность для компании-производителя: высокий индекс потребительской лояльности конвертируется в прибыль. Важно это и для дизайнеров – как публичная оценка профессионального уровня.
Рекомендуемая литература
1. Веб-дизайн. Анализ удобства использования веб-сайтов по движению глаз. Якоб Нильсен, Кара Перниче. На англ. языке.
2. Принципы разработки пользовательского интерфейса. Ненси Понг. Статья. Изд. Medium.com. 2017 г. Статья Дж. Портера «Principles of User Interface Design». Перевод: О. Жолудова, Р. Шайхутдинов.
3. Эвристические правила Якоба Нильсена. Источник на англ. языке: https://www.nngroup.com/articles/ten-usability-heuristics/
4. Веб-дизайн. Элементы опыта взаимодействия. Дж. Гаттер.
5. Проектирование веб-интерфейсов. Билл Скотт, Тереза Нейл.
6. Спецификации стандарта анимации SMIL 3.0. Источник на англ. языке: https://www.w3.org/TR/smil/smil-animation.html
7. Официальная спецификация компании Mozilla по поддержке формата SVG в анимации SMIL. Источник на англ. языке: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
8. Ознакомительный урок по использованию векторной графики для виртуальной клавиатуры. Источник на англ. языке: https://bundlespace.com/lessons/lesson-design-of-virtual-keyboard-for-atm-devices
9. Ознакомительный урок по анимации процесса загрузки в веб- и мобильном интерфейсе. Источник на англ. языке: https://bundlespace.com/lessons/lesson-animation-for-svg-loader-using-css3
Лекция № 3