• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Calendar.Mail.Ru
 

Calendar.Mail.Ru

on

  • 1,442 views

 

Statistics

Views

Total Views
1,442
Views on SlideShare
957
Embed Views
485

Actions

Likes
5
Downloads
7
Comments
0

7 Embeds 485

http://www.jvetrau.com 448
http://feeds.feedburner.com 25
http://feedly.com 4
http://cloud.feedly.com 3
http://bazqux.com 2
http://inoreader.com 2
http://www.feedspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Calendar.Mail.Ru Calendar.Mail.Ru Presentation Transcript

    • История создания интерфейса проблемы, решения, интересные особенности Алексей Кандауров Юрий Ветров Ведущий дизайнер Руководитель отдела проектирования и дизайна интерфейсовпонедельник, 4 марта 13 г.
    • Mail.Ru перезапускает один из продуктов – Календарь. Это дополнение к Почте, которое долгое время работало в устаревшем виде.понедельник, 4 марта 13 г.
    • Он не похож на другие сервисы Mail.Ru. Здесь мы пробуем другой визуальный стиль и новые подходы к взаимодействию пользователя с интерфейсом.понедельник, 4 марта 13 г.
    • Интерфейс прошел три этапа развития, в ходе которых мы опробовали разные подходы к интерфейсу. Видение продукта и понимание задачи заметно поменялись в ходе этой работы.понедельник, 4 марта 13 г.
    • Первый прототип был собран на основе текущих паттернов Почты. Это помогло быстро получить понимание предметной области и обкатать требования.понедельник, 4 марта 13 г.
    • На втором этапе мы решили исследовать пространство решений и проверили самые сумасшедшие идеи. Родилась интересная концепция «Календарь как повестка дня».понедельник, 4 марта 13 г.
    • Третий вариант интерфейса стал реалистичным. Пользовательское исследование концепций показало, что мы в корне не правы – пользователи планируют свои дела совсем не так как мы думали.понедельник, 4 марта 13 г.
    • Одна из наших целей – совместить события и задачи в одном потоке. Ведь эти вещи сложно отделить друг от друга в ходе рабочего дня. Но тема достаточно сложная и представить ее в интерфейсе непросто.понедельник, 4 марта 13 г.
    • Частично эта задача была решена на этапе проектирования, что-то дорабатывалось уже в процессе дизайна и даже сейчас, после запуска, мы продолжаем улучшать интерфейс.понедельник, 4 марта 13 г.
    • Вкратце процесс можно описать так:понедельник, 4 марта 13 г.
    • Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначепонедельник, 4 марта 13 г.
    • Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследованиепонедельник, 4 марта 13 г.
    • Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототиповпонедельник, 4 марта 13 г.
    • Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототипов • На основе готовых прототипов, дизайн-концепта и комментариев утверждающей стороны начинаем детальную проработку каждого элемента и дизайн макетов всех экранов.понедельник, 4 марта 13 г.
    • Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототипов • На основе готовых прототипов, дизайн-концепта и комментариев утверждающей стороны начинаем детальную проработку каждого элемента и дизайн макетов всех экранов • Принимаем и утверждаем решения в пользу эффектности, удобного оформления и проработки главных особенностей календаряпонедельник, 4 марта 13 г.
    • Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототипов • На основе готовых прототипов, дизайн-концепта и комментариев утверждающей стороны начинаем детальную проработку каждого элемента и дизайн макетов всех экранов • Принимаем и утверждаем решения в пользу эффектности, удобного оформления и проработки главных особенностей календаря • По ходу разработки сразу в дизайне дорабатываем незаконченные прототипыпонедельник, 4 марта 13 г.
    • На кого ориентирован календарь • По результатам исследования мы составили примерные портреты трех ключевых персонажей и описали сценарии работы с календарем. • Для каждого из них была описана customer journey map, показывающая жизненный цикл использования продукта. С помощью нее мы поняли, где пользователю нужна дополнительная помощь или мотивация, как он будет возвращаться к календарю и с помощью каких каналов.понедельник, 4 марта 13 г.
    • Проектировщик как консультант, а не этап конвейера • Сначала прототип прорабатывается проектировщиком, мы проверяем разные направления развития продукта и его интерфейса. • После того как концепция утверждена, начинается работа над дизайн-концептом. А проектировщик дорабатывает вспомогательные экраны и дополнительные состояния основных. • Как только основные экраны определены — проектировщик переходит в режим консультанта. Что-то делается в виде скетчей, что-то обсуждается на словах, что-то проверяется уже в макетах. Нет необходимости отражать в прототипах каждый чих — это затягивает процесс и создает груду ненужной документации.понедельник, 4 марта 13 г.
    • Ключевые элементы интерфейса • Неделя, месяц • Нижний календарь • Быстрое редактирование календарей • Простое редактирвание события • Просмотр события • Быстрые «дела» и назначение дел на даты • Темыпонедельник, 4 марта 13 г.
    • А теперь все по порядкупонедельник, 4 марта 13 г.
    • Неделя Основной интерфейспонедельник, 4 марта 13 г.
    • понедельник, 4 марта 13 г.
    • Неделя Основной интерфейс • Настройка видапонедельник, 4 марта 13 г.
    • понедельник, 4 марта 13 г.
    • понедельник, 4 марта 13 г.
    • понедельник, 4 марта 13 г.
    • Неделя Основной интерфейс • Настройка вида • Разные варианты просмотра событияпонедельник, 4 марта 13 г.
    • Неделя Основной интерфейс • Настройка вида • Разные варианты просмотра событияпонедельник, 4 марта 13 г.
    • Неделя Основной интерфейс • Настройка вида • Разные варианты просмотра событияпонедельник, 4 марта 13 г.
    • Месяцпонедельник, 4 марта 13 г.
    • Месяц • Краткое отображение всех событийпонедельник, 4 марта 13 г.
    • Месяц • Краткое отображение всех событий • Просмотр всех событий на деньпонедельник, 4 марта 13 г.
    • Месяц • Краткое отображение всех событий • Просмотр всех событий на день • Драг-н-дроп.понедельник, 4 марта 13 г.
    • понедельник, 4 марта 13 г.
    • Нижний календарь • Прокрутка • Хит-меп • Выделение текущего периодапонедельник, 4 марта 13 г.
    • Редактирование календарейпонедельник, 4 марта 13 г.
    • Редактирование календарей Вариант №1 Прототиппонедельник, 4 марта 13 г.
    • Редактирование календарей Вариант №1понедельник, 4 марта 13 г.
    • Редактирование календарей Вариант №2понедельник, 4 марта 13 г.
    • понедельник, 4 марта 13 г.
    • Редактирование календарей Финальный вариантпонедельник, 4 марта 13 г.
    • • Быстрый выбор цвета, ввод названияпонедельник, 4 марта 13 г.
    • • Быстрый выбор цвета, ввод названия • Быстрое редактированиепонедельник, 4 марта 13 г.
    • • Добавление участников с разными правами • Саджесты из почты • Быстрое редактирование.понедельник, 4 марта 13 г.
    • • Настройка часового пояса каждого календаря, для более удобной работы с коллегами из других регионовпонедельник, 4 марта 13 г.
    • Редактирование событийпонедельник, 4 марта 13 г.
    • Как это выглядит в календаре Googleпонедельник, 4 марта 13 г.
    • понедельник, 4 марта 13 г.
    • Как это сделали мыпонедельник, 4 марта 13 г.
    • Первые наброскипонедельник, 4 марта 13 г.
    • Повторение событий, поиск решенияпонедельник, 4 марта 13 г.
    • Решение оказалось простым, но основывалось на компромиссахпонедельник, 4 марта 13 г.
    • Редактирование событийпонедельник, 4 марта 13 г.
    • Быстрое редактирование событий • Быстрое редактирование с выбором цвета • Расширенное редактирование в один клик • Вид, которым вы пользуетесь чаще запоминаетсяпонедельник, 4 марта 13 г.
    • Дела • Быстрые дела через энтерпонедельник, 4 марта 13 г.
    • Дела • Быстрые дела через энтер • Назначение даты дела, появление дела в событиях на день в неделе и месяце.понедельник, 4 марта 13 г.
    • Темыпонедельник, 4 марта 13 г.
    • Темы • Фотопонедельник, 4 марта 13 г.
    • Темы • Фото • Текстурыпонедельник, 4 марта 13 г.
    • Темы • Фото • Текстуры • Иллюстрациипонедельник, 4 марта 13 г.
    • Темы • Фото • Текстуры • Иллюстрации • Простые цвета и нейтральные тонированные текстуры.понедельник, 4 марта 13 г.
    • Темы • Фото • Текстуры • Иллюстрации • Простые цвета и нейтральные тонированные текстуры. • Быстрое переключениепонедельник, 4 марта 13 г.
    • Ну вот и всё Вопросы?понедельник, 4 марта 13 г.
    • Всем спасибо! Дизайнер: АЛЕКСЕЙ КАНДАУРОВ a.kandaurov@corp.mail.ru, alkandaurov@gmail.com Проектировщик: ЮРИЙ ВЕТРОВ y.vetrov@corp.mail.ru, jvetrau@gmail.comпонедельник, 4 марта 13 г.