A-book: переосмысление пользовательского опыта в приложении для чтения книг

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

Привет, я Виктор Рындин, СЕО агентства Wemakefab. Мы занимаемся разработкой онлайн-сервисов с упором на UX. Делаем так, чтобы было не только красиво, но и удобно.

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

При разработке этой концепции перед нами стояла задача сделать UX-дизайн таким, чтобы аудио и текстовая версии книги стали одной сущностью, и пользователь мог легко переключаться между ними. Так приложением станет удобнее пользоваться в любой ситуации — даже за рулём автомобиля или на пробежке.

Концепцию придумал наш арт-директор, Сергей Гуров, один из самых известных дизайнеров России.

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

Переключение форматов в один клик удобно, если пользователь читает и слушает одну книгу, и ему приходится часто переключаться между разными версиями. Также эта функция помогает в случаях, когда пользователь слушает книгу, в которой важно обращать внимание на иллюстрации: картинки, графики, схемы или таблицы.

Как реализовано в других «читалках». Аудио и текстовая версии книги — это два разных файла, которые никак не синхронизированы. Функции переключения между форматами нет. Чтобы переключиться с аудиоверсии на текстовую, нужно выйти из одного формата и перейти в другой. При этом текст будет на моменте, где вы закончили чтение в прошлый раз. А не на моменте, где остановилась озвучка.

При прослушивании книги — на экране также отображается лента с дублирующим текстом. Свайпая эту ленту вверх или вниз, пользователь сможет перемотать и аудиокнигу. Свайпать можно по всей площади текста. Это позволяет легче и точнее управлять перемоткой.

Аналоговая перемотка особенно удобна, если пользователь хочет перемотать на какой-то момент, но не может полностью переключить внимание на телефон. Например, когда он едет за рулём автомобиля или слушает книгу во время пробежки. Также аналоговая перемотка удобна, если нужно перемотать на определённую фразу или даже слово.

Как реализовано в других «читалках»:
— Нужно кликать или свайпать по линии произведения. Это неудобно из-за того, что линия очень узкая и площадь взаимодействия получается маленькой.

— Есть кнопки перемотки на 15 секунд. Иногда это 30 секунд или 10. Этот способ неудобен из-за неточности — и 10, и 15, и 30 секунд может быть как много, так и мало.

При прослушивании аудиокниги на экране дублируется текст. По кнопке с плюсиком, выделяется озвучиваемый фрагмент произведения. Его можно поправить вручную: например, сделать меньше или сдвинуть на пару предложений. По кнопке с минусом выделенный фрагмент произведения сохраняется в заметки в виде текста.

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

Как реализовано в других «читалках». В аудиоверсиях нет возможности делать заметки. Чтобы всё-таки её сделать, пользователю нужно открыть текстовую версию книги, найти нужную цитату, выделить её и только тогда сохранить в заметки.

Например, Фантастике — оранжевый, Науке и технике — синий, Приключениям — зелёный. Так, листая коллекцию книг, можно сразу узнать не только название произведения и автора, но и жанр.

Эта фишка помогает читателю быстро ориентироваться в коллекции. Это важно в случаях, когда читатель в подборке книг ищет произведения определённого жанра. Если ему нужна Фантастика, он будет обращать внимание на произведения только оранжевого цвета.

Как реализовано в других «читалках». В подборке книг у произведений отображается только название и имя автора. Чтобы узнать жанр, нужно «проваливаться» в описание.

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

Эта фишка полезна в случаях, когда читателю, при выборе книги, важен её размер. Например, если ему нужно ехать в поезде сутки, и он планирует выбрать книгу на ± 100 страниц, чтобы успеть её прочитать. Скроля книжные подборки, читатель сможет быстро понять, стоит ли начинать читать книгу. Это упрощает выбор и экономит время пользователей.

Как реализовано в других «читалках». Как и в случае с жанрами, чтобы понять насколько длинные произведения в подборке, вам нужно «провалиться» в описание каждой книги.

Компаниям и их представителям. Если вам нужны уникальные дизайн-решения для бизнеса — обращайтесь, мы полны сил и готовы к интересным проектам. Бриф можно заполнить на сайте.

Дизайнерам и просто читателям. Напишите в комментариях, что думаете о концепции A-book; чем она вам понравилась или не понравилась; что бы в ней поменяли или улучшили. Кстати, если вы хотите работать над уникальными проектами — следите за нашими вакансиями на HH.