ДЕНЬ 15
Дашборды и их композиции
Мобильный дизайн
Мобильный дизайн
СЕГОДНЯ
Смещаемся с сторону финальной сборки дашборда и сегодня рассмотрим принципы проектирования дашбордов отталкиваясь от мобильного дизайна и двигаясь к крупным форматам. Обсудим правила мобильного дизайна и перейдем к композиции, в которой поговорим о работе цвета, иерархиях и свободе проектирования. Далее знакомимся с Qlik Sense Mobile и узнаем об основных возможностях Чат-бота в Телеграмм. Из практики сегодня пять вопросов по мобильным дашбордам для дискутирования и на книжной полке потрясающее издание Билла Бакстона об эскизах пользовательского опыта. Ну, что. Клик клик ура! Ныряем.
Смещаемся с сторону финальной сборки дашборда и сегодня рассмотрим принципы проектирования дашбордов отталкиваясь от мобильного дизайна и двигаясь к крупным форматам. Обсудим правила мобильного дизайна и перейдем к композиции, в которой поговорим о работе цвета, иерархиях и свободе проектирования. Далее знакомимся с Qlik Sense Mobile и узнаем об основных возможностях Чат-бота в Телеграмм. Из практики сегодня пять вопросов по мобильным дашбордам для дискутирования и на книжной полке потрясающее издание Билла Бакстона об эскизах пользовательского опыта. Ну, что. Клик клик ура! Ныряем.
Разбираемся
На пути к этому уроку вы уже освоили принципы работы с QlikSense, поняли как готовятся отчеты, что это такое, и преимущества QlikSense перед другими технологиями. Если вы дошли до данного урока, то вам действительно интересна тема отчетности на QlikSense! Сегодня мы рассмотрим более обобщенную тему – мобильный дизайн. Изучая данную тему, мы будем брать во внимание тот факт, что готовый дашборд QlikSense все же является веб-ресурсом. Хоть у QlikSense и присутствует толстый клиент (Qlik Sense Desktop), но он является именно веб-ресурсом, используя движок браузера.
Рост популярности мобильного контента
В последнее время существенно возросла популярность использования мобильных устройств в качестве инструмента для получения актуальной бизнес-информации. Задач топ-менеджмента зачастую появляются из ниоткуда, когда под рукой есть только мобильные устройства, и возникает потребность узнать основную сводку информации здесь и сейчас. Именно поэтому, при идеальном пути развития событий, каждый дашборд должен иметь мобильную версию дизайна. Конечно же любой дашборд можно открыть на смартфоне в его "десктопной версии", но юзабилити такого неоптимального дашборда будет приближено к нулю. Причина самая очевидная – разница размеров и разрешений экранов устройств. Некоторые из вас удивятся: «Зачем специально разрабатывать дашборды с мобильным дизайном, ведь практически все современные устройства имеют высокое разрешение экрана, сопоставимое с разрешением монитора или экрана ноутбука?». Да, это действительно так, но, в таких случаях забывают о том, что исходное разрешение компьютера находится на более меньшем физическом размере экрана, а в таком случае возникают вопросы удобства пользования дашбордом.
Решая проблему разработки мобильного дизайна, можно использовать способ разработки, который называется Mobile First. Он очень хорош при разработке любого WEB-ориентированного продукта, сценарии использования которого содержат мобильные устройства. Так же он подходит и для разработки QlikSense дашбордов, ведь, как было отмечено ранее – они тоже являются интернет-ресурсом.
Mobile First – это подход изначальной верстки продукта на мобильные устройства, и только затем – переход к более крупным форматам чтения контента.
В первое время использования философии разработки Mobile First, вы столкнетесь с проблемами, которые связаны в большей степени с тем, что он изменяет привычный уклад, стандартный ход разработки. Большинство из разработчиков (пока еще) создает дашборды сначала под большие экраны, а потом, при необходимости, ломают голову над тем, как в кратчайшие сроки сделать его удобным на, например, смартфонах. Следуя же принципам Mobile First, надо будет сначала разрабатывать мобильный дизайн, а потом уже переходить к дизайну для больших экранов.
В первое время использования философии разработки Mobile First, вы столкнетесь с проблемами, которые связаны в большей степени с тем, что он изменяет привычный уклад, стандартный ход разработки. Большинство из разработчиков (пока еще) создает дашборды сначала под большие экраны, а потом, при необходимости, ломают голову над тем, как в кратчайшие сроки сделать его удобным на, например, смартфонах. Следуя же принципам Mobile First, надо будет сначала разрабатывать мобильный дизайн, а потом уже переходить к дизайну для больших экранов.
Основные правила мобильного дизайна
Что учесть при разработке
У данного способа разработки есть много требований. Понадобится очень много времени, чтобы изучить и понять их все, научиться применять на практике. Давайте мы остановимся только на самых важных, которые могут пригодиться в первую очередь.
Только самое главное
Никогда не пытайтесь отобразить абсолютно все показатели, которые планировались в полноценном отчете, в мобильной версии дашборда. Да, бизнес будет сопротивляться, а вам самим будет казаться, что это неверно, что все важно. В таком случае, давайте обратимся к опыту и практике – они говорят, что если пользователь решил открыть дашборд через мобильное устройство, то, как ему бы не казалось на момент проектирования отчета, по факту, ему интересны будут только ключевые показатели – KPI. Приучите пользователя к тому, что мобильные версии отчетов необходимы только для оценки текущей ситуации в целом, детальной же аналитикой необходимо заниматься, используя полноценный отчет. Необходимо различать эти области применения.
Простота вычислений
Давайте всегда помнить о том, что мы рассматриваем использование дашбордов на мобильных устройствах. Значит потребность в использовании отчета с телефона возникла, скорее всего, экстренно. Соответственно, чем проще будут формулы в объектах, отображаемых в мобильной версии листов, тем быстрее он будет работать. Всем неприятно, когда любимая социальная сеть очень медленно работает, обмен сообщениями проходит долго, а любимый фильм в онлайн-кинотеатре заикается каждые пять секунд. Представьте пользователя отчета, у которого оный будет открываться более минуты, а то и нескольких. А если пользователь отчета будет использовать мобильный интернет, который в больших помещениях может быть очень нестабильным?
К тому же, визуализации на листе отрисовываются на клиентской части с помощью JavaScript, поэтому лучше не перегружать мобильный дизайн большим количеством сложных визуализаций.
К тому же, визуализации на листе отрисовываются на клиентской части с помощью JavaScript, поэтому лучше не перегружать мобильный дизайн большим количеством сложных визуализаций.
Простота дизайна
Функциональное пространство экранов мобильных устройств очень ограничено. Именно по этой причине, не надо «перегружать» интерфейс элементами. Дайте «больше свободы», пусть будет больше белого пространства. Лучше добавить прокрутку листа, чем пытаться уместить все на один экран. Особое внимание придется уделить фильтрам, ведь если KPI показатели обычно представлены только для чтения, то с фильтрами пользователь взаимодействует, поэтому важно, чтобы размеры фильтров и их расположение было очень хорошо продумано.
Композиция дашбордов
Принципы и правила разработки это примерно половина проблемы. Вторая проблема – правильное наполнение элементами и их расположение на листе. Композиция важна не только в мобильном дизайне, но и в десктопном. Композиция представляет собой сочетание элементов (в нашем случае – визуализаций дашборда). Не надо рассматривать композицию как свойство, которое присуще только творениям человека. Композиция присутствует везде – в строении вселенной, животных, природе. Главное правило – дизайн должен располагать к себе. Не отвлекать пользователей от той проблемы, которую они надеятся решить благодаря вашему дашборду.
Присутствие композиции человек всегда ощущает на интуитивном уровне. Можно сказать, что это ощущение «простоты, удобства и красоты». На тему композиции можно рассуждать много, так как она детализируется до мельчайших частей. Давайте рассмотрим только самые главные, «глобальные», моменты при построении правильной композиции.
Присутствие композиции человек всегда ощущает на интуитивном уровне. Можно сказать, что это ощущение «простоты, удобства и красоты». На тему композиции можно рассуждать много, так как она детализируется до мельчайших частей. Давайте рассмотрим только самые главные, «глобальные», моменты при построении правильной композиции.
Цвет
Восприятие информации человеком во многом зависит от цвета. Человек благодаря своему опыту отождествляет цвета с определенными параметрами, например цвета светофора (зеленый – можно идти/ехать, все хорошо; красный – стой на месте). Необходимо учесть это и использовать цветовые акценты для привлечения внимания человека, либо передачи ему главной информации. Особенно это полезно, когда очень мало места для творчества, текст-пояснение получается не совсем удобным для восприятия и чтения, им приходится жертвовать.
Элементарные связи цветов людей на графиках и KPI схожи с цветами светофора:
- Красный – плохо, падение показателя, невыполнение плана;
- Зеленый – все отлично, рост, перевыполнение плана, или просто значение выше ожидаемого;
- Оранжевый – моменты, на которые стоит обратить внимание - есть небольшое ухудшение, но тревогу бить еще рановато)
В аналитике добавляется еще один цвет – черный (можно применять серый), он ассоциируется с тем, что с показателем все хорошо, на него можно пока не обращать внимание. Внимание надо уделить тем показателям, которые соответствуют описанным выше, ярким цветам.
Правило третей
Об этом правиле сказано в интернете и всевозможных курсах уже многое. На первый взгляд, это правило не имеет никакого отношения к дашбордам, но это не так. Например, при наличии большого количества KPI на странице (чего, все же, лучше избегать по умолчанию, но допустим, что у вас нет выбора и надо как-то сгладить этот грубый недостаток), это правило очень хорошо помогает привлечь внимание пользователя к наиболее важным объектам. Неизменное описание правила третей: поделите страницу на девять равных частей, проведя две горизонтальные и две вертикальные линии, после чего следуйте фактам – люди фокусируются именно на точках пересечения линий, поэтому самые важные показатели предпочтительно располагать на этих точках. Однако, мы же знаем, что у любого правила есть две стороны, в конце данного урока вы найдете материалы, один из них будет весьма интересен – «Почему стоит нарушать правило третей?».
Больше остальных задействован большой палец – ему очень легко дотягиваться до элементов в зеленой зоне, но невозможно достать до красных углов. Не добавляйте важные элементы в красную зону, или хотя бы компенсируйте большими по размеру кнопками. A List Apart
Свобода
Как уже отмечалось ранее – главное правило любого дизайна – больше свободы. Дизайн, как набор норм и правил, с течением времени претерпел множество пересмотров. Самый первый дизайн был простым – он практически отсутствовал, главное было – расположение текстового контента. Потом в моду вошли разные элементы украшения, «реалистичная объемность», но в итоге мы получили очень перегруженные элементами ресурсы. И вот, можно сказать, благодаря опыту, мы пришли к хорошему «просторному» дизайну. Главное правило такого дизайна – меньше рекламы, больше «воздуха», в нашем случае – просто, больше «воздуха», то есть пустого пространства. Необходимо стараться не нагружать страницу. Если у вас очень много элементов на странице, значит вы пошли по плохому пути и стоит заняться «уборкой», лишнее отправить в «мусорку». Вы можете сказать что лишних элементов на дашборде нет, но, чаще всего – лишние элементы есть всегда. Иногда может понадобиться переработать всю структуру дашборда, но оно того стоит – результат удовлетворит потребности пользователя и сделает вас счастливым.
Иерархия
Учёные провели множество исследований, которые посвящены тому, как люди просматривают страницы. Оказалось, что путь глаз человека в этот момент напоминает букву Z или F. Об этом важно помнить при расположении элементов на странице. Но это не означает категорический отказ от других путей изучения страницы. Вы можете с помощью определенных манипуляций «заставить» человека пойти по вашему пути. Сделать это можно благодаря правильно подобранным цветам, размерам элементов, картинкам, комбинациям шрифтов, и самым полезным элементам – вертикальным и горизонтальным линиям.
Qlik Sense Mobile
Qlik Sense Mobile – это нативное приложение для iOS, которое позволяет людям использовать возможности Qlik Sense как в сети, так и в автономном режиме. С помощью Qlik Sense Mobile пользователи могут подключаться к пространствам Qlik Sense, использовать возможности сервера в режиме онлайн и загружать приложения для автономного использования.
Преимущества мобильного приложения:
+ адаптивный дизайн
+ удобный интерфейс с поддержкой жестов
+ оффлайн-режим
+ приложения, созданные в вебе, легко трансформируются под мобильные устройства
Преимущества мобильного приложения:
+ адаптивный дизайн
+ удобный интерфейс с поддержкой жестов
+ оффлайн-режим
+ приложения, созданные в вебе, легко трансформируются под мобильные устройства
Чаты, боты? Telegram!
В конце дня, стоит упомянуть об одной очень удобной возможности QlikSense – общение с отчетностью через Telegram! В запасе фишек Qlik есть QlikBotNet –чат-бот с открытым исходным кодом, который позволяет работать с отчетностью через мессенджер Telegram. Чат-бот может быть удобным помощником, с помощью него можно:
- Отправлять оповещения пользователям
- Получать диаграммы непосредственно в Telegram
- Управлять измерениями и получать KPI на их основе
- Производить запросы на естественном языке
Практикуемся
Сегодня мы предлагаем вам подискутировать на тему мобильного дизайна дашбордов.
Решение прошлого дня 14.
Решение прошлого дня 14.
1. Почему важен мобильный дизайн?
В современном мире информацию необходимо получать оперативно, а не только сидя в офисе на рабочем месте. Возрастает доля людей, пользующихся мобильными устройствами.
2. Почему при разработке в первую очередь учитывают мобильный дизайн?
Мобильный дизайн необходимо учитывать в первую очередь при разработке с целью соблюдения правила "от меньшего к большему", "от простого к сложному". На экранах мобильных устройств не поместится много информации, это позволит нам выбрать только самые важные показатели.
3. Каковы основные правила мобильного дизайна? Сможете описать их принципы?
Только самое главное – не надо пытаться уместить всю информацию в мобильной версии отчета, в ней важна не аналитика, а только оценка текущей ситуации по KPI. Простота вычислений – необходимо использовать легкие визуализации и формулы, т.к. пользователь может иметь не очень качественное интернет соединение. Простота дизайна – экраны мобильных устройств и так малы, не надо перегружать их информацией.
4. Почему при разработке дашборда важна композиция?
Композиция позволяет сделать процесс изучения данных приятным и легким, акцентировать внимание только на самых главных элементах.
5. Какими способами можно нацелить внимание человека на нужные элементы?
Привлечь внимание пользователя к нужным элементам дизайна можно с помощью цвета, использования правила третей, иерархии. Но так же можно заставить пользователя изучать данные по другому пути, используя размеры текста, картинки, цвета, шрифты, вертикальные и горизонтальные разделители.
Неосвещенные в теме, или неоднозначные, вопросы для оценки своего процесса:
Вы используете мобильные версии продуктов? Какие важные элементы в мобильном дизайне Вы бы выделили конкретно для себя?
Жорж:
Почему иногда можно отойти от правил?
ДАТА ЙОГА:
Не стоит слепо следовать правилам. Могут быть цели, достижение которых невозможно при использовании всех правил. Ведь, может быть так, что вам просто необходимо разместить очень много показателей на один экран, и при пересмотре детализации они не уменьшились, вот тогда и стоит забыть о правилах.
Вдохновляемся
Изучаем прекрасное в сети
Полезные ссылки по теме
Сегодня в программе интересные тренды и примеры использования баров в визуализации. Насмотренность примерами из разных областей дает возможность как искусствоведам так и биржевым трейдерам в нужное время чувствовать что прекрасно подходит в их текущей ситуации. Эта техника хорошо зарекомендовала себя во многих образовательных программах - берем ее на вооружение.
Погружаемся
В тематические книжки и видео
Артефакты
Помогут Вам лучше усвоить и вовремя вспомнить основные элементы методик, подходов, последовательностей действий, проверенных практик
Книги
В целом, цель этой книги – построить понятие информированного дизайна.
Основанная как на практике, так и на научных исследованиях, увлекательная работа Билла Бакстона направлена на то, чтобы пробудить воображение и стимулировать использование новых методов, вдохнуть новую жизнь в дизайн пользовательского опыта. Книга охватывает эскизы и методы проектирования раннего прототипирования, сотовые телефоны, которые общаются друг с другом и другими встроенными системами, «умными» приборами, тематические исследования, примеры, упражнения и проекты, а также доступ к видеоклипам, демонстрирующим принципы и методы.
Основанная как на практике, так и на научных исследованиях, увлекательная работа Билла Бакстона направлена на то, чтобы пробудить воображение и стимулировать использование новых методов, вдохнуть новую жизнь в дизайн пользовательского опыта. Книга охватывает эскизы и методы проектирования раннего прототипирования, сотовые телефоны, которые общаются друг с другом и другими встроенными системами, «умными» приборами, тематические исследования, примеры, упражнения и проекты, а также доступ к видеоклипам, демонстрирующим принципы и методы.
Итоги этапа
Уверены, что вы не забыли просмотреть линки сегодняшнего дня, ответили на вопросы и залипли на скетчах Билла Бакстона. Заметили как распределяются зоны на мобильном устройстве? Если нет, то материал можно перечитать еще раз. Ну что? Готовим интересные вопросы в чат для коллег и не очень коллег. Ждем новую тему. До завтра всем. Клик клик урааа!
~
