От этого никуда не деться, мобильный интернет не скоро исчезнет, и для тех дизайнеров, которые его избегают, сейчас самое время с этим смириться. Совершенно верно, что многие дизайнеры используют «мобильный сначала» подход, чтобы гарантировать, что мобильный сайт, даже если он адаптивный, работает в меру своих возможностей.
В предыдущей статье я говорил о том, как наилучшим образом оптимизировать адаптивные сайты для повышения производительности, поэтому я отсылаю вас к этому для получения советов по сокращению времени загрузки и так далее. На этот раз я буду планировать контент с учетом рентабельности инвестиций (ROI) и удобства использования.
Отзывчивый или выделенный мобильный сайт?
Это дебаты, которые пока не показывают никаких признаков отказа С одной стороны, большинство организаций предпочли бы иметь «один размер для всех», когда дело касается их сайта. Тем не менее, кажется, что многие аргументы, связанные с отзывчивостью, в основном связаны с затратами .
Создание адаптивного сайта, который работает и работает хорошо, в то же время доставляя тот же контент для мобильных устройств, что и для настольных компьютеров, является сложной задачей. Это имеет тенденцию стоить денег. Если клиент предпочитает придерживаться своего сайта для настольных компьютеров, а другой делает его для мобильных устройств, то это, вероятно, будет стоить дешевле, чем если бы он решил пойти по адаптивному маршруту. Это потому, что адаптивный сайт должен быть запущен с нуля и, следовательно, будет гораздо большим проектом.
Проверка будущего
Стоит спросить клиента, как долго он будет ждать, пока сайт рабочего стола будет изменен. В любом случае, мобильный сайт должен будет приспосабливаться к разным размерам экрана, разрешениям и полосам пропускания, так почему бы не использовать всю мощь и полностью перестроиться?
Ответ сводится к тому, насколько клиент счастлив, когда выбирает легкий путь и идет на компромисс в достижении отличного дизайна. Это означает, что клиент должен знать о потенциальных затратах для бизнеса при инвестировании в дизайн, который не пригоден для будущего.
Говорящая РИ
Когда дело доходит до этого, большинство владельцев бизнеса понимают цифры, и вероятность того, что они откажутся от более дорогостоящего дизайна, сводится к тому, чтобы предоставить подтверждение возврата своих инвестиций.
При планировании проекта это должно быть в центре внимания дизайнера. Это означает, что необходимо подумать о том, сколько может стоить менее дорогой дизайн с точки зрения потерянного бизнеса.
Думать о:
- Представление единого бренда на всех платформах
- Как быстро меняется технология
- Юзабилити и сайты конкурентов
- Целевые страницы и как будут работать CTA
- Как контент будет доставлен
Необходимо показать клиенту, что дизайн в краткосрочной перспективе, скорее всего, будет стоить им дороже в долгосрочной перспективе. Потребители в наши дни имеют определенные ожидания, когда дело доходит до веб-сайтов, и они, конечно, не суетятся о том, чтобы отправиться на соревнование, если кто-то не придет в себя.
Сайт, который медленно реагирует, когда дело доходит до просмотра или постукивания по экрану, заставит их работать на виртуальных холмах.
Что приходит первым? Контент или дизайн?
Итак, вопрос в том, лучше ли иметь четкий контент-план для работы или лучше сделать контент подходящим для дизайна? Ответ однозначен, так как без согласованной структуры для разработки могут возникнуть проблемы.
При рассмотрении контента необходимо учитывать:
- CTA — текст или кнопки?
- Пространство — сколько вам нужно работать и как его можно эффективно использовать?
- Изображения — сколько будет доставлено на мобильные устройства?
- Как вы можете воспользоваться встроенными функциями, такими как звонки, карты, географическое положение и т. Д.?
- Как вы можете уменьшить объем контента для устройств разных размеров?
- Какой макет лучше всего использовать?
- Как будет работать навигация?
Как только вы начнете рассматривать все это, скоро станет очевидным, что контент будет в значительной степени определять дизайн. Другая причина с точки зрения клиента заключается в том, что этот контент должен быть адаптирован для каждого устройства. Это устраняет необходимость публикации различного контента для каждой платформы, а с точки зрения рентабельности инвестиций это повысит производительность на рабочем месте.
Это одна большая, долгосрочная экономия затрат прямо здесь.
Контент и пользовательский интерфейс — закон Фитта
Как разработчик / дизайнер, вы, несомненно, слышали о законе Фитта, но на всякий случай — краткий обзор. Согласно статье на сайте разработчика MDSN , закон Фитта «может применяться к программным интерфейсам, а также к дизайну веб-сайтов, поскольку он предполагает способ взаимодействия людей с мышью или другими указательными устройствами».
По сути, человек, использующий мышь для перемещения курсора, обнаружит, что на определенные интерактивные области легче щелкать, чем на других, в зависимости от размера интерактивной области и расстояния, которое необходимо пройти, чтобы добраться до него. Тот же принцип можно применять, если подумать о более личном устройстве ввода, которым является палец.
Чем дальше человеку приходится перемещать устройство ввода, чтобы попасть в область, активируемую щелчком мыши, тем сложнее будет его найти. Учитывая этот принцип, легко понять, почему пользователь может отказаться от сайта, который не соблюдает закон Фитта. Если пользователь по-прежнему пропускает интерактивную целевую область, он с меньшей вероятностью останется.
Для мобильных устройств больше конверсий осуществляется с четким CTA в верхней части экрана, и навигация там тоже часто присутствует. Это потому, что закон Фитта говорит нам, что это самое короткое расстояние, на которое нужно кликать, и оно хорошо обрамляет страницу, поэтому это также логично.
Однако, если к этим активным областям легко добраться, но они имеют очень маленькие цели, такие как текст в середине кнопки, они все равно будут препятствовать посетителю оставаться на сайте.
Тест большого пальца
Для пальцев рекомендуемый размер области для нажатия — 16-22 мм, а для большого пальца — 25 мм. Это руководство, и многие считают, что этого недостаточно. Поэтому постарайтесь сделать их максимально большими; это касается как ссылок на товары, так и навигации, так как люди откажутся от продажи, если разочаруются.
Попробуйте набросать эскизы разных размеров и посмотрите, сколько места занимает ваш большой палец в области клика. Посетитель должен иметь возможность удобно нажимать, не перекрывая прилегающий контент, и одним касанием следует перенаправить его по ссылке.
(Источник: MDSN Developer)
Для мобильных устройств убедитесь, что кликабельные области четкие, что означает, что для пользователя должно быть очевидно, что именно здесь он нажимает.
CTA
Сильный призыв к действию на мобильных сайтах крайне важен, и у вас мало места для игры. Одним из наиболее популярных (и лучших) для мобильных сайтов является использование кнопки « Позвоните нам ». Помимо карт, это очень полезно для посетителя, так как многие будут искать местный бизнес при поиске.
Простейшие CTA лучше всего подойдут для мобильных устройств, поэтому подумайте о кнопках, изображениях и т. Д. И расположите их в верхней части страницы.
Когда дело доходит до планирования контента для мобильных сайтов на основе настольных моделей, доставка также важна. Использует ли клиент CMS для управления контентом, и собираетесь ли вы использовать перенаправления или медиа-запросы?
Распространенные ошибки при проектировании для мобильных устройств: ошибочные перенаправления, нерелевантные URL-адреса / перекрестные ссылки, неиграемое видео и многое другое. Это означает, что тестирование в реальном мире жизненно важно для выявления любых потенциальных проблем, которые могут возникнуть на уровне конечного пользователя.
Ясно, что дизайн будет развиваться таким образом, чтобы дизайн для экранов разных размеров и разрешений был стандартным, на мой взгляд, хотя я уверен, что некоторые люди не согласятся. Тем не менее, это все еще относительно новый подход, и он имеет тенденцию означать принятие более целостного подхода к дизайну, с учетом общих потребностей клиента, а не отдельных сайтов, мобильных сайтов и так далее.
У дизайнеров, которые готовы приступить к работе и по-настоящему освоить адаптивный дизайн, могут возникнуть проблемы с тем, чтобы убедить клиентов расстаться с деньгами в краткосрочной перспективе, но со временем они увидят, что они одержали победу.