Chulakov Design

Заметки про аналитику, проектирование и дизайн систем. Без воды, копипаста и ссылок на трендовые новости.

Chulakov Design
Дизайн
Подписаться
Анонсы Config 2020

Итак, недавно состоялась вторая титульная конференция #Config, где Figma анонсировала интересные апдейты. Вся наша команда дизайна их очень ждет. И вот некоторые из них:

Уже вышло

Новое меню замены компонентов. Можно забыть о черных огромных списках. Теперь все можно найти с помощью поиска и даже сделать замену, просто перетащив нужный компонент из меню Assets.Панель «Code» стала называться «Inspector». Разработчики теперь могут копировать отдельные свойства. Обязательно устройте небольшой митап и покажите коллегам этот принцип работы.

Выйдет в ноябре

Variants. Теперь разные варианты одного и того же компонента можно будет превратить в один компонент, а сами варианты
- выбирать в правой панели.Обновление Auto Layout. Элементы теперь могут заполнять свои контейнеры в обоих направлениях, также получится выставлять разные расстояния с разных краев. Еще больше обновлений показано в видеоролике. Ссылка на него прикреплена ниже 👇

Выйдет в январе 2021

Интерактивные компоненты. Просто пролинкуйте взаимодействие в компоненте один раз, чтобы оно работало на прототипах, куда бы вы его ни добавили. Удачно комбинируется с Variants.

Chulakov Design
Дизайн
Подписаться
Muze — новый подход к чату И снова речь идет о переосмыслении привычного паттерна.

Muze
- новый подход к чату

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

Мы считаем, что это довольно интересный паттерн. Он выглядит вполне жизнеспособно, но не как конкурент мессенджеров, а, скорее, как дополнение к ним.

Вывод: если вы хотите изобрести какое-то новое взаимодействие, то сначала понаблюдайте в обычной жизни, как люди контактируют с объектами, а затем попробуйте перенести это в свой интерфейс.

Ставь 🔥, если считаешь такое взаимодействие удобным. Ставь 👎, если тебе это кажется непрактичным.

Chulakov Design
Дизайн
Подписаться
Какие планы на сегодня?

У нас, например, присоединиться ко второй титульной конференции Figma. Проводится онлайн, участие бесплатное. Послушать доклады и задать свои вопросы можно с 14:00 до 19:00 по московскому времени.

Chulakov Design
Дизайн
Подписаться
Разместили красивые фото с товаром — добавьте ссылки

Разместили красивые фото с товаром
- добавьте ссылки

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

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

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

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

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

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

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

Ставьте 🔥, если уже применяете такой подход на практике.

Chulakov Design
Дизайн
Подписаться
На днях Google выпустил долгожданное крупное обновление ОС Android

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

Баблы

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

Управление внешними устройствами

Новая функция Quick Access Device Controls позволяет пользователю быстро просматривать и управлять устройствами умного дома. Управление происходит из меню питания Android, а элементы управления представлены в виде небольших виджетов. Доступно 5 вариантов виджетов: переключатель, переключатель с ползунком, ползунок без переключателя, кнопка без состояний и информационная карточка.

Элементы управления медиаконтентом

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

Улучшенная поддержка гибких экранов

В Android появилась возможность определять угол поворота складной части экрана. Это поможет нам создавать улучшенные анимации взаимодействия с гибким экраном.

Chulakov Design
Дизайн
Подписаться
Интересный способ навигацииКак насчет магии?

​​Интересный способ навигации

Как насчет магии?✨ Magic UX
- это новый способ навигации для мобильных устройств. Его создатели отметили, что переключение между различными запущенными приложениями отвлекает пользователя и увеличивает когнитивную нагрузку на него.

Они также обратили внимание, что зачастую люди в определенном порядке раскладывают предметы на своем рабочем столе: ручки, блокноты, какие-либо распечатки, документы и тому подобное. Благодаря этому у них получается переключаться между задачами, просто перемещая взгляд и двигая руками.

Этот принцип вошел в основу Magic UX: каждое приложение виртуально прикрепляется к физическому пространству. Как это работает на деле
- смотрите в видеоролике.

Какие впечатления остались у нас:
- хорошая попытка перенести офлайн-опыт в digital;

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

- использование смартфонов не ограничивается работой за столом. Как, например, с такой навигацией ехать в забитом автобусе или вагоне метро?

Ставь 🔥, если понравился Magic UX. Ставь 👎, если считаешь, что он не совсем практичен.

Chulakov Design
Дизайн
Подписаться
Чек-лист для проверки UX мобильных веб-сайтов

