Как достичь такой простоты? Это интересный с технической точки зрения вопрос, имеющий ряд визуальных и логических шагов решения – над ним студенты смогут поработать в ходе практикума к этой лекции.

Адаптивность интерфейса – интуитивно более легкий критерий для реализации и оценки. Заявленный функционал веб-интерфейса должен четко укладываться в один (первый) экран до прокрутки (скроллинга) с учетом изменяемой ширины любого экрана (вертикальная и горизонтальная ориентации).

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

Уровень требований заказчика ограничивается согласно спецификации к продукту. Допустимо выбирать версии браузеров не старше трех лет: иначе могут возникнуть проблемы на старых версиях 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