ivbeg

Чтобы понять разницу между дизайном и информационной архитектурой - мало объяснений нужны и примеры.

Недавно у меня перед глазами такой пример образовался - обновился официальный сайт закупок Воронежской области, http://zakaz.gfu.vrn.ru

Точнее вместо старого сайта появился новый.

Причём к новому сайту в плане дизайна у меня серьёзных претензий нет - доводилось видеть как хуже так и лучше. А по сравнению с федеральным - так просто конфетка. 

Но не дизайн определяет то как же информация становится доступной пользователям.  

Например:

1. На сайте начисто отсутствует RSS как для отслеживания закупок так и просто для новостей - хотя сложного тут ничего нет. 

2. В реестрах организаций нет поиска по инн, названию и так далее

3. У организаций нет пермалинков и нет возможности просматривать закупки по определённому заказчику. Зачем это нужно? Да хотя бы для того чтобы департаменты области, ГУПы и МУПы могли указывать на своих сайтах не просто ссылку на сайт закупок области, а ссылку на свою карточку на сайте где можно просмотреть их заказы

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

5. Интерфейс проведения электронных аукционов сделан на Flash Flex. При том что Flex - это, конечно, модно тем не менее 600 килобайтный рантайм это не так мало. Если скрипты для AJAX’а можно прооптимизироать использовав сжатие - то тут сжатия не получится и вообще

6. Нет инструкций по тому какие браузеры можно использовать. Например, автоподгрузка списков в формочки для AJAX в Chrome у меня не заработали и ещё вопрос нужны ли они когда, например, список организаций будет весьма велик - тут не автоподгрузка нужна, а всплывающая поиска.

—

Все эти частные замечания можно разбить на следующие критерии анализа:

1. Целостность данных - отсутствие пермалинков. 

2. Качество представления данных - полнота форм поиска и удобсто навигации.

3. Отсутствие описаний технических требований к клиентскому ПО.

Как резюме, несмотря на сравнительно неплохой внешний вид сайта - информационная архитектура у него хромает.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Как общественно полезное дело сегодня за час перевёл Chart Chooser от Andrew Abela из ExtremePresentation. Это такой постер позволяющий значительно упростить выбор диаграммы при визуализации данных. Вначале я думал что это займёт максимум минут 10, но оказалось что редактирование текстов в редакторах PDF выдавало то ошибки с кодировкой, то неправильное восприятие ими графических элементов - в итоге я просто связался с автором и попросил у него исходник, а ниже результат перевода.

Можно скачать большой JPG файл, а можно русскоязычную PDF версию . А если понравилось или есть замечания можно отписаться мне тут.

Признаюсь русскоязычными терминами в названиях диаграмм я лично пользуюсь редко и некоторые переводы вроде “линейчатая диаграмма” (один в один как в Excel) или же “столбиковая диаграмма” (это из словаря) мне самому не нравятся, но готов их поправить если найдуться альтернативы.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Вот такой плакат рассылают членам UPA. А вчера он пришёл и ко мне.

Пустяк, а приятно. Жаль нет русскоязычной версии.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Я никак не мог не взглянуть на новый сайт Роструда под названием trudvsem.ru, и даже думал не написать ли детальный разбор его удобств, но понял что всё что я напишу можно уложить в несколько пунктов по одной фразе.

1. Инструкций нет
2. RSS нет
3. Индексирования поисковиками нет и не будет.
4. API нет(!)
5. Вогоны существуют!

Являются ли первые 4 пункта следствием 5-го или наоборот он является производными от них - не скажу ибо незнаю.

P.S. Сегодня наконец-то пришла по почте бумажка с подтверждением, а так с ноября 2008 года я вступил в UPA (Usability Professionals Association)

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Я не знаю кто проектировал и создавал Bfm.ru, но определённо в форме подачи информации которая там используется что-то есть.

