SimbirSoft Design | Web & UX/UI – Telegram
SimbirSoft Design | Web & UX/UI
99 subscribers
150 photos
18 links
Канал команды UX/UI-дизайнеров SimbirSoft.

Говорим здесь о проектировании интерфейсов, юзабилити, исследованиях и аудитах, дизайн-системах
Download Telegram
4 книги о том, как дизайн влияет на окружающий мир👆
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍1
Модальное окно — элемент, который расположен поверх содержимого страницы и блокирует работу пользователям до тех пор, пока не будет выполнено необходимое действие или оно не будет закрыто.


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

Самые распространенные ошибки в применении модальных окон:
🛠Размещать перед загрузкой содержимого страницы
🛠 Отображать сразу после авторизации пользователя
🛠 Запрашивать данные, например, электронную почту, еще до того, как пользователь начал взаимодействовать с сайтом
🛠Запрашивать обратную связь до того, как пользователь завершил действие
🛠Отображать несколько модальных окон, которые наслаиваются друг на друга
🛠 Показывать окно перед переходом пользователя на другой сайт
🛠 Отображать сообщение перехода с сайта на мобильное приложение
🛠 Размещать обширный объем информации, который не помещается в 2 скрола

Прежде чем применять модальные окна, подумайте об альтернативных решениях. Чтобы сообщить пользователю об ошибке, ожидании, успешном действии, можно использовать компоненты Tooltips или Lightbox, а для больших форм подойдет Sidepage или Drawer.

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

Источники:
— Nielsen Norman Group. «Popup Problems»
— Контур.Гайды. «Модальные окна»
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
Подготовили карточки с несколькими правилами и примерами, которые помогут вам улучшить навыки работы с типографикой👆

Еще несколькими лайфхаками делились в этом посте😎
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥5👍1
В 1956 году психолог Джордж Миллер в статье описал, что человек способен одновременно запоминать и хранить в кратковременной памяти до 7 (± 2) единиц информации. Он предложил для эффективного запоминания разделять её на небольшие фрагменты, которые можно организовать по неким критериям. Такая фрагментация получила название чанкинг (англ. chunking — разбиение, измельчение) — разбиение большого объема информации на мелкие легко запоминаемые блоки.

На практике это правило 7 (± 2) часто используется неверно.
Сам Миллер говорил, что: «существует предельное количество элементов, которые человек может мгновенно запомнить и повторить. Это не имеет никакого отношения к способности воспринимать печатный текст».

Смысл принципа – в разбивке информации на фрагменты для лучшего восприятия.

Например, ориентироваться в каталоге интернет-магазина для пользователя будет проще, если все разделы будут доступны взгляду. Ему не нужно хранить все в кратковременной памяти, а ограничение разделов по принципу 7(± 2), только усложнит пользовательский опыт. Главная задача интерфейса – понятность, поэтому включайте все необходимые разделы и убирайте лишнее.

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

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

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

Главные выводы:
🔹Не привязывайтесь к числу 7 для ненужных ограничений в дизайне.
🔹Разбивайте и группируйте массивы контента на более мелкие части, чтобы пользователям было легче обрабатывать, понимать и запоминать информацию.
🔹 Давайте пользователю выбор, но не слишком много вариантов, за исключением навигации.

Источники:
— Джордж Миллер, «Магическое число семь плюс-минус два», 1956
— Siddharth Gulati. The Principle of Chunking: What Airbnb taught me about good design
— Better UX: Chunking
— Myth #23: Choices should always be limited to 7+/-2
— Магические 7 плюс-минус 2 ошибки UX Дизайнера
— The average person can only keep 7 (plus or minus 2) items in their working memory
👍41🔥1
Диаграмма Гутенберга

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

Диаграмма Гутенберга — один из наиболее распространенных паттернов. Она показывает, как люди просматривают информацию на сайте. Условно диаграмма разделяет страницу на 4 равные части.


👉🏻1. Зона приоритетного просмотра – левая верхняя часть экрана. Подходит для важных элементов интерфейса: логотип, заголовок, лид-абзац.

👉🏻2. Хорошо исследуемая зона – правая верхняя часть. Здесь можно разместить дополнительную информацию: контакты, форму регистрации, поисковую строку.

👉🏻3. Наименее исследуемая зона – левая нижняя часть экрана. Подходит для менее важного контента.

