Июнь '21

Блог дизайн-команды британской сети магазинов Sainsbury’s.

Интервью с Will Littlejohn, главой звукового дизайна в Facebook. Как и над какими проектами они работают.

Sara Elsharawy рассказывает о программе IBM по обучению молодых дизайнеров. В статье подробно описан один из потоков курса.

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

Толковые советы Mark Boulton по оформлению портфолио дизайнера интерфейсов. Что и как представлять в зависимости от роли и уровня.

Samsung презентовали обновлённую ОС для своих умных часов — One UI Watch на базе Google WearOS. Они отказались от своего Tizen.

Как сделать абстрактную генеративную сетку в духе проекта Pentagram для Graphcore.

NVIDIA выпустили бета-версию своего инструмента, который превращает набросок в фотографию природного ландшафта. Пару лет назад они показывали сам концепт, который выглядел крышесносно.

Айдентика сервиса документооборота Oneflow от британского агентства MultiAdaptor.

Айдентика CRM-сервиса Reveal от британского агентства Ragged Edge.

Ребрендинг сервиса видео-конференций Webex от неизвестных авторов.

Ребрендинг музыкального сервиса Beatport от шведского агентства Kruppa Hosk.

Milan Maheshwari рассказывает об экспериментах сервиса доставки еды Swiggy по повышению чаевых для курьеров.

Paisley Laurenzio из Shopify рассказывает, как дизайнеры вовлекают коллег из других профессий в работу над задачами. Она описывает формат парных и групповых сессий.

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

Юля Позднякова из Контура рассказывает о внутренней награде по дизайну в Контуре. Как она помогает сплотить проф.сообщество.

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

Matt Chamberlain, Anna Peraino и John Campbell из Airbnb описывают архетипы креативных лидеров, которые сложились в компании. Они показывают, что это не обязательно управление людьми — можно быть просто хорошим экспертом в своей области.

Rolf Molich описывает свою модель зрелости дизайна на примере выдуманной компании и её пути взросления. Во второй части он показывает пошаговый путь формулирования и внедрения дизайн-стратегии.

Kara Pernice, Sarah Gibbons, Kate Moran и Kathryn Whitenton рассказывают об обновлённой модели зрелости дизайна Nielsen/Norman Group. Они сократили её с 8 до 6 этапов. К статье прилагается опросник для оценки своей компании.

• Сетка из шестиугольников на чистом CSS.

• Анимированный индикатор загрузки из расходящихся кругов.

• Max Böck разбирается, где теперь нужно использовать media queries в грядущую эпоху container queries.

• Geoff Graham собрал толковые обзоры container queries, которые массово появились в последнее время.

Прошло больше 10 лет с момента появления концепции адаптивного дизайна. Una Kravets предлагает расширить его и включать все возможные способы подстройки под конкретного пользователя, включая тёмную тему или настройки минимальной анимации.

Cara Maritz из Atlassian рассказывает, как они использовали Confluence для проведения дневникового исследования. Это сработало, поскольку у клиентов уже был доступ к нему.

Crystine Gray из Facebook описывает, как лучше рассказать о разведочных пользовательских исследованиях, где не всегда понятна их сиюминутная применимость.

Анастасия Жичкина и Константин Ефимов анализирует популярную книгу Роба Фитцпатрика «Спроси маму», помогающую проводить глубинные интервью. Что в ней работает, а к чему отнестись критически.

Raluca Budiu из Nielsen/Norman Group простым языком объясняет, что такое доверительный интервал, предельная ошибка выборки и доверительная вероятность в статистике. Без этого невозможно правильно интерпретировать результаты исследований.

Kate Moran из Nielsen/Norman Group напоминает, что нельзя делать количественные выводы для качественных исследований с небольшой выборкой респондентов.

Jeff Sauro и Jim Lewis описывают структуру вопроса в опроснике. Как грамотно сформулировать каждую часть.

Свежая карта инструментов для пользовательских исследований от User Interviews. Они также добавили вариант в таблице, где проще посмотреть список.

