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

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

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

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

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

A-book — это концепция сервиса для чтения книг и прослушивания аудиокниг

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

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

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

Главная фича A-book — переключение между чтением и прослушиванием книги в один клик

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

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

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

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

Аналоговая перемотка аудиокниги

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

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

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

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

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

Текстовые заметки в аудиокнигах

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

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

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

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

Каждому жанру присвоен свой цвет

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

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

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

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

Толщина карточки книги передаёт размер произведения

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

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

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

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

Пара коллтуэкшнов

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

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

7979
72 комментария

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

10
Ответить
42
Ответить

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

7
Ответить

а круче всего слушать аудиокниги, пока занят делами. Если книга збс, покупай ее, в старости или в очередной отпуск сядешь и проведешь с ней пару деньков. Физических книг в наше время не прочитаешь столько, сколько можно аудио прослушать. К тому же запаришься покупать их. Большая часть - говно редкостное. Где-то перевод официальный корявый, а неофициальный можно найти только в электронном виде (пример, Атлант расправил плечи).

2
Ответить

Читать и ехать за рулем, за это прям сразу надо расстреливать на обочине

1
Ответить

Иногда это просто - неудобно. Поиска в бумаге нет и не будет. Пока это будет бумагой. Вес библиотеки. И так далее.
Кое кому вот вообще читать с планшета/fold'а идя по улице сложно и...ищутся решения как сделать чтобы не держать в руках этот планшет но при этом читать (AR-очки помогают)

Ответить

Когда пользователь слушает аудиоверсию и переключает её на чтение.

Не знаком с людьми, которые так делают. Такие существуют?

5
Ответить