Почтовый клиент своими руками

Проектируем удобный почтовый клиент

Недавно, просматривая старые статьи Хабра, наткнулся на опрос о почтовых клиентах, который показал, что подавляющее большинство читателей предпочитает Gmail. Я сам пользуюсь им много лет, хотя пару раз в год безрезультатно пытаюсь “пересесть” на что-то поудобнее. С тех пор я стал думать о том, как можно было бы сделать Gmail лучше. Идей накопилось столько, что я решил создать собственный почтовый клиент. Любителей почитать про интерфейсы прошу под кат. И да поможет мне Фиттс.

Низкий старт. Портрет пользователя и позиционирование

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

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

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

Начало

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

Сразу запустил небольшой опрос по друзьям в соц.сети:

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

Самое главное: интерактивный прототип

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

Далее приведу наиболее интересные скриншоты с пояснениями. Если любопытно пощупать руками, в конце статьи вы найдете ссылку на прототип.

Итак, авторизуемся под аккаунтом Gmail, разрешаем приложению использовать данные, попадаем во входящие

Своему почтовому клиенту я дал временное рабочее название UXMail и буду использовать его только в рамках этой статьи.

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

Навигация и письма

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

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

И тут не обошлось без GTD и геймификации

Я уважаю принципы методологии Getting Things Done о “пустом инбоксе”, поэтому в интерфейсе старался всячески мотивировать не откладывать обработку писем, и как можно скорее очистить папку с входящими. Например, когда последнее письмо отправляется в архив, UXMail хвалит пользователя

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

При наведении на письмо во входящих появляется кнопка добавления этого письма в архив. Пользователю достаточно будет подвинуть курсор на несколько пикселей и кликнуть по иконке:

После чего письмо с анимацией “улетает” в иконку архива в меню.

Закон Фиттса как всегда безупречен

Для сравнения, то же самое действие — добавление в архив — в Gmail. Пользователь вынужден каждый раз проделывать пять(!) операций вместо двух:

1. Подвести курсор к флагу
2. Установить флаг
3. Подвести курсор к кнопке “в архив”
4. Кликнуть
5. Перевести курсор на следующее письмо

Отвечаем на письмо

В интерфейсе входящего письма ничего концептуально нового нет. При клике поле ввода “разъезжается” до состояния, в котором удобно написать ответ

Менее популярные элементы интерфейса скрыты. Например, копия при ответе. Панель форматирования сильно приглушена цветом, но при наведении и клике инструменты “подсвечиваются”:

Отмена и подтверждение действий

К модальным подтверждениям типа “Вы уверены, что хотите . ” пользователи быстро привыкают и машинально нажимают “да” даже не вчитываясь. Поэтому лучше делать всплывающие уведомления: в таком случае у пользователя будет 3-4 секунды, чтобы передумать и отменить свое решение

Цепочки писем и микроцепочки

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

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

1. Не понятно, сколько новых писем появилось в цепочке. Просто появился один “непрочитанный” элемент — цепочка по теме
2. Открывая цепочку, все письма помечаются как “прочитанные”. В результате можно пропустить новое письмо
3. Непонятно, к какому письму цепочки будут применены общие действия (ответить, переслать и другие). Хотя в Gmail это уже частично решено, чего не скажешь о некоторых других клиентах

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

В итоге я решил ввести новое понятие — микроцепочки. Фактически, микроцепочка — это входящее сообщение и ответ пользователя на это сообщение. Такой механизм позволяет сохранить простоту и прямолинейность интерфейса без цепочек и получить определенные преимущества интерфейса с цепочками хотя бы в рамках одной итерации “входящее письмо — ответ на него”. В подавляющем большинстве случаев этого достаточно, чтобы восстановить в голове смысл переписки

Проверяйте спам чаще

Папку со спамом я сознательно “вытащил” на верхний уровень. Я считаю, что пользователям стоит хотя бы изредка проверять спам на предмет важных писем, потому что спам-фильтры пока не 100% корректно работают. Соответственно, предполагается такое взаимодействие: пользователь пробегает глазами список писем в спаме, с помощью быстрой кнопки отправляет некоторые письма обратно во входящие, а в конце списка его ждет большая кнопка “Удалить весь спам безвозвратно” — и далее будет опять хвалебная надпись и картинка

Метки и фильтры: их-то за что?

А вот фанатам меток и фильтров UXMail скорее всего не понравится: фильтры придется настраивать через интерфейс Gmail, а меток вообще нет — остались только папки

Я вижу следующие недостатки использования папок совместно с фильтрами:

