JET seller asistant

Explore

JET seller asistant

JET seller asistant

Як оптимізувати складні таблиці та пришвидшити зчитування інтерфейсу?

⚡ Короткий опис кейсу

Проблема: Складні таблиці SaaS платформ ускладнюють сприйняття даних. Користувачі потребують інтерфейсу, який виділяє важливу інформацію залежно від контексту.

Процес:

Досліджено потреби користувачів через інтерв’ю та опитування.

Використано принцип пріоритизації (80% уваги на ліву частину, 20% — на праву).

Переставлено колонки, додано кольорове кодування, видалено зайве.

Результат:

Швидке зчитування таблиці.

85% схвальних відгуків.

Адаптивне рішення зниження витрат та часу реалізації.

Зменшення часу обслуговування клієнтів.

🔬 Деталізований кейс

⏱️ Час прочитання 8–10 хв

План

Опис проблеми

⁠

Аналіз поточного рішення⁠

⁠

Проектуємо рішення⁠

⁠

Результати⁠

⁠

Опис проблеми

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

Рісьорч та дослідження

На сьогодні є достатньо досліджень на тему зчитування інформації. Одне з основних це дослідження про

фокус уваги при горизонтальному зчитуванні⁠

Основна ідєя полягає в тому, що більшість користувачів читають зліва направо та при швидкому скануванні сторінки більше звертають уваги на ліву частину сторінки, а права зчитується за остаточним принципом. Співвідношення фокусу дорівнює 80% на ліву сторону та 20% на праву. Таким чином це правило можно застосувати в будь-якому дизайні як базове.

Наприклад для великих таблиць це буде звучати так – у лівій частині таблиці мають мати найважливіші данні та інформація, а далі спадати у праву сторону в порядку пріорітетності.

⁠

Результати дослідження у вигляді роділеної сторінки на праву та ліву частину. Фокус уваги користувачів показаний у вигляді вертикальних чартів

Результати дослідження у вигляді роділеної сторінки на праву та ліву частину. Фокус уваги користувачів показаний у вигляді вертикальних чартів

⁠

Як визначити пріорітет між елементами на сторінці користувача, особливо у таблиці де багато данних які всі використовуються в залежності від запиту та контексту?

Розкажу та покажу на прикладі продукту для продавців, за допомогою якого вони обслуговують клієнтів. Про продукт можна почитати

тут⁠

⁠

Задача: зробити редизайн для сторінки відбраження технічних поламок у мережі – аварії

Аналіз поточного рішення

Потреби користувача складаються з двох частин:

Знайти потрібну подію з загального списку

Отримати детальну інформацію про конкретну подію

Маємо дві сутності:

Список всіх подій та Деталі події.

Далі я розкажу про першу частину цього функціоналу – Список подій

Список подій

⁠

Вигляд поточної реалізації таблиці. Данні сховані через NDA

Вигляд поточної реалізації таблиці. Данні сховані через NDA

⁠

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

⁠

Спрощенна візуалізація таблиці без данних

Спрощенна візуалізація таблиці без данних

⁠

Але ми розуміємо що при використанні цього інтерфейсу користувач може звертати увагу на різні колонки в довільному порядку в залежності від потреби та контексту

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

Сортування карток

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

У тестуванні брали участь досвідченні користувачі, які мають достатній досвід роботи у попередній системі

Користувачі сортували картки на основі свого досвіду та суб’єктивного відчуття, який пункт більш важливий в роботі

Результати

⁠

Спрощенна візуалізація таблиці без данних до та після тестування. Зверху поточна пріоритизація, знизу приіритизація від кінцевого користувача. Для наглядності змін колір фону не змінювався.

Спрощенна візуалізація таблиці без данних до та після тестування. Зверху поточна пріоритизація, знизу приіритизація від кінцевого користувача. Для наглядності змін колір фону не змінювався.

⁠

Також результат можна накласти відповідними кольоровими рамками на поточне рішення. Таким чином бачимо умовну теплову карту поточного фокусу користувача.

⁠

Вигляд поточної таблиці. З накладенням результатів тестування у вигляді рамок відповідного кольору

Вигляд поточної таблиці. З накладенням результатів тестування у вигляді рамок відповідного кольору

⁠

Висновок

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

Проєктуємо рішення

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

⁠

Оновлений дизайн таблиці. Для прикладу показана одна строка

Оновлений дизайн таблиці. Для прикладу показана одна строка

⁠

Накладаємо кольорове кодування

⁠

Колонки розташовані у порядку пріорітету визначеного користувачами

Колонки розташовані у порядку пріорітету визначеного користувачами

⁠

Тепер інформація розташовується послідовно відносно досвіду користувача та враховує правило зчитування

Загальний вигляд

⁠

Оновлена таблиця

Оновлена таблиця

⁠

Було та стало

Було та стало

⁠

Результати

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

Додатково у фінальному рішенні було прибрано та адаптовано велика кількість зайвої інформації та пошук, що в свою чергу зменшило строки реалізації та виходу у продове середовище.

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

Якщо коротко:

💰 Значно зменшили витрати на розробку

🤸‍♂️ Адаптивне рішення яке можна перевикористати на різних пристроях

😌 Рішення візуально спрощує сприйняття інтерфейсу

⭐️ 85% схвальних відгуків від кінцевих користувачів

⏱️ Знчно зменшено час зчитування відносно попереднього рішення

Gallery

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.