Как сделать чек лист в figma

Как сделать чек лист в figma

Соответствие прототипу

• Проверка наличия всех важных моментов из прототипа в дизайне.
• Если были переговоры с заказчиком по стилистике — соответствует ли в итоге она тому, что нужно?
• Наличие всех форм, смысловых блоков.
• Присутствие всех пунктов из карты сайта.
• Сверка прототипа и конечного результата: все ли ожидания от макета учтены?
• Если какие-то пожелания не учтены, выяснить причину; если это преднамеренно для блага продукта, то причину записываем и потом апеллируем к требованиям заказчика.

• При наличии классической сетки (а не рваной) — выравнивание по силовым линиям, горизонтальный и вертикальный ритм.

• Одинаковое расстояние от и до заголовка, между блоками, расстояния между колонками, между абзацами.

Типографика

• Соответствие заголовков в макете ранее выбранным Н1, Н2, Н3.
• Заголовки должны быть в одном кегле, подзаголовки в одном кегле, основной текст в одном кегле.
• Удобство интерлиньяжа для чтения.
• Соблюдение иерархии шрифтов, особенно если есть списки, перечни, много информации в карточках.
• Отсутствие орфографических ошибок и разрывов абзаца в ненужных местах, правильный перенос слов, чтобы текст можно было прочитать легко и быстро.

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

Стилистика

• Если есть скругления или тени — на всех элементах они должны быть одинаковыми.
• Стилистика кнопок — наличие ховера, его вид и единообразие (если не говорим о кнопках рядом стоящих с противоположным действием, где они будут разного цвета).
• Размер элементов: пропорции кнопок не должны меняться.
• Смотрим «пятнами» —проверка на возможный перегруз в определенных частях экрана, присутствие лишних элементов.
• Иконки должны быть визуально выровнены, иметь оптически одинаковый размер, быть в одном стиле (все контурные, или все «залитые», не разнобой) и в формате *.svg. Если где-то на объекте есть прозрачности — проверить, чтобы были одинаковыми.
• Если работаем в Figma — проверка размещения всех объектов в границах документа, отсутствие лишних элементов, мусора, которые могут остаться после копирования или были «рабочими» и не являются частью макета в итоге.
• Единство стиля обработки фотоконтента — не обрезаны ли на нем важные части фотографий (например, глаза, лоб, кисти рук).

Чек-лист в проекте Figma [Плагин]

Для более удобного планирования проекта в Figma, особенно при командной работе, создан плагин Todo.

Содержание скрыть

Дополнение позволяет создать простой список дел (или задач) прямо в проекте и отмечать выполненные таски.

Как пользоваться

Вызовите Todo из списка плагинов, и добавляйте или отмечайте дела в окне плагина.

Особенности

• Todo создает один список на один проект. То есть нельзя создать несколько списков или разделить списки по страницам. В обновлении возможность вести несколько туду в одном проекте обещают добавить.
• Плагин создан для командной работы, вносить в него правки могут все, у кого есть права на редактирование проекта.
• Изменения, внесенные другими участниками, появляются мгновенно в режиме онлайн.
• Задачи можно переставлять даг энд дропом

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

Где скачать

Ссылка на плагин: https://www.figma.com/c/plugin/747822968977461925/Todo

Как устанавливать плагины в Figma читайте здесь.

Чеклист для тестирования прототипа: 5 пунктов, которые нужно учесть, чтобы не потратить ресурсы впустую

В прошлой статье рассказал, почему не люблю тесты прототипов на Figma и предложил альтернативу. Здесь расскажу о подготовке любых прототипов к тестированию. Чеклист составил по наблюдениям за сотнями проектов на Fastuna. Бонус: прохождение двух тестов.

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

�� Контекст и термины

Прототип интерфейса (от др.-греч. πρῶτος «первый» + τύπος «отпечаток, оттиск»): быстрая, черновая реализация будущего интерфейса. Здесь в основном говорим про интерактивные прототипы графического интерфейса, которые моделируют работу цифрового продукта или отдельных его функций.

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

Примеры прототипов

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

Если читаете со смартфона, то вот ссылка на тест двух сценариев приложении Yami Yami. С этим заданием справляются лишь 33% людей из онлайн-панели и 65% читателей VC ��

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

Ссылки на отчеты в конце.

Ключевые тезисы

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

�� Интерактивные прототипы на Figma плохо подходят для количественных немодерируемых тестов, так как есть проблемы с открываемостью. Советы из чеклиста нацелены на увеличение процента открытий.

�� Устройства людей и скорость их интернета отличаются от тех, что есть у вас. Нужна проверка в реальных условиях.

Пройдите по списку. Пункты чеклиста подскажут, нужен ли вам прототип, а если нужен, то насколько сложный и на что стоит обратить внимание.

1.Определяем, для чего прототип

Выберите наиболее подходящий вариант

�� Обсуждения внутри команды.

