Почему этот дизайн считается загроможденным или подавляющим?

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

 мой сайт

Какие элементы этого карточного, двойного меню, дизайн боковой панели запускают этот ответ?

161 голос | спросил Harangue 10 ThuEurope/Moscow2015-12-10T19:38:52+03:00Europe/Moscow12bEurope/MoscowThu, 10 Dec 2015 19:38:52 +0300 2015, 19:38:52

13 ответов


161

Здесь UX становится жестким

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

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

С чего начать

  1. Убедитесь, что вы не переоцениваете мнения небольшого подмножества пользователей. Это целая проблема «скрипучего колеса». У них могут быть некоторые веские опасения, но вы должны быть уверены, что они являются представителями большего числа пользователей.
  2. Сядьте с реальными пользователями, которые делают реальные вещи с вашим приложением. Посмотрите, что происходит, какие задачи они пытаются выполнить, где они застревают, запутаны или расстроены.
  3. Проверяйте одно решение за раз. Чем более атомными ваши изменения могут быть разумно, тем больше вы можете точно убрать тест.
  4. Общайтесь со своими пользователями, когда думаете, что что-то исправили. Соберите много отзывов и убедитесь, что вы решили, что решили, что решили.
  

TL; др

     
  1. Понимайте точно , что ваш пользователь хочет выполнить.
  2.   
  3. Устранить все    [действие, слово, изображение, значок, цвет, форма, пиксель)
      что это не делает их лучше на # 1.
  4.   

Общие наблюдения

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

Иерархия

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

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

Как насчет объектов Games и Users в верхней части, которые выглядят как nav? В настоящее время я не уверен, какой из них активен или что они будут делать.

Вообще говоря, меня много интересует. Это приводит меня к ...

Визуальный шум

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

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

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

Монотонность

Несмотря на сложность проблемы, может быть место, чтобы добавить что-то, чтобы разбить монотонность. Будет ли смысл разрешать обложки для игр? Или, возможно, использовать синий цвет L в качестве полного цвета заголовка (если они не будут все одинаковыми)?

ответил plainclothes 10 ThuEurope/Moscow2015-12-10T19:59:56+03:00Europe/Moscow12bEurope/MoscowThu, 10 Dec 2015 19:59:56 +0300 2015, 19:59:56
68

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

введите изображение здесь »> </a> </p></body></html>

ответил Paul LeBeau 12 SatEurope/Moscow2015-12-12T16:54:59+03:00Europe/Moscow12bEurope/MoscowSat, 12 Dec 2015 16:54:59 +0300 2015, 16:54:59
32

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

  • Слишком много строк (вы можете удалить большинство из них, я считаю)
  • Слишком небольшой контраст между различными частями вашего дизайна (попробуйте размыть глаза и посмотреть, сможете ли вы различить разные части вашего дизайна). Карты особенно проблематичны. Сделайте их pop.

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

 введите описание изображения здесь>> </a> </p></body></html>

ответил filip 12 SatEurope/Moscow2015-12-12T01:56:26+03:00Europe/Moscow12bEurope/MoscowSat, 12 Dec 2015 01:56:26 +0300 2015, 01:56:26
17

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

.

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

ответил Harrison Paine 11 FriEurope/Moscow2015-12-11T22:14:52+03:00Europe/Moscow12bEurope/MoscowFri, 11 Dec 2015 22:14:52 +0300 2015, 22:14:52
10

лично, я не думаю, что это загромождено, но да, это немного подавляющее.

В принципе, я вижу ваш экран и понятия не имею, где искать и что делать. Наиболее важными аспектами являются L в углу и тот факт, что кто-то в сети (это из-за вашего использования цветов), то вы смешиваете информацию, дающую все одинаковый уровень иерархии. CTA s серые (!!!!), ваша сухаря выглядит странно на основе (вы показываете игры, но покажете свой хлебный знак Users , и это уровень под Games , что тоже странно, если вы не имеете в виду Players ), у вас есть боковая панель сообщения /чата, которая каким-то образом связана с основным контентом, но действительно сложно найти соединение ... ну, это немного запутанно. Хорошей новостью является то, что все эти аспекты могут быть легко изменены, ваша главная проблема, похоже, сосредоточена на иерархиях, что важно, а что нет. Просто измените пару цветов (в основном, CTA) и тест. Я уверен, что вы сразу увидите результаты.

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

ответил Devin 10 ThuEurope/Moscow2015-12-10T20:20:56+03:00Europe/Moscow12bEurope/MoscowThu, 10 Dec 2015 20:20:56 +0300 2015, 20:20:56
7

