Федор Борщев написал, как вырастает оценка задачи, если надо не просто сделать, а сделать хорошо.
— У качественных продуктов не бывает небольших доработок;
— Объем работ прирастает очень быстро. То, что при планировании кажется 5 минутами, моментально превращается в неделю;
— Пропихнуть фичу в следующий спринт — легко. Написать — сложно. Поддерживать всю жизнь — [устанешь].
— У качественных продуктов не бывает небольших доработок;
— Объем работ прирастает очень быстро. То, что при планировании кажется 5 минутами, моментально превращается в неделю;
— Пропихнуть фичу в следующий спринт — легко. Написать — сложно. Поддерживать всю жизнь — [устанешь].
Павел Моисеенко рассказал о своих приёмах вёрстки сложных форм.
— Подписи в форме должны читаться как связное предложение;
— Скрывать связанные с чекбоксом элементы, пока не поставлен флаг;
— Устанавливать значения по умолчанию, подходящие большинству пользователей;
— Наиболее важный пункт выделять нестандартным контролом.
Копия в Вебархиве.
— Подписи в форме должны читаться как связное предложение;
— Скрывать связанные с чекбоксом элементы, пока не поставлен флаг;
— Устанавливать значения по умолчанию, подходящие большинству пользователей;
— Наиболее важный пункт выделять нестандартным контролом.
Копия в Вебархиве.
Пройдите 1-минутный тест на внимательность с баскетболистами. Нужно сосчитать количество пассов, которые сделает команда в белом. Если уже проходили этот тест, напишите, какой результат был в первый раз. https://www.youtube.com/watch?v=Ahg6qcgoay4
Не увидел / не увидела – 69
👍👍👍👍👍👍👍 45%
Увидел / увидела – 47
👍👍👍👍👍 30%
Хочу просто посмотреть распределение ответов – 39
👍👍👍👍 25%
👥 155 people voted so far.
Не увидел / не увидела – 69
👍👍👍👍👍👍👍 45%
Увидел / увидела – 47
👍👍👍👍👍 30%
Хочу просто посмотреть распределение ответов – 39
👍👍👍👍 25%
👥 155 people voted so far.
Дима Шишкин сделал конспект «Типографики и вёрстки» Артёма Горбунова. Можно вспомнить, о чём в книге шла речь, а тем кто не читал — решить, стоит ли содержимое 1200 рублей (подписка на 3 месяца).
Копия в Вебархиве.
Копия в Вебархиве.
web.archive.org
Конспект «Типографики и верстки» Артема Горбунова
Книга Артема Горбунова — наиболее полный справочник для дизайнеров-верстальщиков
В Mobiscroll составили рекомендации по дизайну форм на смартфонах.
— Вместо выпадающих списков используйте сегментные контролы (если вариантов мало), переключатели (если варианта всего 2: да или нет) или кнопки «плюс» и «минус» (если варианты — это числа);
— Выбор дня, месяца и года или часа и минуты делайте единым контролом;
— Используйте слайдеры;
— Избегайте нескольких колонок;
— Показывайте сообщения об ошибках рядом с полями;
— Если много обязательных полей, помечайте только необязательные;
— Группируйте поля по смыслу;
— Не делайте кнопки слишком маленькими;
— Старайтесь придерживаться правил платформ.
— Вместо выпадающих списков используйте сегментные контролы (если вариантов мало), переключатели (если варианта всего 2: да или нет) или кнопки «плюс» и «минус» (если варианты — это числа);
— Выбор дня, месяца и года или часа и минуты делайте единым контролом;
— Используйте слайдеры;
— Избегайте нескольких колонок;
— Показывайте сообщения об ошибках рядом с полями;
— Если много обязательных полей, помечайте только необязательные;
— Группируйте поля по смыслу;
— Не делайте кнопки слишком маленькими;
— Старайтесь придерживаться правил платформ.
AppTractor
Создание удобных мобильных форм
Заполнять формы мало кто любит, тем более на мобильных устройствах с их маленькими экранами и управлением пальцами. Поэтому при проектировании мобильных форм вам надо уделить повышенное внимание удобству использования и эффективности ввода информации.
Кевина Виньо раздражает, когда на адаптивных сайтах блок «3 преимущества» в десктопной версии располагается горизонтально и занимает один экран, а в версии для смартфонов — вертикально и занимает 3 экрана.
Учитывая, что таких блоков обычно несколько, версия страницы для смартфонов получается слишком длинной, а 3 преимущества пользователь перестаёт воспринимать цельно.
Кевин предложил другие способы компоновки этого блока для отображения на смартфонах.
In English.
Учитывая, что таких блоков обычно несколько, версия страницы для смартфонов получается слишком длинной, а 3 преимущества пользователь перестаёт воспринимать цельно.
Кевин предложил другие способы компоновки этого блока для отображения на смартфонах.
In English.
Рори Сазерленд снова рассказал, как небольшие изменения меняют восприятие и поведение людей. Например, возможность контролировать ситуацию (даже мнимая) повышает удовлетворение.
Одним из самых удачных улучшений в лондонском метро по отношению позитивных отзывов к затратам были точечные дисплеи на платформах, которые показывали, когда будет следующий поезд.
Обратный отсчёт красного света светофора снизил количество ДТП в Южной Корее, так как нетерпеливость и раздражительность снижаются, когда знаешь, сколько ещё ждать.
В Китае не поняли принцип и добавили обратный отсчёт на зелёный свет, что провоцировало ускорение, когда оставалось мало времени. Это привело к росту ДТП.
Одним из самых удачных улучшений в лондонском метро по отношению позитивных отзывов к затратам были точечные дисплеи на платформах, которые показывали, когда будет следующий поезд.
Обратный отсчёт красного света светофора снизил количество ДТП в Южной Корее, так как нетерпеливость и раздражительность снижаются, когда знаешь, сколько ещё ждать.
В Китае не поняли принцип и добавили обратный отсчёт на зелёный свет, что провоцировало ускорение, когда оставалось мало времени. Это привело к росту ДТП.
YouTube
TED на русском. Рори Сазерленд. Угол зрения.ONEDAR FILMS
"Обстоятельства влияют на нашу жизнь меньше, чем то, как мы на них смотрим" - утверждает человек из мира рекламы - Рори Сазерлэнд. На TEDxAthens он приводит ряд убедительных примеров того, как взгляд на вещи под другим углом может быть ключом к счастью. …
Илья Бирман написал, как подписывать кнопки и пункты контекстного меню.
1-я функция кнопки — дать команду компьютеру. Кнопка отвечает на вопрос «Что сделать?». Используется глагол совершенного вида в начальной форме: Отправить; Купить; Добавить; Настроить.
2-я функция кнопки или пункта меню — изменение статуса, отношения к объекту. Отвечает на вопрос о подлежащем «— это что? какое?». Используется существительное, прилагательное, наречие, причастие, числительное, например: Это спам; Важное; Готово; 5.
Формулировки в виде команды в таких случаях избыточны («Отметить как…», «Перевести в категорию…», «Оценить на…»), то есть малоинформативны.
1-я функция кнопки — дать команду компьютеру. Кнопка отвечает на вопрос «Что сделать?». Используется глагол совершенного вида в начальной форме: Отправить; Купить; Добавить; Настроить.
2-я функция кнопки или пункта меню — изменение статуса, отношения к объекту. Отвечает на вопрос о подлежащем «— это что? какое?». Используется существительное, прилагательное, наречие, причастие, числительное, например: Это спам; Важное; Готово; 5.
Формулировки в виде команды в таких случаях избыточны («Отметить как…», «Перевести в категорию…», «Оценить на…»), то есть малоинформативны.
Дизайн-бюро Артёма Горбунова
Как подписывать кнопки?
Как, с точки зрения синтаксиса элементов интерфейса, подписывать кнопки?
Максим Ильяхов советует с осторожностью упоминать слово «успешно» в системных сообщениях и вообще.
«Платеж успешно отправлен → Платёж отправлен».
Единственный случай, когда «успешный» имеет смысл — когда что-то, о чем мы говорим, может быть провальным:
«Сотрудник МВД отчитался об успешном завершении операции → Операция завершена успешно, задержаны все женщины и дети».
«Платеж успешно отправлен → Платёж отправлен».
Единственный случай, когда «успешный» имеет смысл — когда что-то, о чем мы говорим, может быть провальным:
«Сотрудник МВД отчитался об успешном завершении операции → Операция завершена успешно, задержаны все женщины и дети».
maximilyahov.ru
Успешно
Осторожнее со словом «успешно». .error{ color: #dA570f;
Николай Бабич рассказал, как должна работать страница с результатами поиска. Некоторые из рекомендаций. Некоторые из рекомендаций:
— Не удаляйте запрос после нажатия на кнопку «Найти»;
— Автозаполнение должно работать;
— Исправляйте опечатки;
— Сохраняйте историю запросов;
— Во время поиска показывайте прогресс;
— Подключите возможность сортировать и фильтровать результаты;
— Не выдавайте «Ничего не найдено».
In English (копия в Вебархиве).
— Не удаляйте запрос после нажатия на кнопку «Найти»;
— Автозаполнение должно работать;
— Исправляйте опечатки;
— Сохраняйте историю запросов;
— Во время поиска показывайте прогресс;
— Подключите возможность сортировать и фильтровать результаты;
— Не выдавайте «Ничего не найдено».
In English (копия в Вебархиве).
Хабр
Лучшие практики для поисковой выдачи
Поиск — это своего рода разговор между пользователем и системой: пользователь формулирует свою потребность в информации как запрос, а система дает ответ в виде списка результатов. Поисковая выдача —...
Михаил Калашников написал, как создавать такие продукты, чтобы пользователь не чувствовал себя неудачником только потому, что он новичок, не хочет разбираться в сложных правилах или не планирует быть хардкорным пользователем.
Советы по правильной геймификации, работе с сообществом и помощи пользователям в создании контента. Примеры из жизни Sports.ru.
Советы по правильной геймификации, работе с сообществом и помощи пользователям в создании контента. Примеры из жизни Sports.ru.
Media Skunk
Как делать продукты для неудачников
Многие продукты и сообщества в первую очередь рассчитаны на их самых успешных пользователей. Это происходит само собой: у лучших обычно есть контакт с теми, кто делает продукт, они громкие и ценные…
Опубликованы доклады с ProfsoUX 2017. Лучшие (по мнению участников конференции):
1. Михаил Фролов — Мама, прости, что-то пошло не так.
2. Тамара Кулинкович — Как точно определить задачи и выбрать метод: канва для исследователя.
3. Eric Reiss — UX strategy — the secret sauce that defines the pixie dust.
4. Илона Саркисова — Математический аппарат в UX. Как проверять гипотезы на статистических данных.
5. Илья Александров — Истории о прототипах.
6. Максим Цепков — Опыт госпроектов и взаимодействия с корпоративными структурами.
7. Ксения Колтун, Станислав Борисевич — Как выучить дизайнеров.
1. Михаил Фролов — Мама, прости, что-то пошло не так.
2. Тамара Кулинкович — Как точно определить задачи и выбрать метод: канва для исследователя.
3. Eric Reiss — UX strategy — the secret sauce that defines the pixie dust.
4. Илона Саркисова — Математический аппарат в UX. Как проверять гипотезы на статистических данных.
5. Илья Александров — Истории о прототипах.
6. Максим Цепков — Опыт госпроектов и взаимодействия с корпоративными структурами.
7. Ксения Колтун, Станислав Борисевич — Как выучить дизайнеров.
Vimeo
20170415BK Мама, прости, что-то пошло не так
http://0x1.tv/20170415BK Мама, прости, что-то пошло не так (Михаил Фролов, ProfsoUX-2017) * Михаил Фролов ------------- * как я попал в менеджеры, куда тыркался…
Видео о таком когнитивном искажении как ошибка выжившего.
— Не всегда стоит смотреть на успешный продукт и делать так же;
— Для улучшения продукта стоит опрашивать в том числе тех, кто отказался от его использования.
— Не всегда стоит смотреть на успешный продукт и делать так же;
— Для улучшения продукта стоит опрашивать в том числе тех, кто отказался от его использования.
YouTube
Ошибка выжившего [2veritasium]
Помощь проекту: https://vertdider.tv/to-support-us/
Не забывайте, что имеющаяся у нас информация всегда неполна, а следовательно, всегда есть опасность систематической ошибки, когда мы делаем вывод о каком-нибудь явлении. «История пишется победителем». Но…
Не забывайте, что имеющаяся у нас информация всегда неполна, а следовательно, всегда есть опасность систематической ошибки, когда мы делаем вывод о каком-нибудь явлении. «История пишется победителем». Но…
Кирилл Беляев написал о курсе Ильи Бирмана «Пользовательский интерфейс и представление информации».
«Пользовательские данные бесконечно ценны. К ним относится и выбор, который делал пользователь. Раньше не думал так о выборе. Просто представлял, как мешает, когда система не помнит, что выбрано или сама меняет выбор по неочевидным правилам».
«Понравился рассказ, как Илья отправлял Артёму свою первую схему челябинских троллейбусов и трамваев. Он предложил Илье убрать промежутки между параллельными линиями. Илья убрал и написал, что теперь линии плохо различимы и отступы нужно вернуть. Артём ответил, что вместо отступов, цвета подбирают так, чтобы те хорошо различались».
«Пользовательские данные бесконечно ценны. К ним относится и выбор, который делал пользователь. Раньше не думал так о выборе. Просто представлял, как мешает, когда система не помнит, что выбрано или сама меняет выбор по неочевидным правилам».
«Понравился рассказ, как Илья отправлял Артёму свою первую схему челябинских троллейбусов и трамваев. Он предложил Илье убрать промежутки между параллельными линиями. Илья убрал и написал, что теперь линии плохо различимы и отступы нужно вернуть. Артём ответил, что вместо отступов, цвета подбирают так, чтобы те хорошо различались».
Kirillbelyaev
Курс Ильи Бирмана «Пользовательский интерфейс и представление информации»
В 2013...2014 я 9 месяцев стажировался в бюро, поэтому сверхоткрытий от курса не ждал
Психолог из Valve Майк Амбиндер рассказал о человеческом внимании, предпочтениях, когнитивных искажениях, мотивации и как это использовать при разработке игр. Хороший пример борьбы с «токсичным» поведением:
«В конце матча стали задавать 2 вопроса. Сначала просили оценить уровень командной работы. Отношение игрока к своей команде — полезные данные, но мы спросили это только ради следующего вопроса: оцените собственный уровень работы в команде.
Конечно, игроку в любой ситуации хочется оценить себя на 5 звёзд. Но если он вёл себя плохо, ругался на окружающих или нарочно вредил собственной команде, ему будет намного сложнее это сделать.
Из-за конфликтующих идей возникает когнитивный диссонанс: я плохо работал в команде, но я очень хотел бы оценить себя на 5. Совсем небольшое изменение, маленький опрос, но общее число ежедневных жалоб упало на 12,5%».
Видео in English.
«В конце матча стали задавать 2 вопроса. Сначала просили оценить уровень командной работы. Отношение игрока к своей команде — полезные данные, но мы спросили это только ради следующего вопроса: оцените собственный уровень работы в команде.
Конечно, игроку в любой ситуации хочется оценить себя на 5 звёзд. Но если он вёл себя плохо, ругался на окружающих или нарочно вредил собственной команде, ему будет намного сложнее это сделать.
Из-за конфликтующих идей возникает когнитивный диссонанс: я плохо работал в команде, но я очень хотел бы оценить себя на 5. Совсем небольшое изменение, маленький опрос, но общее число ежедневных жалоб упало на 12,5%».
Видео in English.
Эндрю Койл написал об интерфейсных приёмах, с помощью которых можно упростить работу с большими таблицами.
— Закрепление заголовка;
— Закрепление столбца с параметрами и отдельных столбцов;
— Возможность изменить ширину столбца;
— Чередование фона в строках (зебра);
— Отображение сводки по табличным данным;
— Появление управляющих кнопок при наведении курсора на строку;
— Возможность редактирования данных в строке;
— Отображение дополнительных данных, связанных со строкой (Эндрю предлагает несколько разных способов);
— Сортировка и фильтрация (разные способы);
— Настройка отображаемых столбцов и их порядка следования.
In English. #table
— Закрепление заголовка;
— Закрепление столбца с параметрами и отдельных столбцов;
— Возможность изменить ширину столбца;
— Чередование фона в строках (зебра);
— Отображение сводки по табличным данным;
— Появление управляющих кнопок при наведении курсора на строку;
— Возможность редактирования данных в строке;
— Отображение дополнительных данных, связанных со строкой (Эндрю предлагает несколько разных способов);
— Сортировка и фильтрация (разные способы);
— Настройка отображаемых столбцов и их порядка следования.
In English. #table
Рауль Гулати собрал примеры применения эвристик Якоба Нильсена для интерфейса. Несмотря на название статьи, там не только дашборды.
In English. #heuristic
In English. #heuristic
Пол ван Ойен написал, как передавать разработчикам требования к анимации.
Анимации в интерфейсе становится всё больше. Крупные компании вроде Google и IBM в своих рекомендациях уделяют ей отдельное внимание.
Часто разработчики получают от дизайнеров довольно смутное описание задачи: видео или GIF с анимацией в несколько секунд и пара комментариев. Им приходится самостоятельно анализировать происходящее на картинке, а дизайнер часто получает не то, что планировал.
Спасти ситуацию может кривая анимации или моушн-граф — графическое представление временной шкалы анимации, на которой показаны подробности движения элементов.
In English.
Анимации в интерфейсе становится всё больше. Крупные компании вроде Google и IBM в своих рекомендациях уделяют ей отдельное внимание.
Часто разработчики получают от дизайнеров довольно смутное описание задачи: видео или GIF с анимацией в несколько секунд и пара комментариев. Им приходится самостоятельно анализировать происходящее на картинке, а дизайнер часто получает не то, что планировал.
Спасти ситуацию может кривая анимации или моушн-граф — графическое представление временной шкалы анимации, на которой показаны подробности движения элементов.
In English.
Habr
Визуализация требований к анимации интерфейсов
Роман Шелехов, руководитель группы развития корпоративных электронных каналов в Банке ВТБ и магистр Гильдии вольных проектировщиков , специально для «Нетологии» адаптировал статью Paul van Oijen о...