Connect with us

Дизайн и прототипирование

Что делать, если в приложении нужно использовать таблицу

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

Опубликовано

/

     
     

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

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

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

1. Горизонтальная таблица может стать вертикальной

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

Десктопная таблица на мобильном устройстве

Десктопная таблица на мобильном устройстве.

Решение

Сгруппируйте связанные данные каждой строки и отобразите их вертикально. Вот front-end ресурс, который поможет вам в работе: Адаптивные таблицы данных.

Что делать, если в приложении нужно использовать таблицу

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

2. Разделите на 2 строки

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

Что делать, если в приложении нужно использовать таблицу

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

Решение

Код продукта, цена и количество были определены как наиболее важные.

Что делать, если в приложении нужно использовать таблицу

Код продукта и цена не нуждаются в пояснении, потому что они говорят сами за себя.

3. Аккордеон для менее актуальных данных.

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

Что делать, если в приложении нужно использовать таблицу

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

Решение

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

Что делать, если в приложении нужно использовать таблицу

Между целевыми областями касания должно быть достаточно места.

4. Позвольте пользователю выбрать нужную группу данных.

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

Что делать, если в приложении нужно использовать таблицу

Решение

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

Что делать, если в приложении нужно использовать таблицу

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

5. Закрепите левый столбец, если пользователю нужно сравнивать

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

Решение

Что делать, если в приложении нужно использовать таблицу

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

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

Источник

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement

Популярное

Спасибо!

Теперь редакторы в курсе.