• 9 минут чтения

• UX-дизайн, редизайн, тематические исследования, пользовательский интерфейс

• Поделись ТвиттерЛинкедин

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

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

Дальнейшее чтение на SmashingMag:

• Отзывчивый веб-дизайн: что это такое и как его использовать
• Методы, инструменты и стратегии адаптивного веб-дизайна
• Состояние адаптивного веб-дизайна
• Процесс проектирования в эпоху отзывчивости

Но что произойдет, если у вас есть существующий сайт или приложение, созданное для настольных компьютеров без адаптивной или мобильной стратегии? А если конкретнее, что, если у вас, как и у нас, нет ресурсов, времени или бюджета, чтобы начать с нуля в ближайшем будущем? Несмотря на то, что мы являемся дизайнерским магазином, мы в Fresh Tilled Soil оказались именно в таком положении. Вот как мы к этому относились.

Соревнование

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

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

Хотя наши ресурсы были ограничены, нам посчастливилось иметь несколько членов команды с ограниченным окном предстоящей доступности. Мы быстро собрали небольшую команду с целью быстро сделать весь наш веб-сайт по-настоящему отзывчивым (при этом уделяя особое внимание нашим пользователям iPhone и Android). Судя по нашим аналитическим отчетам, эти устройства были самыми популярными среди посетителей нашего сайта.

Наше исследование показало, что 51% мобильных посещений приходится на iPhone, 40% — на iPad, а оставшиеся 9% приходится на различные смартфоны и планшеты Android. Тем не менее, мы чувствовали, что действительно отзывчивое решение, в котором каждый из наших макетов является гибким, создано для лучшего решения, чем просто таргетинг на определенные устройства.

Как начать

• Определите ключевые макеты для решения. В группе мы обсудили, что наиболее важно с точки зрения потенциального клиента, а затем определили, какие макеты требуют индивидуального дизайна, а какие можно обрабатывать непосредственно в коде.
• Сосредоточьтесь на размере экрана, а не только на конкретных устройствах. После того, как пользовательские макеты были разработаны и закодированы, мы определили органические контрольные точки между мобильным и настольным компьютером для дальнейшей доработки.
• Учет новых возможностей устройства. Мы обновили графику для поддержки более высокого разрешения, связанного с дисплеями Retina.
• Дизайн и код параллельно. Пока дизайнеры работали над пользовательскими макетами, разработчики начали адаптировать веб-сайт к маленьким экранам, преобразовывая фиксированную ширину в процентную. Затем дизайнер и разработчик работали бок о бок, чтобы еще больше улучшить типографику, навигацию и макеты в коде, внося улучшения в режиме реального времени.

Наш процесс в действии

1. Оптимизируйте навигацию

Примите во внимание ограниченное пространство мобильного экрана и изучите способы упрощения макетов.

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

2. Определите варианты использования для конкретных устройств

Подумайте, чего больше всего хотят посетители от вашего мобильного веб-сайта, и подумайте, как облегчить им доступ.

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

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

3. Упростите существующую функциональность

Убедитесь, что ваши взаимодействия работают гладко на небольших экранах и сохраняют свой контекст.

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

Взаимодействие было упрощено, чтобы обеспечить бесперебойную работу на небольших экранах.

4. Переосмыслите потенциально неудобные взаимодействия

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

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

Подходы к пользовательскому интерфейсу, которые плохо работали на маленьких экранах, были подвергнуты другой обработке.

Было важно определить, что для раздела команды потребуется индивидуальный дизайн на ранней стадии процесса, чтобы мы могли приступить к проектированию, тестированию и итерации. Мы использовали div который скользит вверх от нижней части страницы, покрывая около 90% ее. Затем биографии были сокращены по длине, чтобы каждую биографию можно было представить без прокрутки как в книжной, так и в альбомной ориентации на наших целевых устройствах.

5. Используйте проверенные адаптивные шаблоны

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

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

6. Удаление ненужных элементов

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

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

Раздел контактов был упрощен, чтобы удалить повторяющиеся элементы.

Уроки выучены

• Принимайте обоснованные решения.. Сделав структуру веб-сайта гибкой, протестировав и определив, какие разделы можно переупорядочить или реструктурировать для оптимизации для мобильных устройств, наша небольшая внутренняя команда смогла немедленно приступить к работе и быстро двигаться вперед.
• Командная работа является ключевым фактором.. Каждый мог представить свои аргументы в пользу того, что добавить, удалить или изменить, если это исходило из того, что цели пользователя ставились на первое место.
• Не слишком формализуйте процесс. Как и во многих дизайнерских проектах, быстрые наброски и сеансы белой доски с последующими небольшими изменениями в дизайн-композициях и фактическом коде позволили сфокусироваться на более широкой картине, не слишком увлекаясь чрезмерно формальным процессом.
• Поймите, какие устройства использует ваша аудитория, но используйте полностью адаптивный подход.. Ведущий дизайнер Алекс Сильвия говорит: «Мы сознательно тестировали устройства, которые использовали наши клиенты, но мы также хотели, чтобы дизайн реагировал органично. Единственный способ обнаружить это — взаимодействовать с сайтом в разных размерах». Используя этот подход, а также тестируя на устройствах, которые, как мы знали, использует наша аудитория на основе аналитики, мы получили лучшее из обоих миров.
• Используйте лучшие технологии для работы.. Один из наших старших дизайнеров пользовательского интерфейса, Алек Харрисон, быстро создал дизайн-композиции для членов команды, используя LiveView для немедленной демонстрации композиций на своем iPhone. Это обеспечило правильный контекст для улучшения дизайна.
• Сотрудничество является ключевым.. Вместо того, чтобы проектировать самостоятельно, сотрудничество с разработчиком для принятия дизайнерских решений непосредственно в коде помогло нам найти органичное решение. Наш ведущий разработчик, Сара Каниесо, так сказала об этом процессе: «Этот проект еще раз подтвердил для меня, что адаптивные проекты во многом являются совместными усилиями дизайна и кода. Это был баланс между визуальной составляющей, когда дизайн менялся в разные точки останова, и сохранением функциональности, обеспечивающей хорошее взаимодействие с пользователем на разных устройствах».

Влияние

С момента запуска адаптивной версии нашего веб-сайта мы заметили следующие улучшения в поведении мобильных пользователей:

• Снижение показателя отказов на 17%.
• Увеличение времени пребывания на нашем сайте — до 3 минут с 40 секунд.

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

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

(сп) (шт.)