Примеры геймификации: 10 игр для вашего сайта

22 ноября 2018
31.7K
7 мин.

Играть любят все. А если не все, до 90% точно, а остальные 10% просто боятся в этом признаться. Игра позволяет расслабиться, отвлечься, переключиться.

Играть интересно, но время на это есть далеко не всегда. Речь, конечно, идет о взрослом человеке – семья, дети, работа, что-то для саморазвития (обучение, спорт), и вот вы уже и не помните, когда последний запускали любимую «линейку» на телефоне или «зуму» на компьютере:

Игра Zuma
Помните такую? =)

А играть хочется. Тут папы и начинают приносить детям в подарок радиоуправляемые вертолеты (ну и что, что дочка, ей тоже интересно), а мамы с увлечением закупают паззлы на 5000 элементов.

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

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

Для начала быстро разберем вопрос – а зачем это нужно? Причины просты:

  • Чтобы удержать интерес посетителя именно на вашем сайте, а не на сайте конкурента
  • Чтобы выделить ваш сайт среди остальных, тем самым «отложив» его в памяти пользователя
  • Чтобы увеличить время, проведенное на сайте (а соответственно, улучшить поведенческие факторы)

Второй (и последний здесь) теоретический вопрос – как придумываются игровые механики? Да без особых сложностей: берем уже существующую игру из реального (а может и виртуального), но точно игрового мира – и переносим на, казалось бы, неигровую ситуацию.

Этим мы сегодня и займемся. Возьмем 10 хорошо известных нам игр и придумаем «развлекалки» (или «завлекалки») для посетителей вашего сайта.

Игра 1. Паззлы

Суть проста – собери из частей что-то целое.

Пазл Забавные животные
Пазл «Забавные животные» фирмы Djeco

Неигровая ситуация: Выбор блюд на сайте по доставке готовых обедов.

Пока блюда не выбраны, показываем клиенту начальную ситуацию – пустое игровое поле с кнопками для заполнения этого поля (плюсы – ссылки на тот или иной раздел с блюдами):

Выбор блюд онлайн

По мере выбора добавляем блюда на эту «тарелку»:

Подбор заказа в игровой форме

Допустим, 3 блюда уже выбрали. И вроде бы, клиент больше ничего и не хотел, но ведь паззл-то не завершен – и это явно видно:

Заказ в виде паззла

Ничего не остается, как собрать всю «картину»:

Выбор блюд завершен

Постойте, так ведь это не просто паззл, это ж мой заказ! Разве можно теперь спокойно закрыть эту страницу и уйти в магазин за каким-нибудь бургером? Поэтому очевиден результат:

Сообщение об отправке заказа

Игра 2. Одежда для куклы

Рожденные в СССР еще должны помнить эти замечательные бумажные куклы с меняющейся одеждой:

Игра с картонными куклами
Вот она, докомпьютерная эра ))

Неигровая ситуация: Покупка одежды в онлайн-магазине.

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

А сам инструмент онлайн примерки увлекателен. Дадим возможность покупательнице не просто посмотреть выбранные вещи на разных фотографиях, а примерить их на одну модель, чтобы оценить весь комплект (скриншот с сайта facecase.ru):

Онлайн примерка одежды
Ну всё, вроде собралась. Или чего-то не хватает...

Из известных примеров сюда же подходит создание своего дизайна для футболок/маек (те же Vsemayki) или кроссовок (например, Nike Id).

Игра 3. Рулетка

Когда хочется, чтобы случай все решил за тебя.

Американская рулетка
А сколько проиграли вы, перед тем как остановиться?

Неигровая ситуация: Выбор книги в онлайн-магазине.

Если человек ищет не какую-то определенную книгу, а хочет купить что-нибудь «на почитать», то выбор может растянуться на весь его обеденный перерыв. Эту книгу я уже читал, об этой книге отзывов нет, у этой начало какое-то неинтересное. И вообще я не знаю, то ли я хочу фантастику, то ли любовный роман… Свободное время закончилось, а книга так и не выбрана – значит, покупке не состояться.

