Fakebook. Концепт здравомыслия

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

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

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

Но моя статья не о том. Я хочу представить вашему вниманию свой труд, на который меня изначально натолкнул пользователь Klimentij, написавший статью «Юзабилити Facebook». Долгое время хотел им заняться и вот, наконец, появилось свободное время.

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

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

Весь УИ представлен на английском. Во-первых, ближе к оригиналу; во-вторых, в текущей версии его русификация некорректна.





Экран входа


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

Картинка крупнее (1200х1500 px., 132 Кб.)





Таймлайн, она же Главная


После входа в приложение мы попадаем именно сюда. Первым делом я исправил фейсбучные приблизительные «about an hour ago» на точное время. Не знаю как вам, а мне так гораздо удобнее ориентироваться в потоке новостей. Сверху мы видим шапку-гибрид, которая подстраивается под конкретную страницу (примеры ниже). Сейчас на ней поиск, блок нотификаций, ссылка на свой профиль и кнопка чек-ина. Под шапкой календарь, позволяющий указать конкретную дату хроники. Очень не хватало этого функционала, так как часто бывали случаи, когда нужно найти какую-либо новость двухдневной давности. Справа — фильтры хроники и пользовательских групп. Последний позволяет показывать хронику только тех друзей, которые занесены в конкретную группу.

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

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

Картинка крупнее (1200х1500 px., 336 Кб.)




Чужой профиль


Пожалуй, зайдем в профиль к блондинке Челси. Мы сразу видим, как поменялась шапка. Теперь слева красуется логотип ФБ, он же ссылка на Хронику. Рядом с ним появилась ссылка назад, на предыдущую посещенную страницу.
Так как Челси у нас в друзьях, мы не видим подробную информацию о пользователе, она доступна по свайпу влево. У пользователей не из френд-листа по-умолчанию информация расположена на основном экране.

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

Картинка крупнее (1200х1500 px., 519 Кб.)




Свой профиль. Вкладка «Друзья»


Справа в шапке, вместо ссылки на свой профиль появилась настройка его, этого самого профиля. Так же эта иконка отвечает за общие настройки приложения. Основная информация о себе любимом скрыта, как и в случае с Челси, дабы не захламлять обложку. Под меню разделов мы видим выберайку вида представления информации, поиск по друзьям, кнопку «Найти новых друзей» и фильтры. Слева фильтруются пользовательские группы. Справа — последние посещенные друзья, представление списка по алфавиту и те, кто рядом (да-да, ведь существуют же чекины!). Под именами друзей мы видим кнопку быстрой отправки сообщения. Зеленые колечки — онлайн-индикатор. Ничего лишнего.

Картинка крупнее (1200х1500 px., 554 Кб.)

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

Картинка крупнее (1200х1500 px., 427 Кб.)


Картинка крупнее (1200х1500 px., 344 Кб.)




Заключение


Как-то этой весной Badoo, тоже, надо сказать, достаточно крупная компания, имеющая очень серьезные проблемы с юзабилити своего сервиса, решила существенно поменять политику и перестать мучить своих пользователей. Лондонцы организовали конкурс среди дизайнеров России и Украины на разработку концепта нового интерфейса для айпада. Сперва у них было все то же стандартное, а-ля ФБ и ВК, приложение. Баду не стали идти протоптанной дорожкой и решили сделать ставку именно на мобильную версию и, насколько я знаю, дела у них сейчас идут хорошо. Я был одним из участников и, позже, одним из финалистов этого конкурса. Та работа, что они выбрали, напрямую отражает новую стратегию яркой и динамично-развивающейся компании. А вот ФБ, неповоротливый монстр, все продолжает компрометировать себя и насиловать нас с вами своим лишенным логики интерфейсом, в котором, в прошлом году, как известно, не смогла разобраться сама сестра Цукерберга.

