100 вещей, которые должен знать UX/UI дизайнер

Архитектор Майкл Соркин недавно умер от коронавируса, и в знак уважения к его прекрасному произведению «250 вещей, которые должен знать архитектор», я составил список из 100 вещей, которые должен знать UX / UI-дизайнер.

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

1. Угловой размер читабельного текста

Около 0,3 ° от базовой линии до высоты прописных букв. Независимо от того, читаете ли вы текст на телефоне или на билборде, это хороший минимум для обычного текста. Подробнее здесь.

1. Как использовать желтый в качестве цвета бренда

В сочетании с черным или темно-серым. Избегайте желтого текста. Используйте черный или насыщенный оранжевый оттенок на желтом фоне.

1. Лучшие паттерны для отображения таблиц на мобильных устройствах

Просмотрите этот список от Брэда Фроста

1. Как обучить клиента, давать вам хороший фидбек

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

1. Что бы делали ваши пользователи, если бы они не использовали ваше приложение

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

1. Какой продолжительности должна быть анимация при наведении курсора (в миллисекундах)

100 мс - 250 мс – это довольно быстро. Затухание на 500 мс будет казаться медленным, и, если у нескольких близлежащих элементов есть такие затухания, пользователю будет казаться, что он оставляет курсором «рябь».

1. Что такое графический хлам

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

1. Элемент больше всего замедляющий загрузку вашего сайта

Для моего сайта, изображения. А у вас? Первый шаг, проверьте с помощью Google PageSpeed Insights.

1. Что такое смещение освещения сверху вниз

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

1. Знаки пунктуации расположенные на поле страницы (Hanging punctuation)

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

1. Почему определенные цвета конфликтуют

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

1. Рыночная ставка для участников юзабилити-тестирования (60-минутная сессия)

Для США: 50 долларов на низком уровне, 100 долларов – щедрая оплата, а для специалистов – больше.

1. Как выглядел лучший дизайн 1000 лет назад

Как говорится: «Типографика – это 90% дизайна рукописи».

1. Как сделать дизайн, который будет понят через 10 000 лет в будущем

Эти постапокалиптические индикаторы ядерных отходов – хорошее начало.

1. Как сайты зарабатывают деньги

Реклама, подписки, партнерский маркетинг, электронная коммерция, торговые площадки.

1. Как сайт вашего клиента зарабатывает деньги

И, конечно же, ваш дизайн помогает ему заработать еще больше денег.

1. Почему художники никогда не используют черный

Потому что черный редко встречается в реальном мире. Более темные цвета обычно насыщаются каким-либо цветом. Подробнее.

1. Подходящее количество символов в строке для основного текста

Приблизительно 50-75 символов.

1. Как создать сообщение об ошибке, когда цвет вашего бренда красный

Используйте для ошибок желтый или оранжевый цвета. Уменьшите присутствие на странице красного цвета бренда, и пользователи увидят ошибки. Ограничьте ввод, чтобы избежать ошибок (например ,input masking).

1. Когда использовать систему сеток

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

1. Когда не следует использовать систему сеток

Большинству адаптивных дизайнов не следует использовать жесткую сетку из 12 столбцов. Подробнее.

1. Когда центрировать текст

Только при наличии менее 3 строк. И даже в этом случае редко.

1. Когда выравнивать текст по правому краю

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

1. Когда использовать новую антикву (didone)

Для брендов, которым нужно изобразить роскошь или стильность.

1. Когда использовать шрифт с прямоугольными засечками

Начинающим дизайнерам почти никогда. Продвинутые дизайнеры сами знают.

1. Минимальный размер области нажатия на iOS и Android

На iOS: 44x44pt. На Android: 48x48pt.

1. Паттерны отображения результатов поиска

Автозаполнение, выделение запросов, автокоррекция, состояние «нет запроса», состояние «нет результатов», результаты нескольких типов и т. д. Подробнее.

1. Паттерны фильтрации результатов поиска

Фильтрация на боковой панели vs. фильтрация на верхней панели, отображение отфильтрованного состояния vs. Комбинированный список и т. д. Подробнее.

1. Размеры экрана популярных мобильных устройств

Важнее всего ширина. Для iPhone 375pt является наиболее распространенным размером. Для Android 360pt. Подробнее.

1. Какой процент людей посещает ваш сайт с мобильного телефона

Сайт автора всего 20% пользователей.

1. Почему Gmail выделяет ваш поисковый запрос в раскрывающемся списке автозаполнения, а Поиск Google выделяет все, кроме вашего поискового термина, в раскрывающемся списке автозаполнения

Gmail показывает вам конкретные конечные точки поиска (сообщения), которые вы хотите напрямую сопоставить. С другой стороны, Поиск Google угадывает ваш запрос, поэтому то, что вы еще не ввели ключевое отличие.

1. Когда использовать гистограмму, линейный график и круговую диаграмму

