История создания интерфейса                                 проблемы, решения, интересные особенности                     ...
Mail.Ru перезапускает один из продуктов – Календарь.                     Это дополнение к Почте, которое долгое время рабо...
Он не похож на другие сервисы Mail.Ru. Здесь мы пробуем                     другой визуальный стиль и новые подходы к взаи...
Интерфейс прошел три этапа развития, в ходе которых мы                   опробовали разные подходы к интерфейсу. Видение п...
Первый прототип был собран на основе текущих паттернов                   Почты. Это помогло быстро получить понимание пред...
На втором этапе мы решили                             исследовать пространство                             решений и прове...
Третий вариант интерфейса стал реалистичным.                   Пользовательское исследование концепций показало, что мы   ...
Одна из наших целей – совместить события и задачи в одном                   потоке. Ведь эти вещи сложно отделить друг от ...
Частично эта задача была решена на этапе проектирования,                   что-то дорабатывалось уже в процессе дизайна и ...
Вкратце процесс можно описать так:понедельник, 4 марта 13 г.
Вкратце процесс можно описать так:               •      Проектирование и поиск новых идей, попытка взглянуть на календарь ...
Вкратце процесс можно описать так:               •      Проектирование и поиск новых идей, попытка взглянуть на календарь ...
Вкратце процесс можно описать так:               •      Проектирование и поиск новых идей, попытка взглянуть на календарь ...
Вкратце процесс можно описать так:               •      Проектирование и поиск новых идей, попытка взглянуть на календарь ...
Вкратце процесс можно описать так:               •      Проектирование и поиск новых идей, попытка взглянуть на календарь ...
Вкратце процесс можно описать так:               •      Проектирование и поиск новых идей, попытка взглянуть на календарь ...
На кого ориентирован календарь               •      По результатам исследования мы составили примерные портреты трех      ...
Проектировщик как консультант,                                  а не этап конвейера               •      Сначала прототип ...
Ключевые элементы интерфейса                             •   Неделя, месяц                             •   Нижний календар...
А теперь все по порядкупонедельник, 4 марта 13 г.
Неделя                             Основной интерфейспонедельник, 4 марта 13 г.
понедельник, 4 марта 13 г.
Неделя                                         Основной интерфейс                             •   Настройка видапонедельни...
понедельник, 4 марта 13 г.
понедельник, 4 марта 13 г.
понедельник, 4 марта 13 г.
Неделя                                         Основной интерфейс                             •   Настройка вида          ...
Неделя                                  Основной интерфейс                •      Настройка вида                •      Разн...
Неделя                                  Основной интерфейс                •      Настройка вида                •      Разн...
Месяцпонедельник, 4 марта 13 г.
Месяц                             •   Краткое отображение всех событийпонедельник, 4 марта 13 г.
Месяц                             •   Краткое отображение всех событий                             •   Просмотр всех событ...
Месяц                             •   Краткое отображение всех событий                             •   Просмотр всех событ...
понедельник, 4 марта 13 г.
Нижний календарь                             •   Прокрутка                             •   Хит-меп                        ...
Редактирование календарейпонедельник, 4 марта 13 г.
Редактирование календарей                                    Вариант №1                                     Прототиппонеде...
Редактирование календарей                               Вариант №1понедельник, 4 марта 13 г.
Редактирование календарей                                    Вариант №2понедельник, 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 г.
Всем спасибо!                                     Дизайнер: АЛЕКСЕЙ КАНДАУРОВ                             a.kandaurov@corp...
Upcoming SlideShare
Loading in …5
×

Calendar.Mail.Ru

