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

Мэтью Стрём поделился рекомендациями по оформлению таблиц.

— Зачем нужны табличные цифры (есть в бесплатном шрифте Work Sans) и моноширинные шрифты;
— Правила выравнивания;
— Как не повторять единицы измерения в строках таблицы;
— И так далее.

In English. #table

Михаил Капанага написал, почему правила валидации иногда должны быть сложнее такого: «Поле с номером телефона можно пропускать, если в нём есть хоть что-то, а почту — если есть собака, точка и текст вокруг них».

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

Кстати, хороший справочник по форматам номеров карт составили в Baymard Institute.

Марат Ижанов дал 10 советов о построении навигации на сайте. Каждый совет — картинка в формате плохо — хорошо. Среди них:

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

Опубликовал выжимку из книги Нира Эяля «Покупатель на крючке» — о том, как создавать продукты, вызывающие привыкание.

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

Триггер → Действие → Вознаграждение → Инвестиция → Внутренний триггер.

https://vandergrav.ru/hooked-book-summary/

Илья Александров написал о своём опыте создания прототипов: аппарат по продаже симкарт, экран в кабине грузовика, процесс настройки «лайтпака» (аналог Philips Ambilight), звуковая индикация в носимом устройстве — всё кроме сайтов и приложений.

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

#prototype

Наталия Спрогис написала об айтрекинге. Рассказ основан на опыте руководства направлением UX-исследований в Mail.Ru Group.

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

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

О тепловых картах: «Блок, который получит 10 фиксаций от одного респондента, и блок, которому досталось по одной фиксации от 10 человек, могут стать одинаково „горячими“. Это поведение настолько непохожее, что ведет к совершенно разным выводам о продукте».

У компании «СКБ Контур» (один из продуктов — облачная бухгалтерия «Эльба») есть интерфейсные гайдлайны. Например, о валидации форм:

— Когда и как показывать сообщения об ошибках;
— Каким должен быть текст;
— Что делать с чекбоксами и группами радиокнопок в формах.

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

#form #error

Скотт Харф привёл результат исследования минимального размера кнопки для тач-интерфейсов и сравнил с рекомендациями Apple, Google и Microsoft.

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

В статье есть подсказка, как пересчитывать миллиметры в пиксели и пункты.

In English (копия в Вебархиве). #button #mobile

Написал, почему дизайн не должен «просто работать».

«В случае алкомаркета "Красное и белое" покупатель заметит магазин. Возможно, ему плевать на качество исполнения вывески, особенно, если надо купить водки и напиться. Но он и его дети будут жить в среде, где распространены такие визуальные решения.

Домой он закажет некрасивую отечественную мебель. На своём заводе утвердит макет чайника, который промышленные дизайнеры нарисовали левой пяткой, так как надо показать 3 варианта, а этот "он точно не выберет"».

Кейт Мейер рассказала, как делать сравнительные таблицы. Например:

— Пусть шапка прилипает и всегда будет на виду;
— Показывайте отличающиеся значения;
— Не отображайте параметры, по которым нет значений хотя бы у одного товара;
— Помогайте понять числовые значения. Например, Амазон показывает: вес 2,7 унции (яйцо), габариты 3,5×0,9×0,9 дюймов (помада).

In English. Копия перевода в Вебархиве. #table

В переводе появилась первая серия «Abstract: The Art of Design» — документального сериала о культовых дизайнерах современности.

Первая серия — об иллюстраторе Кристофе Нимане, одном из авторов обложек The New Yorker. Он везде играет с абстракциями и интерактивностью: от обложек журналов до скетчей в Инстаграме.

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

— О чём стоит подумать, прежде чем добавлять их в продукт;
— Что учесть при проектировании алгоритмов.

In English. Копия перевода в Вебархиве.

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

В компании InPlat на 20000 платежей сравнили её и компактный вариант расположения полей. При одинаковой конверсии скорость заполнения компактной формы оказалась выше. Плюс, такая форма проще адаптируется для смартфонов.

Ещё одна статья о теории близости. На этот раз разбирается не только текстовый блок, но и более сложный объект — форма регистрации.

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

Пока другие просят „добавить воздуха“ или „причесать дизайн“, с теорией близости можно быть конкретным: „Заголовок должен быть ближе к новости, к которой он относится“».

У нас постоянно возникают задачи — jobs: убить время в очереди, приготовить полезный завтрак, поделиться впечатлением от поездки. Мы «нанимаем» продукт, чтобы он нам помог. И выбираем его не потому, что он подходит нам и нашим особенностям, а потому что решает задачу.

Подходу Jobs to be done более 30 лет. Анна Булдакова рассказала:
— Об отличии от традиционного подхода с персонами и юзерстори;
— Как провести исследование, какие вопросы задать и кому;
— Как определить место начала и окончания «работы»;
— Что такое прямая (за работу) и непрямая (за результат) конкуренция продуктов.

User story: я 30-летний Петя, хочу съесть что-нибудь вкусное, чтобы больше не быть голодным.

Job story: у меня 2 минуты между встречами, хочу съесть что-нибудь просто и быстро и поднять уровень сахара в крови, чтобы продержаться до обеда и сохранить рабочий настрой.

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

Для тех, кто хочет развлечься этим воскресным днём, подоспела вторая серия Abstract на русском языке.

Она посвящена Тинкеру Хетфилду — легкоатлету и дизайнеру Nike, который участвовал в создании «джорданов» и, например, самозашнуровывающихся кроссовок из «Назад в будущее». Интересно про взаимодействие с Майклом Джорданом, изначальное отличие от обуви Reebok. Серия получилась бодрее первой.

https://vk.com/video-59434067_456239028

Сайты многих компаний на главной странице сразу открывают «чат с консультантом» и активно призывают задавать там вопросы. Мне (и, думаю, многим другим) это кажется настырным: я только зашёл, ещё не успел осмотреться и понятия не имею, возникнут ли вопросы, а на меня уже накидываются и что-то от меня хотят.

А недавно увидел на одном сайте справа внизу — там, откуда обычно вылезает форма чата — небольшую кнопку со скромной надписью «Если что, мы здесь». И сразу ощутил «вот же лапочки, как прекрасно сделали: никакой настырности, но при этом очевидно, как одним кликом открыть диалог».

И первой мыслью после этого было «Что ж все остальные так не делают, как здорово было бы жить».

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

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

Маркетолог Рори Сазерлэнд рассказывает, как менять восприятие и влиять на поведение людей.

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

Рори привёл не такой известный пример — про поезд Лондон-Париж. Была задача улучшить поездку, потратили 6 млрд фунтов на новые рельсы, которые сократили 4-часовую поездку на 40 минут. Улучшить поездку могли бесплатные напитки, и обошлись бы они дешевле.

Ататюрк хотел устранить ношение платка в Турции, но не стал просто запрещать его — общество стало бы сопротивляться. Он обязал всех проституток носить платок.

https://www.youtube.com/watch?v=nMI5KLfYsqg

В КБ «Собака Павлова» написали о UX-исследованиях, которые проводят западные компании при разработке цифровых продуктов.

Кейсы: Дисней, Форд, Википедия, SAP, Intel, Philip Morris, Samsung, Vodafone, PayPal и другие.

http://pavlova.cc/westuxresearch/