Адаптивному дизайну довольно трудно научиться, но ему научиться надо. Прошли времена Web 2.0, медленных модемов и ограниченного экранного пространства. Теперь мы создания экранов, всегда старающиеся купить, построить и обучиться всему и везде.
В Brotherhood Design, мы допускали ошибки, обучаясь тонким нюансам адаптивного дизайна. И это очень хорошо: если бы мы их не допустили, наши дизайнерские решения по-прежнему были бы второсортными.
Итак, вместо того, чтобы смотреть, как вы боретесь, или того хуже — бьетесь головой о пиксельную стену, мы хотели бы поделиться некоторыми ошибками, которые мы допустили за эти годы и простыми методами их решения.
Трудно читаемый эскиз
Удивительно, как просто допустить эти несколько простых ошибок при переформатировании некогда красивого веб сайта (или приложения) в микроскопическую или гигантскую версию себя самого.
Кнопки, заголовки и изображения могут быть легко искажены в зависимости от бесчисленных переменных. Так что при работе с размером имейте в виду следующее:
1. Что важно?
Если вы проектируете блог, который получает (или получит) огромные объемы трафика, — заголовки и эскизы должны быть четкими и легко читаемыми. Не слишком большими и не слишком маленькими, в противном случае пользователям придется либо бесконечно прокручивать, либо использовать увеличительное стекло.
Точно так же, если вы проектируете для сайта электронной коммерции, убедитесь, что продукт, и в большинстве случаев цены, легко воспринимаются. Если что-то из двух занимает слишком большое пространство — вы создадите трение, которое повлияет на продажи. Никто не хочет найти что — то, что они искали, (и на что планировали потратить деньги) только что бы понять, что цену на этот товар невозможно найти, или что кнопка «добавить в корзину» пропала в медиа запросе.
«Тестирование и отзеркаливание это абсолютная необходимость в процессе адаптивного дизайна»
2. Кнопки и призыв к действиям (СТА)
Так как пользователи покупают при помощи мобильных телефонов и планшетов, ваш адаптивный дизайн должен отражать страницу и цели веб сайта. Это может оказаться сложным, так как существует тонкая линия между ошеломлением пользователей и осуществлением чистого пользовательского опыта.
Если что-то работает не так, не бойтесь немного отойти от плана. В конце концов главное достичь всех целей, а не убедиться в том, что всё скомпоновано.
Решения:
Тестирование и отзеркаливание это абсолютная необходимость в процессе адаптивного дизайна. Никогда не думайте, что только потому, что что — то выглядит хорошо в Photoshop, Illustrator или Sketch, оно будет так же выглядеть на конечном устройстве. Не привязывайтесь к своему дизайну, пока вы его не протестировали.
«Не привязывайтесь к своему дизайну, пока вы его не протестировали.»
Страница слишком долго загружается
Тяжелые изображения и видео замедляют веб сайты
Это становится проблемой, на мобильных устройствах. Если ваши дизайны не перегружены видео и изображениями, то вашему пользователю потребуется больше времени для его просмотра.
Запомните: пользователям нужна уверенность при браузинге с мобильного устройства. Если сайт работает медленно, то пользователи будут переходить с одного сайта, на другой, а поисковики будут индексировать его в последнюю очередь.
В итоге это приведет к миллионам проблем, с которыми столкнутся как разработчики, так и продавцы, так что лучше избегать «медленных дизайнов»
Решения:
Опять же, это зависит от того, что важно на вашем сайте. Удалите ненужные изображения или видео, которые не добавляют ценности на занимаемом участке.
Zendesk хорошо с этим справился. Домашняя страница их десктопного веб-сайта содержит вовлекающую анимацию. В мобильной версии ее нет, но это не умаляет основной ценности страницы.
Спросите себя:
- Каковы предназначение и цель сайта?
- Будут ли дополнительные изображения действительно необходимы?
Дизайн убивает функциональность
Адаптивный дизайн может привести к потере функциональности. Клиенты и пользователи не простят вам этого, по крайней мере, какое-то время.
Ничего так не бесит пользователя, как:
- Сначала получить приятные впечатления от вашего десктопного сайта, а потом увидеть потерю функциональности на его мобильной версии
- Оказаться новым пользователем вашего сайте, заметить плохую функциональность на разных устройствах и никогда не возвращаться (может они даже расскажут об этом друзьям)
Пример: потеря функции масштабирования на мобильном устройстве. На десктопе, вы можете увеличивать масштаб информации, легко изменять размер шрифта, и найти золотую середину для удобства чтения. Для людей с плохим зрением, или тех, кто отчаянно пытается разобрать мелкий шрифт, отсутствие функции масштабирования убивает всю картину.
Решение:
Не оставляйте подобный функционал на рассмотрение разработчика. Если вы проектируете сайт, загруженный текстом, или знаете, что ваши дизайнерские решения направлены на пользователей, которые ценят функционал, включите соответствующий экран или прототип.
Роман Василенко жилищный кооператив. косметолог аппаратное лечение
Помните: пока вы не изложили ваши идее на бумаге перед кем-либо — они остаются вашими идеями. Люди не умеют читать мысли.
Вы не понимаете наших пользователей
Не рассчитывайте на то, что разработчики подберут какой-либо стандартный адаптивный дизайн, и создадут отличное решение. Это просто не справедливо.
Вот почему, как дизайнерам, надо понимать кто, где и когда использует наши проекты.
Вот где пригодится persona marketing. Если у вас под рукой нет маркетолога или отдела маркетинга, создание краткого описания персоны поможет дать ответы на некоторые животрепещущие вопросы вашего дизайна.
«Как дизайнерам, надо понимать кто, где и когда использует наши проекты»
Информация, которую надо учесть при создании персоны:
- Имя: всегда давайте им имена (например, «Дизайнер Дэн») -это очеловечивает процесс.
- Изображение: лица делают процесс более личным и легким
- Профессия: чем он зарабатывает себе на жизнь? Разные профессии предпочитают разные устройства.
- Расположение: если основная часть пользователей расположены в Бразилии, то они скорее всего будут использовать другие устройства, чем люди в Японии.
- Привычки браузинга: как и где они просматривают веб? На диване с планшетом, или за столом на ПК?
- Цели: каковы их цели и как бы они пытались их достичь?
- Вызовы: какие вызовы бросает им жизнь, и как они пытаются их решить?
Решение:
Используйте persona marketing, чтобы узнать побольше о ваших конечных пользователях. Чем больше вы знаете, тем легче будет решить, какие вариации адаптивного дизайна вы должны приоритезировать.
Это также поможет вам пройти барьер «один размер для всего». Вас поблагодарят и разработчики, и пользователи.
«Дотошно продуманный процесс ведет к великим адаптивным решениям»
С persona marketing, вы можете углубляться так далеко, как вам хочется.
Выводы
Только одно можно вынести из этой статьи, убедитесь, что это следующее: вы должны думать о своих проектах.
Мы не рекомендуем слишком сильно ломать голову над чем бы то ни было. Но что касается работы над дизайном, то тут дотошно продуманный процесс ведет к великим адаптивным решениям.
