Your SlideShare is downloading. ×
Calendar.Mail.Ru
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Calendar.Mail.Ru

1,344
views

Published on


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

No Downloads
Views
Total Views
1,344
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
9
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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