KdeBlog

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

Пользовательский интерфейс — Глава 4 «Экраны»

Окна
Управление окнами — не задача пользователя.
В качестве примера — почта, в которой всё в одном окне, но при клике открывается в новом. Без необходимости окна не плодятся.
Вкладки — организация пространства без окон.
Бока экрана — лучшее место для кнопок. Прицеливание минимально.
Попап — самое тупое, что можно придумать. не требует никаких интеллектуальных усилий дизайнера.
Дальше приводится пример (как замена попапа) с анимацией сдвига и раскрытия информации.
Как аргумент приводится интерфейс службы охраны, в котором всё должно быть на виду (за уши притянуто).
Формы
Данные формы бесконечно ценны. Не надо забывать, что на мобильном можно промахнуться, вернуться, отвлечься, перезагрузить страницу свайпом и ... потерять данные.
Поля ставить лучше друг под другом, избегая «кирпичной кладки».
Подпись и текст полей должен быть набран одним шрифтом и стоять на одном baseline’е с первой строкой (если их много).
Пишут, что выравнивать надо по левому краю. Если подписи выравнивать по правому краю, то ломается левый край и тяжелее читать.
Если подпись длинная по сравнению с остальными, то лучше переносить на 2 строки (или лучше сократить).
На большом экране лучше «табличная вёрстка», на мобильниках подпись можно ставить над полем.
Размер поля должен подсказывать, что ожидается от пользователя (код домофона — небольшое поле).
Сообщение об ошибке должно максимально помогать человеку.
Место для ошибок лучше заранее предусматривать.
Преждевременный показ ошибок так-же неправильно.
Вместо подсказок по исправлению ошибок надо их минимизировать (маски, отключение недоступного).
О незаполненном поле надо говорить перед отправкой.
Все поля должны быть обязательными или убирать их нафиг. Подписать только «Комментарии, если есть». Необязательные лучше отделить и дополнительно подписать.
Кнопки не надо отключать, если не заполнено единственное обязательное поле — вся форма кажется неработающей.
На страницах, где пользователь принимает решение о покупке кнопки лучше не отключать.
Если логика сложная и кнопка отключена, то можно подписать причину («Осталось заполнить...») и дать ссылку на не заполненные поля.
Навигация
Пошаговый процесс добавляет порядка. Но злоупотреблять этим не стоит.
Слова «Продукты» и «Услуги» не информативны. Хороший пример — ИКЕЯ.
Фильтры
Хорошие фильтры способны заменять сложную иерархию
Нельзя вываливать на посетителя фильтры — БД
Поиск
Должен работать совместно с тегами, должен подсказывать где найдены результаты.
Сетка
Тут всё стандартно — всё должно быть по сетке, даже размеры полей формы.
Как и в слу­чае с отсту­пами между эле­мен­тами, текст в интер­фейсе выиг­ры­вает от умень­ше­ния числа раз­ных кег­лей и стилей.
В общем, сетка, сетка, гайдлайны....

2019  

Пользовательский интерфейс — Глава 3 «Язык»

Лицевая панель тетради — первая форма в жизни каждого россиянина.
Заголовок формы — подлежащее (именительный падеж)
Кнопка — сказуемое.
Слова в подлежащем и сказуемом не повторяются (Заказ, Сделать заказ)
Писать «Нажмите, чтобы купить» на кнопке — такая же неле­пость, как писать «Вой­дите, чтобы уви­деть дирек­тора» на двери кабинета.
Глав­ная функ­ция кнопки — дать команду ком­пью­теру. В син­так­сисе эле­мен­тов интер­фейса это гла­голь­ное ска­зу­е­мое, отве­чает на вопрос «Что сде­лать?». Исполь­зу­ется гла­гол совер­шен­ного вида в началь­ной форме.
«Новый документ» — неправильно. Правильно «Создать документ»
Вто­рая функ­ция кнопки или пункта меню — изме­не­ние ста­туса или отно­ше­ния к объекту. Статус может быть выражен глаголом в личной форме.

2019   UX UI

Пользовательский интерфейс — Глава 2 «Взаимодействие»

