How to become an author
Search
Write a publication
Pull to refresh

Comments 59

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

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

И на счет формы с плюсом, возожно лучше ее справа вытаскивать, а не слева? Ведь совсем непонятно получается, то ли нажал Submit и оно потянуло на следующий шаг, то ли отменил и оно куда-то тоже переместило.

PS. Замечания делаю как пользователь, а не как проэктировщик интерфейсов, скорей всего где-то не прав и что-то важное не заметил.
Total votes 25: ↑20 and ↓5+15
Поддержу, особенно в плане автопрокррутки, беспонечная подгрузка коментариев, изображений и тому подобного — ужасное решение, ибо убивает возможность поиска. Я запомнил что на 14 странице коментариев есть нужный мне и могу легко найти, а тут…
Зато это хорошо смотрится в поиске гугл картинок, так как там я явно не буду запоминать что картинка находиться на 14 странице ибо это не имеет смысла из-за переодического изменения поисковой выдачи
Total votes 6: ↑6 and ↓0+6
Автоподгрузка с бесконечной прокруткой — весьма неудобная штука. В дополнение к уже перечисленным недостаткам, после сотни-другой виртуальных «страниц» браузер начинает жутко тормозить.
Еле умудрился отговорить начальство от реализации такого в блоге компании.
Total votes 7: ↑7 and ↓0+7
Казалось бы, простая идея: n раз подгружать порцию автоматически, на n+1 вешать кнопку «Следующая страница», повторить — и почти нигде не используется.
Total votes 1: ↑1 and ↓0+1
Google использует в картинках
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Посмотрите, каr эту задачу решила команда Вконтакта. Как по мне, то вполне удобно и комфортно. Одновременно идет бесконечный скролинг и сверху висит нумерация страниц. При желании можно перейти на определенную страницу и читать бесконечную простыню комментариев.
Total votes 3: ↑3 and ↓0+3
А странно выглядят первые 2 гифки. Анимированы они так, как будто происходит клик по «Home», а переход идет на «Contact». Я понимаю, не существенно, но тут же поднимаются вопросы юзабилити, понятности интерфейсов.
Total votes 14: ↑14 and ↓0+14
я по этим гифкам там и не понял, кто куда переходит…
This comment wasn’t rated yet0
Резкие изменения сложны для понимания пользователя.

Я считаю, что этот пример не очень удачный. Одно дело — когда что-то само изменяется, а другое — когда человек нажал на кнопку и уже был готов к изменению. Я согласен с тем, что «стихийные» изменения должны происходить не так резко, дабы было понятно, что вообще происходит. Но когда человек, например, сворачивает окно, и оно сворачивается полсекунды, то это только отвлекает.
Total votes 8: ↑7 and ↓1+6
Может быть не совсем в тему, но в excel в последнем, подобные плавные изменения есть. Мне это доставило некоторые неудобства с непривычки. Плавное заполнение ячеек при зажатом ctrl и растягивании выделенного диапазона раздражали. И плавные переходы между ячеек тоже. Из-за них я промахивался и вводил данные не туда, может быть из-за спешки.
Total votes 2: ↑2 and ↓0+2
Имелось в виду, повидимому, что когда при нажатии PageDown, например, экран мгновенно меняется, вы не можете понять, куда и насколько он сдвинулся. А если он быстро-быстро прокрутится, вам будет ясно, что перемотана одна страница вниз.

