Руководство по преодолению трудностей и преуспеванию на стажировке по UX-дизайну
Опубликовано: 2022-03-10Это история о моей стажировке по пользовательскому дизайну. Я не говорю, что ваша стажировка будет похожа на мою. На самом деле, если я могу сказать что-то одно, чтобы сформировать ваши ожидания, то это будет так: будьте готовы отложить их все в сторону. Прежде всего, не забывайте давать себе пространство и время для обучения . Я делюсь своей историей как напоминание о том, как много я боролся и как хорошо все прошло, несмотря на мои трудности, так что я никогда не перестану пытаться, и вы тоже.
Все началось в мае 2018 года, когда я вышел из самолета в Гранаде, Испания, с багажом на боку, ноутбуком за спиной и очень ржавым испанским в голове. Это был мой первый визит в Европу, и я проведу здесь следующие три месяца, проходя стажировку по дизайну UX в Badger Maps. Я все еще был довольно новичком в UX, изучая его всего лишь год назад, но я чувствовал себя готовым и жаждущим получить опыт в профессиональной среде.
Следите за тем, как я научился применять технические знания для выполнения поставленных передо мной практических задач проектирования:
- Создайте дизайн-систему для нашего iOS-приложения с помощью Sketch;
- Разработайте новую функцию, которая будет отображать ошибки, возникающие при импорте данных;
- Изучите основы HTML, CSS и Flexbox для реализации моего дизайна;
- Создавайте анимацию с помощью Adobe Illustrator и After Effects.
Эта статья предназначена для начинающих, таких как я . Если вы новичок в UX-дизайне и хотите изучить эту область — читайте дальше, чтобы узнать, подходит ли вам стажировка по UX-дизайну! Для меня работа, которую я закончил, превзошла все мои ожидания. Я узнал, как создать дизайн-систему, как скомпрометировать дизайн с потребностями пользователей, как сложно реализовать новый дизайн и как создавать «моменты удовольствия». Каждый день на стажировке преподносил что-то новое и непредсказуемое. В конце стажировки я понял, что создал что-то реальное, что-то осязаемое, и все, с чем я боролся, вдруг встало на свои места.
Рекомендуемая литература : Как пройти первоклассную стажировку по графическому дизайну
Глава 1: Лего
Моей первой задачей было создать дизайн-систему для нашего существующего iOS-приложения. В прошлом я создавал дизайн-системы для своих собственных проектов и приложений, но я никогда не делал их задним числом и никогда для дизайна, который не был моим собственным. Чтобы выполнить задание, мне нужно было перепроектировать макеты в Sketch; Сначала мне нужно обновить и оптимизировать файл, чтобы создать дизайн-систему.
Именно в этот подходящий момент я узнал, что программа Sketch на моем компьютере устарела примерно на полтора года. Я не знал ни о каких символах, переопределениях и других функциях в более новых версиях. Усвоенный урок: обновляйте свое программное обеспечение.
Прежде чем беспокоиться о странице символов, я просмотрел монтажную область макетов за монтажной областью, убедившись, что они обновлены и соответствуют текущей выпущенной версии приложения. Как только это было сделано, я начал создавать символы и переопределения для различных элементов. Я начал с верхнего и нижнего колонтитула и пошел дальше.
Как правило, если элемент появляется более чем на одной странице, я делаю его символом. Я добавлял различные значки в дизайн-систему по ходу работы, создавая библиотеку. Однако быстро стало ясно, что дизайн-система развивается и меняется быстрее, чем я пытаюсь ее организовать. На полпути я перестал пытаться упорядочить символы, вместо этого решив вернуться и реорганизовать их после того, как я закончил воссоздавать каждую страницу. Когда я перестал переключаться между мокапами и символами и беспокоиться об их организации, я мог работать более эффективно.
Было легко оценить переопределения и символы в Sketch. Эти функции сделали программу намного более мощной, чем то, к чему я привык, и повысили удобство работы с файлом для будущих проектов. Задача создания самой дизайн-системы заставила меня глубоко погрузиться в программу, а также понять все детали дизайна нашего приложения . Я начал замечать небольшие несоответствия в интервалах, размере значков или размерах шрифта, которые мне удалось исправить во время работы.
Последним шагом было вернуться на страницу символов и все упорядочить. Я перебрал все символы, удалил неиспользуемые и любые реплики. Несмотря на то, что это было немного утомительно, это был очень ценный шаг в этом процессе . Просмотр символов после работы с документом дал мне возможность переоценить то, как я создал символы для каждой страницы. Группировка их вместе заставила меня задуматься о том, как они связаны между собой в приложении.
Пройдя этот мыслительный процесс, я понял, насколько сложно было создать систему именования. Мне нужно было создать систему, достаточно широкую, чтобы охватить достаточное количество элементов, достаточно конкретную, чтобы не быть расплывчатой, и которую мог бы легко понять другой дизайнер. Мне потребовалось несколько попыток, прежде чем я нашел работающую систему, которой я был доволен. В конце концов, я организовал элементы в соответствии с тем, где они используются в приложении , сгруппировав части, как списки. Это хорошо работало для такого приложения, как Badger, которое имело разный дизайн для разных функций в приложении. Конечным продуктом был более организованный файл, с которым было бы намного проще работать для любых будущих итераций дизайна.
В завершение этого проекта я экспериментировал с модернизацией дизайна. Я изменил дизайн заголовков во всем приложении, вдохновившись нативными приложениями Apple. К счастью, команда также была в восторге от этого и рассматривает возможность внесения изменений в будущие обновления приложения.
В целом, проработка файла Sketch до такой степени оказалась неожиданно полезной. Я ушел с гораздо более глубоким пониманием таких вещей, как размер шрифта, цвет и интервалы, благодаря переделке каждой страницы. Упражнение по копированию существующего дизайна требовало мельчайшего внимания к деталям, что было очень приятно. Это было похоже на сборку модели Lego: у меня были все детали, и я знал, как должен выглядеть конечный продукт. Мне просто нужно было все организовать и собрать воедино, чтобы создать готовый продукт. Это одна из причин, почему мне нравится заниматься UX-дизайном. Речь идет о решении проблем и сборе головоломки, чтобы создать что-то, что каждый может оценить.
Глава 2: Дизайн
Следующая часть моей стажировки позволила мне заняться дизайном. Задача: разработать новую страницу импорта для веб-приложения Badger.
Команда работала над модернизацией интеграции Badger с CRM, чтобы создать систему, позволяющую пользователям просматривать любые синхронизации данных и самостоятельно управлять своими учетными записями. Текущее соединение включает в себя большую практическую работу со стороны CSA и AE барсуков для настройки и обслуживания. Предоставляя пользователям интерфейс для прямого взаимодействия с импортом данных , мы хотели улучшить пользовательский интерфейс для нашей интеграции с CRM.
Моя цель состояла в том, чтобы разработать страницу, которая отображала бы ошибки, возникающие при импорте любых данных, а также сообщала пользователям, как и где внести необходимые изменения в свои данные. Если было больше ошибок, связанных с одним импортом, или пользователи хотели бы просмотреть все ошибки сразу, они должны иметь возможность загрузить файл Excel со всей этой информацией.
Цели
- Создайте страницу импорта, которая информирует пользователя о статусе импорта в процессе;
- Предоставьте исторический отчет о синхронизации учетных записей между Badger и CRM с подробными сведениями об ошибках, связанных с каждым импортом;
- Предоставьте ссылки на CRM для каждой учетной записи, которая имеет ошибку импорта в Badger;
- Разрешить пользователям загружать файл Excel со всеми нерешенными ошибками.
Истории пользователей
Клиент Badger с учетной записью CRM :
Как клиент с CRM, я хочу иметь возможность подключить свою CRM к моему барсуку и визуализировать все синхронизации данных, чтобы я знал обо всех ошибках в процессе и мог вносить изменения по мере необходимости.
Барсук :
Как барсук, я хочу, чтобы пользователи могли управлять и просматривать статус своей интеграции с CRM, чтобы я мог сэкономить время и ручную работу, помогая пользователям и устраняя неполадки, синхронизирующие их барсука с их учетными записями CRM.
Прежде чем я действительно углубился в дизайн, нам нужно было немного подумать, чтобы решить, какую информацию отображать и как:
- Массовый и непрерывный импорт
В зависимости от типа пользователя существует два способа импорта данных в Badger. Если бы это было сделано с помощью электронных таблиц, импорт был бы пакетным, и мы могли бы визуализировать импорт в группах. Однако пользователи, интегрированные со своими CRM, должны будут постоянно обновлять свои данные Badger по мере внесения изменений в свою CRM. Дизайн должен быть в состоянии справиться с обоими вариантами использования. - Импорт записей
Поскольку это была новая функция, мы не были абсолютно уверены в поведении пользователей. Таким образом, решить, как организовать информацию, было непросто. Должны ли мы позволять пользователям использовать бесконечную прокрутку в списке своей истории? Как они будут искать конкретный импорт? Должны ли они быть в состоянии? Должны ли мы показывать активность день за днем или месяц за месяцем?
В конечном счете, мы смогли сделать только одно предположение по каждой из этих проблем, зная, что сможем внести соответствующие коррективы в будущем, как только пользователи начнут использовать эту функцию. Обдумав эти вопросы, я перешел к вайрфреймингу. У меня была возможность спроектировать что-то совершенно другое, и это было одновременно и освобождающе, и сложно. Окончательный дизайн стал кульминацией отдельных элементов из различных дизайнов, которые были созданы в процессе.
Процесс проектирования
Самым сложным в этом процессе было научиться начинать сначала. В конце концов я понял, что вставлять что-то в мой дизайн исключительно из эстетических соображений было не идеально. Понимание этого и отказ от своих идей было ключом к созданию лучшего дизайна. Мне нужно было научиться начинать снова и снова, чтобы исследовать разные идеи.
Проблемы
1. Использование пустого пространства
С самого начала мне нужно было изучить, какую информацию мы хотим отобразить на странице. Было много деталей, которые мы могли бы включить — и определенно место для этого.
Вся ненужная информация добавляла слишком много когнитивной нагрузки и отвлекала от того, что на самом деле беспокоило пользователя. Вместо того, чтобы пытаться избавиться от всего белого пространства, мне нужно было работать с ним. Имея это в виду, я в конечном итоге выбросил всю нерелевантную информацию, чтобы показать только то, что, как мы ожидаем, больше всего беспокоит наших пользователей: ошибки, связанные с импортом данных.
Это был окончательный вариант:
2. Навигация
Следующей проблемой был выбор между боковой панелью и заголовком для отображения информации. Преимущество боковой панели заключалось в том, что информация будет постоянно видна при прокрутке пользователем. Но мы также должны были убедиться, что информация, содержащаяся на боковой панели, логически связана с тем, что происходит на остальной части страницы.
Преимущество заголовка заключалось в чистом дизайне с одной колонкой. Недостатком было то, что он занимал много места по вертикали в зависимости от того, сколько информации содержалось в заголовке. Он также визуально отдавал предпочтение содержимому заголовка над тем, что было под ним для пользователя.
Как только я понял, какую информацию и где отображать, навигация на боковой панели стала более логичным решением. Мы ожидаем, что пользователи будут в первую очередь обеспокоены ошибками, связанными с их импортом, и с большим заголовком, слишком большая часть этой информации окажется ниже сгиба. Затем боковая панель может быть контейнером для сводки импорта и активности, которая будет видна пользователю при прокрутке.
Дизайн боковой панели . После того, как я решил создать боковую панель, нужно было решить, какую информацию включать и как ее отображать.
Я изо всех сил пытался создать дизайн, который был бы визуально интересным, потому что было мало информации для показа. По этой причине я снова обнаружил, что добавляю ненужные элементы, чтобы заполнить пространство, хотя я хотел отдать приоритет пользователю. Я экспериментировал с разным содержанием и цветовыми сочетаниями , пытаясь найти компромисс между дизайном и юзабилити. Чем больше я работал с ним, тем больше мне удавалось разобрать дизайн до голых костей. Стало проще отличать полезную информацию от филлеров. Конечный продукт представляет собой оптимизированный дизайн с несколькими сводными статистическими данными. Он также предлагает большую гибкость для включения дополнительной информации в будущем.
Процесс импорта: страница хода импорта была создана после окончательной доработки дизайна страницы импорта. Самой большой проблемой дизайна здесь было решить, как отображать текущую синхронизацию импорта. Я пробовал разные решения из всплывающих окон и наложений, но в конечном итоге остановился на отображении прогресса на боковой панели. Таким образом, пользователи по-прежнему могут устранять любые ошибки и просматривать историческую запись данных своей учетной записи во время импорта. Чтобы предотвратить прерывание импорта, кнопки «Синхронизировать данные» и «Вернуться к Badger» отключены, поэтому пользователи не могут покинуть страницу.
Закончив с дизайном, я перешел к HTML и CSS.
Глава 3: HTML/CSS
Этот проект был моим первым опытом работы с любым типом кодирования. Хотя я пытался изучать HTML и CSS раньше, я так и не достиг какого-либо уровня мастерства. И что может быть лучше, чем начать с макета собственного дизайна?
Понимание логики организации документа HTML напомнило мне организацию документа Sketch с помощью символов и переопределений. Однако на этом сходство закончилось. Кодирование казалось чем-то очень чуждым, что я постоянно пытался уложить в голове. Как сказал бы мой наставник: « В программировании вы напрягаете совсем другие мускулы, чем в дизайне ». Теперь, когда конечный продукт у меня в руках, я полностью убежден, что обучение программированию — это самое крутое, чему я научился с тех пор, как приучил себя к горшку.
Первой задачей после настройки документа и понимания основ стала работа с Flexbox. Дизайн, который я создал, включал две колонки, расположенные рядом. Правая часть должна была прокручиваться, а левая оставалась неподвижной. Flexbox казался чистым решением для этой цели, если я мог заставить его работать.
Внедрение Flexbox состояло из множества проб и ошибок, а также слепого копирования кода, в то время как я карабкался по различным веб-сайтам, читая учебные пособия и проверяя код. Под руководством моего наставника на протяжении всего этого процесса мы в конечном итоге заставили его работать. Я никогда не забуду тот момент, когда я, наконец, понял, что с помощью flex-direction: column я соберу все элементы в один столбец, а flex-direction: row помог разместить их в одну строку.
Теперь это имеет такой большой смысл, хотя мое первоначальное понимание этого было прямо противоположным (я думал, что flex-direction: column будет размещать элементы в столбцах рядом друг с другом). Удивительно, но я даже не пришел к этому пониманию, пока код не заработал. Я просматривал свой код и понял, что совсем его не понимаю. Что подсказало мне? В моем CSS я закодировал flex-direction: row в класс, который назвал column . Этот сценарий был довольно показательным для моего первого опыта кодирования. Моя ментальная модель редко согласовывалась с логикой кода, они часто конфликтовали и расходились. Когда это произошло, мне пришлось вернуться, найти свои заблуждения и исправить код.
После настройки Flexbox мне нужно было выяснить, как заставить левый столбец оставаться фиксированным, пока правая часть прокручивается. Оказывается, этого нельзя было добиться с помощью одной строки кода, как я надеялся. Но работа над этим помогла мне понять отношения между родителями и детьми, которые очень помогли мне в остальной части процесса.
Кодирование вертикальной временной шкалы и циферблата также было процессом. График оказался проще, чем я изначально предполагал. Мне удалось создать тонкий прямоугольник, установить для него внутреннюю тень и градиентную заливку, а также назначить ширину каждого журнала активности.
Циферблат оказался сложным. Я пытался реализовать его с помощью чистого CSS, но без особого успеха. Было несколько раз, когда я думал изменить дизайн на что-то более простое (например, индикатор выполнения), но я очень рад, что остался с ним.
Основная проблема заключалась в том, чтобы выйти за пределы шкалы прогресса, чтобы перекрыть фоновый круг вдоль границы. Здесь я немного изменил дизайн — вместо того, чтобы вырезать незагруженную часть шкалы прогресса, она перекрывает все вокруг. Это был компромисс между моим дизайном и кодом, на который я изначально не хотел идти. Однако, как оказалось, я был доволен окончательным результатом, и как только я это понял, я был счастлив пойти на этот компромисс. Окончательный циферблат был реализован с помощью JavaScript.
В моем процессе написания кода был момент, когда я бросал каждую строку кода, который когда-либо писал, в каждый класс, чтобы попытаться заставить его работать. Чтобы компенсировать это отсутствие ретроспективного взгляда, мне пришлось потратить довольно много времени на просмотр и проверку всех элементов, чтобы удалить бесполезный код . Я чувствовал себя арендодателем, выгоняющим жильцов, которые не платят арендную плату. Это был определенно урок, полученный в поддержании уровня домашнего хозяйства и в том, чтобы быть рассудительным и вдумчивым с кодом.
Большая часть опыта была похожа на слепое прохождение и ретроспективное обучение. Тем не менее, нет ничего более приятного, чем увидеть готовый продукт. Прохождение процесса заставило меня взаимодействовать со своей работой так, как я никогда раньше не делал, и дало мне представление о том, как реализуется дизайн. Во всех моих ожиданиях от стажировки я никогда не предполагал, что смогу кодировать и создавать один из своих собственных дизайнов. Даже после того, как мне сказали, что я смогу это сделать в первый же день, я не поверил в это, пока не увидел, что эта страница завершена.
Глава 4: Работа с барсуками
В рамках процесса интеграции пользователей Badger с их учетными записями CRM нам нужно было, чтобы наши пользователи вошли в свою CRM, что требовало от нас перенаправления их из badger на собственный веб-сайт CRM. Чтобы предотвратить внезапное резкое переключение с одного веб-сайта на другой, мне нужно было спроектировать страницы с промежуточной загрузкой.
Я начал с вашей заурядной статической страницы перенаправления. Они были простыми и определенно выполняли свою задачу, но мы не были ими полностью довольны.
Задача состояла в том, чтобы создать что-то простое и интересное, которое информировало бы пользователя о том, что он покидает наш веб-сайт, всего за несколько секунд, что он был бы виден. Дизайн должен представиться, объяснить, почему он здесь, и уйти до того, как кто-нибудь устанет на него смотреть. По сути, это было упражнение в скоростных свиданиях. Имея это в виду, я решил попробовать анимацию — в частности, дерзкого маленького барсука, вдохновленного существующим логотипом.
Используя логотип барсука в качестве отправной точки, я создал различных персонажей барсука в Adobe Illustrator. Оригинальный логотип показался мне слишком строгим для анимации загрузки, поэтому я выбрал что-то более симпатичное. Я сохранил красную грудь и черты лица из оригинального логотипа для согласованности и работал над созданием тела и головы вокруг этих элементов. Голове и полосам потребовалось некоторое время, чтобы массировать формы, которыми я был доволен. Тело приняло форму чуть легче, но потребовалось чуть больше времени, чтобы найти правильную пропорцию между размерами головы и туловища. Как только я понял это, я был готов перейти к анимации.
Моим первым побуждением было попробовать покадровую анимацию. Я полагал, что это будет здорово — а-ля Уоллес и Громит. Но после первой попытки, затем второй и всех последующих стало ясно, что просмотр этого шоу в детстве не дал мне в полной мере навыков, необходимых для покадровой анимации.
Я просто не смог добиться желаемой плавности, и были небольшие несоответствия, которые казались слишком резкими для очень короткой анимации загрузки. Анимация обычно работает со скоростью 23 кадра в секунду, а моя анимация с барсуком имела только около 15 кадров в секунду. Я думал добавить больше кадров, но по предложению моего наставника решил вместо этого попробовать анимацию персонажей.
Это был первый раз, когда я анимировал что-либо, состоящее из более чем 5 движущихся частей, и определенно нужно было научиться понимать, как анимировать двухмерного персонажа визуально удовлетворительным способом. Мне нужно было анимировать отдельные элементы, чтобы они двигались сами по себе, независимо от целого, чтобы сделать движение правдоподобным. По мере работы над анимацией импортированные слои становились все более детализированными. Когда я изучил поведение программы и то, как заставить барсука двигаться, голова превратилась из одного слоя в пять.
Я привязал каждую конечность тела и установил каждую часть тела как дочернюю для родительского слоя тела. Я соответствующим образом установил опорные точки в верхней части бедер и плеч, чтобы убедиться, что они двигаются правильно, а затем, используя вращения и замедление, смоделировал движение частей тела. Голова была немного сложной и требовала некоторого вертикального движения независимо от тела. Чтобы прыжок казался более реалистичным, я хотел, чтобы голова немного висела в пространстве перед тем, как остальная часть тела подтолкнет ее вверх, и опускалась чуть позже остальных частей тела. Я также отрегулировал угол, который я пытался сделать, чтобы он выглядел так, как будто он ведет носом, направленным вверх во время прыжка и прямолинейным во время бега.
Анимация на странице, перенаправляющая пользователя обратно к барсуку, изображала барсука, бегущего обратно к барсуку с рюкзаком, полным информации из CRM.
И наконец: растерянный барсук. Это было сделано для последней страницы, которую мне нужно было создать: страницы ошибок, уведомляющей пользователя о неожиданных сложностях в процессе интеграции. И что может быть лучше, чем сочувствующий, растерянный барсук?
Сложная часть здесь заключалась в том, чтобы объединить боковой профиль существующего мультяшного барсука и логотип, чтобы создать форму головы, обращенную вперед. До начала этого проекта я ни разу не видел настоящего живого барсука. Излишне говорить, что в этом месяце Badger попал в мои поиски изображений в Google. Я был удивлен, увидев, насколько на самом деле плоская голова барсука. В своих первых проектах я пытался повторить это, но не был удовлетворен результатом. Я еще немного поработал с формой, подкорректировав расположение носа, полосок и ушей, чтобы получить окончательный результат:
Этот анимационный процесс заставил меня поднять мои ранее существовавшие знания на более высокий уровень. Мне нужно было выйти за пределы того, что я знал , а не ограничивать себя тем, что, как мне казалось, я мог сделать. Изначально я начал с покадровой анимации, потому что не доверял себе делать анимацию персонажей. Дав себе возможность попробовать что-то новое и необычное, я смог добиться того, что превзошло мои собственные ожидания.
Заключение
Три месяца, которые я провел на стажировке, были невероятно приятными. Каждый день я учился и пробовал что-то новое. Во всем, что я делал, возникали трудности — даже с задачами, с которыми я был более знаком, например с дизайном. Каждый раз, когда я что-то создавал, я чувствовал себя очень неуверенно и опасался, как это будет воспринято. Было много неуверенности в себе и много отвергнутых идей.
По этой причине было невероятно быть частью команды и иметь наставника, который ведет меня в правильном направлении. Когда мне говорили попробовать что-то еще, это часто было единственным стимулом, в котором я нуждался, чтобы попробовать что-то еще и достичь чего-то большего и лучшего. Мне нравится представлять себя грызуном в игре «Ударь крота», которого снова и снова бьют по голове, но который всегда выскакивает снова и снова. Теперь борьба и испытания подошли к концу, я только хочу сделать это снова и снова.
Я ценю то, чему я научился, и то, как меня подтолкнули выйти за рамки того, что я думал, что могу сделать. Безумно видеть, как далеко я продвинулся за несколько месяцев. Мое понимание того, что такое UX-дизайнер, значительно выросло: от определения функций до разработки дизайна, а затем написания внешнего кода для его реализации. Эта стажировка научила меня тому, как многому я еще должен научиться, и мотивировала меня продолжать работать. Я пришел к пониманию, что то, что я могу сделать, никогда не должно ограничиваться тем, что я умею делать.
