Таня Мисютина, заметки с тегом: Веб-наблюдатель

По горячим следам «404 феста»

Wed, 10 Oct 2012 22:03:56 +0300

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

Вот, кстати, презентация про «Веб-наблюдателя»:

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

Огромное спасибо организаторам (в особенности Руслану Демьяненко и Егору Гилёву) за приглашение и приём, самарчанам за гостеприимство, всем слушателям за внимание и интересные вопросы.

Здорово, что «404» год за годом собирает со всей России самую приятную и душевную компанию. Была ужасно рада со всеми увидеться и пообщаться ♥

Как мы делали «Веб-наблюдатель». Работа над ошибками

Sun, 26 Aug 2012 21:21:03 +0300

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

Больше всего в текущей версии мне не нравится экран «Я» — информация о пользователе:

Пункты в первом блоке выглядят одинаково, но ведут себя по-разному: «Twitter» и «Facebook» авторизуют пользователя через социальные сети, а «ФИО + Email» ведёт к заполнению полей внутри приложения. При этом пользователь должен догадаться, что мы ждём от него ввода информации — никаких призывов на экране нет. Даже если он вошёл через фэйсбук, и мы узнали его имя и почту, телефон рискует остаться незамеченным. Далее наблюдатель указывает свой статус и загружает фотографию удостоверения, причём у кнопки загрузки аж три заголовка («Официальные полномочия», «Загрузите фото удостоверения», «Сфотографировать») и многословное пояснение, скрывающееся за иконкой «i».

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

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

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

Но, несмотря ни на что, проект получился крутой и полезный. Отличный повод для гордости — для нас всех!

Спасибо Илье Обшадко за жёсткость, разумную критику и реалистичный подход к срокам, Диме Валетину за избавление от мук с андроид-версией, Сергею Ерошенкову и Косте Баеву за скорость и отзывчивость, а также Тимофею Цветкову, Лёше Поимцеву, Илье Сегаловичу, Насте Дёминой и всем-всем участникам проекта :-)

Как мы делали «Веб-наблюдатель». Лого и отчёты

Fri, 03 Aug 2012 17:52:41 +0300

Какую иконку выбрать для приложения? Объекты из реального мира (кабинки для голосования, урны и бюллетени) слишком громоздки и не отражают суть «Наблюдателя», логотипа и фирменного стиля у проекта не было.

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

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

Узнаваемая «восьмёрка» на клечатой сетке стала символом проекта и иконкой приложения. Чтобы объяснить разработчикам, как правильно построить объект по количеству нарушений, я нарисовала в фотошопе схему с формулами.

Мы добавили в приложение экран «Отчёт» с индивидуальными результатами и перекрасили тумблер в чеклисте.

С голубым переключателем приложение выглядит «более лучше» :-)

Как мы делали «Веб-наблюдатель». Чеклист

Thu, 19 Jul 2012 19:39:11 +0300

((http://itunes.apple.com/ru/app/nabludatel/id505350851 «Веб-наблюдатель»)) помогал официальным наблюдателям и простым избирателям следить за процедурой голосования на выборах Президента РФ. Приложение разработано командой независимых экспертов под руководством Ильи Сегаловича (Яндекс) и Алексея Поимцева (Progress Engine) в феврале этого года. Я отвечала за дизайн интерфейсов, нарисовала сайт, придумала логотип и способ отображения собранной информации. Обстоятельства проекта были довольно необычными: мы начали работать над приложением и сайтом в конце января, при этом дедлайн — 4 марта — был окончательным и бесповоротным. Я жила в Таиланде и работала удалённо, остальные ребята находились в Москве. Но всё получилось: 6197 наблюдателей из Москвы, Питера, Башкортостана, Краснодарского края, Саратовской, Свердловской, Ростовской и других областей зарегистрировали с помощью приложения 11709 нарушений. Человеку, далёкому от политики, сложно разобраться во всех тонкостях процедуры голосования, поэтому для наблюдателей организуют обучение, выпускают справочники и пособия. Идея «Веб-наблюдателя» состоит в том, чтобы предоставить пользователям список возможных нарушений и способ мгновенно сообщить о замеченной проблеме, приложив фото или видео с места событий. Удобный и хорошо структурированный чеклист поможет даже неподготовленному наблюдателю проверить соблюдение правил, а дополнительная справочная информация пригодится в случае возникновения спора или конфликтой ситуации. Ко мне список потенциальных нарушений попала в таком виде: !!//3.2 (Опечатывание стационарных и переносных урн/ящиков) Видели ли вы лично пустые урны и то, как они при вас опечатывались? Да: ОК Нет: Возможное_Нарушение_2(«НАБЛЮДАТЕЛЬ НЕ ВИДЕЛ ПУСТЫХ УРН ИЛИ НЕ ВИДЕЛ КАК ОНИ ОПЕЧАТЫВАЛИСЬ») { = вы пришли поздно, или вы не пожелали это засвидетельствовать, и претензий вы не имеете = вам не дали осмотреть пустые урны или не дали быть при их опечатывании и вы будете (или нет) подавать жалобу = вы увидели в урнах бюллетени, и вы будете (или не будете) подавать жалобу }//!! Пунктов было около сорока. Для простого приложения тексты оказались слишком сложными, поэтому в первую очередь я разобралась с формулировками. Вот что получилось: !!//Урны предъявлены пустые ящики (да—…—нет) урны опечатали при вас (да—…—нет) (Фото пустых ящиков) (Видео опечатывания)//!! Вариант ответа (…) подразумевает, что пользователь не располагает информацией по этому вопросу — это состояние во всех пунктах чеклиста было выставлено по умолчанию. Таким образом, мы не только сократили текст, но и избавились от второго уровня ветвления «возможно нарушение». После недолгих экпериментов дизайнер Антон Бондарев нарисовал трёхпозиционный тумблер: ((thumbler-final.png)) Первая версия чеклиста выглядела так: ((observer-1_1.png)) В следующих статьях я расскажу про поиски фирменного стиля, оформление результатов и битву за главный экран.