Как стать автором
Обновить
196.58
Рейтинг

Интерфейсы *

То, что помогает ориентироваться

Сначала показывать
Порог рейтинга

UX/UI поисковой строки в интернет-магазине: 177 гайдлайнов

Веб-дизайн *Интерфейсы *Usability *Управление e-commerce *Дизайн

В этой статье мы разберем UX/UI строки поиска в интернет-магазине.

Что стоит учитывать, чтобы ваш клиент нашёл, что ему нужно, без каких-либо проблем и остался доволен? Разберём все в деталях и на реальных примерах: какими практиками стоит воспользоваться, а от каких лучше воздержаться.

Чек-лист основан на анализе 200+ российских и зарубежных компаний.

Читать далее
Рейтинг 0
Просмотры 227
Комментарии 0

Новости

Проектируем работу с Избранным в интернет-магазине: 117 гайдлайнов

Веб-дизайн *Интерфейсы *Usability *Управление e-commerce *Дизайн

Избранное – одна из базовых функций интернет-магазина. Но качество ее исполнения может очень сильно различаться.

Как сделать работу с избранным удобной для клиента? Какие тонкости стоит учесть? Разберем на 117 примерах.

Читать далее
Всего голосов 2: ↑2 и ↓0 +2
Просмотры 316
Комментарии 1

Как приложения заботятся о своих пользователях. Основные принципы хорошего UX

Интерфейсы *Usability *
Из песочницы

Забота о пользователях — это фундамент долгосрочных и доверительных отношений с клиентом, где доход является не основополагающей целью, а достойным результатом работы компании и её цифровых сервисов. Такой показатель достигается через внимание к потребностям своих клиентов и умение слышать и понимать, чего на самом деле они хотят.

В статье поговорим про заботу о пользователях. Мы расскажем об основных принципах, которые делают приложения живыми и отзывчивыми, а клиентов — более лояльными.

Читать далее
Всего голосов 6: ↑6 и ↓0 +6
Просмотры 1.5K
Комментарии 2

Конструктор дашбордов своими руками – базовые идеи для реализации

Блог компании Ростелеком Интерфейсы *Визуализация данных *
Tutorial

Всем привет! На связи команда разработки модуля ESMP Metrica.

Зачем может понадобиться конструктор дашбордов?

Во-первых, дашборды – это современная неотъемлемая часть большинства бизнес-процессов, как инструмента, позволяющего наглядно, в виде инфографики и интерактивных информационных панелей, представлять ценную информацию.

Во-вторых, без конструктора дашбордов создавать новые дашборды и поддерживать существующие дорого, так как услуги программиста дороже услуг аналитика.

В-третьих, у конкурентов, скорей всего, конструктор дашбордов уже есть и, возможно, настала пора обзавестись своим.

Существует огромное количество решений (на пальцах уж точно не сосчитать) для работы с дашбордами, которые отличаются ценой, возможностями, способами взаимодействия с данными и сложностью для пользователя. Некоторые из них можно использовать только на личном ПК, другие реализованы как облачные сервисы, есть те, которые можно использовать без специальной подготовки, есть и такие, которые потребуют определённых навыков, но и предложат большую функциональность. В нашем же случае решалась задача, которая по совокупности параметров не могла быть решена существующими инструментами.

В этой статье приводится описание тех идей, которые мы реализовали у нас, с использованием концепций Low-code, предполагающей возможность модифицировать, адаптировать и развивать дашборд непосредственно в ходе «боевой» эксплуатации с минимумом программирования и максимумом визуальной разработки. Статья будет полезна начинающим разработчикам, любопытствующим и тем, кто приступает к созданию своего редактора дашбордов.

Читать далее
Всего голосов 8: ↑8 и ↓0 +8
Просмотры 1.9K
Комментарии 4

Проектируем хлебные крошки в интернет-магазине: 83 гайдлайна

Веб-дизайн *Интерфейсы *Usability *Управление e-commerce *Дизайн

Хлебные крошки – это небольшие ссылки на страницах товаров, которые облегчают навигацию клиента по сайту. Казалось бы, что может быть проще? Это же просто ссылки.

В этой статье мы разобьем хлебные крошки на атомы и обсудим даже мельчайшие нюансы: 83 гайдлайна с примерами.

