Pull to refresh

Comments 102

UFO just landed and posted this here
было бы круто иметь полноценную мобильную версию, а то полной пользоваться не очень удобно, а мобильная слишком уж урезана.
Поддерживаю — иногда хотелось бы быть авторизованым, находясь в мобильной версии, чтобы видеть топики из закрытых блогов.
Такой кошмарный интерфейс мог придумать только программист.
Обоснуйте.
Не идеально — да, но никак не кошмарно.
Ну как вам объяснить… все хорошее, что есть в этом интерфейсе, сперто из гайдлайнов, а остальное — ужас.

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

Зато все красиво врисовано в айфон.
А разве делать по гайдам — неправильно?
Вы бросьте эти свои бинарные оппозиции. Делаешь по гайдлайнам — делай до конца. Тут же автор принес множество своих идей, которые изгадили просто все. Подробнее я расписал чуть ниже.
Вы, наверное, против любых начинаний?
Давно вы экспертом стали?
UFO just landed and posted this here
UFO just landed and posted this here
UFO just landed and posted this here
Маленький офтопик
Бобер?:)
Это бывший администратор форума одного it журнала?:)
Ну, я не знаю, насколько «Игроманию» можно считать IT-журналом, а других я вроде не администрировал.
Вы наверно Мезайфон )
Думаю все будут рады взглянуть на ваш вариант.
Я не думаю, что все будут этому рады — я тоже программист и тоже придумываю исключительно кошмарные интерфейсы.

Правда, у меня при этом хватает ума честно об этом заявлять.
Вы наверно Мезайфон )
Простите, это я не вам, а выше )
небольшой офтоп:
а что за сервис, которые позволяет делать такие скринштоны с телефоном? (Точнее вставлять скриншот в телефон).
Есть ли такие для android?
на одной из картинок есть подпись, что картинку айфона я взял у artlebedev.ru (за что им спасибо) — делать собственную фотографию мне было лень, да и она не главная в этом концепте.
Можно взять готовый psd-шаблон телефона и встроить туда прототип сайта.
Шаблоны можно найти например на Deviantart.
О да, кажись то что надо.
Может получится найти под google nexus s
Спасибо.
вот, то что надо. заплюсуйте пожалуйста кто-нибудь. спасибо огромное.
Есть специализированная веб утилита. Содержит картинки всего четырех устройств, но этого обычно хватает: Motorola XOOM, Galaxy Nexus, Nexus S, Nexus One.
Нам надо в горизонтальном режиме, там тени, с ними возиться… но по реализации это конечно идеальнейший вариант.

Вобщем очень помог хабражитель чуть выше
habrahabr.ru/blogs/design/133967/#comment_4449047

Не для рекламы конечно (ибо пилить и пилить еще), но получилось прикольно, вот:
goo.gl/pgkD1
Горизонтальный режим поддерживается. Тени реализованы с полу-прозрачностью и за два клика убираются в любом графическом редакторе — возни с позиционированием экрана в psd будет больше. Для большинства случаев — очень удобный вариант.
Не нашел там горизонтальный режим…
А возсни с позиционирование в psd вообще нет никакой, все по линиям автоматически пристраивается
При использовании скриншота в горизонтальном режиме (800x480) устройство тоже корректно рисуется в горизонтальном режиме.
Оу, классно, когда размеры айфона подстраивается под размер топика, а не наоборот)
Тогда уж таксафон.
Тогда уж «longphone is loooongphoooone».
Я конечно слышал что в новой версии iPhone увеличат экран, но не настолько…
Листание топиков влево-вправо немного напоминает Metro UI. Это правда удобно :)
Удобно. Читаю RSSки в подобном виде. Больше места (нет кнопок влево-вправо) и не нужно скроллить до конца статьи, чтобы перейти на следующую. Еще нравится один жест pull-to-back это как pull-to-refresh только возвращает в меню. Можно тянуть в конце либо в начале статьи.
Pull-to-back + swap-left + swap-right и никаких кнопок.
В Гугл Ридере так стало с недавних пор. Очень удобно.
А что надо включить для этого? У меня старый интерфейс…
Всего лишь обновить, не более. При первом, после обновления, запуске он сам это включает и сообщает, мол так и так, теперь листай так, не нравится — в настройках можешь переключить на старый вариант.
За исключением тех случаев, когда в статье длинная непереносимая строчка. Раньше я мог её увидеть просто проскролив направо, но теперь мне предлагается посмотреть на другую статью. Ну да ладно, топик не об этом.
Собственно, я смотрю, прибежали «принципиально несогласные», ставящие минусы в карму. Мне все равно — хуже мне уже не будет, но мне хочется с ними побеседовать.

