Розповідь і дизайн на основі даних у дії

У сьогоднішньому дописі в блозі я хочу поговорити про оповідання історій на основі даних і дизайн у дії. Я був одним із доповідачів нещодавно завершеного саміту Data Visualization 2022, який LuckyTemplates презентував у травні минулого року.

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

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

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

Зміст

• Бізнес-потреби до, під час і після саміту
  • Перед самітом
  • Під час саміту
  • Після вершини
• Побудова екосистеми
• Наші таблиці розмірів: ідентифікатор користувача та ідентифікатор доповідача
• Створення програми для саміту EDNA
• Ієрархія макета: полегшення використання навігації
• Три частини програми
• Найкращі практики дизайну
  • Обмежте кількість кліків
  • Дотримуйтесь закону Якоба та закону Парето
  • Використовуйте виноски
  • Показати дизайн активного стану
  • Забезпечте стани наведення
  • Використовуйте зрозумілі етикетки
  • Забезпечте доступність кольорів/етикеток
  • Передбачте поведінку користувача
  • Виконайте тести зручності використання
• Висновок

Бізнес-потреби до, під час і після саміту

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

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

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

Я подумав, що для аудиторії буде дуже цінно мати програму чи звіт, які використовуватимуться в три різні моменти: до саміту , під час саміту та після саміту .

Перед самітом

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

Під час саміту

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

Ви захочете залишити відгук одразу після кожного заняття та надати рекомендації для наступних занять. Ви також можете зв’язатися з доповідачем у LinkedIn або Twitter.

Після вершини

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

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

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

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

На основі цих потреб, як ви можете створити історію? Ми говоримо не лише про звіт LuckyTemplates або звіт Power Apps. Ми говоримо про екосистему. Ці екосистеми мають різні потреби в різні моменти, але вони також пов’язані. Це історія, яку я хочу розповісти сьогодні.

Побудова екосистеми

По-перше, нам потрібно спланувати. Нам потрібно точно знати, що ми хочемо створити, і створити це таким чином, щоб це можна було використати іншими речами.

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

Наші таблиці розмірів: ідентифікатор користувача та ідентифікатор доповідача

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

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

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

Я записав свої ідеї у файл Excel і почав втілювати свої ідеї в життя. Я створив різні вкладки та різні таблиці, які мають використовуватися Power Apps.

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

Звичайно, мені також потрібна ще одна таблиця для ідентифікатора доповідача з інформацією про доповідачів, їх назвою, темою, днем, годиною, фотографією, посиланням на YouTube, адресою LinkedIn та ідентифікаторами LuckyTemplates.

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

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

Ідентифікатор користувача та ідентифікатор доповідача — це розміри, які мені знадобляться в LuckyTemplates пізніше. Мені також потрібна таблиця фактів , де я з’єднаю ідентифікатор користувача з ідентифікатором доповідача, щоб створити мої сторінки планування та відгуків про сесії.

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

Це лише для того, щоб продемонструвати прототип того, як виглядатиме подібна програма для LuckyTemplates. Ось чому я хотів піти якомога далі.

У нас є планування , яке є таблицею фактів у LuckyTemplates, де я можу створювати зв’язки та мати інформацію про ідентифікатор користувача та ідентифікатор доповідача.

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

Це те, чим ви можете легко керувати в LuckyTemplates, маючи лише одну велику таблицю фактів.

Досить легко уявити модель даних у LuckyTemplates, коли у вас є розміри та таблиця фактів.

Сторінка зворотного зв’язку – це загальний відгук про саміт, де немає зв’язку між ідентифікатором користувача та ідентифікатором доповідача.

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

І останнє – часовий пояс країни. Якщо ви перейдете на сторінку саміту LuckyTemplates, ви побачите інформацію про час сесій у Лос-Анджелесі, Нью-Йорку, Лондоні, Сіднеї та Окленді.

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

Це структура додатків, яку я хотів створити, яку можна використовувати у звітах LuckyTemplates і Power Apps.

Мені також потрібно переконатися, що у нас не буде дублікатів. На цьому етапі важлива якість даних.

Якщо у вас немає якісних даних у джерелі даних, пізніше ви зіткнетеся з проблемами візуалізації.

Створення програми для саміту EDNA

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

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

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

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

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

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

Перейшовши на сторінку планування, можна побачити всі збережені вами сеанси.

Ви можете видалити сеанс звідси або залишити відгук. Ви можете поставити оцінку або написати відгук . Коли ви натискаєте «Надіслати» , ця інформація буде записана в джерело даних, яким у нашому випадку є файл Excel.

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

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

Ієрархія макета: полегшення використання навігації

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

Макет усередині програми відрізняється, тому що під час використання комп’ютера чи планшета люди мають тенденцію сканувати сторінку зверху зліва направо, а потім слідувати шаблону Z або H. Перше, що вони побачать, це верхній лівий кут, а остання частина – нижній правий.

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

