понедельничная подборочка от Артура @ama1endu по #trendwatching

Дорогие, сорри, что припозднился. Трэндвотчинг в студию))

1. Обожаю, когда дизайнер черпает вдохновение из внешнего мира и переносит опыт взаимодействия в цифровую среду. Наслаждаемся эстетикой 60-х, перебираем пластинки и слушаем.
https://music.zajno.com/

2. Не смотря на то, что он уже был тут(да-да я слежу за чатиком😅), я не смог пройти мимо портфолио лондонского архитектурного бюро. Минимализм, ломаная сетка, приятные анимации. Конечно же красивые проекты в духе Йозефа Эйхлера.
https://prb-a.com/

3. Платформа для разработки и внедрения программного обеспечения для промышленных роботов. Классные трехмерные анимации, говорящие просто о сложном. Как вы относитесь к разрядке строчных букв?🤪
https://rtr.ai/

4. Голливудское агентство, помогающее людям с профориентацией и поиском себя. Лендинг яркий, с приятными цветами и анимацией. Чувствуется теплота и забота. Надпись на главном экране гласит «Оставь свой след в этом мире» и на месте курсора появляются отметки.
https://platform-seven.com/

Всё о interactive components в Figma

Подборочка интересных статей от Ветрова #research #ux

Usethics: юзабилити-тестирование через клик-тесты скриншотов интерфейса.

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

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

простые и чёткие формулировки вопросов при проведении опросов.

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

почему респонденты забывают причины, детали и последовательность событий, о которых рассказывают

ля-я-я, вы щас умрете, смотрите, что есть: https://designtools.club/ — сборник инструментов дизайна и не только в одном месте. но пользоваться, конечно, этим не будем) #ux #tools

отличная подборочка от Наташи @Natalia_Katerova
#trendwatching отдельный лайк за финальную историю про пасхалку)

Всем привет!
Врываюсь к вам со своей подборкой. Я не дизайнер, поэтому смотрю под своим углом и с разных сторон. Надеюсь, что что-то интересное и то, что ещё не видели будет в списке)

1. https://www.callbruno.com/en/culture - здесь сильно нравится история с горизонтальным скролом. Я часто встречаю сейчас это в трендах. Мне кажется, что такой прием хорошо ложится на модную историю сторителинга. Хочется попробовать данный прием где-то реализовать. По идее планируем его на одном из разделов для сайта агентства SETTERS.

2. https://leonard.agency/en/contact - нравятся цвета, типографика и графика, приятный сайт.

3. https://www.fixnothing.com/ - нравится история с тем как показали персонажей и элементы некой геймификации, вовлекает пользователя.

4. https://vedro2-0.tilda.ws/ - после этого копирайтинга я захотела купить себе ведро. Мы только сейчас начинаем встраивать UX-копирайтинг в отделе WEB SE и вообще больше обращать внимание на тексты. Поэтому не могла пройти мимо.

5. https://polka.academy/ - нравится прием с полкой книг: удобный и приятный для пролистывания. На мой взгляд залипательный, но при этом функциональный блок получился у ребят. Очень нравится типографика, выдержана в стилистике направления.

6. https://universalfavourite.com.au/ - этот сайт нашла не я, его нам закидывал Дима Швец, но мне очень понравился и запомнился. Разные графичные ховеры запали в душу.
Интересная идея с навигацией вверху, супер просто и очень понятно. Вот наши работы, а вот о нашей студии. Очень нравится форма для связи с контактами в левом нижнем углу, такая дружественная и логичная.

А щас небольшой прикол прошлой недели из WEB SE)
В последнем кейсе один из ховеров - это глазик. И тут я вспомнила интересный инсайт из нашей веб-аналитики с отделом маркетинга.

В метрике на одном из наших лендосов мы обнаружили, что люди протерли до дыр один из графических элементов дизайна - это стикер с глазом!
Вот этот лендос, стикер глаза на первом экране в правом нижнем углу: https://setters.education/courses/vizualiziruj-i-prezentuj
Мы решили, если делать дальше такой стикер, то спрятать за ним пасхалки) людей влекут глаза)

Всем хорошего дня)

прямо из сапсана и в #trendwatching. сегодня подборочка от @MariaSh_95 Маши:

Итак, здрасте, мой первый трендвотчинг. Надеюсь, я не буду повторяться 😬

1. https://nissan-evolution.ru/ – очень круто показано развитие головных устройств в Nissan. Весь лендинг – один большой тайм-лайн с нескучными заголовками и приятной цветовой палитрой в ретро стиле.

2. https://10ideesrecuesenuxdesign.castoretpollux.com/en/ – прикольный квиз про 10 заблуждений о UX. Яркий, интерактивный с классной анимацией. Хоть вопросы и не сложные, все равно можно заодно свои знания чекнуть и интересные факты узнать 😌

3. https://gmeadow.com/ – я не особо поняла, о чем сайт, но мне нравится поэкранный скролл, типографика и разный цвет бэкграунда каждого экрана.

4. https://designresourc.es/ – недавно кто-то уже присылал сборник инструментов дизайна, но все равно поделюсь вот этим ресурсом с большой подборкой разных полезностей для дизайнеров. Плюс сам сайт очень приятный.

Всем хорошего дня ✌🏼