Проблемы, как это обычно бывает, вытекают из двух недостатков любого проектирования дизайна UI
1. Программировать сложно — в результате это всё подглючивает, подтормаживает и, например, неправильно реагирует, если вы нажмете PageDown, а затем резко PageUp. Или, того хуже, анимация стопорит всё и дизайн становится неотзывчивым. Непропускаемые анимации, кстати, раздражают даже в играх, а не только в серьёзных программах.
2. У разработчиков (или дизайнера) часто не хватает вкуса — очень велико искушение сделать медленную красивую анимацию в полсекунды длиной там, где два последовательных действия юзера могут идти в промежутке 0.1 секунды. Некоторые считают, что чем больше анимаций и чем они заметнее — тем лучше. А между тем, давно известно, что лучший дизайн — тот, который никто не замечает.
Total votes 4: ↑4 and ↓0+4
Ну с экселем я тоже не мог сразу удостовериться что данные заполнились до нужных мне ячеек. А так я с вами полностью согласен
This comment wasn’t rated yet0
По поводу раздела «Скрытие элементов управления». По моему не совсем удачный пример с браузерами.
При поиске это ужасно раздражает: немного промотал, хочешь изменить запрос, а строка ввода пропала.
Total votes 7: ↑7 and ↓0+7
Не знаю — не знаю. У меня почти никогда не возникало проблем с мгновенной реакцией интерфейса на мое действие. За редкими исключениями, когда эта реакция была совсем не такой, как я ожидал, и приходилось понимать, что же произошло. В таких случаях анимация, возможно, дала бы мне более быстрое понимание. Однако, в большинстве случаев, особенно при использовании гиперссылок, меня раздражает анимация, я не хочу смотреть на нее даже пару сотен миллисекунд, я предпочту сразу видеть результат моего действия.
Отдаю себе отчет, что я, скорее всего, маргинал в плане интерфейсных предпочтений.
Total votes 13: ↑13 and ↓0+13
По поводу анимации в интерфейсе, у меня был случай. В школе на информатике мы что-то на турбо-паскале писали, кажется программку, которая отрисовывает кнопочки с разными символами. У части класса эта программа просто показывала табличку, а вот у некоторых бала симпатичная анимация: кнопочки отрисовывались постепенно. На вопрос к учителю последовал вполне закономерный ответ, мол компы разные, в одних не тормозит, в других тормозит, и еще цитата: «Жаль агаты выбросили, они косинус рисовали, как мультик показывали». Так что у меня похоже гдето на подкорке отложилось, что видимая глазу анимация есть результат тормозов компа, а не работа дизайнера.
Total votes 9: ↑8 and ↓1+7
Тут следует различать гиперссылки на внешние страницы и на якоря на той же странице. Автор рассматривает второй случай. Здесь анимация позволяет понять, что мы никуда со страницы не ушли, а лишь отмотали на нужное место.
Total votes 1: ↑1 and ↓0+1
Для меня разницы никакой. Вы используете два разных глагола «уйти» и «отмотать». Для меня это один глагол — «перейти». По ссылке я перехожу от одной информации к другой, безотносительно того где размещается эта информация.

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

Я не говорю, что анимация это однозначно плохо или однозначно хорошо. Я говорю, что мне без нее лучше.
This comment wasn’t rated yet0
Часто мешает работать рвение авторов напихать бесполезной (но пусть даже красивой) анимации где ни попадя. Анимация ведь может быть и 0.1 секунды длиной, давая пользователю визуальную связь между его действием и элементом или между двумя элементами. Плохая анимация — когда нужно очевидно ждать.