Ответы, представленные здесь, замечательные, но несколько замечаний:

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

  2. Сохраняйте только зеленый круг как понятие для онлайн-пользователей, удаляйте текст, т.е. «Online» из списка друзей, но сохраняйте текст в статусах зарегистрированных пользователей, так как он поможет им понять значение различных цветные круги, такие как зеленый = онлайн, красный = автономный, оранжевый = простоя и т. д.

  3. Удалить значок почты из «Друзья» All ", поскольку он уже размещен в заголовке приложения. Обратите внимание на следующее изображение для этих 3 точек.

  4. Поместите свое меню «Игры и пользователи» в навигационную вкладку следующим образом.

  5. Увеличьте размер верхнего правого угла и буквы, как это.

ответил IT ppl 11 FriEurope/Moscow2015-12-11T16:53:13+03:00Europe/Moscow12bEurope/MoscowFri, 11 Dec 2015 16:53:13 +0300 2015, 16:53:13
6

У меня есть некоторые основополагающие руководства, которые должны применяться ко всем UX, и это особенно важно здесь:

Удобство не должно конкурировать с ясностью.

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

Устроившись с жидкостной средой разработки ...

Мы, разработчики, обычно считаем естественным создавать интерфейсы в редакторе векторных макетов, в которых мы собираем кучу анимаций, переходов и преобразований. Это то, что ограничивает многих из нас нашей способностью разрабатывать инновационные макеты, которые открывают (и скрывают) информацию через взаимодействие с пользователем. Итак, сначала научитесь проектировать в среде, где вы можете создавать движущиеся, анимированные, трансформирующие интерфейсы. Я лично просто разрабатываю свои интерфейсы с помощью HTML, JS и CSS - через некоторое время он становится естественным средством проектирования.

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

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

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

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

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

ответил Viziionary 12 SatEurope/Moscow2015-12-12T00:40:37+03:00Europe/Moscow12bEurope/MoscowSat, 12 Dec 2015 00:40:37 +0300 2015, 00:40:37
5

Хорошо, хорошие ответы, но не помогающие вам с причиной, отличной от «Monotony» - это не большой термин, но близкий.

Отличный дизайн в журналах, плакатах и ​​пользовательских интерфейсах - это продукт font , размер шрифта и whitespace , улучшенный с помощью цвет , а не поврежден с помощью линии .

Эти свойства: шрифт, размер шрифта, пробел и цвет train пользователь должен понять (a), что важно, (b) как сканировать информацию и (c) как видеть шаблоны в данных с первого взгляда, а не думать о них напрямую.

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

Пространственное местоположение развивается со временем с опытом, как только пользователь подсознательно запомнил пользовательский интерфейс. (Опытные пользователи, такие как интерфейс в стиле Excel, и новые пользователи этого не делают.)

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

Вы тренируете пользователя, как просматривать информацию, используя размер шрифта (приоритет), стиль шрифта (шрифты передают относительный смысл). После того, как шрифты используют фигуры (например, вкладка в углу, которую кто-то еще посоветовал). После использования форм используйте цвет . Цвет должен быть последним.

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

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

Интерфейс карты

Теперь вы объединили «карты» (пространственную компоновку), но используете «табличные» шрифты и цвета.

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

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

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

Полезные советы

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

Но, начиная с визуальной модели (например, монопольной настольной игры), обычно помогает дизайнерам избежать «проблем с коробками», которые поражают любителей.

ответил Curt Doolittle 13 SunEurope/Moscow2015-12-13T12:56:47+03:00Europe/Moscow12bEurope/MoscowSun, 13 Dec 2015 12:56:47 +0300 2015, 12:56:47
5

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

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

Я перечислю несколько примеров, чтобы вы могли понять мое предложение:

  • каждый «Привет, ребята ...» имеет ряд внутренних строк, которые, если их удалить, облегчат когнитивную нагрузку, не мешая пониманию пользователя.
  • строка под «Создана Джеком»
  • границы ячейки таблицы в разделе «ДЕТАЛИ»
  • само слово "DETAILS"
  • Артефактные строки «Друзья | Все | ✉5» (отображаются как кнопка при наведении)
  • зебра-полоски под артефактом Friends | All
  • «Онлайн-â-» может быть только цветовой частью, но с зеленым â "вместо этого и красным крестом else
  • в Sort /Filters /Все игры попробуйте установить стрелку вниз поближе к тексту, чтобы они стали единственной вещью.
  • вместо округлых изображений используйте квадратные, которые достигают всех трех границ.
  • и т. д.

В качестве первого теста попробуйте развернуть таблицу «DETAILS», чтобы она касалась всех четырех границ (теряя свои хорошие округлые углы и заголовок «DETAILS»), и вы увидите.
Это станет проще и, следовательно, станет легче. Тогда вы можете поверить и вступить в безумство удаления визуального элемента.

