26 этапов дизайна продукта и приборной панели

То, что я узнал за 4 года своего пути дизайнера и дизайнера приборной панели

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

1. Предварительная обработка

Получите как можно больше информации (попросите три примера)

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

Узнайте о персонах

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

Персона шаблон - скачать его здесь: http://janlosert.com/assets/persona-template.zip

Установите точные цели - что именно мы должны отслеживать?

Я думаю, что большинство дизайнеров / клиентов игнорируют этот шаг, но одним из наиболее важных аспектов дизайна для обеих сторон является понимание целей продукта, который вы разрабатываете. Мы склонны прыгать прямо в пиксели и быстро уточнять пользовательский интерфейс проекта. Если это новый веб-сайт или новая функция, обязательно установите четкие цели того, чего вы хотите достичь.
 
Поскольку все отслеживается, говорите о точных точках, которые вы собираетесь отслеживать. Например, они могут варьироваться от новых регистраций до количества клиентов, использующих Paypal, и покупок с помощью кредитных карт. Всегда убедитесь, что вы знаете, как высоко вы стремитесь на старте!
 
Постскриптум - В любом случае это понадобится вам для настройки воронок на Mixpanel позже в этом процессе.

Структура проекта

Настройте папку проекта и начните собирать Moodboard

Есть много сайтов для вдохновения - Dribbble, Behance, Pttrns, Pinterest и т. Д. Найти проекты, аналогичные тем, над которыми вы будете работать, действительно легко. Кроме того, уже может быть решение проблемы, которую вы испытываете и пытаетесь решить.
 
Когда я начинаю работать над новым проектом, я всегда настраиваю папку с папками с именем - Исходные файлы, Экраны и экспорт, Вдохновение и ресурсы. Я сохраняю все, что я нахожу в Интернете, в папку «Вдохновение», чтобы позже использовать ее для создания базовых панно настроения. Эта папка может быть заполнена чем-либо из плагинов, образцов или даже полными примерами из Behance.

2. Идти с низкой точностью

Интерактивная доска

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

Составьте карту всей информации о ваших экранах (какие данные необходимо ввести пользователю)

Настало время выйти за рамки доски и перечислить все входные данные и истории пользователя. Запишите, что именно пользователь должен вставить в определенный экран и как пользователь может достичь желаемых целей.

Запишите все возможные состояния

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

Tapdaq - Кросс-промоушен Widget States

Подготовьте первую диаграмму

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

В конце концов, мы закончили с использованием Camunda Modeler, который не совсем дизайнерский инструмент. Это простое приложение для создания технических диаграмм. Это звучит странно, но это приложение разработано, чтобы помочь вам построить основные диаграммы. Самое главное, что все создано полностью масштабируемо. Вы можете легко перетащить любую точку, и она автоматически создаст линии и стрелки для вас. Вы также можете выбрать из различных типов точек, которые могут быть полезны, например, для выделения, когда пользователь получает электронное письмо от внутренней связи. Camunda позволяет экспортировать в SVG, что позволяет легко окрашивать отслеживаемые точки в Sketch.

Меню Tapdaq + структура экранов (экспорт из Camunda Modeler)

3. Работа / Дизайн

Moodboard

Я могу начать с создания доски объявлений, так как собираю все изображения в свою папку «Вдохновение». Я в основном пользуюсь досками для настроения, чтобы обсудить свои мысли с коллегами и описать некоторые визуальные идеи, прежде чем я начну с пиксельного процесса.

Moodboard с Chronicle Display и ярко-голубыми цветами

Первый черновик

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

Напиши свою копию (Тон)

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

Первый стажировочный тест

С вашим первым проектом вы можете быстро создать прототип в Marvelapp или Invision. Это то, что я начал делать недавно, и оказалось, что это еще один удивительный аспект проверки. С помощью прототипа вы теперь можете легко установить вызов с 3 или 4 людьми из вашей команды и поделиться ссылкой на прототип с ними и попытаться задать несколько вопросов, тестируя их на конкретных потоках / сценариях. Таким образом, вы можете легко проверить свои навыки опроса и, очевидно, проверить свои дизайнерские решения на реальных пользователях, не беспокоясь о затраченных ресурсах и времени Я обычно склоняюсь к выбору людей, которые не слишком вовлечены в разработку панели управления. Также постарайтесь не наблюдать за тем, кто уже имел возможность поиграть с прототипом раньше.

этикет