Меня, например, безумно раздражает анимация модальных окон во многих современных системах (да, Бутстрап, я смотрю на тебя), когда сначала треть секунды появляется overlay, затем еще треть — само окно, а затем начинает загружаться содержимое этого самого окна. И даже если загружать ничего не нужно — больше, чем пол-секунды ожидания каждый раз во время сосредоточенной работы — адски бесят.
Total votes 1: ↑1 and ↓0+1
На счет анимации не совсем согласен, в большинстве случаев, это только мешает.
Стикеры, отличное решение, но бывают случаи когда их суют не к месту.
Полностью поддерживаю идею с «преследующим меню», для некоторых своих проектов, даже реализовал такую фичу, а недавно даже залил на GitHub как jQuery плагин, правда реализовал только для bootstrap, все никак руки не доходят.
Total votes 6: ↑6 and ↓0+6
По-моему, дико не удобно при работе с мышкой. Мне кажется, что гораздо удобнее было бы просто всплывающая панелька, показывающаяся при наведении. А при работе с пальцем — ну в том же хроме будет появляться и ваша панельяка, и хромовская. Спорное решение
Total votes 2: ↑2 and ↓0+2
Неудобно при работе с класическим колесиком мыши, это решение я использовал на внутренних ресурсах, где люди в основном используют мыши и трекпады Apple, про проблему с колесиком даже и не думал, пока не выложил на GitHub и не показал другу. Решение действительно спорное и использовать его нужно только при полной уверенности, что он необходимо.
Total votes 1: ↑1 and ↓0+1
Если честно, меня больше смутило само поведение. Я, не прочитав комменатрий, начал скроллить. Ничего не произошло — матнул вверх — появилось. Подумал, что баг и поздно отрисовалось, а потом только догнал. Вероятно, дело привычки, но мне было бы удобнее, если бы оно все время там было. Но идея действительно интересная, вот хочу придумать юзкейс, когда она себя оправдает сполна)
Total votes 2: ↑2 and ↓0+2
Я ее использовал на двух страницах внутренних ресурсов, где очень большие списки и много разной метрики, когда фиксированная панель отвлекает и отбирает полезное пространство монитора, но при этом панель была нужна, без нее сложно ориентироваться на странице, решение с кнопкой «вверх» как на хабре и в вк, тоже не подходило.
Total votes 1: ↑1 and ↓0+1
Все опытные игроки в Цивилизацию отключали анимацию боев и вообще почти всю анимацию (в 3-4 версиях по крайней мере). И даже не столько ради экономии времени, а просто потому что когда ты играешь 1000-ю игру то эти анимации только раздражают.

Так и здесь, если ты впервые на сайте, презентационном, то анимация может тебе и поможет и восхитит. А если ты постоянно интерфейсом пользуешься — оно тебе не надо.

Но тут да, надо различать анимацию и ПОЧТИ НЕ ЗАМЕТНУЮ анимацию. Как вот в Виндоус 7 у меня окошки появляются и исчезают. Анимация там есть, но ее практически не замечаешь. Такая да, лучше чем без нее.
Total votes 14: ↑14 and ↓0+14
Это правда удобнее, но главное считаю должна быть предсказуемость системы. Если система предсказуема, то пользователю проще принять мгновенные изменения. Я не удивлюсь, если ссылка «наверх» меня мгновенно перебросит наверх. Меня гораздо больше пробесит, если ссылка «наверх» меня медленно протащит по всей странице. А если это умная ссылка, то она вычислит длину страницы и перетащит с необходимой скоростью, чтобы я остался удовлетворенным, в лучшем случае она, конечно, еще опознает мой браузер и решит стоит ли грузить его такими задачами или не стоит, и так далее. Все хорошо в меру.
Total votes 5: ↑5 and ↓0+5
Подгрузка при прокрутке актуальна для всяких социальных сетей и твиттеров, где лента постов условно бесконечна. Для отображения конечного числа комментариев это чертовски неудобно. Даже если их несколько сотен — уж лучше разбить постранично.
Total votes 1: ↑1 and ↓0+1
А лучше простой кнопкой «Подгрузить еще». Тогда до футтера можно без проблем добраться и не нужно искать страницу на сайте, где ничего не продолжается бесконечно.
Total votes 1: ↑1 and ↓0+1
В случаях с автоматической подгрузкой, не должно быть футера, многие об этом забывают.
Total votes 1: ↑1 and ↓0+1
Думаю кнопкой не лучше.
В комментария сверху уже приводили в пример, что найти комментарий на пятой страницы легче, чем пять раз нажимать «Подгрузить ещё»
Total votes 1: ↑1 and ↓0+1
Главное в анимированных интерфейсах — не переборщить с анимацией. В идеале пользователь вообще не должен замечать из чего она состоит. Примерно так же, как не должен замечать применение стилей слоя photoshop.
Total votes 5: ↑5 and ↓0+5
Google Chrome для iOS еще с момента своего появления использовал идею скрытия поля поиска, во время прокрутки контента.