Итак, вы правда считаете, что это хороший интерфейс, если
1. Вкладка представляется то вкладкой, то кнопкой. Это я о верхней панели.
2. В верхней панели же аватар и рядом с ним — комбобокс? Что это за элемент? Комбобокс рядом с аватаром определяет семантику «выбор пользователя». Это действительно он? Или просто это очередной криво нарисованный и совершенно непродуманный элемент?
3. Элемент с тремя полосками — что он означает? Его семантика совершенно не читается из пиктограммы.
4. Подвал у каждого поста сделан так же, как собственно на самом хабре — в виде маленьких иконочек, в то время, как вместо этого лучше было бы сделать более крупные цифры и полноразмерные кнопки, потому что даже с моим зрением их довольно тяжело разглядеть на экране.
5. Навигация — два комбобокса. Два! Это значит, что для перехода я должен сделать четыре клика — один на открытие каждого комбобокса и еще один на выбор элемента. Нет, даже пять — еще один по кнопке «перейти». Хотя было бы очевидным сделать линейный список разделов с выделением подразделов отступами — таким образом на каждый переход нужно было бы сделать два клика. Два вместо пяти! Хороший интерфейс, ага.
6. Поиск по сайту в навигации (причем внизу), хотя он обычно живет рядом.

Все это — признаки хорошего интерфейса?

Если бы Вы сразу написали это сообщение — то наверняка получили бы плюсы.
Обозначенное вами в общем правильно, однако это больше недоработки.
Интерфейс не идеальный, не обкатанный и недоделанный, но выглядит понятно и приятно — это уже никак не кошмарно без обоснования, особенно с учетом что а) вы не признанный эксперт в UI и б)«общая температура» по интерфейсам сейчас хуже чем представленный макет.
Я считаю что «кошмарный» в данном случае — оскорбление. Потому и минусы…
Кошмарный интерфейс — это не оскорбление. Оскорблением было бы написать «автор — мудак». Нельзя оскорбить интерфейс — по определению оскорбление применимо только к персоналии, а не к продукту его деятельности. Следует думать, прежде чем употреблять слова в неподходящем контексте.

Автора я пальцем не коснулся.

Все описанное мной — не недоработки, это непродуманность. Не отклонение, а тенденция. Это следствие непонимания того, как нужно разрабатывать интерфейс.

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

Это не так.

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

А то, что хабр любит авторитетов — это я знаю.
Не волнуйтесь Вы так.
Если художнику подойти и сказать что эта картина кошмарная — это тоже не оскорбление — этоже картина…
А если минусы сыпятся — это явно не просто так. В конце концов не нравится аудитория хабра — не пишите, зачем создавать конфликты?
Как раз недавно я у себя разбирал вопрос щепетильного отношения к собственному творчеству. Если интересно — можете ознакомиться. virtualmind.ru/2011/12/02/creation-and-representation/

Как вы понимаете, я против такого отношения.

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

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

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

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

К сожалению, 90% нарциссов со мной не согласны. И это сугубо мои проблемы, да.
«Такой кошмарный интерфейс мог придумать только программист.»
— непрофессиональный ответ. В начале этого треда — профессиональный (не значит что с ним согласны все). Сравните результаты оценки.
И, пардонте, где вы видели слово красота? До этого только вы его употребляете — «Зато все красиво врисовано в айфон.»
Вы мне хотите сказать, что то, что здесь представлено — это профессионально сделанный интерфейс?

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

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

вроде всё очевидно bobermaniac
Любопытно одно, почему вы с таким рвением не пытаетесь улучшить «юзабилити» своего блога? Видимо, у вас обычная истерия и желание быть в меньшинстве
Я же говорю — не умею я делать хорошо. Умею только видеть, что сделано плохо. Я же программист.

Со своим блогом я пробовал — получается из рук вон плохо.
То, что вы делаете – чрезвычайно низко. Критика – это здорово. Говорить о недостатках – отлично. Однако, фразы типа «это – говоно» не достойны порядочного человека.