Навигация
- Навигация интуитивна, проста и логична.
- Всегда понятно, на какой странице вы находитесь.
- Зоны нажатия удобны для касания пальцем.
- Можно быстро вернуться на главную страницу.
- Четкий и последовательный способ вернуться на каждый экран.
- Легкий доступ и выполнение ключевых задач.
- Меню не перегружено.
- Кнопка меню четко выделяется.
- Кнопки и иконки ясны и лаконичны.
- Кнопки призыва к действию (CTA) имеют высокую контрастность.
- Поиск хорошо виден.
- Гиперссылки не открывают главные страницы в новой вкладке.

Верстка
- Приоритетно используется верстка в одну колонку.
- Ритм присутствует (даже с учетом одной колонки страница не должна выглядеть скучно).

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

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

Chulakov Design
Дизайн
Подписаться
Android-планшеты обзавелись детским режимом

На днях мы писали про интерфейсы для тех, кто не любит или не умеет читать. А сейчас Google представил новый детский режим Kids Space на планшетах на базе Android.

Если взглянуть на новый интерфейс, то можно заметить отличительные черты хорошего UI для детей.

Крупные элементы взаимодействияМелкая моторика у детей достаточно развита к 5–6 годам.

Минимальное количество текста, преобладание визуальных образовДети учатся сканировать текст на уровне взрослых к 12–13 годам. Поэтому важно не перегружать интерфейс витиеватыми фразами.

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

Лендинг

Chulakov Design
Дизайн
Подписаться

Приложение для контроля за уровнем глюкозы у больных диабетом Undermyfork привлекло $400 тысяч инвестиций

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

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


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


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


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


4. Мобильные медицинские приложения должны как упрощать жизнь пациентам, так и облегчать работу врачам.

Chulakov Design
Дизайн
Подписаться
Интерфейсы для нечитающих людей

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

Целевая аудитория:


- Ученики начальных классов (просто не научились еще читать).
- Незнакомая языковая среда.
- Люди, у которых нет возможности читать (например, во время поездки на авто по навигатору).

Чек-лист для оформления текста:


- Одно предложение выражает одну идею.

- Текст написан на одном языке с целевой аудиторией.
- Текст больше трех строк выравнивается по левому краю.
- Анимация и дополнительные визуальные эффекты отсутствуют.
- Контрастность соответствует гайдлайнам:
- для наборного текста
- больше или равна АА (4,5:1);

- для заголовков
- больше или равна АА (3:1);

- для графики
- больше или равна АА (3:1).
- Размер основного шрифта
- от 16–20 px.

Чек-лист, чтобы люди хотели читать:


- Контент разбит на несколько частей.
- Пользователь понимает объемы текста (например, можно добавить количество времени на чтение или количество страниц).
- Текст дополнен визуальными образами.

Чек-лист к интерфейсу:


- Иконки понятны.
- Кнопки не менее 30 px в высоту.
- Кнопки контрастны (АА).
- На одной странице не больше одного целевого действия. Если их несколько
- выделить самое важное.

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

Chulakov Design
Дизайн
Подписаться
Влияние дизайна на бизнес-показатели.

Исследование McKinsey Эстетическая составляющая
- самое главное в дизайне? Нет, нет и еще раз нет. Если кто-то считает, что роль играет только великолепное визуальное оформление, а все остальное должно каким-то образом «прийти само собой», то у нас для этого человека плохие новости 😬

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

Чтобы дизайн работал на вас, специалисты McKinsey предлагают предпринять следующие шаги.

Используйте аналитический подход к дизайнуУправляйте данным направлением с той же тщательностью, что и выручкой с расходами. В этом, например, поможет внедрение системы дизайн-метрик.

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

Поставьте пользовательский опыт на первое местоСначала проведите аналитическую работу, а затем уже приступайте к генерированию идей и последующим этапам. К слову, недавно мы как раз писали про Customer Journey Map.

Проявляйте гибкость и демонстрируйте скоростьЭто вытекает из предыдущего пункта. К сожалению, около 60% компаний выпускают прототипы только для внутреннего использования, да и то на поздних этапах разработки. Подобное поведение чревато появлением «продукта в вакууме», который потом никому не будет нужен.Так что рекомендуется развивать привычку раннего тестирования идей и прототипов. На этом этапе внести правки и быстрее, и дешевле.

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

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

Таким образом, тщательный подход к дизайну положительно влияет на продажи и доходность бизнеса. И специалист, и компания стремятся сделать качественный и крутой продукт, но при этом важно не забывать об одной из основных целей любого бизнеса
- выручке. Ставьте 🔥 и продолжайте развиваться!