Коллекция анимированных иконок и иллюстраций в SVG.

Большая коллекция бесплатных иконок на тему здоровья.

Подборка сервисов для проверки accessibility от Nic Chan.

Общие улучшения и оптимизация интерфейса.

Инструмент для обсуждения дизайн-макетов. Можно комментировать их, нарезать на куски и перестроить. Пара слов от автора.

Импорт компонентов в коде в инструмент дизайна. Он интегрирован со Storybook и популярными фреймворками вроде Material Design. Как это работает.

• Karen Liu: Проблемы Sketch, из-за которых команда перешла на Figma.

• Каталог открытых дизайн-систем от известных компаний.
  

• Асинхронный дизайн-спринт.
  

Выпустили 30 небольших обновлений и улучшений интерфейса. И получили ещё $200 млн инвестиций. Компания теперь оценивается в $10 млрд.

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

Dan Ramsden описывает модель поиска наиболее оптимальных следующих действий, который используется в BBC. Она, в свою очередь, базируется на их модели поиска информации.

Про режим ограниченной анимации для пользователей с ограниченными возможностями написали аж в Wall Street Journal.

Camilla Bay Brix Nielsen, Jaap Daalhuizen и Philip Cash предлагают фреймворк Behavioural Design Space для изменения поведения пользователей. Они проанализировали многие известные теории и концепции на тему и предложили самый цельный подход.

Интереснейший разбор предыстории ключевых элементов интерфейса Windows. В какой версии они впервые поменялись и как обновлялись дальше.

24 июня Microsoft показали Windows 11. Это крупный редизайн, который работает на принципах дизайн-системы Fluent UI. Долгое время её можно было встретить скорее в их легендарных эффектных видео-презентациях, но не реальных интерфейсах. Зимой этот разрыв пропадёт.

Поскольку вы вряд ли делаете приложения для Windows, традиционный разбор по деталям вряд ли имеет смысл. Нет, доля операционки в мире огромная (в районе 75% по разным данным). Но модель универсальных приложений радикально менее востребована, чем у Android и iOS. А гайдлайны важно знать в первую очередь для них. Но из общеобразовательного интереса это полезно.

Дизайнеры Microsoft рассказали об идеологии и изменениях:

Из заметных визуальных обновлений:

Полупрозрачность у окон (материал «акрил» из Fluent Design):

Заметные скругления у элементов:

Мягкие тени:

Новые цветные пиктограммы вместо минималистичных:

Переосмысленная тёмная тема (изначально она появилась в Metro Design ещё в 2010 году, раньше всех на рынке):

Вариативный шрифт Segoe UI:

Сравнение конкретных решений с Windows 10.

Куски всего этого можно было увидеть и раньше в экспериментальной Windows X для устройств с двумя экранами, переосмысленных иконках приложений и других регулярных тизерах Microsoft Design. А лента виджетов и вовсе приехала в основную Windows 10 в новом виде месяц-два назад.

Само собой, перепроектированы ключевые экраны и приложения.

Панель задач и меню пуск:

Поиск:

Проводник (он отказывается от меню Ribbon UI, хотя в MS Office этот интерфейс останется):

Настройки:

Магазин приложений:

Неплохой обзор со скриншотами.

В Windows можно будет запускать приложения для Android (через магазин Amazon AppStore). Интересно будет посмотреть на востребованность.

Этим обновлением Microsoft прощается с Metro Design, который всё ещё является основой Windows 10. Идеология была революцией на рынке — в эпоху убогой скеоморфичной цыганщины ребята показали, как должен выглядеть современный цифровой дизайн. К сожалению, историю часто перевирают, так что поверхностное мнение приписывает «плоский дизайн» Apple, которые пришли на эту вечеринку последними.

В долгорочном использовании Metro Design оказался сильно ограничивающим (хотя экосистема приложений на нём не взлетела не поэтому). Но его роль в истории дизайна интерфейсов — наоборот, сильно поменяла отрасль. Посмотрим, что получится у Fluent Design. Как минимум видео-презентации новых приложений каждая вторая компания делает по канону Microsoft.

