Редизайн экрана входа в мобильное приложение Facebook — пример UX | Ариволи Д. Селвам
Для создания персонализированного интерфейса для пользователей Facebook
Предоставлено: Катерина БелеффиЯ присоединилась к Facebook в 2010 году и за четыре года до этого перешла на мобильную платформу. Основная причина, по которой я использую Facebook, — установить прочную связь с внешним миром и с кругом друзей. Это также помогает мне делиться своими личными достижениями, мыслями, повседневными делами и т. д., а также слышать подобные обновления от людей, за которыми я слежу и которые мне нравятся. Эй! подождите, я также использую Facebook «чтобы оставаться на связи с мемами 😄».
Цифровой дизайн похож на живопись, за исключением того, что краска никогда не высыхает. -Neville Brody
Основываясь на этом, я решил нарисовать (переделать) экран входа в мобильное приложение Facebook. Несмотря на то, что мне нравится текущая страница входа в систему за ее минималистичный пользовательский интерфейс, как дизайнер я считаю, что ее можно улучшить.
Прежде чем приступить к процессу редизайна, я решил создать свой собственный процесс дизайнерского мышления, который подойдет для этого проекта. Это дало мне четкое представление о процессе и позволило применить подход к решению проблем.
Подход к дизайн-мышлениюЯ создал гипотезу, основанную на заявлении о редизайне. Это помогает мне проверить мои предположения, а также проверить минимально жизнеспособный продукт. Ниже я изложил гипотезу:
. Я считаю, что изменение дизайна страницы входа в мобильное приложение Facebook придаст пользователю индивидуальность и улучшит взаимодействие с продуктом. Это даст пользователю дополнительные функции безопасности. Это поможет продукту удержать клиентов.
Клиенты всегда знают, что не так. Они не всегда могут сказать вам, чего хотят, но всегда могут сказать, что не так. — Карли Фиорина
После создания гипотезы здесь было невероятно важно быть чутким. Для того, чтобы понять стоит ли решать наш редизайн?. Я решил использовать ориентированный на пользователя подход. Я провел опрос пользователей, чтобы записать количественные данные.
Результат опроса пользователей GoogleПримечание: Facebook является глобальным продуктом, и все их дизайнерские решения принимаются на основе анализа глобальных эмпатических данных, и после работы международная команда принадлежит к культуре и практикам. Этот опрос был посвящен пользователю мобильного приложения Facebook, проживающему в Индии.
Я начал проект редизайна с множеством вопросов. Я твердо верю, что задавать вопросы — это лучший способ получить информацию, которая поможет мне принимать решения.
Важно никогда не переставать задавать вопросы — Альберт Эйнштейн
- Что думают дизайнеры Facebook?
- Как Facebook стал успешным продуктом?
- Что такое дополнительные функции безопасности на Facebook?
- Какие проблемы связаны с паролем?
Я понял, что для того, чтобы получить ответы на эти вопросы, очень важно провести фоновое исследование в моем процессе проектирования, потому что оно собирает информацию о контексте и пространстве, в котором будет находиться будущий дизайн.
Как Facebook стал успешным продуктом?
- Зная важность смирения.
- Обеспечивает интеллектуальный мобильный пользовательский интерфейс (UX).
- Быстрое определение причин, по которым что-то пошло не так.
- Предлагая лучшее решение проблемы пользователя.
- Уделение внимания как объективным, так и субъективным потребностям пользователя.
Что думают дизайнеры Facebook?
Я просто погуглил «навыки дизайнера Facebook», и он предложил видео на YouTube «Семинар в Стэнфорде: как думает дизайнер Facebook» Джули Чжо. Она описывает, как разработка новых функций начинается с трех вопросов:
- Какую проблему людей мы решаем?
- Откуда мы знаем, что это реальная проблема?
- А как мы узнаем, что решили ее?
Джули Чжо — вице-президент по дизайну продуктов в Facebook, отвечающая за разработку основных продуктов Facebook.
Экраны входа в Facebook
Текущее мобильное приложение Facebook использует популярный и традиционный процесс входа с использованием действительного адреса электронной почты и пароля. Эти экраны входа также предоставляют пользователям возможность сбросить пароль и создать новую учетную запись.
Проблема с паролями
Эксперты по безопасности сообщили, что пароли не подходят. Итак, мы должны понять проблему, связанную с этим. В процессе установки пароля система заставляет нас выполнить несколько сложных шагов, чтобы сделать пароль более безопасным. Защищенный пароль состоит из сложных комбинаций символов или слов, которые затрудняют запоминание или запоминание.
Кредиты: giphy.comДополнительная функция безопасности на Facebook
- Пароли приложений
- Подтверждение входа
- Предупреждения/уведомления при входе
- Одноразовые пароли
- Доверенные контакты
- Мобильная безопасность
Я разбил проблему на две отдельные части и начал работать над ними параллельно:
255существующий экран входа в мобильное приложение facebook с дополнительным уровнем безопасности.
Как сделать процесс входа в систему более выразительным и привлекательным для пользователей. Биометрическая аутентификация
Face ID и Touch ID — это безопасные, хорошо известные методы аутентификации, которым люди доверяют, и вам не нужно запоминать пароль. Их включение в процесс входа обеспечит пользователям дополнительный уровень безопасности .
Facebook Reactions
Это одна из самых крутых функций Facebook. Лично мне эта функция нравится всем сердцем. Новая функция служит расширением кнопки «Нравится».
Текущие реакции FacebookЦель здесь состоит в том, чтобы предоставить пользователям структурированные и одинаково привлекательные функции. Чтобы получить это, я применил принцип симметрии из гештальт-закона и он сформулирован как
каждый стимул воспринимается в его самой простой форме
Я решил имитировать реакцию Facebook в процессе входа в систему, введя значки настроения , чтобы сделать более выразительным и привлекательным для пользователей.
Перепад настроения
Перепады настроения чаще встречаются в повседневной жизни человека. Обычно это выражается в колебаниях эмоционального состояния человека. Иконки Mood Swinger — это версия эмодзи, основанная на основных настроениях человека. Здесь я включил эти значки в процесс входа в систему, и это забавная, привлекательная и расширенная версия FaceID.
Понимание основного настроения
Более сложной задачей является определение основного настроения человека.
- Согласно Пол Экман , американский психолог . Существует шесть основных настроений: счастье, печаль, гнев, отвращение, страх и удивление.
- Facebook имеет шесть эмоциональных значков: «Нравится», «Любовь», «Ха-ха», «Вау», «Грустно» и «Злой».
- Мой Гипотеза заключается в том, что первичное настроение может функционировать как строительные блоки, а более сложное настроение представляет собой смесь основных.
Проанализировав разные точки зрения в разных контекстах, я решил разделить реакцию Facebook на два типа. Это позитивное и негативное настроение.
Наглядное представление того, как я выбирал настроение при входе в систему.Мой подход состоял в том, чтобы изменить дизайн экрана входа в систему, следуя фирменному стилю Facebook, при этом элементы брендинга остались нетронутыми.
Round1: Редизайн страницы входа с биометрической аутентификацией.
Войти весело 😊 — Здесь новая концепция заключается в том, чтобы включить настроение пользователя в процесс входа в систему, где пользователь может выбрать любой значок настроения и позу в соответствии с ним. Это даст пользователю забавный пользовательский опыт.
Безопасность реальна 😇 — Face ID обеспечивает интуитивно понятную и безопасную аутентификацию с помощью технологий, точно отображающих настроение вашего лица. После выбора настроения авторизации передняя камера автоматически открывается и отображает ваше настроение. Пользователи могут повторить позу, если возникнет какое-либо несоответствие.
Экран входа в Facebook с настроениемИграйте пальцем 🖐️ — Приложение Facebook не сохраняет ваш отпечаток пальца, оно просто получает доступ к информации из памяти устройства. Это упрощает процесс входа в систему, и пользователю больше не нужно запоминать свой пароль.
Экран входа в Facebook с распознаванием отпечатков пальцевПользовательское тестирование — Раунд 1
Чтобы подтвердить свой MVP, я поделился экранами с 6 пользователями Facebook. Пользователи, выбранные для этого этапа, такие же, как и в опросе пользователей (три человека, которые удовлетворились традиционным входом в систему, и три пользователя, которые не удовлетворены). Сбор отзывов пользователей поможет мне подтвердить мою гипотезу.
Я решил записать отзыв пользователя, разделив сеанс на два случая:
Случай 1: Запись первого впечатления пользователя о переработанной функции.
В ходе тестирования я обнаружил, что мой дизайн был чистым и простым, пользователи могли легко распознавать значки, меняющие настроение.
5 из 6 пользователей сказали, что эта функция интересна и интересна.
Case2: Публикация нескольких вопросов, которые я подготовил, опровергая гипотезу.
В ходе тестирования я обнаружил, что мой дизайн понятен и прост, пользователи могут легко распознавать значки, изменяющие настроение.
- Вас волнует эта функция?
- Придают ли эти функции индивидуальности?
- Обеспечивает ли новая функция четкую передачу информации?
- Обеспечивает ли эта функция дополнительную безопасность при входе в учетную запись?
Раунд 2: Редизайн страницы входа с применением закона Фиттса.
Проанализировав отзывы пользователей, мы решили изменить дизайн экрана входа в систему с изменением настроения, применив закон Фиттса.
Закон Фиттса: время, необходимое для достижения цели, зависит от расстояния от начальной точки и размера цели.
По мере увеличения расстояния перемещение занимает больше времени, а по мере уменьшения размера выбор снова занимает больше времени. Поэтому я решил расположить объекты на основе закона Фиттса, согласно которому значки, меняющие настроение, располагаются ближе к большому пальцу пользователя, когда он использует приложение. Таким образом, это сократит время, необходимое им для выбора.
Здесь создана гипотеза « Я решил изменить дизайн экрана входа в систему, меняя настроение, изменив расположение значков. Это поможет пользователю легко выбирать значки настроения.
Экран входа в Facebook на основе закона ФиттсаТестирование пользователей — раунд 2
Я снова проверил переработанный экран входа в систему, меняющий настроение, на той же выборке пользователя. Пользователи сказали, что теперь экран выглядит лучше, чем в предыдущей версии, и первоначальная гипотеза успешно подтвердилась.
5 из 6 пользователей сказали, что дизайн прост, а значки теперь ближе к досягаемости большого пальца.
3 из 6 пользователей предпочли связать опцию входа по электронной почте (традиционный вход) на экране входа в систему с изменением настроения.
Раунд 3: Редизайн страницы входа с технологическими возможностями
Чтобы разработать выдающийся продукт/функцию, важно иметь дальновидный подход и адаптироваться к технологиям. Это в конечном итоге помогает нашему бизнесу получить больше прибыли и конкурентоспособности.
Аутентификация по отпечатку пальца на экране — это функция, позволяющая пользователям разблокировать телефон касанием экрана. Встраивание сенсора в экран, эта технологическая функция принесет пользователю новый опыт.
Лучший способ предсказать будущее — создать его — Авраам Линкольн
На этом этапе редизайна моей целью является:
Экран входа в Facebook за счет интеграции технологических достижений
- Интегрировать аутентификацию по отпечатку пальца на экране в экран входа в мобильное приложение Facebook. .
- Уменьшите когнитивную нагрузку на пользователя, выполнив аутентификацию входа в систему на одном экране.
- В соответствии с отзывами пользователей, я добавил на экран вариант входа по электронной почте .
Аутентификация слепым касанием или полноэкранная аутентификация по отпечатку пальца: Датчик CMOS отвечает за аутентификацию по отпечатку пальца на экране, где он покрывает нижнюю половину телефона. В будущем мы можем увидеть смартфоны со всеми дисплеями, покрытыми сенсором. Я твердо верю, что это технологическое достижение делает процесс входа в мобильное приложение Facebook проще и проще.
На этом я завершаю свой трехнедельный проект по редизайну. Что ж, это был отличный опыт обучения, и я хочу поделиться некоторыми основными моментами:
- Создайте сильную гипотезу : она обеспечивает контекст, в котором вы интерпретируете результаты своего редизайна.
- Создайте свой собственный подход к дизайн-мышлению: Это даст мне четкое представление о процессе.
- Фоновое исследование — это ключ: Проведите глубокое исследование, прежде чем приступать к каким-либо редизайнам.
- Ориентированный на пользователя подход: Вовлечение пользователя в каждую часть проекта.
- Проверка исходной гипотезы: Важно проверить, предоставили ли мы полезный продукт пользователю.
- Задокументируйте, чему вы научились и чего достигли. Не просто говорите о том, что вы можете сделать, покажите, что вы сделали!
- Наберитесь терпения: Лучший дизайн не делается за одну ночь. Он проходит цикл пользовательского тестирования, проектирования и итерации!
Особая благодарность Сакину Кумару за его советы по дизайну, а также людям, которые нашли время, чтобы рассказать мне о своем мнении о моем заявлении о редизайне, мыслях и помогли протестировать мой прототип.
Icon Credits: iconscout.com и Quotes Credits: www.invisionapp.com
Спасибо за чтение! 🙏. Если вам понравился кейс, не забудьте похлопать👏, а также поделиться своими ценными отзывами в комментариях.
Ознакомьтесь с другими моими дизайнерскими работами на Behance и Dribble . Заинтересованы в совместной работе или ищете дизайнера UI/UX для найма? Свяжитесь со мной по телефону LinkedIn .
Если у вас есть какие-либо отзывы, я хотел бы услышать от вас. Оставьте свою почту здесь по адресу [email protected] .
Facebook Insights: руководство по подключению Supermetrics
Группа поддержки сайта Supermetrics
Дата изменения: ср, 14 декабря 2022 г., 16:15
Используйте это руководство, чтобы подключить данные Facebook Insights к Supermetrics.
Если вам нужно подключить этот источник данных к одному из наших хранилищ данных или облачному хранилищу, изучите наши необходимые условия и руководства по заполнению.
Прежде чем начать
Чтобы подключить Supermetrics к Facebook Insights, вам потребуется Администратор доступ к страницам, с которых вы хотите получить данные. Если вы подключены к Business Manager, вам потребуется как минимум
Page editor доступ к этим страницам. Посетите справочный центр Facebook, чтобы узнать больше о добавлении разрешений на Страницу и добавлении пользователей на Страницу в Business Manager.
Если вы используете новый интерфейс Pages, вашей учетной записи требуется Частичный доступ к связанной Странице.
Инструкции
Перед подключением убедитесь, что вы установили надстройку Supermetrics.
- Откройте новый файл Google Sheets.
- Перейдите к Extensions → Supermetrics → Запустите , чтобы открыть боковую панель Supermetrics.
- Нажмите Создать запрос .
- В разделе Источник данных выберите Facebook Insights .
- Нажмите Пуск .
- Либо войдите с новой учетной записью Facebook, либо нажмите Продолжить с Facebook , чтобы продолжить работу с учетной записью, в которую вы уже вошли.
- Нажмите Готово
. - Щелкните OK .
- Выберите учетные записи, которые вы хотите добавить в отчеты.
Узнайте о дополнительных настройках, рекомендациях и советах по устранению неполадок в Supermetrics для Google Таблиц.
Прежде чем выполнять следующие шаги, убедитесь, что вы подключили Supermetrics к Looker Studio.
- Откройте галерею источников данных Supermetrics.
- Перейдите к Facebook Insights и нажмите 9.0486 Попробуйте .
- Вы увидите две кнопки с надписью Authorize . Если вы используете Supermetrics впервые, нажмите слева и войдите в учетную запись Google, которую вы используете с Supermetrics.
- После этого или, если вы делали это раньше, нажмите правую кнопку Авторизовать (в разделе «Facebook Insights требуется авторизация для подключения к данным»).
- Выберите команду, у которой есть доступ к учетной записи, которую вы хотите подключить.
- Выберите, сделать это подключение общим или частным.
- Нажмите Пуск .
- Либо войдите с новой учетной записью Facebook, либо нажмите Продолжить с Facebook , чтобы продолжить работу с учетной записью, в которую вы уже вошли.
- Прокрутите страницу вниз. Чтобы создать отчет с нашим шаблоном, выберите Использовать шаблон отчета для новых отчетов . Чтобы создать пустой отчет, снимите этот флажок.
- В правом верхнем углу панели щелкните Подключить .
- Нажмите Создать отчет .
- Нажмите Добавить в отчет .
Узнайте о дополнительных настройках, рекомендациях и советах по устранению неполадок в Supermetrics для Looker Studio.
Перед подключением убедитесь, что вы установили надстройку Supermetrics.
- Откройте файл Excel.
- Щелкните Данные → Показать суперметрики.
- В разделе Источник данных выберите Facebook Insights .
- Выберите, сделать ли это подключение общим или частным.