Гистограммы и линейные диаграммы похожи, однако, линейные диаграммы более тесно связаны с временными рядами и их легче читать при большом количестве серий. Используйте круговые диаграммы только для категорий, которые в сумме составляют 100%; Гистограммы лучше всего подходят, когда один элемент может отображаться в нескольких категориях.

1. Разница между насыщенностью и яркостью

Насыщенность – это сочность цвета (у серого, белого или черного она равна 0). Яркость похожа на тусклую лампочку. Высокая яркость может быть белым или очень ярким цветом, но нулевая яркость – это всегда черный цвет. Подробнее.

1. Шрифт на мемориальной доске, которую Нил Армстронг оставил на Луне

Futura. Несмотря на то, что он был спроектирован в 1920-х годах, ни один шрифт так не передает дух 60-х годов. Используйте его для брендов, которым нужно придать ретро-ощущения, или используйте толстые веса (часто в верхнем регистре) для спортивных, уличных брендов.

1. Что написано на пластинке космического корабля «Пионер»

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

1. Разница между индуктивным и дедуктивным мышлением

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

1. Почему гуманистические шрифты часто кажутся теплее и дружелюбнее, чем другие шрифты без засечек

Они основаны на почерке – в отличие от геометрических шрифтов.

1. 3 самых популярных шрифта в Google Fonts (для масс)

Roboto, Open Sans и Lato. Последними двумя изрядно злоупотребляют, так что, по возможности, избегайте их. Подробнее.

1. 3 самых популярных шрифта на сайте Typewolf (для законодателей моды)

Apercu, Futura и GT America. Подробнее.

1. Все сочетания клавиш в вашем любимом инструменте проектирования

Обратите внимание, что Sketch и Figma имеют практически идентичные сочетания клавиш.

1. Как создавать сочетающиеся иконки

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

1. Размерность цвета

Цвет – это 3 измерения, измеряете ли вы его в RGB, CMY, HSB, HSL или Lab. Понимание того, что любые два цвета могут различаться тремя способами, позволяет более четко продумывать создание цветовых вариаций.

1. Размер текста по умолчанию в большинстве веб-браузеров, iOS и в Material Design

Веб-браузеры: 16px. iOS: 17pt. Material Design: 16px. Подробнее.

1. Как создать интерфейс, используя только один цвет

При необходимости создайте более темные и более светлые вариации цвета, прежде всего, меняя насыщенность и яркость в противоположных направлениях. Подробнее.

1. Как создать интерфейс не используя цвета

Проектируйте в оттенках серого.

1. ​​Почему шрифты с большой высотой по оси x более разборчивы

Из-за их орнаментированных строчных букв, которые выше относительно размера текста, что облегчает их различие.

1. По меньшей мере 5 способов нанесения текста поверх изображений

Наложения изображений, тени для текста, floor fades, scrims, текст в рамке и многое другое.

1. Рекомендации WCAG по контрасту для основного текста

4.5:1, чтобы соответствовать AA стандартам.

1. Рекомендации WCAG по контрасту текста для заголовков

3:1, чтобы соответствовать AA стандартам.

1. Что Леонардо Да Винчи рекомендовал начинающим художникам

Копирование, конечно

1. Самые полезные режимы наложения

Darken отлично подходит для отображения изображений с белым фоном на слегка затемнённых цветах. Слои черного в режиме Overlay или Soft Light создают более темные вариации слоя, расположенного под ними. Черные слои в режиме Multiply могут быть альтернативой затемнению изображения. И наоборот, белый слой в режиме Overlay может сделать изображение более размытым, но с более яркими цветами, чем простое снижение насыщенности.

1. Принципы хорошей композиции

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

1. Где найти фотографию, которая не выглядит стоковой

Я предпочитаю Unsplash, Pexels и Pixabay.

1. Четыре причины, по которым пользовательский поисковый запрос может не давать никаких результатов

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

1. Как написать сообщение об ошибке

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

1. Как написать призыв к действию

Избегайте стандартных фраз («нажмите здесь»). Предоставьте пользователю преимущество («Запустите бесплатную пробную версию»). Сделайте его актуальным для пользователя, учитывая все, что вы о нем знаете. И сделайте кнопку заметной.

1. Как работает программа чтения с экрана

Текст начитывается. Элементы управления – и их состояние – описывается. Сочетания клавиш могут использоваться для пропуска элементов различных типов – строк поиска, заголовков, ссылок и т. д. Внезапные изменения интерфейса (например, уведомления) могут быть проблематичными. Может помочь семантический HTML, дополненный ARIA-метками.

1. И как много людей использует программы чтения с экрана

Примерно 7 миллионов человек в США сообщают о нарушениях зрения.

1. Что не стоит указывать в своем дизайнерском портфолио

Проекты, которые вы бы не сделали снова. Работа, не связанная с дизайном. Фотография. Подробнее.

1. Как представить дизайн

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

1. Что значит «довольствоваться минимумом»

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

1. Что важнее эстетика или юзабилити