https://bureau.ru/bb/soviet/20161212/
Гештальт-принципы:
Эффект массы, эффект близости, эффект обрамления, эффект схожести, эффект контраста.
Эффект ожидания — если пользователю показать информацию о времени ожидания, то время ожидания более «приятное».
Эффект выбора: если у человека есть выбор, то он чувствует себя спокойнее. Например, товары те-же, но надо добавить: самые популярные, самые синие...

Закон Фитца
Закон близости — самый главный и часто нарушаемый принцип. Читатель в состоянии сообразить к чему относится заголовок, но лучше сэкономить его время.
https://www.artlebedev.ru/kovodstvo/sections/136/
Часто закон легко нарушить в радио-кнопках, если их очень много.
Классические радиокнопки должны стоять друг под другом (спорно)
Группировка кнопок в тулбаре имеет место быть.
Близость сильнее стрелок и других элементов дизайна.
Правило хорошей вёрстки — не повторять ритм на соседних этажах.
Размер кнопок можно делать меньше, но область нажатия должна быть достаточной.
Пункты меню должны нажиматься во всю ширину, чекбоксы выбираться по всему label’у. Но это мы и так знали.
Айфон увеличивает область нажатия для неадаптированных под телефоны страниц.
Углы экрана — самое легко-попадаемое поле.
Как обычно старый пример с меню Амазона.
Информативность — признак хорошего интерфейса. 2 способа повышения: убрать шум и добавить сигнал.
Интересный пример с «хлебными крошками». Предлагают убирать последний текущий элемент (согласен) и первый, если он есть в главном меню (виден на экране).
За скобки выносится всё, что повторяется.
А вот и правда не замечал, что на Маке кнопка закрытия окна с точкой, если данные не сохранены.
Цена на кнопки купить без всяких «Купи пожста, дорогой человек».
Тут говорят, что правило 7 элементов — ерунда. Туда-же идут правила 2-х секунд, трёх кликов, 80/20. Тафти согласен, что правило может быть ерундой.
https://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0000U6
Обратная связь
Не должна быть навязчивой: не надо каждый раз при добавлении в корзину показывать модальное окно.
У пользователя не должно возникать вопросов, что происходит. Подгрузка фото — хорошая практика.
Иногда надо сразу показать результат «Принято». Например, в навигаторах. Мгновенно, но без обмана.
Кнопки «Рассчитать» быть не должно.
Интересный пример с калькулятором «Связного банка». Ползунки объединены с полем для ввода.
https://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html?_r=2&abt=0002&abg=0 — Отличный пример информационная статья NY Times.
Непре­рыв­ная интер­фейс­ная реак­ция на дей­ствия поль­зо­ва­теля имеет наи­выс­ший при­о­ри­тет. Этот прин­цип состав­лял реша­ю­щую раз­ницу между Айфо­ном и осталь­ными устрой­ствами, и это было одним из глав­ных про­ры­вов в его интерфейсе.
«Осо­бая глу­пость — выбор того, по сколько эле­мен­тов на стра­нице показывать» — вот так вот безапелляционно.
В пример часто приводится http://fotorama.io.
https://vimeo.com/61556918 — историческое видео «Каким мог бы стать интерфейс, если бы».
В Хроме, оказывается, жёлтые метки на скроле — результаты поиска.
Скромно приписали себе «скукоживание» шапки при прокрутке.
Страшная ошибка — срабатывание прокрутки после прохождения какого-то порогового значения. Когда нет обратной связи на прокрутку.
Проблема скрола — вернуться на нужную позицию при перезагрузке не всегда можно.

2019  

Иконки

Иконки в блоке должны отображать либо статус, либо действие. Не должно быть: эта у нас обозначает, что заказ удалён, а рядом иконка «Лупа» и если на неё нажать, то можно найти заказ.

2019   UX UI

2 секунды на принятие решения — бред копирайтеров

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

Пользовательский интерфейс — Глава 1 «Принципы»

