Рассказывание историй и дизайн на основе данных в действии

В сегодняшней статье я хочу поговорить о сторителлинге и дизайне на основе данных в действии. Я был одним из докладчиков на недавно завершившемся Саммите по визуализации данных 2022, представленном LuckyTemplates в мае прошлого года.

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

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

Вот так я нашел эту историю. Я хотел создать что-то, где я мог бы продемонстрировать саммит с точки зрения аудитории, спикера и организатора.

Оглавление

• Потребности бизнеса до, во время и после саммита
  • Перед саммитом
  • Во время саммита
  • После саммита
• Создание экосистемы
• Наши таблицы размеров: User ID и Speaker ID
• Создание приложения для саммита EDNA
• Иерархия макета: упрощение навигации
• Три части приложения
• Лучшие практики проектирования
  • Ограничьте количество кликов
  • Следуйте закону Якоба и закону Парето
  • Используйте выноски
  • Показать дизайн в активном состоянии
  • Обеспечьте состояния наведения
  • Используйте понятные ярлыки
  • Обеспечить доступные цвета/метки
  • Предвидеть поведение пользователя
  • Проведите юзабилити-тесты
• Заключение

Потребности бизнеса до, во время и после саммита

Если вы спикер, вам интересно узнать об отзывах аудитории. Если вы организатор мероприятия, то хотите знать, сколько людей приедет на саммит и какие презентации для них наиболее ценны.

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

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

Я подумал, что для аудитории будет очень ценно иметь приложение или отчет, который будет использоваться в три разных момента: до саммита , во время саммита и после саммита .

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

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

Во время саммита

Затем вам нужно подготовить и спланировать свою повестку дня. Это означает, что во время саммита вы проверите все сессии и увидите, в каких хотите участвовать.

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

После саммита

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

С точки зрения организаторов, вас интересуют общие отзывы после саммита и рекомендации по будущим темам. Вы хотите выявить новых спикеров и рассчитать влияние саммита на участников.

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

Нам нужно создать что-то, что сможет удовлетворить эти потребности во время саммита. Что вам нужно, так это иметь что-то для мобильных устройств и что-то, к чему легко получить доступ, чтобы участники могли сразу найти ссылку на сеанс.

Основываясь на этих потребностях, как вы можете создать историю? Мы говорим не только об отчете LuckyTemplates или отчете Power Apps. Мы говорим об экосистеме. Эти экосистемы имеют разные потребности в разные моменты времени, но они также связаны между собой. Это история, которую я хочу рассказать сегодня.

Создание экосистемы

Во-первых, нам нужно планировать. Нам нужно точно знать, что мы хотим создать, и создать это таким образом, чтобы его можно было использовать в других целях.

Итак, чтобы удовлетворить потребности, о которых я говорил ранее, нам нужно создать приложение Power Apps , которое станет точкой ввода данных, которая поможет участникам саммита и даст им право голоса.

Наши таблицы размеров: User ID и Speaker ID

На основе этого приложения мы создадим отчеты для визуализации данных обратной связи саммита. Это означает, что отчет LuckyTemplates должен будет подключаться к данным, созданным приложением.

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

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

Я записал свои идеи в файл Excel и начал воплощать их в жизнь. Я создал разные вкладки и разные таблицы, которые должны использоваться Power Apps.

Чтобы создать приложение с использованием до, во время и после, мне нужна история пользователей. Поэтому я создал таблицу для идентификатора пользователя и начал с идентификатора пользователя, имени пользователя, пароля, возраста, страны и уровня опыта работы с LuckyTemplates.

Конечно, мне также нужна еще одна таблица для идентификатора спикера с информацией о спикерах, их названии, теме, дне, часе, фото, ссылке на YouTube, адресе LinkedIn и идентификаторах LuckyTemplates.

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

Вместо этого я попросил указать возрастной диапазон, чтобы понять, сколько лет участникам этих сессий.

User ID и Speaker ID — это параметры, которые мне понадобятся позже в LuckyTemplates. Мне также нужна таблица фактов , в которой я свяжу идентификатор пользователя с идентификатором докладчика, чтобы создать страницы планирования и обратной связи о сессиях.

Что хорошо в этом файле, так это то, что у меня есть реальные данные. У меня есть все спикеры для саммита в правильном порядке, с правильными темами и правильным описанием.

Это просто для демонстрации прототипа того, как подобное приложение будет выглядеть для LuckyTemplates. Вот почему я хотел зайти так далеко, как только смогу.

Здесь у нас есть Planning , таблица фактов в LuckyTemplates, где я могу создавать отношения и получать информацию об идентификаторе пользователя и идентификаторе докладчика.

Затем у нас есть обратная связь докладчика , которая является второй таблицей фактов с идентификатором пользователя, идентификатором докладчика, рейтингом сеанса, отзывом, который человек даст сеансу, пользователями, просматривающими этот сеанс в прямом эфире или нет, и данные, которые они рассматривают.