ответил Juan Lanus 15 TueEurope/Moscow2015-12-15T23:17:39+03:00Europe/Moscow12bEurope/MoscowTue, 15 Dec 2015 23:17:39 +0300 2015, 23:17:39
4

Идеи:

Создать игру

Возможно, первая карта может стать вашей большой кнопкой создания игры! Мне бы очень хотелось, чтобы у него были те типы входных данных, где вы можете просто щелкнуть по тексту, который вы хотите отредактировать, и заполнить его прямо там. Я бы подумал о том, чтобы сделать его отзывчивым, так что, возможно, когда вы это увидите, это очень просто, просто есть «+» и «Создать игру», а затем щелкнуть по нему плавно, анимировать в этих автоматических полях ввода. (Скажем, карта делает флип в 3d. Здесь есть бесконечные возможности для творчества!)

Игровые карты

Аналогичная идея для отзывчивости: удалите кнопку «Присоединиться» и появляйтесь на панели управления как один из этих эффектов с полупрозрачным перекрытием. Мне нравится идея скриншотов /игрового искусства в качестве обоев.

Вот что я только что понял об этих карточках: на самом деле это не самый лучший подход для такого рода данных. Каждая карта содержит те же самые данные и информацию. Почему не просто какой-то стол? Затем игроки могут сортировать их по полю.

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

Список игроков

Это (и, возможно, заголовок) - это часть, которая кажется немного загроможденной. Я думаю, что это просто много визуальной информации в периферии. Итак, как мы могли это исправить? Опять же, есть много вариантов, нам просто нужно проявить творческий подход! Опять же, давайте начнем с обоев. А может быть, гармонический интерфейс? Возможно, вместо «онлайн o» у вас может быть заполненный круг против полузаполненного или пустого круга. Или любой другой тематический индикатор, как лента! (или используйте полупрозрачный градиент с выдолбленным значком.)

Одна идея состоит в том, что, возможно, даже включать в нее только онлайн-пользователей, в то время как в автономном режиме перечислены только как разделенные запятой ссылки, вроде того, что вы видите на форумах:

Qwerty Uiop , Plok Min Juhby , Wes X Qwaz , Kip HG Jolumny , Ferd 3rd , Chasbyn Q Jon Klimp-Werdguft ZCXV , Guy T. Fred , Ty Hug

(Кстати, мы с матерью придумали эти имена, когда играли в игру, чтобы посмотреть, что мы можем сделать с областями клавиатуры.)


Эти предложения только для того, чтобы начать. Надеюсь, это поможет!

ответил HTDE 11 FriEurope/Moscow2015-12-11T20:51:22+03:00Europe/Moscow12bEurope/MoscowFri, 11 Dec 2015 20:51:22 +0300 2015, 20:51:22
3
  • Добавьте контрастность , чтобы сделать важный контент более значимым (карточные игры), добавив темный цвет фона, например.

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

  • Шрифт синего «L» кажется, что это еще один шрифт, что делает его действительно странным.

  • Возможно: Удалите значки до «Round», «Time», «Language» и «Words». Они забавны, но также отвлекают и, похоже, не добавляют никакой логики, поскольку сам текст достаточно.


Обратите внимание, что я только изменил первые 2 блока на 100% (второй ящик все еще имеет старый L, хотя он должен был показывать только как индикацию).

 Новый дизайн

ответил Daan 16 WedEurope/Moscow2015-12-16T18:26:58+03:00Europe/Moscow12bEurope/MoscowWed, 16 Dec 2015 18:26:58 +0300 2015, 18:26:58
2

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

ответил David Sheridan 16 WedEurope/Moscow2015-12-16T14:28:00+03:00Europe/Moscow12bEurope/MoscowWed, 16 Dec 2015 14:28:00 +0300 2015, 14:28:00
1

По словам Джонатана Айва из Apple, хороший интерфейс представляет только информацию, которая НЕМЕДЛЕННО относится к пользователю . Проверьте https://www.youtube.com/watch?v=3q6ULOT9Q4M

Это может быть немного незначительной точки, у меня была та же проблема. С моим клиентом проблема имеет слишком много БЕЛОГО ПРОСТРАНСТВА в интерфейсе. Для шаблона на основе CARD, как и ваша, выполните следующие действия:

  1. Добавление цвета фона, такого как #EEE в раздел основного контента

  2. Для чата боковой панели удалите лишнюю строку серым цветом

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

ответил William 16 WedEurope/Moscow2015-12-16T09:52:16+03:00Europe/Moscow12bEurope/MoscowWed, 16 Dec 2015 09:52:16 +0300 2015, 09:52:16

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132