Кожна взаємодія, яку ми створюємо, допомагає визначити і направити досвід користувача. Найкращим варіантом буде розробка чогось інтуітивно-зрозумілого перед створенням естетично приємного інтерфейсу. «Навіщо винаходити „велосипед“, якщо вже є все готове у різних шаблонах?», — спитаєте ви. Простий на вигляд елемент може нашкодити інтерфейсу користувача. Тому кращі проекти, інколи, потребують від нас заново винаходити велосипед.
Наступний приклад допоможе вам зрозуміти, про що йде мова. uberVU — це соціально-орієнтована, медіа-аналітична платформа, котра збирає величезну кількість даних для своїх користувачів.
Одна з основних можливостей uberVU — відображення даних соціальних засобів масової нформації (соцмережі, блоґи, форуми, питання-відповіді і т.п.) таким чином, щоб мати можливість відфільтрувати їх за базовими властивостями: платформа, стать, настрій та місцеположення (виділено на малюнку нижче).
Фільтр місцеположення чудово підійде у якості нашого прикладу. Ми читали статтю Крістіана Холста «Редизайн меню вибору країн», котра насичена чудовими пропозиціями щодо покращення дизайну даного елементу, але не вирішує всіх наших проблем до кінця.
Вибір місцеположення в uberVU потребує прогресивної фільтрації. Іншими словами, після того, як користувач вибрав країну (вже задача сама по собі), йому також необхідна можливість вибрати штат або область, регіон, місто і т.д., в цих країнах. З такою кількістю варіантів, нам необхідно зробити акцент на найбільш важливих параметрах фільрації. Але й цього не достатньо — фільтр повинен працювати так, щоб користувачі могли зробити крок назад під час перегляду варіантів фільтра, накшталт того, як працює навігація на самому сайті.
Маю надію, що задачі розробки зрозумілі. Далі ми покажемо елегантний спосіб їх вирішення.
Задача 1. Моментальні варіанти
Що, коли користувач точно знає місце, яке шукає? Легко. Вирішується додаванням автопідстановки. Після того, як користувач вводить три символи, з’являються варіанти.
Ця модель відмінно працює завжди, окрім випадків, коли запит повертає декілька схожих результатів. Якщо таке трапляється, користувач сам може вирішити цю неоднозначність, натиснувши на потрібний результат. Не оптимальне рішення. Скажімо, користувач хоче відфільтрувати Лондон, Великобританія. Він вводить «Лонд» і ми правильно здогадались — Лондон… Але який саме Лондон потрібен користувачу? Очевидно той, що у Великобританії, приходить на думку всім, хто не з Канади. Ви можете бути здивовані, дізнавшись, що Лондон є в штаті Онтаріо, Канада. Тобто, ми повинні запропонувати щонайменше 2 варіанти:
- Лондон, Великобританія;
- Лондон, Онтаріо, Канада.
Як видно на скріншоті, у світі існує набагато більше Лондонів ніж може здатися спочатку. Відображення варіантів від найбільш популярного і до найменш зробить все набагато простішим для користувача.
Задача 2. Заохочення дослідження
Ускладнюємо нашу розробку. В той час, коли деякі користувачі точно знають чого хочуть, інші хочуть мати можливість досліджувати дані з соціальних медіа. Наприклад, людина слідкує за запуском деякого продукту і йому цікаво, де люди обговорюють цей продукт. Було б чудово, якщо б він міг провести дослідження для себе?
Наше рішення передбачає деревоподібну структуру у виборі фільтрів. Щоб все було не так страшно (ми ж відслідковуємо тисячі місць), ми вирішили показати спочатку список континентів. Після цього ми показуємо тільки ті місця, в яких є необхідні дані (згадки в соціальних медіа) для даного користувача. Таким чином, дерево має лише важливі дані в кожному пункті. Щоб пройти далі, користувачі натискають на стрілочку поряд з кожним місцем. По мірі заглиблення, кожен варіант розкривається, щоб показати його підкатегорії.
Єдиним недоліком цього методу є те, що ви додаєте додаткову прокрутку. Коли користувачі наводять мишку на цю область, вони прокручують фільтр, а коли курсор миші знаходиться десь в іншому місці, вони прокручуються всю сторінку.
Задача 3. Виділення важливих даних
Давайте пам’ятати, що цей фільтр повинен допомогти нашим користувачам досліджувати ті місця, з яких ми збираємо дані. Перегляд дерева, яке починається з континентів — хороше начало, але не відповідає на питання «Які найбільш важливі місця?». Наші користувачі потребують список ТОП-5 місць обговорень, і це саме те, що и пропонуємо їм. Список найбільш важливих країн в залежності від кількості повідомлень зібраних з конкретного місця.
Задача 4. Повернення
Припустимо, що ви відфільтрували данні по Лондону, Великобританія. Після оновлення сторінки відображаються всі згадки з цього міста. Що робити, якщо ви хочете вибрати Великобританію знову? Що робити, якщо ви хочете скинути всі фільтри і повернутися в початкове положення, в я кому нічого не вибрано?
Наше рішення — замінити список найбільш важливих місць, списком починаючи з початкового місцеположення, аналогічно як зроблено в навігації веб-сайтів. Ви можете відслідковувати ваші дії на всьому шляху і повертатися в початкове положення.
Після використання, фільтр запам’ятає ваш маршрут по списку і вибере його під час наступного відвідування. Тобто, при відкритті сторінки знову вам відкриється все дерево фільтрів: континент, країна та регіон будуть розкриті, щоб показати весь маршрут, що був вибраний раніше.
На останок. Використання всього разом
Ми спробували поєднати всі рішення разом. В теорії, все це ускладнило роботу з фільтрами, але, на здивування, все разом працює дуже добре. Може здатися, що це складно, але все доволі практично. У нас неймовірні відгуки від клієнтів, так що, вцілому ми дуже задоволені результатом!
Засвоєні уроки
Ми вважаємо, що побудований нами фільтр — чудове рішення проблеми багатьох веб-додатків, які потребують прогресивної фільтрації по місцеположенню. В цьому випадку, стандартні шаблони просто не будуть працювати. А наші користувачі просто в захваті від отриманого рішення.
Що ще важливіше, ніж саме наше рішення — це шлях, котрий ми пройшли, щоб створити його. Можливо, ви робите так само:
- Пам’ятайте, що коли кожен робить щось певним чином, то це не значить, що ви повинні робити так само. Популярний вибір розробників може просто не підійти вашому продукту.
- Подивіться на розробку з точки зору користувача. Прислуховуйтесь до клієнтів, щоб зрозуміти з чим у них можуть виникнути проблеми.
- Складіть список всіх елементів, які ви хочете включити. Переконайтесь, що кожен елемент має чітку функцію. Не додавайте елементи заради елементів. Будьте прагматичними.
- Об’єднайте все до купи і подивіться, чи все на своїх місцях. Ви можете щось видалити без шкоди для функціональності елементу?
- Запустіть, протестуйте і повторіть!
Цей процес відкрив нам очі на той факт, що багато дизайнерів, здається, просто переробляють стандартні шаблони, що призводить до неоптимального досвіду. Я знаю, що ми зробити аналогічно. Чи є місця у вашому веб-додатку, де ви могли б зробити те ж саме?
Погляньте на ключові взаємодії додатку, визначіть справжні його цілі і чесно оцініть, чи робить ваше стандартне рішення свою роботу повністю? Якщо ні, беріться до роботи. Дивіться на це, не як на ще одну проблему, яку необхідно вирішити, а як на можливість створити щось дивовижне!
Оригінальна стаття «Designing a Progressive Location Filter». Переклад Тараса Пархоменко.