Команда сервиса Potential предлагает следующий шаг в сохранении баланса между проведённым временем с телефоном и чем-то реально важным. Это идеи для iOS 15 и следующих версий, которые снижают зависимость от соц.сетей и других плохих привычек.

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

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

Ноутбуком и планшетом можно будет управлять с одной клавиатуры и мыши, устройства автоматически связываются друг с другом через Universal Control. Например, можно перетащить картинку с планшета на компьютер.

При подключении клавиатуры приложение показывает горячие клавиши.

Виджеты добрались и до планшета. Как и автокаталог приложений.

Песочница для создания приложений на Swift.

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

Переработанная панель навигации в Safari — это плавающая панель с адресом сайта и списком вкладок вместо стандартного tab bar. В браузере также появились расширения.

Анализ изменений в Safari. Сильно освежается дизайн стандартных полей форм, при переносе адресной панели вниз экрана образуется дырка под «чёлкой», а сама панель может перекрывать элементы навигации внизу сайта.

В уведомлениях показывается фото контакта, а не просто иконка приложения. Они также собираются в мини-дайджест (например, утром).

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

В фотографиях распознаётся текст — его можно скопировать, а по телефону в объявлениях на улице — позвонить. Всё это также можно перевести на другой язык (пока у них ограниченный набор). Камера распознаёт и суть объектов — например, даст справку о достопримечательности или картине.

В приложении «Здоровье» появился необычный список контактов с интересным представлением аватаров (градиентный фон под ними).

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

Новый вид карт, включая навигацию в 3D и дополненной реальности.

Развёрнутые детальные результаты поиска.

Редизайн приложения «Погода». Добавили декоративные карточки.

В AppStore теперь можно задавать разные иконки приложения, скриншоты, видео и описание для разных сегментов пользователей. Можно также проводить A/B-тесты для поиска лучших вариантов.

В гайдлайнах появился раздел об инклюзивных текстах в интерфейсах.

Можно использовать годный шаблон для Figma от Joey Banks.

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

Дизайн-система строительной компании ПИК-Проект (есть компоненты в коде и шаблоны в Figma). Ссылки на неё нет, но есть описание в портфолио агентства Landau.

Дизайн-система сервиса Semrush. Компоненты в коде показаны скриншотами со ссылкой на исходник на GitHub, есть библиотеки в Figma и общие принципы построения интерфейсов.

Alex Krzyminski из Baymard анализирует ситуацию с поддержкой accessibility в крупных интернет-магазинах. В целом ситуация печальная.

Peter Ramsey разбирает интерфейс YouTube Shorts, клона TikTok. Клон получился плохим.

Kathryn Totz из Baymard описывает основные выводы из исследования сайтов-магазинов маленьких брендов. Что ожидают пользователи от них.

Xindeling Pan из IBM показывает, как сделать бота более человечным и лучше отрабатывать тупиковые ситуации.

Sally Collins из Baymard рассказывает о лучших вариантах расположения кнопки поиска в интернет-магазинах.

Peter Ramsey проанализировал интерфейс взаимодействия с поисковыми маячками Apple AirTags.

Сайт Growth.Design разбирает процесс встречи нового пользователя в защищённом браузере Brave.

Небольшой обзор комбинации командной строки и подсказок в современных интерфейсах от Philip C Davis. Они дают возможность как быстро набрать команду, так и выбрать вариант из списка.

Markswebb изучили чат-ботов в банках и других популярных отечественных приложениях. Обзор с описанием ключевых проблем.

Markswebb предлагают свою классификацию проблем в интерфейсах. Они приводят примеры для каждой из них.

Elise Livingston показывает, как описывать поведение интерфейса для учёта требований accessibility. Получается наглядная спецификация для разработчиков.

Крутейший разбор подходов к обучению пользователя основным механикам в играх от Bramha Dalvi. Он разбирает разные подходы на реальных примерах.