а вот и пятничный #trendwatching от нашей Ани :) пятничный в субботу. классика. но качественная


Всем доброе пятничное утро! #trendwatching
(P.S. Заранее извиняюсь за кол-во ссылок!🙏😬)

Сегодня предлагаю восхититься эстетикой типографики.

https://stelvio.k95.it/ — огромное количество эффектиков по скроллу, очень классно подходит для всяких лонгридов.

http://www.gt-flexa.com/ — понравилось, как в середине сайта шрифт с определенной анимацией отражает слово, которе им написано.

https://typefaces.temporarystate.net/preview/
https://velvetyne.fr/
— сайты шрифтовых агентств, где и сами сайты залипательные, и шрифты крутые

https://www.typewolf.com/ — сайт, который собирает в коллекцию сайты с кул типографикой и рассказывает, что за шрифты были использованы

И напоследок, не совсем про шрифты, а точнее совсем не про них, но если вдруг вам понадобится прикупить человеческих костей, вы можете это сделать. Например, череп карлика стоит почти 600к! https://www.jonsbones.com/ ☠️

Передаю эстафету Ксю @trvrc

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

​​❗ осторожно, длиннопост

Опять про доступность
Если бы мы перестали упорно игнорировать Accessibility, то люди с нарушениями жили бы чуть полнее + человек с временными ограничениями (занятые руки, невозможность слушать из-за шума, восстановление после травм) тоже был бы счастливее.
Доступность – это не только про контрастность цветов. Дизайнер, твоя хата не с краю.

Как сделать доступно? Есть гайд WCAG (версия на русском). Гайду есть 3 уровня соответствия:
🌚A – основной. Если этот уровень не достигнут, сервис доступен только для избранных.
🌝АА – идеальный. Сервис доступен для большинства людей и ассистивных технологий (скрин ридеры, альтернативные устройства ввода и пр). Необходим государственным и всем уважающим себя сервисам.
🌞ААА – специализированный. Необходим сервисам со специфичными юзерами.

Есть три важных области доступности:
1. доступ для навигации с клавиатуры. Вы можете легко провести тестирование навигации с клавиатуры (стрелки, Tab, пробел) и заметить проблемы.
2. доступ для ассистивных технологий. Используются встроенные в ОС приложения (например, Windows Narator , Mac VoiceOver или Android TalkBack), расширения для браузеров (например, Read Aloud) или сторонние приложения (например, JAWS). Вы можете установить подобный софт и потестировать интерфейс.
3. доступ для разных экранов. Суживать интерфейс в зависимости от ширины экрана – хорошо, но недостаточно. Интерфейс должен приспосабливаться не только под маленькие, но и под большие разрешения. Многие пользователи используют лупу или увеличивают интерфейс до 200%. Вы тоже можете это сделать и посмотреть, насколько доступен UI для тех, кто плохо видит мелкие элементы и вынужден все увеличивать.

Что может сделать дизайнер, чтобы повысить Accessibility интерфейса уже сейчас?
👍подобрать контрастные цвета. Проверять можно при помощи вот этих плагинов для Sketch/Figma
👍подобрать цвета, которые различимы для людей с нарушениями восприятия цвета (существует около 9 видов). Например, для человека с тританомалией красный алерт и зеленое уведомление будут выглядеть одинаково коричнево. Помогает плагин Color Blind
👍не использовать шрифт менее 12px (9pt). Лучше 16px (12pt)
👍продумать, как будут увеличиваться тексты при увеличении размера экрана до 200% (в CSS можно задать размер текста относительно размера экрана в EM/REM/%, ваша задача - проговорить это с разработкой)
👍продумать состояние "по наведению" и "активное" для интерактивных элементов. Это важно не только для обратной связи с обычными пользователями, но и для навигации с клавиатуры. Активное состояние должно быть заметно, в идеале это контрастная обводка (а не эти вот "заливка темнее на 0.000001" ).
👍продумать адаптив. Основные ширины экрана, которые вы можете покрыть дизайном (по статистике на 2021 год): 1920 + увеличение до 200% → 768 → 360
👍написать понятные заголовки. Незрячий человек должен понять, о чем страница, прослушав ее заголовок.
👍не пропускать уровни заголовков на страницах, чтобы обеспечить работу скринридера и удобную навигацию с клавиатуры. То есть, нельзя после заголовка первого уровня <h1> ставить заголовок третьего уровня <h3>. И нельзя всячески рандомно их перемешивать.
👍обеспечить понятную навигацию: не прятать ее в бургеры-хуюргеры, не делать вложенностей, поведения по ховеру, показывать хлебные крошки на внутренних страницах.
👍предоставить разработке альтернативные тексты для картинок, видео, аудио, иконок. Они будут воспроизводиться в интерфейсе для незрячих.
👍провести тестирования разработанного интерфейса на доступность при помощи сервисов автоматической проверки, пробовать взаимодействовать через сервисы чтения экрана, пробовать перемещаться клавиатурой, голосовым управлением.
👍пригласить на тестирование пользователей с ограничениями или экспертов по доступности для профессиональной проверки

Небольшой подборыч чтива:

3 шага на пути к сторителлингу: на что обратить внимание и стать королями драмы

Онбординг в приложении как инструмент retention

Оптические иллюзии в дизайне интерфейсов

#uxhorn #pleasure