Ваша критика деталей интерфейса вполне разумна. Над этими моментами следует поразмыслить, может быть исправить. Мне хочется надеяться, что человек, который может так хорошо сформулировать недостатки интерфейса умеет адекватно общаться с людьми, а эти злые комментарии он оставил по досадной случайности.
2. Обратите внимание на меню пользователя у Гугла
3. Хм, всегда был список (см. Индексная страница нового Youtube — рядом с «Подписки» есть такая иконка)
4. То что сейчас в подвале — пикселхантинг. Вообще есть смысл подвала?
6. Pull-to-search поможет
Коллега, я постараюсь ответить почему именно так а не иначе.

1. Кнопка обычно побуждает к действию. И то, что кнопка переключат в другую вкладку в принципе нормально, мне кажется.

2. подобный «треугольничек» уже давно используется в интерфейсах (если зайдете на Google или Twitter — сможете увидеть аналогичный элемент) и обозначает обычно он, что за элементом скрывается какое-то меню или раздел. Если бы его там не было, то было бы не совсем понятно, что на аватар можно нажать и что-то получить.

3. Это переключатель режима просмотра. К сожалению, не все пиктограммы сразу и у всех вызывают одинаковое понимание.

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

5. У Хабра три уровня меню с последовательной зависимостью (т.е. следующий зависит от предыдущего). Поэтому там именно два комбобокса — в одном мы выбираем к в какому из списков находится топик (Лента | Лучшие | Тематические | Корпоративные). А далее последовательно выбираем его тип (Захабренные | Новые | Отхабренные).

Если поместить это в один список, то он получится двухуровневый и длинный.

6. он виден на экране и тем, кто захочет им воспользоваться вполне доступен, как мне кажется.

Вы это каждому пользователю своего интерфейса рассказывать будете?

Тогда к нему следует приложить талмуд на 30 страниц с описанием того, что какой элемент обозначает, и как этим интерфейсом пользоваться.

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

В чем проблема длинного списка, например? Его тяжело листать? Почему два комбобокса лучше?
Проблема длинного списка, что он будет неудобен на смартфоне — он не влазит в экран и за счет дублирования одинакового блока будет сбивать с толку.

Посмотрите сами:
Лента
— Захабренные
— Новые
— Отхабренные
Лучшие
— Захабренные
— Новые
— Отхабренные
Тематические
— Захабренные
— Новые
— Отхабренные
Корпоративные
— Захабренные
— Новые
— Отхабренные
А ведь простая инверсия списка спасла бы вас от этого ужаса:

Захабренные:
— Лента
— Лучшие
— Тематические
— Корпоративные
Ага
3×4 вместо 4×3
Я что-то упустил?
Абсолютно все.

Например, возможность рассмотреть другие варианты размещения.

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

Человек видит перед собой список:

— Лента
— Лучшие
— Тематические
— Корпоративные

И при нажатии на любой пункт он исчезает, а вместо него появляется другой список — уточняющий

— Захабренные
— Новые
— Отхабренные

При этом, точно так же, любой пункт можно выбрать в 2 клика. В текущем интерфейсе любой пункт выбирается за 5 кликов.

Сравнить 2 и 5 может помочь ваш любимый язык программирования.
Вы говорили только об инверсии списка. Додумать смену контролов и еще кучу вариантов самому это не комильфо.
Итого знание предмета 5, донесение информации 2.
Я говорил об одном из возможных путей решения проблемы. То, что список получается длинной в 12 элементов мне почему-то проблемой не показалось — зато показалось проблемой определенная гирляндовость, именно ее я и решал.

А тут, оказывается, что люди считают проблемой список из 12 элементов. Ужас какой.
Для меня тоже список из 16 пунктов (не забываем про заголовки) не проблема.
Просто вы отвечая на «Проблема длинного списка, что он будет неудобен на смартфоне — он не влазит в экран» своим ответом имели в виду «определенная гирляндовость»?
Странная позиция, на мой взгляд.

P.S. Гирляндовость решается убиранием банальным убиранием отступов слева, и выделением заголовков.
А в чем проблема списка, который не влезает на экран?

Пользователь настолько туп, что не сможет его проскроллить?