Юзабилити. Подробнее.

1. Что такое распределение Пуассона

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

1. Закон Якоба

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

1. Инструменты разработки браузера

По крайней мере, достаточно для изменения текста, стиля и загрузки изображений.

1. 3 причины не использовать «карусели»

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

1. Что такое закон локальности

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

1. Разница между другом и другом на Facebook

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

1. Как работает PageRank

Алгоритм Google для ранжирования важности веб-страниц. Короче говоря, оценка каждой страницы определяется оценкой сайтов, ссылающихся на нее, которые, в свою очередь, определяются ссылками на них других сайтов и т. д. Подробнее.

1. Компромисс между использованием и исследованием

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

1. Различные типы мобильных клавиатур

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

1. Психология агрессивного вождения

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

1. 10 элементов управления, которые вы можете использовать вместо выпадающих меню

Сегментированные кнопки, переключатели, карточки, буфер клавиатуры, и т. д. Подробнее.

1. Что такое дополнительные товары и товары-заменители

Дополнительные товары – это вещи, которые вы покупаете в дополнение к оригинальной вещи, например, арахис с желе. Товары-заменители вы покупаете вместо оригинальной вещи, например, миндальное масло вместо арахисового. Это две мощные парадигмы при рассмотрении того, какой контент вы можете порекомендовать своим пользователям. Подумайте, что они ищут, и что может дополнить или заменить это.

1. Чего хотят экраны

Фрэнк Кимеро говорит, что они хотят постоянного движения (flux) – то есть изменяться. Брет Виктор называет это волшебными чернилами (magic ink). Без разницы.

1. Почему вы не должны слушать своих пользователей

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

1. Как провести A/B тестирование

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

1. Когда не следует проводить А / B тестирование

Хороший дизайнер готов поддержать свой инстинкт и признает, что большинство A / B-тестов не дадут значимых результатов.

1. Как писать

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

1. Как редактировать

Распечатайте текст и прочтите его вслух. Перефразируйте то, что режет слух. Представьте, что вам платят 1000 долларов за каждое слово, которое вы убираете. Помните: читатель не заметит все удачные куски, которые вы удалили. Он будет судить только по тем хорошим моментам, которые вы оставили.

1. Как хорошие онлайн-сообщества становятся плохими

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

1. Правило 80-20

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

1. Как сделать неплохой логотип

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

1. Почему игры – это весело

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

1. Почему азартные игры вызывают привыкание

В общем: переменное вознаграждение, иллюзия контроля, заблуждение азартного игрока (вера в то, что множество проигрышей означает, что вы «должны» выиграть), и, конечно, тот факт, что это игры, а игры – это весело.

1. Массимо Виньелли сказал, что ему нужно только 5 шрифтов

Bodoni, Helvetica, Times Roman, Century и Futura.

1. Есть по крайней мере два десятка шрифтов, на которые следует обратить внимание

Если вы можете распознать 5 любимых шрифтов Виньелли, то этот (Avenir), и 3 самых популярных шрифта Google Fonts и Typewolf – это уже половина.

1. Где найти вдохновение

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

1. Почему в меню модных ресторанов в ценах не указывают центы

Элегантность в простоте. Если вы хотите лучший товар, то цена — это мелочь. Кроме того, цена: «$ 9,99», как бы говорит вам: «Мы стараемся, чтобы это выглядело дешево».

1. Пять способов уменьшить беспорядок на странице

(A) Удалите элемент. Если это невозможно, (B) облегчите его, или (C) поместите его позади меню. В крайнем случае, просто (D) выровняйте его с другими элементами и (b) сделайте его совместимым с ними, чтобы он не выделялся.

1. Эффект нулевой цены

Людей гораздо больше интересует то, что бесплатно, чем то, что недорого стоит.

1. Разница между шрифтами Helvetica и Arial

Разница незначительная. Гари Хаствит много сделал для сферы дизайна. В любом случае: Helvetica имеет горизонтальные / вертикальные концевые элементы.

1. Пять альтернатив

Подойдет практически любой гротеск. Последние альтернативы: Inter, Roboto, Acumin, Nimbus, Neue Haas Unica.

1. Как задавать вопросы, чтобы не получить предвзятый ответ

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

1. Протоптанная тропинка

Когда пользователь создает свое собственное решение проблемы, вызванной вашим решением. Если вы встретите такую «тропинку», проанализируйте ее. Подробнее.

1. Как бы это работало, если бы оно было волшебно

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

1. График творца vs график менеджера

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

1. Кто ваш идеальный клиент

Будьте конкретны. Как только вы назовете имена, вы сможете начать медленно продвигать свою карьеру в их направлении. Я, например, хочу работать на Rigetti. А вы?

1. Компромисс между высотой и длиной строки

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

1. Что бы вы не спроектировали, даже за все деньги мира

Рисование линий – это хороший способ не дать себе их пересечь.

---

Перевод статьи learnui.design