Векторная графика для начинающих: теория и практика технического дизайна - стр. 6

Рассмотрим роль веб-интерфейсов и применение глифов для решения задач функционального диалога между пользователем и системой.

Рисунок 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 графика, построение визуального диалога (с иллюстрациями) для связи между пользователем и системой (по реакции на логический выбор пользователя). Такая связь (система – пользователь) должна быть понятна и эмоционально окрашена.