Добавим для таких нерешительных инструмент, который сделает все за них:

Кнопка для выбора случайной книги

После клика на «Крутить» в течение 4-5 секунд в прямоугольнике мелькают сменяющие друг друга обложки книг:

Скрипт выбора книги случайным образом

Затем перебор останавливается на одной случайной книге:

Выбор завершен на книге Вино из одуванчиков

Ну вот и все, выбор сделан! С судьбой не спорят =)

Конечно, если в такую «рулетку» играет зарегистрированный пользователь, у которого уже есть заказы, то стоит все-таки сделать выбор «псевдослучайным», то есть учесть в нем персональные предпочтения юзера (иначе он и «русскую рулетку» будет крутить до бесконечности).

Игра 4. Ну, погоди

А эта игра была хотя бы у одного ребенка во дворе:

Карманная электронная игра
Каким был ваш рекорд?

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

Ваш клиент заполнил форму на колбэк, отправил ее и видит ответ:

Сообщение об отправке формы

Уже через 3 минуты он начнет думать, что про него забыли. А через 5 обиженно закроет ваш сайт. И даже если вы перезвоните на 6-ой минуте – осадок останется.

Давайте попробуем отвлечь клиента от тягостного ожидания:

Сообщение с предложением игры

Почему бы и не вспомнить игру детства? Как там было – «Мама, я лишь пару минут поиграю»:

Онлайн версия игры
Реально поиграть можно здесь http://shtange.com/catch-the-egg/

Теперь, случись вашему менеджеру задержаться со звонком на пару минут – это вряд ли будет замечено =). Понятно, что такой пример подойдет, если время ответа ваших менеджеров не превышает 10-15 минут.

Игра 5. Флип-флоп

Это одна из моих первых компьютерных игр:

Игра флип-флоп 90-х годов
При клике на один ряд все его окна меняют положение на противоположное. Надо открыть все окошки

Неигровая ситуация: Описание услуги.

Пример взят с нашей страницы про seo-сопровождение – http://1ps.ru/cost/seo/. На ней есть блок со списком специалистов, работающих по услуге:

Специалисты для seo

Каждая иконка «раскрывается» раз в 5-6 секунд, либо при наведении мыши. А за ней показывается реальная фотография сотрудника:

Показ фото при наведении мыши

Т.е. здесь просто развлекаемся. А давайте как на пианино – по всем клавишам:

Показываем фотографии реальных сотрудников

Хотя на самом деле мы показываем клиентам, что в нашей компании работают вполне реальные люди.

Игра 6. Персонажи

Возьмем пример из виртуального игрового мира, где один из важных этапов – выбор персонажа для игры:

Выбор персонажа в компьютерной игре

Неигровая ситуация: Выбор детских товаров в онлайн-магазине.

Во многих каталогах у посетителя есть возможность фильтровать товары по параметрам ребенка – пол и возраст:

Фильтр в каталоге товаров

Добавим сюда игровой механики. Теперь при выборе пола или возраста меняется иконка нашего персонажа ребенка:

Фильтр с персонажем

Игра 7. Викторина

Вспомним известное телешоу, ставшее и мобильной игрой:

Игра О счастливчик
Ну кто же не хочет стать миллионером? Только миллиардер...

Неигровая ситуация: Подбор фирмы для бухгалтерского обслуживания на аутсорсинг.

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

Так давайте проверим. Составляем небольшой тест, в котором вопросы распределяем примерно так: 20% простых, 40% средних, 40% сложных. И предлагаем посетителю его пройти:

Онлайн тест

Не делайте слишком длинные тесты. 10-15 вопросов вполне хватит. Недавно на одном из сайтов меня зацепил тест на уровень знания английского, но на 23-м вопросе я все-таки сдалась (всего вопросов там было 40).

После теста показываем результат и даем возможность посмотреть правильные ответы. И никто не запрещает нам дать ссылки на другие разделы нашего сайта:

Результат онлайн-теста

