Search
Write a publication
Pull to refresh
6
0
Дмитрий @uiuxaudit

Юзабилити, UX-редактура и тестирование сайтов

Send message

про Авито:
бескаркасные карточки у них на десктопах.

а для мобил они таки сделали бордеры, вот ровно потому, что "путаются" карточки:

В карточке может "плавать" только содержимое Названия и Описания. Это решается строгими правилами заполнения и обрезкой "…".

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

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

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

Теперь по этому дизайну:

Первая карточка выглядит неплохо, НО пока кнопка по контрасту чётко выделяется на фоне фотки, в противном случае кнопка потеряется.

Вторая проблема — размер такой кнопки ограничен, чтобы не перекрыть важное на фотке. Для мобил размер критически важен.

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

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

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

Нейминг товаров — это отдельная песня. Даже крупные и вроде бы умные площадки сдаются перед SEO и пишут для роботов. Это прямое издевательство над юзерами. 

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

И конечно же, нельзя вот так вот просто сказать: “Этот дизайн мне нравится, берём его”. Всё сильно зависит от товаров и ЦА. Вполне нормально даже на одной площадке использовать разный дизайн карточек для разных групп товаров, показывая важные для юзеров параметры.

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

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

"крутилка крутилке" — рознь. бывают просто гениальные, на которых легко залипнуть (и весят немного)

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

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

встречается такой вопрос в анкетах/опросниках у разных контор.

исследование разъясняет, зачем им это может быть нужно.

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

Про фитнес
Чихи с шагомером — прикольно )) Тут речь о возможностях мотивации. Это не про спорт, а про микроподдержку привычек. А «вкусняшки» — метафора: поощрение за усилие, не обязательно съедобное ))

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

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

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

кстати, по каналам продаж и возрасту покупателей есть вот такая заметка

  • «кошатник» чаще покупают в супермаркетах и дисконт, чем «собачники»

  • «городская молодёжь» чаше покупает онлайн

ну у 1С фишка такая (кредо) — максимально всех запутать ))

а по скрину — сильно контекстнозависимо, только юзер в теме сможет понять разницу между "Скопировать" и "Копировать" в одном и том же меню ))

По “Пример 3”

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

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

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

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

По “Пример 2”

Кнопку очистки на полях поиска убирать не надо. Может её мало кто видит и мало кто пользуется (из вашей ЦА), но дико бесит, когда её нет, а она нужна ))

Кнопка бледно-серая, кажется, что disabled (у вас стиль такой), и её плохо видно (серое на сером).

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

По “Пример 1”

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

Может шеврон не нужен и/или “галка” не нужна.

Если шеврон и галка нужны, то тут можно попробовать перенести шеврон вправо и может сделать “треугольником”.

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

Вместо стрелок, справа сделать маленькую кнопку с текстом “счета”, не чёрным цветом, тогда будет гораздо понятнее.

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

Предложил бы сортировать номера счетов по возрастанию (или убыванию). Или сортировать чуть сложнее: по первым пяти цифрам, а внутри по последним 4-6. Так удобнее искать визуально, тем более что юзеры ищут счёт тоже по последним цифрам.

Ещё на скрине непонятно зачем красная кнопка Применить, если ничего не чекнуто, но наверно не весь сценарий вошёл в скрин.

ой, дада, Яблоко, спасибо за пример…

но у Яблока как-то ещё скромненько (заголовки, кнопки, ссылки), а Билайн гораздо дальше пошёл ))

вот так это выглядит с предложениями )

или вот такая каша с буквами теперь… наверно временно, но всё же )

Так повелось, что маркировкой UX отмечают всё, что относится к UX (касается не только этой сферы). Если должность называется UX-дизайнер, это не значит, что он обязан рассматривать ВСЕ аспекты использования «коробки» (для этого есть команда). Иначе он не имеет права иметь префикс «UX»? От диза ждут, что он превратит наработки, исследования команды во что-то «юзабельное».

