Артем Іванов, власник та дизайнер студії Other Land, проаналізував три додатки для оренди самокатів у Києві: Bolt, Zelectra та Jet. Оцінив зручність користування застосунками, зчитуваність UI-елементів та кількість зайвих екранів на ключових етапах взаємодії з додатком: на початку поїздки та на етапі її завершення.

Джерело: unsplash.com

Регулярно користуюся сервісами з оренди самокатів. Раніше ніколи не замислювався про дизайн їхніх додатків, бо завжди треба було швидко виїхати/швидко запаркувати й бігти в студію. Але коли мені в черговий раз довелося зробити шість кліків на ходу замерзлими руками, щоб залишити самокат, я розсердився. І вирішив розібрати на деталі всі додатки, якими я користуюся: подумати, що можна поліпшити, за що похвалити, а за що посварити. Цікава вправа для дизайнера, до речі. Всім раджу.

У список учасників експертизи потрапили сервіси: Bolt, Zelectra і Jet. Bolt — мій фаворит, в першу чергу шукаю їхні самокати. Zelectra — план Б (якщо немає болтів, то можна і на м’якій зелектрі проїхатись). Jet — зачепив яскравий дизайн самоката, вирішив перевірити.

Читайте також: Робота з кольором, композицією й анімацією — це теж UX

Початок. Поповнення й оплата

Напевно, це залежить не від дизайну інтерфейсу, а від бізнес-процесів. Але в додатках Bolt і Jet спочатку просять підв’язати карту, а по закінченню поїздки просто списують з неї необхідну суму. А ось у Zelectra просять спочатку поповнити баланс на певну суму, від якої потім будуть списувати гроші. Мабуть, бізнесу так краще, бо він авансом отримує гроші. Але з точки зору користувача це зовсім незручно.

Бо коли я вирішую спробувати проїхати на новому самокаті, мені вже потрібно подолати великий бар’єр — встановити новий додаток. Добре, я встановлюю. Але одразу після цього мене зустрічає екран поповнення балансу на суму, яка явно більша однієї поїздки. І тут у мене виникає резонна думка: «А якщо мені не сподобається, і я більше не буду їздити на цих самокатах, то решта грошей згорить?».

У великих містах уже працює кілька компаній оренди самокатів. У Києві їх, наприклад, штук вісім, тому завжди є альтернатива. І часто безпечніше скіпнути поповнення балансу і скористатися чимось знайомим.

Можливий спосіб розв’язання проблеми: якщо бізнес-модель вже не змінити,  можна хоча б зменшити суму авансу до середньостатистичної поїздки.

Тепер розглянемо найтиповіший сценарій оренди самоката, розбивши його на два етапи: початок і кінець поїздки. Та порівняємо, як це відбувається у різних додатках.

Етап 1. Пошук самоката, резерв і початок поїздки

Zelectra

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

Клікнувши на самокат, ми бачимо зелену блискавку з повним зарядом. Що це означає? Не зрозуміло. Швидше за все це не індикатор батареї, тому що він розташований трохи правіше і вже у вигляді батареї.

Номер самоката написаний дуже дрібним шрифтом, важко ідентифікувати. А він важливий, якщо поруч стоїть кілька самокатів, і потрібно впізнати свій за номером. Вартість поїздки всередині кнопки — гарне рішення. Але особисто мені здається, що вартість можна дізнатися один раз під час онбордингу і все.

Функція резерву самоката реалізована у кнопці з іконкою у вигляді годинника. Я тільки через деякий час про це здогадався, коли вирішив розібратися, чи є функція бронювання у цьому додатку.

Після натискання на резерв, вискакує модальне вікно з докладною інформацією про бронювання та кнопкою підтвердження. Доводиться робити ще один клік.

Розблокування та початок поїздки знаходиться на одному екрані, і відбувається в один клік. Це круто.

У підсумку: 4 кліка для початку поїздки з резервуванням

Плюси:

+ не потрібно сканувати QR код;

+ видно заряд батареї в кілометрах;

Мінуси:

− зайві деталі та незрозумілі іконки

− неочевидна іконка для резервації

− номер самоката складно зчитувати

− жахливо голосна озвучка на самому самокаті

Jet

Коли вибираємо самокат, бачимо його номер в тому ж полі. Це зручно, коли потрібно його ідентифікувати серед кількох, що стоять поруч. У нижній частині дуже зрозуміло показали стан батареї. Яскрава смуга з відсотками та верхня сіра плашка з кількістю часу. Це прям дуже добре, бо вже неодноразово сідала батарея посеред поїздки.

Біля нижнього зображення самоката ми бачимо ще один напис Okai ES100 D. Що це і навіщо воно мені? Якщо вже у двох місцях на цьому екрані є номер самоката. Ніби як зайва штука.