Пример онлайн-теста от 1ps можно посмотреть здесь.

Игра 8. Конструктор

Вторая по популярности (после радиоуправляемых вертолетов и машинок) игра, в которую папы с удовольствием играют с детьми:

Конструктор Lego Halicarrier
Да-да, это тот самый Halicarrier

Неигровая ситуация: Выбор компании для строительства (целого дома или чего-то попроще – например, забора или искусственного пруда).

Дадим пользователю элементы строительства и возможность проявить фантазию:

Онлайн-конструктор ландшафта

Так, пруд построили, теперь займемся растительностью:

Построй свой пруд онлайн
Не забудьте кнопку «Рассчитать стоимость»

В итоге и клиент поигрался, и вы получили визуальное представление того, что ему нужно.

Игра 9. Квест

Самый затягивающий вид игр, потому что в них есть главное – сюжет. Можно сидеть ночами, днями и неделями.

Игра типа квест
Самый красивый квест своего времени. Интересно, вспомните ли вы его?

Неигровая ситуация: Выбор системы безопасности для частного дома.

Можно долго и подробно (в буквах и картинках) пояснять клиенту, какие системы безопасности вы предлагаете, и как они работают, а можно заменить 1000 слов на один мини-квест:

Квест для сайта

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

Квест Проберись в дом

Отпускаем «маску» в найденном месте и видим пояснение, как будет пойман вор в этом случае. Конечно, не забываем ссылки на разделы сайта:

Итог квеста

Вот так наглядно и интерактивно можем представить и схему работы, и имеющиеся комплекты, и даже некоторые условия работы.

Игра 10. Уровни

Как можно заставить игрока выполнять одни и те же игровые действия из раза в раз? Конечно же, нужно ввести систему уровней:

Уровни в игре
Скриншот игры Traffic Rider. Без уровней играть надоело бы на 10 заезде

Неигровая ситуация: Заполнение большой формы.

Например, возьмем наш бриф на редизайн сайта. В нем 28 полей, и когда клиент видит их сразу все, он становится печальнее прямо на глазах.

Попробуем разбить форму на уровни, а также выведем указатель прогресса (на сколько процентов выполнено задание):

Уровни в длинной форме

Заполнить 6 групп по 4-5 полей проще, чем 30 полей подряд. А индикатор работает на стремление человека к максимальному результату (100 из 100):

Индикатор прогресса внизу слева

Итог

Конечно, игровых механик и элементов гораздо больше. И дело здесь ограничивается лишь вашей фантазией.

Так что присмотритесь к своему сайту, возможно, и на нем найдется место геймификации. Ну а если присмотрелись и поняли, что сайт уже не торт тот, айда за редизайном.

P.S. Если у вас есть свой опыт применения игровых элементов на сайте, делитесь в комментариях.

1
2
0
0
0

Дарья Севостьянова

Веб-разработчик

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна

1PS.RU – 24 года!

Приходите на кибервечеринку и получайте подарки!

Подробнее

Популярные статьи

Все популярные статьи

Закрытый клуб для маркетологов и владельцев бизнеса. Оставьте запрос на вступление!

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

250 000 участников сообщества каждую неделю получают письма от нас

Еженедельные полезные советы по продвижению бизнеса и эксклюзивные предложения абсолютно бесплатно – подайте заявку на вступление!

Услуги, которые могут вас заинтересовать

Разработаем мощный инструмент продаж с каталогом, корзиной, доставкой и оплатой.

Стоимость:
от 180 000

Любые работы по дизайну сайта – от переделки шапки сайта до разработки логотипа и фирменного стиля.

Сделаем современный и качественный сайт на Тильде под любые задачи за 14 дней.

Стоимость:
от 54 600

Смотреть все услуги Попробовать бесплатно

Ммм, куки (печеньки)

Cookie – это специальные файлы, которыми питается браузер 🍪 Файлы cookies позволяют «запоминать» посетителей, например, чтобы не переспрашивать у вас каждый раз логин и пароль :)

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

Согласен