A-book: переосмысление пользовательского опыта в приложении для чтения книг
В статье рассказываем о дизайн-концепции A-book: какие фишки обеспечивают новый пользовательский опыт, почему это удобно, и как эти функции реализованы в других приложениях для чтения книг.
Привет, я Виктор Рындин, СЕО агентства Wemakefab. Мы занимаемся разработкой онлайн-сервисов с упором на UX. Делаем так, чтобы было не только красиво, но и удобно.
В этом году мы начали развивать полноценный дизайн-юнит внутри агентства. Это позволяет нам брать больше интересных проектов, где нужно создавать уникальные дизайн-концепции и придумывать новый пользовательский опыт. И один из таких наших проектов — A-book.
A-book — это концепция сервиса для чтения книг и прослушивания аудиокниг
При разработке этой концепции перед нами стояла задача сделать UX-дизайн таким, чтобы аудио и текстовая версии книги стали одной сущностью, и пользователь мог легко переключаться между ними. Так приложением станет удобнее пользоваться в любой ситуации — даже за рулём автомобиля или на пробежке.
Концепцию придумал наш арт-директор, Сергей Гуров, один из самых известных дизайнеров России.
Главная фича A-book — переключение между чтением и прослушиванием книги в один клик
Аудио и текстовая версии книги синхронизированы между собой. Когда пользователь слушает аудиоверсию и переключает её на чтение, текст будет на том же месте, где закончилась озвучка.
Переключение форматов в один клик удобно, если пользователь читает и слушает одну книгу, и ему приходится часто переключаться между разными версиями. Также эта функция помогает в случаях, когда пользователь слушает книгу, в которой важно обращать внимание на иллюстрации: картинки, графики, схемы или таблицы.
Как реализовано в других «читалках». Аудио и текстовая версии книги — это два разных файла, которые никак не синхронизированы. Функции переключения между форматами нет. Чтобы переключиться с аудиоверсии на текстовую, нужно выйти из одного формата и перейти в другой. При этом текст будет на моменте, где вы закончили чтение в прошлый раз. А не на моменте, где остановилась озвучка.
Аналоговая перемотка аудиокниги
При прослушивании книги — на экране также отображается лента с дублирующим текстом. Свайпая эту ленту вверх или вниз, пользователь сможет перемотать и аудиокнигу. Свайпать можно по всей площади текста. Это позволяет легче и точнее управлять перемоткой.
Аналоговая перемотка особенно удобна, если пользователь хочет перемотать на какой-то момент, но не может полностью переключить внимание на телефон. Например, когда он едет за рулём автомобиля или слушает книгу во время пробежки. Также аналоговая перемотка удобна, если нужно перемотать на определённую фразу или даже слово.
Как реализовано в других «читалках»:
— Нужно кликать или свайпать по линии произведения. Это неудобно из-за того, что линия очень узкая и площадь взаимодействия получается маленькой.
— Есть кнопки перемотки на 15 секунд. Иногда это 30 секунд или 10. Этот способ неудобен из-за неточности — и 10, и 15, и 30 секунд может быть как много, так и мало.
Текстовые заметки в аудиокнигах
При прослушивании аудиокниги на экране дублируется текст. По кнопке с плюсиком, выделяется озвучиваемый фрагмент произведения. Его можно поправить вручную: например, сделать меньше или сдвинуть на пару предложений. По кнопке с минусом выделенный фрагмент произведения сохраняется в заметки в виде текста.
С этой фишкой у пользователей будет возможность сохранять понравившиеся цитаты из книг, даже если они слушают только аудиоверсии.
Как реализовано в других «читалках». В аудиоверсиях нет возможности делать заметки. Чтобы всё-таки её сделать, пользователю нужно открыть текстовую версию книги, найти нужную цитату, выделить её и только тогда сохранить в заметки.
Каждому жанру присвоен свой цвет
Например, Фантастике — оранжевый, Науке и технике — синий, Приключениям — зелёный. Так, листая коллекцию книг, можно сразу узнать не только название произведения и автора, но и жанр.
Эта фишка помогает читателю быстро ориентироваться в коллекции. Это важно в случаях, когда читатель в подборке книг ищет произведения определённого жанра. Если ему нужна Фантастика, он будет обращать внимание на произведения только оранжевого цвета.
Как реализовано в других «читалках». В подборке книг у произведений отображается только название и имя автора. Чтобы узнать жанр, нужно «проваливаться» в описание.
Толщина карточки книги передаёт размер произведения
В подборке блок каждой книги разной толщины — чем толще карточка, тем длиннее произведение. Так, изучая коллекцию книг, можно сравнивать произведения по их размеру.
Эта фишка полезна в случаях, когда читателю, при выборе книги, важен её размер. Например, если ему нужно ехать в поезде сутки, и он планирует выбрать книгу на ± 100 страниц, чтобы успеть её прочитать. Скроля книжные подборки, читатель сможет быстро понять, стоит ли начинать читать книгу. Это упрощает выбор и экономит время пользователей.
Как реализовано в других «читалках». Как и в случае с жанрами, чтобы понять насколько длинные произведения в подборке, вам нужно «провалиться» в описание каждой книги.
Пара коллтуэкшнов
Компаниям и их представителям. Если вам нужны уникальные дизайн-решения для бизнеса — обращайтесь, мы полны сил и готовы к интересным проектам. Бриф можно заполнить на сайте.
Дизайнерам и просто читателям. Напишите в комментариях, что думаете о концепции A-book; чем она вам понравилась или не понравилась; что бы в ней поменяли или улучшили. Кстати, если вы хотите работать над уникальными проектами — следите за нашими вакансиями на HH.
И всё же я отдаю предпочтения бумаге. Да, нельзя свайпать, приходится напрягать глаза, нельзя одновременно "читать" и ехать за рулём и много других ограничений, но только так можно полностью погрузиться в Чтение, такое какое оно и было на протяжении последних нескольких сотен лет.
Как по мне, ехать за рулем и слушать аудиокнигу тоже вариант сомнительный. Даже не представляю, как можно погрузиться в книгу при этом сохраняя полную концентрацию внимания на дороге
а круче всего слушать аудиокниги, пока занят делами. Если книга збс, покупай ее, в старости или в очередной отпуск сядешь и проведешь с ней пару деньков. Физических книг в наше время не прочитаешь столько, сколько можно аудио прослушать. К тому же запаришься покупать их. Большая часть - говно редкостное. Где-то перевод официальный корявый, а неофициальный можно найти только в электронном виде (пример, Атлант расправил плечи).
Читать и ехать за рулем, за это прям сразу надо расстреливать на обочине
Иногда это просто - неудобно. Поиска в бумаге нет и не будет. Пока это будет бумагой. Вес библиотеки. И так далее.
Кое кому вот вообще читать с планшета/fold'а идя по улице сложно и...ищутся решения как сделать чтобы не держать в руках этот планшет но при этом читать (AR-очки помогают)
Не знаком с людьми, которые так делают. Такие существуют?
Иногда этого очень не хватает, когда слушаешь профессиональную литературу и нужно вникнуть в какой-то кусочек текста. Или посмотреть все пункты списка. Или еще раз перечитать главный тезис, или целый абзац с важной мыслью.
В художке, конечно, не так.
Смотря какая книга. Если роман банальный, то вряд ли. А если что-то полезное, то вполне был бы неплох вариант остановить воспроизведение. Найти интересующий абзац и сделать скриншот (аля конспект). Я так делаю и крайне доволен. Недавно только разбирал папку со скриншотами за последние 3 года, так столько всего интересного и полезного там нашел, переписываю себе в блокнот. А уже забыть забыл и про это полезное и о том, что я такие книги вообще когда-то читал.
Да.
Я например
А еще, повторюсь, Amazon возможность качественную синхронизацию (так что можно абзацы даже подсвечивать) сделал одной из фишек Kindle - Whispersync for Voice.
Ну а если человеку не важна озвучка человеком - большинство нормальных читалок так умеют, вроде того же Moon+ Reader'а.
Люди бывают очень разные
Потому что такой функции нет, а так было бы очень удобно
Для реальной оценки надо самому пользоваться, конечно же.
Переключение между текстом и звуком можно как-то отключить в опциях? Представил случайное переключение и вот уже "вся маршрутка" знает о том, что читается.
Разные цвета под разные жанры сработают там, где правильно расставлены теги, но сама задумка нравится.
Размер карточки, который показывает размер самого текста - хорошая идея, в других программах не замечал.
И теперь доебусь до текста. "Свайпая эту ленту вверх или вниз, аудиокнига будет перематываться." - аудиокнига будет что-то свайпать?
Стилистическую ошибку поправили, спасибо! Ребята, кто читает этот коммент — набросайте коллеге выше плюсов в карму.
Размеры книг — 🤍
Вот бы их на полочки, как в iBooks были в первые годы — обожала свою книжную полку.
Приложение для чтения просто обязано быть эстетичным. Вот бы такое вышло в продакшн
удобная синхронизация ,быстро можно переключиться на удобный формат
Ничего не скажу насчет полезности фичи, но выглядит все симпатично) Особенно штука с толщиной книг.
Основная фича вряд ли жизнеспособна. Люди либо читают сами, либо слушают. Зачастую это разные люди. Или книги разные.
Я и читаю (бумажные и электронные книги) и слушаю. Слушаю обычно на прогулках или во время бега.
Знаю ещё много людей, таких же, как я :)
Основные фичи сомнительны и с точки зрения функциональности и с точки зрения дизайна. Слушают или потому, что любят или потому что невозможно читать (например, за рулем), во втором кейсе перемотка на 10-15 сек адекватнее, в первом не будут переключаться на чтение, а перемотки уже нет - вы убрали хорошую фичу. Судя по вашему скрину книжка в 100 страниц уже не вместит описание, а в 1000 будет занимать большую часть интерфейса - дизайнеру 2-
а где можно по тыкать само приложение?
Пока есть только концепция.
Интересная идея. Было бы хорошо увидеть в живую продукт, и да, будет интересно, как будет работать на ридерах 🎧📚
Так все круто, а где приложение то?
Мы разработали дизайн-концепцию. Задачи разработать приложение — не было. Но возможно, она появится в будущем :)
Многим будет неудобен вариант такого оформления, тёмная тема и другие цвета, но я только так читаю с электронных устройств. Жду выхода продукта, хочется попробовать.
Дополню комментарий позже своими мыслями)
Самая главная проблема - где вы найдете синхронизированный аудио/текст??
Для большинства достаточно популярной литературы есть аудио и текстовые версии
Купить :). Amazon :). Правда я вот не в курсе как эту информацию синхронизации вытащить из файлов. Ну и теоретически есть такая штука как Aeneas https://www.readbeyond.it/aeneas/ - автоматическое создание маппинга если аудиоверсия и текстовая версия уже есть. И вопрос уже в наличии исходных файлов и читалке которая может использовать эти данные.
Кое что (режим с синхронизацией и нормальным переключением между книгой и аудиокнигой) очень напоминает... Amazon Kindle в их приложениях. Там даже кроме переключения - есть режим режим Immersion Reading - подсвечивается конкретный абзац пока идет его озвучка. Не со всеми книгами правда работает.
Очень удобно.
Те же литрес с author.today заявляют что у них есть синхронизация книги и аудиокниги но в лучшем случае - при переключении с чтения на озвучку - попадешь в начало той же главы а не начало книги. Вот почему нельзя нормально?
С жанрами - а вы уверены что вы все жанры правильно учтете? :) ЛФР это какой жанр? А попаданцы в СССР(не путать с попаданцами в другой хотя это вполне может быть в одной серии) :). Или все это в фантастику идет?
Мы постарались учесть максимальное количество жанров.
Концепт интересный, разве что читать на зелёном фоне кажется не особо удобным. Разные цвета для книг это интересно, но сам текст лучше не трогать. У Литреса еще есть синхронизация между аудио и текстовыми версиями, правда сам не пробовал.
Цветной фон для аудиоверсий, для чтения — белый и чёрный)
прикольно
На мой взгляд, продукт получается крайне нишевым и вряд ли все вышеуказанное станет некой «киллер фичей», которая будет выгодно выделять Вас на фоне остальных.
Если смотреть с точки зрения пользователя сервиса, то ни я, не члены моей семьи даже не задумывались о необходимости внезапного переключения с аудио на текст и обратно.
Я могу лишь предположить, что данная тема может быть полезной если пользователь изучает иностранный язык и, в таком случае, ему нужно что-то повторить, отметить, запомнить, заново прослушать и так далее. В то же время, эта сфера также очень нишевая и вроде как что-то похожее уже на рынке есть.
На смартфоне нельзя читать долго. Покупайте ридер онли
Хочется попробовать читалку. Это пока только на уровне идеи или есть альфа/бета, чтобы потестить?
Пока есть только дизайн-концепция.
Бля, да уже сделано все давно. Просто скопируйте функционал KyBook и не выебывайтесь со своими пафосными фотками на фоне экрана с проектором.
Там и синхронизация была нормальная. Там и синтезатор речи уже был в свое время, его надо просто заменить на нормальный голос нейронок. Аудиокниги - прошлый век, будущее за синтезаторами речи, так как:
1) не надо будет ждать долго пока начитают
2) аудиокниги готовят только для популярных книг, синтезатор работает для всего (кроме книг с большим содержанием таблиц и рисунков)
Еще раз, не надо изобретать велосипед, допилите сначала функционал KyBook, потом уже выдумывайте поебень всякую.
У KyBook автор пропал несколько лет назад и не выходит на связь, а читалка такая очень нужна сообществу, аналогов сейчас нет.
Чтобы вам не было обидно — можете прислать свою фотку на фоне экрана с проектором. Я поставлю вам лайк.
А полный дизайн где посмотреть? Behance может быть? Или сайт?
Готовим большие кейсы на сайт Wemakefab и на Dprofile.
Интересная концепция, с новым функционалом. Пользуюсь стандартным приложением на айфоне «книги». Стандартное приложение с головой закрывает все мои задачи в получении информации.
- Мне кажется за рулем невозможно сосредоточиться на прослушивании книги. Лучше всего это делать в спокойной обстановке. Но лично для меня.
- Ещё мне кажется что идея с цветом не очень хорошая. Текст удобнее и приятнее читать на белом фоне, как в книге. Но если ты читаешь книгу в темное время, то цвет переключается на чёрный, так человеческий глаз меньше напрягается.
UX это хорошо! В Гугл и Яндекс на первой странице по запросу "A-book" - сервиса нет )
На сайте wemakefab.ru тоже нет.
Искать приложение в АппСторе что ли? )
Это дизайн-концепция. Готовим большие кейсы на сайт Wemakefab и на Dprofile.
Я люблю печатный вариант книг, но и аудиокниги тоже люблю слушать когда гуляю или занимаюсь домашними делами
Честно, больше хочется нормальную, красивую, универсальную читалку на ПК, потому что то что сейчас есть это позор какой-то. Если на мобильных уже конкуренция есть, то на десктоп до сих пор кроме Эппл никто так и не сподобился сделать что-то адекватное.
Чтение - это контактный процесс.
По одну руку книга, по другую снифтер с коньяком и деревянной досточкой с нарезанным сыром.
Познание должно быть приятным.
А электронные версии как резиновая леди.
Разве что документацию читать.