Основные соображения пользовательского интерфейса для лучшего дизайна PWA

Если вы еще не слышали о PWA, вам следует сначала погрузиться в это: «Что такое PWA? Все, что вам нужно знать о прогрессивных веб-приложениях» . Короче говоря, это веб-приложения, созданные с намерением предложить пользовательские интерфейсы и возможности, которые намного превосходят возможности, предлагаемые традиционными.

В этой статье мы предложим основные проблемы пользовательского интерфейса (пользовательского интерфейса) при разработке PWA. Читайте дальше, чтобы узнать, как создать лучший пользовательский интерфейс для вашего прогрессивного веб-приложения.

Системные шрифты

Если вы хотите, чтобы пользователи чувствовали себя комфортно при использовании вашего прогрессивного веб-приложения (PWA), его стиль следует немного улучшить, чтобы он соответствовал их операционной системе (ОС). Прежде чем внедрять различные меню и кнопки для каждой платформы, вы можете просто начать с предпочтительного системного шрифта для iOS, Android, Windows отдельно.

Другими словами, пусть тяжелая работа Microsoft (Segoe), Google (Roboto), Apple (Сан-Франциско) или даже Mozilla (Fira Sans) облегчит вашу работу, улучшив опыт пользователей. В результате системные шрифты — это один элемент, который вы никогда не должны исключать из своего списка.

 /* iOS */
семейство шрифтов: Helvetica Neue, Helvetica, Arial, без засечек;

/* Андроид */
семейство шрифтов: «RobotoRegular», «Droid Sans», без засечек;

/* Windows Phone */
семейство шрифтов: «Segoe UI», Segoe, Tahoma, Geneva, без засечек;

Иконки приложений

Это правда, что дизайнеры мобильных приложений уделяют особое внимание дизайну иконок. И поскольку ваше PWA (путем добавления его на главный экран) будет находиться рядом с остальными нативными приложениями, следует подумать и о дизайне его значков.

Для этого есть веская причина. Первое впечатление всегда чрезвычайно важно, а значок приложения — это самое первое впечатление, которое оно производит на пользователя. Чтобы объяснить это, пользователь может не решиться нажимать на значок, который выглядит иначе, чем собственные значки приложений на его телефоне.

Чтобы ваши значки PWA гармонировали с остальными приложениями на вашем устройстве, они должны быть гибкими, подходить для разных платформ, таких как Android, iOS и Windows, и учитывать стилистические элементы (свою форму, внешний вид с фоном или без него). или в другом цвете и т.д.). Хороший способ сделать это — сделать так, чтобы дизайн значка вашего PWA соответствовал — или, по крайней мере, был близок — к визуальному стандарту нативных значков приложений. Одним из источников вдохновения является руководство по материальному дизайну Google Material Icons.

 Рекомендуемая литература: PWA или нативное приложение: что вам больше подходит?

Сенсорное взаимодействие

Сенсорные взаимодействия должны быть реализованы очень хорошо или не реализованы вовсе.

Хотя на самом деле это не невозможно, слишком сложно включить расширенные сенсорные взаимодействия, такие как «проведите пальцем, чтобы закрыть» или «потяните, чтобы обновить». Хотя вы думаете, что такие взаимодействия удивят пользователей, это только в том случае, если они работают должным образом. Если нет, то вы в беде.

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

Между тем, вы можете полностью избежать этой проблемы, изменив дизайн, таким образом, он не будет предлагать расширенные сенсорные взаимодействия, например, вы можете использовать нижние навигационные вкладки вместо вкладок.

Общий контент

В случае прогрессивных веб-приложений часто текущий URL-адрес недоступен; следовательно, вы должны убедиться, что пользователи могут легко делиться тем, на что они смотрят. Может быть встроена кнопка «Поделиться», которая позволяет пользователям копировать URL-адрес в буфер обмена, чтобы им можно было поделиться на известных сайтах социальных сетей.

Небольшой совет на этот случай: если вы реализуете кнопки социальных сетей, не забудьте отложить загрузку стороннего JavaScript до тех пор, пока не загрузится основной контент на странице.