Появилось только в последних версиях для iOS 6, и очень плохо реализовано( Когда строка нужна ее нет, и наоборот =)
Total votes 1: ↑1 and ↓0+1
Анимации нужно стараться быть гармоничной.

Я недавно писал о идеи анимировать логотипы: habrahabr.ru/post/188266/
Анимация нужна всем элементам, которые что-то делают. Ссылка меняет цвет при наведении, а фотография, которую можно увеличить по клику, даёт знать о себе иконкой, фоном или текстом, в общем анимацией.
Total votes 1: ↑1 and ↓0+1
Анимация здорово помогает понять что произошло при нажатии на ссылку. В свое время долго думали как повысить дружелюбность этого интерфейса для отображения текущих событий для одной букмекерской конторы. В итоге инерционная прокрутка списков, плюс плавное всплывание/исчезание изменений сделали эту страницу настолько популярной среди пользователей, что пришлось реализовать специальный кэширующий прокси сервер для нее.
Total votes 1: ↑1 and ↓0+1
Насчёт плавного перемещения фокуса — подобная идея уже давно реализована в MS Office 2013. Особенно заметно в Excel.
Total votes 1: ↑1 and ↓0+1
Хотя часть примеров довольно полезна, но в общем случае действует простое правило: если для улучшения интерфейса его понадобилось анимировать — значит, с ним что-то явно не так.
Total votes 1: ↑1 and ↓0+1
Не соглашусь, умеренная анимация часто идёт на пользу, делая интерфейс понятнее и приятнее.



А иногда и неумеренная

Total votes 7: ↑6 and ↓1+5
Мне кажется, важна интуитивная понятность (плюс, анимация должна быть для чего-то, а не просто ради самой анимации) и скорость (как самой анимации, так и скорость реакции на действие пользователя). Особенно удобно на тач-скринах, когда ты можешь начать совершать действие (сдвигать панель, к примеру) и на пол-пути передумать — тут очень здорово это происходит на уровне ощущений — что и куда двигать, и для чего.
Total votes 1: ↑1 and ↓0+1
Анимация — мощное средство, которые может как ухудшить интерфейс, так и улучшить. В неопытных руках слишком часто получается первое.
Один из существенных минусов — перегрузка зрительного восприятия, когда пользователь какое-то время пытается понять — что вообще происходит и куда что поехало. А для уже опытных людей она только замедляет привычные действия, не неся дополнительной пользы.

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

Второй пример хорош внесением метафоры сдвоенного альбома вместо привычной длинной ленты, но подходит только для блоков ровно в половину экрана, и чётного их количества. Боковое сгибание настроек тут немного ломает метафору, открывая бесполезное белое поле с неудобным крестиком. Стандартное всплывание с блюром фона смотрелось бы логичнее.
Total votes 3: ↑3 and ↓0+3
Перемещение фокуса между полями — действительно крутой концепт. Особенно если реализовать его едва так заметно для пользователя, а не кричащим «смотри, как я круто перемещаюсь», как обычно бывает со многими новыми эффектами.
Total votes 2: ↑2 and ↓0+2
Перемещение фокуса между полями не зря сначала продемонстрировано на примере хаотично разбросанных инпутов. Чем лучше сделана форма ввода, тем меньше необходимость в таких костылях.

Вот есть два основных сценария ввода — мышкой/тачем или с клавиатуры. В первом случае вообще мало понятен смысл анимации — и так ясно, что фокус установился там, куда ткнули.
Табом же переключаются статистически намного реже, и обычно просто на экране смотрят какое поле следующее, а дальше утыкаются в клавиатуру.
Total votes 2: ↑2 and ↓0+2
Ещё немного критики по примерам:

Скрытие поля ввода в мобильных браузерах — уже упоминали насколько это может быть неудобной и раздражающей штукой. Отрицательный эффект пропадания нужного элемента на порядок перекрывает плюсы от выигрыша небольшой полоски. Я бы предложил компромисс: ту же строчку из примера можно контекстно ужимать вдвое без потери функциональности и увеличивать обратно при возврате фокуса.

