Пользователь
0,0
рейтинг
22 июня 2015 в 17:57

Дизайн → Как я рисовал дизайн приложения для конкурса Mail.Ru Group из песочницы



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

Вместо вступления


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

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

С этими мыслями я приступил к работе.

Анализ проблемы


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

Постановка задачи


Казалось бы, и так все ясно, есть задача — надо найти решение. Да, но речь сейчас пойдет о задачах, которые перед собой ставлю я. А именно — необходимо составить некий план, по которому будет осуществляться работа.

Концепт

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

Отдельное приложение или новый пункт меню?

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

Дизайн

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

Но я пошел по другому пути и выбрал второй вариант. Этому есть множество объяснений:
  • Существующий стиль разрабатывала команда профессионалов и делали они это явно не «на глазок». Каждому дизайнерскому решению есть свое объяснение. По-крайней мере, я в это верю;
  • Существующий стиль полностью отвечает «веению моды»;
  • Он удобен и хорошо воспринимается;
  • Множество пользователей уже успели привыкнуть к нему, так зачем их мучать очередной сменой интерфейса?
  • Смена стиля главного почтового клиента, может и должна повлечь за собой редизайн и других приложений сервисов. А это опять же дополнительные затраты.

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

  1. Главное меню приложения
  2. Все вложения
  3. Подменю всех вложений
  4. Поиск, он же подбор вложений
  5. Календарь в подборе
  6. Изменение элементов подбора
  7. Список писем
  8. Подменю списка писем

Макеты


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


Слева скриншот текущей версии приложения, справа мой макет

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

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

Второй момент, который я исправил, лично для меня более серьезный, — сдвинутый экран списка писем(чего угодно). Для того что-бы вернуться к нему у нас есть совсем маленькое пространство в виде узкой полосы, хотя при этом, пункты меню нам позволяют сделать его шире, что я и сделал.

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


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

Весь список разделяется на строки, по типу файлов. В каждой строке у нас есть следующие элементы:
  • Иконка — является визуальным индикатором-подсказкой типа файла(ов);
  • Основной заголовок — сообщает имя файла, его расширение. Либо сообщает количество файлов одного типа из одного письма;
  • Подзаголовок — тема письма, в котором находится файл;
  • Дата — дата получения (отправки) письма с вложением;
  • Аватар и имя — отправителя либо адресата;
  • Флажок — указывает на принадлежность файла к письму, которое было отмечено вами как важное.

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

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

Акцентирую внимание на 5 строке. Из длинного названия файла — вырезаем только середину, для того что бы всегда видеть его расширение. Ведь к одному типу файлов, допустим «Аудио», можно отнести много форматов: mp3, wav и т.д.

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


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


Экран, который пользователь увидит нажав на поле поиска, в основном разделе «Всех вложений». Остановимся на нем и разберемся в представленном функционале

Пользователь может осуществить стандартный текстовый поиск и расширенный вариант поиска. Либо сделать выборку по заданным параметрам. Все параметры являются необязательными, но именно их использование поможет найти «забытое» вложение.

Давайте рассмотрим, что произойдет когда человек нажимает на поле выбора даты:



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

Так же ему (естественно плавно и красиво) развернется календарь выбора даты. Стандартная, удобная прокрутка календаря(вправо-влево), при клике на выбранную дату календарь сворачивается, выбранное значение подставляется в поле.


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

На данном этапе работа с вложениями окончена. И самое время заняться решением второй части поставленной задачи, а именно — полезные письма без вложений.


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

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


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

Тестирование


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



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

Вместо завершения


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

Завершу статью своим маленьким девизом. Главное — любить то, чем занимаешься, ведь нельзя делать хорошо работу, которая тебе не нравится.

Спасибо, за внимание.
@nikita-design
карма
11,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (20)

  • 0
    Спасибо за работу, толково описано! Пришлите свой профиль на Dribbble — дадим инвайт, чтобы можно было загрузить ее по всем правилам :)
  • 0
    О, всегда хотел задать один вопрос дизайнеру мобильных интерфейсов:
    — Вот если отбросить все гайдлайны, правила и прочие рекомендации — как вы считаете, удобно ли на смартфонах располагать элементы управления в левом верхнем углу? И не только в левом, а вообще сверху. Интересует лично ваше дизайнерское мнение.
    • 0
      Этот вопрос надо задавать дизайнерам гугла, потому что AtcionBarSherlock, как панацея. А остальные должны уже подстраиваться.
      • 0
        «ActionBarSherlock» — спасибо, посмеялся :)
  • +2
    Красиво. А вообще самое что бесит в большинстве дизайнов для сматфонов — активные элементы близко к боковым краям. Если телефон в чехле (в стиле flip-case), то нажать очень проблематично.
    • +1
      Ща ещё в моду войдут экраны с закруглениями.
  • 0
    Хорошо, а вот если убрать полоски между письмами и сделать фон белым или не?
    • 0
      Теряется структурированность, становится не такой явной, и становится сложнее и дольше ориентироваться, где кончается одно и начинается другое.
      • 0
        Критично?
        • 0
          Вам нужно получить информацию быстро и ненапрягая лишних нейронов. Критично.
  • +1
    Шрифты на белом фоне, ярче #666 — это, конечно стильно, модно, молодежно. Но дико бесит отсутствие вменяемого контраста, когда приходится вчитываться в бледные надписи и, не да бог, объемные тексты.
  • +1
    В главном меню убрали счетчики непрочитанных писем напротив названия папки и над аватаром аккаунта или просто не изобразили?
    Если первое, то очень плохо.

    Иконка спама в виде раскрытой ладони? Экзотично.

    И не рассмотрели список писем с выключенными аватарами отправителя. Хотя, возможно, там нечего менять.
  • +1
    Предложения по функциональности:

    1) Возможность открывать и читать письма, когда в списке некоторые отмечены (например для удаления). Отметки должны сохраняться после возвращения в список писем. Сейчас после того как отметил хотя бы одно письмо, невозможно ничего прочитать, пока не снимешь все отметки.

    2) Возможность сменить фон под главным меню. Я пользуюьс myMail, горы как-то уже надоели. Было бы круто иметь возможность поставить просто заливку цветом и не тратить ресурсы на обработку и хранение в памяти картинки.
    • +1
      Отвечу сразу на два Ваших комментария.
      Вопросы в первом сообщении, никак не пересекаются с поставленной организатором задачей, которую я решал. Касательно тех изменений, что я сделал в главном меню — я описал словами, все остальное остается работать так, как это задумано в текущей версии приложения.
      По поводу Ваших предложений из второго комментария, — я думаю, следует их направить в Mail.ru Group, потому-что этого, опять же, не было в поставленной задаче.
      • +1
        Да, предложения отдельным комментарием чтоб не путать с вопросами по вашей работе. Надо было еще написать, что это обращение к сотрудникам mail.ru. Простите, нагло использовал ваш пост.
  • +1
    Пункт меню «выйти» находится в горячей зоне с ненулевым шансом на случайный клик. Возможно даже придется спрашивать юзера: «А действительно ли ты хочешь выйти?», тем самым как бы не доверяя его действиям.

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

    Но если уж так хочется, то кнопку выхода легко можно расположить в холодных зонах меню или выпадайкой рядом с юзернеймом.
    • +2
      Спасибо, за внимание к моей работе. Пункт меню «выйти» остался практически на месте, относительно текущего месторасположения. Поэтому все же адресуйте ваше замечание в Mail.ru Group. Я думаю у них должна быть метрика, которая позволит ответить на ваш вопрос, действительно ли пользователи часто выходят из ящика случайным образом.

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.