Любопытно, что в первоначальной версии навигации в App Store кнопка поиска была отдельной, как и в остальных приложениях. Но спустя время Apple сделали её частью таббара. Видимо, конверсия в переход на экран поиска упала, и они решили сделать его самостоятельным разделом.
Похоже, пользователи нажимают отдельную кнопку поиска только тогда, когда у них уже есть сформулированный запрос и они знают, что искать. А вкладка, наоборот, стимулирует исследование контента в режиме «а что бы такого найти». В гайдлайнах Apple примерно так и пишут.
Похоже, пользователи нажимают отдельную кнопку поиска только тогда, когда у них уже есть сформулированный запрос и они знают, что искать. А вкладка, наоборот, стимулирует исследование контента в режиме «а что бы такого найти». В гайдлайнах Apple примерно так и пишут.
👍5
Заимствуем паттерны навигации из приложений. Вдохновляемся формой, а не функцией. Оба кейса — онлайн-магазины. Но если в первом мы вдохновлялись расположением кнопок в Фото, то второй пример, обратный: придумали решение ещё до выхода обновления.
У нас внутри даже есть шутка, что Apple время от времени тырит у нас решения. Хотя механика там, конечно, совсем другая.
У нас внутри даже есть шутка, что Apple время от времени тырит у нас решения. Хотя механика там, конечно, совсем другая.
В одном из наших кейсов мы нашли решение, которое теперь хочется использовать везде — динамическая навигация. Если коротко, нижний бар меняется от страницы к странице. Такой Dynamic Island наоборот.
На главной это меню, поиск и каталог. Самые критически важные кнопки для интернет-магазина.
На странице товара добавляется кнопка покупки и сдвигает бар влево. В каталоге по бокам появляются фильтрация и сортировка. В корзине появляются кнопки оформления и сумма заказа.
Мы не смогли протестировать это решение, поэтому его эффективность и конверсионность пока остаются под вопросом.
Нашли ещё два похожих примера — ПИК и Shoe Finder. Если знаете другие, кидайте в комменты.
На главной это меню, поиск и каталог. Самые критически важные кнопки для интернет-магазина.
На странице товара добавляется кнопка покупки и сдвигает бар влево. В каталоге по бокам появляются фильтрация и сортировка. В корзине появляются кнопки оформления и сумма заказа.
Мы не смогли протестировать это решение, поэтому его эффективность и конверсионность пока остаются под вопросом.
Нашли ещё два похожих примера — ПИК и Shoe Finder. Если знаете другие, кидайте в комменты.
Часто забывают, что панель браузера можно перекрасить и тем самым создать продолжение фона сайта. Тут есть несколько настроек и ограничений.
Во-первых, панель нельзя красить градиентом, только сплошной заливкой. Во-вторых, перекрашивать можно как верхнюю, так и нижнюю часть браузера. В-третьих, цвет можно вообще убрать. Тогда везде, кроме Safari, будет использоваться системная заливка (чёрная или белая), а в самом Safari появится градиент по умолчанию, который зависит от цвета блока, находящегося в зоне просмотра. Стекло и всё такое.
Играясь с системной заливкой, мы нашли ещё одну штуку. Если в Safari хочется сделать эффект парящей навигации, то сразу над нижней панелью можно добавить градиент (скрин 2). Тогда возникает ощущение, что панель браузера и нижний бар живут в одном пространстве и согласованы друг с другом.
Иногда нужно заглянуть за пределы макета, чтобы навести красоты.
Во-первых, панель нельзя красить градиентом, только сплошной заливкой. Во-вторых, перекрашивать можно как верхнюю, так и нижнюю часть браузера. В-третьих, цвет можно вообще убрать. Тогда везде, кроме Safari, будет использоваться системная заливка (чёрная или белая), а в самом Safari появится градиент по умолчанию, который зависит от цвета блока, находящегося в зоне просмотра. Стекло и всё такое.
Играясь с системной заливкой, мы нашли ещё одну штуку. Если в Safari хочется сделать эффект парящей навигации, то сразу над нижней панелью можно добавить градиент (скрин 2). Тогда возникает ощущение, что панель браузера и нижний бар живут в одном пространстве и согласованы друг с другом.
Иногда нужно заглянуть за пределы макета, чтобы навести красоты.
Запускаем новую серию материалов — UI & Research
Нам понравилась идея брать один небольшой элемент интерфейса и разбирать его максимально подробно: смотреть на паттерны, ограничения, реальные кейсы и решения, которые обычно остаются внутри проектов.
Первый выпуск посвящён нижней навигации в мобильном вебе. Получилось большое исследование с примерами, наблюдениями и собственными находками.
Кстати, часть материала вы уже могли видеть в канале. Многие посты последних недель изначально создавались как части этого исследования, а теперь собрались в одну большую статью.
Заодно решили немного обновить и сам канал. Раньше он назывался Origin Design, теперь — Origin | UI & Research. Пожалуй, это лучше отражает нас самих.
→ Почитать можно на Дизайнерс
Нам понравилась идея брать один небольшой элемент интерфейса и разбирать его максимально подробно: смотреть на паттерны, ограничения, реальные кейсы и решения, которые обычно остаются внутри проектов.
Первый выпуск посвящён нижней навигации в мобильном вебе. Получилось большое исследование с примерами, наблюдениями и собственными находками.
Кстати, часть материала вы уже могли видеть в канале. Многие посты последних недель изначально создавались как части этого исследования, а теперь собрались в одну большую статью.
Заодно решили немного обновить и сам канал. Раньше он назывался Origin Design, теперь — Origin | UI & Research. Пожалуй, это лучше отражает нас самих.
→ Почитать можно на Дизайнерс
Опубликовали кейс интернет-магазина Basarab. Между прочим, это один из крупнейших производителей обуви в России с собственной фабрикой и производством.
Изюминкой проекта стала адаптивная навигация. Та самая, про которую мы недавно рассказывали в исследовании. В зависимости от страницы и сценария пользователя нижняя панель меняет свой состав и помогает решать текущую задачу.
К сожалению, решение с навигацией так и не добралось до запуска, поэтому протестировать его на реальных пользователях не удалось. Посмотреть концепцию можно в кейсе, залетайте.
→ Behance
→ Dprofile
Изюминкой проекта стала адаптивная навигация. Та самая, про которую мы недавно рассказывали в исследовании. В зависимости от страницы и сценария пользователя нижняя панель меняет свой состав и помогает решать текущую задачу.
К сожалению, решение с навигацией так и не добралось до запуска, поэтому протестировать его на реальных пользователях не удалось. Посмотреть концепцию можно в кейсе, залетайте.
→ Behance
→ Dprofile