Курс #1.2 Введение в UX Дизайн
Дизайн процесс (Часть 1)
Кратко напомню, что в своем #200daysofUX Challenge я намереваюсь выкладывать теоретическую информацию, информацию о процессах и т.д в UX дизайне, что я получаю с курса User Interface Design Specialization от University of Minnesota.
Здесь моя первая статья 👇.
Что такое UX дизайн процесс
И почему он нам нужен?
Дизайн процесс — это систематический метод проектирования пользовательского интерфейса. Он помогает увеличить вероятность успеха вашего интерфейса и внедрить передовые методы дизайна.
Имеется несколько ключевых элементов дизайн процесса:
- Привлечение пользователей в каждый этап процесса проектирования. Таким образом, такой дизайн будет действительно ориентирован на пользователя и будет зависеть от потребностей пользователя.
- Проектирование должно быть итеративным. Гораздо проще сделать первый шаг к решению проблемы, а потом пробовать улучшать этот шаг, чем пытаться добиться совершенства с первого раза.
3 этапа процесса проектирования:
- Обычно проектирование начинается с исследования пользователя (User Research), для того чтобы понять проблемы и потребности пользователей.
- Далее вы придумываете какие-то идеи для решения этих проблем и прототипируете их. (Design and Prototyping)
- Вы проверяете ваши идеи и решения с пользователями. Обычно на этом этапе вы находите, что что-то идет не так как нужно. И приходится возвращаться на первый этап, чтобы опять попробовать понять проблемы и найти пути их решения. И как уже упоминалось выше, весь этот процесс итеративный. Вы проделываете эти шаги снова и снова.
Имеется 3 типа проблем проектирования пользовательского интерфейса:
I тип. Проектирование для неизвестной проблемы.
Итак представим, что вы хотите спроектировать интерфейс, чтобы помочь кому-то, вы хотите, чтобы ваш продукт был полезным, но вы не совсем уверены, какие проблемы нужно решить, чтобы помочь пользователю. Такая ситуация на самом деле является очень распространенной. Очень многие креативные решения очень успешны, не только потому что они хорошо решают проблему пользователя, но и потому что они хорошо определили самые важные проблемы для решения.
В такой ситуации ваша роль, как дизайнера найти правильную проблему для решения. Чтобы разобраться в этом попробуйте ответить на 4-е вопросы:
- Кто ваша целевая аудитория (target user)?
- С какими трудностями (challenges) они сталкиваются?
- Какие текущие стратегии (strategies)они используют, чтобы решить проблему?
- Какие ценности (values) имеются, которые они могут считать приемлемыми в качестве технологического подхода?
Эти вопросы кажутся сейчас абстрактными, но на примере будет понятнее, как их применять.
Пример: Технология восстановление от употребления психоактивных веществ.
Необходимо было помочь людям, кто пытается поддерживать восстановление от употребления психоактивных веществ:
- Это огромная проблема для многих людей по всему миру, и есть много способов приблизиться к ней.
- В долгосрочной перспективе как правило огромную роль играет сильная социальная поддержка таких людей.
- Для многих таких людей наиболее доступным и бесплатным способом является- найти группу единомышленников, с которыми они проходят 12-ступенчатую программу восстановления (вы наверное слышали о таком в фильмах и книгах, такие встречи как “Анонимные алкоголики” или “Анонимные наркоманы”).
Первым шагом было проводить много времени с людьми в восстановлении. Было проведено шестимесячное исследование, используя метод, известный как наблюдение за участниками (participatory observation.) В течении этого времени исследователь Lana Yarosh посетила 132 открытых 12-ступенчатых встреч, а так же 18 организационных сервисом встреч в группе и на региональном уровне. Просмотрела всевозможную литературу по имеющимся в настоящее время технологиям для восстановления, доски объявлений, информационные брошюры, сценарии встреч, которые использовались в программе восстановления. Этот период погружения действительно помог понять, кем является аудитория и какие проблемы у них имеются.
Чтобы узнать больше о трудностях и стратегиях, которые участники программы применяют чтобы решить свои проблемы, об их ценностях и просто об их жизни, дизайнер провела 12 глубоких интервью с людьми, которые уже много лет были участниками программы восстановления от наркотиков и алкоголя и поэтому им была очень знакома данная тема.
Каждый из участников интервью уже использовал какие-либо технологии для поддержки своего восстановления. Например, они уже могли иметь опыт поиска встреч онлайн, используя интернет или приложение. Они были участниками различных онлайн форумов по восстановлению. Они использовали приложения, которые следили за разными аспектами их восстановления, например на какое количество встреч они уже сходили.
Однако, одной из больших проблем для людей было обсуждать свои ценности жизни в целом. В нашей повседневной жизни мы не часто думаем на эту тему, пока что-то не начинает противоречить этим убеждениям. Чтобы участники могли легче отражать и четко обсуждать свои ценности, дизайнер предоставила им краткие эскизы из шести технологических идей, которые они могли бы критиковать.
Вот например два из них:
- Meeting Spot — это рейтинговый сайт, похожий на Yelp, где люди могут искать информацию о встречах по программе восстановления, в той области, где они живут, так же в приложении люди могут обсуждать и предоставлять информацию о встречах, на которые они идут.
- Recovery Tube — похожа на YouTube для историй людей об их восстановлении, приложение позволяет людям делиться своими историями с другими через анонимные видео с возможностью поиска видео по тегу и комментирования видео.
Участники исследования смогли подробно обсудить те особенности идей, которые они нашли привлекательными, и которые, казалось бы, были бы проблематичными или даже противоречили программе восстановления. Основываясь на этом процессе дизайнер смогла определить основные проблемы, которые ей необходимо было решить. Она начала понимать основные направления, какой дизайн должен быть и каким быть не должен для данного контекста. Она поняла о важности поддержания социального взаимодействия участников больше чем просто предоставлении информации. Она поняла, что целью анонимности в таких группах является не только защита приватной информации, но так же предоставления каждому участнику чувства равенства между друг другом. Она поняла, что личные встречи лицо-к-лицу в таких группах являются краеугольным камнем всей программы восстановления и такие встречи не могут быть заменены при помощи новых технологий.
Теперь дизайнер могла начать думать над различными потенциальными решениями проблем в рамках ограничений, установленных исследованием.
Это был один из примеров и такой подход действительно наиболее подходящий, когда вы ищете правильную проблему для решения. Единственная вещь, которую необходимо заметить — это те вопросы, которые не следует задавать при исследовании:
- Наивный вопрос прямо спрашивающий пользователя о том, какое решение он хочет видеть.
- Какую технологию он хочет видеть.
- Или спрашивать идеи, при решении этих проблем.
Обычно пользователи эксперты в жизни, но не эксперты в технологиях. Дизайнер является экспертом в технологиях и может представить, что возможно сделать в реальности. Вы можете не ожидать от пользователя ответов на эти вопросы, до тех пор, пока пользователи не являются действительно особенными экспертами. Вместо этого работайте со своими пользователями, чтобы получить информацию о трудностях, — в стратегиях решения проблем и ценностях.
2 тип. Проектирование для известной проблемы.
На этом примере будет описан кейс, когда дизайнер уже знает проблему, которую пытается решить и основное направление, куда бы он хотел, чтобы решение привело. Но дизайнер не знает как именно будет выглядеть решение проблемы.
В такой ситуации вашей основной работой будет найти правильное решение, учитывая, что уже определили правильную проблему для решения.
Итак, когда вы нашли конкретную проблему, ответьте себе на три следующих вопроса, которые помогут вам найти правильное решение:
- Какие основные проблемы, должно решить мое решение?
К примеру, когда пользователь пытается достичь своей цели и испытывает трудности в этом.
2. Какие альтернативные решения проблемы доступны для решения этой задачи?
Важно на этом этапе рассмотреть совершенно различные решения одной и той же проблемы. Потому нельзя принимать решение слишком рано — есть вероятность, что вы упустите какие-то другие жизнеспособные и умные решения.
3. Каковы ограничения, на которые должно опираться решение?
К примеру, если вы работаете в компании над приложением для iPhone, то ваше приложение должно работать с “песочницей” (sandbox), которую Apple требует от своих разработчиков.
Пример: Поддержание контакта Родитель-Ребенок в разделенных семьях.
- В результате многих факторов, прежде всего разводов, около 30% детей в США живут не с обоими родителями. Фактически значительная часть детей живет в другом городе от одного из своих родителей. И даже целые семьи могут переживать опыт разделения в семье по таким причинам как работа, путешествия, госпитализация и другое.
- Постоянный контакт между родителями и детьми действительно важен для обеих сторон как для родителя, так и для ребенка, но обычно это нелегко. Поэтому дизайнер в этом кейсе работал с разведенными и разлученными из-за работы семьями, чтобы узнать, почему контакт на расстоянии является тяжелым для них.
В ходе исследования дизайнер определил, что основным способом, чтобы оставаться на связи до сих пор остается телефон, но родители и дети, похоже, не любили этот вид связи. Было очень тяжело для родителей вовлекать и заинтересовать ребенка в разговоре по телефону, и в свою очередь это было очень сложно и для маленьких детей, потому что они еще не развили коммуникационные способности, чтобы понять более тонкие сигналы языка, такие как ирония, юмор или фантазия. При персональном разговоре им действительно помогают эти визуальные сигналы, которые они видят на лице человека, но по телефону все труднее.
Видео звонок, возможно один из путей решения этой проблемы, но и он был слишком сложен для детей. Дети не могли обойтись без помощи взрослого и самостоятельно настраивать видео звонок. Так что все сводилось к тому, что взрослые сами договаривались между собой о дате и времени следующего звонка, поэтому такие звонки очень редко были инициативой самих детей. В конце концов и простой телефонный звонок и видео звонок сводились к одной и той же проблеме. Сидеть и беседовать не является натуральным способом завязывания тесных отношений с ребенком. Большинство родителей и их дети получают наибольшее удовлетворение от общения, когда они что-то делают совместно и не важно, что это — приготовление еды или помощь с домашней работой.
Опираясь на эти особенности общения детей со своими родителями, дизайнер смогла более лучше понять требования к системе, которая бы помогла поддерживать отношения Родитель — Ребенок:
- Такая система должна была предлагать визуальные каналы для коммуникации.
- Она должна была быть простой в использовании как обычный телефон
- Давала возможность детям пользоваться ею без помощи взрослого и более того, проявлять инициативу для выхода на связь.
- И последнее, такая система не должна была быть направлена исключительно на разговоры, а также могла поддерживать совместные виды деятельности.
*Прошу читателей понять, что данное решение в нынешнее время уже выглядит странно и старо.
В целом, идея заключалась в том, чтобы как-то совместить видео звонок и что-то на подобии смарт борда или прожектора, который бы выводил информацию на поверхность стола. Итак идея есть, в принципе дизайнер мог бы на этом остановиться и начать реализовывать этот проект. Но в целом, дизайнер понимал, что слишком рано приступать к реализации и нужно взять время для других идей и решений. Так же такое решение не учитывало одну из важных проблем- легкости для ребенка “самому включить и выключить разговор, самому инициировать встречу”.
Поэтому следующим шагом было действительно найти альтернативные варианты, которые могли решить все проблемы пользователя.
На данном этапе работы наброски являются действительно мощным инструментом для объяснения своих идей и исследования всех возможностей. Так же наброски помогут вам показать свои идеи команде и побудить людей на обсуждение и обратную связь.
На нашем примере, не было никаких входных данных, что обязательным условием должно быть присутствие смарт борда, просто было понятно, что нужна какая-либо горизонтальная плоскость, так как большинство активностей детей обычно проводится за столом, нежели у стены. Но хотелось так же рассмотреть и другие альтернативы, например, а что если выводить изображение при помощи проектора на пол или на стены. Или к примеру что-то попроще, встроить в девайс ребенка (который у него уже имеется) видеокамеру и проектор. И этот девайс уже будет выводить изображение на стол. Или к примеру это может быть уже готовый мини-офис или стол, в который уже встроены все необходимое. И ребенку лишь остается, ничего не устанавливая, просто пользоваться системой.
В дополнение команда так же думала, как вообще включать и выключать систему? В самом начале, они хотели не делать обычное меню или кнопку включения, а использовать какой-то физический подход, так как детям это будет более понятно. Поэтому были предложены идеи каких-то дверц, которые бы включали систему при их открытии и выключали при закрытии. Или они предполагали сделать какие-то ролл-ап занавески, как на окнах, которые так же можно открывать и закрывать. Или придумать какой-либо рычаг при нажатии на который начинался бы звонок к родителю.
Итак некоторые набросанные идеи были несколько сложными в реализации, поэтому команда сфокусировалась на тех идеях которые соответствовали необходимым ограничениям.
Определение ограничений:
- Одна из сложностей была в том, что проектор, который уже имелся, был слишком большим и требовал для работы некоторого расстояния до поверхности стола, на который необходимо было выводить изображение. Поэтому идея проектора, как настольной лампы, не работала.
- Система должна была быть прочной, и должна была быть уверенность, что если дети будут пользоваться ею каждый день, она не сломается. (Если вы когда нибудь делали что-то с детьми, вам будет понятен этот пункт)
- Необходимо было, чтобы система могла помочь в работе пользователя над тремя ключевыми задачами: помощь в домашней работе, совместное чтение и игры.
Основываясь на этих ограничениях, выбрали вариант, который действительно соответствовал потребностям наших пользователей, оставаясь при этом тем, что действительно можно воплотить в жизнь. В итоге получилась система, которую назвали “общий стол” (share table). И ребенок и родитель должны были иметь стол у себя дома, и чтобы осуществить звонок нужно было просто открыть дверцы шкафчика, а чтобы завершить звонок — закрыть. Все было очень просто, как обычный звонок по телефону. При этом каждая система была оснащена монитором, колонками, веб камерой и микрофоном. Так же был прикреплен специальный проектор, который передавал изображение с поверхности одного стола, на поверхность другого.
Если рассмотреть идею от первого наброска, до реализации системы в жизнь, заметно как идея развивалась и видоизменялась. Но окончательная система уделила больше внимания той идее “простого использования”, включив физическую метафору кабины и дверей. Когда система была опробована детьми, было с самого начала видно, что им было очень легко понять процесс общения и число инициативных звонков со стороны самих детей, без вмешательства взрослых очень возросло.
Кроме того, если рассматривать первые наброски и финальную систему, команда прошла большой путь и переосмыслила например идею проектора под столом к проектору сверху него. Такое решение в итоге помогло поддержать многие взаимодействия между ребенком и родителем, например, возможность писать поверх листа ребенка или играть в настольные игры и при этом отображать физические фигурки родителя поверх игральной доски ребенка.
В итоге, смысл в том, что, если вы изначально уделите время и ответите сами себе на вопросы (которые упомянуты выше в статье) в процессе проектирования, как только вы начнете обдумывать дизайнерские решения, сверяясь с ответами на вопросы, вы придумаете лучшие решения.
3 тип. Проектирование итераций или улучшений уже существующей системы.
В качестве примера будет использоваться case study старого веб сайта по рекомендации фильмов MovieLens от University of Minnesota.
История сервиса
MovieLens был запущен в 1997 году, и если быть честными, его запуск не был большим достижением в дизайне пользовательского интерфейса. Этот сервис был один из ранних по рекомендации фильмов и его интерфейс был почти на 100% украден с другого аналогичного сервиса, который был закрыт. Так как дизайн сайта был очень плохим, сразу же спустя месяц после запуска дизайнеры начали думать о новом дизайне.
Цели и пользователи
Для того, чтобы иметь представление о данном сервисе, вам нужно немного узнать о его целях и пользователях. MovieLens имеет очень странный набор гибридных целей. Это сервис по рекомендации фильмов, людям, которые описывают что им нравится или не нравится, оценивая их от нуля до пяти звезд. Но так же он существует прежде всего для создания исследовательской системы, с которой University of Minnesota может экспериментировать с этими пользователями с их согласия. И изучать новые способы выполнения рекомендаций, более хорошие способы делать прогнозы. Поэтому основная цель — это цель исследовательской системы, которая хочет сохранить своих пользователей. Людям понравилась идея быть частью экспериментальной системы. И когда университет проводил изучения, проводя фокус группы и через комментарии сайта, понравилась некоммерческая деятельность сайта. Сервис не пытается им что-то продать или дать ссылки на покупку чего-то. Фактически, они могут доверять сервису, так как он пытается сделать все наилучшее для пользователя. Итак в этом кейсе будет показана сложная задача перехода от третьей версии MovieLens к четвертой.
В самом верху сайта MovieLens идет немного информации о том, чья это учетная запись и сколько фильмов пользователь оценил. В данном случае пользователь оценил 61 фильм, и он является 56-ым посетителем сайта за последний час. Далее идет немного информации о рейтингах фильмов, от самых ужасных, до необходимых к просмотру. Далее идет центральная часть с информацией о новых фильмах. Так же имеется информация о фильмах, которые недавно были выпущены на DVD, вопросы и ответы, новости и обновления. И основной идеей сайта было то, что он был спроектирован так, чтобы быть персональным для каждого пользователя. Например, пользователь любит смотреть какой-то список фильмов, так что система выдает ему другой список фильмов, которые он еще не смотрел, но которые вероятно будут ему интересны. Данная версия сайта работала без каких-либо изменений на протяжении 10 лет.
Итак что же случилось? Почему пришлось производить обновления?
- Сайт устарел — команда стала слышать от пользователей, что сайт устарел, так оно и было.
- Многие функции сайта не использовались — команда заметила по статистике сайта, что многие функции просто не использовались. Они были разработаны с хорошими намерениями, но никто не кликал на них или ими пользовались очень редко. Поэтому большая область экрана использовалась для вещей, которая совершенно не имела смысла.
- Было сложно проводить исследования по рекомендациям, потому что дизайн не приводил пользователей к отделу с рекомендациями. Таким образом, главной целью было выводить рекомендации по фильмам на первый экран, а не только новинки фильмов. Нужно было мотивировать людей писать больше рекомендаций, так как исследования показали, что пользователи в основном приходили на сайт из-за этой информации.
- Для новых пользователей сайт был очень сложным. Если посмотреть на него с первого взгляда бросается в глаза чересчур много информации и ссылок на ненужные вещи, при этом главная составляющая сайта — поиск, был глубоко спрятан.
Так же команда дала пользователю объяснения в правом верхнем углу экрана, что означает 5 звезд, а что 1 звезда, при оценивании фильма. Потому что считала, что пользователя нужно обучить этому (это был 1997 год), но на самом деле такие вещи были сразу понятны пользователю. А те главные функции сайта, что требовали объяснений, наоборот, не были разъяснены корректно. Все перечисленные моменты были причиной для редизайна.
Так же была еще одна причина, которая совершенно не связана с дизайном сайта — это переделка back end системы сайта. И так как дело пошло по переделке всей системы, команда решила убрать весь функционал сайта, что был не нужен и мешал.
Процесс перехода от версии MLens3 на новую версию MLens4
- Команда решила выбрать двухстороннюю стратегию (two-track strategy):
И продолжила работу старого сайта MLens3, и параллельно разработала и создала новую версию MLens4 и применила ее для волонтеров сайта. Это была мягкая стратегия обновления (soft upgrade strategy), на период около одного года пользователи могли получить предварительный просмотр нового дизайна сайта. И далее они могли выбирать перейти на новый дизайн сайта, если захотели бы, но при изначальном входе на сайт по умолчанию была применена старая версия.
Со временем команда сделала новый сайт по умолчанию, но пользователи, кто хотели использовать старый дизайн, все еще могли выбрать и использовать его. И далее, было по плану достигнуть точки, когда наконец можно было выводить из эксплуатации MLens 3, потому что поддерживать его больше не имело смысла.
2. Другой большой шаг, который они сделали, состоял в том, что они сознательно сократили функциональность сайта.
Те функции, которые не использовали пользователи были удалены, как для экономии рабочей силы команды, так и для упрощения интерфейса. По плану так же была идея, что в будущем есть возможность расти по функциональности сайта, поэтому команда хотела освободить место в системе меню, а так же показать пользователям наличием этого свободного места, что новый функционал вскоре появится на сайте.
Наконец, команда решила полностью уделить внимание процессу отзывов пользователей, что было справедливо в плане сокращения функциональности.
Если вы войдете в систему, то увидите плитку из фильмов, это не просто список с названиями фильмов, а визуальные изображения. Первым блоком идет “Топ выбранных фильмов” для данного конкретного пользователя. При нажатии на фильм есть возможность посмотреть трейлер к фильму:
Это один из новых функционалов сайта, который очень понравился пользователям. Ниже трейлера идет много информации о фильме и более чистое расположение элементов и блоков (the layout).
Но самое главное, что на каждом фильме, есть теперь куча разных тэгов категорий, которые помогают поделить и категоризировать все фильмы. Если пользователь оценивает какие-либо фильмы, то система делает подборку фильмов, которые могут понравиться пользователю в будущем.
Так же появилась возможность просматривать список фильмов, которые пользователь оценил ранее. И сортировать эти фильмы по дате просмотра, популярности у других пользователей и другим критериям.
Итак основная идея, почему были приведены вышеуказанные страницы, это то, что у сервиса были определенные ненужные функции, команда дизайнеров их убрала и заменила новыми и более нужными функциями. В итоге получился вот такой процесс:
Исследование пользователей (User Research)
- это самый существенный этап в любом процессе дизайна пользовательского интерфейса. Старый сайт был в использовании около 10 лет, поэтому команда дизайнеров в основном сосредоточила свое внимание на комментариях и обсуждениях уже существующих пользователей. А так же существенные инвестиции команда вложила ранее на приглашение пользователей в UX лаборатории и изучению их поведения.
- использование двусторонней стратегии для того, чтобы упростить получение обратной связи от пользователей, запустив общедоступную бета-версию сайта. И дальнейшее изучение отзывов пользователей о новой и старой версии, особенно большое внимание команда уделяла тем пользователям, кто никак не мог переключиться на новый сайт, и основными из причин было: что они пользовались редкими функциями старой версии, или они просто считали, что старый дизайн более комфортный и привычный.
Дизайн комбинации (Design Shortcuts)
- за основу визуального дизайна были взяты современные стандарты интерфейсов для подобных систем. Идея была в том, что команда дизайна нуждалась в визуальном оформлении интерфейса, который основывался на трех вещах. И это комментарии, которые писали пользователи. Пользователи не хотели взаимодействовать просто с текстовыми блоками в интерфейсе. Признание командой того, что в настоящее время существует много других сайтов, которые используют подобный интерфейс. И стандартизация — хороший способ помочь людям перенести то, что они узнали из одного взаимодействия в другое.
Оценка интерфейса ( Evaluation)
- оценка интерфейса в основном сосредоточилась на бета-тесте. Приглашении людей для опробования новой системы, команда хотела узнать что они думают о ней, посмотреть, что люди на самом деле будут использовать на сайте, а что нет.
Это была 2 неделя моего #200daysofUXChallenge.
Если вам понравилась статья, прошу вас не забываем клапсать 👏. Вы можете клапсануть до 50 РАЗ 😍, вам ничего не стоит, а мне приятно!
В следующей статье
Вы увидите вторую часть 2-ой недели курса от университета Миннесоты о процессах в дизайне (UI Design Process). Подписывайтесь, чтобы не пропустить выход новой статьи и если есть вопросы, пожалуйста пишите комментарии ниже 👇.