Но есть много факторов, которые отделяют «вкусные» и эффективные хлебные крошки от «чёрствых» и бесполезных.

Читать далее
Всего голосов 4: ↑4 и ↓0 +4
Просмотры 884
Комментарии 0

Проектируем процесс авторизации по номеру телефона: 130 гайдлайнов

Веб-дизайн *Интерфейсы *Usability *Управление e-commerce *Дизайн

Сегодня мы погрузимся в микро-мир и разберем процесс авторизации по номеру телефона. Казалось бы, что может быть проще? Ввел номер – ввел код – успех? Не тут-то было. Хороший customer experience от плохого отделяет множество нюансов и тонкостей.

В этой статье мы разберем 130 гайдлайнов с практиками, которые стоит взять на заметку, и примерами ошибок, которые лучше не совершать. Материал основан на анализе топ-100 российских интернет-магазинов из рейтинга Data Insight за последние 5 лет.

Читать далее
Всего голосов 5: ↑5 и ↓0 +5
Просмотры 1.2K
Комментарии 12

Упс и опаньки… Юмору не место в сообщениях об ошибках

Блог компании RUVDS.com Программирование *Интерфейсы *Usability *Дизайн

Сообщения об ошибках — чуть ли не единственное место, где пользователь программы может напрямую пообщаться с её автором. Ну как пообщаться… Ответить он всё равно ничего не сможет. Даже если сильно хочется. А иногда в сообщениях об ошибках такой треш, что действительно очень хочется ответить. Или просто взглянуть в глаза того инженера, который это сочинил.
Читать дальше →
Всего голосов 122: ↑100 и ↓22 +78
Просмотры 23K
Комментарии 124

Проектируем интерфейс оформления заказа: выбор адреса и времени доставки. 162 гайдлайна

Веб-дизайн *Интерфейсы *Usability *Управление e-commerce *Дизайн

Оформление заказа – один из последних шагов на пути клиента к покупке в интернет-магазине, и на этом шаге лучше не ставить ему палки в колеса.

Как сделать выбор адреса доставки, пункта выдачи заказов, даты и времени максимально удобным?

Разберем в этой статье. Как всегда, детально и с примерами.

Читать далее
Всего голосов 3: ↑3 и ↓0 +3
Просмотры 748
Комментарии 6

Олдскульные HTML-шаблоны снова в моде! htmx и другие средства борьбы с javascript fatigue

Python *Django *Разработка мобильных приложений *Интерфейсы *

Отрисовка страничек на сервере, похоже, снова начинает приобретать популярность (нет, я не имею в виду React SSR).

Сторонники оппозиции растущему влиянию javascript, наконец, смогли направить усилия в нужное русло - и в результате родился фреймворк htmx! Поговорим о том, как он работает, а также, какие ещё фреймворки используют серверные шаблоны в 2022.

Также поговорим о divkit - аналоге html для мобилок, недавно выпущенный Яндексом в опен-сорс - Вы, наверно, догадались, какое отношение может иметь одно к другому.

Читать
Всего голосов 22: ↑17 и ↓5 +12
Просмотры 3.8K
Комментарии 19

Работа в нотном редакторе MuseScore. Часть 5.3

Интерфейсы *
Recovery mode

Продолжение Работа нотном редакторе MuseScore. Часть 5.2

Нешаблонное применение встроенных шаблонов

В любом нотном тексте, сложнее чем запись одной мелодии, возникает необходимость многоголосой записи.

Читать далее
Всего голосов 1: ↑1 и ↓0 +1
Просмотры 575
Комментарии 0

Что такое Shared UI, как он нам помог и причём тут микросервисы

Блог компании Альфа-Банк Разработка веб-сайтов *JavaScript *Интерфейсы *Микросервисы *

Всем привет! Меня зовут Дима, я frontend-разработчик в Альфа-Банке. Сегодня я расскажу про Shared UI, что это такое и как мы пришли к созданию такого сервиса в интернет-банке, что это такое, как мы вообще придумали такой сервис.

Читать далее
Всего голосов 21: ↑19 и ↓2 +17
Просмотры 4.9K
Комментарии 2

