Удобен ли этот вращающийся интерфейс куба?

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

введите описание изображения здесь

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

Это похоже на удобную для пользователя модель? Если нет, что я могу сделать, чтобы улучшить его?

308 голосов | спросил Peter Olson 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 01:05:12 +0400 2011, 01:05:12

20 ответов


272

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

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

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

Я бы выбрал менее яркий зеленый цвет, так как он немного отклонился и изменил красный текст на другой цвет. Вы можете использовать Фильтр веб-страниц Colorblind , чтобы узнать, как он выглядит для пользователей с цветным слепым цветом. Не бойтесь использовать больше цветов - но не слишком много! Smashing Magazine есть одной из 3 части статьи по теории цвета .

Я думаю, что вся концепция имеет многого для этого, и как только основные проблемы UX будут сглажены, это будет выглядеть довольно гладко. Я думаю, что пользователи будут любить новинку. В наши дни формы регистрации настолько скучны. Эта статья на A List Apart о том, почему зарегистрироваться формы должны умереть (опять Люк Вроблевский) пятно на. Я думаю, что этот пример может просто ударить конечный гвоздь в гробу подписчиков, так что удачи с ним!

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

ответил Roger Attrill 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 02:06:09 +0400 2011, 02:06:09
200

Серьезный ответ: ужасно

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

Основная проблема заключается в том, что я не могу ее контролировать. Хороший пользовательский интерфейс заставляет пользователя думать «эй, я потрясающе! Посмотри, что я могу сделать!»

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

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

Глупый ответ: это здорово!

Я рад видеть, как вы освобождаете формы от своих двумерных кандалов. Можете ли вы отринуть это в библиотеку, которая создает N-сторонние 3D-фигуры, где N - количество секций формы, в которых я нуждаюсь? Если математика слишком сложная, возможно, мы сможем перестроить наши формы для соответствия легко обрабатываемые фигуры - разбить их на 12 разделов вместо 11 и т. д.

Кроме того, давайте еще мигать.

ответил Nathan Long 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 17:55:15 +0400 2011, 17:55:15
53

НЕТ. В любом случае, даже если вы сделаете его треугольником или любой геометрической формой, ответ будет по-прежнему НЕТ.

Я посетил ваш рабочий пример (угадание - это бета-версия или что-то еще). Я пытался заполнить поля формы без везения. Я попытался прочитать то, что написано, снова без везения. Затем я закрыл вкладку.

Я снова прочитал ваш вопрос, повторно посетил куб и вышел через 1 секунду, сказав: «Вы должны шутить».

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

Мой ответ на ваш вопрос НЕТ. Конечно.

ответил EnexoOnoma 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 01:19:29 +0400 2011, 01:19:29
44

Хорошо, я чувствую, что я хотел бы разобрать его, но там есть некоторые вещи, которые действительно меня обманывают.

  1. Я не уверен, какой шрифт вы используете, но кернинг выглядит очень странно для меня.
  2. 32px - довольно стандартная ширина для элементов управления вводом данных (я думаю, вы используете 50 или что-то еще)
  3. Как правило, выпадающие списки для состояний сортируются по почтовому индексу, начиная с северо-востока
  4. Кнопка отправки должна быть выровнена по правому краю IMO
  5. Вероятно, вы должны заменить смайлик фактическим изображением смайлика (текстовые зарезервированы для обмена текстовыми данными (электронные письма)).

Но человек, кроме этого, выглядит действительно, очень хорошо.

ответил Daniel 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 01:35:04 +0400 2011, 01:35:04
33
  1. Я не знаю, как вы строите свой куб, но похоже, что куб искажается во время вращения.

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

  3. Текст никогда не должен быть перевернут. Когда-нибудь.

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

ответил demallien 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 17:40:16 +0400 2011, 17:40:16
31

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

ответил colmcq 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 18:04:06 +0400 2011, 18:04:06
16

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

ответил blah 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 20:55:26 +0400 2011, 20:55:26
14

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

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

ответил Boris Hamster 15 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 15 Sep 2011 00:47:29 +0400 2011, 00:47:29
13

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

Рассказывают ли ваши статистические данные о том, что большое количество людей запускает старую версию вашей формы, но не может ее завершить? Это может означать скуку или недостаточный стимул для решения скучной задачи. Хотя новизна (например, интерфейс куба) может помочь, у вас может быть больше успеха, уменьшив длину формы. Если это критическая форма, которую люди вынуждены закончить, тогда вы должны ошибаться со стороны скуки, но ее невозможно путать (т. Е. not куб).

У людей, как правило, наибольшая вероятность отказа от небольшого числа конкретных вопросов? (например, Привет. Мы хотели бы, чтобы вы участвовали в анонимном опросе! Q1: Каков ваш номер социального страхования?) Это может указывать на что-то еще, например, на одну из частей информации, которую ваши запросы форм представляют собой то, что пользователям неудобно. Если это так, вращающийся куб определенно не является ответом.

Задайте такие вопросы, как выше, а затем спросите себя, как интерфейс куба обращается к ним. Если все, что он делает, это «быть новым», тогда у вас может быть проблема. Роман одного человека - это чужой человек.

Лично мне нелегко придумать, как интерфейс куба добавляет что-либо значимое в процесс заполнения формы, кроме добавления глазных конфет. Заполнение формы представляет собой линейный процесс. Как связать разные поля формы со сторонами 3D-объекта, чтобы пользователь заполнил форму? Могут ли смежные поля на разных грани куба мешать?

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

Удачи!

