Геймификация
Крутой инструмент, который превращает рутинные действия в продуктах в интересное взаимодействие, мотивирует и вовлекает пользователей. Подготовила для вас яркие примеры:
Награды
Отлично сделаны в Nike Run.
Пробежал 3 км — получи награду. Бегаешь неделю без перерыва, ещё одна. Первый марафон, поздравляем, вот твоя медаль.
Мотивируют увеличивать километраж. Получаешь награды, как настоящий спортсмен за свои достижения.
Плюсы для бизнеса:
• Повышение вовлечённости
• Увеличение времени проведённого в продукте
Игры
Замечательно реализовали в Самокате.
Игра, где главный приз — путешествие в Азию. Чтобы выиграть, ты должен пройти несколько уровней. Чтобы их было проще проходить, нужно применять бустеры (ускорение, замена), а для этого нужно совершать покупки в Самокате.
Польза для бизнеса:
• Рост продаж
• Повышение вовлечённости
• Эмоциональная привязка к бренду
Валюта
Тут смотрим на Яндекс «Плюс Дейли». Зарабатываешь валюту в виде звёздочек, выполняя задания и пользуясь услугами экосистемы Яндекс, а после тратишь её на подарки.
Польза для бизнеса:
• Рост продаж
• Повышение лояльности
Ограниченный доступ
Telegram Premium тут бесподобен. У тебя нет доступа к классным функциям (расшифровка голосовых, режим инкогнито и т.п) пока ты не подключишь премиум.
Польза для бизнеса:
• Мотивация к подписке
• Повышение ценности продукта
• Вирусное распространение
Попробуйте внедрять даже небольшие элементы геймификации при проектировании интерфейса и увидите, как это понравится вашим пользователям.
Какие виды геймификации нравятся вам?
Крутой инструмент, который превращает рутинные действия в продуктах в интересное взаимодействие, мотивирует и вовлекает пользователей. Подготовила для вас яркие примеры:
Награды
Отлично сделаны в Nike Run.
Пробежал 3 км — получи награду. Бегаешь неделю без перерыва, ещё одна. Первый марафон, поздравляем, вот твоя медаль.
Мотивируют увеличивать километраж. Получаешь награды, как настоящий спортсмен за свои достижения.
Плюсы для бизнеса:
• Повышение вовлечённости
• Увеличение времени проведённого в продукте
Игры
Замечательно реализовали в Самокате.
Игра, где главный приз — путешествие в Азию. Чтобы выиграть, ты должен пройти несколько уровней. Чтобы их было проще проходить, нужно применять бустеры (ускорение, замена), а для этого нужно совершать покупки в Самокате.
Польза для бизнеса:
• Рост продаж
• Повышение вовлечённости
• Эмоциональная привязка к бренду
Валюта
Тут смотрим на Яндекс «Плюс Дейли». Зарабатываешь валюту в виде звёздочек, выполняя задания и пользуясь услугами экосистемы Яндекс, а после тратишь её на подарки.
Польза для бизнеса:
• Рост продаж
• Повышение лояльности
Ограниченный доступ
Telegram Premium тут бесподобен. У тебя нет доступа к классным функциям (расшифровка голосовых, режим инкогнито и т.п) пока ты не подключишь премиум.
Польза для бизнеса:
• Мотивация к подписке
• Повышение ценности продукта
• Вирусное распространение
Попробуйте внедрять даже небольшие элементы геймификации при проектировании интерфейса и увидите, как это понравится вашим пользователям.
Какие виды геймификации нравятся вам?
Релиз «Вакансии» и неожиданный подарок
Месяц назад мы зарелизили кросскомандную фичу — «Вакансии». Теперь, когда вы открываете карточку компании в 2ГИС, можно увидеть не только отзывы, адрес и фото, но и вакансии в её штат. (hh, мы уже рядом 😁)
Моя команда работает на стороне B2B, поэтому мы делали так, чтобы компаниям было удобно заводить вакансии в своём Личном кабинете.
Над этой задачей мне очень понравилось работать, она драйвила, казалось, всю команду. Но самое приятное и неожиданное случилось после, мне прислали подарок за участие в работе над этим функционалом — массажную подушку. Как-будто знали, что я как раз хочу такую.
Моя мотивация улетела в космос, готова с новой силой проектировать фичи)
❤️ — фича хороша
🔥 — подарок норм
🤚 — у меня есть такой массажёр
Месяц назад мы зарелизили кросскомандную фичу — «Вакансии». Теперь, когда вы открываете карточку компании в 2ГИС, можно увидеть не только отзывы, адрес и фото, но и вакансии в её штат. (hh, мы уже рядом 😁)
Моя команда работает на стороне B2B, поэтому мы делали так, чтобы компаниям было удобно заводить вакансии в своём Личном кабинете.
Над этой задачей мне очень понравилось работать, она драйвила, казалось, всю команду. Но самое приятное и неожиданное случилось после, мне прислали подарок за участие в работе над этим функционалом — массажную подушку. Как-будто знали, что я как раз хочу такую.
Моя мотивация улетела в космос, готова с новой силой проектировать фичи)
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Используем рабочие навыки в отпуске
Время отпусков в самом разгаре, мой начинается с завтрашнего дня и в голову пришли 5 весёлых советов для тех, кто очень любит свою работу и даже в путешествиях готов использовать рабочие навыки:
1. Раскидайте в Jira задачи, которые хотите закрыть за 14 дней отпуска и перемещайте, чтобы к концу все были в колонке Done
2. Тестируйте рестораны и кафе, все самые вкусные, которые только встретите, если в каком-то будет невкусно, считайте это баг, попросите пофиксить
3. Пройдитесь по флоу музеев, если навигация будет хорошая и сможете найти выход без помощи охранника, путь пользователя можно сказать успешен
4. Фоткайте всё, что выглядит как «о, прикольное решение»
5. Подружитесь с парочкой местных жителей и проведите глубинное интервью, чтобы узнать про самые лучшие места и те, которые нужно обходить стороной
Делитесь, какие места/страны хотите посетить или уже посетили в этом году?)
❤️ — люблю отпуск
🤚 — мой отпуск нескоро
🔥 — советы топ
Время отпусков в самом разгаре, мой начинается с завтрашнего дня и в голову пришли 5 весёлых советов для тех, кто очень любит свою работу и даже в путешествиях готов использовать рабочие навыки:
1. Раскидайте в Jira задачи, которые хотите закрыть за 14 дней отпуска и перемещайте, чтобы к концу все были в колонке Done
2. Тестируйте рестораны и кафе, все самые вкусные, которые только встретите, если в каком-то будет невкусно, считайте это баг, попросите пофиксить
3. Пройдитесь по флоу музеев, если навигация будет хорошая и сможете найти выход без помощи охранника, путь пользователя можно сказать успешен
4. Фоткайте всё, что выглядит как «о, прикольное решение»
5. Подружитесь с парочкой местных жителей и проведите глубинное интервью, чтобы узнать про самые лучшие места и те, которые нужно обходить стороной
Делитесь, какие места/страны хотите посетить или уже посетили в этом году?)
Please open Telegram to view this post
VIEW IN TELEGRAM
Рубрика «словарь айтишника» продолжает свою работу
Креды
Нет, это не забытый певец из 90-х и не когда набрал много кредитов и красиво сократил их множественное число 😁
Так в IT называют учётные данные, которые используются для подтверждения личности пользователя. Проще говоря, логин и пароль, которые ты вводишь при входе на сайт или в приложение.
⬅️Первое слово
❤️ — знаю слово
🤚 — не знаю слово
Креды
Нет, это не забытый певец из 90-х и не когда набрал много кредитов и красиво сократил их множественное число 😁
Так в IT называют учётные данные, которые используются для подтверждения личности пользователя. Проще говоря, логин и пароль, которые ты вводишь при входе на сайт или в приложение.
⬅️Первое слово
Please open Telegram to view this post
VIEW IN TELEGRAM
Инклюзивный дизайн — это про заботу
Очень нравятся интерфейсы с крупными элементами: кнопками, текстом и выразительными деталями. Это не просто красиво, на мой взгляд, но и удобно.
Например, вы едете в трамвае, одной рукой держитесь, другой пытаетесь нажать кнопку или просто устали и глаза «замылились». А тут всё отлично видно и легко попасть пальцем.
А есть ещё люди, которые, например, не различают цвета, имеют туннельное зрение или не видят совсем. Для них проводятся отдельные исследования и интерфейсы проектируются с учётом их особенностей.
Я люблю читать статьи и смотреть доклады о том, как команды из разных компаний делают свои продукты доступнее. Это показывает, что дизайн может быть не только красивым, но и по-настоящему человечным.
Поэтому не забывайте о тех, кто будет пользоваться спроектированным вами интерфейсом в самых разных условиях. Делайте так, чтобы каждый почувствовал, что о нём подумали 🥰
Если вам тоже интересна эта тема, могу ещё написать пост про «принципы доступности WCAG».
❤️ — люблю понятные интерфейсы
🤚 — крупно не нравится
🔥 — давай пост про принципы доступности
Очень нравятся интерфейсы с крупными элементами: кнопками, текстом и выразительными деталями. Это не просто красиво, на мой взгляд, но и удобно.
Например, вы едете в трамвае, одной рукой держитесь, другой пытаетесь нажать кнопку или просто устали и глаза «замылились». А тут всё отлично видно и легко попасть пальцем.
А есть ещё люди, которые, например, не различают цвета, имеют туннельное зрение или не видят совсем. Для них проводятся отдельные исследования и интерфейсы проектируются с учётом их особенностей.
Я люблю читать статьи и смотреть доклады о том, как команды из разных компаний делают свои продукты доступнее. Это показывает, что дизайн может быть не только красивым, но и по-настоящему человечным.
Поэтому не забывайте о тех, кто будет пользоваться спроектированным вами интерфейсом в самых разных условиях. Делайте так, чтобы каждый почувствовал, что о нём подумали 🥰
Если вам тоже интересна эта тема, могу ещё написать пост про «принципы доступности WCAG».
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Проектирование ремня безопасности
Едем в путешествие и я задумалась, почему дизайн машин меняется постоянно: внешний вид, мощность двигателей, появляются дисплеи и умные голосовые помощники, меняется материал и форма сидений, но ремень безопасности выглядит всегда одинаково! Причём неважно старенькое жигули это или Porsche.
Со стороны, кажется, было бы здорово сделать ремень помягче без режущих краёв, чтобы, например, был эластичным и приятным материал во время поездки, а в критической ситуации менял свою форму на непробиваемую, расширяющуюся и охватывающую всю грудную клетку.
Изучив вопрос, вот несколько интересных фактов о ремне:
Возраст. Текущее решение ремня безопасности не менялось уже более 65 лет
Сертификация. Ремни проходят жёсткие испытания на износостойкость и разрывную способность. Чтобы сделать с нуля другой внешний вид ремня, нужно потратить многомиллиардное состояние на исследование, проектирование и сертификацию
Проверенное решение. Трёхточечный ремень безопасности, который сейчас мы видим во всех авто, был разработан компанией Volvo в 1959 году и остаётся до сих пор золотым стандартом
Цвет. Сам цвет ремня может меняться, но по исследованиям, цветной ремень выглядит для пользователей ненадёжно, как что-то игрушечное и несерьезное. Поэтому ремень остаётся чёрным.
Интересный пример, когда текущее решение так хорошо реализовано и выполняет свою задачу, что создавать что-то новое не имеет смысла, к тому же есть много ограничений, которые нужно учитывать, всё как в проектирование интерфейсов 😁
❤️ — интересно
🔥 — устраивает текущий вид ремня
⭐️ — хотелось бы улучшить
Едем в путешествие и я задумалась, почему дизайн машин меняется постоянно: внешний вид, мощность двигателей, появляются дисплеи и умные голосовые помощники, меняется материал и форма сидений, но ремень безопасности выглядит всегда одинаково! Причём неважно старенькое жигули это или Porsche.
Со стороны, кажется, было бы здорово сделать ремень помягче без режущих краёв, чтобы, например, был эластичным и приятным материал во время поездки, а в критической ситуации менял свою форму на непробиваемую, расширяющуюся и охватывающую всю грудную клетку.
Изучив вопрос, вот несколько интересных фактов о ремне:
Возраст. Текущее решение ремня безопасности не менялось уже более 65 лет
Сертификация. Ремни проходят жёсткие испытания на износостойкость и разрывную способность. Чтобы сделать с нуля другой внешний вид ремня, нужно потратить многомиллиардное состояние на исследование, проектирование и сертификацию
Проверенное решение. Трёхточечный ремень безопасности, который сейчас мы видим во всех авто, был разработан компанией Volvo в 1959 году и остаётся до сих пор золотым стандартом
Цвет. Сам цвет ремня может меняться, но по исследованиям, цветной ремень выглядит для пользователей ненадёжно, как что-то игрушечное и несерьезное. Поэтому ремень остаётся чёрным.
Интересный пример, когда текущее решение так хорошо реализовано и выполняет свою задачу, что создавать что-то новое не имеет смысла, к тому же есть много ограничений, которые нужно учитывать, всё как в проектирование интерфейсов 😁
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Принципы доступности WCAG (Web Content Accessibility Guidelines)
В дополнение к этому посту, интересное про принципы доступности — международные рекомендации, опираясь на которые проектируются интерфейсы доступные для всех, в том числе для людей с инвалидностью.
Основу WCAG составляют 4 принципа, которые можно запомнить по аббревиатуре POUR:
1. P — Perceivable (Воспринимаемость)
Информация в интерфейсе должна быть представлена так, чтобы её могли легко воспринять все пользователи.
Примеры:
• Возможность настраивать размер текста
• Субтитры для видео
• Хороший контраст между текстом и фоном
2. O — Operable (Управляемость)
Навигация должна быть удобно спроектирована.
Примеры:
• Возможность навигации с клавиатуры
• Выделять элементы в момент взаимодействия с ними на экране (подсвечивать, обводить и т.п)
• Отсутствие мерцающих элементов, вызывающих судороги
3. U — Understandable (Понятность)
Интерфейс и информация должны быть понятны и предсказуемы.
Примеры:
• Одинаковые элементы взаимодействия, чтобы добавление в избранное, например, не выглядело в разных местах по разному в одном продукте
• Ясный и простой язык в текстах
• Подсказки при вводе данных в формы
4. R — Robust (Надёжность)
Контент должен корректно отображаться в разных браузерах.
Примеры:
• Корректная разметка HTML
• Использование тегов, которые позволяют сохранять высокое качество изображения в разных браузерах
❤️ — полезно
🔥 — не знал(а)
⭐️ — знал(а)
В дополнение к этому посту, интересное про принципы доступности — международные рекомендации, опираясь на которые проектируются интерфейсы доступные для всех, в том числе для людей с инвалидностью.
Основу WCAG составляют 4 принципа, которые можно запомнить по аббревиатуре POUR:
1. P — Perceivable (Воспринимаемость)
Информация в интерфейсе должна быть представлена так, чтобы её могли легко воспринять все пользователи.
Примеры:
• Возможность настраивать размер текста
• Субтитры для видео
• Хороший контраст между текстом и фоном
2. O — Operable (Управляемость)
Навигация должна быть удобно спроектирована.
Примеры:
• Возможность навигации с клавиатуры
• Выделять элементы в момент взаимодействия с ними на экране (подсвечивать, обводить и т.п)
• Отсутствие мерцающих элементов, вызывающих судороги
3. U — Understandable (Понятность)
Интерфейс и информация должны быть понятны и предсказуемы.
Примеры:
• Одинаковые элементы взаимодействия, чтобы добавление в избранное, например, не выглядело в разных местах по разному в одном продукте
• Ясный и простой язык в текстах
• Подсказки при вводе данных в формы
4. R — Robust (Надёжность)
Контент должен корректно отображаться в разных браузерах.
Примеры:
• Корректная разметка HTML
• Использование тегов, которые позволяют сохранять высокое качество изображения в разных браузерах
Please open Telegram to view this post
VIEW IN TELEGRAM
❤7 4 2👍1
Вывеска для бани и поиск заказов
Был период, когда я решила фрилансить и искала площадки, откуда ко мне могут поступать заказы. Вот несколько из них:
Авито. Первое место, куда я выложила объявление «услуги дизайнера» и уже через пару часов мне написали. Задача была сделать дизайн вывески для бани 😁
Я его сразу сделала и получила деньги в тот же день. В дальнейшем там же меня нашёл заказчик, которому я сделала упаковку для конфет. Он планировал выйти с ней на международный рынок, так что Авито хорош.
Биржи фриланса. Пробовала на разных, но особенно запомнилась площадка Go Designer. Там ты соревнуешься с другими дизайнерами.
Заказчик даёт задачу —> разные дизайнеры выкладывают свой вариант —> заказчик выбирает понравившийся и платит. Я участвовала раз 20, выиграла один раз, но это было «попадание в яблочко». Заказчик стал моим постоянным клиентом, это оказалась крупная компания по продаже косметики и мы сделали с ним много крутых проектов.
Instagram (запрещен на территории РФ). Выкладывала там раньше свои проекты и в итоге обязательно какому-нибудь старому знакомому или знакомому знакомого нужен был дизайнер.
Отсюда я получала предложения на разработку логотипов, этикеток и даже интерфейсов. Думаю, если бы там добавили фичу для поиска специалистов это был бы успех.
Если думаете, где бы найти подработку, вот вам проверенные места)
❤️ — интересно
🔥 — тоже фрилансил(а)
⭐️ — хочу попробовать
Был период, когда я решила фрилансить и искала площадки, откуда ко мне могут поступать заказы. Вот несколько из них:
Авито. Первое место, куда я выложила объявление «услуги дизайнера» и уже через пару часов мне написали. Задача была сделать дизайн вывески для бани 😁
Я его сразу сделала и получила деньги в тот же день. В дальнейшем там же меня нашёл заказчик, которому я сделала упаковку для конфет. Он планировал выйти с ней на международный рынок, так что Авито хорош.
Биржи фриланса. Пробовала на разных, но особенно запомнилась площадка Go Designer. Там ты соревнуешься с другими дизайнерами.
Заказчик даёт задачу —> разные дизайнеры выкладывают свой вариант —> заказчик выбирает понравившийся и платит. Я участвовала раз 20, выиграла один раз, но это было «попадание в яблочко». Заказчик стал моим постоянным клиентом, это оказалась крупная компания по продаже косметики и мы сделали с ним много крутых проектов.
Instagram (запрещен на территории РФ). Выкладывала там раньше свои проекты и в итоге обязательно какому-нибудь старому знакомому или знакомому знакомого нужен был дизайнер.
Отсюда я получала предложения на разработку логотипов, этикеток и даже интерфейсов. Думаю, если бы там добавили фичу для поиска специалистов это был бы успех.
Если думаете, где бы найти подработку, вот вам проверенные места)
Please open Telegram to view this post
VIEW IN TELEGRAM
Нет, это не когда кто-то собирался сбросить немного «жира» к лету, но что-то пошло не так и теперь он ждёт следующего сезона 😁
Жира (Jira) — название программы для командной работы, которая помогает отслеживать задачи, быть в курсе кто, чем занят и контролировать рабочие процессы.
Что интересно, я заметила её по разному называют одни жира, другие — джира.
⬅️ Второе слово
❤️ — знаю слово
🤚 — не знаю слово
Жира (Jira) — название программы для командной работы, которая помогает отслеживать задачи, быть в курсе кто, чем занят и контролировать рабочие процессы.
Что интересно, я заметила её по разному называют одни жира, другие — джира.
⬅️ Второе слово
Please open Telegram to view this post
VIEW IN TELEGRAM
Градиент в интрефейсе
Сделала подборку интерфейсов, чтобы поделиться в каких случаях будет уместно и красиво использовать градиент. Иногда применяю, он придаёт интерфейсу современный вид на мой взгляд.
Фон
Часто вижу в онбордингах или на фоне общего контента внутри интерфейса. Но нужно быть осторожным, чтобы не переборщить и не получить сложно воспринимаемую штуку.
Карточки
Хорошо смотрятся с крупным текстом и цифрами.
Кнопки
Опасная история, но если нужно выделить какую то очень важную кнопку, например, покупка подписки, то будет выглядеть эффектно и привлекать внимание.
Иконки
Обычно в крупных используют 40x40, где градиент идёт подложкой, а сама иконка монохромная.
Анимация
Понравился переливающийся текст в Airbnb, привлекает внимание к инфе. Так же классно градиент смотрится в loader при загрузке.
❤️ — полезно
🔥 — люблю градиенты
🤚 — не люблю градиенты
Сделала подборку интерфейсов, чтобы поделиться в каких случаях будет уместно и красиво использовать градиент. Иногда применяю, он придаёт интерфейсу современный вид на мой взгляд.
Фон
Часто вижу в онбордингах или на фоне общего контента внутри интерфейса. Но нужно быть осторожным, чтобы не переборщить и не получить сложно воспринимаемую штуку.
Карточки
Хорошо смотрятся с крупным текстом и цифрами.
Кнопки
Опасная история, но если нужно выделить какую то очень важную кнопку, например, покупка подписки, то будет выглядеть эффектно и привлекать внимание.
Иконки
Обычно в крупных используют 40x40, где градиент идёт подложкой, а сама иконка монохромная.
Анимация
Понравился переливающийся текст в Airbnb, привлекает внимание к инфе. Так же классно градиент смотрится в loader при загрузке.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM