ДЕНЬ 35
Про мобильный дизайн
СЕГОДНЯ:
Быстро забежим на территорию будущих многолюдных проектов, так как мобильный дизайн – быстрорастущая и неизведанная территория, набирающая силу в крупных организациях. Рассмотрим концепции мобильных форматов для проектирования и использования дашбордов. Советы, трюки и тактические решения. Даем ссылки на изучение работ практиков Tableau mobile. Для тех кто хочет опираться на советы бывалых из мира мобильного UX дизайна – добавили свежее издание практических советов от Мэта Лейси. Приготовили гаджеты и вперед. Побежали.
Быстро забежим на территорию будущих многолюдных проектов, так как мобильный дизайн – быстрорастущая и неизведанная территория, набирающая силу в крупных организациях. Рассмотрим концепции мобильных форматов для проектирования и использования дашбордов. Советы, трюки и тактические решения. Даем ссылки на изучение работ практиков Tableau mobile. Для тех кто хочет опираться на советы бывалых из мира мобильного UX дизайна – добавили свежее издание практических советов от Мэта Лейси. Приготовили гаджеты и вперед. Побежали.
РАЗБИРАЕМСЯ
Mobile First? Начнем с малого?
Популярная концепция разработки интерфейсов Mobile First теперь и в дашбордах. Аудитория мобильных дашбордов увеличивается, как и растет количество и разнообразие портативных устройств. Просмотр самых важных данных тогда, когда это удобно. Когда нам ждать версии дашбордов на смарт-часах?
Как разрабатывать дашборды под мобильные телефоны? В чем особенности процесса?Чего нужно избегать? Как вообще со всем этим разобраться?
Первый совет простой. Начинать собирать дашборд с нуля именно для мобильных телефонов, и только поток переделывать мобильную версию под основную. Так проще, чем идти стандартным путем: от основной к мобильной. И совет достаточно простой, но будем честны: большинству сложно поменять свои привычки и устоявшийся процесс разработки.
Как разрабатывать дашборды под мобильные телефоны? В чем особенности процесса?Чего нужно избегать? Как вообще со всем этим разобраться?
Первый совет простой. Начинать собирать дашборд с нуля именно для мобильных телефонов, и только поток переделывать мобильную версию под основную. Так проще, чем идти стандартным путем: от основной к мобильной. И совет достаточно простой, но будем честны: большинству сложно поменять свои привычки и устоявшийся процесс разработки.
От малого к большому, от мобильного дизайна к полному экрану. Фото Sophie Sparks.
Особенности проектирования мобильных дашбордов
При разработке мобильных дашбордов ставьте себя на место будущей аудитории. Как они будут взаимодействовать с данными? Какие графики удобно смотреть на маленьких экранах. Какие нет? Заметят ли они такие фильтры, будут ли они удобными? Увидят ли мелкий шрифт в аннотациях? Постарайтесь продумать все детали и мелочи, чтобы дашборд был удобным в использовании с телефона, а не с компьютера пока вы его собираете.
Как должен идти ваш поток рассуждений?
Свободного места на экранах мобильных телефонов гораздо меньше, чем на больших мониторах. Поэтому нужно подобрать правильный макет. Ориентация телефона может быть как вертикальной, так и горизонтальной. Поэтому, размеры дашборда должны в идеале быть адаптивными. А какое разрешение экрана основное у моей аудитории? Можно ли сделать универсальный размер дашборда? Элементы на дашборде должны быть удобны для взаимодействия пальцами, так как в телефонах нет курсора. Поэтому, все элементы взаимодействия должны быть крупнее.
...И это только первые мысли. Но не пугайтесь. Ниже мы дадим основные рекомендации по разработке для мобильных устройств.
Как должен идти ваш поток рассуждений?
Свободного места на экранах мобильных телефонов гораздо меньше, чем на больших мониторах. Поэтому нужно подобрать правильный макет. Ориентация телефона может быть как вертикальной, так и горизонтальной. Поэтому, размеры дашборда должны в идеале быть адаптивными. А какое разрешение экрана основное у моей аудитории? Можно ли сделать универсальный размер дашборда? Элементы на дашборде должны быть удобны для взаимодействия пальцами, так как в телефонах нет курсора. Поэтому, все элементы взаимодействия должны быть крупнее.
...И это только первые мысли. Но не пугайтесь. Ниже мы дадим основные рекомендации по разработке для мобильных устройств.
Избегайте перегруженность объектами
Чем меньше доступного пространства на экране, тем тщательнее нужно подбирать объекты дашборда. Какая информация наиболее необходима?
Убирайте ненужные диаграммы, фильтры, заголовки и легенды. Затем замените фильтры, занимающие много места: например, полный список значений на выпадающий список (single value (list) – single value (dropdown). Это сохранит много места на дашборде.
Чем меньше доступного пространства на экране, тем тщательнее нужно подбирать объекты дашборда. Какая информация наиболее необходима?
Убирайте ненужные диаграммы, фильтры, заголовки и легенды. Затем замените фильтры, занимающие много места: например, полный список значений на выпадающий список (single value (list) – single value (dropdown). Это сохранит много места на дашборде.
Большинство людей держит телефоны вертикально. A List Apart
Организуйте свой дашборд
Почти все используют телефон вертикально. Если вам не нужно показывать объемную карту или таймлайн, то выбирайте вертикальный макет дашборда под мобильные телефоны и небольшие планшеты.
Вы можете ориентироваться на следующую иерархию элементов:
Почти все используют телефон вертикально. Если вам не нужно показывать объемную карту или таймлайн, то выбирайте вертикальный макет дашборда под мобильные телефоны и небольшие планшеты.
Вы можете ориентироваться на следующую иерархию элементов:
- Заголовок и/или ключевая метрика
- Фильтры (располагайте вертикально друг за другом – так легче на них нажимать)
- Визуализация
- Легенда к визуализации, если необходимо
- Дополнительные визуализации, если необходимо
Больше остальных задействован большой палец – ему очень легко дотягиваться до элементов в зеленой зоне, но невозможно достать до красных углов. Не добавляйте важные элементы в красную зону, или хотя бы компенсируйте большими по размеру кнопками. A List Apart
Всегда используйте диапазон размеров
Выбор диапазона размеров дашборда (Range Sizing) – наиболее адаптивный вариант сборки дашбордов в Tableau. Вы задаете минимальную и максимальную ширину (и высоту), на которых хотите показывать дашборд. В зависимости от разрешения экрана при просмотре, Tableau динамически изменяет размеры дашборда, подгоняя его под размеры экрана, но при этом оставаясь в рамках заданных вами параметров.
Эта опция отлично подходит под проектирование дашбордов для мобильных устройств, она решает проблему портретной или альбомной ориентации телефона. Задайте минимальные границы диапазона на основе разрешения телефона с самым небольшим экраном у вашей аудитории – например, iPhone 5 с его 320 пикселями в ширину. И задайте максимальные границы на основе среднего размера небольших планшетов – примерно от 500 до 800 пикселей в ширину. Высота не так важна как ширина дашборда. Люди привыкли прокручивать контент вертикально и это более привычно, чем горизонтальная прокрутка.
Выбор диапазона размеров дашборда (Range Sizing) – наиболее адаптивный вариант сборки дашбордов в Tableau. Вы задаете минимальную и максимальную ширину (и высоту), на которых хотите показывать дашборд. В зависимости от разрешения экрана при просмотре, Tableau динамически изменяет размеры дашборда, подгоняя его под размеры экрана, но при этом оставаясь в рамках заданных вами параметров.
Эта опция отлично подходит под проектирование дашбордов для мобильных устройств, она решает проблему портретной или альбомной ориентации телефона. Задайте минимальные границы диапазона на основе разрешения телефона с самым небольшим экраном у вашей аудитории – например, iPhone 5 с его 320 пикселями в ширину. И задайте максимальные границы на основе среднего размера небольших планшетов – примерно от 500 до 800 пикселей в ширину. Высота не так важна как ширина дашборда. Люди привыкли прокручивать контент вертикально и это более привычно, чем горизонтальная прокрутка.
Прокрутка виза VS прокрутка дашборда
Всегда блокируйте управление картой
Активные опции управления картой – если она есть на вашем дашборде – могут сбить пользователя с толку в первую секунду. Дело в том, что по умолчанию на добавленную на дашборд карту можно выделять и детализировать географические области, но это неудобно делать с телефона. На мобильных пользователи менее точно взаимодействуют с контентом. Поэтому, чтобы избежать непонимания, отключите все опции управления масштабом карты.
Непонятна разница между "Hover" и "Click": наведением и кликом
На мобильных телефонах с сенсорными экранами не работает Hover – наведения курсора мыши на элемент. Одно нажатие на экран – и будет клик. Поэтому, тултипы по наведению (on hover) и экшены по наведению на мобильных работать не будут. Избегайте двух действий на одном элементе с разной логикой, иначе они будут выполняться одновременно.
Активные опции управления картой – если она есть на вашем дашборде – могут сбить пользователя с толку в первую секунду. Дело в том, что по умолчанию на добавленную на дашборд карту можно выделять и детализировать географические области, но это неудобно делать с телефона. На мобильных пользователи менее точно взаимодействуют с контентом. Поэтому, чтобы избежать непонимания, отключите все опции управления масштабом карты.
Непонятна разница между "Hover" и "Click": наведением и кликом
На мобильных телефонах с сенсорными экранами не работает Hover – наведения курсора мыши на элемент. Одно нажатие на экран – и будет клик. Поэтому, тултипы по наведению (on hover) и экшены по наведению на мобильных работать не будут. Избегайте двух действий на одном элементе с разной логикой, иначе они будут выполняться одновременно.
Блокировка карты
Используйте визуализации вместо обычных фильтров
Подумайте над вариантом полного отказа от стандартных фильтров – вместо них используйте экшены на визуализациях (Use as Filter, Dashboard Actions). Стандартные фильтры в большинстве своем сложно переключать на телефонах. А клики на визуализации просты и заметны.
Подумайте над вариантом полного отказа от стандартных фильтров – вместо них используйте экшены на визуализациях (Use as Filter, Dashboard Actions). Стандартные фильтры в большинстве своем сложно переключать на телефонах. А клики на визуализации просты и заметны.
Используйте Истории (Story Points)
Истории – коллекции дашбордов, организованные постранично, как по слайдам. Они отлично работают при организации контента для мобильных телефонов. При этом, они могут использоваться просто как элемент интерфейса с большими кнопками и аннотациями, которые позволяют собрать вместе несколько логически-связанных дашбордов.
Истории – коллекции дашбордов, организованные постранично, как по слайдам. Они отлично работают при организации контента для мобильных телефонов. При этом, они могут использоваться просто как элемент интерфейса с большими кнопками и аннотациями, которые позволяют собрать вместе несколько логически-связанных дашбордов.
Пусть дашборд будет легким
Думайте о скорости загрузки вашего дашборда на мобильных телефонах. Когда сеть wi-fi не стабильна или 3G медленно работает, никому бы не хотелось ждать долгой загрузки дашборда. Пусть не только снаружи, но и внутри будет порядок и чистота: удаляйте ненужные поля из источника данных, упрощайте вычисления, уменьшайте количество отметок на визуализациях (не нужно детализировать скаттерплот до уникального номера покупателя с 10 тысячами значений).
Тестирование
Только при тестировании дашборда вы сможете заметить все тонкости и недоработки, оценить насколько удобно расположены элементы и видны ли все фильтры. Помимо тестирования мобильного дашборда внутри Tableau Desktop при помощи Device Preview, лучше всего – протестировать дашборд на разных мобильных телефонах. В случае если у вас нет такой возможности (как и у большинства других людей, у которых всего 1 мобильный телефон), вы можете использовать опцию в браузере Google Chrome:
Только при тестировании дашборда вы сможете заметить все тонкости и недоработки, оценить насколько удобно расположены элементы и видны ли все фильтры. Помимо тестирования мобильного дашборда внутри Tableau Desktop при помощи Device Preview, лучше всего – протестировать дашборд на разных мобильных телефонах. В случае если у вас нет такой возможности (как и у большинства других людей, у которых всего 1 мобильный телефон), вы можете использовать опцию в браузере Google Chrome:
- Зайдите на дашборд для тестирования, он должен быть опубликован на сервере
- Нажмите F12, чтобы открыть панель разработчика в Google Chrome
- Нажмите иконку Show Device Toolbar в верхнем левом углу
- Выберите устройство для тестирования
- Обновите страницу, чтобы посмотреть как выглядит дашборд на выбранном устройстве
Примеры
ВДОХНОВЕНИЕ
Полезные ссылки по теме
Оригинальные версии сегодняшних материалов
... от Кэлли Мартин
... от Роберта Роуза
... от datasparkes
... от tableauFit
МАТЕРИАЛЫ
Книги
Повышаем дизайн IQ с помощью легко повторяемых техник мобильного дизайна. Без сухой теории и танцев с бубном. Практические темы и рекомендации по реализации.
Итоги этапа
Покопались в новой области проектирования. Осознали важность, полезность и глубину. Посмотрели как можно переделывать в Tableau большие дашборды под мобильные устройства. Не смогли пересилить себя делать дизайн дашбордов для мобилок с нуля. Пошли листать советы бывалых из мира мобильного UX дизайна и готовиться к новому отрезку Марафона. До завтра. Виз виз уррра!
~
