{"id":7298,"title":"\u041a\u0430\u043a\u0438\u0435 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0431\u0435\u0440\u0443\u0442 \u0441 \u0441\u043e\u0431\u043e\u0439 \u043f\u0440\u0435\u0434\u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0442\u0435\u043b\u0438 \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u0435","url":"\/redirect?component=advertising&id=7298&url=https:\/\/vc.ru\/finance\/287640-predstavte-chto-vy-dolzhny-vernutsya-na-20-let-nazad-v-proshloe-kakie-sovremennye-tehnologii-zahvatite-s-soboy&placeBit=1&hash=4693aaf51fe37b122309350bd15ef7991e11843fbc9183a8a592e9af3c9af557","isPaidAndBannersEnabled":false}
Офтоп
Aleksandr Ageev

Превращаем скучные задачи в увлекательную игру: дизайн интерфейса геймификации на примере Gemini 2

Gemini — это утилита для macOS, которая с помощью умного алгоритма помогает находить и удалять идентичные и похожие файлы, включая фотографии и аудио.

Утилита была создана компанией MacPaw, а ее последняя версия Gemini 2 в 2017 году получила престижную награду Red Dot Award в области пользовательских интерфейсов.

Идея системы геймификации

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

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

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

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

Оценка времени и карандашные скетчи

Идеи для иллюстраций достижений

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

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

Тестирование и выбор вариантов

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

Идеи для беджей

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

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

Финальный вариант достижений

Делаем жизнь ярче

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

Финальный вариант беджей
{ "author_name": "Aleksandr Ageev", "author_type": "self", "tags": [], "comments": 1, "likes": 7, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 33601, "is_wide": true, "is_ugc": true, "date": "Tue, 20 Feb 2018 15:13:39 +0300", "is_special": false }
0
1 комментарий
Популярные
По порядку

Дизайны у вас крутые, а по сути какой-то оверкилл. Утилита, которой раз в год пользуются, может быть и попроще. Собственно, как бесплатные аналоги.

2

Комментарий удален

Читать все 1 комментарий
Принцип «Всё смотрю». Часть 1

Дисклеймер. Я подметил принцип, которым, как мне кажется, пользуются многие руководители проектов, продуктов, компаний. Решил записать своё наблюдение в виде наглого утверждения — мол, вот так вот всё устроено! — чтобы дать уважаемым читателям материал для обсуждения и узнать их мнение.

Дефицит цифровых кадров в России и их подготовка

Весь мир переходит в цифровую среду. Пока в ежегодном глобальном рейтинге конкурентоспособности Россия занимает 43-е место, но задерживаться на нем не намерена. Для этого правительство запустило программу «Цифровая экономика РФ», которая будет поддерживать цифровую экономику в стране и подготовку необходимых кадров.

«Типографика в будущем»: дизайнер описывает, как дизайн и шрифты показывают футуризм в научной фантастике Статьи редакции

Разбирает «Валли», «Бегущего по лезвию» и другие фильмы, показывает, как создать свой шрифт «из будущего».

«Российский рынок акций был и остаётся одним из самых привлекательных в мире»

Виталий Исаков, директор по инвестициям УК «Открытие» («Открытие Инвестиции»).

Объявлены победители Finlanding
Netflix оценил выгоду от «Игры в кальмара» почти в $900 млн Статьи редакции

В 40 раз больше суммы, которую онлайн-кинотеатр заплатил за сериал.

«Spotify: История продукта». Как мы разработали алгоритмы музыкальных рекомендаций

Из онлайн-библиотеки — в сервис персонализированных рекомендаций.

Недвижимость в разных странах: что там с арендой, риелторами и ипотекой

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

Будущее наступит во вторник на OneRetailConf
ИИ помог мошенникам украсть $35 млн, Facebook согласился сотрудничать с регуляторами и другие новости из мира МО
Флаги Китая и США развеваются у здания компании в Шанхае, Китай, 14 апреля 2021 года. REUTERS / Aly Song
Как мы запустили MVP, получили первые продажи за 1,5 месяца и сэкономили 1 млн рублей

Рассказываем, как команда Minisol за 1,5 месяца помогла клиенту превратить идею в перспективный стартап и сколько стоил каждый этап.

null