Программа для распознавания текста и перевода AssistAnt

Программирование *Интерфейсы *C# *

Хорош ли ваш английский? Мой – нет. По крайней мере точно недостаточно, чтобы обходиться без переводчика в играх.
Недолгий поиск бесплатных программ в интернете мне не помог. Возможно, я просто плохо искал :) Но когда я поймал себя на мысли, что сейчас возьму в руки сотовый и буду переводить экран с помощью камеры, я понял, что пора спасаться. И путь к спасению - сделать переводчик самому.
Я нашел широко известную в узких кругах программу распознавания текста Tesseract OCR и свободное API для Google Translate. В результате получилась программа, которая может на лету переводить выделенную надпись на экране. Выглядит это примерно так: вы зажимаете горячую клавишу Win+Alt и прямоугольной областью выделяете часть изображения, где находится непонятный текст. Область выделяется, только пока зажата горячая клавиша. Вуаля – перед вами перевод во всплывающей подсказке!

Читать далее
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 2.2K
Комментарии 33

Как доработка UX помогла сократить время прохождения сценария заказа еды на 70%. Часть 1

Веб-дизайн *IT-инфраструктура *Интерфейсы *Веб-аналитика *Аналитика мобильных приложений *
Recovery mode

Рынок доставки еды один из самых перспективных в России. В 2020 году произошел глобальный переворот в восприятии онлайн-покупок. То, что прежде воспринималось как прихоть или экстренная мера, теперь стало обыденностью. Если раньше предпочитали посещение ресторанов и приготовление домашних блюд, то сегодня в почете доставка. Уже каждый 10-ый ресторан страны следует этому тренду. Несмотря на кризис в 2022 года, рынок продолжает расти, хоть уже и более спокойными темпами.

Подробнее изучить этот вопрос решили дизайнеры студии Focus.

Читать далее
Всего голосов 2: ↑1 и ↓1 0
Просмотры 857
Комментарии 3

Истории

Православные NGFW. Сравнение отечественных МСЭ нового поколения

Блог компании ICL Services Информационная безопасность *IT-инфраструктура *Интерфейсы *IT-эмиграция

После ухода большей части вендоров мирового уровня многие столкнулись с проблемой выбора отечественных решений. Так как за последние пару лет мне довелось поработать с несколькими российскими NGFW/UTM, я решил сделать сводную таблицу для их удобного сравнения в рамках различных проектов, а потом и добавить оставшиеся решения. И вот уже у нас на руках весьма подробный материал, которым и поделюсь здесь.

Читать далее
Всего голосов 14: ↑9 и ↓5 +4
Просмотры 5.2K
Комментарии 12

Будьте другом своему пользователю, пишите осмысленные сообщения об ошибках

Интерфейсы *Usability *Дизайн мобильных приложений *
Перевод
Сообщения об ошибках — повседневная часть нашей онлайн-жизни. Каждый раз, когда лежит сервер, или у нас отключился Интернет, или мы забыли ввести в форму обязательную информацию, мы получаем сообщение об ошибке. Классика — это «Что-то пошло не так». Но что пошло не так? Что произошло? И самое важное: как мне это исправить?


Примерно год назад наша команда разработчиков Wix внезапно осознала, что мы слишком часто не даём пользователям ответы на эти вопросы. Когда мы это поняли, то начали действовать быстро и решать проблему не только с тем сообщением, которое заставило нас задуматься.

Так начался Errorgate 2021.

Всего за месяц мы изменили тысячи сообщений об ошибках в Wix.

Чтобы выполнить этот проект, нам сначала нужно было определиться с тем, что же считать плохим сообщением об ошибке, а что хорошим.
Читать дальше →
Всего голосов 15: ↑15 и ↓0 +15
Просмотры 2.3K
Комментарии 4

История миграции с GDrive на Я.Диск

Интерфейсы *

Сервисами Google я очень активно пользуюсь уже лет 20.

В течение последних 5 лет было несколько попыток перейти на сервисы Яндекса, но все заканчивалось категорическим отказом принимать эту лютейшую дичь

Ни один из сервисов не вызвал полного удовлетворения. Такое впечатление, что делается все по принципу "хренак-хренак и в продакшен", UI/UX тестирование не проводится, сами своими сервисами не пользуются, на крики помощи бедолаг-пользователей плевать