Пульт — надписи над кнопками, что бы не загораживать пальцами
Данные пользователя бесконечно ценны. Не надо спрашивать «Хочет-ли человек продолжить с мета окончания просмотра» — надо начинать с этого места. Перемотать на начало можно всегда.
Принцип «Сначала данные», а потом фильтры. Пример, поиск отеля: спросили город — вывели популярные — затем фильтрами.
Древовидная структура удобна программисту, но не пользователю.
«Технологии под капот» — что-бы узнать всё о картине надо наводить телефон на неё, а не на черно-белый код справа.
Кто понимает силу привычек — понимают интерфейс. Отсылка к примеру Раскина со сменой педалей автомобиля.
Приложения надо проектировать под каждую систему с соблюдать её традиции. Пример, расположение кнопок «Да» и «Нет» на Маке и Винде.
Интерфейс не должен стоять между пользователем и покупкой. Амазон — купил один раз и данные сохранились. Дальше можно покупать одной кнопкой. И отменить заказ в течении 30 минут.
Модальный интерфейс — есть состояния, которые человек не осознаёт во время жеста.
Модальные ошибки (хотел одно, а получил другое) чаще возможны, если сложно определить состояние.
Модальные всплывающие окна — зло. В идеале — сообщение, которое отображено на экране, но которое не теряется пока не смахнешь.
Модальность — признак плохого интерфейса
Вместо того, что-бы придумать как сказать пользователю, в каком модальном состоянии находится интерфейс, надо думать, как от состояний избавиться.
Квазирежим — пользователь удерживает режим самостоятельно (рация, кнопка Shift).
Хороший сценарий побеждает модальность.
Нельзя думать, что человек помнит, что видел только что. Он может одновременно пользоваться 10-ю интерфейсам.
При проектировании не забывать о состоянии, когда еще нет никаких данных.
Взглядом новичка стоит проверять надо проверять сайты. Чем занимается компания? Статьи и проекты есть на каждом втором сайте.
Технозависимость — пользователя не надо заставлять облегчать работу программиста :)

2019   UX UI   книга

Джеф Раскин — Интерфейс. Новые направления в проектировании компьютерных систем

1.4 Если известно, что интерфейс будет использоваться для каждодневных рутинных задач, то время — главный критерий качества. Даже, если придётся обучать пользователя.
1.5 Все данные, которые вводит пользователь — бесценны.
1.6 Ритм UX должен устанавливать пользователь.
2.2 Хороший пример из «когнитивное бессознательное» в «сознательное» — последняя буква имени.
Читаешь, упала книга, вернулся к чтению — обратный пример.
2.3 «Не думай о белом слоне» — локус внимания. Внимание сфокусировать мы сможем, локусом управлять нельзя. Смотреть на предмет и не «видеть» его — отличие локуса от фокуса.
5 секунд среднее время локуса внимания на какое-то сообщение интерфейса.
2.3.1 Любая привычка — отказ от деталей. Идеальный интерфейс формирует полезные привычки.
Если в интерфейсе одну проблему можно решить несколькими способами, то локус внимания сводится с задачи на выбор пути.
Не все привычки можно сразу поменять: что будет если поменять в машине местами педали. Даже если на панель поставить лампочку, горящую при неправильном нажатии.
2.3.2 Если выполняются 2 задачи и ни одна не является автоматичной — производительность / 2 («интерференция» в психологии).
Привычки в интерфейсах не всегда хорошо. Любой запрос на подтверждение удаления данных вскоре становится бесполезным.
Их быть не должно — должна быть возможность восстановить данные. Либо делать его более сложным: «введите итоговую сумму для удаления записи».
2.3.3 Локус внимания может быть только один. Поглощенность задачей мешает смене локуса внимания. Интерфейс должен работать независимо от поглощенности пользователя.
Чем больше нарастает волнение — тем меньше замечаются подсказки и другая помощь интерфейса.
Пользователь должен чувствовать себя спокойно при использовании хорошего интерфейса. Должна быть возможность отменить результат любого действия.
2.3.4 Истоки одного локуса внимания конечно-же эволюция.
2.3.5 Хороший пример: при выключении сохраняется экран, при включении и загрузке данный экран показывается пользователю, переключая его в рабочий контекст.
10 секунд — среднее время переключения контекста пользователя.
2.3.6 Возвращаться пользователь должен на то место, где закончил (строка в документе). Открытый документ.
#Нет прогресса без борьбы

2019   UX UI   книга