Для полного счастья, имхо, нехватает того же что и многим другим новостным сайтам - привязке к комбинациям клавиш. Например, читаю я длинную новость, и нахожусь вдалеке от формы поиска, но хочу найти на сайте что-то из новости прочитанное, можно было бы привязать поиск к какой-либо клавиатурной комбинации вроде “Ctrl + Alt + F”, а также сделать такую привязку опциональной задаваемой в профиле - тем более поощеряя пользователей регистрироваться.

Ещё одна клавиатурная комбинация в вызове вспомогательной панели - “Ctrl + Alt + H” в которой были бы возможности:

• сохранить страницу в закладки (в несколько сервисов закладок);
• перейти на связанные с данной статьёй статьи по той же теме;
• вернуться на главную страницу;
• разместить в блоге;
• что-то ещё, придумайте сами.

Вообще говоря это было бы удобно для любых сайтов.

А что касается bfm.ru, то я, пожалуй, использовать его буду.

Дизклеймер: Автор никак не связан с “БФМ.Ру”, не слушает одноимённое радио и слушать не планирует.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Death and Taxes - отличная визуализация того на что идут федеральные деньги в США. Конечно, создание такой “штуки” это творческий процесс, его нельзя перенести на любую другую страну неглядя, но как пример формы подачи информации показателен.

В блоге создателей постера, WallStats есть много других интересных примеров по подаче информации.

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

К слову, ситуация с наглядностью подачи информации в России у гос. органов, мягко говоря, неидеальна и иногда и просто ужасна.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

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

Далее несколько заметок тезисами.

Общие определения

1. Между данными и их представлением всегда есть промежуточный слой. Его можно назвать “информационный договор” (information contract). Этот слой определяет, то как именно изначальные, первичные данные предстают перед конечными потребителями информации.

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

3. Информационный договор охватывает не только структуры данных и структуру их представления, но также учитывает объёмы данных, частоту их изменения (интенсивность информационных потоков), условия их хранения, частоту просмотра форм.

4. Часть информационного договора основана на оценке значимости изменения в структуре и характере данных, изменений в формах представления. В зависимости от этих изменений договор может: автоматически обновляться, аннулироваться, приостанавливаться, ограничивать данные изменения.

5. Информационная модель, в рамках которой присутствует информационный договор или их множество, называется “модель информационного договора” (information contract model).

6. В одной модели может использоваться множество информационных договоров связанных как посредством связанных низлежащих данных, так и посредством связанных форм представления.

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

8. Например, в ситуации выбора форм представления рекламы организацией, к которой имеются некий логотип,слоган. В этом случае публикация рекламы в прессе, на стендах или по телевидению – всё это формы представления, в рамках одного информационного договора в котором участвуют первичные данные (логотип, слоган) и формы их представления.

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

( Read the rest of this entry » )

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Относительно недавно, размышляя над антипаттернами юзабилити, там же я упоминал про такое явление как сдвиге идентификаторов элементов веб списках. Это довольно большая тема сама по себе и я раскрою её подробнее.

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

Рассмотрим несколько примеров.

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

Для того чтобы далее было проще описать ситуацию я введу термин LISA (Last In. Shift All) -построение списка элементов при котором любой новый элемент становится первым сдвигает номера остальных.

Предположим, у нас уже есть 100 опубликованных новостей, 10 страниц по 10 новостей на одной странице. Что произойдёт после того как мы добавим ещё одну новость? Появится 11 страница и полностью изменится содержимое всех остальных 10 поскольку добавленная новость сдвинет все предыдущие на одну позицию в отсортированном списке.

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

Также добавлю что список новостей может быть разным. Если в некоторых случаях это лишь списки дата/текст/ссылка на полное описание, то в других случаях ссылки могут и отсутствовать и тогда LISA списки не просто мешают поисковикам, они мешают и пользователям, поскольку становится бессмысленным сохранение ссылки на страницу списка в закладки, ибо новости с неё “уедут”. Подобные списки нарушают один из ключевых принципов находимости информации - уникальности ссылки на информационный объект и возможности быстрого возврата к нему.