1. Нарушается принцип “одного пустого инбокса”. Т.е. чтобы продуктивно обрабатывать почту нужно следить за тем, чтобы сразу несколько папок были пустыми или хотя бы просто обработанными
2. Увеличивается вероятность пропустить важное письмо: человек — не робот: может банально забыть о какой-то папке и не проверить ее
3. Если посадить два человека рядом и слать им одни и те же письма, то, рискну предположить, обрабатывать поток писем быстрее будет тот, кто получает все в одну папку, т.к. он не тратит время на переключение между папками

По поводу меток я в сомнении: пока решил их вообще не поддерживать. Метки — это когда все письма остаются в общем “инбоксе”, просто помечаются словами “работа”, “учеба” и так далее. Я как-то пользовался метками, потом перестал, т.к. обратил внимание, что они улучшают продуктивность лишь ненадолго. Потом приходится систематически тратить время на “ревью” созданных меток и добавление новых. Это при том что в 9 из 10 случаев и так понятно, какое письмо по учебе, а какое — по работе.

Управление вложениями

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

Все-все, уже закругляемся. Настройки

Я изучил интерфейсы настроек нескольких популярных почтовых клиентов, подумал и убрал все лишнее. Осталось только 4 раздела: почтовые ящики, подписи, автоответчик и уведомления

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

А когда пользователь включает автоответчик, в верхней панели статично закрепляется сообщение о том, что включен автоответчик

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

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

Какие планы?

Собрать отзывы с Хабра, доработать прототип, сделать графический дизайн и промо-материалы, привлечь инвестиции на разработку через краудфандинговые платформы.

Источник

Строим свой Gmail с куртизанками и преферансом

Вместо предисловия

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

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

0. Сервер

Прежде чем разворачивать все необходимые сервисы, сперва необходимо решить где они будут жить. Первая мысль, которая приходит в голову — развернуть все на своем домашнем компьютере. Но включенный 24/7 компьютер дома доставляет немало неудобств. К тому же, мы хотим, чтобы наши сервисы были доступны всегда, а с качеством домашнего интернета и электроснабжения это почти невозможно. Да что там говорить о качестве, многие интернет провайдеры запрещают держать какие-либо серверы дома.

Таким образом, выбор пал на виртуальный сервер от Digital Ocean. Думаю, сервис не нуждается в представлении. Для себя я выбрал самый простой тарифный план, а именно $5/мес, 20GB SSD и 512MB RAM. Таких скромных характеристик достаточно для решения вышеописанных задач в масштабах домашнего пользования.

Также, нам необходимо зарегистрировать домен. Так как я жадная жопа мне было жалко денег на домен в зоне .com, то я воспользовался услугами замечательного регистратора Dot.tk — они выдают домены в зоне .tk бесплатно, с условием, что ваш сайт будет работать и вы вовремя будете продлевать регистрацию доменного имени. Другими словами — если вы доменом пользуетесь, то пользуйтесь на здоровье. Если же просто застолбили имя, то не будьте жадиной, отдайте это имя кому-то другому.

Для удобства, можно перенести обслуживание домена на серверы Digital Ocean, что я и сделал, выбрав «Custom DNS» и прописав адреса следующих NS-серверов: ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com .

1. Почта

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

Это набор скриптов, которые за считанные минуты устанавливает и настраивает следующую связку:

• dovecot
• postfix
• mysql/postgresql/openldap (по выбору)
• amavisd
• clamav
• spamassissin
• apache
• roundcubemail

+ еще некоторые плюшки, о которых детально написано тут.

ВНИМАНИЕ: на сайте iRedAdmin написано, что его нужно устанавливать _только_ на свежеустановленную ОС. Я не пробовал устанавливать пакет на «бэушный» сервер, однако, подозреваю, что закончится это все не самым лучшим образом.

Не будем долго задерживаться на этапе установки, эта процедура довольно проста и подробно описана тут, тут и тут. После установки можем пойти на панель управления по адресу example.com/iredadmin и создать нового пользователя. Теперь у нас есть полностью рабочий почтовый сервер.

Но мы пойдем немного дальше и заменим apache на nginx. Сперва, необходимо установить сам веб-сервер. В ubuntu это делается так:

Теперь необходимо настроить его таким образом, чтобы все наши сервисы были доступны. Так как мы хотим, чтобы весь трафик шифровался, то необходимо немного модифицировать дефолтный конфиг, включив шифрование. Подробнее о настройке шифрования в nginx можно почитать тут. Мой глобальный конфиг /etc/nginx/nginx.conf выглядит следующим образом:

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

Для этого в /etc/nginx/sites-enabled/ создаем новый файл примерно с таким содержанием:

