Как сказать «за три шага» без штампов
Понравился блок на лендинге Альфа-Банка. Здесь рассказывают, как устроена оплата через сервис «Подели». Считывается легко, культурная отсылка — респект 👍
#подсмотрела_у_других
#тут_лендинг
Понравился блок на лендинге Альфа-Банка. Здесь рассказывают, как устроена оплата через сервис «Подели». Считывается легко, культурная отсылка — респект 👍
#подсмотрела_у_других
#тут_лендинг
💡 UX и UI — в чем разница на примере Яндекс Афиши
На эти выходные у нас с мужем были билеты на Stand up, которые мы купили на Яндекс Афише. Но так вышло, что мы приболели, и вот я захотела вернуть билеты.
Мне очень понравился процесс оформления возврата: кнопка нашлась быстро, понятно объяснили про сроки, даже предупредили, где ждать ответа и что не нужно брать штурмом поддержку. Вот это все и есть UI (User Interface — «пользовательский интерфейс») — то есть то, как интерфейс выглядит.
Потом мне пришло письмо, что для возврата я должна прислать справку от врача или больничный лист. И это шок: я даже в вуз при пропусках их не носила, а тут понадобился отчет сервису по продаже билетов. В конце концов, я взрослый человек, а такие поход к врачу оттягивают до последнего.
Вся эта история со справкой уже UX (User Experience — «пользовательский опыт») — то есть то, как продукт работает.
И это отличный пример, когда плохой UX сводит на нет всю радость от хорошего UI.
#подсмотрела_у_других
На эти выходные у нас с мужем были билеты на Stand up, которые мы купили на Яндекс Афише. Но так вышло, что мы приболели, и вот я захотела вернуть билеты.
Мне очень понравился процесс оформления возврата: кнопка нашлась быстро, понятно объяснили про сроки, даже предупредили, где ждать ответа и что не нужно брать штурмом поддержку. Вот это все и есть UI (User Interface — «пользовательский интерфейс») — то есть то, как интерфейс выглядит.
Потом мне пришло письмо, что для возврата я должна прислать справку от врача или больничный лист. И это шок: я даже в вуз при пропусках их не носила, а тут понадобился отчет сервису по продаже билетов. В конце концов, я взрослый человек, а такие поход к врачу оттягивают до последнего.
Вся эта история со справкой уже UX (User Experience — «пользовательский опыт») — то есть то, как продукт работает.
И это отличный пример, когда плохой UX сводит на нет всю радость от хорошего UI.
#подсмотрела_у_других
❤1
Для меня идеал интерфейсного текста — который не замечаешь. Когда тогда ты не отвлекаешься от своей задачи, просто идешь по флоу и делаешь то, за чем пришел.
Такой текст не обязательно вызывает эмоции и заставляет кайфовать. Потому что какие эмоции, если ты не вчитываешься? Заметьте: тебе не нужно вчитываться — и это ок.
При этом здорово, если будет какая-то фишечка, которая зацепит. Вот в Телеграме для меня такой стала функция «Разжаловать админа».
Весь интерфейс нейтральный и спокойный, а тут это. И ты сразу себя чувствуешь королем 🤴
#подсмотрела_у_других
Такой текст не обязательно вызывает эмоции и заставляет кайфовать. Потому что какие эмоции, если ты не вчитываешься? Заметьте: тебе не нужно вчитываться — и это ок.
При этом здорово, если будет какая-то фишечка, которая зацепит. Вот в Телеграме для меня такой стала функция «Разжаловать админа».
Весь интерфейс нейтральный и спокойный, а тут это. И ты сразу себя чувствуешь королем 🤴
#подсмотрела_у_других
📝 Как Кинопоиск запрашивает данные
Спокойно и уверенно, мне понравилось. А еще вот это «Яндекс ID — ключ от всех сервисов» 💔
#подсмотрела_у_других
Спокойно и уверенно, мне понравилось. А еще вот это «Яндекс ID — ключ от всех сервисов» 💔
#подсмотрела_у_других
💩 Про эмодзи в интерфейсе
Мы в Авито любим эмодзи — они делают текст более живым, привлекают внимание и добавляют дополнительные смыслы. При этом это еще и дешевый способ разбавить текст, в отличие от авторского пака иконок, к примеру.
В общем, это отличный инструмент, если руководствоваться правилами. Вот какие выработали для себя мы.
🤩 Используем сдержанно и учитываем контекст. Например, если что-то упало или заблокировано, никакой эмодзик не спасет — может наоборот бесить.
👹 Ищем не заезженный вариант. Хлопушки, конфетти, огонечки и сердечки — это хорошо, но не цепляет внимание.
😩 Проверяем год появления и отображение на разных устройствах. Потому что они могут выглядеть по-разному или вообще не показываться, если пользователь не обновил операционную систему. Смотрим это на emojipedia.org и ориентируемся на эмоджи до 2019 года включительно.
🧐 Отказываемся от эмодзи с неясным смыслом. Даже привычные всем эмодзи люди могут воспринимать по-разному, что говорить про такие варианты 🤲 🤙 🙇♂️
Мы в Авито любим эмодзи — они делают текст более живым, привлекают внимание и добавляют дополнительные смыслы. При этом это еще и дешевый способ разбавить текст, в отличие от авторского пака иконок, к примеру.
В общем, это отличный инструмент, если руководствоваться правилами. Вот какие выработали для себя мы.
🤩 Используем сдержанно и учитываем контекст. Например, если что-то упало или заблокировано, никакой эмодзик не спасет — может наоборот бесить.
👹 Ищем не заезженный вариант. Хлопушки, конфетти, огонечки и сердечки — это хорошо, но не цепляет внимание.
😩 Проверяем год появления и отображение на разных устройствах. Потому что они могут выглядеть по-разному или вообще не показываться, если пользователь не обновил операционную систему. Смотрим это на emojipedia.org и ориентируемся на эмоджи до 2019 года включительно.
🧐 Отказываемся от эмодзи с неясным смыслом. Даже привычные всем эмодзи люди могут воспринимать по-разному, что говорить про такие варианты 🤲 🤙 🙇♂️
🔥2
А вот как другие компании используют эмодзи в интерфейсах:
🔹 Вкусвилл добавляет их в навигацию
🔹 приложение Шедеврум (это нейросеть Яндекса) ставит в конце некоторых текстов
На мой взгляд, в обоих случаях это уместно.
#подсмотрела_у_других
🔹 Вкусвилл добавляет их в навигацию
🔹 приложение Шедеврум (это нейросеть Яндекса) ставит в конце некоторых текстов
На мой взгляд, в обоих случаях это уместно.
#подсмотрела_у_других
Интересно следить, как Яндекс Маркет экспериментирует с блоком для Сплита. Особенно зацепила вариация на 6 месяцев. Вижу два недостатка:
🔹 вроде цифры привлекают, но 152×6 сбивает с толку — порядок отличается от бейджика, поэтому как будто чуток выбивается из ряда
🔹 фраза «далее 6 платежей ежемесячно» дает ощущение, что нужно каждый месяц делать по 6 платежей
Но в любом случае это отличный пример емкой конструкции. Мы как раз решаем подобную задачку, поэтому сохраняю в копилку.
#подсмотрела_у_других
🔹 вроде цифры привлекают, но 152×6 сбивает с толку — порядок отличается от бейджика, поэтому как будто чуток выбивается из ряда
🔹 фраза «далее 6 платежей ежемесячно» дает ощущение, что нужно каждый месяц делать по 6 платежей
Но в любом случае это отличный пример емкой конструкции. Мы как раз решаем подобную задачку, поэтому сохраняю в копилку.
#подсмотрела_у_других
Как Сбер обрабатывает ошибки
Похоже, банк пытается бороться со своим имиджем строгого и заплесневевшего гиганта: вон и словечки разговорные, и иконки веселенькие... Хотя как по мне, начинать надо с процессов — тогда и tone of voice подтянется.
#подсмотрела_у_других
#тут_ошибка
Похоже, банк пытается бороться со своим имиджем строгого и заплесневевшего гиганта: вон и словечки разговорные, и иконки веселенькие... Хотя как по мне, начинать надо с процессов — тогда и tone of voice подтянется.
#подсмотрела_у_других
#тут_ошибка
Страница 404 у Яндекс Дзена
Мне кажется, это одна из самых сложных задач — придумать такую страницу. Вроде и пользы мало можно дать, разве что ссылку на главную. И страница не так важна, чтобы бизнес вкладывал в сложные решения. И креативить не всем дано и не всем нужно, будем честны.
А вот Дзен постарался. Забавные фразочки, разные иллюстрации и целый набор экранов для 404 — кайф. Правда я не знаю, может вечно можно не только смотреть на эту страницу, но и обновлять ее?)
#подсмотрела_у_других
#тут_ошибка
Мне кажется, это одна из самых сложных задач — придумать такую страницу. Вроде и пользы мало можно дать, разве что ссылку на главную. И страница не так важна, чтобы бизнес вкладывал в сложные решения. И креативить не всем дано и не всем нужно, будем честны.
А вот Дзен постарался. Забавные фразочки, разные иллюстрации и целый набор экранов для 404 — кайф. Правда я не знаю, может вечно можно не только смотреть на эту страницу, но и обновлять ее?)
#подсмотрела_у_других
#тут_ошибка
Еще один залипательный пример обнаружился у Яндекс Доставки. Тут правда ездят машинки и ходят курьеры 📦
#подсмотрела_у_других
#тут_ошибка
#подсмотрела_у_других
#тут_ошибка
🔥2
📒 Всегда сохранять все варианты
Как-то мне пришлось делать интерфейс для оплаты через СБП. Особенность оплаты через СБП в том, что она за пределами нашего биллинга: мы как бы отправляем запрос и ждем ответ от банка, подтвердил человек платеж или нет. На нашей стороне есть окно ожидания, а на нем — стрелочка для выхода из всего сценария. Например, если пользователь устал ждать.
Интерфейс делали на базе уже существующего флоу, поэтому часть решений переиспользовали. Одно из них оказалось спорным: при клике на эту стрелочку интерфейс почему-то спрашивал «Отменить заказ?». Хотя на самом деле оплата еще может пройти. Так мы создавали неверные ожидания, и я предлагала изменить текст на что-то вроде «Закрыть окно? Мы сообщим, если оплата пройдёт». Но в итоге решили оставить существующий текст, чтобы не повлиять на результаты AB-теста.
Спустя время проблема с этим экраном вернулась и мы стали думать, что же делать: убрать стрелочку совсем, поменять формулировки или что-то еще. Собрали целую встречу, чтобы это обсудить.
И вот тут я как фокусник из цилиндра достала текст, сделанный еще для предыдущей итерации. Мы согласовали его за 5 минут, и задачка быстро ушла в прод.
💡 Вывод: всегда полезно где-то у себя в драфтах сохранять отброшенные варианты. Какие-то просто не попали в релиз, какие-то не прошли по требованиям — но в любом случае может возникнуть необходимость к ним вернуться.
#про_лайфхаки
Как-то мне пришлось делать интерфейс для оплаты через СБП. Особенность оплаты через СБП в том, что она за пределами нашего биллинга: мы как бы отправляем запрос и ждем ответ от банка, подтвердил человек платеж или нет. На нашей стороне есть окно ожидания, а на нем — стрелочка для выхода из всего сценария. Например, если пользователь устал ждать.
Интерфейс делали на базе уже существующего флоу, поэтому часть решений переиспользовали. Одно из них оказалось спорным: при клике на эту стрелочку интерфейс почему-то спрашивал «Отменить заказ?». Хотя на самом деле оплата еще может пройти. Так мы создавали неверные ожидания, и я предлагала изменить текст на что-то вроде «Закрыть окно? Мы сообщим, если оплата пройдёт». Но в итоге решили оставить существующий текст, чтобы не повлиять на результаты AB-теста.
Спустя время проблема с этим экраном вернулась и мы стали думать, что же делать: убрать стрелочку совсем, поменять формулировки или что-то еще. Собрали целую встречу, чтобы это обсудить.
И вот тут я как фокусник из цилиндра достала текст, сделанный еще для предыдущей итерации. Мы согласовали его за 5 минут, и задачка быстро ушла в прод.
💡 Вывод: всегда полезно где-то у себя в драфтах сохранять отброшенные варианты. Какие-то просто не попали в релиз, какие-то не прошли по требованиям — но в любом случае может возникнуть необходимость к ним вернуться.
#про_лайфхаки
🔥2
Случайно ткнула в рекламу на Озоне и увидела милую шторку с объяснением, что это за штука такая. Мне понравился текст и сам подход: вот у нас есть реклама, она помогает продавцам, а вот кстати, кто заказал именно этот баннер. Еще и с пользой для части аудитории: если ты продавец и тоже хочешь на главную приложения, вот тебе ссылочка.
Ради интереса пошла проверить, как такой же блок оформили на Маркете. Оказалось — практически никак. И вроде сказали все, что попросили юристы, но на контрасте как-то грустненько.
#подсмотрела_у_других
Ради интереса пошла проверить, как такой же блок оформили на Маркете. Оказалось — практически никак. И вроде сказали все, что попросили юристы, но на контрасте как-то грустненько.
#подсмотрела_у_других
Оказывается, свои дизайн-системы были даже у книгопечатников
Первая датированная книга, напечатанная в России, это «Апостол». На некоторых четных страницах там были гравюры со святыми. Изготовление их — дело трудоемкое, и Иван Федоров придумал, как облегчить процесс.
Секрет в том, что гравюры были составные. Для фигуры святого делали одну доску, а для триумфальной арки, в которой он находится, другую. Так можно где угодно использовать ту же арку, а менять только человеческие фигуры. Ну чем не прообраз компонентов в Фигме?
Этот факт я узнала на экскурссии по музею книги в Ленинке. Кроме него там проводят по библиотеке, показывают каталоги, читальные залы и устройства для перемещения книг. Советую сходить.
Первая датированная книга, напечатанная в России, это «Апостол». На некоторых четных страницах там были гравюры со святыми. Изготовление их — дело трудоемкое, и Иван Федоров придумал, как облегчить процесс.
Секрет в том, что гравюры были составные. Для фигуры святого делали одну доску, а для триумфальной арки, в которой он находится, другую. Так можно где угодно использовать ту же арку, а менять только человеческие фигуры. Ну чем не прообраз компонентов в Фигме?
Этот факт я узнала на экскурссии по музею книги в Ленинке. Кроме него там проводят по библиотеке, показывают каталоги, читальные залы и устройства для перемещения книг. Советую сходить.
🔥4
Классный виджет для статусов в Фигме
При работе в Фигме у меня есть две привычки:
— сохранять разные варианты
— оставлять заметки на стикерах
Сегодня я столкнулась с еще одной болью — когда вариантов много, хочется как-то пометить свой фаворит. Можно сделать стикер и на нем написать, но... Я нашла виджет, в котором уже предустановлены куча статусов. Например, драфт, есть риски, нужна помощь, готово и проч. Все разных цветов, с иконками и даже можно поставить фотоподпись.
Пока не знаю, приживется ли, но все равно оставляю ссылку 👉 StatusStamp
#про_фигму
При работе в Фигме у меня есть две привычки:
— сохранять разные варианты
— оставлять заметки на стикерах
Сегодня я столкнулась с еще одной болью — когда вариантов много, хочется как-то пометить свой фаворит. Можно сделать стикер и на нем написать, но... Я нашла виджет, в котором уже предустановлены куча статусов. Например, драфт, есть риски, нужна помощь, готово и проч. Все разных цветов, с иконками и даже можно поставить фотоподпись.
Пока не знаю, приживется ли, но все равно оставляю ссылку 👉 StatusStamp
#про_фигму
👍2