Как сделать удобный интерфейс для разработчика и аналитика

Буквально пара дней остаётся до большого UX-Марафона Антикейсы + Аналитика поведения пользователей, который состоится уже в эту субботу, 21 марта. А пока ещё есть немного времени, мы хотим познакомить вас с одним из спикеров предстоящей онлайн-конференции. 

Ростислав Сопотов, дизайнер продукта в Яндексе,участвует в UX-Марафоне уже не в первый раз. В прошлом году он выступал у нас с невероятно насыщенным информацией докладом об особенностях разработки инфраструктурных сервисов.

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

Как устроены данные

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

Например, в магазин привозят яблоки, которые делятся на четыре сорта, какое-то количество штук каждого сорта.И эти данные нужно представить в интерфейсе в понятном и удобном виде. Сделать это можно в виде обычной таблицы. В целом, это неплохой вариант, но таблица в две колонки больше похожа на список, чем на таблицу. Можно представить информацию в виде карточек. Это более красивое и компактное решение, но у карточек есть и недостаток —- их не очень удобно читать.

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

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

Смотрим на специфику

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

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

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

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

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

Много сущностей с разными свойствами: карточки vs таблицы

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

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

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

Итак, данные, представленные в строках и столбцах таблицы в текстовом виде, выглядят хорошим решением. Но его можно ещё улучшить, например, добавив инфографику или выделив цветом то, на что нужно обратить внимание — и таблица окажется выигрышной вдвойне.

Например, мы подсвечиваем красным данные в графе «Количество» там, где оно не соответствует необходимому, а наличие или отсутствие подтверждения обозначаем иконкой зелёного или красного цвета, объединив колонки «Подтверждающий» и «Подтверждение». Благодаря этому у нас освободилось место для колонки с указанием дата-центра, а общее количество информации на квадратный сантиметр интерфейса увеличилось. 

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

Во-первых, карточки крупнее и, соответственно, привлекают к себе больше внимания. Например, на карточке ниже мы сразу видим, что с яблоками «Ред Делишес» что-то не так. В таблице эта информация считывается не так быстро. 

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

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

Ну и, наконец, карточки — это отличное решение, когда вам нужно представить информацию красиво.

***
С огромным трудом мы уместили в рамки одной статьи только часть доклада Ростислава Сопотова. О специфике работы с таблицами и организации поиска, фильтрации и сортировки различных типов данных, а также о том, как использовать нейросети для анализа информации перед началом разработки интерфейса вы можете узнать из видеозаписи его доклада на платформе UX-Марафон.

А на онлайн-конференции  Антикейсы + Аналитика поведения пользователей Ростислав расскажет о трёх особенностях целевой аудитории, которые обычно не учитываются при тестировании. 

Успевайте зарегистрироваться, чтобы не пропустить выступления Ростислава Сопотова и ещё десяти ярких спикеров!