Web UX

Типографика

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

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

Узкий текст

Два маленький текста читается быстрее и приятнее, чем один большой. Twitter выиграл в популярности, потому что ограничил длину твита. Игра Disco Elysium точно так же выиграла. Игрок читает огромные тексты маленькими кусочками в узком столбике. См. крутое видео про дизайн интерфейсов в Disco Elysium.

Иероглифы

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

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

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

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

К сожалению, оба способа письма тяжело читать. Стоит придумать новые русские иероглифы, которые будет удобно читать широкому потребителю.

Также см. кириллическую запись чисел. Тьма, вран, легион и тьма тем — идут очень плотно.

В статье “Why Japanese Web Design Is So Different” рассказывается об особенностях восточных сайтов. Часто они выглядят устаревшими лет на 20. Тлдр статьи: “у них другая культура”. Я же думаю, что все дело в типографике. Невозможно успевать за европейскими трендами веб-дизайна, потому что тексты с иероглифами имеют другой размер и требуют особого подхода.

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

Буквы можно плющить как на заставках в аниме Evangelion.

Вдохновение

• fontsinuse.com — Большая коллекция использования шрифтов в разных форматах и из разных времен. Пользователи вносят новые примеры каждый день.
  • @fontsinuseКанал автоматизирован через RTTE — телеграм-канал с новыми примерами.
• Gwern — Блог с сложным дизайном. Мои любимые решения: Сноски сбоку; Буквица (узорные буквы); Ссылки с визуальным указанием сайта.
• Hacker News — Сайт с базовым дизайном, что не мешает ему быть удобным и популярным. Мне нравится обилие фичей и отсутствие анимаций.
• Neocities — Авторские сайты в стиле старого Geocities
• wiby.me — Поисковик по сайтам с эстетикой Web 1.0
• gurafiku.tumblr.com — Архив японских постеров
• Brutalist Websites — Коллекция сайтов в стиле брутализм
• Minimal Gallery

• Галереи веб дизайна: awwwards godly gsap httpster behance. К сожалению, они показывают в основном главную страницу сайтов и их hero section. Их суть как у рекламного постера. Коммерческие сайты делаются по слишком похожим лекалам.

---

CSSWG

Такие CSS примитивы, как box-shadow, border-radius, linear-gradient — простые семантически, потому что их можно добавить одной строчкой. Однако технически они довольно сложные.

Многие из таких стандартов служат слишком узкому стилю дизайна. Например, тень используется исключительно для скевоморфизма. Как же получилось, что это стало стандартом? Только из-за популярности дизайна Apple в 2005-2010. Теперь нам приходится жить с интернетом, стиль которого застрял и предвзят.

Таким образом, тень и скругленные углы часто используют без идеи, и получается плохой дизайн. Я хочу больше видов углов и других ништяков чтобы развеять дух времени. Чтобы сделать просто двойную обводку border, сейчас мне нужно обернуть элемент в еще один div — это издевательство.

Плавность

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

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

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

Скролл

Scrollytelling (от англ. Scroll + Storytelling) — интерактивность при скролле страницы. Сайты этим слишком часто злоупотребляют через Scrolljacking — когда скролл и колесико мыши перестают работать так, как ожидает юзер:

• Меняется скорость скролла (на нелинейную)
• Меняется направление движения (на горизонтальное или на продвижение анимации)

Этот эффект менее неприятен на смартфоне, потому что движение пальца нелинейно по своей природе. А еще в скролле на смартфонах по-дефолту есть инерция (страница летит дальше после отпускания пальца).

Самая частая проблема скроллителлинга — если остановиться посередине двух “кадров”, то страница оказывается в бесполезном состоянии и не доносит информацию. Часто она нерешаемая. Даже презентации Apple ощущаются неправильными.

Apple

Substack

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

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

Substack — это платформа для блогов. Несколькими годами ранее такой популярной платформой был Medium — он точно так же постепенно скатывал уровень UX.

Подобные сайты по своей сути не требуют много денег на поддержку — это всего лишь статичный текст, картинки и емейл рассылки. Так что когда появляются такие решения, ухудшающие UX — то это подписание себе приговора. Платформа хочет навариться на максимальном CTRClick-Through Rate — сколько людей кликнет на рекламу или предложение подписаться, пока она на пике популярности.

BBC

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

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

Лучшее решение: здесь не нужен скроллителлинг. Можно заменить на такой слайдер:

Anime.js

Скроллителлинг на главной странице animejs.com — один из лучших с техническо точки зрения.

Приятность заключается в том, что нет scrolljacking — все функции колеса мыши работают, как надо. Анимация 3D-модели двигателя не привязана и просто подстраивается под новое положение.

Lumafield

На сайте Lumafield есть рубрика scan of the month, посвященная рентгеновским томографиям.

Рассматривание 3D-объектов (в данном случае даже сложнее) — это идеальный кейс для скроллителлинга. Ни одно промежуточное положение на странице не является бесполезным.

Скроллителлинг редко нужен. Но когда он реально нужен, то это эффектно. Хороший пример — 3D-обзор памятника “Тысячелетие России”.

Курсор

Trail Effect

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

На tholman.com/cursor-effects примеры таких и более приятных эффекты типа блесток или пузыриков — они не отстают, а остаются после движения.