войти зарегистрироваться

Эти пользовательские интерфейсы whois

индекс
153,03

Альтернатива визивига или новый инструмент?

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

При разработке интерфейсов всегда надо опираться на то, что чем больше возможностей даёшь пользователю, тем более неправильно он их использует. Целые тома рукописей известных и не очень писателей, написанные без использования красных букв на зелёном фоне, жирных выделений и подчёркиваний с перечёркиваниями, остаются великими произведениями. Наша задача, если и не пробудить в пользователе второго Александра Сергеевича, то, как минимум, помочь ему легко, гибко и удобно написать красивую статью, но при этом полностью исключить возможность её испортить. Это не ограничение свободы, это лишь свод законов, которые мы не даём нарушить. Это правила, по которым, в конечном счёте, живёт общество. И любая социальная сеть, по своей сути, является своеобразным государством со своими гражданами (пользователями) и чиновниками (администраторами ресурса). Но, это уже совсем другая история, вернёмся к нашей теме…

Любая запись в любом блоге может быть разбита на несколько логических элементов. Чаще всего это фотографии с подписями и несколько параграфов текстового содержания, реже вставки с видео, и ещё реже различные виджеты. Всё, что мы сделали, это предоставили пользователю набор кирпичиков для построения своего дома, т. е. отчёта.

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

И так, первое, что мы увидим при добавлении нового отчёта:



Выглядит немного необычно, правда? =)

Пользователю предлагается написать заголовок и выбрать один из различных блоков. Пока их всего четыре: текст, фото, видео и карты, но в планах…

Добавим заголовок:



Добавим текст:





Все урлы в текстовом блоке автоматически будут преобразованы в ссылки.

Теперь фотографии. Их, кстати, можно выбрать сразу несколько:





Покажем где же мы всё это дело отмечали:





Теперь осталось всё это дело отсортировать, добавить ещё пару примечаний и всё, готово! Результат можно увидеть на Геоиде.

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

P. S. Пользуясь случаем, не могу не пропиарить нашу «Жизнь», мы в ней тоже много интересного пишем ;)
+61
15 января 2010, 11:39
48
kosiasik