На основі цього ви створите макет програми. Що добре в додатку, так це те, що у вас є багато прикладів і на основі цих прикладів ви можете створити щось подібне.

Три частини програми

Отже, в основному у вас є три частини програми. Основна частина – це галерея, яку можна прокручувати великим пальцем і вибирати інформацію.

Другорядною частиною є вкладки. Це кнопки, які ви використовуєте для навігації програмою.

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

Створюючи програму для телефону, є деякі найкращі методи дизайну, які також можна використовувати як у LuckyTemplates, так і в Power Apps. Отримавши хороший рівень розуміння LuckyTemplates і Power Apps, ви побачите, що хороший UX і UI важливіші, коли ви працюєте на маленькому екрані.

Найкращі практики дизайну

Обмежте кількість кліків

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

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

І останнє, але не менш важливе: коли ви створюєте додатки (тут ми говоримо про введення даних), вам потрібно перевіряти інформацію, яка була написана.

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

Дотримуйтесь закону Якоба та закону Парето

Закон Якоба говорить, що користувачі віддадуть перевагу, щоб ваша програма працювала так само, як працюють інші їхні програми . Нижче наведено приклад програм, які найчастіше використовуються у світі: WhatsApp , Messenger і Contacts .

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

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

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

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

Використовуйте виноски

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

Показати дизайн активного стану

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

Забезпечте стани наведення

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

Використовуйте зрозумілі етикетки

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

Забезпечте доступність кольорів/етикеток

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

Передбачте поведінку користувача

У програмі вам потрібно передбачити поведінку користувача. Ви повинні передбачити кожен клік і кожне запитання, яке виникне у користувача.

Виконайте тести зручності використання

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

Отже, це найкращі методи розробки програми. Давайте тепер перейдемо до програми та побачимо ці найкращі практики в дії.

Я зараз у програмі й просто натискаю «Пуск» . Для запуску першої сторінки потрібно лише пару секунд. Це тому, що у мене таймер увімкнено на дві секунди.

Коли таймер досягне двох секунд, він перейде на мій інший екран і створить перехід.

Ми на сторінці входу.

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

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

Я введу Alex B як своє ім’я користувача та test123 як свій пароль, а потім зареєструюся. Ви бачите, що ідентифікатор користувача було створено автоматично.

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

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

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

Якщо користувач натисне це посилання, він перейде до відео YouTube, яке я додаю до файлу.

Але коли ми переходимо до профілю Мудассіра Алі, ми не можемо взаємодіяти з кнопкою Натисніть, щоб відкрити відео . Це приклад показу інформації, лише якщо вона доступна для показу.

У цьому випадку у мене немає відео сеансу Мудассіра Алі, тому я не показую посилання Натисніть, щоб відкрити відео .

Скажімо, ми хочемо взяти участь у сесії Сема Маккея та натискаємо кнопку «Зберегти» . Коли ми збережемо, ми побачимо, що на сторінці є кнопка «Скасувати збереження» , а доповідач Сем Маккей виділено.

Це потрібно для надання контексту, оскільки ми хочемо знати, що користувач вибрав сеанс Сема. Ви відразу побачите, що цей сеанс активний і що є можливість видалити. Якщо ви хочете видалити, ви можете зробити це тут – вам не потрібно робити зайвий клік, щоб скасувати збереження.

Ще одна функція — це можливість підключитися до спікера за допомогою кнопки LinkedIn. Ця кнопка нижче спрямує мене до облікового запису Сема Маккея в LinkedIn.

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

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

Якщо ми повернемося до нашого файлу Excel і перейдемо на вкладку «Планування», ми побачимо всі ці SpeakerID, що означає, що все працює так, як ми очікували.

Скажімо, ми не можемо брати участь у сесії Густава Дудека. Ми можемо натиснути цекнопку. Якщо ми подивимося на мій файл Excel, то побачимо, що інформація Густава Дудека зникла.

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

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

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

Коли ми перевіряємо відгук доповідача в моєму файлі Excel, ви побачите, як ця інформація відображається у форматі HTML.

Для сторінки зворотнього зв’язку ми навіть можемо зробити деякі відповіді обов’язковими як дизайнер звіту, але тут це не так.

Коли ми переходимо до нашого файлу Excel, ми можемо побачити всю цю інформацію, написану на вкладці «Відгуки».

Висновок

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

Ви можете створити екосистему, а потім задовольнити потреби різних аудиторій. Щоб отримати користь від екосистеми Power Platform, вам потрібно знати, як використовувати LuckyTemplates, Power Apps і Power Automate. Ви можете працювати у спільному середовищі та вдосконалювати те, що ви робите, у дуже цікавий спосіб.

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

Всього найкращого,
Алекс Бадіу