Ну ладно, начинаем переезд

Начал я с покупки целого террабайта, поставил мобильное приложение под Android и включил синхронизацию фото (~200Gb) и стал ждать

Ждал я три дня. При этом в мобильном приложении совершенно непонятно какие фото ожидают синхронизации. Просто выдаются какие-то числа, которые вроде как обозначают сколько фото залилось и сколько осталось, однако при каждом открытии приложения сумма этих чисел меняется :)

Через три дня я открыл WEB версию на ПК и решил разложить по альбомам

Зашел в фотографии, нажал кнопку создать альбом, мне предложили выбрать фото. Я отказался, так как не очень удобно выбирать мелкие фото. Открыл вроде как подходящую фотографию и решил добавить ее в альбом. И очень сильно удивился, когда созданного альбома не оказалось. Закрыл фото, попытаться создать новый альбом. Ввел название, отказался сразу добавлять фото и альбом пропал. Оказывается при создании альбома надо обязательно выбрать хотя-бы одну фотографию, иначе альбом не создается. Какая была аргументация при реализации подобной логики, совершенно непонятно.

В октябре 2022 у меня закончилась подписка на GOne, которую я не смог продлить, ввиду нахождения в РФ.

Почта, документы, фото - там это не просто удобно, а просто кайф как все продумано и логично. Причем как в десктоп версии, так и в мобильных приложениях

Чтобы не лишится гигабайтов данных решил мигрировать на православный Я.Диск

Читать далее
Всего голосов 57: ↑47 и ↓10 +37
Просмотры 12K
Комментарии 73

Как прокачать исследователя через карту компетенций в духе RPG

Блог компании Альфа-Банк Интерфейсы *Usability *Управление проектами *Карьера в IT-индустрии

Привет! Мы продуктовые исследователи Alfa Research Center (ARC). Два года назад мы создали карту компетенций. Чтобы процесс шёл веселее, а рост по грейду увлекал сотрудников не меньше RPG, мы добавили геймификацию и дизайн с супергероями. Рассказываем, как приобрести такой же игровой опыт.

Демо-версия: сначала вспомните все рабочие процессы, в которых участвует ваш продуктовый исследователь. Далее выпишите все навыки исследователя и свяжите их с процессами. Финальная катка: продумайте формат встреч с тимлидом для оценки скиллов и построения трека карьеры, чтобы карта работала, а компетенции развивались.

Делимся читом на экономию времени – копируйте нашу карту компетенций из Miro и пробуйте на своих процессах. А если любите неспешный геймплей, читайте статью до конца и узнайте, как мы геймифицировали рост по грейду в локации нашей исследовательской финтех-лаборатории.

Читать далее
Всего голосов 22: ↑17 и ↓5 +12
Просмотры 1.7K
Комментарии 0

Проектируем интерфейс оплаты картой: 129 гайдлайнов

Веб-дизайн *Интерфейсы *Usability *Управление e-commerce *Дизайн

В этой статье мы разберем, что стоит учесть при проектировании интерфейса оплаты банковской картой онлайн.

Как всегда, детально и с примерами.

Контент основан на анализе интерфейсов оплаты картой у 100 ведущих российских интернет-магазинов.

Читать далее
Всего голосов 5: ↑4 и ↓1 +3
Просмотры 972
Комментарии 2

Как дизайн влияет на метрики: показываем на примере личного кабинета врача

Блог компании СберЗдоровье Интерфейсы *Дизайн

Привет! Я Даша Почекуева, дизайнер в СберЗдоровье. В последние полтора года я работаю над  личным кабинетом врача телемедицины — платформой, на которой врачи СберЗдоровья общаются с пациентами.

Эта статья о влиянии интерфейсных фич на метрики. Здесь не будет универсальных советов, волшебных таблеток и зрелищных картинок, но будут опросы, графики и решения, выдержавшие проверку временем.

Статья пригодится продуктовым дизайнерам, которые работают над интерфейсами для внутренних заказчиков, особенно медицинскими.

Поехали
Всего голосов 11: ↑10 и ↓1 +9
Просмотры 3K
Комментарии 10

Вклад авторов