Как стать автором
Обновить

Скрытые сокровища интерфейсного дизайна: 10 не популяризованных UI элементов, способных улучшить взаимодействие

Уровень сложностиСредний
Время на прочтение3 мин
Количество просмотров13K
Всего голосов 12: ↑6 и ↓6+4
Комментарии28

Комментарии 28

Насчет малоизвестности это прямо скажем не очень правда. И на счет полезности тоже. Я бы даже сказал в большинстве случаев это, в лучшем случае, лишнее, в худшем отвлекает, раздражает и требует ненужного внимания.

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

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

Благодарю за ваше мнение!

Ну кастомные скроллбары зачастую всё таки зло.

«Коллапсируемые Секции», довольно необычное название для аккордеона, тоже стоит применять с осторожностью. Если спрятать много, то поиск по странице не найдёт.

Полезность остального конечно по вопросом, но хотя бы не навредит

Приветствую!

Аккордеон - уж больно мне не нравится это название, позволил себе немного свободы в выражении?

Но я думаю что учесть общепринятое название все таки стоит, я с корректирую)

Абсолютно так, все это не подразумевает использование в каждом проекте, все сугубо индивидуально, и все должно быть уместно, а аргументированно, в первую очередь для себя.

Благодарю за мнение!

Полезность остального конечно по вопросом, но хотя бы не навредит

Ленивая загрузка - ещё большее зло, чем кастомные скроллбары. Рушит UX. Быстро прокрутить вперёд невозможно (даже если начало загрузилось час назад, продолжение не загрузится, пока не начнёшь скроллить). Предсказуемо вернуться назад невозможно. Определить, сколько прокручено и сколько ещё осталось - невозможно. Рассчитано на один предельно тупой сценарий использования: прокручивай котиков с утра до вечера, котики никогда не закончатся.

В яблочко! Ютуб -> понравившийся канал -> список видео и сначала надо промотать вниз, чтобы подгрузились тысячи видео-ссылок и только только тогда я могу нажать CTRL+F и найти нужное видео, потому что родной поиск местами туповат. Бесит нереально!

Рушит UX тот факт что мы позволяем пользователю получить быстрый доступ к информации, не заставляя его ждать лишние несколько секунд на каждой странице?

Я не согласен с тем что она - зло, где-то ленивая загрузка может быть неуместна, но про грамотном использовании она УЛУЧШАЕТ UX, увеличивая производительность сайта или приложения.

А что мешает быстро показать пользователю то, что помещается на экран, а остальное подгружать в фоне, не дожидаясь скролла?

"ждать "
если статичная страница грузится 5 с, то мы заставляем его "ждать", а если динамичная страница (пустая) открывается за 0,1 с, а потом подгружается "контент" те же 5 с, то он не ждёт? веб-мастерам рапортуют об улучшении первичной (пустой) загрузки страницы (якобы "увеличивая производительность сайта"), а начинаешь скроллить - и начинаешь ждать, и смотришь, как мутные плейсхолдеры для картинок начинают проявляться (взять тот же хабр). и скролл начинает скакать. Улучает производительность - это сначала делать многомегабайтные скрипты (которые не нужны) (типа интерактивные иллюстрации), а потом переложить вычисления на плечи клиента?

данная статья, до завершения передачи всех данных, грузится 8 секунд (без адблока - 12)

скачущие и постепенно появляющиеся элементы - пользователь вообще не должен видеть

"Добавление анимации к лениво загружаемым элементам может сделать ожидание более приятным для пользователя."
ага, когда читаешь газету, а заголовки и картинки медленно всплывают из-за угла. движущиеся элементы - раздражают.

Про малоизвестность вранье. Я не фронт, но половину встречал в том или ином виде. И еше часть видел в живую.

Про "сокровища" тоже спорно. Реализовать такое не так просто (большую часть), а правильно реализовать еше нужно уметь. Чаще встречается или кривая реализация которая делает хуже юзабилити, или вообще пиздец где из-за лагов и вылетов не поймешь что вообще первоначально хотел автор получить

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

Благодарю за мнение!

За 1 где-то должен был в холодном поту проснуться безопасник и с кнопками "дизигнер курва, я пердолить!" схватить биту, пилу и выбежать из кабинета.

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

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

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

