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

Nancy Pong
Sep 8, 2018 · 4 min read

Предыдущий кейс

(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку можно найти в коллекции «Продуктовые кейсы»)


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

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

Задача

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

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

Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.


Ищите системное погружение в тему? Загляните в блог для дизайнеров.


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

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

Thank you for reading! If you found this article useful let me know and I’ll write more in the future :)

Спасибо, что прочитали! Если статья показалась вам полезной, дайте мне знать, и я буду писать еще :)

Подписывайтесь на меня в Dribbble или Twitter, чтобы получать уведомления о новых статьях.


Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)

А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.

Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore

Продуктовый дизайн

Для тех, кто любит красивые и полезные it-продукты, а также ищет способы их создания интересными и максимально эффективными способами

Translated from original by Nancy Pong.

    Nancy Pong

    Written by

    Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

    Продуктовый дизайн

    Для тех, кто любит красивые и полезные it-продукты, а также ищет способы их создания интересными и максимально эффективными способами

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade