27 февраля в 19:17

10 грехов в системах навигации сайтов / приложений recovery mode

Новый формат статьи: без текста, только схемы. Надеюсь, нарисовал понятно.



















Смотрите еще одну мою статью со схемами: Как получить максимальный доход с рекламных систем на своем сайте.
Марат Ижанов @izhanov
карма
10,0
рейтинг 68,1
Интернет-траблшутер
Похожие публикации
Самое читаемое Дизайн

Комментарии (414)

  • +4

    И в половине примеров хедер на 25% высоты экрана. И это в наш век широкоугольных экранов.

    • +4
      Да, экран на схемах показан условно, пропорции между элементами тоже, это не прототип. Тем не менее, комментарий учтен, спасибо.
  • +10
    7 — бред полнейший.
    Вы как-нибудь на досуге маме своей объясните, что вон та картинка — это возврат на главную страницу. Мне проще было рассказать, что нужно нажать ctrl+l, стереть всё лишнее и нажать enter, чем объяснять, какой бред в голове у UI-ников творится.
    • –2
      Давайте это обсудим. Как вы объясните последовательный отказ от этого пункта сайтами? С каждым годом все больше.
      • +8
        Примерно так же, как засилье рынка телефонами-лопатами, которому, почему-то, примерно никто не рад.
      • +2
        Часто все-таки делают первым пунктом меню возврат на главную страницу. Это удобнее и позволяет разместить в ссылке нужные ключевые слова. А клик на лого все-таки не так очевиден.
      • +1
        На крупных, сильноразветвленных сайтах поиск первого пункта реально может представлять проблему. Кликабельный лого действительно помогает. Меня например раздражает когда логотип не кликабельный. На маленьких лаконичных сайтах в этом нет нужды (одностраничные ЛэндингПейджи тому пример).
        Может быть тенденция в отказе от первого пункта «главная» — следствие усложнения структуры сайтов.
        • 0
          Не стал писать отдельным пунктом, что логотип должен быть кликабельным, это очевидно. Давно не видел сайтов без этого.
      • 0
        Делать такую реализацию в паре с хлебными, крошками. В которой не на главной будет ссылка на главную — кликабельной.

        Так же как телефоны с большими диагоналями имеют «костыль» уменьшающий экран для удобства однорукой работы.
      • +3
        Т.е. Ваш основной довод, что все так делают?!
        • –2
          Мой основной довод в том, что это лишний элемент навигации, ставший анахронизмом за счет того, что его функцию взял на себя логотип.
          А повсеместный отказ от него я привел в ответ на фразу о том, что это якобы «бред полнейший».
          • 0
            Или не взял. Но ты об этом скоро узнаешь.
            • 0
              Мы с вами на «ты»? Как скоро узнаю?
              • +4
                В момент клика на логотипе. Ну и к вам я не обращался, под «ты» подразумевался пользователь абстрактного сайта.
                • 0
                  Ни разу не видел в обратной связи на сайтах с вопросов/разночтений — как попасть на главную. Чтобы было непонятно, что этим переходом занимается логотип. Специально запрошу у своих партнеров с огромным трафиком сообщений на предмет наличия таковых.
                  • +4
                    Человек который не понял как попасть на главную никогда не придёт вам писать обратную связь. Обратная связь работает только когда посетитель мотивирован на получение вашей услуги и ваше предложение достаточно уникально, если вы один из десяти магазинов где я хочу купить товар, то я(и не только я) просто скипну все странные сайты и всё. Почитайте https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B0_%D0%B2%D1%8B%D0%B6%D0%B8%D0%B2%D1%88%D0%B5%D0%B3%D0%BE
                    • 0
                      Ок, вебвизор годится, чтобы это оценить?
                  • +1
                    Вот ещё: на части сайтов логотип ведёт на главную-главную, на другой части сайтов на главную текущего подсайта. А где-то даже на текущую страницу. И опять, пока не нажмёшь, не узнаешь.
                    • 0
                      В портальных структурах (когда есть подпроекты) делают двойной логотип.
                      Например, Яндекс-новости. Со слова «Яндекс» ссылка на главную яндекса, с «новости» — на главную яндекс-новостей. Это очень удобно и грамотно, я на своем портале ту же схему реализовал.
                      • +1

                        Но по привычке нажимаешь на "Яндекс" и попадаешь на морду, которая нафиг мне не сдалась.

                        • 0
                          По какой привычке, у них так было всегда.
                          • +1

                            По привычке нажимать на логотип, а не на пол логотипа.
                            И всегда была эта проблема.

                      • 0
                        Ну и как я об этом должен интуитивно догадаться? Кстати, на «Яндекс» там вообще меню вываливается. Странно что не пошли дальше Я — главная яндекса, н — Я.Новости, д — Я.Диск, е — Почта (неожиданно, правда?), к — Я.Карты, с — какая-нибудь статистика.
                        Ну и весь цимес в том, что на разных проектах одного и того же сайта это всё работает по-разному.
                        • 0
                          Догадываться не надо. Для первого раза есть строка состояния, показывает куда переход, даже тайтл и альт не нужны. Далее логика ясна.
                          Это в каком месте на яндексе работает по-разному? Пользуюсь множеством их сервисов, везде одинаково.
                          • 0
                            Яндекс-карта — просто логотип (а не, не просто логотип, это мне сказали что браузер суперстар и отдали какую-то урезанную версию).
                            Яндекс-почта (диск и ещё куча всего) — уже без меню.
                            Яндекс-картинки/видео — уже без «Картинок» и без меню, как бы проект, но как бы нет.
                            Яндекс — только главная, без меню.
                            Ну и часть из этого ещё и новую вкладку открывает.
                            • 0
                              По логотипу, который мы и обсуждаем: Карты, виде и картинки это не подпроекты на доменах третьего уровня, они в папках. Так, что все логично.

                              То, что у них с меню в сервисах бардак, это да. Никакой общей линии не прослеживается. Интересно, есть ли у них на этот счет гайды.
                              • 0
                                Ну вот смотрите, видео/картинки в выпадающем меню выглядят как отдельный проект. Меня, как пользователя, мало волнует отдельный там домен или нет, я хочу главную страницу этого проекта. Тем более что в Я.Браузере, как я помню, реальный URL скрыт. И вот пользователь уже вынужден вспоминать как вести себя на каждом конкретном подпроекте одного сайта.
                                Карты всё-таки на отдельном домене, но без «Карты».
                                • 0
                                  Карты тоже в папке, но это неважно. Более удобно для пользователей сделать двойной лого для всех проектов, да.
                                  • 0
                                    О, и правда. Я туда попадаю через maps.yandex.ru, поэтому даже не проверял.
                        • 0
                          Ну и как я об этом должен интуитивно догадаться?

                          Я бы на месте Яндекса на hover подсвечивал часть логотипа, тогда было бы немного понятнее.
          • 0
            О… вы тут начали спорить о «минимализме» ?? Может перейдем к «стрелкам» из пункта 10 ?? не?
      • +2

        Тут надо понимать что переход на главную по щелчку на логотип это user experience, а не логичное поведение. Это не одно и тоже.

        • –1
          Да, именно. И общепринятая практика, она не всегда бывает логичной. В английских парках дорожки строят по тому как люди ходят, например.
          • +4

            Как раз английские дорожки это скорее пример логичности, а не user experience. User experience говорит о том что пользователи подстраиваются под существующие реали, а не интерфейс подстраивается под требования пользователя.


            Пользователи научились переходить на главную по логотипу потому что "умные" дизайнеры решили что ссылка "Гланая" пользователям не нужна.


            Я не говорю что это плохо. Просто надо понимать от куда ноги ростут прежде чем продвигать эту идею.

            • 0
              Как раз английские дорожки это скорее пример логичности, а не user experience.

              Ну почему же. Там не всегла все строго логично, люди не только короткий путь выбирают, дорожки бывают замысловатые. Что же это, если не UX?

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

              Скорее потому, что браузеры не сделали соответствующую кнопку и случился в этой теме бардак.

              Ту же ситуацию мы наблюдаем сейчас по объекту пункта 4 — кнопке скроллинга вверх. В некоторых браузерах такая функция есть, где-то нет.
              • +1
                Ну почему же. Там не всегла все строго логично, люди не только короткий путь выбирают, дорожки бывают замысловатые. Что же это, если не UX?

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


                Если мы сами проложим дорожки как мы считаем правильным, то люди будут ходить по ним, не смотря на то что им не удобно. Это и будет UX по отношению к дорожкам. Это именно то что получилось с ссылкой на логотипе. Пользователи подстроились под новые веяния дизайнеров, а того ли они хотели?

                • 0
                  Если мы сами проложим дорожки как мы считаем правильным, то люди будут ходить по ним, не смотря на то что им не удобно.

                  У меня под окном такие дорожки, а между ними тропинки. Смотрится очень наглядно, надо сфотографировать как-нибудь летом.

                  Хотели ли пользователи кликабельный логотип? Вопрос интересный, да.
                • 0
                  После того как UX парка сформировался, мы подстраиваем интерфейс (дорожки)

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

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

            • 0
              Вы не правы в определении самого UX, так как взаимодействие проектируется как раз отталкиваясь от пользователя, то есть в результате интерфейс должен подстраиваться под конкретную модель (или модели) поведения пользователя.
              • 0

                Так я об этом и говорю. Интерфейс должен бодстраиваться под пользователя (модель поведения), а не пользователь под интерфейс

          • 0
            del
      • 0
        Вы правы, от этого пункта отказались почти все еще лет 5 назад.
    • 0
      Скорее не «бред», а просто голословное утверждение. Посмотрел статистику за неделю на одном проекте. По логотипу кликали 200 раз, на ссылку «главная» — 50 раз. Если эта ссылка для кого-то востребована и удобна, то зачем мне её удалять из-за какого-то «греха»? Посетитель всегда прав…
      • 0
        1) В одном из комментов я предлагал оставить тем сайтам, где уже есть. И не ставить новым.
        Так по сути и происходит, поэтому она постепенно уходит.

        2) Я бы сплит-тест провел и посмотрел не будет ли у лого в итоге 250 (цифра условная).
        • 0
          1) Дизайну несколько месяцев, поэтому никто никуда не уходит
          2) Стрёмно такие тесты проводить на живом проекте, т.к. вместо ожидаемых 250 переходов по логотипу можем получить просадку посещаемости сайта на 10% (цифра условная) и как это потом объяснять заказчику?
          • –3
            1) Не знаю, все меньше вижу новых проектов с этим элементом навигации. По моему личному мнению это уже плохой тон.
            2) На таком трафике вы его и не проведете.
            • +1
              1) Вы опять вернулись к доводу «все так делают», от которого уже успели отказаться здесь

              2) У Вас есть статистика на более плотном трафике? Приведете? Ах нет? Ну тогда конечно, Ваше личное мнение важнее.
              • –1
                1) Да, так делает большая часть сайтов, среди них в основном новые и современные.
                Мой основной довод в том, что это лишний элемент навигации, ставший анахронизмом за счет того, что его функцию взял на себя логотип.
                А повсеместный отказ от него я привел в ответ на фразу о том, что это якобы «бред полнейший».

                Где здесь отказ?

                3) Мое мнение не важнее я не стремлюсь, чтобы его принимали. Уж тем более не собираюсь кого-то переубеждать. Оно просто есть и даю я его людям «для подумать».
        • –4
          Как юзер: как по мне, так многим сайтам нужно обзавестись обучалкой. Знаете, когда поверх интерфейса появляются подсказки по навигации (если они нужны конечно, смотря какой сайт). Иногда этого действительно не хватает. Показывать, само собой, только при первом посещении (или детектить, что юзер действует нелогично, например проматывает вверх вместо go to the top).
          • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        А если у вас в меню будет ссылка «Жопа», то число кликов на нее будет выше, чем у логотипа. Это я к чему? К тому что люди используют то, что им дают. Делать пункт меню «главная» — значит засорять навигацию информационным мусором.
        • 0
          «главная» это условность, это «начало». Как это будет звучать в тексте, отдельный вопрос. вообще пиктограмма «домика» хорошо эту роль когда то играла, но сейчас уже практически не используется.
          • 0
            Роль домика и пункта меню «Главная» сейчас с успехом исполняет логотип. У Горбунова есть хороший совет по этой теме: http://artgorbunov.ru/bb/soviet/20150216/

            Может показаться, что дублирование элементов с одинаковой функцией для охвата разных групп пользователей — хорошая идея. На самом деле нет.
            • 0
              Все индивидуально, главное не вводить пользователей в заблуждение. Логотип априори стал ссылкой на главную. Но вот когда вы находитесь в каком то разделе сайта, как добраться до начала? Вот как раз для такие случаев, возможно и не совсем «утопична» идея «главная» — к тому материалу что вы читаете. ( все индивидуально) возможно сделать по другому «подсветку» раздела, и как добраться до верхнего уровня в этом разделе.
              • 0
                В описанной вами ситуации информативней указывать название раздела, в котором находится пользователь. Например, в хлебных крошках
                • 0
                  image А где «хлебные крошки» в примере ??
                  • 0
                    Дык это не ко мне вопрос:)
                    • 0
                      Да я как раз… из «сомневающихся»… вечно. Которые не знают правило «лучшее враг хорошего».
                  • 0
                    Еще возможно, не будем забывать, что иногда ГЛАВНАЯ — это может быть графическая «витрина», в другой «верстке», вот когда «маин.пейдж» может быть логичен, что бы не сбивать с толку пользователя. вообщем вариантов может быть много, как уместного так и НЕ уместного использования данного приема. Но категорично заявлять «привет из 90х» как то глупо.
                    • 0
                      Вы правы, вариантов может быть много и всегда нужно исходить из контекста использования. К примеру, если бы я знал, что 99% будущих пользователей родом из 80-х, то забил бы на это правило и поставил ссылку «главная», нисколько не смущаясь. Следуя терминологии автора данной статьи — согрешил. Правила на то и существуют, чтобы знать, когда их можно разумно нарушить.

                  • 0

                    Вариант слева лучше, потом что логотип никак не связан с меню.


                    Вот пример хорошего решения, где логотип интегрирован в строку меню:


            • 0
              Ну да, интересная статья :-))) «Редизайн напоминает математический приём «сократить уравнение на общий множитель»: повторяющийся элемент удалён бесследно и без потерь, у пиктограмм остались только смысловые отличия, и панель стала нагляднее.» Но тоже, немного с перегибом. в сторону упрощения.
      • 0
        По логотипу кликали 200 раз, на ссылку «главная» — 50 раз

        Я в этих словах вижу, что четверть пользователей пользуется ссылкой. Это мало? Тогда такой вопрос: IE поддерживается?
    • +3

      Мне кажется, это ситуативно. Если главная страница — посадочная, которая не имеет никакого функционала и основная цель которого — чтобы юзер зарегался и начал пользоваться сервисом, то логотипа более чем достаточно и отдельная ссылка будет только мешать, заставляя входить в сервис каждый раз. Если же наше приложение — какой-нибудь дашборд, где главная страница — список наших проектов, то ссылка на главную ОБЯЗАТЕЛЬНО должна быть.

      • 0
        Не совсем понятно. Если главная /index.html просто дизайнерская и большая кнопка ведет на /contents.html c дашбордом/месонри, нужна ли на /contents.html кнопка/ссылка на /index.html?
    • +1
      Вы своей маме интернет дайте на 2 дня и увидите, что спустя это время она будет кликать на логотип вместо главной. Пользовательский опыт в этой ситуации уже давно перевалил за ту критическую отметку, когда нужно использовать устаревший костыль «Главная» в меню.
      • 0
        5 лет объясняю, ага.
        • 0
          Ламповое поколение. Мои родители такие же. Зато ребенок в 3 года пользуется гамбургером за здрасти.
          • 0
            Чем-чем?
            • 0
              Вот такой иконкой на смартфоне https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-128.png
              • 0

                Добавил картинкой:
                image

                • 0
                  П — Педантичность:)
                  • 0

                    У — Удобство :)

                    • –1
                      С — Согласен:)
                      • 0

                        К — Консенсус :-)

              • 0
                Почему вас восхищает именно этот символ?
                • 0
                  Почитайте ветку. Там речь не о моем восхищении.
                  • 0
                    Вы сказали, что вас восхищает, как ребенок легко разобрался с назначением этого элемента. Но аналогов же у него не мало: те же стрелки, «домики», звезды (избранное), инфо (i) и прочие. Вы сакцентировали внимание именно на этом, что меня и заинтересовало.
                    • 0
                      Вы не поняли. Я имел в виду, что наш багаж опыта влияет на восприятие. Людям старшего поколения тяжелей дается освоение интерфейсов. Новые поколения воспринимают то, о чем мы спорим, как данность.
    • 0
      Не бред, а то что есть уже много лет и повсеместно. Найти сайт с пунктом меню «Главная» несколько тяжело. И у меня тоже родители далеки от техники, но я понимаю что они с одинаковой вероятностью могут знать, что щелчок по логотипу это переход на верхнюю страницу и что вообще вообще за пункт такой «Главная». В общем не согласен с вами, практика показывает, что этот пункт не нужен. И это настало не в 2017 году и даже не 2013.
  • +5
    6й пункт антипаттерн скорее.

    Например, если оставить в Gmail настройки интерфейса по умолчанию, чувствую себя дебилом, у которого в экран влезает всего 10 писем.
    • 0
      Поясните, почему отклеивание элементов и ссылок друг от друга, отступы между ними — это антипаттерн?
      • +3
        Антипаттерн если злоупотреблять.
        По моему опыту сейчас этим злоупотребляют почти все. =/
        • 0
          Злоупотреблять отступами? Ну да, в километр их делать тоже не гуд.
        • 0
          Злоупотребляют, потому что понимают, что их сайт может быть открыт на телефоне или планшете. И если не предусмотрено отдельной «мобильной» верстки (или адаптивного дизайна) то попадание в близкорасположенные и мелкие ссылки и кнопочки будет болью.
          • 0
            У меня браузер на телефоне увеличивает область, если я попадаю в два активных элемента. Бесит, но в целом удобно.
      • +9
        Есть великий и могучий мануал от Microsoft по проектированию пользовательских интерфейсов. Мануал построен на опыте, других мануалах и научных исследованиях. Но современные дизайнеры не читали. Хорошо, если слышали (хотя сомневаюсь, нет от православной же яблокомпании). Представитель старой школы объяснил бы вам, что расстояние между элементами имеет скорее эстетический смысл. Удобство же напрямую пропорционально размеру элемента. Больше = легче пользоваться пользователю. Ключевое слово: пользователю. Жаль, что современные бородатые дизайнеры в очках с роговой оправой вершиной науки о дизайне считают приобретение компьютера Apple и чашки латте.
        • –2
          Давайте представим, что слайд 6 это страница прототипа (хотя это не она).
          На правом примере навигация удобней, чем на левом? Или одинаково (размер элементов не изменился)?
          • +4
            Удобство напрямую зависит от размера элементов. Если это кнопки размером, хотя бы 100х35, то независимо от расстояния между ними, пользователю пользоваться будет легко, процент нажатий мимо — ноль. Если же это новомодная фигня диаметром 10 пикселей, то расстояние имеет решающую роль, т.к. половина нажатий — мимо. С помощью расстояния можно хотя бы резко снизить процент нажатий не то, что мимо, а на другую команду. Добавление расстояния между элементами в первом случае приветствуется, но лишь для эстетики, на удобство это не влияет.
            • 0
              Вашу мысль на счет важности размера элементов и взаимосвязь размера с расстоянием я понял. Пожалуй, можно было об этом написать отдельным пунктом. Но я решил себя ограничить десятью.

              Вынужден повторить вопрос:
              На слайде 6 навигация справа лучше, чем слева или нет?
              • +3
                Вы спрашивали про удобство — я уже ответил. Лучше ли? Удобно+красиво всегда лучше, чем только удобно. Красиво, но не удобно — всегда хуже. Надеюсь ответил.
            • +1

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

          • 0
            На правом примере button 3 будет нажиматься только случайно. Потому что она под блоком adv, который скрывает следующий за ним контент. Потом появится пользователь у которого экран по высоте меньше в два раза, а полосы прокрутки не добавили, потому что у дизайнера всё влезало в экран. Ну или просто не влезло Link 3 и всё что ниже.
            • 0
              Как я уже замечал выше это не прототип, а иллюстрация конкретного пункта статьи. А именно, необходимости расстояния между элементами.
          • +1
            на 4к мониторе это выглядит так:

            — Посередине Узенькая колонка текста(визуальные 15%), визуально кнопки скучены
            — Текст на весь Экран, но микро шрифтом(10-12 на 42-46 дюймах) Между кнопками как раз визуальный километр
            — Кнопки и текст расползаются случайным образом — правда этот вариант уже редкость…

            ну и совсем маразм это когда 20-30% экрана Header, 20-30% Footer — в этом случае хорошо если они просто статичные и обычно они БЕСПОЛЕЗНЫ, а посередине 30% полезной нагрузки, да еще и сформатированой так что получается или миркошрифт ил 5-8 строк и это не меняется никак…
        • +1
          Ага. Особенно круто сделать в эксплорере на вин 8 кнопку «Назад» размером в 10 пикселей, при этом кнопка «удалить» в 4 раза больше. На удивление в интернет эксплорере эту кнопку сделали большой и удобной.
        • 0
          Поделитесь пожалуйста ссылкой или хотябы названием мануала. В гугле не забанили, но хочется быть уверенным, что я нашёл то, что надо.
    • +1
      Ничего подобного. Например, на почте mail.ru очень маленькое расстояние в левом столбце между пунктами «Корзина» и «Настройка папок», в результате чего приходится выцеливать чтобы попасть на корзину.
  • +8
    Вот почему ребята с планеты UI «специалистов» считают что вся галактика мыслит так, как на их планете? Я бы вам ни за что не доверил проектирование UI своих приложений. Вот объясните: пояснительный текст к вашему абстракционизму — это привет из 90х? Пункт 1: вот что вы хотели сказать?
  • 0
    Представление UI о том, как должны думать другие люди, но к сожалению они так не думают :)
    Лучше всегда исходить из концепции (для Росссии и СНГ), что пользователи «олени» и если не видят огромной зеленой кнопки, то сразу пишут, а где то-то, а где это, а как и так далее.
    Если UI считает, что серая кнопка — это значит, что ее нельзя нажать, то это не значит, что и все остальные так считают.
    • 0
      А как думают люди применительно к пунктам статьи? Разверните мысль.
  • +31

    Так вот откуда вы лезете! Прямиком оттуда, куда ведет дорога с благими намерениями!


    пункт 1 — считай посетителей за идиотов.
    пункт 2 — суй другой контент к этому (а этот сделай поменьше)
    пункт 4 + 9 — везде суй догрузку (да по ***** 10 элементов, чтобы неповадно было Ctrl+F)
    пункт 6 — сделай все огромным и разнеси в разные стороны — дизайнерам и менеджерам нравится воздух. Зачем показывать список из 20 фильмов, когда можно показать 8, но красиво? С догрузкой, конечно, чтобы Ctrl+F не работал
    пункт 8+10 — больше 4+ шаговых визардов. И чтобы и в них все было запрятно в see more. Люди просто боятся форм на 20 инпутов, где мы пытаемся узнать всю их биографию и где они хранят ключи, так что разобьем по 3 инпута и будет хорошо.


    Прямо "10 советов как повторить шедевральный Кинопоиск Яндекса".

    • +3

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

      • +1
        Ну это уже конспирология. Вы это ни от какого дизайнера интерфейса не услышите, и не потому что он врёт.
    • –4
      Как извратить любой тезис, доведя его до абсурда. Было прикольно почитать, спасибо.
    • 0
      Пункт 2 прям сейчас на этой странице, где самое ценное затолкали в самый низ, а под статьёй странные ссылки.
      9. К 10 элементам их ещё надо располагать по 3 в ряд. Чтоб десятому места не нашлось. Следующие 10 начинаются с новой строки.
    • 0
      Пользователи = идиоты. Интернет стремительно тупеет в-среднем. Поэтому на одной странице сайта должно быть максимум возможностей для рядовой марь-иванны
      • +2

        Так может хватит отуплять пользователей? Статья называется не "повышаем конверсию на 0,01%" а "10 грехов навигации". Хорошая навигация не всегда повышает конверсию напрямую.


        Так вот вы определитесь — зачем тупому пользователю максимум возможностей? Ему хватит одной.


        Мой поинт такой — Если вам нужна кнопка go to now — значит что-то в навигации уже не так. Потому что это костыль#304 — давать страницу, откуда юзер должен совершить ручной редирект куда нужно.


        Например, кейс#1 — новая крутая либа с крутым лендингом и большой кнопкой GO TO DOWNLOADS PAGE. Почему не дать скачать прямо на лендинге? И кнопки DOWNLOAD, DOCS, ALTERNATIVE DOWNLOADS сделать одинаковыми?


        Или вот новый отвратный сайт билайна по автору прямо безгрешен:
        1) Рекламный баннер на пол экрана с огромной кнопкой
        2) Два тарифа который надо скроллить (зато воздуха-то сколько!!11!1!)
        3) Потом ещё блок рекламы с телефонами. Типа они самые популярные. Вы, бть, на рынке что ли, НЕ ВСМАТРИВАЙСЯ, ПОКУПАЙ, КУПИ ХОТЬ ЧТО-НИБУДЬ
        4) Помощь услужливо спрятана на отдельной странице, хотя рядом выпадающее меню.


        (сорри, с билайном личное, такой отстой сделали)


        В общем, так и видится диалог:
        Дизигнер типа автора: "щас решу ваши проблемы. Все убираем, оставляем только рекламу."
        Начальник: Мне нра
        Программисты, низшие дизигнеры: Но ведь у нас был сложный сайт с 12507120 пунктов
        Дизигнер: уберите в меню.
        Начальник: Чот меню теперь по 129401 пункта
        Дизигнер: уберите на отдельную страницу.


        Я, блин, школьником так стол убирал — открываешь ящик, скидываешь туда ВСЁ, на столе воздух, пара элементов и красиво.

  • +6
    #6 — как бы да, но там чрезвычайно важно чувство меры, сейчас нередко можно увидеть тому антипримеры.

    #7 — глупость, повторяемая пуристами семантики столько лет, сколько я себя помню. Пункт «Главная» не обязан быть в меню, но я не видел ни разу, чтобы его наличие кого-то смутило или запутало.

    #10 — вкусовщина.
    • –3
      6. Да, бывает перебор, мы это обсудили выше. Но этот пункт про недобор, приклеивание.

      7. Если пользователи привыкли и «Главная» уже есть, то можно оставить. Для новых проектов ее ставить не стоит.
      С таким тезисом согласны?

      10. Помощь в навигации, выделение элементов, ведущих на следующий этап (дополнительно к их расположению, размеру и т.д.). Для вас это вкусовщина? Ок, спорить не буду.
      • +7
        7 — нет, нет, нет, и еще раз нет! Графический интерфейс должен быть _интуитивно понятным_! Он не должен заставлять пользователя гадать: что нужно сделать для достижения примитивной цели. И он не должен быть непредсказуемым (наболевший клик по пустому месту на странице скролит до самого верха).
        • 0
          7. То есть, по вашему мнению всегда надо ставить пункт «главная» в меню?
          • +1
            Да, если это не единственный пункт. Название «главная» может быть заменено другим, подходящим по смыслу, например: домашняя, введение (intro), сводка (summary) и т.д.
          • 0

            Роль пункта "главное" может исполнять логотип сайта. Когда логотип сайта находится в полосе меню, тогда очевидно, что он является пунктом меню, ведущим на главную.

            • +5
              Может, но только дублирующую. Исследования показали, что подавляющее большинство обыкновенных пользователей пользуются навигацией «назад», чтобы попасть на титульную страницу, вместо логотипа. А часть пользователей хрома после отключения Backspace писали злобные письма в саппорт: почему программисты такие дураки — заблокировали Backspace?
      • 0
        1. Пользователю должно быть очевидно. как попасть на главную страницу. А функционал дублировать действительно не стоит.


        2. Можно сократить названия кнопок до "Proceed" и "Back". Чем короче, тем лучше. Номер шага здесь — информационный мусор и дублирование информации

        А ещё вместо "Step 1", "Step 2" можно писать что-то более осмысленное типа "Order", "Contact information".

      • +7
        7. Нет, не согласен. Логотип, ведущий на главную — это распространенный, но как бы так выразиться, неофициальный паттерн. Об этом соглашении знают опытные пользователи, но для далеких от IT людей оно совершенно не очевидно. Вообще, исходная идея повесить на лого такую функцию была хороша — но лишь как дополнение с основной, явной навигации.
        Более того, я заметил, что лично я сам при наличии в меню пункта Home — всегда пользуюсь именно им. Причина в однозначности. Я не знаю заранее, кликабелен ли логотип (ну то есть более вероятно, что да, но не всегда, гарантий нет) — а пункт меню, уж если он есть, рабочий совершенно точно.
        • +3
          Да что там говорить, я пользуюсь интернетом 18+ лет, сам создаю сайты, и только из этой статьи узнал, что оказывается, надо на некоторых сайтах пробывать нажать на логотип. Да что за фигня творится в ваших головах, дорогие дизайнеры
          • –4
            Коллега, надо не пробовать, а нажимать.
            А как вы пользовались доброй половиной сайтов, где нет ссылки «главная»? Вообще, какими сайтами пользуетесь? Давайте их рассмотрим.
            • +1
              Тоесть вы предлагаете мне нажимать на сайте все подряд в надежде куда-то попасть? Откуда, по вашему, пользователь может узнать, что надо нажать на лого? Ну включите голову уже.

              Никак. Открываю сайт заново.
              • –4
                На все подряд не надо, надо только на лого. :->
                Это общепринятая практика, спросите у любого школьника, кто один день побывал в интернете.
                Вы действительно этого не знаете или прикидываетесь?
                • +5
                  Спросил. Вот у меня под боком как раз школьник сидит. 12 лет. Спросил у всех взрослых в округе. Никто не вкурсе. Может это вы прикидываетесь? Возьмите листик с папочкой, станьте возле метро, проведите опрос. Вы удивитесь, похоже.
                  • –6
                    Как эти люди пользуются сайтом сбера/альфы, яндексом, и вообще половиной интернета?
                    Как вы пользуетесь Хабром, на котором находитесь? Даже не знаю как реагировать на ваши слова.
                    • +1
                      Дак просто реагируйте. Опрос проведите, не среди UX разработчиков, а среди обычных людей. Обычные люди вообще пользуются только сильно очевидными вещами. Многие вообще не знают, что такое яндекс и гугл. Они чего хотят сразу в «страничке с интернетом» пишут(про фаерфокс и експлорер они тоже не знают, сюрприз!).
                      Сбером и Альфой никак не пользуются. Пользуются только privat24 и то в варианте «вот на эту кнопочку надо нажать, мне так в банке сказали».
                      • –5
                        Нет, коллега, извините. Мой мозг не готов воспринимать ваши слова. Пойду кофе попью :->
                        • +1
                          Вы придумали неправильные принципы и удивляетесь — как это люди по ним не живут?! Да, иногда лучше пить кофе, чем писать статьи.
                          • 0
                            Коллега, я ни разу не стремлюсь, чтобы люди жили по моим принципам. Вы меня с кем-то путаете. Задумались над этим вопросом, обсудили — уже хорошо.
                            А лучше что мне лучше: писать статьи или пить кофе или то и другое вместе решу сам.
                            • +2
                              В статье Вы утверждаете — «так лучше!», а не задаете вопрос — «возможно так лучше?». Поэтому Вы именно продвигаете свою идею, а когда Вам указывают на ошибки в ней, то у Вас появляется довод «ну и что? я все равно буду так думать!». И вот уже этот довод, вкупе с написанием статей, говорит о том, что Вы пытаетесь склонить людей действовать ПО-ВАШЕМУ, а не так, как им будет ЛУЧШЕ.

                              Но Вы, конечно-же, можете всё это отрицать и опять просто пойти пить кофе. Но тогда уже такое поведение будет называться иначе…
                              • –1
                                Вам показалось. Посмотрите мои предыдущие статьи, каждая начинается с того, что это не советы и я никого не учу. У каждого своя голова на плечах, думайте. По этому поводу даже отдельный пост есть — про кейсы.
                                Зачем бы мне понадобилось кого-то склонять на свою сторону? Я уж в том возрасте, что убеждать кого-то не интересно.
                                Мне не указывают на ошибки (само это слово здесь неуместно), а высказывают свое несогласие с некоторыми тезисами. И это нормально.
                    • +3
                      Зачем на сайте Сбера тыкать в главную? Я там сразу по меню в нужное место попадаю.
                      • 0
                        Сбер я просто как первый попавшийся пример написал. Возьмите яндекс, любой другой сайт, которым пользуетесь.
                        • +2
                          Я так не делаю. Во-первых, есть кнопка Назад (я ж наверняка пришёл с главной), во-вторых есть текстовые ссылки на главную (здесь, к примеру, сверху они есть, даже на главную Хабра присутствует ссылка). Вру. Делаю. Есть такой сайт dirty.ru, там я тыкаю в Гертруду, чтоб попасть на главную подсайта, да и то, большей частью из-за того, что там навигация отсутствует. До его редизайна таким заниматься не приходилось.
                    • +2
                      Вы поразительны в своём упорстве. Вам уйма людей говорит, что бывает не только так, как думаете вы, а вы всё равно утверждаете, что все лжецы и выдумщики.
                    • +3
                      Ну, к слову, хотя я и в курсе, что на лого можно тыкать, на хабре я тыкаю в слово «хабрахабр» или «гиктаймс», а не в лого.
                      Собственно всегда рассматривал ссылку на лого, как дополнительную к основной навигации. Но никак не основную.
            • +2
              Ну давайте рассмотрим. Фейсбук — кнопка главная — есть. Хабр, itc.ua, SO — есть разделы, главная — не нужна. Google — проще ввести новы запрос в строку поиска.
              • НЛО прилетело и опубликовало эту надпись здесь
                • +1
                  Мы же про мой опыт. Мне не нужна. Вам может и надо. Но зачем мне главная хабра(которая сейчас идет на топ, для которого есть пункт меню), мне непонятно. На SO я вообще только свои теги смотрю. На itc я смотрю ленту и возращатся мне както нет смысла сегодня. А завтра я открою его заново.
                  • НЛО прилетело и опубликовало эту надпись здесь
                    • 0
                      Но тем не менее, не всех людей раздражает дублирования, мягко говоря не все знают. У меня ни в одном проекта так не работает и ни один клиент НЕ ПРОСИЛ так сделать. Может тоже не знают? Зато тут уже много примеров привели, когда люди ругаются и звонят в техподдержку.

                      Это неочевидно. Не все согласны раз в пять лет изучать курсы пользования интернетом(да и не учат там такому).
                      Вас может удивлять или не удивлять, это не важно. Вы забываете, что странички вы делаете для обычных людей, не для вас самих.
                      • НЛО прилетело и опубликовало эту надпись здесь
      • 0
        10. Только с этим комментарием я заметил помимо болда ещё и стрелочки на кнопках. Да, это вкусовщина. Болд как бы тоже не особо помогал. Понимаю что хотелось как-то выделить переход к следующему шагу, но вполне достаточно что ссылки «продолжить» и «вернуться» выглядят по-разному (а если ещё и отличаются от всех остальных ссылок, то стрелочки уже не помогут).
        • +1
          Болдом я обозначил элементы, на которые в слайде стоит обратить внимание (например, изменились относительно левой картинки).
          А пункт исключительно про стрелки. Они именно для того, чтобы выделить кнопку перехода на другой этап, отделить от остальных элементов навигации. И это тоже написано в слайде.
  • +17
    4. В подавляющем большинстве случаев это «Go to top» перекрывает контент и безумно раздражает. Хорошо. что её, как правило, можно выпилить uBlock'ом.
    • +4

      Согласен. Для этого есть кнопка Home на клавиатуре. А ещё я люблю скроллить средней кнопкой — кликаю слева или справа от колонки текста, и очень неприятно, когда клик попадает на функциональный элемент.


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

      • 0
        очень неприятно, когда клик попадает на функциональный элемент

        У меня клик на колесо – симуляция колеса (скроллить), клик на 2 кнопки сразу – симуляция клика на колесо (открыть в новой вкладке / закрыть вкладку). Сначала было непривычно, но без рабочего колёсика это пока самый удобный вариант.
      • 0
        >Согласен. Для этого есть кнопка Home на клавиатуре. А ещё я люблю скроллить средней кнопкой — кликаю слева или справа от колонки текста, и очень неприятно, когда клик попадает на функциональный элемент.

        не я один такой, хорошо что на нормальных сайтах эта дрянь отключается, по рукам бы умникам надавать за такой функционал.
      • 0
        А если под рукой нет клавы и пользователь работает с тач-устройства?
        • +4

          Быстрый свайп — и страница с большой скоростью скроллится куда надо.

        • 0
          У меня на двух (IOS и Andoid) устройствах можно тапнуть на самую верхнюю часть экрана для скроллинга на самый верх. Не уверен фишка это устройства или браузера, но удобно.
    • +9
      Категорически поддерживаю, какое-то странное повсеместное решение с этими кнопками. Где-то есть какие-то, например, A/B тестирования по этому решению? Ни разу за свою жизнь не воспользовался этой самой кнопкой, и не думаю, что я такой один. Зато видел адовые варианты реализаций этой самой кнопки повсеместно, начиная от перекрывания контента, заканчивая перехватом фокуса у мыши, чтобы я не мог использовать колесо, если мышка на этой кнопке (превед, ВК).
      • НЛО прилетело и опубликовало эту надпись здесь
        • 0
          Лучше не кнопка, а поле сбоку на всю высоту, как здесь на Хабре.
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0
              А поле слева, в нижней части сайдбара / под ним? Усложнение верстки, но зато пользователям проще будет.
              • НЛО прилетело и опубликовало эту надпись здесь
          • НЛО прилетело и опубликовало эту надпись здесь
            • –1
              О, это вы дико правы. И кнопка главной текущего сайта должна быть в браузере. Яндекс эмулировал ее подсвечивая адрес сайта, то убирал эту функцию, теперь опять вернул. Еще о сайте некая кнопка, которая вытаскивает его описание + известные ему параметры. Тоже было бы неплохо.
              • НЛО прилетело и опубликовало эту надпись здесь
            • +1
              ПКМ — это для 10% юзеров, для всех остальных должны быть визуальные элементы, которые видны всегда / сразу.
      • 0
        Эта кнопка должна показываться только и исключительно на тач-устройствах и быть вменяемо расположена…
        Вот Хабр попросил выключить адблок, и слева теперь эта фигня, которая никак не отключается. Вырубал через element hiding helper. Кстати, раньше отключалась в настройках
        • 0
          Вот у меня компьютер с тач-экраном. И этой кнопкой пользуюсь большим пальцем левой руки. Как рез когда лежу на диване и держу экран левой рукой, а оперирую правой.
          • 0

            Пора вводить новый заголовок HTTP?

            • 0
              Что-то к вечеру у меня с юмором плохо, извините. HTTP здесь при чем?
              • 0

                Чтобы пользователям с тач-экраном и без него предлагать разный интерфейс.


                Сейчас по строке UserAgent можно понять, мобильный браузер или десктопный и показывать соответствующую версию сайта. Но это не решает проблемы, когда есть тач-интерфейс на десктопе.


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

                • 0
                  А я бы просто дал кнопку всем, десктопам тоже. Возможно, разную для малых экранов и больших и с ее появление только при длинном скролле (5 экранов, например).
                  • 0

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

                    • –1
                      Да, об этом был где-то коммент. То ли внизу, то ли наверху, что-то я в них уже запутался :->
    • 0
      Стоит отметить, что эту в некоторых браузерах выполняет клик по закладке. Но, к сожалению, это не стало стандартом и работает далеко не всегда. Сделать ее корректно, ненавязчиво и удобно — серьезная задача для дизайнера, да. Функционально я бы ее включал при очень большом скроллинге (от 20 экранов, например). Либо в самом конце контента, у футера.
      • 0
        Поясните про закладки, пожалуйста.
        • 0
          Клик по открытой, текущей вкладке в браузере прокручивает страницу вверх.
          • 0
            Спасибо, не знал. Хотя, это нарушение — непредсказуемое поведение.
            • 0
              Нарушение чего?
              • +1
                Основного принципа графического интерфейса: пользователь не должен «гадать», как пользоваться интерфейсом (интуитивность) и элементы интерфейса не должны выполнять функции, для которых они не предназначены (предсказуемость).
                • –2
                  Так что именно непредсказуемость? Прокрутка вверх по клику на закладку или кнопка вверх, предлагаемая мной?
                  • +1
                    Клик на закладке. Закладка — это таб в списке. Клик по неактивной закладке делает её активной. Клик по активной — ничего не делает. Привязка скрола к клику это… Это как привязать движение мышкой по оси X к зуму страницы: офигеть, не догадаться.
                    • –1
                      Для меня это тоже было неожиданно. Называть это преступлением я бы не стал, с удовольствием пользуюсь. Проблема в том, что это не стало стандартом.
                      Так же как браузеры не договорились сделать кнопку с переходом на главную текущего сайта, о которой мы тоже спорим.
                      В этих условиях и приходится работать, да. А что делать? Жисть такая.
          • +1
            и как потом обратно вернуться?
            • –1
              Обратно вниз?
            • 0

              Повторным нажатием.

          • 0
            Это как? в каком браузере?
            • 0
              В десктопном браузере кликаешь на открытую закладку наверху. Страница прокручивается вверх. Еще раз кликаешь — обратно в то же место на странице возвращается. В яндекс-браузере, например.
              • +1
                Это вкладка. У меня клик на ней скрывает данную страницу и возвращает к предыдущей. Что тоже очень удобно.
                • 0
                  Да, вкладка. В каком браузере возвращает к предыдущей?
                  • 0
                    Opera Presto.
                    • 0
                      Интересно. У меня в Opera developer вообще ничего не происходит. Заметил, что и в Хроме разных версий функции по клику на текущую вкладку тоже повесили разные.
                    • +1

                      Вы что-то под себя настроили, это не поведение по умолчанию.

                      • 0
                        Общие настройки — Расширенные — Вкладки — Настройки вкладок… — Сворачивать щелчком по вкладке.
    • 0
      Меня все плавающие элементы раздражают, которые не двигаются вместе со страницей. Исключение — почти незаметная кнопка «наверх» с возможностью вернуться, как тут на Хабре сделано, огромный плюс еще что она прячется если начинает перекрывать контент(например на мониторах с низким разрешением).
      • +4
        почти незаметная кнопка «наверх» с возможностью вернуться, как тут на Хабре сделано

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


        Есть сайт, где кнопка наверх — маленький квадратик 20х20 пикселей в левом нижнем углу, вот это действительно совсем не напрягает.

  • +3
    За пункт 9 расстреливать надо.
    • –3
      Конкретный пример. Яндекс-маркет, список производителей телевизоров раскрывается по кнопке «еще».



      Неудачное решение? Расстреливать надо?
      • +5
        Мне кажется, у Яндекс-маркета не очень удачное решение.
        Я раскрыл изначально скрытый список и ожидаю, что там будет полный список производителей, зачем мне еще куда-то заходить чтобы получить полный список?
      • +4
        Решение удачное для широкого потребителя, которому нужны известные по рекламе бренды. Но если Вы в этот список не попали, то для Вас решение будет неудачное. Мало того, что для поиска нужного производителя приходится нажимать доп.кнопку (тут еще хорошо, что один раз, а не десять). Так после этого надо в этом большом списке искать или глазами или через ctrl+f нужную запись. Имхо, более удобный вариант — весь список, где популярные сверху и видны в текущей активной области + авто-фильтр над контролом (или по клику), где можно вбить нужное название.

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

        Далеко не все решения у яндекса хорошие и удобные, Вам уже напомнили убитый кинопоиск, по факту сам яндекс.маркет уже смертельно болен. Поэтому таки да, надо расстреливать.
        • –1
          Имхо, более удобный вариант — весь список, где популярные сверху и видны в текущей активной области...

          Весь список бесконечной простыней в правой колонке?
          • +3
            Нет, не на всю высоты колонки. Размер списка тот же, что и сейчас (под количество «популярных» производителей), остальное — скроллбар в самом списке.
            • –3
              Ну то есть, вас смущает одно нажатие кнопки «еще». Вы считаете, что лучше сразу выкатить блок со скроллингом. И за это надо расстреливать?

              А то, что вся колонка выглядит чище, нет ненужного акцента на производителе (неизбижного в вашем решении) это ничего, надо как бы не заметить?
              • +6

                Ключевое: CTRL+F.

                • –2
                  В примере поиск по производителю сделан отдельно.
                • 0
                  А на планшете как искать? В примере список производителей перекрывает потребности 90% потребителей. Зачем им малоизвестные бренды? Или надо долго скроллить, чтобы дойти до Sony?
                  • 0
                    Сони как раз как популярный бренд показывается сразу, без кнопки «еще».
                    А вот если бы была простыня, то надо было бы скроллить.

                    На планшете все работает без проблем, проверил.
        • 0
          Список товаров на Я.Маркете это больше не список товаров, а список товаров с ценами и магазинами. Поэтому там всё и дублируется.
      • +2
        Дибильное решение. Работа дизайнера халтурщика в отсутствие маркетолога. Для бизнеса это «дизайн-решение» выливается в то, что малоликвидный товар превращается в неликвидный. Увольнять надо!
        • –3
          Предложите лучше для пары сотен пунктов.
          • +4
            Речь идёт о категориях. Прльзователям 10-15 категорий на уровне с трудом даются. Двести это уже признак того, что админов пора менять :) а серьёзно: в таком случае поможет только переработка структуры каталога и интерфейса. Как быстрое (но не идеальное) решение — текстовое поле для фильтрации; адфавитный набор кнопок — клик по «S» даёт список Samsung, Sony и т.д.
            • –3
              Текстовое поле для фильтрации есть при нажатии на «еще».
              Вместо простыни или скроллинга ее поставили. В чем проблема достойная эпитета «дебильное решение»?
              Сдается мне вы тут троллингом занимаетесь, милейший :->
              • +6
                Троллингом? Откуда вы такие берётесь? Вам говоришь почему плохо и в каком направлении искать решение — а в ответ «троллинг». Вот не завидую я вашим e-commerce клиентам, если вы не понимаете насколько всё это взаимосвязанно.
              • +3
                Да, это дебильное решение, потому как поиск не работает, а у многих магазинов начинают косячить фильтры(они тоже вслед за Яндексом стали делать модно и молодёжно). Надо сначала много-много скролить, а потом вверх и Ctrl-F. В Яндекс-Музыка то же ужасное решение, настройка «у меня хороший канал, давай полный список» отсутствует, как и отсутствует (или не увидел) где бесконечные списки, которые нельзя загрузить в принципе.
                И вебдванольная телепрограмма — раньше отдавались выбранные каналы, потом каждый стал грузиться отдельным запросом (что приводило к падениям сервера, периодически не отдававшего контент во вложенных элементах), сейчас мощность выросла и проблем с этим почти нет, даже более-менее удобно показывает «сейчас», но потом UI-специалисты решили оторваться, элементов навигации стало больше, перестало работать в старых браузерах, а с путаницей контента так ничего и не сделали.

                Название статьи подобрано хорошее — как видим что в оригинальных грехах, мнение автора расходится с мнением общественности.
                • +1
                  Надо сначала много-много скролить, а потом вверх и Ctrl-F.

                  Плюсую. Тот же вконтактик с отваливающимися запросами посреди «бесконечно скролящихся» альбомов из сотен фотографий — это ад, который приходится повторять снова и снова, уповая лишь на кэш.
      • +4
        Плохой пример.
        В данном случае без кнопки «еще» банально не будет видно других фильтров, тоесть кнопка «еще» существует не для того, чтобы скрыть 90% процентов вариантов от пользователя, а для того, чтобы юзер увидел другие фильтры.
        Сделано так потому, что фильтр «Производители» открыт по умолчанию. Если раскрыть другой фильтр с сотней вариантов выбора — кнопки «еще» нет.
      • 0
        Вспомните как горели пуканы, когда гугл переместил ридер в «еще» в своей панельке. Тут присоеденюсь к тем кто «если у вас список А-Я — расстреливать» при этом нужно добавлять поисковое поле, но если у вас список «по популярности или поддается какой-то логике — можно».

        Собственно именно это у яндекса и реализовано, но не описано у вас на картинке!
      • +8
        За 10 товаров на странице и кнопку «ещё» — надо «расстреливать». (ещё доставляет, когда в футере ссылки с инфой есть, но при перемотке вниз, чтоб посмотреть, чёж там в футере-то есть, товары подгружаются автоматически и до футера добраться не получается)

        За отсутствие кнопки «показать все товары» а не только 30/60/90 — надо «расстреливать». (у меня быстрый комп/интернет, я хочу 1000 товаров взглядом окинуть, а не бороться с навигацией, которая ещё и не запоминает, что я хочу видеть много товаров а не выбирать каждый раз 90… привет Леруамерлен!)

        За сортировку по умолчанию «по популярности/релевантности» — надо «расстреливать». (хочу по цене — это понятно, в отличие от «популярность/релевантность» )

        За выбор города при каждом обновлении страницы да ещё с затенением всего экрана — надо «расстреливать». (лазишь, например, по всеминструментам.ру, от выбора города отказался один раз, а они тебе при каждой перезагрузке странице его упорно показывают… попробуйте сами, поделитесь своими ощущениями)

        За рекапчу с «выберите все деревья/витрины» — надо «расстреливать». (это без коментариев)

        За «помощников», которые вылазят на пол-экрана да ещё со звуком — надо «расстреливать». (тех, кто такое на свои сайты лепит, вобще ничё не спасёт)

        Вот такой вот мой, «расстрельный» список.

        А по поводу я.маркета — неудачное решение. Лучшеб вместо кнопки «ещё», сделали возможность «НЕ ПОКАЗЫВАТЬ» этого производителя/магазин и т.п., а то, иногда, листаешь кнопкой «ещё» 1000 страниц линолеума по 25 рублей, от магазина X и думаешь: «когдаж реальные предложения начнутся?!»
        • 0
          у меня быстрый комп/интернет, я хочу 1000 товаров взглядом окинуть, а не бороться с навигацией, которая ещё и не запоминает, что я хочу видеть много товаров а не выбирать каждый раз 90… привет Леруамерлен!

          Извините, но если Вы зайдете на статистику популярных сайтов и увидите что в основном люди сидят на старых браузерах, с низкой скоростью интернета и с небольшим разрешением экрана. Не стоит думать, что всем так повезло =)
          • +1
            в основном люди сидят на старых браузерах, с низкой скоростью интернета и с небольшим разрешением экрана.

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

            Люди с дешевыми компьютерами делают дешевые заказы, очевидно же.
            • 0
              Привильнее было бы кнопку «Показать еще»

              По поводу дешевых компьютеров и дешевых заказов абсолютно не правы — старшее поколение которому не нужен i7 (справедливо для западных рынков)

              А комент был о спорном суждении: у меня вот мощный комп и я хочу больше, тяжелее и тд
              • +1
                Привильнее было бы кнопку «Показать еще»

                Еще хуже. Искать по такому списку — незавидное удовольствие, закладку не сделаешь.

                которому не нужен i7

                То, что для для такой банальной операции в вебе стал нужен i7 — это еще одна притензия.

                А комент был о спорном суждении: у меня вот мощный комп и я хочу больше, тяжелее и тд

                У меня есть возможности, я хочу их реализовывать. Разве это плохо?
                • 0
                  | незавидное удовольствие, закладку не сделаешь.
                  а после показать все сделаешь? особенно если список динамический

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

                  | о, что для для такой банальной операции в вебе стал нужен i7
                  Как раз комментирующий и хотел бы, что если у него i7. — то и продукт должен быть под стать
                  • 0
                    а после показать все сделаешь?

                    Технически реализуемо, но не встречал таких.

                    Просто надо понимать, что продукты делаются максимально доступным для всех, а делать больше, тяжелее и тд не лучший вариант

                    если у него i7. — то и продукт должен быть под стать

                    Речь шла про опциональный вариант, нужно понимать, что от этого доступность не страдает.

        • 0
          Вы сейчас смотрите на ситуацию как опытный пользователь, но НЕ как обычный пользователь и НЕ как вебмастер. Обычному пользователю норм, что ему показывают несколько товаров, глаза не разбегаются. А нормальный вебмастер НИКОГДА не даст возможности вывести всё, без лимитов, потому что база имеет свойство разрастаться, и там где вы ожидаете увидеть 1к товаров, на самом деле может лежать и 10к, и 100к — вам действительно это нужно? Даже если, предположим, ваш браузер потянет отрисовать всё это добро — зачем серверу каждый раз гонять этот трафик? Вы РЕАЛЬНО просмотрите 10к предложений? Или всё же захотите их фильтрануть?
      • 0
        А по какому принципу в первые ряды попали Xiaomi, Loewe, TCL? И почему у меня совсем другие люди в этом списке? И почему по кнопке Ещё вываливается огроменный список, большая часть которого засерена? И почему после убирания галочки «В продаже» часть списка всё равно остаётся засерена?
        • 0
          Вы меня не путаете с разработчиком я.маркета? Я дал ссылку как пример разумного сокращения длинного списка производителей. Только и всего.
          • 0
            Ну так это в целом и есть неудачное решение, хотя идея была хороша.
      • +1

        Яндекс.Маркет в последний год стал страшно неудобен. По количеству антипаттернов его разве что мегафейл с Кинопоиском превосходит. Обвешали JS так, что нормально спокойно сидеть и выбирать товары и продавцов стало невозможно. Ни в новом окне открыть, ни по back вернуться, ни по Ctrl-F найти...

        • 0
          Я ещё наброшу на ЯМаркет: разные меню и фильтры на мобильнике и на компе. Из-за этого, к примеру, не найти карты памяти microSD от 32 ГБ, класса 10. На мобильной версии там вообще какие-то странные фильтры предлагают.
    • +3
      «Расстреливать» — мягко сказано!

      Забавно, что для девятого пункта написано «контроль ситуации, удобство». Интересно, что же контролирует пользователь? Или, где же удобство? Лично я считаю «скроллинг» удобным, поскольку в любой момент я могу перейти в конце списка и воспользоваться Ctrl+F. К тому же, только благодаря «скроллингу» я могу понять, примерно, сколько ещё элементов остались в списке (не говоря уже, о том, что сказал beavole о ссылках в футере). Более того, если я дошёл до половины списка, только на «нормальном» сайте я могу закрыть браузер, будучи уверенным что при следующем запуске я останусь на том же месте, а не придётся заново искать последний просмотренный элемент.

      ps. Прошу разработчиков Хабра, специально для izhanov и других сторонников «More 10» загружать комментарии и публикации схожим образом, только пусть будет «More 2 ↓» ;)
      • 0
        Как вы в бесконечной простыне понимаете количество элементов?
        На счет подгрузки я уже много раз написал, что это один из 101 вариантов сокращения длинных списков. Статья называется 10 грехов, а не их исправлять.
        • 0
          … а не как их исправлять.
        • +2
          Речь идёт не о количестве элементов, но о том «сколько мне ещё осталось до конца списка» (конечно, только в том случае, если дизайнеры не решили сделать «удобно» и скрыть скроллбар или ползунок скроллинга). Например, если я дошёл до середины списка за 10 минут, значит, чтобы завершить просмотр мне нужны ещё 10 минут.

          Насчёт «подгрузки» — Вы сами указали на иллюстрации что плохо, а что хорошо (даже скрыли скроллбар страницы). То есть, Вы сами указываете как «исправлять грех». Ещё в комментариях Вы приводите примеры что так удобно, удивляетесь что других смущает одно нажатие кнопки «еще», а в конце заявляете что «мопед не мой». Некрасиво получается.
          • 0
            Коллега, я еще раз хочу до вас донести, что сама по себе подгрузка ни хороша, ни плоха.
            Это всего лишь инструмент. То, что я нарисовал +10 не значит, что на всех сайтах надо подгружать по 10 элементов. Как вообще можно дойти до такого вывода?
            Пример с я.маркетом дал как удачный для списка из 200 с лишним производителей в данном конкретном фильтре. Там сокращение, по моему мнению, уместно и сделано хорошо, да.
            Меня удивляет столь линейный взгляд на вопрос. Огромная тема с длинными списками свелась к обсуждению частного и редкого случая — подгрузки.
            • +1
              Вы заменяете скроллинг подгрузкой — и это плохо (и не важно, сколько элементов загружается за раз). И я, и другие аргументировали, почему это плохо. А Вы удивляетесь, что другие не согласны с Вами, при этом не можете объяснять, где же «контроль ситуации» и «удобство».
              • 0
                Вы заменяете скроллинг подгрузкой

                Вот с этого места и неверно, что я не устаю вам повторять.

                Пишу сходу 5 других вариантов решения с длинными списками:
                • листание
                • несколько колонок
                • структуризация
                • аккордеон
                • скроллинг блока

                Есть еще десяток + их комбинации. И сделать их можно так, чтобы был контроль и удобство. Вот ими я и заменяю скроллинг длинного списка. Расширьте немного сознание. А то уперлись в эту подгрузку и все пытаетесь меня в чем-то убедить.
                • 0
                  Из-за своего «линейного взгляда» и «узкости сознании» я даже не понял, почему вначале Вы спорили и пытались всех убедить, что подзагрузка полезная штука, а потом плавно перешли на «мопед не мой, я лишь указал один из возможных вариантов», словно мы такие ограниченные, что не знаем о существовании других вариантов. Коллега, может, хватит уже? По крайне мере, прочитайте свои же комментарии, прежде чем пытаться оправдываться (и здесь я имею в виду не только комментарии в мой адрес).
                  • 0
                    Еще раз. Где-то в 10-й.
                    1) 9-й слайд не про подгрузку, а про длинные списки.
                    2) Решений, как уйти от длинных списков много, в их числе подгрузка.
                    3) Сама по себе подгрузка не может быть плохой или хорошей. Это всего лишь инструмент и можно его в отдельных случаях использовать. Вы утверждаете, что она плоха в любом случае. С этим я спорил и остаюсь при своем мнении.
                    В чем вопрос? Где я себе противоречил или отходил от темы?
                    • 0
                      Мне не нужны Ваши объяснения и оправдания. Как и для других слайдов, заголовок описывает проблему, на иллюстрации слева показываете что неудобно, а на иллюстрации справа Вы показываете что удобно. Точка. Не нужно рассказать и придумать «сходу» то, о чём Вас не просили.

                      Вы указали, что списки нужно заменить подгрузкой. Это видно на слайде, и в комментариях (особенно, в этой ветке, где Ваши доводы заканчивались тем, что назвали greendimka троллем — видимо, перейти на личность это фирменная фишка). Точка. Отмахиваться от своих слов, в лучшем случае, некрасиво. Если бы Вы действительно считали иначе, то бы указали на слайдах другое, или по крайнее мере не начали спор («вот у Яндекса крутой пример» или «предложите другое решение вместо подгрузки»).

                      Заметьте, я лишь утверждаю, что заменить списки подгрузкой это плохо. Точка. Фантазировать не нужно.

                      ps. На самом деле я задавал лишь риторические вопросы, но если так сильно желаете отвечать, смотрите внимательно на 9-ый слайд, сравнивайте «Your site» и «Your good site», а потом ответьте на вопросы заданные выше: «Что контролирует пользователь» и «В чём удобство».
                      • –2
                        Мне не нужны Ваши объяснения

                        О чем мы тогда говорим, непонятно.

                        Да, желания отвечать одно и то же точно нет. На слайде я изобразил первый попавшийся вариант сокращения списка. На его месте могли быть страницы, например. Кто бы знал, что будет такой сыр-бор.
                        Удобство в восприятии небольшого списка, в отличие от длинного. Контроль в понимании количества элементов (они могут быть написаны в ссылке (еще 38, например).
                        И давайте на этом закончим, по кругу ходим.
      • –1
        Вообще, это интересный прием, принятый на Хабре.
        Взять небольшой элемент статьи, додумать самому, перевернуть — что я предлагаю это, советую и вообще вижу универсальным решением. Потом развить это до абсолюта типа «Надо расстреливать». И уже как будто я ничего не понимаю, а комментатор на коне.

        1) Я ничего не советую и никого не учу. Предлагаю просто на эти моменты обратить внимание и обсудить.
        2) Общих решений практически нет, для каждого проекта они свои. Поэтому подход: берите так и делайте так мне не близок, я его не использую и кейсы не люблю.
        • +1
          Прошу извинить, но я никоем образом не хотел обидеть или расстроить Вас. Я лишь дополнил эту ветку комментариев (о девятом пункте). Если бы увидел другой пункт статьи, за которого тоже «надо расстреливать», я бы оставил и там комментарий. Скажу прямо — если бы не «More 10», я вообще не оставил бы комментарий к Вашей статье. Просто я никогда не понимал, откуда некоторые дизайнеры взяли, что это удобно. Вот и попалось статья, где решил оставить своё мнение, в надежде, что в будущем «More 10» исчезнет навсегда.

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

            Ок, я и не рассчитывал, что все пункты будут однозначно восприняты, в этом случае это были бы просто банальности. Здесь у нас были дискуссии по поводу первого слайда. Вас смутил 9-й (не его суть, а один элемент), кто-то про стрелку возврата наверх простыни накатал. Разве не для этого пишутся статьи?
            • +1
              Мы здесь как раз говорим о девятом пункте. И меня смущает не элемент, а то что вместо скроллинга Вы используете подгрузку.
              • 0
                А если сделать скроллинг с подгрузкой? Будет ли удобнее?
                • 0
                  Боюсь, по крайне мере для меня, это ничем не отличается от загрузки контента с помощью кнопки «Загружать ещё n-записей» или кнопками клавиатуры Spacebar или PgDn. Ни в один из этих случаев, нельзя искать нужный элемент (удобность) или перейти к концу/середине списка (контролировать процесс).
              • 0
                Я уже выше писал, что подгрузка это один из множества вариантов сокращения длинного списка. На его месте мог быть любой другой. Я не делал никакого акцента на этом.
  • 0
    Про стрелочки было очень кстати. И несложно совсем. Достаточно дефолтных тех. символов.
    • 0
      Да, этот инструмент недооценен. Вставляешь символ → рядом с текстом в CTA-кнопке и все.
  • 0
    10.
    На линейке с этапами у вас нет стрелки назад на предыдущие этапы — значит я не могу вернуться? Тогда зачем внизу кнопка возвращения на предыдущий этап? Она даже не кнопка, а обычная ссылка. Зачем?
    • 0
      Хорошее замечание. На линейке этапность. Если на первом пункте сделать стрелку влево, то она как будто будет указывать, что до первого этапа что-то есть, а это не так.

      А ссылка бэк внизу от этого свободна, ей можно поставить стрелку.
      • 0
        Зачем мне стрелки на линейке, если я сам прекрасно вижу что например от этапа №2 могу пойти вперед на этап №3, а не на №4. Меня считают за тупого?
        • 0
          В жизни этапы имеют свои названия. В этом случае стрелки придают логичность процессу. Сначала адрес, потом оплата и т.п.
          • 0
            Логичность — это когда на одномерной линии и без стрелок понятно куда ты можешь пойти: либо вперед, либо назад. А стрелки в вашем случае — это указатель одностороннего движения, тогда опять же возникают вопросы: зачем нужна кнопка «назад» и зачем дублировать информацию(стрелки) на кнопках?
            • 0
              Зачем стрелки на кнопках я отвечал уже выше.
              Ссылка «назад» нужна для движения по этапам — вперед, назад. Если логика системы это позволяет.
              В примере она сделана менее активной, стимулируя двигаться вперед.

  • +7

    Конечно, я не "большинство пользователей", а потому мое мнение веб-дизайнерам по барабану, но...


    1. Ненавижу навязывание выбора разноцветными, разновеликими, разнооформленными кнопками. Единственный повод для выделения ссылок из предлагаемых альтернатив — текущий фокус, на котором сработает "Enter".


    2. Иногда тупики вполне уместны, чтобы показать пользователю, что ему предоставлена вся информация по его запросу, и вариантов именно по этому запросу нет и не будет. Главное, чтобы была ссылка на главную, роль которой вполне может играть лого на картинке. Там пользователь начнет новый этап блуждания по сайту.
      А если в таком случае натыкать ссылок, то возникает ощущение незавершенности ответа.


    3. Иногда разные пути (даже состоящие из одного выбора) вполне могут привести к одному результату. Такова жизнь. И сайт вполне может отражать ее нюансы. Злоупотреблять этим, естественно, не стоит, но и особо страшного ничего нет.


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


    5. Если промежуточный этап требует каких-то данных, введенных ранее, то это скорее антипаттерн. Действовать с учетом данных, о которых можешь капитально забыть, как-то неуютно. Или придется все введенное ранее выводить на каждом этапе. Тогда можно и URL уникальный делать.
      А вот если промежуточный этап не зависит от предыдущих (например, это страница книги), то все правильно.


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


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


    8. Оправдано только в случае реально длительного и сложного процесса.


    9. А вот это на современных сайтах реально бесит. Вместо нормального перемещения по списку с возможностью быстро "прыгнуть" на неопределенное "расстояние" вперед или назад постоянно и неоднократно давить на эти богомерзкие кнопки…
      Лучше уж динамически пополнять список по мере загрузки.
      Единственный случай, когда оно реально оправдано, это "бесконечные" списки (или очень большие). Но и тут следует не "мельчить", а отображать за раз хотя бы несколько десятков элементов. А лучше предоставить пользователю возможность выбора размера "куска". И не забыть навигатор для переключения на несколько ближайших, первое и последнее.


    10. Иногда весьма полезно, но возводить в ранг обязательного — перебор. Или это для не умеющих читать?
    • +1
      По поводу 9 пункта — это общая проблема «пагинации» на современных сайтах. При «традиционной» пагинации у каждой новой страницы есть отдельный урл типа /page/2, и ты всегда можешь вернуться на недочитанную страницу, чтобы продолжить ее просмотр. К сожалению, сейчас повсеместно считается, что весь контент сиюминутен, и возвращаться к нему никто никогда не будет. Отсюда все эти «бесконечные скроллинги», подгрузка «еще 20» и т.д.
      • 0
        При подгрузке контента новой странице тоже можно подставлять отдельный урл типа /page/2
        • 0
          Вот только поисковики не будут кликать по кнопке «ещё» и индексировать подгружаемый контент.
          • 0
            На такие случаи карта сайта в виде специального файла. И не только на такие, а для всех сайтов с большим количеством контента.
      • 0
        Институт Баймард провел исследование и выяснил, что большинству респондентов удобней пользоваться кнопкой подгрузки, нежели пангинацией или бесконечным скролингом, который делает пользователя частично беспомощным. Выбор большинства можно объяснить законом Фиттса: проще щелбануть по кнопке, чем целиться в 1 2 3… 8
        • +1

          На самом деле пагинация удобней, она даёт определённые контрольные точки, от которых удобно отталкиваться. Только показывать надо не жалкие 10 результатов, а сразу по 100.


          А так, подгрузились результаты: где начинаются новые, где старые, куда смотреть, когда бегло всё просматриваешь вперёд и назад? Как поделиться ссылкой на результаты? При обновлении страницы, перезагрузке браузера, результаты сбрасываются — это интерфейсный ад. Тормозить начинает, как пишут чуть ниже.

          • 0
            При обновлении страницы, перезагрузке браузера, результаты сбрасываются — это интерфейсный ад.

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

            • 0

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

        • 0
          Единственной альтернативой маленьким кнопкам 1 2 3… 8 есть одна большая «Подгрузить ещё», а одна большая «Следующая страница» не рассматривался этим институтом?
          • 0
            Кнопка — это действие. Действие — глагол. «Показать еще» или «Показать больше» само то. И правильно заметили выше, url поменять при подгрузке можно и нужно.
        • НЛО прилетело и опубликовало эту надпись здесь
          • НЛО прилетело и опубликовало эту надпись здесь
            • 0

              Ключевой вопрос: удаляются ли достаточно «далёкие» элементы DOM-дерева в их реализации? Или все (условно) сто страниц так и остаются висеть бесполезным грузом, отжирая память, тормозя работу и, в конечном итоге, приводя к краху браузера? Сдаётся мне, что нет. И если уж такой технически продвинутый сайт, как ВКонтакте не сделал этого, чего уж говорить про остальные!

              • НЛО прилетело и опубликовало эту надпись здесь
                • +1

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


                  PS. В своём проекте я бы сделал нормальную навигацию а не это.

                  • НЛО прилетело и опубликовало эту надпись здесь
                    • 0
                      Почему вы так решили-то? У вас ВК это авторитет в последней инстанции?

                      Просто на остальных сайтах (кто внедряет аналогичные решения) ещё хуже, чем у ВК, увы. ВК дале-е-еко не идеален, но это лучшее, что я видел. У него, по крайней мере, иногда видно, что делали думающие люди. Это касается многих вещей, самые яркие примеры — видеоплеер и, собственно, предмет сегодняшнего обсуждения.


                      А я вот заморачиваюсь в проектах, над которыми работаю. Шах и мат.

                      Да ну? То есть вы решили все перечисленные проблемы:


                      1. Удаление далёкого неактульного содержимого из DOM, чтобы не тормозило и не падало.
                      2. Сохранение с последующим корректным восстановлением позиции на странице после закрытия и повторного открытия окна браузера.
                      3. Даже при падении оного.
                      4. Ясный и понятный показ текущей позиции.
                      5. Отображение её же в адресной строке.
                      6. Возможность относительно быстро и просто перейти к интересующей записи.
                      7. Доступность подвала страницы.
                      8. Возможность поиска конкретного места без необходимости пролистывать всё.

                      Возможно ещё что-то забыл… Но этого пока достаточно, не находите?

                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Да, в моих проектах, которые я реализовывал не было такого, где бы пригодились все ваши хотелки разом в одном месте, врать не стану, (потому как это не всегда нужно, и подобный виджет может быть прикручен в разные места, где не все это необходимо)

                          Стоп-стоп-стоп. Мы, вообще-то, говорим о реализации конкрентого интерфейсного решения — удобной бесконечной прокрутки. Вы сказали, что её реализовали. А теперь, значит, на попятную, что ли?


                          мы с вами начали с оптимизиции удалением лишних DOM-узлов

                          Неправда, начали мы с вами с реализации бесконечной прокрутки. Указание на накопление мусора в DOM в подавляющем большинстве реализаций (или во всех?) — лишь один из её недостатков, при этом достаточно весомый.


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

                          Я ожидаю увидеть их там, где им самое место. Это логично, что при порционной подаче содержимого я хочу знать, какую порция я читаю, сколько ещё осталось, а также, где я нахожусь. И не думать о том, что одно «неосторожное» действие отбросит меня в самое начало.


                          За исключением третьего пункта явно притянутого за уши

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


                          Крэш браузера отрабатывается по той же схеме, что и просто внезапный уход со страницы

                          Да не отрабатывает он по той же схеме. Уход со страницы можно перехватить в onbeforeunload, а падение браузера вы никак не обнаружите.


                          Состояние будет восстановлено с того момента, которое было персестированно в какой-либо локальный стор

                          Полвека назад, ага. Нафиг оно мне такое нужно.


                          У вас просто напросто какая-то странная принципиальная позиция.

                          Странная принципиальная позиция как раз таки у вас: зачем-то защищать решения, не являющимся ни хорошими, ни удобными.

                          • НЛО прилетело и опубликовало эту надпись здесь
              • 0
                Фигня всё это. Полоса прокрутки становится лишней и только запутывает.
      • +2

        А самое неприятное, что после n-ной подгрузки всё начинает страшно тормозить, ведь старые записи никуда не деваются! Становится трудно ориентироваться, поскольку полоса прокрутки превращается в узенькую полоску и любой щелчок по ней переносит тебя в непредсказуемую локацию… Но всегда не ту, что тебе нужна. А в определённый момент браузер падает… и начинай всё сначала. Потому что продолжить с конкретного места невозможно.

        • 0
          Коллега, разделяю ваше мнение, особенно если подгрузка множественная, большого конетента, небольшими фрагментами и сделана криво. Автоматические тоже не лучшее решение. Только какое это отношение имеет к посту? Вы в нем видите где-то слово подгрузка?
          • +1
            А 9 пункт разве не про это?
            • 0
              Девятый пункт про то, что длинные списки это плохо. Он так и называется.
              Как их сокращать: структурированием, подгрузкой, листанием, всплывающими подсказками или еще 101 вариантом — решать каждому разработчику самому по ситуации ситуации.
          • +1

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


            Во-вторых, по поводу «отношения к посту». Я вижу 9-й пункт, на картинке к которому есть фраза «More 10»:
            image
            Что свидетельствует либо о скрытии пунктов без подгрузки (маловероятно), либо о подгрузке ещё 10 позиций (более вероятно). По-моему, отношение прослеживается самое прямое.

            • –1
              Я показал один из примеров решения, все нельзя было вместить в картинку и задачи такой не стояло. На счет развития чужой мысли про подгрузку понял, ок.
              • +2
                А вам не приходило в голову, что длинный список может быть «витриной», и человек прокручивая этот список, «ознакамливается» со всем тем, что на сайте могут предложить". Согласен, что если человек четко знает, что ему нужно, то длинный список, это «не очень удобный инструмент» для выбора. Лично по мне, списки должны быть от 5 до 11 позиций. Все что больше 20 нуждается в структуризации, и альтернативных формах «нахождения»
                • 0
                  До определенного момента список дает информативность, потом она теряется, взгляд и мозг не могут ее охватить. Вот до этого момента и не надо доводить. А количество единиц разное, в зависимости сайта и его контента.
                  • 0
                    вы внимательно прочитали мое пояснение?? «длинный список, это «не очень удобный инструмент» для выбора. Лично по мне, списки должны быть от 5 до 11 позиций. Все что больше 20 нуждается в структуризации, и альтернативных формах «нахождения»»
                    • 0
                      Ну да, я отметил что нет точных цифр до какого размера должен быть список.
    • 0
      Единственный случай, когда оно реально оправдано, это «бесконечные» списки (или очень большие). Но и тут следует не «мельчить», а отображать за раз хотя бы несколько десятков элементов. А лучше предоставить пользователю возможность выбора размера «куска».

      «Длинный список» понятие условное и для каждого сайта свое.
  • +1
    Недавно был жесткий заруб с дизайнером насчет необходимости кнопки «наверх» на мобильной версии. Оказалось половина пользователей и куча знакомых не знает что двойной тап на статусбаре будь то андроид или iOS, всегда возвращает к верху страницы
    • 0
      А на десктопе не знает еще больше и работает это не везде.
    • 0

      Не у всех андроид или яблоко.

    • 0
      Тапаю, тапаю — ничего не происходит. Если дизайнера еще не зарубили, спросите у него, без пожалуйста, что я делаю не так? Самсунг (переднюю и заднюю камеры протерал, акум заряжен).
      • +1
        Может быть действительно я махнул всех под одну гребенку… Слишком давно сижу на iOS и там это работало всегда, в 99% любых списков и веб. На андроиде 2.2-2.3 у меня вроде тоже все это работало, но теперь я начинаю сомневаться)

        Выглядит это так:
        image
    • +2
      Я не знал. Более того, вот сейчас прочитал ваш комментарий, дай-ка думаю проверю… и с телефонам в руках так не сообразил, куда тапать-то? Шторка с уведомлениями открывается.
    • 0
      Только что проверил на Asus — двойной тап по статусбару отключает экран. Забавно, не знал.
      • 0
        Об этом в инструкции говорится в самом начале. Ещё по выключенному экрану можно два раза ткнуть и он включится. Или на рабочем столе тоже два раза и он выключится. А во всех остальных приложениях можно в статусбар тыкать. А ещё там можно приложения запускать на выключенном экране написав закорючку.
        • 0
          Вот про все знал (и даже закорючки настроил), а вот про это нет. Впрочем, у меня чехол, так что отключаю, просто закрыв крышку.
    • 0
      ничего не происходит
    • 0
      У меня двойной тап на статусбаре блокирует и отключает экран, так себе фича
  • 0
    По поводу пункта 8 — я бы тут продемонстрировал не концепцию «визардов» (которые все же частный случай и нужны например для регистрации или заполнении каких-то сложных форм не в один этап), а концепцию «хлебных крошек». По которым сразу видно, каким путем ты попал на конкретную страницу.
    • 0
      Да, это в одной канве, на картинке не смог все включить. Градусники, хлебные крошки, подсвечивание пункта меню. Мысль одна — надо показать пользователю где он находится. Не скажу, что этому правилу все следуют (в своей практике часто вижу иное) потому и написал.
  • +1
    4. Никогда не пользуюсь такими кнопками, нигде, ни разу… скроллбар окна браузера. всё больше ничего не нужно.
    • +1

      Не у каждого браузера (особенно если речь о мобильном браузере), есть скроллбар.

      • +1
        так мобильному и не надо его, там есть куда нажать для скролинга вверх.
      • +2
        на тач скрине вообще не нужная такая кнопка, пальцем по экрану провёл и пол сайта промотал… это же не колесом скролить 10 раз.
      • +1
        Если там не 100500 экранов относительно быстро прокрутить, а на ПК везде кнопка home работает. Но знают о ней — увы — не многие
    • 0
      Решение вопроса простое: Ставим счетчик на кнопку. Пользуется мало людей — снимаем, много — оставляем. Делов-то.
      • 0

        Как вы отличите случайные нажатия от преднамеренных?

        • –1
          Если не сделать плавающую кнопку на полэкрана, то процент случайных будет мал.
  • –2
    Просто спасибо за инфографику. Теперь покажу эту статью директору, пусть подумает над его «видением страниц» проекта.
    • +10
      Еще покажите ему комментарии пользователей, и ему не придётся вам объяснять почему директор — он.
      • –1
        Тут все сложнее. Он генеральный, я технический директор.
        У нас разногласия только по «первому» варианту в статье.
        • +1
          Честно: вообще не понял, что автор хотел сказать первым пунктом. Извиняюсь, подумал, что вы дизайнер и ратуете за все пункты :)
          • 0
            Ратую завсегдатай пункты, кроме 7 и 9.