[Из песочницы] Как я рисовал дизайн приложения для конкурса Mail.Ru Group
В данной статье я постараюсь рассмотреть все аспекты разработки дизайна мобильного предложения, с которыми мне пришлось столкнуться. Вместе со мной вы пройдете весь путь — от принятия решения участия в конкурсе до написания этой публикации.
Вместо вступления
Вот уже несколько лет я регулярно читаю Хабр, постоянно нахожу здесь полезную и интересную информацию. В основном это выходные дни, когда можно не спеша и вдумчиво почитать дайджест интересных материалов.
В один из таких дней я наткнулся на заметку «Конкурс для дизайнеров от Почты Mail.Ru». Обычно я не принимаю участия в подобных конкурсах, но здесь совсем другая история. Задание мне показалось нестандартным и от того очень интересным. Меня это зацепило с профессиональной точки зрения. Смогу ли я решить поставленную задачу или на худой конец разработать и предложить концепты, которые получат применение в готовом приложении?
С этими мыслями я преступил к работе.
Анализ проблемы
Я глубоко убежден, что прежде чем приступать к решению любой проблемы, необходимо ее подробное изучение. Поэтому первым делом я установил на телефон множество различных почтовых клиентов и занялся их анализом. Как оказалось, некоторые почтовые сервисы предлагают решение существующей проблемы, в той или иной степени. Но ни один из них не может похвастаться удобством, простотой и функциональностью. Да и в полной мере ни один сервис не решает этой проблемы.
Постановка задачи
Казалось бы, и так все ясно, есть задача — надо найти решение. Да, но речь сейчас пойдет о задачах, которые перед собой ставлю я. А именно — необходимо составить некий план, по которому будет осуществляться работа.Концепт
Разработка концепта работы приложения. Это, пожалуй, самый сложный и самый долгий этап. Здесь я должен учесть и продумать буквально все моменты и нюансы. Данная работа производится исключительно в голове и на листке бумаги. Подробнее о том, что же такого я придумал, узнаете далее в процессе чтения статьи.Отдельное приложение или новый пункт меню?
Это один из самых важных, но в то же время быстрых вопросов. Я однозначно определил, что это должен быть дополнительный пункт меню в главном приложении почты. Так как суть поставленной задачи — это сделать удобный сервис по работе с вложениями и другими важными письмами, то зачем заставлять человека ставить еще одно приложение? Помимо этого, в минусы можем отнести, что для рекламы и информирования пользователей о новом приложении потребуется дополнительный бюджет и время. В моем случае пользователь после обновления получает дополнительный удобный сервис, с которым сразу же может начать работу.Дизайн
Рисовать новый или использовать готовый стиль? Как ни странно (лично для меня), но многие дизайны выбирают первое. Я это могу объяснить лишь тем, что они хотят показать свои профессиональные навыки и т.п. Хотя, может дело в дополнительных баллах, которые пообещали организаторы.
Но я пошел по другому пути и выбрал второй вариант. Этому есть множество объяснений:
- Существующий стиль разрабатывала команда профессионалов и делали они это явно не «на глазок». Каждому дизайнерскому решению есть свое объяснение. По-крайней мере, я в это верю;
- Существующий стиль полностью отвечает «веению моды»;
- Он удобен и хорошо воспринимается;
- Множество пользователей уже успели привыкнуть к нему, так зачем их мучать очередной сменой интерфейса?
- Смена стиля главного почтового клиента, может и должна повлечь за собой редизайн и других приложений сервисов. А это опять же дополнительные затраты.
Далее надо составить список макетов, который будет включать все новые экраны, а так же те, которые подвергнутся изменениями.
- Главное меню приложения
- Все вложения
- Подменю всех вложений
- Поиск, он же подбор вложений
- Календарь в подборе
- Изменение элементов подбора
- Список писем
- Подменю списка писем
Макеты
Вот мы и подошли к самой интересной части статьи, в которой мы будем разбирать, что же я там нарисовал. Для разогрева начнем с первого макета, главного меню приложения.
Слева скриншот текущей версии приложения, справа мой макет
По-моему личному мнению, меню — это единственное, что бы я изменил в существующем приложении, вне той задачи которая была поставлена, кроме добавления нового пункта, разумеется. Видимо это уже профессиональная деформация.
Так как приложение предусматривает возможность использования нескольких почтовых сервисов в рамках одного приложения, я посчитал необходимым оставить над меню не просто маленькую строчку, а создать небольшой информативный блок. Зачастую люди используют несколько аккаунтов: для работы, личные, регистрационные, старые, новые и т.д. И теперь им нет необходимости вглядываться в маленькую полоску с адресом почты, теперь практически моментально можно определить активную почту, не только по аватару, но полю имя/фамилия.
Второй момент, который я исправил, лично для меня более серьезный, — сдвинутый экран списка писем (чего угодно). Для того что-бы вернуться к нему у нас есть совсем маленькое пространство в виде узкой полосы, хотя при этом, пункты меню нам позволяют сделать его шире, что я и сделал.
Так же мной были убраны некоторые пункты меню, которые я считаю мало популярными, и к которым есть доступ с экрана списка писем. Если у компании есть аналитика, использования этих разделов из главного меню, и она говорит об обратном — естественно без всякого труда эти пункты можно вернуть в меню.
Вот главный раздел, который призван решить часть проблемы, связанной именно с вложениями. Сюда мы попадаем из главного меню. Здесь мы разберем подробно буквально каждую строчку «что, почему, зачем и как»
Весь список разделяется на строки, по типу файлов. В каждой строке у нас есть следующие элементы:
- Иконка — является визуальным индикатором-подсказкой типа файла (ов);
- Основной заголовок — сообщает имя файла, его расширение. Либо сообщает количество файлов одного типа из одного письма;
- Подзаголовок — тема письма, в котором находится файл;
- Дата — дата получения (отправки) письма с вложением;
- Аватар и имя — отправителя либо адресата;
- Флажок — указывает на принадлежность файла к письму, которое было отмечено вами как важное.
Все эти элементы были размещены мной в соответствии с единым стилем приложения, в порядке их приоритетности. Так, на первом месте стоит имя файла с расширением. Далее, если человек не помнит названия файла (о поиске чуть позже), он скорее всего помнит либо название переписки, либо же с кем она велась. Маленький аватар был добавлен с той целью что-бы упростить поиск по автору, и так же является неким маячком, который избавляет от необходимости вчитываться в имена, в каждой строке списка. Флажок так же даст яркий сигнал.
Далее разберем ситуацию: в вашем почтовом ящике есть письмо, в котором прикреплено 50 фотографий. Отображать каждую фотографию в общем списке раздела — это маленький ад неудобно и нелогично. Поэтому я предложил решение, которое вы можете наблюдать в третьей строке.
Акцентирую внимание на 5 строке. Из длинного названия файла — вырезаем только середину, для того что бы всегда видеть его расширение. Ведь к одному типу файлов, допустим «Аудио», можно отнести много форматов: mp3, wav и т.д.
Дополнительное меню каждого элемента, вызываемое «смахиванием влево» содержит стандартный набор функций, за одной только особенностью. Прежде чем пользователь получит ссылку на файл, для того что бы поделиться, — ему предложат сохранить файл в облако.
На данном экране, пользователь получает уже привычный функционал выбора подкатегории
Экран, который пользователь увидит нажав на поле поиска, в основном разделе «Всех вложений». Остановимся на нем и разберемся в представленном функционале
Пользователь может осуществить стандартный текстовый поиск и расширенный вариант поиска. Либо сделать выборку по заданным параметрам. Все параметры являются необязательными, но именно их использование поможет найти «забытое» вложение.
Давайте рассмотрим, что произойдет когда человек нажимает на поле выбора даты:
Будет подсвечено поле, в котором будет располагаться подсказка, что ему необходимо выбрать дату не раньше которой было получено письмо с искомым вложением, а так же он увидит и второе поле, для которого можно выбрать вторую дату, не позже которой было получено письмо. Проще говоря пользователь выбирает период, в который было получено письмо, если он не помнит точной даты.
Так же ему (естественно плавно и красиво) развернется календарь выбора даты. Стандартная, удобная прокрутка календаря (вправо-влево), при клике на выбранную дату календарь сворачивается, выбранное значение подставляется в поле.
На данном экране мы можем видеть выбранные значения, типа файла, даты и отмеченный пункт с флажком. Обратите внимание, иконка второй даты — неактивна, в противном случае она так же становится цветной
На данном этапе работа с вложениями окончена. И самое время заняться решением второй части поставленной задачи, а именно — полезные письма без вложений.
Вряд ли на данном макете вы увидите какое-то революционное решение, по систематизации полезных писем. Но именно данное решение на мой взгляд является самым рациональным, без глобального изменения интерфейса почтового клиента
Вкратце, это маленькие яркие иконки, которые должны дать интуитивно понять пользователю с каким полезным содержанием письмо. К сожалению, у меня нету статистики, аналитики, по типам полезных писем, которые получают пользователи сервиса. Но акцентирую внимание, на том, что следует очень внимательно отнестись к созданию этих иконок. Очень важно что бы они были, именно, интуитивно понятны рядовому пользователю. Так же следует каждую иконку выделить, своим уникальным цветом, в противном случае весь эффект будет потерян, а элемент будет просто захламлять список писем.
Так как, таких типов полезных писем может быть много, нельзя размещать их в основном экране, — это скрадет слишком много полезного рабочего пространства. Либо их попросту нельзя будет вывести всем списком. Поэтому самым логичным решением в данной ситуации я посчитал, — добавить новые разделы туда, где их больше всего ждут
Тестирование
Не могу не затронуть один очень важный момент. При разработке дизайна мобильных приложений очень важно тестировать не только конечный продукт (приложение), но и дизайн. Дело нескольких минут, просто загружаете макеты в устройство и разворачиваете на весь экран.
Дело в том, что дизайн, предназначенный для мобильных устройств, совершенно по другому воспринимается на десктоп-экране. Какой бы красивый мокап вы не подставили (фото выше — мое), вы никогда не поймете, как он будет выглядеть в рабочем приложении. Ведь только на настоящем смартфоне вы сможете по-настоящему оценить размер элементов, расстояние между ними и удобство в целом.
Вместо завершения
Надеюсь, у меня получилось провести вас через весь процесс создания дизайна, донести все мысли и идеи.
Завершу статью своим маленьким девизом. Главное — любить то, чем занимаешься, ведь нельзя делать хорошо работу, которая тебе не нравится.
Спасибо, за внимание.