1,868 views

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,868
On SlideShare
0
From Embeds
0
Number of Embeds
569
Actions
Shares
0
Downloads
11
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Calendar.Mail.Ru

  1. 1. История создания интерфейса проблемы, решения, интересные особенности Алексей Кандауров Юрий Ветров Ведущий дизайнер Руководитель отдела проектирования и дизайна интерфейсовпонедельник, 4 марта 13 г.
  2. 2. Mail.Ru перезапускает один из продуктов – Календарь. Это дополнение к Почте, которое долгое время работало в устаревшем виде.понедельник, 4 марта 13 г.
  3. 3. Он не похож на другие сервисы Mail.Ru. Здесь мы пробуем другой визуальный стиль и новые подходы к взаимодействию пользователя с интерфейсом.понедельник, 4 марта 13 г.
  4. 4. Интерфейс прошел три этапа развития, в ходе которых мы опробовали разные подходы к интерфейсу. Видение продукта и понимание задачи заметно поменялись в ходе этой работы.понедельник, 4 марта 13 г.
  5. 5. Первый прототип был собран на основе текущих паттернов Почты. Это помогло быстро получить понимание предметной области и обкатать требования.понедельник, 4 марта 13 г.
  6. 6. На втором этапе мы решили исследовать пространство решений и проверили самые сумасшедшие идеи. Родилась интересная концепция «Календарь как повестка дня».понедельник, 4 марта 13 г.
  7. 7. Третий вариант интерфейса стал реалистичным. Пользовательское исследование концепций показало, что мы в корне не правы – пользователи планируют свои дела совсем не так как мы думали.понедельник, 4 марта 13 г.
  8. 8. Одна из наших целей – совместить события и задачи в одном потоке. Ведь эти вещи сложно отделить друг от друга в ходе рабочего дня. Но тема достаточно сложная и представить ее в интерфейсе непросто.понедельник, 4 марта 13 г.
  9. 9. Частично эта задача была решена на этапе проектирования, что-то дорабатывалось уже в процессе дизайна и даже сейчас, после запуска, мы продолжаем улучшать интерфейс.понедельник, 4 марта 13 г.
  10. 10. Вкратце процесс можно описать так:понедельник, 4 марта 13 г.
  11. 11. Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначепонедельник, 4 марта 13 г.
  12. 12. Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследованиепонедельник, 4 марта 13 г.
  13. 13. Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототиповпонедельник, 4 марта 13 г.
  14. 14. Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототипов • На основе готовых прототипов, дизайн-концепта и комментариев утверждающей стороны начинаем детальную проработку каждого элемента и дизайн макетов всех экранов.понедельник, 4 марта 13 г.
  15. 15. Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототипов • На основе готовых прототипов, дизайн-концепта и комментариев утверждающей стороны начинаем детальную проработку каждого элемента и дизайн макетов всех экранов • Принимаем и утверждаем решения в пользу эффектности, удобного оформления и проработки главных особенностей календаряпонедельник, 4 марта 13 г.
  16. 16. Вкратце процесс можно описать так: • Проектирование и поиск новых идей, попытка взглянуть на календарь иначе • Пользовательское исследование • Изменение концепции и доработка прототипов • На основе готовых прототипов, дизайн-концепта и комментариев утверждающей стороны начинаем детальную проработку каждого элемента и дизайн макетов всех экранов • Принимаем и утверждаем решения в пользу эффектности, удобного оформления и проработки главных особенностей календаря • По ходу разработки сразу в дизайне дорабатываем незаконченные прототипыпонедельник, 4 марта 13 г.
  17. 17. На кого ориентирован календарь • По результатам исследования мы составили примерные портреты трех ключевых персонажей и описали сценарии работы с календарем. • Для каждого из них была описана customer journey map, показывающая жизненный цикл использования продукта. С помощью нее мы поняли, где пользователю нужна дополнительная помощь или мотивация, как он будет возвращаться к календарю и с помощью каких каналов.понедельник, 4 марта 13 г.
  18. 18. Проектировщик как консультант, а не этап конвейера • Сначала прототип прорабатывается проектировщиком, мы проверяем разные направления развития продукта и его интерфейса. • После того как концепция утверждена, начинается работа над дизайн-концептом. А проектировщик дорабатывает вспомогательные экраны и дополнительные состояния основных. • Как только основные экраны определены — проектировщик переходит в режим консультанта. Что-то делается в виде скетчей, что-то обсуждается на словах, что-то проверяется уже в макетах. Нет необходимости отражать в прототипах каждый чих — это затягивает процесс и создает груду ненужной документации.понедельник, 4 марта 13 г.
  19. 19. Ключевые элементы интерфейса • Неделя, месяц • Нижний календарь • Быстрое редактирование календарей • Простое редактирвание события • Просмотр события • Быстрые «дела» и назначение дел на даты • Темыпонедельник, 4 марта 13 г.
  20. 20. А теперь все по порядкупонедельник, 4 марта 13 г.
  21. 21. Неделя Основной интерфейспонедельник, 4 марта 13 г.
  22. 22. понедельник, 4 марта 13 г.
  23. 23. Неделя Основной интерфейс • Настройка видапонедельник, 4 марта 13 г.
  24. 24. понедельник, 4 марта 13 г.
  25. 25. понедельник, 4 марта 13 г.
  26. 26. понедельник, 4 марта 13 г.
  27. 27. Неделя Основной интерфейс • Настройка вида • Разные варианты просмотра событияпонедельник, 4 марта 13 г.
  28. 28. Неделя Основной интерфейс • Настройка вида • Разные варианты просмотра событияпонедельник, 4 марта 13 г.
  29. 29. Неделя Основной интерфейс • Настройка вида • Разные варианты просмотра событияпонедельник, 4 марта 13 г.
  30. 30. Месяцпонедельник, 4 марта 13 г.
  31. 31. Месяц • Краткое отображение всех событийпонедельник, 4 марта 13 г.
  32. 32. Месяц • Краткое отображение всех событий • Просмотр всех событий на деньпонедельник, 4 марта 13 г.
  33. 33. Месяц • Краткое отображение всех событий • Просмотр всех событий на день • Драг-н-дроп.понедельник, 4 марта 13 г.
  34. 34. понедельник, 4 марта 13 г.
  35. 35. Нижний календарь • Прокрутка • Хит-меп • Выделение текущего периодапонедельник, 4 марта 13 г.
  36. 36. Редактирование календарейпонедельник, 4 марта 13 г.
  37. 37. Редактирование календарей Вариант №1 Прототиппонедельник, 4 марта 13 г.
  38. 38. Редактирование календарей Вариант №1понедельник, 4 марта 13 г.
  39. 39. Редактирование календарей Вариант №2понедельник, 4 марта 13 г.
  40. 40. понедельник, 4 марта 13 г.
  41. 41. Редактирование календарей Финальный вариантпонедельник, 4 марта 13 г.
  42. 42. • Быстрый выбор цвета, ввод названияпонедельник, 4 марта 13 г.
  43. 43. • Быстрый выбор цвета, ввод названия • Быстрое редактированиепонедельник, 4 марта 13 г.
  44. 44. • Добавление участников с разными правами • Саджесты из почты • Быстрое редактирование.понедельник, 4 марта 13 г.
  45. 45. • Настройка часового пояса каждого календаря, для более удобной работы с коллегами из других регионовпонедельник, 4 марта 13 г.
  46. 46. Редактирование событийпонедельник, 4 марта 13 г.
  47. 47. Как это выглядит в календаре Googleпонедельник, 4 марта 13 г.
  48. 48. понедельник, 4 марта 13 г.
  49. 49. Как это сделали мыпонедельник, 4 марта 13 г.
  50. 50. Первые наброскипонедельник, 4 марта 13 г.
  51. 51. Повторение событий, поиск решенияпонедельник, 4 марта 13 г.
  52. 52. Решение оказалось простым, но основывалось на компромиссахпонедельник, 4 марта 13 г.
  53. 53. Редактирование событийпонедельник, 4 марта 13 г.
  54. 54. Быстрое редактирование событий • Быстрое редактирование с выбором цвета • Расширенное редактирование в один клик • Вид, которым вы пользуетесь чаще запоминаетсяпонедельник, 4 марта 13 г.
  55. 55. Дела • Быстрые дела через энтерпонедельник, 4 марта 13 г.
  56. 56. Дела • Быстрые дела через энтер • Назначение даты дела, появление дела в событиях на день в неделе и месяце.понедельник, 4 марта 13 г.
  57. 57. Темыпонедельник, 4 марта 13 г.
  58. 58. Темы • Фотопонедельник, 4 марта 13 г.
  59. 59. Темы • Фото • Текстурыпонедельник, 4 марта 13 г.
  60. 60. Темы • Фото • Текстуры • Иллюстрациипонедельник, 4 марта 13 г.
  61. 61. Темы • Фото • Текстуры • Иллюстрации • Простые цвета и нейтральные тонированные текстуры.понедельник, 4 марта 13 г.
  62. 62. Темы • Фото • Текстуры • Иллюстрации • Простые цвета и нейтральные тонированные текстуры. • Быстрое переключениепонедельник, 4 марта 13 г.
  63. 63. Ну вот и всё Вопросы?понедельник, 4 марта 13 г.
  64. 64. Всем спасибо! Дизайнер: АЛЕКСЕЙ КАНДАУРОВ a.kandaurov@corp.mail.ru, alkandaurov@gmail.com Проектировщик: ЮРИЙ ВЕТРОВ y.vetrov@corp.mail.ru, jvetrau@gmail.comпонедельник, 4 марта 13 г.

×