И от мелких фирм растёт количество запросов типа «проверить на юзабилити». Да, эти отчёты нельзя назвать юзабилити анализом, т.к. они касаются только визуала сайтов («кнопочки подвинуть»). Но это часть общего UX бизнеса, хоть и очень маленькая. Или если не провели интервью, не выходили «в поля», не рыли метрики, не делали а/б, то у этого нет права содержать в названии UX?

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

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

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

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

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


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

А серьёзные конторы есть и у нас, которые занимаются только UX, исследуют, учат и популяризируют.

Проблема UX не в недостатке «академических» знаний, а в бизнесе, который так и норовит получить максимальную прибыль здесь и сейчас, а потом «хоть трава не расти».

1. Если здесь речь про “Email или Телефон”, то почему в placeholder только email?
Я бы предложил перенести подзаголовок в плейсхолдер.

2. Если вы убрали “запрещённые” сервисы, то что здесь делает Google или Apple (на других скринах)? Или это пока не запретили?

3. Если SSO “редкий сценарий” (как вы говорите), то почему он стоит первым? Ну и засуньте его в “…”, не? Может как-то понятнее написать? Не все же знаю что такое SSO, да и вариантов SSO есть несколько.

4. “помогает бизнесу работать”
- почему с маленькой буквы или это не слоган?
- “Битрикс24” — это же фактически ваш логотип? Почему текст согласован с лого? Ну напишите: “Помогаем работать бизнесу”. Почему только “бизнесу”, а “небизнесу” не помогаете? Напишите: “Помогаем работать” или придумайте новый.
- почему так криво всё и не ложится не под какие направляющие?

5. Что за белёсый абрис вокруг лого? Так задумано? Выглядит неаккуратно.

6. Описание сценария странное. А если у юзера уже открыто приложение, что он должен сделать? Наверно надо что-то нажать в приложении, чтобы открыть камеру и авторизацию по QR?

7. “Создать Битрикс24”?! В каком смысле, что имеете ввиду? Наверно имеется ввиду “Создать аккаунт”, “Регистрация”? Весьма нестандартное место для подобной кнопки, почему нельзя поставить её в саму форму, как делают большинство?

8. Ссылку согласия лучше продлить на всю длину текста

9. Сценарий присоединения к совместному проекту. Юзер пришёл просто поработать в проекте и ему ваш Б24 нафиг не нужен. Вот и зачем юзеру ваша реклама? Вы и так получаете лид и будете его спамить (может не так часто).

10. “поручение”?! Это ещё что? Поручительство? или ставлю задачу вашим менагерам? Зачем это здесь?!

а вот эти белый уголки к какому из ваших пунктов относятся? 😉

ещё есть Р7-Офисе, похож на Яндекс, там сильно больше функционала и не такой глючный (как Янда)

Р7, Яндекс, ВК — всё это сильно похоже на OnlyOffice (интерфейс word 2000), а по удобству быстрого создания и редактирования документов им всем сильно далеко до Гугла.

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

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

“Хочу” — помогает выбрать текст для кнопки.

Обычное флоу в подобных случаях выглядит так:

  • юзер вводит телефон

  • жмёт кнопку "Получить / Отправить"

  • экран/окно переключается на форму ввода кода (4-6 цифр), обычно, там уже нет поля ввода телефона

  • вот на экране ввода кода уже есть ссылка (не кнопка) "Отправить код ещё раз" (или что-то в этом роде)… и бывает кнопка на подобии "Подтвердить" (обычно без неё)

На скрине из примера, пока рано "Отправить ещё раз", т.к. отправлять нечего, система ещё не знает телефон юзера

«Подтвердить» — это больше подходит для окна, где вводят сам код. А на этом экране пока ещё ничего не подтверждают.

  • слово "запросить" считается сложным для простых юзеров

  • ну и вроде как, юзеру не пристало что-то "просить"… он требует: получает, отправляет, покупает и т.д. ))

Information

Rating
Does not participate
Location
Россия
Date of birth
Registered
Activity

Specialization

UX Analyst
Web development
Site testing
Manual testing
Usability audit
UX-copywriting