Звернімо увагу на три кнопки внизу. Ідея була хорошою: показати всі кнопки з описом кожної з них. Тут відразу зрозуміло як забронювати самокат, на відміну від Zelectra. Але те, що самокат запускає перша кнопка, неочевидно. Замість Minute-by-Minute достатньо б було написати Start. Те, що це похвилинна тарифікація, зрозуміло з підпису нижче. Кнопці Fix Price бракує пояснення. 20 гривень, це за скільки часу? 8 годин, день, добу, безліміт чи поки не розрядиться батарея?

З резервацією та початком поїздки тут все добре. При резерві отримуємо модальне вікно з описом умов і таймером. Після скануємо QR-код і натискаємо на кнопку початку поїздки.

І тут ми маємо пройтися трьома екранами:

1. екран підтвердження з умовами оплати та інформацією про страхування;
2. екран активації з прелоадера і підказкою
3. і ще дві підказки на третьому екрані з кнопкою «ОК».

Підказки — це добре, ще й в такому дизайні. Але три екрани — це занадто. Думаю, можна легко обмежитися одним. Активацію самоката можна зробити відразу після натискання кнопки Minute-by-Minute. Поки самокат активується — вивести по черзі всі підказки на екрані й потім автоматично почати поїздку.

У підсумку: 5 кліків для початку поїздки з резервацією

Плюси:

+ добре видно заряд самокатів на мапі

+ приємний UI

+ зручно показаний номер самоката

Мінуси:

− неочевидний функціонал кнопок

− зайві елементи в інтерфейсі (номер і назва самокату дублюються)

− перевантаження екранами на етапі активації

Bolt

І наостанок Bolt. Зараз бачу, що самокат не одразу впадає в очі на мапі, хоча в реальному житті не відчував з цим проблем. Самокат ідентифікується тільки маленькою зеленою плямою заряду. Для людей з поганим зором цього може бути мало. Тому я б змінив білий колір підкладки іконки на контрастніший.

Бронювання тут найзручніше. Велика очевидна кнопка, ще й прокладає маршрут до самоката з вказаним часом, потрібним, щоб до нього дістатися. І на цьому етапі іконка самоката вже добре помітна.

Після резервування з’являється синя плашка з таймером. Звернімо увагу на кількість слів у цій плашці й порівняємо з попереднім додатком. Той сенс, який Jet оформив у двох реченнях, Bolt упакував у два слова. Просто Reserved з таймером зворотного відліку. Це елегантне рішення. Саме так потрібно спрощувати інтерфейси. А кнопка скасування резервації стає червоною. Круто ж! Лише за кольором зрозуміла функція кнопки, навіть можна не читати. Інтуїтивний дизайн як він є.

Підходимо до самоката, скануємо код, тиснемо Start ride, спливає й автоматично закривається модалка. І все, можна їхати. За що ж можна посварити? Хіба що можна прибрати сканування QR коду, щоб була можливість одразу починати поїздку як в Zelectra.

Етап 2. Закінчення поїздки

Zelectra

Zelectra випередила всіх за кількістю непотрібних дій на цьому етапі.

Закінчивши поїздку, натискаємо End my ride. Наступний екран просить зробити фотку, ілюструючи це зовсім нечитабельною іконкою. Хоча на кнопці все так само написано End my ride. Це називається неузгодженістю.

Йдемо далі. Тепер спливає модалка, яка знову просить зробити фотку.

• робимо фото
• підтверджуємо
• ще раз підтверджуємо
• вибираємо рейтинг
• ще раз підтверджуємо

Таке відчуття, що це державний застосунок, де потрібно підтверджувати кожну свою дію.

У підсумку: 8 кліків

Jet

Приїхали, хочемо закінчити поїздку. Натискаємо на очевидну кнопку Complete, переходимо на другий екран підтвердження. Навіщо? Я не розумію. Може це захист від випадкового натискання на кнопку? Я особисто, ніколи не натискав на кнопки випадково.

Добре, я дійсно хочу закінчити поїздку, клікаю Yes, complete. Переходжу на наступний екран з переліком необхідних дій.

Мені подобається, як вони дружньо комунікують з користувачами. Але це можна робити більш ненав’язливо і давати тільки важливі підказки. Make sure it does not disturb anyone — це дійсно проблема, бо купи самокатів незручно стоять на вулиці. Але те, що самокат потрібно припаркувати — очевидно, а те, що потрібно зробити фото, буде зрозуміло на наступному екрані.

У підсумку: 7 кліків

Bolt

У цьому прикладі особливо нічого й описувати. Розробники сильно спростили сценарій закінчення поїздки, за що я їм дуже вдячний. Буквально за 3 кліки можна закінчити поїздку, зробити фото і рейтинг поставити.

У підсумку: 3 кліки

Я вирішив зробити такий детальний розбір не для того, щоб когось похвалити, а когось посварити. А щоб показати на скільки по-різному можна вирішити одну і ту ж задачу, і як сильно може відрізнятися результат.

Коли ви закінчите свій наступний дизайн, спробуйте так само ним пройтися і почистити від непотрібних дій, екранів і сенсів. Але варто враховувати, що менше екранів — не завжди краще. Але про це вже наступного разу.