ответил g-ball 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 18:02:21 +0400 2011, 18:02:21
10

Ваш дизайн явно провал. При достаточном терпении, можно заполнить (по крайней мере, часть) форму. Поскольку вы явно пытаетесь предотвратить это, вы потерпели неудачу.

ответил Jerry Coffin 15 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 15 Sep 2011 19:21:27 +0400 2011, 19:21:27
8

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

Вращающаяся форма, вероятно, заставит вас потерять всех ваших посетителей.

Вместо этого я предлагаю использовать поворот для переключения между разными страницами в форме. Я думаю о чем-то вроде главного меню в компьютерной игре «Хроники Риддика: побег из залива Батчер» . Это может сделать большой эффект, если вы можете сделать это быстро и быстро.

ответил Znarkus 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 21:43:24 +0400 2011, 21:43:24
7

Юзабилити не следует использовать в том же предложении, что и ссылка на эту форму, извините, его истина.

Вы даже не видите форму в 75% случаев, как у вас может быть полезная форма, которую вы даже не видите.

Отходы вашего времени, хотя впечатляющие 3d css ...

Способы исправления: Остановить куб, вращающийся, выбрать цвета, которые не ослепляют, текст выделения для реального? Показать форму ... всегда!

ответил dannydev 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 20:51:21 +0400 2011, 20:51:21
5

Ты сказал:

  

«Если нет, что я могу сделать, чтобы улучшить его?»

Вот несколько советов:

  • Сделайте цвета чем-то, что не повредит моим глазам.

  • Остановить куб, вращающийся все время.

  • Убедитесь, что все данные можно увидеть сразу.

  • То есть сделайте его как правильная форма ввода.

ответил Schroedingers Cat 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 18:26:35 +0400 2011, 18:26:35
4

Дайте полную команду пользователям, например, при перемещении мыши куб должен перемещаться с помощью мыши, поэтому пользователь может быстро выбирать разделы (submit, form, other). в настоящее время я должен ждать, пока куб вернется в правильное положение.

ответил Pir Abdul 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 08:40:28 +0400 2011, 08:40:28
4

Очень инновационный подход.

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

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

Подумайте о чем-то более реалистичном.

ответил Kabir Roy 14 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 14 Sep 2011 20:32:52 +0400 2011, 20:32:52
4

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

Это добавит интересный переход, который, как мне кажется, будет содержать множество пользователей:)

ответил 23 rdEurope/Moscowp30Europe/Moscow09bEurope/MoscowFri, 23 Sep 2011 02:48:40 +0400 2011, 02:48:40
2

Это хорошо работает, если у вас будет не более 6 страниц.

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

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

Правильная ориентация будет проблемой.

Но иногда людям нравится расстраиваться. Посмотрите на Angry Birds. Люди продолжают скучать, и задача становится все труднее и труднее. Но это весело! Все зависит от того, чего вы пытаетесь достичь.

ответил Tyler Langan 27 22012vEurope/Moscow11bEurope/MoscowTue, 27 Nov 2012 17:07:08 +0400 2012, 17:07:08
2

Хорошо, я признаю, что был настроен скептически, но попробовал рабочую версию и с ней было так весело!

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

Но хорошо отвечая на ваш вопрос, в вашем случае для этого проекта он, похоже, не работает.

ответил Taly Emmanuela 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 17 Sep 2014 14:59:10 +0400 2014, 14:59:10
2

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

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

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

Маленькие нечитаемые ярлыки . Почему никто не думал об этом? Все заинтересованы в том, чтобы сделать их формы приятными и большими, полезными контекстуальными ярлыками и другими вещами, чтобы облегчить процесс заполнения формы (или, как они говорят). Мне пришлось увеличивать число раз, чтобы читать метки, но скорость куба означает, что мои глаза не могут правильно сфокусироваться: хорошая работа.

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

Но, увы, есть некоторые проблемы с вашей формой:

Этот шрифт не очень привлекателен . Я предлагаю попробовать более удобный шрифт, Comic Sans MS Bold, вероятно, станет моим первым выбором. Это читаемо, и это сделало бы вращающийся куб еще более увлекательным.

Зеленый цвет не достаточно яркий - Извините, что произнёс это, но этот зеленый цвет не достаточно яркий. Вы могли бы занять несколько оттенков светлее, чтобы выглядеть более современно.

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

Отсутствие тепла или символа . Я думаю, что отсутствие анимированных GIF действительно влияет на форму, но не только это, я смотрел в источнике и не видел ни одного экземпляра <marquee>. Эстетически это немного TOO статично для меня, некоторые движения там могут сделать его более увлекательным (в сочетании с изменением шрифта, конечно).

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

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

В Google Chrome (последняя версия) на Mac OS выпадающее меню выбрано . Текст надписи отображается над меткой.

Снова в Google Chrome (последняя версия) в Mac OS заголовок на странице юридической информации сломан. . Я на самом деле отключен, поэтому я могу только увидеть, «важная юридическая информация !!! "

Слишком много восклицательных знаков . Почему вы кричите на странице юридических терминов? Один, максимум, два восклицательных знака. Вы знаете правила? Не испортите отличный дизайн со слишком большим количеством восклицательных знаков.

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

ответил Dwayne Charrington 17 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowWed, 17 Sep 2014 09:00:42 +0400 2014, 09:00:42
1

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

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

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

ответил Sauce McBoss 27 22012vEurope/Moscow11bEurope/MoscowTue, 27 Nov 2012 18:33:26 +0400 2012, 18:33:26

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

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

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