Дизайн пользовательского интерфейса
Первое впечатление пользователя от вашего приложения — самое важное. Если людям сразу понравится приложение, они будут более вовлечены в работу с ним. Коэффициент конверсии в этом случае может превысить 90 %.
Вход через Facebook позволяет пользователю быстро приступить к работе с приложением, а вам — учесть его интересы и другие особенности. Из этого документа вы узнаете, как создать удобный процесс авторизации в приложении с помощью входа через Facebook.
1. Продемонстрируйте преимущества приложения, прежде чем предлагать людям войти в него.
Подумайте, в какой момент лучше всего предложить человеку войти в приложение. Спросите себя: когда пользователь, скорее всего, поймет, что приложение стоит того, чтобы доверить ему свою информацию?
Помните, что люди часто начинают формировать мнение о вашем приложении ещё до его скачивания. И не забывайте, что первое, на что они обращают внимание, — это дизайн.
Ниже перечислено несколько способов привлечь людей в ваше приложение:
- кратко расскажите о своем приложении;
- покажите человеку контент, доступ к которому он получит после входа;
- продемонстрируйте новые возможности;
- позвольте людям поработать с приложением, не создавая аккаунт.
кратко расскажите о своем приложении;
Кратко расскажите о своем приложении и его преимуществах. С тех пор как человек скачал приложение или обратил на него внимание в магазине, могло пройти уже немало времени.
Покажите человеку контент, доступ к которому он получит после входа.
Покажите человеку, что его ждет в приложении, до того как он выполнит вход. Например, продемонстрируйте ему фоновое фото, как на примере. Изображение необязательно должно быть детальным. Даже нечеткие изображения панелей Pinterest стимулируют людей входить в него.
Продемонстрируйте новые возможности
Если для успешной работы с приложением требуется дополнительное обучение, разместите пошаговое демо над кнопкой "Вход". В этом случае человек может выбрать: узнать больше о вашем приложении или немедленно войти в него, если он к этому готов.
Дайте людям возможность поработать с приложением без создания аккаунта
Если это возможно, сделайте так, чтобы люди могли опробовать ваше приложение без необходимости входить в него. Например, многие интернет-магазины, такие как Zulily, не просят людей выполнить вход, пока те не будут готовы оформить покупку.
2. Избегайте лишних действий.
Сокращение количества действий — один из наиболее эффективных способов повысить коэффициент конверсии.
Не нужно просить пользователей сначала нажать кнопку "Вход" или "Зарегистрироваться", чтобы получить доступ к кнопке входа через Facebook. При использовании входа через Facebook это излишне. Человеку не нужно даже задумываться над тем, есть ли у него аккаунт.
Также не стоит предлагать людям создать имя пользователя или пароль после входа через Facebook. Большинство использует вход через Facebook именно потому, что "это просто, быстро и не нужно вводить пароль". После входа на Facebook люди тем более не хотят создавать имя пользователя или пароль.
3. Кнопка "Вход через Facebook".
Кнопка "Вход через Facebook" из наших SDK легко интегрируется и имеет встроенные подсказки, благодаря чему она одинаково выглядит и работает во всех приложениях.
В зависимости от контекста рекомендуем использовать для кнопки создания аккаунта и входа через Facebook надпись "Продолжить с Facebook" или "Вход через Facebook".
Как допускается использовать надпись "Вход через Facebook"
Как допускается использовать надпись "Продолжить с Facebook"
Как допускается использовать надпись "Продолжить как [имя]"
Выше показаны рекомендуемые варианты дизайна, которые обычно одобряются нашими проверяющими. Но если вам нужен уникальный дизайн, придерживайтесь при его разработке следующих инструкций.
Логотип
Чтобы обеспечить узнаваемость логотипа и доверие пользователей, используйте только утвержденный логотип Facebook в виде буквы "f" из Центра ресурсов бренда Facebook.
Если в дизайне кнопки входа используется логотип в виде буквы "f", он должен стоять перед призывом к действию. Запрещено использовать логотип как часть призыва (например, "Войти через [логотип "f"]").
Цвет
Использование цвета позволяет повысить узнаваемость. С точки зрения практичности, чем быстрее люди поймут, что это за кнопка и для чего она, тем быстрее они нажмут ее.
В цветовом оформлении кнопки используйте только белый и фирменный синий цвет Facebook — 5890FF. Когда люди говорят о входе через Facebook, они обычно вспоминают "синюю кнопку". Если указанный оттенок синего по каким-то причинам невозможно использовать, выберите черно-белый вариант.
КОДЫ ФИРМЕННОГО СИНЕГО ЦВЕТА FACEBOOK
- CMYK Coated: 83 / 52 / 00 / 00
- CMYK Uncoated: 77 / 36 / 00 / 00
- PMS: 2727C
- PMS: 2382U
- Hex: #1877F2
- R = 24, G = 119, B = 242
Текст
В зависимости от контекста рекомендуем использовать для кнопки надпись "Продолжить с Facebook" или "Вход через Facebook". Если вы решили скомбинировать призыв к действию и логотип Facebook в виде буквы "f", скачайте его официальную версию из Центра ресурсов бренда Facebook.
Текст призыва к действию должен находиться на самой кнопке входа, а не рядом с ней.
Выберите наиболее подходящие, с вашей точки зрения, тип шрифта и межбуквенное расстояние и оптимизируйте стиль написания, чтобы надписи легко читались.
Место размещения
Кнопка входа должна быть как можно более узнаваемой. Проследите, чтобы ее было удобно нажимать. Кнопка на мобильном устройстве должна быть достаточно большой, чтобы ее можно было легко нажать большим пальцем. Проще говоря, большие кнопки эффективнее маленьких — и это действительно так.
В центре ресурсов есть логотипы в виде буквы "f" разных размеров. Используйте тот, который подходит для вашей кнопки, но следите за сохранением пропорций и типографики.
Правила
Используйте только утвержденный логотип Facebook в виде буквы "f" из Центра ресурсов бренда Facebook, придерживаясь всех рекомендаций относительно его использования.
В зависимости от контекста используйте для кнопки входа одну из двух рекомендованных надписей: "Продолжить с Facebook" или "Вход через Facebook". Текст надписи должен находиться только на кнопке, а не рядом с ней.
В логотип Facebook в виде буквы "f" запрещено вносить даже малейшие изменения (менять дизайн, масштаб, цвет и т. д.). Если правильный цвет невозможно использовать в силу технических ограничений, выберите черно-белый вариант.
Запрещено использовать на кнопке только логотип в виде буквы "f" без соответствующего призыва к действию. Рекомендуемые призывы: "Продолжить с Facebook" или "Вход через Facebook".
Запрещено размещать текст призыва к действию (например, "Продолжить с Facebook") не на самой кнопке входа, а рядом с ней.
4. Разрешения
Запрашивайте только действительно нужные разрешения
Чем меньше разрешений вы запрашиваете, тем выше вероятность, что люди предоставят их вам. По нашим наблюдениям, чем меньше разрешений вы будете запрашивать, тем выше будет показатель конверсии.
Кроме того, дополнительные разрешения можно будет запросить позже, когда люди уже познакомятся с вашим приложением.
Запрос малого количества разрешений имеет и ещё одно преимущество — возможно, вам не придется отправлять приложение на проверку входа. Для разрешений public_profile и email она не нужна.
Запрашивайте разрешения в контексте и поясняйте, зачем они требуются
Кроме того, люди с большей вероятностью дадут разрешения, если они понимают, зачем приложению нужна эта информация и как она может сделать работу с приложением удобнее. Поэтому запрашивать разрешение следует тогда, когда люди пытаются выполнить в вашем приложении действие, для которого требуется это разрешение.
Например, приложение Facebook запрашивает разрешение на использование служб геолокации, только когда человек касается кнопки местоположения при обновлении своего статуса.
5. Реализуйте возможность выхода из приложения.
Если человек выполнил вход, он должен иметь возможность выйти, отключить свой аккаунт или совсем удалить его. Это не только проявление вежливости, но также требование наших правил для разработчиков в отношении входа.
Например, приложение для знакомств Tinder позволяет скрыть карточку профиля, чтобы ее нельзя было найти, выйти из приложения или полностью удалить аккаунт.
6. Проведите тестирование и измерьте показатели.
Даже у лучших разработчиков удачный процесс входа в приложение получается не с первого раза. Чтобы людям было удобно входить в приложение, разработчикам приходится провести множество тестов.
Рекомендуем провести качественную оценку перед запуском приложения, чтобы узнать, как люди реагируют на то, что видят. Необязательно использовать формальные методы. Важно просто понаблюдать за тем, как люди взаимодействуют с вашим приложением.
В дополнение к качественным тестам используйте инструменты аналитики, чтобы узнать, завершают ли люди процесс входа, и оценить общие показатели конверсии. Если вы соблюдаете все рекомендации, коэффициент конверсии для приложения может достигать 90 % и более.