Мы все знаем, как трудно оставаться в порядке. Как поставить еще одну функцию. Обычно это приводит к грязному Sketch или PSD-файлам. Я многому научился во время разработки комплекта пользовательского интерфейса Dashboard, особенно о различиях между работой в качестве единственного дизайнера в стартапе, работой в команде или работой над моими цифровыми продуктами. Пока я работаю в Tapdaq, я уверен в навыках моих коллег, и даже когда я знаю, что изо всех сил стараюсь сохранить файлы в чистоте, иногда это невозможно! Однако, когда вы работаете в команде, я думаю о своих PSD, как будто я создаю их для кого-то другого. Я использую правило, что если у вас есть более 8 слоев в папке, то вы должны создать новый.

UI Kit Dashboard - Структура папок

Я нашел один отличный плагин для Sketch, который сэкономил мне часы, пока я работал над своими UI Kits. Переименовать - https://github.com/rodi01/RenameIt
 
Вы все еще можете взглянуть на эти старые правила этикета (во всяком случае, большинство баллов работают для любого редактора, которым вы будете пользоваться.) - http://photoshopetiquette.com/

Совет - Положите все на холсте

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

Создайте элементы интерфейса и начните играть с Lego

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

Это также неразрывно связано с тем, что мы можем реально преобразовывать каркасы в реальные проекты. Любой премьер-министр может создать каркас, и тогда я могу легко взять его на себя и превратить в Hi-Fidelity.

Перетаскивание элементов в файле эскиза Tapdaq

4. Активы и доставка

Когда вы закончили с проектированием и повторением на основе первого отзыва, вы еще не закончили. Теперь пришло время передать ваши проекты вашим инженерам / разработчикам.

Характеристики

Одна из моих главных целей - всегда иметь возможность сообщать о своих решениях команде и стараться максимально усложнить работу наших разработчиков, чтобы предоставить им наилучшие возможные ресурсы. Это для меня определенно самая важная часть моей работы в качестве дизайнера.
 
Поскольку мы задокументировали все взаимодействие и подготовили все с самого начала нашего процесса, создание спецификаций - это очень просто. Я обычно пишу спецификации в Google Docs или под экранами в файлах Sketch. Приятно обрабатывать ваши проекты с объяснениями всех функций, чтобы каждый мог получить ваш файл в будущем.

схема

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

Полная диаграмма приложения Sagram Analytics

Окончательный прототип

Один из ключевых моментов для меня - всегда иметь готовое взаимодействие в прототипе. Я обычно заканчиваю тем, что имею 3–5 прототипов на пути к последнему для тех маленьких сессий с товарищами по команде или для показа некоторых конкретных потоков. Я склонен готовить все состояния в Sketch в одном артборде, а затем дублировать эти артборды, чтобы при экспорте были готовы все состояния.
Как сказано выше, вы можете использовать Marvelapp или Invision. Замечательно добавлять комментарии к частям ваших проектов, чтобы еще больше расширить вашу спецификацию, чтобы даже копирайтер мог легко переходить и проверять реальные пиксели и потоки, если каждая копия и диалог работают так, как требуется.

Quicktime Video> Заметки

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

оживлять

Приятный финальный штрих вашего дизайна вы можете использовать After Effects или Principle. Хорошо объяснить, как вы хотите, чтобы и то и другое двигалось или зависало.

Гид по стилю

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

Обзор интерфейса пользователя Tapdaq - Styleguide

5. Финал и тест

Поскольку мы закончили с передачей наших проектов инженерам, мы можем сосредоточиться на последней части процесса - проверке наших решений!

Inspectlet / HotJar

После того, как дизайн превратится в рабочий код, не забудьте включить ваши фрагменты Inspectlet или HotJar JS. Я всегда рад (или расстроен) видеть, как пользователи перемещаются по нашей панели инструментов или что они делают на странице моего портфолио. Inspectlet потрясающе захватывает всю вашу пользовательскую сессию. Прекрасно работает и для больших проектов. Он поставляется с легкой «/ page» фильтрацией, которая помогает вам наблюдать за сеансом определенной функции или потока. Мы используем Inspectlet в Tapdaq. Для своего личного портфолио я использую бесплатные функции HotJar для создания тепловых карт и записи по крайней мере нескольких пользователей, просматривающих мое портфолио.

Mixpanel