Chulakov Design
Дизайн
Подписаться
5 способов сделать ваш интерфейс лучше

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

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

Объясняйте, даже если вам это кажется очевиднымКак говорится, все в мире относительно. Если данный текст понятен для вас, это автоматически не означает, что у пользователей не возникнет вопросов. В качестве примера можно привести поля формы, где стоит лишний раз объяснить, зачем запрашивается email, где на банковской карте расположен CVV/CVC-код и так далее.

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

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

Chulakov Design
Дизайн
Подписаться
Поставьте все на карту.

CJM в UX-аналитике В Студии постоянно идет работа над большим количеством разноплановых проектов, в рамках которых возникает много сложных задач. Чтобы их быстро и эффективно решать, функционирует целый отдел аналитики. Поэтому мы, как никто другой, знаем, как важно найти ответы на следующие вопросы:
- Какую задачу хочет решить заказчик?
- Как мы можем ему в этом помочь?

Для этого мы используем методологию Customer Journey Map и разбиваем работу на несколько этапов:
- анализ предоставленной информации;

- изучение клиента и его бизнеса;

- изучение пользователей;

- моделирование решения;

- передача накопленных знаний и презентация решений.

Подробнее о каждом этапе с примерами и конкретными инструментами читайте в нашей статье на VC (часть 1 и часть 2). Ставь ?, если уже применяешь такой подход на практике.

Chulakov Design
Дизайн
Подписаться
Как дизайнеру заниматься самообразованием

«Нужно бежать со всех ног, чтобы только оставаться на месте, а чтобы куда-то попасть, надо бежать как минимум вдвое быстрее!»© Льюис Кэрролл, «Алиса в Стране чудес»

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

Делимся подборкой бесплатных и платных курсов для дизайнеров.

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

Поэтому мы подготовили для вас большую подборку из 60 бесплатных источников, которые помогут вам как в образовании, так и в работе. Не благодарите ?

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


1. Какой результат вы получите после прохождения той или иной программы?Например, на курсе «Дизайн интерфейсов» в Chulakov School это освоение профессии и реализация кейсов от крупнейших брендов страны ?


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


3. Кто входит в команду курса? Обращайте внимание не только на экспертность преподавателей, но и на наличие куратора курса, поскольку именно этот человек сможет решить все возникающие во время обучения вопросы.


4. Как выстроена подача теории, практики и обратной связи?Попробуйте выяснить:
- как построено изучение теоретической части;

- каким образом происходит отработка практических навыков;

- в каком формате принимается обратная связь от студентов.


5. Какие возможности открываются после курса?Например, предоставляется ли возможность пройти стажировку с последующим трудоустройством. Или имеются ли подобные партнерские соглашения с кем-то из крупных работодателей.

Ставьте ? и изучайте нашу подборку из 60 полезных ссылок. До встречи!

Chulakov Design
Дизайн
Подписаться
Избегайте пустых вводных абзацев

Постепенно вся индустрия приходит к пониманию, что UX-копирайтинг является важнейшей частью дизайна. Сегодняшняя заметка поможет понять, как максимально просто донести смысл до пользователя.

Для этого вспомним F-паттерн чтения веб-контента:
- пользователи сначала читают вдоль верхней части области содержимого;

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

- в завершение люди просматривают левую сторону содержимого в вертикальном движении.

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

Этот стиль широко используется в журналистике, где о произошедшем событии рассказывается в начале новостного сюжета. Например, в июле 1969 года Би-би-си сообщила о высадке людей на спутнике Земли заголовком «Человек делает первые шаги на Луне».

А дальше в самой статье все излагалось прямо по делу. В текст не включали лирические отступления в стиле «Угадайте, что случилось вчера днем в космосе?» или «Один известный астронавт сделал первые шаги на Луне, но кому из них выпала такая честь?».

Нет, в первом абзаце статьи было написано так:«Американец Нил Армстронг стал первым человеком, ступившим на поверхность Луны. Астронавт вышел на поверхность Моря Спокойствия в 20 часов 17 минут 42 секунды по Гринвичу, почти через 20 минут после открытия люка на десантном корабле Eagle».

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

Ставь ?, если уже применяешь такой подход на практике.

Рейтинг авторов

  • "Записки Дизайнера" (про дизайн и только про него 157 157 157
  • (Не) только немецкий 157 157 157
  • #анямастерконтента 157 157 157
  • #Фудтех 157 157 157
  • 10 идей и трендов дня 157 157 157
Показать весь рейтинг
Загрузка ...