Саммари: Мастер-класс Ильи Бирмана «Взгляд новичка» в интерфейсе

В ролике автор раскрывает суть принципа «Каждый экран имеет смысл», который сопровождает примерами хороших и плохих интерфейсов

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

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

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

ilyabirman.ru/meanwhile/all/newcomers-view-masterclass

#awd_edu #awd_ui

Советские пункты управления

Больше фотографий тут: awdee.ru/sovetskie-punkty-upravleniya

#awd_retro #awd_ui via designyoutrust.com/2018/01/vintage-beauty-soviet-control-rooms

Design Spells — пополняемая коллекция впечатляющих интерфейсных решений

В подборку попадают только необычные UI-элементы и приёмы, которые производят вау-эффект. Есть разбивка по разделам: кнопки, страницы 404, динамические острова, анимации, микровзаимодействия и многое другое

designspells.com

#awd_collection #awd_ui

Дизайн пяти виртуальных карт немецкого интернет-банка N26

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

Дизайн разработала Este Studio из Валенсии

Больше картинок: awdee.ru/design-of-five-virtual-cards-of-the-german-internet-bank-n26

#awd_ui via behance.net/gallery/197910285/N26-Virtual-Cards

Коллекция годных примеров интерактивной анимации элементов сайта

На сайте Web Interactions Gallery собраны хорошие примеры реализации переходов между страницами, индикаторов загрузки, появления секций и меню сайта. Сейчас в коллекции порядка 120 примеров, они разбиты на типы и сопровождаются коротким видео

webinteractions.gallery

#awd_web #awd_site #awd_collection #awd_ui

🇬🇧 Плотность интерфейса

Мэтью Стрём написал статью о результатах собственных исследований интерфейсов на предмет плотности

В дизайне необходимо стремиться представлять самые важные данные с наименьшими затратами времени, пространства и пикселей

В статье автор рассказывает о том, что плотность интерфейса включает визуальные и временны́е аспекты

Визуальная плотность определяется количеством информации в пространстве интерфейса: чем её больше — тем плотнее интерфейс

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

При проектировании дизайнеру следует учитывать несколько аспектов:

1. Принципы гештальта, которые описывают то, как люди воспринимают визуальную информацию
2. Целевую аудиторию: опытный трейдер легко разберётся со сложной таблицей котировок, а второклассник — нет
3. Количество места, которое занимают элементы. Если элемент не передает суть данных напрямую или не является данными сам по себе, то его необходимо убрать

Некоторые разделы статьи автор писал на основе информации из книги Эдварда Тафти «Визуальное представление больших объемов информации»

Читайте статью на английском: matthewstrom.com/writing/ui-density

#awd_article #awd_ui

🇬🇧 Новизна vs Привычность в интерфейсах

Свежая статья на сайте Laws of UX о том, когда дизайнеру лучше создавать интерфейс с привычными для пользователя элементами и функциями, а когда — добавить в него элементы новизны

Если люди встречают знакомые паттерны в интерфейсе, они интуитивно понимают, как они работают, и справляются с задачами эффективнее

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

Читайте статью на английском: lawsofux.com/articles/2024/familiar-vs-novel

#awd_article #awd_ui

3 шага к хорошему тексту в интерфейсе

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

Метод состоит из трёх четырёх шагов:
1. Описать функционал. Рассказать, что конкретно мы умеем
2. Понять и описать ценность. Ценность — это то, что измеримо изменит жизнь человека к лучшему с функциональной, социальной или эмоциональной стороны. Нужно описать, что наш функционал поменяет в жизни пользователя
3. Рассказать историю. Описать это человеческим языком, выразив через историю из мира пользователя, в которой наша ценность актуальна
4. Объединить всё это в один ёмкий текст

Юрий подробно разбирает метод на примере текстов для экрана запроса на доступ к геолокации

В конце статьи есть ссылка на шаблон ценности продукта, который поможет начать применять метод на практике

Статья полностью: designpub.ru/81513fb027b9

#awd_article #awd_ui

Dot — пример классного дизайна ИИ-помощника

Это многофункциональный умный помощник, который адаптируется под контекст и нужды пользователя. Вы можете отправить ему фотки, скриншоты, PDF-ки, ссылки, голосовые заметки и другие файлы, а он сам всё отсортирует и «запомнит»

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

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

Пользователи могут давать ему доступ к геолокации, календарю и другой информации, повышая его «осведомлённость» о контексте

И всё это — с приятным и продуманным в мелочах интерфейсом, что нечасто встречается в продуктах с ИИ. Впрочем, приятный дизайн не удивляет, когда узнаёшь, что один из основателей, Джейсон Ян, работал в дизайн-команде Apple

Сейчас можно скачать iOS-приложение: apps.apple.com/us/app/dot-living-history/id6450016041

Позже обещают выкатить веб-версию

#awd_ui #awd_ml #awd_tool

handheld.design — прикольная курируемая галерея с приятными и красивыми концептами мобильного дизайна

#awd_ui #awd_gallery

Дизайн-токены: что это такое, зачем они нужны и какие токены бывают?

Вот наглядный и понятно иллюстрированный материал, который отвечает на эти вопросы: thedesignsystem.guide/what-are-design-tokens

#awd_article #awd_ui

Сложный интерфейс: Рисуем состояния экрана без помощи системного аналитика

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

awdee.ru/bekend-for-designers

#awd_article #awd_ui