Мне даже в голову не могло прийти, что такой короткий список вообще может быть проблемой. Это мое профессиональное искажение психики.
(facepalm)
Вы вообще читаете что тут пишут? Создается впечатление что вы отвечаете на отдельные слова из контекста.
Да, мне на секунду показалось, что мы спорим об интерфейсе, но внимательно вчитавшись, я понял, что интерфейс здесь всех волнует меньше всего на свете.
и тут Вы ошибаетесь.
Вы получите список такой же длинны.
Клик по названию раздела должен СРАЗУ его открывать по-умолчанию в режиме захабренных — это то что, надо абсолютному большинству. Для остальных вверху страницы горизонтальная панель «захабренные, новые, отхабренные» переключающая режим свайпом.
Итого 1 клик + 1 опциональный свайп.
Откуда в списке «Лучшие» «отхабренные»? Там совершенно другая иерархия.
5. В ios есть специальный контроллер для таких вещей, он прост в понимании и использовании. image
  1. В чем-то согласен, я не люблю когда вкладки и даже ссылки заменяют кнопками, кнопка — это действие. Но так как сейчас терпимо, много где встречается и потому имеет право на жизнь. Больше проблема, что кнопки правее кажутся вкладками.
  2. Согласен, читается как комбобокс. Это легко исправить, автор видно не смотрел свежим взглядом.
  3. Согласен, надо менять, тянет максимум на меню. Можно из двух кнопок сделать двойную и соответствующая половина нажата, когда активна, так хотя бы какая-то дополнительная подсказка. С другой стороны — это настройки, человек один раз выберет режим и больше не будет менять, зачем занимать место на панели? Вообще, я так понял, настроек нет никаких? Это проблема :)
  4. Субъективно и по картинке сложно судить. В любом случае указанные элементы значительно крупнее текста, если у вас с ними возникнут проблемы, то текст вы вообще не прочитаете.
  5. Задача нетривиальная. Два списка — лучше, но ненамного и не из-за количества кликов, а просто нагляднее. Вообще оба варианта оторваны от контекста и непонятно что это за навигация, если ты не опытный пользователь полной версии Хабра. Нужно экспериментировать.
  6. Сойдет, кто пользуется поиском на Хабре, тем более в мобильной версии? :) Ну я к тому, что выносить это вверх страницы или делать отдельную кнопку на панели — не рациональное использование места, редко востребованная функция.

Все это — признаки хорошего интерфейса?

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

По поводу красивой картинки, согласен, известный факт, Горбунов довольно точно недавно описал. Мне троллинг, тоже, засчитан :)

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

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

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

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

Вот и вы пытаетесь сделать то же самое — нагружаете сайт визуальным мусором, добавляете бессмысленную навигацию. Зачем в списке постов название блога, имя автора, буллиты, и повторяющееся многкратно слово «сегодня»? Прежде чем проектировать навигацию, надо изучить поведение/потребности пользователя, пути его перемещения по сайту, а не запихивать полкарты сайта в неуклюжие селекты.

Проектирование интерфейса, на мой взгляд состоит не в том, чтобы налепить кучу градиентов (и абсолютно не в тему на айфоне смотрящийся выпадающий блок на аватарке) и скопировать Metro-style навигацию (ну-ну, на сколько у вас хватит терпения пролистывать последние 50 постов?), а в нахождении ответа на потребности конечного пользователя. Упомянутый выше pda.roem.ru — хороший, юзабельный пример, на который вам стоило бы обратить внимание.

Все вышесказанное, конечно, не истина в последней инстанции, а мое скромное мнение.
UFO just landed and posted this here
UFO just landed and posted this here
«Материализация» поста как карточки (с полями, тенями, отступами) — трата драгоценного экранного пространства.
Показывать начальную часть поста идея неплохая, но имхо, лучше без картинок в целях экономии мобильного трафика. Все равно первыми, как правило, идут декоративные КПДВ, а не содержательная часть.
Про недостаточную продуманность верхнего тулбара написали выше.
Имхо.
Постави сотый плюс, удачно нажал :)
Есть простой метод для реализации листания «влево-вправо» в мобильных браузерах?
К сожалению, мне трудно судить насколько метод прост, но перелистывание картинок в Фотораме (которая, кстати недавно упоминалась на Хабре) работает в мобильном вполне хорошо.

Поэтому мне кажется, что реализовать аналогичное с топиками также возможно.
Ваш топик вдохновил меня взять на вооружение ваше правило.
Небольшое обращение к «Тематическим медиа» — пожалуйста, я вас очень прошу, НИКОГДА не делайте из мобильной версии хабра ничего похожего на творение автора топика.

Для чисто информационно-статейного ресурса любой сложный джаваскрипт и аякс сделает в российских условиях мобильную версию принципиально неюзабельной.
Давайте создадим опенсорсный народный ридер для хабра под все платформы!
Sign up to leave a comment.

Articles