Mixpanel отлично подходит для проверки наших целей (тех, которые мы устанавливаем в самом начале нашего процесса). Mixpanel помогает увидеть, сколько пользователей выполняют определенные потоки. Сколько пользователей упало перед настройкой учетной записи. Сколько людей прошло с главной целевой страницы до магазина и до нашего самого ценного продукта.

Гугл Аналитика

Я не способен кодировать большие вещи, но, по крайней мере, я могу работать с файлами CSS и с простым кодом. В последнее время мне было интересно посмотреть, где пользователи нажимают, и, глядя на тепловые карты Hotjar, я решил также настроить базовый трекер кликов в Google Analytics. Вы также можете легко отслеживать каждый клик пользователя на вашем сайте. Вот пример кода для отслеживания кликов - http://pastebin.com/tdmFZN2k

`` `

** 1. Вставьте скрипт в ваш код **

<Скрипт>
 функциональная дорожка (имя, метка) {
 ga («отправить», «событие», имя, «нажать», метка, {
 hitCallback: function () {
 console.log («Событие отправлено в Google Analytics»);
 }
 });
 }

** 2. Добавить onclick к своим ссылкам **

Ссылка

`` `

Код отслеживания Google AnalyticsРезультаты отслеживания Google Analytics

Как вы можете видеть, я отслеживаю каждую кнопку, каждую ссылку и всегда прикрепляю разные метки к каждой из этих опорных точек. Это помогает мне легко наметить поведение пользователя. Например, я узнал, что люди использовали верхнюю навигацию в 5 раз больше по выделенной ссылке во вступительном тексте. Не стесняйтесь кодировать этот фрагмент на свой веб-сайт.
 
Постскриптум К сожалению, он не считает клики от пользователей с AdBlock.
Спасибо @snapeuh за большую помощь в настройке этого.

Переговорное устройство

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

6. После разработки / Как мне управлять своей работой

цели

Для последней части пути я настраиваю для себя спринты на один месяц, разделенные на цели работы / Tapdaq, цели личного проекта и жизненные цели. Я все еще использую Things by Cultured Code, чтобы разбить эти проекты на небольшие задачи, которые легко подписать. Раньше я работал над 5 различными проектами одновременно и всегда был разочарован тем, что не смог что-то протолкнуть за финишную черту. В настоящее время я стремлюсь выпустить хотя бы одну вещь каждый месяц. Эта «вещь» может быть любой из двух новых подстраниц в моем портфолио, нового продукта или новой целевой страницы клиента. Просто, чтобы я продолжал в том же духе.

Родом из Сиаваша Махмудяна - https://mobile.twitter.com/siavash/status/618093511066435585

Рабочая среда

Я уже использую эскиз для большинства своих проектов, но у меня есть много людей в Instagram, спрашивающих о моем рабочем пространстве Photoshop, так что вот и все! http://janlosert.com/assets/workspace.zip

7. Последние несколько слов

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

Оставьте дриблинг позади

Из того, что я узнал и как мои дизайны изменились за последние 4 года, я дошел до того, что Dribbble - лучший способ для нас, дизайнеров, привлечь новых клиентов и показать нашу работу. Но это не обязательно то место, для которого вы хотите создать свой дизайн. Я всегда стремился иметь красивые пиксели с сексуальными фотографиями профиля, но это не то, что нужно и будет использовать реальным пользователям. Это один из примеров Tapdaq, который я разработал, подумав о хорошем кадре для Instagram и Dribbble, и вот так выглядит текущий экран после того, как я потратил часы на то, как люди редактируют свои профили, и после того, как я понял, какую информацию они на самом деле просят и нуждаются.

Настройки аккаунта - до и после

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

Будущее

Моя следующая миссия - самое главное - больше погрузиться в UX и исследовать. Чтобы иметь возможность поделиться в моей следующей статье обзором инструментов UX, которые я использую для A / B-тестирования и для сбора данных. Я все еще довольно плохо знаком с UX, и у меня не было много возможностей учиться на предыдущих работах. Но в настоящее время я увлечен отслеживанием и отслеживанием действий каждого пользователя в каждом новом проекте, над которым я работаю.

Конец

Я был бы рад услышать о вашем рабочем процессе, о том, какие шаги вы обычно предпринимаете в своих личных проектах, или о том, как ваш процесс отличается при работе в команде. Я люблю видеть рабочие места других людей. И самое главное, не стесняйтесь делиться своими мыслями обо всех / дополнительных шагах в моем процессе.
 
Я пишу больше из Tapdaq и моих личных проектов на Dribbble.
и я буду рад услышать ваши мысли в твиттере.