Прототипирование главной страницы статей flamp.ru

    Задание


    Переделать страницу «Статьи» (http://novosibirsk.flamp.ru/articles). Результат — один макет в PNG. Задача: вызвать у пользователя желание оставаться на этой странице как можно дольше.




    Небольшой линч



    (картинка кликабельна)


    Поиск идеи — думаю над задачей и выписываю все что приходит в голову


    Сделать прокрутку фоток при наведении на пост с течением времени, плиточный интерфейс? иерархический? Выводить главное и горячее справа. Показывать последние посты и комменты и прокручивать их. Указывать в них ссылку к тому, на что коммент был, показывать количество отчетов в час, рейтинг у статей. Показывать релевантные для статьи — другие статьи. Показывать релевантные отзывы? Теги, категории у постов? Популярные темы вниз, под «самые обсуждаемые» и «самые популярные». Добавить тему дня. Ачивки? Показывать начало текста из статьи. Сделать внешний вид по типу газеты с полосами и главной темой. Темы в других городах внизу? Облако тегов? К посту показывать два похожих в виде строчки. Несколько больших блоков: Главное, потом Новое (менее активное)? Самые просматриваемые (сегодня, вчера, неделю). Этим делятся? Необычная новость для привлечения внимания. Маленькие шутливые человечки в дизайне с подсказками и своим мнением? Нужно сделать так, чтобы материал был разнородный по всей длине страницы — тогда пользователю будет интересно ее прокручивать и просматривать, чтобы найти то, что его действительно заинтересует. Лишний раз тыкать мышкой никто не будет. Специальный вид блоков для фоторепортажей. Последний пост лучшего самого активного писателя постов, топ писателей. Выбор редакции.

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

    Делаем аппликацию из модулей





    Набросок №1


    Отправляем картинку под заголовок в блоке, потому что картинка над заголовком применяется несколько в других ситуациях. Добавляем лучшее в виде обычного текста. На лучшее будут кликать уже только потому, что оно лучшее. Так как заголовки у статей достаточно короткие, то можно поиграть и местом и положением лучшего. Думаем над тем, чтобы выносить самую главную новость в виде большого блока, пока что не нравится. Добавляем раздел для статьи, потому что многие смотрят на раздел, прежде чем читать статью. Добавляем имя автора статьи. Человек должен гордиться тем, что его имя красуется на главной, потому что люди генерируют контент — нужна лояльность. Да и люди будут кидать ссылки в духе «посмотри на мою статью» не только на конкретную статью, но и на главную страницу со статьями. Думаем над выводе рядом с блоком лучших комментариев — часто люди заходят в статью, чтобы почитать комментарии с лучшим рейтингом, потому что чаще всего они несут больше полезной информации, чем сама статья. Добавляем начало статьи, потому что руководствуясь только изображением и заголовком — трудно понять, нужно читать статью или нет. Лучше заставить человека «зацепиться глазами» за ключевые для него слова.

    image

    Набросок №2


    Оставляем в главном блоке 7 статей, 3 с большими картинками, а 4 — по-меньше. Решаем оставить комментарии для первых трёх блоков, убираем большой главный банер, уносим лучшее наверх, добавляем период лучшего, добавляем «фламп рекомендует». Добавляем полосу из случайных фото из статей. Такая полоса выполняет сразу несколько целей: визуально делит страницу на части, заставляем пользователя кликнуть по понравившейся картинке, заставляем пользователя посмотреть еще картинки, просто полистав их. Клик по картинке должен отправлять в с соответствующую статью.

    image

    Набросок №3


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

    image

    Набросок №4


    Рисуем примерный вид комментариев для блока темы, если комментариев пока нет — ставим приглашение (можно и банер тоже). Ниже располагаем большие блоки для каждой темы 3 штуки и потом темы под ними, чтобы получилось некое подобие фрактала. Блоки в нижней части страницы получились через чур паттернообразными, нужно как-то исправить. Скорее всего блог «Шопинг» придется немного изменить.

    image

    Итоговая страница


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

    image
    image


    Что имеем?


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

    А что бы вас задержало на странице статей по-дольше? (Хабр в расчет не берем, у него вид страниц оттачивался веками).

    P.S. Это тестовое задание в 2гис для проектировщиков интерфейсов.
    P.P.S. Чтобы добру не пропадать — решил выложить на хабр.
    Share post

    Comments 14

      +1
      Когда большие картинки и большие margin вокруг блоков — становится красиво.
      Если нужен совет, сделайте ещё видео-ленту сверху сайта.
      Тенденция в том, что современные пользователи с удовольствием смотрят видео.
      И заказчики будут с большей радостью снимать видео, зная что попадут в видео-ленту.
      Выглядеть может вот так, только с треугольниками внутри:
      image
        +1
        Не увидела ответа на вопрос: «почему пользователь должен как можно дольше оставаться на этой странице».
        С этого следовало бы начать ).
          0
          У меня там есть пара строчек насчет этого:
          Не нужно забывать про то — зачем вообще человек зашел на эту страницу. Он хочет больше узнать о своей среде обитания — какие продукты нужно кушать, а какие — нет. Где лучше тусоваться, где сервис отстойный и тд. Нужно не только показывать ему быстрый доступ по таким запросам, но и заинтересовать похожими проблемами, о которых он мог забыть, но если увидит такую статью — то вспомнит о ней.
            0
            Нет, не в смысле того, зачем человек зашел, а с какой целью он должен задерживаться на этой странице: т.е. необходимо определить, каково business value данной фичи, кто заказчик и т.п. Потому что итоговую ценность все-таки представляет конечная страница статьи. Поэтому и возникают вопросы.
              0
              Совершенно согласен, что интерфейсы так и проектируются, преследуя самую конечную цель. Но тут такой момент, что задание звучало так:
              вызвать у пользователя желание оставаться на этой странице как можно дольше.

              Поэтому не зная остальных параметров, задача решалась по имеющимся данным.

              Я понимаю, к чему вы клоните, и что можно было бы решить такую задачу добавив парочку котэ на страницу :)
        • UFO just landed and posted this here
            +3
            А что бы вас задержало на странице статей по-дольше?

            Могу оказаться совсем не оригинальным, но может быть сиськи?
              0
              Может быть модальное окно без кнопки закрыть?
              +1
              Оставляем в главном блоке 7 статей, 3 с большими картинками, а 4 — по-меньше. Решаем оставить комментарии для первых трёх блоков, убираем большой главный банер, уносим лучшее наверх, добавляем период лучшего, добавляем «фламп рекомендует». Добавляем полосу из случайных фото из статей. Такая полоса выполняет сразу несколько целей: визуально делит страницу на части, заставляем пользователя кликнуть по понравившейся картинке, заставляем пользователя посмотреть еще картинки, просто полистав их. Клик по картинке должен отправлять в с соответствующую статью.


              Большая часть статьи написана в таком духе. Тяжеловато воспринимается и очень не хватает обоснований принятых решений. Я думаю, было бы лучше, если бы автор разместил вместо четырех вариантов решения один или хотя бы два и подробно бы рассказал, почему спроектировано именно так, а не иначе.
                0
                Совершенно согласен. У меня задумка была такая: показать эволюцию прототипов с минимумом объяснений, но так как прототипы получились очень массивные, то уловить изменения очень сложно, да и обычному читателю это будет не интересно.
                0
                Еще я считаю, что стоило бы начать с составления портретов пользователей, определения их уровня компьютерной грамотности, их привычек и т.д. Кроме того, не помешала бы пара скриншотов решений конкурентов.
                  0
                  Купера тоже читал и использую его методику, особенно когда область работы малознакома. Я хотел сделать нечто среднее между страницей газеты и обычным списком статей, на мой вгляд — получилось, читать такую главную страницу станет интересно. Насчет портретов пользователей, их уровня, схемы действий — то отдельно не стал расписывать, потому что счел такую информацию не интересной для читателей.
                  0
                  Глаз зацепился за фразу «Всего на работу я потратил 2 дня». Это время, которое ушло на создание прототипа и отрисовку, либо же только на сам прототип? Если и на то и на то, то сколько в процентной пропорции заняла работа над каждым из этапов?
                    0
                    Точно не могу сказать, но примерно 60% создание прототипа и 40% на отрисовку. Во время отрисовки еще делал изменения, потому с реальным данными страница выглядит несколько иначе.

                  Only users with full accounts can post comments. Log in, please.