Как добавить фавикон (favicon, иконку в браузере)?
Чтобы загрузить фавикон, перейдите: «Настройки сайта» → «SEO» → «РЕДАКТИРОВАНИЕ ИКОНОК (FAVICONS)» → «Загрузить файл». Исходя из особенностей поисковых систем, рекомендуем загружать файл размером 32px × 32px и только в формате .ico, название файла должно быть favicon.ico (без цифр и других символов).
После этого обязательно переопубликуйте все страницы вашего проекта.
Создать фавикон вы можете при помощи сервиса xiconeditor.
Примечание: чтобы фавикон начал отображаться в результатах выдачи в поиске Яндекса, необходимо, чтобы Яндекс обновил информацию о сайте. Этот процесс может занимать до 2-х месяцев и зависит от поисковой системы.
Похожие вопросы
- Как сделать «шапку» (header, хедер) сайта?
- Как добавить HTML-код в Head сайта?
- Как создать сайт на нескольких языках?
- Как скопировать страницу?
- Как добавить еще одну страницу на сайт?
На десктопе или в телефоне: бесячие различия в фичах популярных сервисов
Одинаковые иконки для разных функций в «Яндекс Музыке», костыльные корзины Ozon, запись звонка в Zoom, неудобный поиск Lamoda.
Иллюстрация: Аня Макарова для Skillbox Media
Яна Дворецкая
Пишет про тексты в интерфейсе, проектирование и дизайн. Развивает направление UX-редактуры в Skyeng. Ведет телеграм-канал про редактуру «Письма от Яны Дворецкой»
Дизайн-команды крупных брендов порой поступают странно. Убирают критически важные функции из мобильной версии и пичкают ненужность в десктопную, и наоборот.
Окей, иногда в этом есть здравый смысл. Например, пользователям Zoom неудобно рисовать на доске с телефона, так зачем захламлять мобильную версию лишней фичей? Но часто это просто ошибки. Посмотрим на десктопные и мобильные версии популярных сервисов и выясним, что там бесит сильнее всего.
«Яндекс Музыка»
Разные иконки в мобильном приложении и на десктопе. Иконки в интерфейсе ускоряют восприятие информации: если понравилась песня, кликаешь на сердечко — ясно, что это избранное.
В «Яндекс Музыке» всё же решили покреативить: сердечко используется в мобильном приложении ещё для двух функций — «Отложить на полку» и «Подписаться на подкаст». Приходится вчитываться, а не верить иконкам на слово.
Такие расхождения в версиях чаще всего случаются, когда над дизайном работают разные команды с разным видением пользовательского опыта.
Как улучшить. Унифицировать иконки для десктопной и мобильной версии, чтобы обеспечить бесшовный пользовательский опыт, и сделать разные иконки для разных опций, чтобы взаимодействие стало интуитивно понятным и более быстрым.
Telegram
Нельзя записать кружок с десктопа. В мобильной версии это экономит время, и разбавляет однообразный текстовый контент, если вы ведёте свой канал. При этом в десктопе на Windows и в веб-версии кружочки почему-то недоступны.
Как улучшить. В Telegram посчитали опцию ненужной для пользователей с десктопа — почему же? На компьютере ведь тоже есть камера!
Ozon
Одно слово приходит на ум после посещения маркетплейса — шум.
На сайте смотрится спокойнее: крупные изображения товаров разбавляют кричащие лейблы, но полностью это проблему не решает. Здесь могли бы помочь общие требования к изображениям товаров. Например, «Яндекс Маркет» показывает ту же информацию, но делает это гораздо спокойнее:
Разные иконки для корзины. В карточках некоторых товаров две кнопки корзины (какую выбрать, чтобы уничтожить человечество?): одна предлагает доставку за 30 минут, другая — сегодня. Отвлечёмся от того, что это кажется костыльным решением, посмотрим на иконки — в мобильном приложении и на сайте разные иконки корзины.
Поиск в мобильной версии перегружен. В телефоне он пристыковывается к верхней панели — а там и так много индикаторов и адрес доставки. Получается как-то совсем тесно и шумно для элемента, который используют очень часто.
При этом если заблюрить страницу в десктопной версии, то видим, что сильнее притягивает внимание именно поисковая строка:
Как улучшить:
- Для начала всё-таки избавиться от двух кнопок, одна из которых ещё и красная. Хотели убрать один шаг в процессе покупки, но запутали ещё больше. Лучше оставить одну кнопку — «В корзину» — и уже там предложить варианты доставки.
- Унифицировать иконки. Пользователи проводят в интернет-магазинах много времени, иконки снижают когнитивную нагрузку, позволяют не читать навигационные элементы.
- Облегчить поисковую строку в мобильной версии можно, если переместить иконку с самолётом (продажу билетов) и иконку с чатами, а также опустить ниже поисковую строку — ближе к середине, например как в «Еаптеке». Или поставить её внизу экрана, чтобы было проще дотянуться пальцем.
«ЛитРес»
Будучи книжным червём, я знаю наверняка, что поиск книг в мобильном приложении и на десктопе «ЛитРеса» — две параллельные вселенные. Бывает, не могу найти в мобильном приложении книги, которые после проверки оказываются на сайте. Возможно, это просто мистика.
Смотрим дальше. В приложении странная комбинация доступных валют. Где же рубль? К слову, на десктопе такого не наблюдалось.
Нет озвучки текста. Я могу залениться читать и переключиться в мобильном приложении на аудиоверсию. Но на десктопе, извините, читайте сами. Такой опции не предусмотрено.
Как улучшить. Добавить иконку озвучки в десктопную версию, в том числе для инклюзивности. А также унифицировать иконки для закладок — сейчас они разные в мобильной и десктопной версиях.
Stepik
Если кто не знает, это образовательная платформа, на которой любой желающий может создать онлайн-курс.
Да, учиться теперь не за столом, ёрзая на неудобном стуле, а прямо лёжа на диване с телефоном в руках. Красота! Но не торопитесь расслабляться. В Stepik придётся сесть за парту, как приличному ученику, ведь видеоплеер в мобильном приложении не подстраивается под размер экрана.
Как улучшить. Настроить эмбед для плеера так, чтобы видео встало в экран и не приходилось скроллить. Это важно, так как основной сценарий для обучающих приложений на мобильном — это как раз просмотр лекций.
Zoom
Нет записи встречи в мобильном. Мы дожили до того, что проводим встречи прямо в смартфоне. Почему же мобильную версию лишили функции записи?
Настройки чата в мобильном запрятаны. Приведу пример. Знак пешеходного перехода всегда стоит возле пешеходного перехода. Это правило, так должно быть. Если знак стоит на другой улице — это знак для другого перехода. Объекты, расположенные достаточно близко друг к другу, воспринимаются как единая группа. Это упрощает восприятие информации.
Тогда почему настройки чата в мобильном приложении Zoom убежали от чата? Найти их можно аж в третьем уровне в навигации. Представьте, как неприятно сновать по вкладкам в мобильном приложении, если вы на встрече.
При этом в десктопной версии всё ок — вот чат, вот и настройки.
Как улучшить. Разместить настройки рядом с функцией или внутри самой функции. Это и экономит время и когнитивные ресурсы пользователей, и не отвлекает внимание от встречи.
HeadHunter
Опция-сюрприз в мобильном приложении. В мобильном приложении можно узнать, сколько человек уже откликнулись на вакансию. При этом с десктопа посмотреть количество откликов нельзя.
Как улучшить. Добавить секретную опцию в десктопную версию, а то нечестно как-то.
Lamoda
Поиск по фотографии — только в мобильной версии. Минималистичный дизайн интернет-магазина Lamoda покорил. Минимум шума, тонкая обводка иконок, отсутствие кричащих оттенков — можно целый день выбрать себе одежду, и глаза не устанут. А ещё Lamoda порадовала поиском одежды по фотографии. Правда, эта опция почему-то оказалась доступной только в мобильном приложении.
В десктопной версии пользователь может воспользоваться лишь стандартным поиском, а жаль.
Как улучшить. Добавить поиск по фотографии в десктопную версию. Возможно, в Lamoda выяснили, что это не приоритетный сценарий, но опция настолько удобная, что я не знаю, кому бы она не пригодилась.
Напоследок
Крупные сервисы всегда проверяют решения на пользователях — и не один раз, а итеративно. Поэтому мои находки — едва ли просто ляпы (вероятно, у них найдётся объяснение для каждого). Хотя всё может быть.
Больше интересного про дизайн в нашем телеграм-канале. Подписывайтесь!
Другие материалы о дизайне интерфейсов
- «Интерфейс»: основы проектирования удобных систем
- 8 ошибок в дизайне интерфейсов, которые раздражают пользователей
- Проектирование интерфейса: 8 принципов, которые должен знать каждый UX-дизайнер
- Логические ошибки в интерфейсах
- «Психбольница в руках пациентов». Как правильно проектировать интерфейсы
15 скрытых функций «Яндекс.Музыки», о которых вы могли не знать
Мы рассказали о неочевидных возможностях Apple Music и YouTube Music. Пришло время посмотреть, какие скрытые функции есть в «Яндекс.Музыке», втором по популярности платном стриминге у читателей «Афиши Daily».
Включите темную тему
Самое лучшее в темной теме «Яндекс.Музыки» — она есть и в приложении, и на сайте. Если будете на вечеринке ставить музыку с ноутбука, оцените, насколько удобно — свет от экрана не бьет в глаза.
Как это сделать
В приложении зайдите в «Мою музыку» — настройки — «Темная тема». На сайте зайдите в «Мою музыку» — настройки — «Прочее» — «Темная тема»
Подробности по теме
15 функций Apple Music, о которых вы могли не знать
Ищите песню по строчке
Для тех, кто не помнит ни имени музыканта, ни названия песни, но почему-то знает какую-то случайную строчку. «Яндекс.Музыка» найдет песню по строчке, если в каталоге есть ее текст. Иногда песня ищется по напеву, например, «эрондондон» поможет найти песню «Get Low» из Need for Speed: Underground.
Слушайте редакторские и умные плейлисты
В «Яндекс.Музыке» три вида плейлистов: составленные пользователями, редакторами стриминга и алгоритмами. Последних четыре, и они уникальны для каждого слушателя: «Плейлист дня», «Дежавю», «Премьера» и «Тайник». Чем больше песен вы слушаете, чем больше лайкаете или дизлайкаете, тем более интересными они будут. Остальные составлены или редакторами «Яндекс.Музыки», например как «Хайп», или пользователями, например как сборники канала «Всякая годная попса».
Ищите в стриминге музыку, которую услышали в такси
Мобильное приложение распознает музыку, прямо как Shazam, и узнает даже ту песню, которой нет в библиотеке. Но если она есть в сервисе, «Яндекс.Музыка» сразу предложит добавить ее в медиатеку и сохранит в отдельный плейлист.
Как это сделать
В поиске в приложении нажмите на иконку с микрофоном
Настраивайте рекомендации, не заходя в приложение
Конечно, в «Яндекс.Музыке» есть радио. Оно включает треки или по жанру, занятию, настроению, новизне, или на основе каких-то альбомов, треков и плейлистов. Если понравился альбом или плейлист, а треки в нем закончились, включите радио — оно построит бесконечный поток песен по треклисту альбома или плейлиста. Это делается или в приложении для iOS, или на сайте. Треки в радио лайкают и дизлайкают — это повлияет на музыку, которую приложение предложит в будущем. Но самое удобное — лайкать и дизлайкать с экрана блокировки.
Как это сделать
Нажмите на иконку «гамбургера» на плеере и выберите, что сделать с текущим треком. Но работает это только с радио
Яндекс Браузер. Красота и Уродство
Привет, это небольшой и предвзятый обзор интерфейса Яндекс Браузера для тех, кто никогда им не пользовался и относится скептично к продуктам этой компании или «всё ужасное с чем придётся столкнуться после установки».
Думаю все видели отзывы, что Яндекс Браузер весьма годный продукт, но всё ещё были сомнения пробовать его или нет, да и олды в комментариях всегда вспомнят аромат яндекс бара на лице и кричат-кричат «нам от вас выход в инторнет даром не нужон», но как на самом деле ведёт себя софт от Яндекса в 2021 году?
Сразу спойлер: это нормальный браузер если отключить все сервисы Яндекса, которые он постоянно предлагает. В начале будут только недостатки, но про классные фичи тоже расскажу.
Братишка-Яндекс покушать принёс: первое, что придётся увидеть после установки, увы не окно браузера, а сразу два без спроса закрепленных ярлыка на панели задач. Первый открывает браузер, а второй открывает в новом окне поиск Яндекса. Кстати, если в ходе установки не убрать галочку рядом с Алисой, закрепленных ярлыка в теории будет три.
В чём проблемы? Подошёл, взял за руку, уверенно добавился в автозагрузку Windows и открыл окно браузера при старте. Согласитесь, приятнее когда без приглашения просто открывают окно, а не выпиливают дверь болгаркой.
Пошлость, звенящая пошлость: по умолчанию, без спроса, без предупреждения — браузер после запуска в фоне использует микрофон , это нужно для Алисы? Предупреждать что используете микрофон тоже нужно. Да в Windows 10/11 появляется значок микрофона, но сомневаюсь что пользователи Windows 7 вообще о таком догадываются. Для отключения нужно искать пункт с Алисой в настройках.
Кстати настройки: первоначальное меню кастомизации выполнено будто ты общаешься в мессенджере с Алисой, на мой вкус решение сомнительное, но ничего, переключаем мозг в режим двухзначного iq и записываемся на бесплатный курс по веб-дизайну. а точнее выбираем анимационный фон и форму вкладок.