Спасибо, что дочитали до этого места. Буду рад объективной и разумной критике в комментариях.
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

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

    +5
    Мне нравится!
      +1
      Ай, люблю!
        0
        iЛюблю?
          +4
          Нет, Борат не про яблоки.
          • НЛО прилетело и опубликовало эту надпись здесь
              0
              Алматы как раз означает «яблочный».
        +1
        Кстати, отличный концепт.
        Согласен с часами — знать точное время намного удобней.

        Вы не пробовали связаться с Фейсбуком и предложить им дизайн?
        Если выйти на правильного человека, можно даже контракт на раззработку получить.
          +6
          Мне этот концепт тоже понравился. Но что касается самого Фейсбука… создается впечатление, что их нестройный дизайн — не из-за того, что у них нет нормальных проектировщиков, а результат какой-то политики (возможно для того, чтобы посторонние рекомендации и реклама сознательно не игнорировались, т.к. их сложнее идентифицировать).
            +1
            Фейсбуку надо больше кликов, переходов и блуждания, они же на рекламе зарабатывают.
            +9
            А я вот не одобряю подход с часами. Во-первых, в течении дня я не слежу за точным временем и мне проще видеть относительное время. Мне как то все равно, запись была опубликована в 11:22 или в 11:37. Мне достаточно понимать, что событие было час назад или вчера вечером. Во-вторых, иногда с этими временными зонами постоянно путаница и постоянно думаешь «учитывает ли сайт мою временную зону?». Особенно когда путешествую в Азию — там большая разница с нашими поясами и приходится на сайтах иногда тупить «а в каком временном поясе это? А в 24м формате это или в 12 часовом?» Так что мне бы не понравился подход автора. =)
              +1
              Тогда надо дать пользователю возможность самому выбирать формат, не так ли?
              Намного чаще сталкивался с ситуацией, когда, к примеру, важно понять вечером ли была опубликована новость или утром. И если написано «About 16 hours ago», то приходится вспоминать сколько сейчас времени, вычитать количество часов — в общем делать всё то, от чего заботливо хотели меня избавить разработчики…
                0
                Как вариант — выводить точное время только при возрасте записи/комментария старше 1-2-3 часов.
                  +1
                  Так ведь никто не заставляет все и всегда описывать в каких-то единицах.
                  К недавней записи можно написать, например, «about 1 hour ago». А в вашем примере вместо 16-часов указать «last morning», или же вовсе для сильно старых записей указывать точное время
                +2
                Спасибо. Думаю, ФБ никогда не будет таким. ФБ — неповоротливый гигант и монополист, им важна прибыль, а не удобство пользователей. Контракт — нечто фантастическое.
                  +1
                  Предложите Вконтакте
                    +22
                    — Здравствуйте, вы позвонили в главный офис ВКонтакте.
                    — Добрый день. Хотел бы предложить вам заключить со мной контракт на разработку нового интерфейса для Фейсбука.
                    — wat.
                    +6
                    А вы попробуйте. За спрос, как известно, денег не берут.
                      +4
                      Зачем вам именно фейсбук? Найдите стороннего разработчика и сделайте приложение. Уверен такое приложение разойдется на ура.
                        +2
                        +1 за такое приложение!
                          0
                          EULA Фейсбука (или его API) позволяет?
                    0
                    Браво! Просто супер!
                      –5
                      а мне понравился концепт
                        +2
                        Отлично! Не пользуюсь ФБ, но теперь я знаю что это такое и что там есть :)
                        Это вот вертикальный вариант. А как же горизонтальный?
                          0
                          Я рад, что вы открыли что-то новое)
                          Горизонтальный вариант, разумеется, тоже имеет место быть. Не стал его рисовать, так как там, по сути, все то же самое.
                          0
                          Я давно пользуюсь фейсбуком и в общем интерфейс вполне устраивает, разве что со своими фото не очень удобно работать, но может это связано с тем, что я мало в них копаюсь.

                          Я думаю не понятными выглядят все «не родные соцсети», вот я не пользуюсь ВК, и мне он кажется не удобным и не понятным вообще.
                            +36
                            Вы делаете обычную ошибку — создаете Фэйсбук для себя любимого. А инженерам по юзабилити Фэйсбука нужно создавать Фэйсбук для всех. В том числе, кстати, и для акционеров Фэйсбука, которые хотят видеть в интерфейсе рекламу и приложения. У каждого интерфейсного решения в Фэйсбуке есть обоснование. Например, та же кнопка регистрации. Владельцу фэйсбука наплевать на ваше удобство как пользователя — если вы уже подсели на Фэйсбук, вы и так найдете кнопку логина (тем более в мобильном приложении она нужна ровно один раз). А вот если вы не зарегистрированы, то нужно максимально упростить вам регистрацию, даже и в ущерб теперешним пользователям.

                            Ну и картинки с отражениями слишком красивые у вас, для презентаций оно конечно хорошо, но в настоящих лентах такого не бывает.
                              0
                              Да, как я и написал — это мой взгляд на Фейсбук.
                              Реклама и приложения миновали мобильную версию. А инженеры по юзабилити могли бы создать нечто более удобное для всех пользователей.
                              По поводу кнопки — все же чаще мы пользуемся логином, а не регистрацией. К тому же, это мобильная версия. По крайней мере, сейчас там это реализовано именно так. Вполне возможно, что большинство пользователей регистрируются через браузер.
                                +1
                                Реклама и приложения миновали мобильную версию.

                                Ой ли?

                                С пылу-с жару свеженький мобильный фэйсбук


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

                                А я на айпаде и айфоне кажется вообще через настройки логинился.

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

                                А большинство мобильных двенадцатилетних хипстеров, которые с айпадом не расстаются?
                                  –1
                                  С пылу-с жару свеженький мобильный фэйсбук

                                  Хорошо, но рекламы все же пока нет.

                                  А я на айпаде и айфоне кажется вообще через настройки логинился.

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

                                  А большинство мобильных двенадцатилетних хипстеров, которые с айпадом не расстаются?

                                  Ну вот они-то и нажмут на регистрацию. Плюс моего решения — простота. У нового пользователя не будет необходимости долго искать способ зарегистрироваться.
                                    +2
                                    Хорошо, но рекламы все же пока нет.


                                    Овца с рекламного поста в ленте смотрит на вас с недоумением.
                                      +1
                                      Овца с рекламного поста в ленте смотрит на вас с недоумением.

                                      Прошу прощения, не заметил, что пост рекламный. Но это ничего не меняет, пост — он и в Африке пост. Кстати, видимо разработчики ФБ сами не нашли место, куда впихнуть рекламу и реализовали ее в постах)
                                        +3
                                        Как раз наоборот: реклама в посте заметна существенно лучше обычной, поскольку мимикрирует под UGC.
                                        0
                                        Кстати да, у меня такая реклама есть как раз только в мобильной версии. В браузере наверное ее режет адблок?
                                  0
                                  С одной стороны, Вы полностью правы. С другой — у Фейсбука в интерфейсах есть такие косяки, которые не возможно объяснить стоящими за ними внутренними задачами компании и просто очень неаккуратные места (Яркий пример — управление страницами, которое сверстано так криво, что все едет от смены языка пользователя). Я думаю, чем чаще Фейсбук будут тыкать носом в эти проблемы, тем больше вероятность, что они сделают все удобнее и красивее.
                                    +1
                                    Вы делаете обычную ошибку — создаете Фэйсбук для себя любимого.

                                    Это в первую очередь подход к задаче. Scratch your personal itch. А дальше те, кому интересно и близко — присоединяются.

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

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

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

                                    1. Зачем этот ярко розовый логин? Слишком большой контраст с фоновым преобладающим цветом. Я не нажму на эту кнопку по наитию.
                                    2. Слишком большие отступы на мой взгляд слева. Куча свободного пространства в никуда. Особенно заметно будет с фотографиями, коих в ленте большинство.
                                    3. Я бы поменял кнопку комментов и кнопку Share
                                    4. Извини, но сильно смахивает на Windows 8, а у многих он пока вызывает священный ужас. И это минус популяризации подобного диза.
                                    5. Где кнопка настроек?

                                    Это то что сильно бросается в глаза, т.е. без детального анализа. Так что я бы откровенно расстроился бы такому изменению в дизайне от Facebook.
                                    Но молодец что попробовал. Мне было бы западло рисовать что-то, зная что это не будет реализованно.
                                      +5
                                      1. Именно для контраста.
                                      4. Это не Windows 8. Скоро весь интернет заполонит flat-дизайн, вот увидите)
                                      5. Кнопка настроек на картинке профиля. Она же даже подписана.

                                      Насчет западло рисовать — мне кажется лучше сесть и попытаться что-то сделать, чем не делать ничего)
                                        +1
                                        А по второму пункту? Ну серьёзно, зачем делать такие огроменные поля с такими микроскопическими надписями и значками на них?
                                        Давайте тогда сразу так
                                          0
                                          Это концепт приложения для айпада. Разумно, что элементы меню в мобильном приложении должны быть такого размера, чтобы их было удобно нажимать пальцем. Это социальная сеть, кнопки меню пользователь будет нажимать часто. Плюс визуально, на мой взгляд, эстетичнее с воздухом. Меня, например, очень раздражают графические элементы с прилепленным текстом к краям. А некоторые дизайнеры так и норовят настолько уменьшить кнопку, что приходится прилагать усилия и нажимать ее чуть ли не наугад. Особенно этим грешат смартфоны.
                                            +4
                                            В итоге, ничего кроме вкусовщины не мешает сделать текст и значки крупнее, чтобы их можно было разобрать не всматриваясь, верно?
                                            Воздух воздухом, но не 2/3 экрана же под него отводить. Он и так не 17".
                                      0
                                      Владельцу фэйсбука наплевать на ваше удобство как пользователя

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

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

                                        Я бы тоже слинял, хотя меня бесит скорее не интерфейс, а реклама (интересно, адблоком она отключается? надо попробовать), но некуда. Всё общение в моей среде происходит именно в Фейсбуке.
                                        0
                                        На вкус и цвет… Самый главный вопрос к вам — где реклама и как она должна выглядеть, чтобы по ней кликали?
                                          0
                                          Это мобильная версия.
                                            0
                                            Откройте существующую мобильную версию — в ней тоже есть реклама. Вы не поверите, но у фейсбука преобладают именно мобильные пользователи и им ох как много рекламы показывают.
                                          +1
                                          Сначала Вконтакт вежливо «одолжил» дизайн FB. Теперь FB, похоже, пора поступить наоборот — из них двоих ВК куда логичнее устроен.

                                          P.S. Да, и пора бы FB прекратить эту практику «мы тут еще одну галочку добавили в настройках, и ее дефолтное положение (а раз она новая, то у всех и стоит этот дефолт) означает, что FB теперь может присылать нотификации между 1 и 5 утра на все мобильные устройства юзера». Такая практика порождает неуверенность, что юзер может раз и навсегда что-то настроить, а постоянно мониторить настройки — это не то, чего хочется юзеру соцсети.
                                            0
                                            Мне постоянно приходят пуши в виде «Юзер А поделился новостью на своей стене», и по клику открывается новость месячной давности и юзера, на чью страницу я никогда и не захожу. А иногда таких пушей приходит несколько, хоть я эту новость видел уже несколько раз. До сих пор не могу найти галочку, которая это отключает, уже половину в настройках поотключал, все равно приходят.
                                            +11
                                            Да, с таким концептом я бы даже пользовался фейсбуком. Сейчас я туда захожу раз в месяц, чтобы… чтобы… блин, я даже не знаю, зачем я туда захожу :-(
                                              0
                                              Когда компания становится огромной любое здравомыслие уступает дорогу бюрократии и борьбе интересов, нежели удобству пользователей.
                                              Должна появиться альтернатива Facebook или даже несколько. Первую попытку сделать интересно, свежо, удобно и технологично предприняло Myspace, ждем других игроков. А вообще хотелось бы увидеть стартап, который бы открыто предложил альтернативу FB. Прецедент уже был, наделал много шума на старте, правда дальше не получилось, но начало было очень даже…
                                                0
                                                Должна появиться альтернатива Facebook или даже несколько. Первую попытку сделать интересно, свежо, удобно и технологично предприняло Myspace, ждем других игроков.

                                                Это шутка такая? Myspace уже существовал и был широко известен, когда Фейсбука ещё и в помине не было. Даже в фильме Финчера про эту социалочку об этом прямым текстом говорится.
                                                А если вы говорите про нынешнюю инкарнацию Myspace, то у неё, насколько мне известно, теперь очень чёткая направленность: это соцсеть для аудиофилов, там на выражение музыкальных вкусов главный упор. Хотя сам ей не пользуюсь, лишь читал анонс новости про ребрендинг, так что если ошибаюсь — поправьте.

                                                Кстати, все эти кастомизируемые фоновые картинки в профилях пользователей в этом концепте мне именно MySpace и напомнили. Где каждая страница рябила по-своему, что создавало ощущение какой-то хаотичности и неунифицированности. На мой взгляд, с однородным фоном, одинаковым на всех страницах, было бы лучше.
                                                +2
                                                Первым делом я исправил фейсбучные приблизительные «about an hour ago» на точное время.
                                                Это спорное решение. А с учётом того, что вы отказались от использования статус-бара iOS, отняв у пользователя возможность посмотреть текущее время, это решение совершенно неправильное.
                                                  +4
                                                  Так же я хочу показать возможность быстрого создания группы пользователей. Все просто: захватили и тащим на любого другого друга.
                                                  У меня 143 друга, на вашем экране умещается всего 12 друзей. Чтобы перетащить человека с именем на «А» и создать группу с человеком на «Я», мне придётся очень попотеть.
                                                    0
                                                    Широкие фотографии в таймлайне, это вы конечно круто, где пользователи их искать будут?

                                                    А так, хуже чем щас. Какой-то микс из ios, windows и своего.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        +1
                                                        Напомню, как кто-то умный сказал: если вы не платите деньги, то вы не клиент, а продаваемый товар. Ну вот как в лицокниге: всё бесплатно, то есть пользователи — это НЕ клиенты, соответственно никто не станет ставить их удобства во главу угла, и это правильно и логично.
                                                          +1
                                                          Курицы на ферме тоже не клиенты, но если их не кормить — они передохнут и перестанут нести яйца, которые, собственно, клиенты и покупают.
                                                            0
                                                            Учитывая, в какой теме мы находимся, здесь прямо напрашивается какая-нибудь шутка про «Счастливого фермера» =).
                                                          0
                                                          Шрифт очень мелкий и блеклый. Не знаю, принято ли на ФБ читать.
                                                            0
                                                            В живую шрифт смотрится великолепно.
                                                            +1
                                                            В фейсбуке больше всего напрягает нехронологичная лента событий. Со всем остальным ещё можно смириться, но когда в ленту регулярно вылезают события месячной давности… С этим как-то можно справиться на уровне приложения?
                                                              0
                                                              Используйте вот эту переключалку cl.ly/image/2E1j0v0E0q0b
                                                                +3
                                                                Эта переключалка стабильно раз в неделю слетает на «most popular»
                                                                  0
                                                                  Есть такая тема — навязывают сильно, ага.
                                                                  0
                                                                  И помимо предыдущего комментария, с этим переключателем всё ещё появляются посты, выбивающиеся из хронологии
                                                                    +1
                                                                    Это не посты, а отметки о том, что кто-то из ваших френдов их прокомментировал/лайкнул.
                                                                      0
                                                                      Во вконтакте это очень удобно реализовано отдельной лентой. А всякие некропосты со свежими комментариями в основной ленте очень мешаются.
                                                                +1
                                                                Сразу по регистрации:
                                                                Всегда только два поля: login(обычно email-адрес) и password вне зависимости от наличия аккаунта!
                                                                Проверяется после и далее следует один из вариантов: авто-регистрация и вход, сообщение: «ошибка входа», выполняется входв существующую учетную запись.

                                                                Относительно шапки и меню страницы:
                                                                1. Назад — слева (там где «домой» сейчас)
                                                                2. «Домой» — сразу за стрелкой «НАЗАД». Если нет страниц — то скрыть и будет как у Вас сейчас: слева в уголке.
                                                                Иконки событий — все верно! В центре.
                                                                3. Контекстное меню — справа. (обычно «настройка», если сервисов много — то они и предпосл. пункт — «настройка» уже...). Меню НАМНОГО важнее CheckIn-a!
                                                                4. Настройки дружбы и др. операции с этой страницей — меню с ОДНОЙ кнопкой и всегда в ОДНОМ месте. («собака Павлова»)
                                                                5. Не отбирайте ценное визуальное планшетное место: выводите заголовок сверху фона top-баннера (на полупрозрачном фоне, к примеру)
                                                                6. «Поиск на странице» (general-page-button, для другого типа страницы — другая кнопка/меню и т.д.) должен быть справа, до кнопки главного меню сайта.

                                                                еще много могу комментить… (кому интересно — лучше пишите в личку)

                                                                Итог: Спасибо автору статьи!!!
                                                                Наконец-то хотя бы кто-то обратил на это внимание!!!
                                                                drokov, большое человеческое СПАСИБО за поднятие этой темы!
                                                                  0
                                                                  И вам спасибо! Очень ценные советы.
                                                                    0
                                                                    обратите внимание на jquerymobile.com
                                                                    0
                                                                    Всегда только два поля: login(обычно email-адрес) и password вне зависимости от наличия аккаунта!
                                                                    Проверяется после и далее следует один из вариантов: авто-регистрация и вход, сообщение: «ошибка входа», выполняется входв существующую учетную запись.

                                                                    И как в таком случае поступать с опечатками в логине/пароле?
                                                                      0
                                                                      Если опечатка в........:
                                                                      … пароле: не пускать, если учетка существует и пароль не совпал с серверным;
                                                                      … логине: на след. странице:
                                                                      1. вывести кнопку «подтвердить регистрацию и e-mail» (и в письме прислать линк активации и пароль)
                                                                      2. вывести кнопку «вернуться» (при опечатке).
                                                                      После перехода по ссылке из письма выводим: «почта подтверждена» и дать возможность сменить пароль на этой же странице по желанию пользователя или продолжить работу уже будучи залогиненым.
                                                                        0
                                                                        А если опечатка и там, и там?
                                                                        Что писать на кнопке submit? Логин? Регистрация? Логин/Регистрация? Очень и очень неочевидное решение вы предлагаете.

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

                                                                          0
                                                                          А если опечатка и там, и там?
                                                                          … логине: на след. странице:… (см. пред. пост)

                                                                          Что писать на кнопке submit? Логин? Регистрация? Логин/Регистрация?
                                                                          Вход

                                                                          Можно и канонические.
                                                                            0
                                                                            Регистрация != Вход
                                                                              0
                                                                              Точнее: Регистрация >= Вход (поглощение множества полей)
                                                                                0
                                                                                Это совершенно разные понятия, и их нельзя объединять смыслово
                                                                                  0
                                                                                  Я Вас не заставляю делать так, как я советую)
                                                                                  Это Ваша воля (и разум).
                                                                                  Однако, большинство мировых лидирующих сайтов не могут ошибаться…
                                                                                  Я бы присмотрелся к их реализации на Вашем месте и не вступал бы в дискуссию необоснованно…
                                                                                    0
                                                                                    Вы приведите примеры мировых лидирующих сайтов, где логин и регистрация объединены так, как вы их предлагаете объединить?

                                                                                    Из четырех примеров навскидку — только у Amazon можно из формы логина зарегистрироваться, но конечно же, там нельзя в той же самой форме ввести пароль. Ваше решение — запутывает пользователя.

                                                                                    Amazon
                                                                                    Yahoo
                                                                                    Linkedin
                                                                                    Facebook

                                                                                      0
                                                                                      Знаю один сайт, там в шапке три текстфилда и кнопка Submit. Если ввести только емеил и нажать энтер, на почту приходит ссылка восстановления пароля, если емеил и пароль, то логинимся, если эмеил и 2 пароля — регистрируем юзера. Пока в коде не увидел, не верил. Такой вот юзабилити хинт от заказчика.
                                                                                        +1
                                                                                        Ну это не юзабилити хинт, а юзабилити факап
                                                                    +1
                                                                    Из того что бросилось в глаза:
                                                                    — нет намека на forgot password
                                                                    — розовые кнопки выбиваются из интерфейса
                                                                    — голубой цвет после темно-синего «родного» непривычен
                                                                    — очень большие отступы сверху, много «воздуха»
                                                                    — визуально шрифт кажется слишком мелким
                                                                      0
                                                                      нет намека на forgot password

                                                                      Так вот же он
                                                                        +1
                                                                        И как знак вопроса ассоциируется с тем, что человек забыл пароль? Если человек забыл пароль, то он четко знает, что он его забыл. :)
                                                                          +2
                                                                          Пользователь никогда не увидит этот знак вопроса. На ux тестировании зачастую люди огромный жирный текст «забыли пароль» не видят, и бегут писать в службу поддержки (кстати как в нее обратиться с этого экрана?).
                                                                          При всем моем уважении все представленные экраны не более чем концепт, и на интерфейс решающий задачу совсем не похожи
                                                                        +1
                                                                        Довольно длительное время я читаю Хабр и постоянно вижу статьи про юзабилити Фейсбука, написанные в негативном ключе, как с позиции его пользователей, так и с точки зрения людей, имеющих прямое отношение к IT-сообществу.

                                                                        И все они рисуют непонятно что. Но фото устройств в этих статьях используют хорошие по качеству. :)

                                                                        Юзабилити плохое и непродуманное. Это видно уже с главного экрана:
                                                                        image
                                                                        Про фирменные цвета уже молчу. Про помощь для забывающих свой пароль писали выше. Регистрация малозаметна.

                                                                        Здесь:
                                                                        image
                                                                        — А если групп станет больше, например, 8, то уже не будет так красиво.
                                                                        — Нет кнопок управления пользователями (удалить, отправить подарок или что там есть в ФБ)
                                                                        — Кнопки переключения отображения стоят перед полем поиска — я этого не понял.
                                                                        — Поле поиска мимо сетки
                                                                        — Ссылка «About» где-то не там и незаметна.

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

                                                                        П.С. Конечно, можно сказать, чтобы я сам нарисовал свой концепт. Но я не пользуюсь ФБ. Слишком он замороченный для меня. Поэтому и не вижу смысла рисовать то, чем я не пользуюсь и структуру чего я не знаю.
                                                                          0
                                                                          Павел, про пароль и регистрацию написал чуть выше. Цвета — понятие субъективное. Мне захотелось освежить текущую цветовую схему.

                                                                          А если групп станет больше, например, 8, то уже не будет так красиво.

                                                                          Список может свернуться

                                                                          Нет кнопок управления пользователями (удалить, отправить подарок или что там есть в ФБ)

                                                                          Удаление и прочие настройки дружбы находятся в профиле конкретного пользователя

                                                                          Кнопки переключения отображения стоят перед полем поиска — я этого не понял.

                                                                          Кнопки на всех экранах расположены одинаково.

                                                                            0
                                                                            Ещё здесь неправильное взаимное расположение юзерпика и таймлайна. Если кто-то сделает таймлайн и юзерпик в одном стиле, вроде как тут, в мобильной версии всё поплывёт. Ну и совершенно непонятно, зачем каждому френду рядом ставить такую кнопку Message — совершенно лишний визуальный мусор.
                                                                            0
                                                                            Отличная работа!
                                                                              0
                                                                              Не очень понравилось, для меня идеал — нынешний G+ для мобилок, очень хороший интерфейс имхо.
                                                                                0
                                                                                — За что кнопке чекина выделили отдельное место в шапке? Получается, что человеку важнее быстрее зачекиниться, чем написать пост. Судя по поведению друзей это мягко говоря не так.

                                                                                — Кнопка поиска на главной заменяется на кнопку ссылки на главную. Искать что-либо я могу только с главной. Почему?

                                                                                — Очень много воздуха. Причем ничем не обоснованного. Та же шапка — огромное поле и мелкие иконки, собранные в кучу.

                                                                                — Перетащить и создать группу очень странная штука. Мало того, что проще выбрать друзей из списка, грубо говоря поставив галочки, так еще и неочевидность действия.

                                                                                — А еще очень полезно знать общих друзей.

                                                                                — И, простите, все же mutual. )

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

                                                                                — Очень бы хотелось увидеть русскую версию этого дизайна.

                                                                                — А еще версию, где в таймлайне появляется вертикальная картинка. Или видео. Или даже репост.

                                                                                — Посмотреть пару последних комментариев к посту — бесценно.

                                                                                И т.д., и т.п.
                                                                                  +1
                                                                                  А можете показать экран Свой Профиль, вкладка «Друзья» в ландшафтном режиме, с текущими размерами элементов и открытой клавиатурой (фокус в поле друзья)?
                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                      0
                                                                                      Расскажите пожалуйста, какими инструментами пользовались при проектировании макета.
                                                                                        0
                                                                                        Один лишь фотошоп.
                                                                                        0
                                                                                        Приятный концепт. Кстати, Фейсбук же работает над свои новым интерфейсом, но как-то медленно :(. Видели — www.facebook.com/about/newsfeed?
                                                                                          0
                                                                                          Да, конечно видел. На мой взгляд — весьма спорное решение, особенно не подписанные иконки справа и прокрутка списка друзей ниже (или что это?). Но, безусловно, стало чище.
                                                                                          0
                                                                                          Очень у Вас в статье много непереведнных слов и сокращений. «УИ», «нотификаций» — это не жаргонизмы, и даже не заимствованные слова вроде того же «интерфейса», который уже прижился: те же «нотификации» куда как понятнее называются «уведомлениями»

                                                                                          Ваша работа напоминает попытку сделать то же, что было, но чуть почистить и улучшить. Facelifting этакий, притом есть даже что обсудить с точки зрения оправданности. Может быть, все же подумать об изменении функционала для облегчения работы в принципе?

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

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

                                                                                          Начал было писать про следующие экраны, но оборвал себя — комментарий потянет на такую же статью, притом опровергать что-то у меня особой цели нет. Я лишь хочу сказать, что прототип ваш, может, и рисовался (долго ли? не знаю), но проработан все еще слабо. Вы пишете про другой конкурс «Я был одним из участников и, позже, одним из финалистов» — Вы уж извините, но там, полагаю, проработка была куда серьезнее (ну, финал у Баду низкого уровня быть не должен, хотя сам не следил), а здесь Вы показали уж очень сырые эскизы.

                                                                                          P.S. Что «Сейчас Фейсбук — воплощенный в реальность бардак» — здесь я с Вами полностью соглашусь. Потому, собственно, и не пользуюсь им всерьез, это правда.

                                                                                            0
                                                                                            Спасибо за критику. На самом деле я хотел сделать все проще. Отсюда такой экран входа. ФБ — достаточно известный сервис, и нет необходимости выводить дополнительные гиды, по крайней мере в мобильной версии.
                                                                                              0
                                                                                              Вы знаете, это, мне кажется, вообще типично (и попахивает неуважением к юзеру) — считать, что юзер априори знает, что использует. Тем более что места на iPad (а не на уменьшенной версии эскиза на экране 15" ноутбука, например) куча, и какую-то доп. информацию можно и добавить.

                                                                                              По-хорошему, надо делать хотя бы мокапы, и тестировать на живых людях. Только тестировать не только на тех, кто живет в FB, потому что им-то (после родного FB-ного интерфейса) что угодно покажется удобным, а как-то учесть и мнение неопытных людей.
                                                                                            0
                                                                                            Какое здравомыслие, если ты дизайн начинаешь с розовой кнопки на синем фоне?
                                                                                              0
                                                                                              Я совсем не дизайнер, красоту оценить не могу, поэтому буду писать про то, что мне показалось неудобным.
                                                                                              Читать это нельзя. Автор напрочь забыл, что устройство мобильное и пользоваться им могут в мобильных условиях. Каждый день я вижу десятки человек в метро с мобильными устройствами — кто-то сидит, кто-то стоит. Где-то метро движется над землей, где-то под. Меняется скорость и освещение. В данном случае интерфейс должен быть полностью к этому готов. Шрифт мелкий, тонкий и неконтрастный. Если солнце попало на планшет? А потом поезд заехал в туннель? Да-да, сортировать друзей перетаскиванием удобно дома, сидя на диване, но не в метро или автобусе, где вторая рука может быть занята. А как быть со случайными нажатиями, если вас толкнули?
                                                                                              Check in? Зачем вообще нужна эта кнопка? Пусть платформа автоматически отслеживает мои перемещения, только не кладет их в облако, а хранит на девайсе. А дальше я сам решу, что публиковать, а что нет. А может я захочу что-то публиковать автоматически для определенного круга друзей.
                                                                                              Нет фильтра, в котором я смогу отсеять настоящие новости, а не просто лайки или шаринг чужого. Слишком много шума. Я хочу его отсеять, выбрать важное, например новое фото друга, к которому я не заходил лет 100 и он появляется в сети раз в месяц.
                                                                                              Нет управления статусом нахождения в сети. Частенько бывает так, что просматриваешь новости, но совершенно не настроен чатиться с кем-нибудь.

                                                                                              Вероятно, я вкладываю в понятие дизайн нечто большее, чем внешний вид и расположение элементов. Для меня дизайн неразрывно связан с функциональностью, разумностью, удобством и эргономикой. На мой взгляд, красота дополняет, но не определяет. Я переодически вижу в сети некрасивые сайты с бешеной популярностью и полезностью. Например craigslist.org.
                                                                                              Еще хочу высказаться по поводу одной совершенно глупой идеи открывания чужих сайтов внутри приложения соц.сети. Давайте человеку возможность открывать внешние сайты во внешнем браузере. Это ведь примитивная опция, но для ряда людей она очень много значит.

                                                                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                              Самое читаемое