Это то, чем вы можете легко управлять в LuckyTemplates, имея только одну большую таблицу фактов.

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

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

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

И, наконец, часовой пояс страны. Если вы перейдете на страницу саммита LuckyTemplates, вы увидите информацию о времени сеансов в Лос-Анджелесе, Нью-Йорке, Лондоне, Сиднее и Окленде.

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

Это структура приложений, которые я хотел создать, которые можно использовать в отчетах LuckyTemplates и Power Apps.

Мне также нужно убедиться, что у нас не будет дубликатов. На этом этапе важно качество данных.

Если у вас нет качества данных в источнике данных, позже вы столкнетесь с проблемами в визуализациях.

Создание приложения для саммита EDNA

Это общее приложение. Я покажу вам каждую страницу, как она работает и как она работает в динамике. Я также покажу интересные советы по дизайну, которые я добавил в приложение.

Я начал с приветственной страницы . Как видите, я использовал ту же структуру, тему и цвета, что и LuckyTemplates.

Этот временный экран — первый опыт. Когда вы подключитесь к этому приложению, оно будет отображаться в течение нескольких секунд, а затем оно изменится на страницу входа.

Для входа в систему вы должны указать имя пользователя и пароль или создать учетную запись. Когда вы создаете учетную запись и регистрируетесь, эта информация будет добавлена ​​к данным внутри нашего файла Excel.

После регистрации мы переходим к основной части приложения, состоящей из галереи со всеми спикерами сессии. Для каждого сеанса дата, час и время представлены по местному времени. Также представлены название и тема.

Если вы хотите получить более подробную информацию, вы можете нажать на сеанс, чтобы получить дополнительные сведения, такие как заголовок, время, дата и сводка сеанса. Если вы найдете это интересным, вы можете нажать «Сохранить» , чтобы сохранить этот сеанс на потом.

Когда вы переходите на страницу «Планирование», вы можете увидеть все сеансы, которые вы сохранили.

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

Как видите, общий опыт для пользователя очень приятный. Это создает ценность для пользователя и в то же время представляет ценность для организаторов, которые будут использовать эти данные внутри LuckyTemplates.

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

Иерархия макета: упрощение навигации

Создание приложений на мобильных устройствах отличается от тех, которые вы создаете в отчете LuckyTemplates. Это отличается, потому что вы не используете их таким же образом.

Макет внутри приложения отличается, потому что при использовании компьютера или планшета люди имеют тенденцию сканировать страницу сверху слева направо, а затем следовать своего рода Z-шаблону или H-шаблону. Первое, что они увидят, — это верхний левый угол, а последнее — нижний правый.

Это не то же самое для приложения для телефона, как вы можете видеть на этом изображении ниже. Зеленая часть — это то место, где большой палец будет легко двигаться, оранжевая часть немного растянута, а красная часть наиболее труднодоступна.

На его основе вы создадите макет приложения. Что хорошо в приложении, так это то, что у вас есть много примеров и на основе этих примеров вы можете создать что-то подобное.

Три части приложения

Таким образом, в основном у вас есть три части в приложении. Основная часть — это галерея, которую можно прокручивать большим пальцем и выбирать информацию.

Второстепенная часть — вкладки. Это кнопки, которые вы используете для навигации по приложению.

Третичная часть , с которой вы будете взаимодействовать меньше всего, — это название саммита, учетная запись профиля или функция поиска.

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

Лучшие практики проектирования

Ограничьте количество кликов

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

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

И последнее, но не менее важное: при создании приложений (здесь речь идет о вводе данных) необходимо проверять информацию, которая была записана.

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

Следуйте закону Якоба и закону Парето

Закон Джейкоба гласит, что пользователи предпочтут, чтобы ваше приложение работало так же, как и другие их приложения . Ниже приведен пример наиболее часто используемых в мире приложений: WhatsApp , Messenger и Contacts .

У нас есть аналогичный опыт в приложениях, которые я создал. У нас есть галерея посередине, кнопки внизу и функция поиска или контакты вверху.

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

Вам не нужно создавать все функции в приложении, но функции, которые вам необходимо создать, должны быть действительно хорошо реализованы и хорошо протестированы.

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

Используйте выноски

Используйте выноски, чтобы указать пользователю, что делать дальше. Например, если вы хотите что-то купить, вы увидите кнопку «Купить» другого цвета, чтобы привлечь ваше внимание. Это индикатор следующего шага, который вам нужно сделать.

Показать дизайн в активном состоянии

Когда дело доходит до навигации, вам нужно указать, где находится пользователь на конкретной странице. Если они не знают, где они находятся в приложении, это не очень хороший пользовательский опыт.

Обеспечьте состояния наведения

Это используется для кнопок. При наведении курсора на кнопку вы увидите, что она активна. Эффект наведения дает пользователям четкий сигнал, чтобы увидеть, что кликабельно, и говорит им, что щелкнуть.

