book-open 1 test
Продуктовые кейсы

UI/UX кейс: Новый тип взаимодействия — параллельный чат


Вы читаете перевод статьи “Parallel Chat — UI/UX case study of a new chat interaction”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

В наше время люди чаще всего общаются через сообщения. Мы переписываемся в транспорте, в школе, на работе и дома, лежа на диване. Статистика показывает, что в день люди отправляют через Messenger и Whatsapp более 60 миллиардов сообщений.

Задача

Очевидно, что обмен сообщениями — важная часть нашей жизни. Именно поэтому я решил поучаствовать в челлендже от UpLabs по разработке взаимодействий в чатах .  Суть челленджа была в том, чтобы создать сценарий взаимодействия в чате (в приложении или на сайте) с учетом следующих аспектов:  

Определяем слабые места

Ребята, я сам из поколения Y и ни на секунду не выпускаю из рук телефон. И да, у телефонной зависимости есть свои недостатки, но зато я глубоко понимаю проблемы UX, которые незаметны большинству пользователей.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)? 🚀

Подписывайтесь на канал в Telegram | ВКонтакте, Instagram, Facebook

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

На какой вопрос я отвечаю? Может быть, я имею в виду, что нам нужно пять дней, чтобы посмотреть Париж, а потом еще три дня, чтобы отдохнуть и расслабиться? Или нужно бронировать отель на 5 дней, три из которых мы потратим на экскурсии, а еще 2 — на отдых?.. непонятно, на какой вопрос я ответил.

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

Итак, мы наметили два слабых места, которые намерены усилить в этом челлендже:

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

Исполнение: Дизайн

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

В процессе дизайна я стремился создать максимально привычный интерфейс — как у популярных мессенджеров. Я намеренно не разрабатывал принципиально новый интерфейс: в непривычном окружении людям сложнее работать и замечать мелкие детали.

Поэтому я скомбинировал разные элементы приложений iMessage, Messenger и Skype. У меня получился свой язык дизайна: знакомый, но немного другой.

Исполнение: Прототипирование

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

https://dribbble.com/shots/3745978-Parallel-Chat

Решение первой проблемы: Меня вдохновили стикеры в iMessage, которые можно перетаскивать. Я сделал сценарий, в котором можно перетащить сообщение в любое место диалога. То есть можно подтащить нужные ответы к вопросам.

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

Выводы

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

Продуктовые кейсы