👉🏻4. Зона выхода – правая нижняя часть. Здесь уместно размещать элементы, направленные на совершение целевых действий.

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

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

Источники:
— Edmund Arnold
— Создание эффективных веб-страниц
— Проектирование экранов сайта по диаграмме Гутенберга
— Gutenberg Diagram — Why you should know it and use it
— 3 Design Layouts: Gutenberg Diagram, Z-Pattern, And F-Pattern
👍3
🐾Закон Хика

В 1952 году британский психолог Уильям Хик провел эксперимент, в котором перед участниками стояла задача быстро нажимать на кнопки, соответствующие загорающимся лампочкам. Их количество менялось от 2 до 10. В результате психолог выявил закономерность: чем больше лампочек включалось, тем больше времени требовалось участникам для нажатия.
Другими словами закон Хика звучит так: чем больше вариантов выбора, тем медленнее принимается решение.


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

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

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

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

Источники:
— On the rate of gain of information
— Hick’s Law: Making the choice easier for users
— Как использовать Закон Хика в дизайне интерфейсов
— UX-дизайн: Закон Хика — как ускорить принятие решений пользователями
— Что такое закон Хика и почему из «всего» мы выбираем «ничего»
— Закон Хика: просто о сложном, или как сделать правильный выбор?
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥3👌1
В 1954 году американский психолог Пол Фиттс (Paul Morris Fitts), работавший в университете штата Огайо, провел эксперимент, описывающий движение человека при достижении цели в двумерном пространстве.

Что получилось, как это в итоге называется и что дало UX-дизайну — читай в лонгриде
👍2🔥2
Привет, коллеги-дизайнеры🐾

Когда дело доходит до создания оптимизированного интерфейса, брейкпойнты – это главное. Эти “плохиши” создают или ломают дизайн. Далее кратко расскажем, как пользоваться ими в режиме бога.

Базовые моменты в работе с брейкпойнтами:
⚡️Важно назначить их на часто используемых устройствах, чтобы интерфейс оправдал ожидания пользователей.
⚡️Чтобы дизайн корректно отображался на всех устройствах и браузерах, протестируйте макеты на различных разрешениях экрана.
⚡️ Брейкпойнты используются для настройки стиля, макета или контента, чтобы дизайн был одновременно функциональным и визуально привлекательным.

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

Оптимальные параметры расстановки брейкпонтов:
— Смартфоны: 375-414 пикселей
— Планшеты: 768-1024 пикселей
— Настольные компьютеры: свыше 1200 пикселей

Вот и все, коллеги. Брейкпойнты – важная часть UX-дизайна, и правильное их использование выведет дизайн на новый уровень.

Теперь время создавать адаптивные макеты, как боги дизайна😎
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4🔥2
▶️Чем заменить Notion?

9 сентября 2024 года Notion ушел из России. Если рабочее пространство (workspace) хотя бы раз оплачивалось российской банковской картой, его отключат. Если аккаунт ни разу не оплачивался российской банковской картой, можно включить VPN и всё будет работать, как обычно.

Мы подготовили несколько альтернатив Notion.
*знаком 🇷🇺 пометили российские платформы.

🟡WEEEK. Похожий функционал с Notion. Можно ставить дедлайны команде, работать над проектами, делать заметки и планировать дела.(🇷🇺)

🟡Strive. Сервис для командной работы с проектами и регламентами
Можно создавать проекты и канбан-доски, ставить задачи, вести документацию. Подойдет как для одиночной работы, так и для команд. (🇷🇺)

🟡YoNote. Можно создавать документы и канбан-доски, организовывать базу знаний и делать заметки. Есть интеграции с Figma, Google Docs, Miro, GitHub и Telegram.(🇷🇺)

🟡Obsidian. Пожалуй, самая популярная замена Notion. Можно делать конспекты лекций, отслеживать дедлайны и делать рефераты книг и статей.

🟡Affine.pro. Смесь Miro и Notion с кастомизацией заметок, шерингом доступа и возможностью использования нейросетей.

🟡Boost Note. Инструмент для совместной разработки и ведения документации.

Ставь «❤️», если пост был полезен для вас! И пишите в комментарии - каким сервисом вы заменили Notion?
Please open Telegram to view this post
VIEW IN TELEGRAM
8👍5👏2