Мобильный телефон — это возможность улучшить восприятие людьми интернета эти семь способов, могут помочь дизайнерам в этом.
С появлением мобильных устройств дизайнерам пришлось изменить свой подход. Печать стала цифровой, и дизайнеры нашли новые способы взаимодействия людей с контентом, созданным из пикселей. И теперь мобильные устройства превзошли настольные компьютеры как наши окна в Интернет. Вот семь советов для дизайнеров, чтобы привлечь и удержать пользователей на современных небольших экранах
1. Дизайн для мобильного
Не так давно у дизайнеров была роскошь разрабатывать в первую очередь для растягивающихся настольных дисплеев. Они предоставили обширный холст, который дал дизайнерам много места для работы. Иногда, может быть, слишком много. Ограничения требуют более практического подхода, уменьшая визуальный беспорядок и бессмысленные украшения.
Начальная точка любого веб-дизайна должна учитывать наименьший экран, на котором может отображаться сайт. Работа с ограничениями небольших экранов создаст единообразное взаимодействие между устройствами.
Режим предварительного просмотра на нескольких устройствах показывает, как дизайн будет выглядеть на разных устройствах, и позволяет вносить коррективы по ходу работы.
Прежде чем создавать каркасы для мобильного дизайна, убедитесь, что вы:
• Скомпилировали необходимый контент и определили, как он будет организован.
• Создали заголовки для каждого раздела.
• Определили призывы к действию и их размещение.
• Запланировали тип интерактивных элементов, которые вы будете использовать.
• И спланировали, как все эти элементы будут перетекать в единый дизайн.
2. Используйте жестовые микровзаимодействия и анимацию
Мобильный телефон означает меньшую площадь экрана, поэтому важно, чтобы контент и интерактивные элементы выделялись и четко отражали их назначение.
Микровзаимодействия — это небольшие всплески, которые побуждают кого-то к действию с немедленной обратной связью. Кнопка «Мне нравится» — это повсеместное микровзаимодействие, используемое для всего: от фотографий симпатичных кошек в Instagram до публикаций в Facebook и комментариев.
Мы ударяем пальцами вверх или в сердце, даже не задумываясь, публикуя наше одобрение. Мы проводим пальцем влево или вправо по приложениям для знакомств, и сразу же получаем новости о том что мы тоже кому-то нравимся. Микровзаимодействия делают интерактивность быстрой и интуитивно понятной — они являются определяющим моментом для многих веб-сайтов и приложений.
Взаимодействия на основе прокрутки похожи на микровзаимодействия: они добавляют движение к плоским экранам, которые мы держим в руках. Они добавляют динамические элементы в дизайн и действуют как ориентиры, привлекая внимание вашего пользователя, направляя их туда, куда вы хотите, например, в форму регистрации.
3. Будь проще
Разрабатывая дизайн для мобильных устройств, разбейте все до его основных компонентов. Речь идет не о скучном, неописуемом тексте, плавающем в пустоте. Речь идет об уточнении элементов, так что остается только то, что важно.
Это означает удаление ненужных элементов, таких как графика и занятые анимации, которые не добавляют пользовательского опыта. Экстремальные тени и другая графика, имитирующая трехмерность, отбрасываются для более практичного дизайна.
Вместо этого используйте привлекающие внимание цвета и достаточно негативного пространства. В сочетании с простой типографикой, это может сделать дизайн подходом, в котором будет легко ориентироваться и быстро загружать.
4. Удержите внимание с быстрым временем загрузки
Настольные компьютеры обладают роскошью более быстрых процессоров, большей вычислительной мощности и не нуждаются в переполнении мегабайтов узкими 3G-соединениями. Они могут вместить файлы большего размера, такие как длинные видеоклипы.
Когда вы готовите визуальные эффекты для дизайна, убедитесь, что:
• Используйте хорошо составленные, не загроможденные, содержательные изображения.
• Оптимизируйте все изображения с помощью программного обеспечения для редактирования фотографий, такого как Photoshop или онлайн сервисов.
• Используйте правильные пропорциональные изображения для макета.
• Используйте высококачественные фоновые видеоролики, но только при необходимости, большинство мобильных устройств даже не отображают их.
5. Создайте свой контент, ориентируясь на мобильные устройства
Мобильные устройства изменили наше восприятие интернета. Вместо того, чтобы сидеть в тихом месте, греясь в лучах настольного монитора, мы наблюдаем за паутиной на маленьких экранах в поезде на работу, в очереди в продуктовом магазине, в приемной в кабинете врача, везде.
Контент должен быть разбит на небольшие куски, которые легко перевариваются во время коротких всплесков активности. Так же, как элементы визуального дизайна должны быть уточнены только для того, что необходимо, так и для контента. Это означает создание предложений и абзацев, которые являются короткими, прямыми и кристально чистыми.
Организация контента еще более важна для мобильных устройств. Каждый раздел должен плавно переходить в следующий. Все должно иметь смысл, когда кто-то просматривает контент. Одна идея должна логически перетекать в следующую.
Призывы к действию должны быть не просто шепотом — они должны привлекать внимание. Чтобы написать более привлекательные призывы к действию:
• Дайте читателям повод действовать.
• Обращение к своим эмоциям.
• Подчеркните важность своевременности.
• Творчески передать индивидуальность бренда.
6. Используйте всплывающие окна правильно
Всплывающие окна являются важным инструментом для конверсий. Им нужно сделать свою внешность полезной, а не отвлекающей. Всплывающее окно должно быть больше, чем просто подсказка — оно должно соответствовать индивидуальности вашего бренда и стимулировать конкретные действия, которые принесут читателю что-то. Даже если это просто больше бесплатного контента в будущем.
Всплывающие окна должны быть привязаны к конкретному контенту. Вместо того, чтобы без разбора показывать вверху каждой страницы, вплетайте их в структуру контента. Всплывающее окно должно иметь смысл в контексте того, что представлено.
Пользователь может просматривать даты тура для группы. Всплывающее окно с просьбой присоединиться к списку адресов электронной почты о датах тура. Конверсии происходят, когда всплывающие окна полезны и в контексте. Содержание должно предоставить причину, чтобы узнать больше и принять меры.
7. Используйте многошаговые формы
Формы могут быть трудоемкими и утомительными. Кто из нас заполнил каждое поле и нажал «отправить» только для того, чтобы получить злой красный текст, сообщающий вам, что что-то не так? С разросшимися полями контента легко что-то упустить.
Разработка многошаговых форм упрощает процесс ввода информации. Существует логический поток, в котором ввод одного типа информации переходит в следующий. Многошаговые формы особенно хороши для мобильных устройств. Позволяет пользователям безболезненно создать учетную запись, подать заявку на работу или заполнить профиль знакомств.
Мобильный дизайн — это простота
Мобильный дизайн изменил стандарты юзабилити. То, что раньше было хорошо для рабочего стола, теперь считается громоздким. Мобильный дизайн убрал ненужные украшения и нашел более прямые пути, чтобы направлять пользователей через контент. То, что некоторые называют ограничениями, мы можем рассматривать как возможность улучшить восприятие людьми Интернета.
Надеюсь вам понравилась статься, если это так, дайте знать — поделитесь ей в социальных сетях и пишите комментарии, буду рад пообщаться на тему диджитал дизайна.
А так же подписывайтесь на меня, чтобы следить за новыми статьями, которые в скором времени будут часто появляться.