комментарии (102)

  • Вы LyX видели? Вы его описали.
    • Видел, конечно, сходство не большее, чем с викиразметкой…
    • jeje
    • jeje
    • 15 января 2010, 11:54
    • #
      • –5
    А теперь покажите интерфейс, который заменит интерфейс того-же TinyMCE
    • См. выше. Мы как раз отказались от TinyMCE в пользу такого вот редактора, и как оказалось такая схема составления поста оказалась гораздо удобнее нежели TinyMCE.
      • Как вы будете решать проблему кучи кнопок, которые настраивают внешний вид текста? Я понимаю, вашему проекту этого может быть достуточно, но вы в заголовке указали wysiwyg, а это нечто более.
        • Кто-нибудь видел в заголовке «wysiwyg»?
          А нам и не нужна куча кнопок.
          • >Кто-нибудь видел в заголовке «wysiwyg»?
            ->Альтернатива визивига
            • Ключевое слово — альтернатива. «Друго видение».
            • Акцент в заголовке поставлен немного в другую сторону нежели вы видите. Можете читать его как «здесь речь пойдет НЕ о визивиге в привычном его понимании».
          • Ок, а как сделать подзаголовок? Нумерованный/простой список? Гиперссылку?
            • Было проанализировано огромное количество отчётов. Подзаголовки встретились от силы пару раз, списки тоже не частый гость, но для них будут отдельные удобные блоки. А гиперссылки вставляются так же, как на Твиттере. В данный момент я как раз и собираю данные о том, какие элементы действительно нужны пользователю. Всё и сразу не бывает, согласитесь =)
        • WYSIWYG — What You See Is What You Get, т. е. что видим, то и получаем. Этой идеалогии мы стараемся следовать. В самом начале в текстовых полях, как раз присутствовал tinyMCE, но было решено от него нарочно отказаться. Возможно, для таких случаев будет отдельный блок.
        • внешним видом должен заниматься дизайнер-верстальщик, а не контент-менеджер
          • вот это дельное замечание.
          • Речь же не о наборе статьи, а о, скажем, пользовательском блоге. Верстальщик тут — оверкил капитальный.
            • а дизайн блогу кто делал? не верстальщик?
  • Тема прикольная
    Можно ли эту систему интегрировать на своем сайте, ну то есть дашь поюзать на свой проект?)
    • Пока не планировалось. Но будет спрос, будет и предложение =)
  • Все красиво и хорошо, только вот:

    1. Если я хочу разместить фотки рядом горизонтально?
    2. Если я хочу сделать обтекание фотки текстом?
    • опередил :)
    • Мы как раз и хотели этого всего избежать. На блогах с возможностью кастомизации можно увидеть почему давать думать пользователю самостоятельно не лучшая идея. Насчёт компоновки блоков бок к боку мы пока размышляем =)
      • Ок. А как на счет жирного, подчеркнутого, цвета, заливки. Ну хотя бы просто жирного шрифта. Ведь это банально нужная функция.
        • а там нельзя использовать html-теги?
        • хотя наверное было бы и удобнее кнопачками)
        • Да, размышляли, много спорили. Я не зря дал в пример Пушкина и других великих, у них получалось без болдов писать. Но, вообще, возможно Вы правы и такая функциональность появится. Будем анализировать =)
          • Должен же быть прогресс за 200 лет.
            У него вообще пером писать получалось. Впрочем, рисовал он картинки тем же пером где угодно и когда угодно — на всех полях и даже между строк.
            • В книгах современных писателей мало что поменялось =)
              Но книги — это книги, веб — это веб… Посему такой функционал и заметки на полях возможно появятся)
          • Ну, у них использовался курсив (в рукописи, наверное, подчёркивание). Возьмите того же Достоевского =)
          • просто Markdown прикрутите ;)
        • Имхо, полужирный не нужен, как и подчеркнутый. Для установки логического ударение в предложении вполне достаточно курсива. Добавить маленькую кнопочку, и всё. Можно ещё одну для выравнивания по правому краю.
          Идея минимальной кастомизации очень правильна. ;-)
          • Поддерживаю.

            Обтеканию картинок отказать, однозначно. Несколько картинок горизонтально тоже нефиг, потому что все равно у@бищно будет смотреться, пока дизайнер хороший не отверстает.
  • Все это очень хорошо. Но как тут решается проблема отображения разнородного содержимого в свободном порядке? Что, если я захочу два фото на одной линии, сделать обтекание текстом и тд итп. Ваш редактор это не решает. Это структура онли для простых блогов.
    • Ответил чуть выше. Свободный порядок надо избегать. В будущем планируется вообще дать возможность просматривать отчёт в виде слайдшоу, например. А так же сделать настройки для блоков. Да и что там, голосовалки, графики, блоки с возможностью обозначений и т. д. =)
      • В этом есть смысл. Я согласен с вами.
      • так может чуть докрутить, доделать и выдать как недорогой коммерческий продукт? благо выглядит всё очень аккуратно и красиво, на зависть всяким ВУЗИВИГАМ
  • Мне одному кажется что слегка маковский стиль в оформлении?
    Этакий SnowLeopard vs GoogleWave получился…
    • но ведь это даже хорошо, разве нет?
      • Я выше отписал что мне понравилось) мулечки от вейва в стиле мака.

        В принципе сейчас пол мира делают всё с оглядкой на Гугл и Мак, так что в этом ничего плохого, я считаю.
  • Напомнило отправку MMS
  • Четвернтая кнопка зря называется «Карта». Первые три ассоциируются с размещением контента (написать текст, приложить фото, залить видео), а «карта» — с получением контента. Логичнее, наверное, было назвать ее «Место». Ну это я придираюсь.
    • Ну это так, до кучи вставили, что и видно по его функциональности)
    • Кстати да, тоже бросилось в глаза.
    • xaja
    • xaja
    • 15 января 2010, 12:49
    • #
      • –3
    зачем юзать чужие иконки. явно же закос под apple
    • Иконки отрисованы вручную, ниоткуда не тырились. То, что оформление похоже по стилистике, то не вижу в этом ничего плохого. Я пользователь мака и мне приятно видеть всё в одном стиле, так сказать следовать Apple Human Interface Guidelines =)
  • слушайте, а как по мне, то очень неплохо получилось, удачного Вам развития
    • Согласен и присоединяюсь к пожеланию.
      На мой взгляд, вы довольно удачно аппроксимировали магическую кнопку «сделать 3.14здато».
  • Посмотрите на то, что планируется в Typo 5
    • А как это можно посмотреть (без необходимости поднимать апач, руби, рельсы и прочий зоопарк)?
  • А что это за контрол geoid.ru/static/h/3.png, который автоматически раздвигается по мере написания текста? Взят откуда-то или самостоятельно написан?
    • Я его писал сам и на скорую руку. В ближайшее время упакую в плагин для jQuery и здесь же и опубликую.
  • Текст не отформатирован, подписи к фоткам сделаны как-то невыразительно… Чего Вы собственно добились, если не считать четырех красивых кнопочек и автоматического формирования ссылок?
  • Для текста будет лучше если блок по умолчанию будет раскрыт на несколько строк. А так есть ощущение, что написать можно только одну строку. Когда видишь этот блок в первый раз абсолютно не очевидно, что он может расширяться. Это смущает. Сделайте, например такое же количество строк как комментарии на Хабре. Будет приятнее.
  • Вы знаете, довольно неплохо.
    1) Пост по сути бессмыслен, так как представления о системе не дает вот вообще ни разу.
    2) Действительно, вопрос (а точнее ваш «посыл») построен неправильно. Как замена для визивигов не катит ни разу, но вот для вашего формата — просто очень клевое решение.
    3) Вы сейчас на вашем сервисе получите тучу левых аккаунтов/постов. Так как многие пойдут «просто потестить».
    • а, ну да, забыл. Имхо — вы бы сделали просто то, что называется демкой, с вашим редактором, а внизу кнопочка «посмотреть что получилось». Результатом отсутствия этого будет пункт 3)
      • Да, как-то не подумали) В след. раз учтём)
    • Ага, вот уже и pron запостили: geoid.ru/album/3432/
      • бета-тестеры)
      • Эй, админы! Зачем же удалять? Народ посмотреть хочет! :)
  • Вы, к сожалению, не на пике инноваций и прогресса. Составление контента из заранее определенных блоков существует достаточно давно. Наиболее простой пример можете посмотреть на behance.net.


    (по клику большая картинка)

    Что касается самого подхода, то я не вижу смысла в конструкторе — все равно нужно думать над составлением структуры статьи. Лучше предлагать набор типовых шаблонов и отдельно WYSIWYG (если кому-то не хватило шаблонов).
    • Если честно, я отчаянно считал, что такого больше нигде нет. Вы меня переубедили, за что Вам отдельное спасибо)
      Но увиденное не впечатлило… Идея поверхностно похожа, но реализация просто ужасна, на мой взгляд. Во-первых, у нас процесс редактирования не так уж сильно отличается от того, что мы в итоге видим. Во-вторых, пути развития у нас совершенно разные, что и так уже видно =)
      • Идея как раз идентична — составление статьи из блоков. А вот реализация да, несколько другая, в этом все отличие.

        Ну, в любом случае, успехов!
      • Если быть еще точнее, то такой подход к наполнению конетом изложен в книгах Дмитрия Котерова, в том числе и в (http://bhv.ru/books/book.php?id=6643), претерпевшей уже несколько изданий. А до этого еще в ряде англоязычных изданий. И речь не о продуктах даже, а о литературе (то есть о новизне данного подхода даже речи идти не может).

        Но реализовано качественно и красиво, а главное применили где следует. За что вам одназначно плюс.
    • behance.net — клевый сайт, спс за ссылку

      Да и geoid.ru/ — занес в избранное
  • А смысл изобретать велосипед?
    Если визивиги основаны на движке браузера и по сути тоже самое отображение только с редактированием.
    А интерфейс редактора можно делать и не по стандартам.
    • Не хочу начинать спор, но возразить должен. Покажите мне визивиг, который будет отображать хтмл контент в редакторе точно 100% так же как на странице с цсс.
      • Это уже зависит от разработчика, при желании можно сделать вид полностью аналогичным, просто это не всегда нужно, редактировать удобнее с более простым CSS.
      • Есть такой проектик xopus.com/ работает правда далеко не во всех браузерах.
  • Идея понравилась.
    Сейчас я в своих проектах в WYSIWYGах обычно отключаю все кроме необходимого минимума — оставляю разрешенные цвета, размеры и виды шрифтов.
    • а цвета нафига? Размеры шрифта и жирность с курсивом выше крыши для большинства
      • Всякие же проекты бывают… иногда требуется и цвет оставить
    • «цвета, размеры и виды шрифтов» – первое что нужно отключать в визивиге! :D
  • А как ссылки вставляются?
  • ооо, помоему очень здорово для мобильных версий и даже не для веба а для построения интерфейса в целом.
    А содрать концепт можно ?, укажу источник…
    Может даже не вы это придумали, но вы первые у кого это увидел я :-)
    • Посмотри backpackit.com.
      • Да тоже забавно, целое исскусство, но эта реализация мне больше нравится, так как думаю ее использовать для мобильных устройств с маленьким экраном и минимумом кнопок управления.
        на backpackit.com там нужен достаточно большой экран, хотя может у меня воображения не хватает как это можно переделать под маленький экран.
  • Просто шикарно! Только какой то АйФон стайл прослеживается.
  • Было бы, конечно, здорово, если бы команды не просто выкладывали посты «а, как мы умеем», но и вкладывались в развитие opensource. Т.к. по сути, если редактор уйдет в массы, вот это будет круто :)
    • Согласен. Некоторые элементы интерфейса, например, текстовое поле и мультиаплоадер файлов, скоро закатаю в плагины и опубликую. Да и вообще, мы ничего не скрываем, все скрипты лежат в приятном отформатированном виде =)
      • Суть в лицензии.
        Вы бы назвали лицензию и всем стало бы приятно.
        • Про весь редактор я ничего не могу сказать, а по плагинам… Я не шибко шарю в лицензиях, но мне будет приятно, если строчки об авторстве останутся. В остальном, думаю, фул фри для коммерческого и некоммерческого использования =)
  • В своем проекте (к сожалению, приостановленном) мы пришли к такой же схеме. Так что считаю, что вы движетесь правильным путем — юзер-френдли интерфейс редактирования постов и статей должен быть примерно таким.

    Пара вопросов:
    1. Ссылки в текст нельзя вставлять?
    2. Считаете что жирный шрифт, курсив и списки тоже не нужны?
    • 1) Ссылки вставляются как в твитере, т.е. при сохранении просто подсвечиваются.
      2) И да, и нет. Пока не определился. Повторюсь, возможно вернём такую возможность.
  • Узкое решение. Для каждого типа контента придется варьировать редактор. Хотя часто это даже лучше.
    • Mox
    • Mox
    • 15 января 2010, 14:16
    • #
      • +2
    А мне это напомнило backpackit.com/
  • Очень хорошая идея интерфейса. Возьму на заметку :-)
  • Мне идея понравилась! Я всегда за простоту и минимализм. =)
    Может сделаете плагин для WordPress, чтоб он заменял стандартный редактор? ;)
  • Лет 6 назад была такая идея по форматированию содержимого. Вот вижу вашу реализацию. Прекрасно.
  • Вот хорошая штука
    www.weebly.com
  • «При разработке интерфейсов всегда надо опираться на то, что чем больше возможностей даёшь пользователю, тем более неправильно он их использует.»
    Повешу себе это на стенку. Фраза дня для меня.
  • Почему то сразу вспомнился интерфейс Tumblr :)
    • vtx
    • vtx
    • 15 января 2010, 22:18
    • #
      • +1
    Уже начал писать свою реализацию… Всегда откладывал.
    Нравиться концепт, так как делать мульти-колоночные посты с помощью WYSIWYG меня угнетает :(

    И главное вертикальные оотступы между картинками в посте — юзеру не запретишь ставить их как попало энтерами.
  • Что-то общее есть с www.tumblr.com/.
    Перестал быть фанатом wysiwyg, попробовал latex. Просто не всегда пользователь знает как лучше
  • Чтобы на пике инноваций и прогресса не продуло, рекомендую попробЫвать проверять орфографию в ворде хотя бы перед публикацией на 100-тысячную аудиторию :)
  • Симпатичный сайт. Небольшой совет: тестируйте сайт на дешевом ноутбуке. Чем славен дешевый ноутбук:
    — отвратительной цветопередачей, то есть светло-серые подписи к полям на регистрации не видны абсолютно
    — слабым процессором, то есть панелька с position:fixed может превратить прокрутку для пользователей IE в ад. Когда я на свой проект добавил небольшой элемент с position:fixed, письма и звонки в сапорт с жалобами пошли в тот же день.
  • мы у себя в www.maindoor.ru отказались от TinyMCE в пользу markdown. Контент менеджеры довольны :)
  • лого ужасное, с 5 раза только смог правильно прочитать.
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.