Лучшие статьи и кейсы стартапов
Включить уведомления
Дадим сигнал, когда появится
что-то суперстоящее.
Спасибо, не надо
Вопросы Проекты Вакансии
Объединяем людей в проекты!
Рекомендуем
Продвинуть свой проект
Лучшие проекты за неделю
45
Битрикс24

Битрикс24

www.bitrix24.ru

15
GIFTD

GIFTD

giftd.tech

13
Aword

Aword

Приложение для изучения английских слов

12
Логомашина

Логомашина

logomachine.ru

12
Convead

Convead

convead.ru

11
Devicerra

Devicerra

devicerra.com

11
Eczo.bike

Eczo.bike

www.eczo.bike

11
Flowlu

Flowlu

flowlu.ru

10
Отследить-посылку

Отследить-посылку

отследить-посылку.рф

10
KEPLER LEADS

KEPLER LEADS

keplerleads.com

Показать следующие
Рейтинг проектов
Подписывайтесь на Спарк в Facebook

Разница — в деталях. Чего не хватает Mango Talker, чтобы стать Зеттапланом

788 0 В избранное Сохранено
Авторизуйтесь
Вход с паролем
Решили запустить блог на Спарке — и сразу пожечь напалмом. Наш маркетолог Стас Худяков написал о том, как мог выглядеть M.Talker, если бы его сделали точно по гайдам Зеттаплана.

Как-то листая Фейсбук, наткнулся на примечательный пост. Дима Калита, ныне менеджер по управлению и маркетингу программных продуктов, гордо сообщал, что его команда выкатила на продакшн M.Talker. Я бы порадовался за ребят, если бы не одно «но».

Вот такой скриншот показал Дима :

1.jpg

b_5718d5077493a.jpg

Мне сразу бросилось в глаза сходство с нашим таск-менеджером Зеттапланом. Отличия тоже есть, но их, скорее, можно отнести к недостаткам. Чтобы проверить себя, решил изучить интерфейс M.Talker. Конечно, я не профессионал в дизайне и могу быть в чем-то не прав. В этой статье поделюсь личным мнением и попробую исправить ошибки.

Вопрос функционала оставлю в стороне, потому что сравнивать Зеттаплан и M.Talker также бессмысленно, как, например,автомобиль и прицеп к нему. Зеттаплан — полноценная система управления задачами. M.Talker — приложение для звонков с компьютера, которое работает только с телефонией Mango Office. Задумка довольно неплохая, но реализация подкачала. Так как приложение не работает само по себе, запустить его не получилось. Выбора не было: пришлось позаимствовать скриншоты у Калиты.

Вот так выглядит Зеттаплан:

2.png

b_5718d5077493a.jpg

Почти как братья-близнецы. Предвижу вопрос: «Как быть с общемировыми тенденциями в интерфейсах и гайдлайнах?» Действительно, дизайн кочует из одного продукта в другой, меняясь несущественно и не всегда в лучшую сторону. В данном случае структура UI явно заимствована у Зеттаплана. Стилевые таблицы отличаются: видно, не до конца проработаны. Давайте это исправим. Двигаться будем слева направо, следуя логике боковой навигации.

b_5718d5077493a.jpg

Меню

Начнем с иконок — важнейших элементов дизайна.

b_5718d5077493a.jpg

  • Иконки притягивают внимание, по ним пользователи запоминают продукт. Они должны читаться с первого раза, не вводить в заблуждение и составлять единый набор. Не просто так команда Зеттаплана рисовала дизайн иконок полгода.

b_5718d5077493a.jpg

В M.Talker иконки двухцветные: в активном состоянии белые, в неактивном белый только контур. Почему бы не увеличить контраст между ними? Например, сделать активные иконки цветными, как в Зеттаплане. Тогда пользователю будет ясно, в каком разделе он находится: туда ли нажал, куда собирался.

b_5718d5077493a.jpg

3-4.png

b_5718d5077493a.jpg

Как будто на цвете специально экономили: оставили его только в секундной стрелке часов. Зато в виджете набора номера, наоборот, многоцветье: во время разговора иконка трубки становится зеленой, а контекстное меню пестрит ярко-красными кнопками — вырви глаз!

b_5718d5077493a.jpg

5.jpg

b_5718d5077493a.jpg

Идем дальше. Непонятно, почему иконка часов иллюстрирует историю коммуникаций, а иконка человека — контакты?

b_5718d5077493a.jpg

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

b_5718d5077493a.jpg

Список: контакты и сообщения

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

b_5718d5077493a.jpg

  • Чтобы визуально разделить контакты, дизайнеры используют разлиновку: тогда каждый контакт находится на своем месте. В M.Talker так не сделали. Это недоделка, за которую платит пользователь: ему приходится целиться мышкой, чтобы выбрать контакт. К тому же выглядит неопрятно.

b_5718d5077493a.jpg

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

6-7.png

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

b_5718d5077493a.jpg

  • Задача сообщений — информировать о событиях так, чтобы получатель сразу понял о чем речь. Одной строкой этого сделать не получится. Если следовать концепции «инбокс зеро» до конца, то входящие сообщения должны из меню «перетекать» в следующий по иерархии список.

b_5718d5077493a.jpg

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

b_5718d5077493a.jpg

8-9.png

b_5718d5077493a.jpg

b_5718d5077493a.jpg

Открытый элемент списка: карточка контакта

Наша последняя остановка — карточка контакта. Не сразу понял, что означают кнопки «10 000Р» и «Онлайн» в верхнем правом углу: они для меня или для контакта из открытой карточки? Думаю, многие согласятся, что неоднозначные для понимания кнопки нужно подписывать.

Спускаемся ниже: кнопка команды «Изменить» соседствует со значком мусорного ведра. Ребята явно забыли о принципе единообразия: или пишем слова, или используем значки. Кнопка «Удалить» была бы уместнее. Еще лучше, когда значки комбинируются с подписями, как в Зеттаплане.

b_5718d5077493a.jpg

10.jpg

b_5718d5077493a.jpg

11.png

b_5718d5077493a.jpg

Как выяснилось позже, M.Talker повторяет многие элементы дизайна Зеттаплана неспроста. Во-первых, руководитель проекта M.Talker Дима Калита некоторое время работал в «Мегаплане» и знаком с нашим подходом к разработке новых продуктов. Во-вторых, в первой версии поста, с которого началась эта история, он благодарил Диму Плотникова — дизайнера, который когда-то работал над Зеттапланом. Сообщение было отредактировано, и сейчас упомянут просто Дима. Я догадываюсь, с чем это связано.

b_5718d5077493a.jpg

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

-2
Добавить в избранное Сохранено
Авторизуйтесь
Вход с паролем
Комментариев еще не оставлено
Выбрать файл
Читайте далее
Загружаем…
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать