Інтерфейс лікомату АНЦ
Аня Ліщинська розповіла в своєму Телеграм-каналі про лікомати в АНЦ. Це такі роботизовані шафи для самовивозу. Поштомати для ліків, якщо хочете. Аня хвалить підхід до надання послуги, та показує процес отримання ліків через цифровий інтерфейс. Мені дуже подобається ідея, сам користувався лікоматом неодноразово, але здається, що інтерфейс терміналу міг би бути кращим. Що з ним не так, на мою думку?
Зайві кроки на початку та наприкінці
Перший екран запрошує скористатись лікоматом для отримання замовлень без черг. Робить це красиво, але незручно: дрібний текст на кольорових плашках погано видно здалеку, кнопка «Тисни тут» виглядає так, ніби щось вмикає або вимикає. Хочеться одразу вводити номер замовлення, але доводиться тиснути на кнопку.
Останній екран розповідає про операцію, яка успішно завершена. Люди так не говорять, але більш важливо — чи точно нам потрібно підтвердження, якщо ми вже показали яку комірку відкрити, а відвідувач скоріш за все забрав свої ліки? Благий намір дати зворотній зв'язок перетворюється на зайве відволікання.
![](https://cdn.prod.website-files.com/6415aed2826a424b90daf3f2/667bbe22aeba5fdc24e6a23a_anc_start_end.png)
Дрібний інтерфейс та забагато використаних «чорнил»
Екран маленький, але його простір використовується не повністю. Через це полем для введення, кнопками та текстами складніше користуватись, ніж мало б бути.
Інтерфейс лікомату встановлений в центрі шафи, і це круто — комірки легко знайти навколо нього. Проте схема лікомату на екрані теж дрібна та складна. Тафті колись писав про data-ink ratio: співвідношення використаних чорнил для передачі інформації до всього, що візуалізується. Щоб показати, де знайти комірку з замовленням, можна використати менше чорнил та інтерфейсу загалом.
![](https://cdn.prod.website-files.com/6415aed2826a424b90daf3f2/667bc3d8f7d7c5e9849e87d6_anc_2.png)
Як покращити цей інтерфейс?
- Дати відвідувачу одразу вводити номер замовлення замість заглушки з кнопкою «Тисни тут».
- Збільшити елементи управління та розмір тексту на головному екрані, який буде більш помітним з відстані.
- Зробити підказку про розташування комірки фінальним кроком
![](https://cdn.prod.website-files.com/6415aed2826a424b90daf3f2/667bc56c2e77973d225c0a09_anc_fix.png)
Я взяв SF Compact Rounded, щоб зберегти простір та збільшити кегль. Замість нього підійшов би будь який звужений геометричний гротеск. Відвідувачів аптеки зустрічає термінал, який запрошує отримати замовлення, блимає індикатором для введення та дає одразу почати вводити цифри з великої клавіатури.
Я пропустив крок з введенням номеру телефону, тому що в оригінальному пості Ані не було його фотографії, але припустимо, що він виглядав би схоже.
Після підтвердження, користувачу треба показати комірку під яким номером треба відкрити, та де вона знаходиться. Використовую вдале розташування планшету та показую піктограмою стрілки куди треба дивитись, але дублюю це дрібнішим текстом нижче, щоб прочитати все можна було за один раз — «Відкрийте 8 комірку: зверху та праворуч». Після цього відвідувач забирає замовлення та йде по своїх справах.
Фінальний екран змінюється на перший по тапу або за недовгим таймером, щоб відвідувач встиг розібратись та забрати замовлення.