Сенсорная обратная связь

Во-первых, сенсорные области должны давать сенсорную обратную связь . Когда нажимается кнопка или область, на которую можно нажимать, пользователь не должен задаваться вопросом, было ли распознано нажатие.

Стремитесь сразу же дать понять, что касания были распознаны. Например, это можно сделать, выделив затронутую область (светло) серым цветом, показав рябь материала или немедленно начав переход между страницами.

Пример хорошо выполненной сенсорной обратной связи:

Веб-приложение Google I/O 2016 обеспечивает немедленную подсветку серым цветом при касании выступления, а синий цвет касания по умолчанию отключен (по умолчанию некоторые браузеры отображают собственную подсветку при касании элементов. Этот стиль по умолчанию непривлекателен и может конфликтовать с вашим визуальное качество бренда).

Во-вторых, прикосновение к элементу во время прокрутки не должно вызывать обратную связь .

Всякий раз, когда вы реализуете сенсорную обратную связь, важно, чтобы она не срабатывала по ошибке, когда пользователь касается элемента только для ПРОКРУТКИ страницы.

Пример отклика на касание в неподходящее время:

Ранняя версия популярной библиотеки Material-UI вызывала рябь на сенсорных элементах, когда к ним прикасались во время прокрутки.

Проблема была устранена путем прерывания анимации ряби, если местоположение касания пользователя перемещалось более чем на 6 пикселей в любом направлении в течение первых нескольких сотен миллисекунд.

Сохранить положение прокрутки на предыдущей странице списка

Нажатие назад со страницы сведений должно сохранять позицию прокрутки на предыдущей странице списка.

Когда пользователь нажимает назад от детали, страница должна сохранять положение прокрутки на предыдущей странице списка. Поскольку пользователь выбирает элементы из списка и просматривает его детали, нажатие назад НЕ должно перемещать их в начало списка. Основная цель состоит в том, чтобы, когда пользователь нажимает, он должен вернуться на страницу списка «с той же позицией прокрутки», в которой он находился до нажатия на элемент.

В конце концов, просмотр списка продуктов, статей или других элементов становится затруднительным, когда нажатие кнопки «Назад» снова возвращает пользователя в начало списка.

Очевидно, что когда вы усложняете навигацию для пользователей, они, как правило, больше не возвращаются.

Избегайте чрезмерно «веб-подобного» дизайна

«Классический» веб-дизайн сильно зависит от ссылок в тексте и статических элементов, доступных на каждой странице, таких как верхний и нижний колонтитулы. На самом деле, эти элементы дизайна редко встречаются в нативных приложениях, поэтому, чтобы соответствовать ментальным моделям пользователя, рекомендуется избегать их и вместо этого использовать более похожий на приложение дизайн.

Например, ссылки следует использовать с осторожностью. Вы должны тщательно размещать кнопки или сенсорные области.

Кроме того, следует избегать статических нижних колонтитулов страниц, содержащих навигационные ссылки и информацию об авторских правах. Вдохновитесь нативным дизайном приложения, чтобы увидеть, как похожая информация может быть перемещена в меню или иным образом не включена на каждую страницу.

Темная тема

Темные темы никуда не денутся, и они будут только улучшаться.

По словам разработчиков Android, темная тема имеет много преимуществ : может значительно снизить энергопотребление (в зависимости от технологии экрана устройства). Улучшает видимость для пользователей со слабым зрением и тех, кто чувствителен к яркому свету. Облегчает использование устройства в условиях низкой освещенности для всех.

Те, кто сможет найти баланс между доступностью темного пользовательского интерфейса и эмоциональной реакцией ярких цветов, будут на вершине в следующем году. Существует руководство от Google Material, которое может вам помочь.

В заключение

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

SimiCart готов ответить на все ваши вопросы и потребности, связанные с PWA. Специально для онлайн-продавцов, которые ищут универсальное решение Magento PWA для своего интернет-магазина электронной коммерции, мы предлагаем комплексное и экономичное решение для вас и вашего магазина.