Всё о 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

#trendwatching
Сережа не чувствует запахов, но пока еще видит. Вот он и подготовил сегодняшнюю рубрику, погнали:

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

1. https://www.defeatboco.com/ моё любимое! иллюстрироанный сайт с привязкой к скроллу пользователя. Сам сайт рассказывает про процесс разработки веб-продукта и подает это все в формате «приключение на 10 минут». Но мы то с вами знаем, насколько оно может затянуться…) Есть вопросики к шрифтовым решениям, акцентам и элементам интерфейса, но сторителинг вкупе с иллюстрациями - затягивает.

2. https://typographyprinciples.obys.agency/ кто-то наверняка уже видел его (да, Ксю?)). нельзя пройти мимо этого стильнейшего сайта про принципы типографики от студии Obys. Ничего непонятно, но очень интересно. На самом деле, если детально вчитываться, то максимально четкая и простая выжимка по основам грамотной типографики)

3. https://qodeinteractive.com/catalog/ простейший и кайфовый за счет плавных микроанимаций сайт студии дизайна. Переходы в кейсы и подача контента внутри, само меню, переход из одного кейса в другой… благостно максимально))