Примеров таких списков более чем множество. Даже Вордпресс на котором работает мой блог нумерует страницы считая последнюю первой.

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

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

В Юзабилити бюллетене (UPA Russia) опубликовали мою заметку Целостность формы представления информации, интересующимся также могу посоветовать почитать остальные статьи из бюллетеня, там немало интересных материалов.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

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

Вот текущий список:

1. Справочники и классификаторы

Все кто когда бы то ни было занимались автоматизации в гос. учреждениях задавались вопросами:

Где найти последнюю редакцию ОКОГУ, ОКВЭД, ОКЕИ, ОКАТО или одного из множества других общероссийских справочников? А также как обеспечить автоматическое их обновление при изменении законодательства.

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

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

А вот получить справочники с сайта Федерального агенства по техническому регулированию и метрологии, www.gost.ru - это задачка для крепких нервами и подготовленных к неудачам. Мои попытки приводили лишь к тому что ссылки на документы (PDF) там есть, но при их открытии выдаются ошибки. Да и там в структурированном виде их нет в любом случае. Альтернативный вариант - отслеживание публикаций изменений в Консультанте и вручное их внесение собственные справочники.

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

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Пример сайта сделанного хорошо как по идее, так и по исполнению - http://msk.rusavtobus.ru/

Рассчитывают маршруты передвижения по Москве учитывая _Весь_ общественный транспорт включая метро, троллейбусы, трамваи, автобусы и т.д. Буквально, то о чём я рассуждал в нескольких постах ранее о идеальном маршрутном сервисе. Юзабилити, также, на хорошем уровне. Серьёзных огрехов я не заметил, а вот удобство есть.