Анимация блика на «slide to unlock» — это исключительно украшающий элемент, ничего подсказывать не нужно тем, кто хоть раз уже разблокировал телефон. Насечки у «камеры» точно так же убрали потому что функция подсказывания части пользователей не нужна, а части просто не помогает.

Теперь про «pull to refresh». По-моему, типичный пример временной моды на малологичное решение.
Pull всегда использовалось для скролла непрерывного содержимого. Рефреш — отдельное логическое действие, по сути костыль для условий медленного и сеансного соединения.
То есть попытка обычного скролла приводит к неожиданному поведению системы, какой-то подгрузке. Для быстрого соединения лучше обновлять фид автоматически с минимальным интервалом. Для медленного мобильного инета — логичнее выделить события рефреша в отдельный контрол.
Total votes 3: ↑2 and ↓1+1
Не согласен насчёт «pull to refresh». По крайней мере, в случаях, когда это не обновление в смысле замены текущего содержимого на новое, а добавление новых элементов. Т.е. пользоователь как бы пытается промотать список/ленту дальше, чем она сейчас подгружена, и вполне логично при этом подгрузить обновления, чтобы было куда мотать дальше.
Total votes 1: ↑1 and ↓0+1
Ну я понимаю, для чего это сделано и какая тут логика. Но вот пример из жизни — я сел в кафе, подключился к вайфаю, от нечего делать загрузил ленту. Потом ушёл оттуда, но захотел что-то дочитать и скроллю туда-сюда. Вдруг случайно упираюсь в границу и тут вдруг начинается реакция системы, нежелательная подгрузка по мобильному инету и пр.

Ниже уже сравнили такую «чрезмерную» реакцию с обманом файлообменников и прочей троянской активностью. Интерфейс должен быть предсказуем и делать только то, что от него требуют. Как минимум, необходимо иметь возможность такие фичи отключать.
Total votes 1: ↑1 and ↓0+1
Ну, на гифке-то всё как раз прозрачно — написано, что контент обновится только если отпустите. А если вернёте на место, то нет.
сама гифка, чтобы не искать
image
Total votes 2: ↑2 and ↓0+2
> Нет ничего более сложного для восприятия человека, чем мгновенные изменения. Потому что в природе просто не существует мгновенных изменений.

Раз в пару лет какой-нибудь дизайнер делает открытие что в природе нет черного цвета или квадратных форм или текстовых интерфейсов и рассказывает о том как людям поплохеет если вы срочно не исправите свой интерфейс. Скоро наверное кто-то скажет что нет ничего хуже для человека чем передвигаться транспортном средстве с колесами, потому что в природе не существует колес.
Total votes 3: ↑3 and ↓0+3
Пример с полем ввода комментария, разворачивающимся в форму с кучей полей, никак нельзя назвать хорошей практикой. Я не спорю, что это стимулирует писать комментарии, но я это воспринимаю как обман. Вместо того, чтобы просто принять мой комментарий, мне внезапно предлагают сделать несколько нежелательных действий. Возникает ассоциация с недобросовестными файлообменниками, которые при нажатии на красивую кнопку «Скачать файл» предлагают зарегистрироваться, отправить SMS, посмотреть рекламу и ввести капчу.

Обычно я приступаю к написанию комментария, когда я уже придумал его смысл. И если внезапно сайт ставит какие-то сложности, которые я не хочу преодолевать, то мне придется отказаться от написания уже придуманного комментария, а это меня расстроит. Чтобы довести до абсурда, представьте, что сначала пользователь вводит и отправляет комментарий, а потом его заставляют вводить имя и адрес, и если пользователь откажется, то его комментарий удалят. Если бы сайт поступил честно и по форме комментария сразу стало понятно, что придется ввести эти данные, то пользователь успеет к этому морально подготовиться. Если желание оставить комментарий невелико, то форма с тремя полями действительно оттолкнет пользователя. Но важно понимать, что это отторжение только увеличивается при внезапном показе дополнительных полей. И хотя комментариев станет больше, за счет этого больше пользователей испытают негативные эмоции.