Здесь мы видим правила обслуживания адресов /phpmyadmin и /iredadmin. Так как phpmyadmin написан на вот так неожиданность php, то для его работы необходимо установить php5-fpm. В ubuntu это делается так:

Далее, в конфиге /etc/php5/fpm/pool.d/www.conf прописываем строчку:

Таким образом мы указываем fpm, чтобы он слушал на сокете /var/run/php5-fpm.sock. Именно на этот сокет настроен наш nginx.

iredadmin, в свою очередь, написан на python и для его работы нам понадобится uwsgi. Также, для красивого запуска uwsgi, я использую supervisor. Установим эти пакеты.

Конфиг uwsgi-приложения /etc/uwsgi/iredadmin.ini у меня выглядит следующим образом:

Конфиг супервизора /etc/supervisor/conf.d/iredadmin.conf выглядит так:

Останавливаем apache, запускаем nginx и supervisor:

Идем в браузер и проверяем все ли работает.

2. Контакты и календари

Для того, чтобы наше рабочее окружение было максимально комфортным, нам необходимо поднять сервер контактов и календарей. Сперва мой выбор пал на Baikal. Это замечательное решение, которое разворачивается за считанные секунды и неплохо работает. Но мы ведь хотим, чтобы все наши сервисы также были доступны и через web, а Baikal, к сожалению, не имеет встроенного web-интерфейса. Таким образом, необходимо искать, устанавливать и настраивать еще один продукт. После непродожительного поиска, наткнулся на отличное решение — ownCloud. Это полноценный WebDAV сервер, у которого есть веб-интерфейс и клиенты для разных платформ. Из коробки мы получаем сервер контактов и календарь. Более того, мы получаем свое личное облачное хранилище!

Установка

1. Скачать и распаковать архив;
2. Создать пользователя базы данных и саму БД;
3. Настроить nginx;
4. Открыть в браузере страницу установщика и следовать инструкциям.

Конфиг для nginx я взял из документации.

Интеграция контактов с RoundCubeMail

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

Сначала нужно установить plugin-manager для RoundCube. Видео-инструкция по установке лежит тут. В моем случае оказалось, что iRedMail не выдал всех привилегий пользователю БД roundcube для базы roundcubemail. Убедитесь, что все права выданы, иначе плагин-менеджер не установится. После этого качаем архив с плагином Roundcube-CardDAV, распаковываем его и кладем содержимое в папку /var/www/roundcube/plugins/carddav/. Затем необходимо включить этот плагин в настройках RoundCube в веб-интерфейсе. Теперь в настройках появился новый пункт CardDAV, в котором необходимо прописать адрес нашего CardDAV-сервера.

3. RSS

В завершение осталось поднять только RSS аггрегатор. Для решения этой задачи я использовал Tiny Tiny RSS. Это легкий движок, который прост в установке и настройке и имеет несколько тем оформления.

Установка

1. Скачать и распаковать архив;
2. Создать пользователя базы данных и саму БД;
3. Настроить nginx;
4. Открыть в браузере страницу установщика и следовать инструкциям.

Конфиг nginx /etc/nginx/sites-enabled/rss имеет следующий вид:

Для того, чтобы фиды обновлялись автоматически в фоновом режиме, я добавил еще одно приложение для супервизора:

4. Синхронизация с мобильным телефоном

Зачем нам все это без синхронизации с мобильным телефоном? Вот и я думаю, что незачем.
Для синхронизации файлов, у ownCloud есть приложение для Android и iPhone. К сожалению, оно пока не умеет синхронизировать календарь и контакты, потому приходится использовать сторонние синхронизаторы.
На сколько мне известно, для iPhone ничего изобретать не надо, там синхронизация с CardDAV/CalDAV есть из коробки. В случае с Android, необходимо установить приложения, которые будут синхронизировать наши контакты и календари. В Google Play есть несколько приложений подобного рода, мой выбор пал на CalDAV-Sync и CardDAV-Sync.
Для Tiny Tiny RSS существует официальный клиент для Android.

Заключение

В итоге, мы получили хорошую альтернативу Gmail’у, полностью принадлежащую нам. Теперь можно спать спокойно, не опасаясь злых дядь, которые любят читать нашу почту и закрывать любимые сервисы. Как бонус, я обнаружил, что мой Android смартфон теперь живет в 1.5-2 раза дольше от одного заряда. Лишь благодаря отключению синхронизации гугловских календарей и контактов.

Спасибо всем, кто осилил весь этот поток мыслей. Пожелания, предложения и конструктивная критика приветствуются.

Источник