Используйте понятные ярлыки

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

Обеспечить доступные цвета/метки

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

Предвидеть поведение пользователя

В приложении вам нужно предвидеть поведение пользователя. Вы должны предвидеть каждый клик и каждый вопрос, который будет у пользователя.

Проведите юзабилити-тесты

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

Так что это лучшие практики в разработке приложения. Давайте теперь перейдем к приложению и посмотрим на эти лучшие практики в действии.

Я сейчас в приложении, и я просто нажму Start . Первая страница запускается всего за пару секунд. Это потому, что у меня есть таймер на две секунды.

Когда таймер достигнет двух секунд, он перейдет к другому моему экрану и создаст переход.

Мы находимся на странице входа.

Мы введем имя пользователя и пароль для подключения к этому приложению. В этот момент приложение за кулисами сохранит информацию о вашем идентификаторе пользователя.

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

Я введу Alex B в качестве имени пользователя и test123 в качестве пароля, а затем зарегистрируюсь. Вы можете видеть, что идентификатор пользователя был создан автоматически.

Вы должны обратить внимание на все проблемы, когда дело доходит до ввода данных. Вы, как создатель приложения, должны предвидеть эти проблемы и создавать решения, чтобы их избежать.

Возвращаясь к приложению, у меня есть список всех спикеров сессии, и я вижу, что часы рассчитываются по моему местному времени.

Допустим, мы хотим участвовать в сеансе Сэма Маккея. Когда мы нажимаем на ссылку, мы видим, что прямо под его фотографией есть ссылка « Нажмите, чтобы открыть видео» .

Если пользователь нажмет на эту ссылку, он будет перенаправлен на видео YouTube, которое я поместил в файл.

Но когда мы заходим в профиль Мудассира Али, мы не можем взаимодействовать с кнопкой «Нажмите, чтобы открыть видео» . Это пример отображения информации только в том случае, если она доступна для отображения.

В этом случае у меня нет видео сеанса Мудассира Али, поэтому я не показываю ссылку « Нажмите, чтобы открыть видео» .

Допустим, мы хотим участвовать в сеансе Сэма Маккея и нажимаем кнопку Сохранить . После сохранения мы видим, что на странице есть кнопка «Отменить сохранение» и выделен динамик Сэм Маккей.

Это необходимо для предоставления контекста, поскольку мы хотим знать, что пользователь выбрал сеанс Сэма. Сразу видно, что эта сессия активна и есть возможность ее удалить. Если вы хотите удалить, вы можете сделать это отсюда — вам не нужно делать дополнительный щелчок, чтобы отменить сохранение.

Еще одна функция — возможность подключения к спикеру через кнопку LinkedIn. Эта кнопка ниже направит меня к учетной записи LinkedIn Сэма Маккея.

Теперь, когда у нас сохранена пара сессий из списка, переходим в Planning .

Когда мы идем в Planning , то за кулисами происходит то, что вся эта информация будет собрана во временную коллекцию и будет записана в источник данных.

Если мы вернемся к нашему файлу Excel и перейдем на вкладку «Планирование», мы увидим все эти идентификаторы SpeakerID, что означает, что все работает так, как мы ожидали.

Допустим, мы не можем участвовать в сеансе Густава Дудека. Мы можем нажать эту кнопку «Удалить» . Если мы посмотрим на мой файл Excel, мы увидим, что информация Густава Дудека исчезла.

Как я уже говорил ранее, хорошо иметь состояние, в котором он показывает, где вы находитесь в навигации. Как вы можете хорошо видеть по нижним значкам, мы находимся на странице планирования.

Допустим, мы участвовали в сеансе и оценили его на четыре звезды из шести. Эта информация предварительно сохраняется, поэтому, если мы передумаем, мы сможем вернуться к ней позже, чтобы изменить нашу оценку.

После того, как мы увидели презентацию вживую, мы можем оставить отзыв и добавить смайлик, а затем нажать «Отправить» .

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

Для страницы обратной связи мы можем даже сделать некоторые ответы обязательными как дизайнер отчетов, но здесь это не так.

Когда мы переходим к нашему файлу Excel, мы видим всю эту информацию, записанную на вкладке «Обратная связь».

Рассказывание историй о данных: продуманное планирование и процесс создания

Создавайте отчеты LuckyTemplates с помощью этих методов и примеров

Заключение

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

Вы можете создать экосистему, а затем удовлетворить потребности разных аудиторий. Чтобы извлечь выгоду из экосистемы Power Platform, вам необходимо знать, как использовать LuckyTemplates, Power Apps и Power Automate. Вы можете работать в среде для совместной работы и улучшать то, что вы делаете, в очень увлекательной форме.

Обратите внимание, что это приложение не существует. Он существует только в моем сознании и является всего лишь прототипом. Но кто знает, может быть, в будущем у нас появится такое приложение для LuckyTemplates .

Всего наилучшего,
Алекс Бадиу