Конечно, если дополнительные поля — только имя и город, то это будет не сильное негодование, а легкое разочарование («я надеялся, что всё будет так просто, но увы»). А если полей больше и они сложнее, то есть ненулевой шанс разозлить пользователя, и он больше не вернется на этот сайт.
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
:) Там еще при клике экран пытался уехать вверх на 10px и возвращался, с анимацией. Я думаю не смогли сначала определиться как лучше, а прошло время и поняли что с анимацией понятнее достаточно.
Total votes 1: ↑1 and ↓0+1
Дельно написано. Вот казалось бы 20е версии браузеров, а до сих пор скролл по PageDn/PageUp не анимирован. И вроде помню что лет 10 назад где-то это было опционально. Конечно maximw скажет что он и так поймет почему вдруг все на экране поменялось, но есть рассинхронизации юзера и фейса: я постоянно на хабре/везде скролю пробелом, и каждый раз ищу глазами «на чем я остановился».
Total votes 1: ↑1 and ↓0+1
Позвольте сказать, как я скажу :)

Я скажу, что если на экране _вдруг_ все поменялось, то это, скорее всего, плохой интерфейс, понимание которого можно облегчить анимацией. А если для пользователя изменения происходят не _вдруг_, а в ответ на его действия и происходят логично, то тут да, вы совершенно правы, «он и так поймет».
Total votes 1: ↑1 and ↓0+1
Может я много букв написал :) Вкратце: юзер нажал PageDown — все поменялось без анимации. Вроде ожидаемо, но нужно распознавать где то, куда я глядел. Думаю об этом и статья.
Total votes 1: ↑1 and ↓0+1
Ну я тоже обрадовался плавному скроллу, когда увидел как он выглядит при прокрутке колесом. Глазу намного проще понять, где он остановился в прошлый раз.

А вот в случае PageDown вскоре понял что не очень-то он и нужен — при таком листании уже выработана привычка переводить взгляд в верхнюю точку и сразу читать оттуда. А приходится ждать когда промотается весь экран.
Total votes 1: ↑1 and ↓0+1
В Опере (до хрОперы, по крайней мере) плавный скролл включен по умолчанию, если что. В ФФ включается через about:config, в Хроме — в chrome://flags
Total votes 1: ↑1 and ↓0+1
В FF он тоже по умолчанию, AFAIK.
Total votes 1: ↑1 and ↓0+1
И вот еще, анимацию можно делать с jQuery.animate(), а с недавнего времени еще и с CSS3 transition. Последний работает на «низком» уровне, явно проворнее, да и облегчает программу (css декларативен), очень вкусный. Пока столкнулся лишь с одним неудобством — не найду метода узнать что анимация закончилась, приходится делать setTimeout на то же количество секунд как и в CSS (и константу нельзя). Пример: чтобы нечто улетало за экран и только после этого само-удалялось.
Total votes 1: ↑1 and ↓0+1
Великолепная статья. Отличная подборка примеров!
Очень много коментов в стиле «а вот я видел, как анимация а) сожрала все рессурсы б) загрузила пользователя до смерти»
Для любых, даже общепринятых норм дизайна я берусь найти пример отвратительного использования.

В конкретных примерах анимация приведенная выше автором МОЖЕТ сделать интерфейс живым и понятным.
При условии что будет пользоваться умеренно, к месту итд.…
Total votes 1: ↑1 and ↓0+1
На мой взгляд не всегда удаётся реализовать естественно воспринимающуюся анимацию, а не просто такую, которая здорово смотрится. По сути в основе большинства приведенных примеров лежит в так или иначе эффект задержки (delay). Идея с концептом Flying Focus мне понравилась.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time

Your account

Sections

Information

Services

Support
© 2006–2024, Habr