От автора: мобильный веб сайт обвиняется не заслуженно. Большей частью он находится в тени десктопов, либо играет роль старомодного приятеля «родных» приложений. К счастью, у нас есть инструменты, в силах которых все изменить. Прогрессивное улучшение, принцип mobile-first и чутко реагирующий дизайн ведут нас к более унифицированному, устремленному в будущее вебу. Это хорошая новость. Плохая новость? Эти инструменты бесполезны, если у вас нет лицензии на их использование.
Во многих случаях нас сдерживают клиенты и те концептуальные модели, которых они придерживаются. Чтобы клиенты усвоили потенциал мобильных веб сайтов, нужно заставить их думать дальше настольных компьютеров и приложений.
Перспектива мобильного веб сайта – это агрессивные продажи
Давайте сознаемся: чутко реагирующий дизайн требует больше времени и дороже стоит.
При введении различных размеров экрана для мобильных веб сайтов, разрешений и функциональных возможностей устройств работать приходится гораздо больше. Нужно создать больше разметок каркаса, требуется предусмотреть различное жестовое взаимодействие и поддержку широкого спектра функциональных возможностей. Все это к тому же складывается в значительное время тестирования. И все же время и издержки оправданны, особенно в сравнении со стоимостью попыток подогнать к своему проекту оптимизацию в зависимости от устройства. Можно привести рациональные аргументы для оправдания более длительных сроков производства, и большинство компаний при желании могут изыскать дополнительные ресурсы.
Существует более значительное препятствие, чем время или стоимость: это препятствие — перемены.
Меняться тяжело
Тяжело изменить способ, которым мы привыкли что-либо делать. Страшно ломать условности. Будучи людьми, мы по природе своей не расположены к этому. Сказать “Нет времени, нет денег” гораздо проще, чем инвестировать в стратегию прогрессивного мышления, требующую фундаментального сдвига понятия вебсайта. Мы сражаемся со стереотипами, коллективно созданными нами для веба. Попросите кого угодно представить себе вебсайт, и он нарисует 960-пиксельную разметку, уютно помещенную в окно браузера настольного компьютера. Попросите его вообразить мобильный вебсайт, и он наверняка ограничится идеей приложения. Он представит простой интерфейс, основанный на описании задач, с ограниченным содержанием, минимальной навигацией и элегантными переходами. Настольный и мобильный: два совершенно разных зверя.
Мы продолжаем разрушать веб каждый раз, когда побуждаем пользователей к выбору: настольный или мобильный вебсайт.
ОЖИДАНИЯ – ПРЕПЯТСТВИЕ НА ПУТИ ПРОЕКТА
Нужно отучиться самим и отучить клиентов от того препятствия, которое вносят в проекты ожидаемые результаты. Нужно оставить устаревшие привычки. Это легче сказать, чем сделать, поэтому давайте начнем штурм проблемы. Ниже я поделюсь с вами методами, применяемыми для изменения представлений людей о мобильном вебе; если у вас имеются другие или отличающиеся методы, давайте выслушаем и о них. Как заставить самих себя и своих клиентов отбросить те концептуальные модели, к которым склонны?
ЭФФЕКТИВЕН РАЦИОНАЛЬНЫЙ МОТИВ (ПОКА ЧТО)
Начните с создания захватывающей деловой аргументации за более чутко реагирующий подход к вебу. Бомбардируйте заинтересованные стороны мобильной статистикой, исследованиями и примерами реального применения. Если похоже, что они «подсели» на создание мини-вебсайтов с произвольно выбранным контентом, то обсудите фрагментацию размеров экрана. Обратите особое внимание на «темную» область между большими смартфонами и маленькими «таблетками». Потребуйте от них определить, при каком именно размере экрана интерфейс должен включиться и убрать содержимое из зоны досягаемости пользователя. Если способны создать надежно подготовленное дело, то у вас должна быть полная комната прозревших и поддающихся новому подходу людей. Рациональные аргументы за адаптивный дизайн позволят вам зайти настолько далеко, потому что:
Вы просите окружающих отвергнуть привычную систему, с которой они знакомы и чувствуют себя комфортно;
Концепция остается абстрактной, создавая разрыв между теорией и реальностью.
Если клиент неспособен представить, как его вебсайты адаптируются к разнообразию размеров экрана, то ему будет сложно решиться на этот подход. Вследствие неуверенности люди вновь обратятся к проверенным традициям.
Если хотите подвести клиентов к новым методам мышления, путь помогут определить совместные наброски.
При ведении клиентов нетрадиционной дорогой первые шаги всегда даются легко. Как вы будете двигать их вперед и предотвратите возврат с середины пути?
ИСПОЛЬЗУЙТЕ ЭСКИЗЫ КАК ВИД ЭКЗОРЦИЗМА
Ожидаемые результаты дизайна формируются в тот момент, когда члены команды начинают представлять себе проект. Пока идет планирование и обсуждение, обретающие форму мысленные образы становятся отчетливее. Может возникнуть ситуация, когда вы обнаружите, что делаете дизайн того, что на уме у клиента, вместо создания дизайна под цели проекта и нужды пользователя. Чтобы заставить людей принять новые идеи, вам нужно изгнать старые. Здесь в дело вступает создание набросков. Мы часто считаем эскизы способом генерации и обмена идеями, но их также можно назвать оружием их разрушения. Цель создания набросков здесь – не произвести рисунки, передающие окончательный дизайн. Мы не подменяем процесс получения опыта взаимодействия (UX). Цель состоит в удалении упрямых, закостенелых идей и освобождении места под новые.
Создание рабочего плана
Намеченные ниже шаги отражают текущий процесс. Хотя ценен каждый в отдельности, обдумайте, как на намеченном пути они сработают совместно в целях управления мышлением группы. Постарайтесь постоянно подходить к дизайну с разных углов, чередуя техники, требующие от группы сосредоточения (конвергентного мышления) и требующие от нее исследований (дивергентного мышления). По мере выполнения могут возникнуть конфликтующие идеи. Воспользуйтесь этими точками разногласия, так как они могут оказаться ключом к разрушению неподатливых умозрительных моделей.
Текущий процесс работы над нашим замыслом следующий:
Установите, определите цели. Расположите цели работы в соответствии с приоритетом. Установите правила и критерии, согласно которым будут обсуждаться и оцениваться идеи.
Набросайте каркас комикса. Установите содержимое, существующее вне пределов экрана. Дайте людям область, в которой можно создавать модель.
Mobile-first. Попросите группу сосредоточиться на информационной иерархии и целях пользователя. Извлеките из мозгов «малоэкранные» идеи (особенно те тяжелые, центрированные на приложениях) и переложите на бумагу.
Шаблоны 6-up. Введите конфликт. Наверняка между тем, что только что нарисовала группа для мобильных устройств и тем, что она представила для вебсайта десктопа, имеются расхождения — исследуйте это несоответствие. Выдавите из умов участников как можно больше идей.
Наброски концепции. Сообща перестройте идеи в новые модели, работающие вне зависимости от размера экрана или устройства.
Установка
ОПРЕДЕЛИТЕ БИЗНЕС-ЦЕЛИ ВЕБСАЙТА И ПОТРЕБНОСТИ ПОЛЬЗОВАТЕЛЯ
Группа заинтересованных лиц
Время: от 30 до 60 минут.
Установите и расположите цели по приоритету. Перед началом рисования мы постараемся определить некоторые параметры. Начнем с установки целей вебсайта, которым обеспечим привязку к более широким задачам организации. Важно избегать всего, что описывает отдельные характеристики функциональности. “Быстрые ссылки” и “вращающееся слайдшоу” – это не цели. Делаем на доске или большом листе бумаги список как можно большего количества целей, назначая каждой приоритет.
Определите аудиторию и потребности пользователей. Далее создаем новый список пользовательских потребностей. Эту информацию нужно извлечь из реальных исследований и бесед с пользователями. При самом плохом сценарии, если вы неспособны назвать ни одной, то можете примерно оценить понимание клиентом своей целевой аудитории и того, какими он воспринимает ее потребности. Начните с идентификации основной группы пользователей и составления списка задач, которые ей придется решать на вебсайте. Если составление списка применимых на практике задач представляет сложность, подумайте о тех вопросах, которые могут возникнуть у этой аудитории при входе на вебсайт. Сначала о том, что мотивирует их войти, и какая информация может оказаться для них наиболее ценной? После проведения «мозгового штурма» по потребностям своей основной целевой аудитории, переходите к вторичным аудиториям.
Проведите «мозговой штурм» мобильных возможностей. Сейчас, когда вы создали список целей вебсайта и потребностей пользователя, пора начать растить мобильное «семя». На этой стадии нашей целью является сдвиг с привычного образа мыслей о том, что мобильный вебсайт должен быть дополнительным или «облегченным». Я заставлю группу подумать о том, какие возможности возникают, когда пользователь не привязан к столу. Что, если он валяется на диване, находится на работе или где-то ходит? Как возможности разных видов устройств предоставляют способность взаимодействия с ранее не существовавшим контентом? Здесь задачей является генерирование множества различных идей, даже если некоторые из них окажутся невероятными. Воодушевите людей возможностью добавления, а не вычитания из вебсайта.
Это упражнение не должно утомлять, так что постараемся потратить на него не более часа.
Начните делать наброски
Покончив с установками, пора начать делать наброски. Эскизные упражнения, похоже, время от времени немного меняются в зависимости от динамики и размера группы, с которой мы работаем. Посчитав количество участников, постараемся ограничить рабочие группы примерно до 10 или менее человек. Так каждому выпадает шанс поработать индивидуально, но при этом группа достаточно большая, и можно разбиться на маленькие команды. Чем больше в группе отдельных клочков, тем лучше. Зарисовки должны быть простыми и, что более важно, шутливыми. Это ведет нас к первому упражнению: комиксам из каркасных фигурок.
КОМИКСЫ ИЗ КАРКАСНЫХ ФИГУРОК
Команды из двоих-троих
Время: 30 минут плюс обсуждение.
Создавать комиксы из фигурок-палочек легко. Разделите свою группу на команды по два человека. Дайте каждой лист бумаги, заполненный квадратными секциями, и попросите нарисовать грубый набросок-комикс, отражающий члена целевой аудитории, заходящего на вебсайт и полностью выполняющего свою задачу. Мы совсем недавно применяли эту методику при работе с Марианским университетом (Marian University) в Висконсине (Wisconsin). Чтобы задать направление своим начинающим художникам, мы уточнили задание: “Начните рисовать рассказ в картинках с персонажа, представляющего вашу целевую аудиторию. Комикс о нем не начинается с вашего вебсайта. Подумайте о месте, где начинается рассказ. Что мотивирует его к посещению вебсайта, и какие действия он предпринимает, зайдя на него? Какое он использует устройство?”
В университетской рабочей группе одна команда описала историю подростка, привязанного к своим друзьям и родному городу, который не хочет уезжать далеко от школы. Он любит спорт, но не настолько талантлив, чтобы играть за большой университет. Он рад узнать, что в этом университете предлагается участие в спортивной жизни и имеется большое количество студенческих резиденций. Он сможет жить студенческой жизнью, одновременно будучи на небольшом расстоянии от дома. Зарисовки показали главного героя, заходящего на вебсайт и взаимодействующего с различными страницами.
Рисование комиксов – интересный метод представления новых примеров использования сайта, хотя может оказаться непредсказуемым.
Эти комиксы-раскадровки великолепны, потому что заставляют превратить списки потребностей и целей в повествования. Слои абстракций слезают по мере того, как участники ведут подробное повествование о том, какими они представляют индивидуумов, пользующихся вебсайтом. Таким образом, разговор движется в нужном направлении, заинтересовывая стороны в том, как вебсайт играет роль, расширяющуюся за пределы экрана и внедряющуюся в человеческую жизнь.
ШАБЛОНЫ 3-UP MOBILE-FIRST
Одиночные зарисовки
Время: 30 минут плюс обсуждение.
Мы заставили участников думать в верном направлении: рассказах о людях, использующих вебсайт. Затем сосредоточимся на интерфейсе вебсайта. Я покажу на доску, заполненную пометками о пользователях и задачах, и отмечу, что включение всего этого в одну страницу не сработает. После краткого напоминания о подходе mobile-first мы раздаем всем в комнате шаблоны 3-up, а затем решаем, на чьей основной странице (страницах) следует сосредоточиться. Инструкция к этому упражнению: “Допустите, что ваш пользователь применяет устройство с маленьким экраном. Для сложной интерактивности нет места, и пространство для представления содержимого ограничено. Что вы покажете на этой странице? Сосредоточьтесь на приоритете контента и действиях, которые нужно стимулировать.”
С помощью этого и других упражнений с зарисовками заставьте всех сфокусироваться на приспособляемости контента, а не контейнера. Поскольку «мозговые штурмы» и раскадровка поощряют мыслить широко и экспериментировать с большим спектром идей, это упражнение создано для проверки этих идей. Шаблоны узкой страницы требуют от сотрудников сосредоточения и зарисовывания только самых важных идей и элементов страницы. На этой стадии многие наброски все еще будут смотреться как приложения. Вначале это нормально и ожидаемо. Когда закончится рисование, попросите каждого участника объяснить свои идеи остальной группе.
Мобильные шаблоны заставляют участников сосредоточиться на важном контенте и действиях.
ЧУТКО РЕАГИРУЮЩИЕ ШАБЛОНЫ 6-UP
Одиночные зарисовки
Время: 30 минут (без обсуждения)
Если бы получилось полностью пройти зарисовки и процесс дизайна без впадения в устаревшие традиционные убеждения, это было бы отлично. Но хотя мы уже так далеко зашли с новыми идеями, на самом деле еще ничего не сделано для избавления от «спящих агентов» — представлений о том, “каким должен быть вебсайт”, так глубоко укоренившихся, что просто обязаны возникнуть заново.
В упражнении-зарисовке 6-up мы попросим каждого члена группы выделить свои оригинальные идеи из зарисовок 3-up и обдумать их применение к различным экранам. Если представляются новые элементы страницы, они должны быть оправданы и напрямую привязаны к ранее определенным задачам пользователя или требованиям вебсайта. Мы слегка модифицировали традиционное упражнение 6-up так, чтобы между пропорциями шести панелей было непостоянство; блоки все еще маленькие, поэтому рисунки остаются примерными. В этом упражнении мне нравится то, что оно побуждает участников выйти за пределы своих первоначальных представлений и усвоить новые. Вот где вы увидите людей, отчаянно пытающихся выполнить нечто вроде горизонтальной навигационной панели или скользящего ротатора изображений. Они пытаются помирить свой импульс ввести эти стандартные элементы с задачами и историями, над которыми уже поработала группа. Изо всех упражнений это, похоже, самое сложное.
Шаблон 6-up поощряет участников выйти за пределы своих изначальных представлений и подталкивает к новым. Может получиться приличный хаос.
Примерно через 10 минут, когда большинство уже сделали наброски самых простых идей, я часто прохожу и раздаю «Заметки к размышлению» (Mental Notes) (см. ниже), чтобы вдохновить участников на обдумывание целей и поведения, которое они хотели ли бы стимулировать. По окончании времени создания эскизов мы прямиком переходим к наброскам концепции, не проводя группового обсуждения.
НАБРОСКИ КОНЦЕПЦИИ 1-UP
Команды из двоих-троих
Время: 30 минут плюс обсуждение.
Если упражнения успешно проделаны, участники окажутся в состоянии крайнего замешательства. Вебсайт, который изначально они могли так четко себе представить, теперь оказаться туманным хаосом — и это отлично! Это как раз то, что вам нужно. Похоже на весеннюю уборку, когда в доме оказывается больше беспорядка, чем до того. На волне этого замешательства можно начать реконструирование. Снова соберите участников в команды и заставьте поработать над идеями друг друга совместно. Дайте каждой команде выработать единую концепцию, представляющую адаптивное решение. По окончании вывесите на стене большой пустой лист бумаги и дайте каждой команде вывесить рисунки и представить группе свою концепцию. Попросите их описать эволюцию своего дизайна. Кроме того, пройдитесь по собственному замыслу, который в идеале тоже должен был развиться из новых идей. Используйте бумажный задний фон для добавления заметок о том, какие идеи резонируют с людьми, или пометки флажками тех областей, которым может потребоваться дополнительное обдумывание. Затем вы можете свернуть весь лист с набросками и вернуть своей команде.
Концептуальные наброски должны отражать эволюцию мысли по мере адаптации и модификации исходных мобильных набросков 3-up, приняв во внимание холсты разного размера.
ПОДСКАЗКИ К ГРУППОВЫМ ЗАРИСОВКАМ
Запаситесь ручками, маркерами, карандашами, бумагой и другими принадлежностями, которые могут вам потребоваться.
На все демонстрируйте примеры.
Если вы Пикассо, то неплохо специально делать грубые, примерные рисунки. Дайте участникам возможность почувствовать, что они тоже так могут.
Включите музыку, потому что тишина затруднительна, и не должно быть ощущения того, что вы проводите тестирование. «Chutes Too Narrow» от «The Shins» и «The Kinks are the Village Green Preservation Society» – вот два весьма подходящих альбома.
Предложите Mental Notes. Мне нравится давать людям возможность срисовывать с карт Mental Notes и обещать “призы и славу” тем, кто сможет внедрить данные принципы в свой дизайн.
Не бывает плохих рисунков. Качество наброска не имеет значения —рисовать означает мыслить. Хвалите идеи и стимулируйте исследования.
При формировании команд не разделяйте близких; они только усилят друг друга. Разделяйте тех людей, кто обычно не работает совместно.
Некоторые не захотят участвовать в рисовании. Предложите порисовать за них или разрешите им поучаствовать только в диалоге.
Минимизируйте количество времени, истекающего между зарисовками и выполнением каркасов, дизайна или что там в вашем процессе следующее в очереди. Чем больше промежуток времени, тем сильнее возможность возврата «традиционной болезни».
Заканчиваем
К окончанию работы все почувствуют творческое переутомление, любые идеи закончатся. Концепциям, представленным к концу дня, будет не хватать отпечатка хозяйской индивидуальности, так как в их оттачивании принимали участие уже все. Хотя эти наброски напрямую не могли стимулировать окончательный дизайн, участники все равно будут знать, что внесли свою лепту. Что еще важнее, вы удалите слои абстрактности, окружающие адаптивные, аппаратно-независимые решения. То, что когда-то было сложно представить, теперь стало гораздо достижимее. Вы также, будем надеяться, вычистили упрямые идеи, похороненные в головах клиентов, которые, похоже, выплывают на поверхность в самые неподходящие моменты. Совместные зарисовки помогают совершить скачок к пониманию настоящего потенциала мобильного веба к расширению, а не ограничению способов взаимодействия с Сетью. Загоревшиеся открывающимися возможностями, в своих организациях они даже могли бы стать защитниками дружественного подхода к будущему Веба. Если вы когда-либо сокрушались при виде проекта, не раскрывающего свой потенциал, то поймете, как это важно.
Не существует секретного способа изменить то, во что верят люди, или преодолеть концептуальные модели, к которым они склоняются. Мы всегда будем бороться с упрямцами и их решениями, которые, похоже, вызываются страхом, а не стратегией. Надеемся, вы обнаружите, что внедрение совместных эскизных групп в работу ваших клиентов поможет победить в сражении и построить более доступную Веб-сеть. А какие методики применяете вы?
СРЕДСТВА
Каркасный комикс (Stick-figure comic strip) (PDF)
Мобильный шаблон 3-up (3-up mobile template) (PDF)
Шаблон 6-up (6-up template) (PDF)
Лист концепций (Concept sheet) (PDF)
На этом урок объясняющий, что такое мобильные веб сайты, окончен, желаю всех вам благ!
Автор: Dennis Kardys
Источник: //www.smashingmagazine.com/
Редакция: Команда webformyself.