Нехватает разьве что возможности печати маршрутной карты и возможности сохранять свои маршруты. В остальном - всё очень и очень правильно. На месте департамента транспорта Москвы я бы поддержал проект хотя бы в информационном плане, по сравнению с РуАвтобус, их ЯПриеду (http://yapriedu.ru) смотрится “никак”.

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

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

В Новой Зеландии с 1 января 2008 года стали обязательными требования по usability в виде подборки “Government Web Standards“. Теперь каждый новый государственный сайт Новой Зеландии обязан соответствовать этим стандартам. У них же очень грамотно сделан ресурс webstandards.govt.nz, где есть подборка требований не только к дизайну и структуре веб страниц, но и к правильной подготовке содержимого.

Ещё интересные материалы оттуда же:

• Self Audit checklist -  Набор  тестов государственным организациям для проверки соответствия стандартам
• Accessware Validator - автоматический анализатор сайтов по рекомендациям WAI и по новозеландским стандартам.

Ресурс рекомендую в принципе как наиболее качественно реализованный. Приводимые мною ранее аналогичные ресурсы в США и Нидерландах ему явно проигрывают.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Незнаю обратил ли кто внимание, а недавно сменился сайт МинФина превратившись из гадкого утёнка, в нечто более чем интересное. Воистину это вам не “школьный портал” и разработчики в РБК-Софт сделали его на совесть ко всему теперь это 5-й из известных мне сайтов органов власти который умеет выдавать RSS ленту.

Но самое интересное меня поджидало в конце главной страницы. Это ничто иное как поле тэгов по опубликованным материалам.

Но нет, не веря своим глазам, а как тут поверишь, всё таки поля тэгов на госресурсах мне ранее не встречались, открыл исходный текст страницы и убедился что это так. Таблица так и называется “tags”, так что оно и есть родимое.

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

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Случайно наткнулся на презентацию директора по дизайну NYT (New York Times) посвящённую typographic grid. Впечатляет даже меня не связанного напрямую с веб-дизайном человека. Собственно вначале меня даже больше волновала не тема, а форма подачи материала. 152 страницы презентации, на чёрном фоне, с постепенным пояснением темы. Думаю что на час-два не меньше.

Если вкратце, то веб страница виртуально разлиновывается в сетку из колонок и рядов определённой фиксированной длины состоящих из квадратов разделённых фиксированным отступом. Далее все блоки страницы “укладываются”  в эти квадраты согласно проектированию интерфейса.

В итоге это даже не дизайн, а подход к дизайну сравнимый с созданием архитектуры для разрабатываемого ПО, так же и тут  что-то вроде “архитектуры дизайна”.  При таком подходе более 90% веб сайтов можно описать в подобной архитектурной модели, соответственно это и возможность создания типовых эскизов в CSS выделяя то что можно назвать семантической моделью веб-дизайна.

Собственно меня это в первую очередь заинтересовало с точки зрения что в отличии от создания настольных приложений у веб технологий гораздо выше уровень взаимопроникновения. Это как дизайн, так и средства обмена через REST, SOAP API, не привязанные к конкретным языкам разработки и платформам.

Ну и  особенно эта идея интересна  так что у неё уже есть реализация Blueprint CSS.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

UI

Пробежался ещё раз по ранее отсмотренным проектам по Web UI. Так недавно вышла новая версия ExtJS, феноменального движка для Web UI через AJAX + DHTML. В новой версии особенно симпатично выглядит возможность веб десктопа и интерфейс управления задачами по аналогии с  Outlook’ом.

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

Другой проект Netikatech, я как то ранее уже упоминал - это маленький бельгийский стартап продающий коллекцию контролов WinForms для Flash и Silverlight. В качестве среды разработки, соответственно, Microsoft Visual Studio 2005 и .NET.  Их демка с Outlook подобным интерфейсом и другие примеры выглядят весьма многообещающе, но пока весьма высока цена использования для малобюджетных стартапов. С другой стороны, я подозреваю что или Microsoft или кто-то близких им компаний Citrix, Cisco, Intel или другие, этот стартап купят. Скорее всего это сделают сами MS, ибо как раз недавно Балмер говорил о их интересе в скупке компаний.  Кстати самый интересный пример, с Powerpoint’ом у меня не запустился.

Веб движки 

Castle Project - попытка портирования Ruby on Rails на платформу Mono. На мой взгляд извращение, так как, что C#, что Java от которого он порождён - это языки для создания продуктов и корпоративного рынка.  Конечно есть и примеры обратного, но, их не так много чтобы появились сомнения в тезисе.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

На днях, в поисках замены для Visio, открыл для себя Best4C. Весьма любопытный ресурс для построения диаграмм, в отличии от первопроходца в этой области Gliffy, обладает куда большей коллекцией элементов, начиная от карт метро, заканчивая UML и Workflow. Правда сразу же всплыла и куча недостатков - не поддерживается русский язык, непонятное отображение диаграмм при экспорте в картинку (у меня изображение съехало при этом), иногда глючит курсок при соединении элементов. Но… Недостатки эти выглядят исправляемыми, а в остальном сервис кажется весьма переспективным.

Впрочем этот сервис не единственный. Autodesk запустили демо своего Cumulate Draw с, пожалуй, лучшей прорисовкой чем любой иной подобный сервис. И это при том что, в отличии от flash’евых Gliffy и Best4C, он полностью сделан на HTML + Ajax.

MxGraph пошли дальше и предлагают движок для построения подобных диаграмм онлайн, у них же есть несколько сильно выглядящих демок - Network, Workflow и другие можно найти на их сайте. Впечатляет.

Их прямой конкурент Draw2D из проекта OpenJacob . Там хотя и не столь смазливый интерфейс и реактивность, но явно проект развивается и может иметь эффективное применение. Там же множество демок и описание библиотеки.

Напоследок, DiagramAnywhere постоенный на flash и не похоже что чем-либо превосходящий остальные подобные сервисы.

Как  следствие всего этого у Visio появилось значительное число альтернатив и, хотя и есть задачи где заменить пока его нечем, но, во многих случаях пользователю не нужен диаграммопостроитель на каждый день в отличии от почтовых клиентов или офисных программ. В итоге обратиться к онлайновому сервису будет проще чем покупать оффлайновое ПО.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Я редко выделяю какой-то отдельный англоязычный блог, но вот этот, BetterExplained, заслуживает внимания.

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

Например,

• Intro to Distributed Version Control (Illustrated)
• Unicode and You
• An Intuitive (and Short) Explanation of Bayes’ Theorem
• What You Should Know About The Stock Market

Почитать стоит, хотя бы, с точки зрения оценки простоты и качества подачи материала.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Ранее я уже делал пост с коллекцией ссылок по теме, сейчас у меня их накопилось достаточно для следующей подборки.

Ресурсы по юзабилити правительства и государственных организаций США.

• Usability.gov - http://www.usability.gov/

    Шаблоны, примеры, концептуальные подходы. Один из наиболее интересных сайтов по теме в домене .gov

• IUSR: Industry USability Reporting - http://zing.ncsl.nist.gov/iusr/

Рабочая группа NIST посвящённая юзабилити. Авторы стандарта CIF по тестированию и подготовке тестовых           отчётов по юзабилити и стандарта CIFU-R по выработке требований к юзабилити.

• Webcontent.gov - http://www.usa.gov/webcontent/index.shtml

        Раздел посвящённый дизайну и представлению данных на национальном портале Соединённых Штатов             usa.gov

• ISO/IEC 25062:2006 - http://www.iso.org/iso/iso_catalogue/catalogue_tc/catalogue_detail.htm?csnumber=43046

        Software engineering — Software product Quality Requirements and Evaluation (SQuaRE) — Common Industry         Format (CIF) for usability test reports. В оригинале CIF разработанный в IUSR NIST

• AIR: Human Factor Research and Design - http://www.usabilityair.org
  Много тематических и отраслевых публикаций в областях образования, медоборудования и телемедицины. Все публикции непосредственно про удобство использования.

• US-CET  Usability Test - http://www.us-cert.gov/usability/

            Пример юзабилити тестирования на конкретном веб сайте государственного учереждения. Важно что          описание идёт по результатам опроса пользователей и в режиме Lessons Learned.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Буквально только я упоминул про идею маршрутов как обнаружился интересный сервис - www.marwrut.ru . Создатель/создатели молодцы! В развитие ему бы ещё добавить поддержку общественного транспорта, печать маршрутной карты, учёт пробок, варианты объезда и вообще цены не будет сервису.

Вообще число социально значимых сайтов в Рунете растёт и лично меня это радует.

P.S. Люди пишут что на самом деле сервис - это просто использование Google Directions и ничего из себя не представляет.  Так что все добрые слова создателям беру обратно. Google определённо делает всё больший прогресс в социальных сервисах, а вот те кто используют их сервисы не упоминая их природы определённо нет.

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.

Анонсы про MiniWin наверняка уже все читали. Приведу взгляд с другой стороны.

Заметка в ZDNet о MiniWin и Windows Mobile Microsoft’s death knell for Windows Mobile^eng

Я согласен с автором, усилия вложенные MS в создание новой версии весьма существенные, но бизнес стратегия неясная. До сих пор Windows Mobile успешно конкуририровал с остальными платформами несмотря на большее потребление памяти. А учитывая что закон Мура действует, то памяти всё больше, как flash так и оперативной и это давно уже не проблема, во всяком случае куда менее актуально чем юзабилити и общая стабильность работы.

Ещё один аргумент что потребление ресурсов ОС - это всегда баланс между интересами пользователей и производителей оборудования. Перегнув в любую из сторон, продукт становится менее востребованным. Так Vista, в общем-то не худший продукт, но из-за завышенных требований к оборудованию, перегиба в сторону продавцов железа, желанной популярности не получила. А у MiniWin может оказаться обратная проблема, что при всех её малых размерах  производители могут выбрать мобильный OSX за большие требования к железу делая акцент на “смазливости” интерфейса.

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

Кросспост из Иван Бегтин. Комментарии можно оставлять здесь или здесь.