Если речь о синхронизации, то возможность оставлять комментарии важнее, чем интерактивный характер прототипа. На ранних этапах, при работе над структурой подойдет Google Doc, Miro, Figma Jam.

К статичным прототипам проще оставлять комментарии. А Miro и Figma Jam вызывают меньше дискомфорта у недизайнеров.

�� Поиск проблем в интерфейсе.

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

❗ Лайфхак для модерируемых тестов — Figma Mirror. Достаточно дать респонденту логин и пароль от учетной записи. Так люди откроют прототип даже на стареньких андроидах.

�� Проверка интерфейсных гипотез.

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

❗ Для проверки гипотез рекомендую минимум 100 человек на тест.

2.Уточняем исследовательскую задачу и подбираем под нее инструмент

При тестировании на пользователях наиболее часто возникают следующие задачи:

�� Проверить навигацию экранов на удобство, интуитивность.

Когда сценарий линейный, для проверки гипотез и поиска проблем в навигации, интерактивный прототип не всегда нужен. Зачастую достаточно провести тест первого клика.

Материал в тему: UX-исследователь Паулина Гасс из Газпромбанка сравнила тест интерактивного прототипа и First Click Test на примере подключения функции Pay Control в приложении. Ссылка на вебинар

�� Проверить сценарии поведения в интерфейсе.

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

В феврале 2023 запустили на Fastuna Prototype test. На платформе создаете простой кликабельный прототип из изображений. В отчете процент кликов по зонам, время выполнения задания и ключевые метрики.

�� Проверить взаимодействие с интерактивными элементами.

Потребуются специализированные сервисы, навыки создания интерактивных компонентов, анимации. Figma — самый популярный инструмент для работы с UI.

❗ Функция Auto Layout в Figma упростит создание интерактивных прототипов. Вот полезная статья.

Не все люди дожидаются открытия материалов. До 30% бросают прототипы. Советы, как повысить процент открытий, читайте далее.

3. Создаем простую структуру — едим слона по частям �� ��

Разбиваем интерфейсы на короткие сценарии под задачу. Это упростит исследовательский процесс и интерпретацию.

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

❗ В прототипах используем облегченные изображения. Картинки по 500 кб загрузятся быстрее, чем хайрезы.

4. Убираем сторонний UI ��

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

❗При работе с Figma в настройках деактивируем навигацию клавиатурой и снимаем галку “Show Figma UI”, “Show hotspots on clicks”. Для показа людям используем получившуюся ссылку.

Keyboard navigation, hotspot hints, Figma UI нам не бро. А с ориентацией по экрану вы и сами разберетесь.

5. Финальная проверка на себе и людях ��

Недостаточно проверить прототип на последнем айфоне и макбуке ��. Открываем на сторонних устройствах, при слабом интернете. Заходим в инкогнито с бесплатного вай-фая в кафе, открываем прототип с простого андроида. И под финал отправляем ссылку бабушке, родственнику из небольшого города, другим непосвященным людям. Собираем обратную связь.

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

�� Готово. Вы великолепны!

Если прошли по всем пунктам и исправили выявленные проблемы, то прототип уже соответствует минимальным требованиям. Можно тестировать ��

Ссылки к статье

Результаты теста на десктопах (Нужна помощь). Гипотеза: большинство людей не замечают кнопку различения проекта и организации.

Telegram канал Tiburon Research с кейсами и обучающими материалами по исследованиям.

Чек-лист для проверки компонентов в Figma

Данный чек-лист не является всеобъемлющим. Он содержит базовые рекомендации для самопроверки при работе с компонентами UI-кит.

Всем привет!
Меня зовут Даниил Видишев, я работаю продуктовым дизайнером в INLY.

Наша команда делится опытом и знаниями со всеми желающими. Вот, например, наша База знаний о которой я рассказывал в своем канале.

А сейчас — чек-лист.

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

Дизайнер быстрее бежит показать, забывая о том, что проговаривали на звонке. Приходится снова проговаривать. Тратится время. Замедляется рост.

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

Что мне дает чек-лист:

• Рассказывает о базовых требованиях команды
• Подсказывает, что нужно делать, «если»
• Прокачивает внимательность

1. Используйте общепринятые названия компонентов

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

• Анализируйте крупные дизайн-системы и читайте описания компонентов
• Договаривайтесь с разработчиками о названиях, если есть такая возможность
• Не используйте кириллицу, потому что в коде будет латиница

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

2. Используйте понятные названия свойств компонента (properties)

Аналогично п.1 помогут быстрее разобраться в том, что вы имеете в виду

• Создавайте визуальную иерархию
• Если сомневаетесь в том, как назвать нужное свойство, то анализируйте крупные дизайн-системы в Figma
• Если чувствуете, что не хватает знаний, то посмотрите урок по теме Properties

Примечание: если работаете в команде и у вас есть UI-kit, то сначала проанализируйте аналогичные решения в других компонентах и только потом уточняйте у коллег

3. Проверьте стили цвета и текста

Примененные стили влияют на скорость внесения изменений и сокращение количества ошибок