Ощущение что и статью и комменты пишет ГПТ. Не отвечайте, не тратьте токены и не портите экологию.

Вам отвечает GPT, спасибо что внесли вклад в порчу экологии!

Ожидал увидеть подборку виджетов ввода номера телефона вроде этого:

Phone slider
Phone slider

Но получилось слабовато.

Я думаю что такой виджет достоин отдельной статьи??

А есть вообще хоть один юзер, который предпочитает ленивую загрузку паджинации?

Вот только сегодня листал каталог магазина, и думал, как же она бесит.

Ленивая загрузка - не равно бесконечный скрол, она может бы ь реализована с пагинацией

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

Смотря какой сайт или приложение)
Если это условно сервис с теми же статьями, тогда почему бы не загружать быстрее название статей, структуру и какой-то текст, а обложки уже отдать в ленивую загрузку?
Получим то-что страница грузится ощутимо быстрее, и при этом вся чувствительная информация уже перед глазами, а вторичное догоняет, ну и если вам так хочется то и пагинация тут будет без конфликтов)

А зачем юзеру заголовок (пусть даже с катом текста) статьи без КДПВ? Если он принимает решения в том числе на основе КДПВ?

А если говорить о магазинах, то ожидание в результате нажатия на кнопку Next Page это совсем не то же самое, что ВНЕЗАПНАЯ ПОДГРУЗКА, когда ты невинно крутил колёсико. Вдобавок, на паджинацию естественно ложится SSR, который для юзера предпочтительнее (например, потому, что браузеры кешируют разметку, и переход взад-вперёд почти мгновенный). Хотя, конечно, писать удобнее динамическую подгрузку.

"Микроинтеракции" - серьёзно? Чем слово "микровзаимодействия" не зашло?

Приветствую!

Я больше привык к англоязычной терминологии, мне кажется что особо суть не пострадала от того что я воспользовался альтернативным наименованием)

Пускай горит в аду дизайнер придумавший макет с кастомными скролами… а ты потом еб..сь, с кросбраузерностью, с тем это винда или мак, подключена мышка или нет…

Я понимаю что могут возникнуть трудности с разработкой, но когда есть прокрутка в модальном окне или в условном фильтре, и по середине экрана уродливый серый прямоугольник, который выбивается из всей дизайн системы который я кропотливо проектировал, и на который приходится смотреть мне и пользователям, потому что разработчику нужно потратить время что бы его сделать (со всем уважением к вашей работе), то я наверное попрошу своего коллегу потратить время на то что бы реализовать то решение, которое не будет как уродливая палка из прошлого.

Благодарю за комментарий)

Кастомные скроллбары

Оставьте мой скроллбар в покое, пожалуйста, мне он нужен для прокрутки. Брендирование делайте где-нибудь, где это не помешает пользователю.

я же не говорю что его необходимо обвесить стразами, но сделать его вписывающим в дизайн систему - правильно

https://habr.com/ru/companies/first/articles/653771/comments/#comment_24147073

"Работал я в одной студии. Так там в отделе разработки больше всех денег получал "придумыватель графических эффектов". Чувак который придумывал то, как анимировать страницы. Зачем? А затем, что были продажники которые говорили заказчику "Ну-у-у такое у всех есть. Чем вы будете отличаться? И так дорогой сайт заказываете. Так выделитесь из общей массы конкурентов!". И клиент начинал верить в то, что пол сотни PNG-картинок через JS сменяющих друг друга и образующих 3D-модель вращающейся молекулы реально может склонить покупателя к покупке именно его БАДа. А по факту покупатель не то, что не склонялся. Покупатель бежал без оглядки с сайта который грузится по 10 секунд! И вот дальше маркетологи: "А давайте проведём ресёрч, поставим таски разработке и поиграем со шрифтами. Ну ещё анимацию текстовому блоку добавим!"."

я дико извиняюсь, может я не права и так не делают... но все компоненты, которые может использовать дизайнер относительно безболезненно описанны же в документации по фреймворкам. Просто берешь фреймворк, на котором написан проект, гуглишь доку и видишь всеее компоненты, и даже больше. Это не "тайные знания"

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

Зарегистрируйтесь на Хабре, чтобы оставить комментарий

Публикации