Оди
36.4K subscribers
24.8K photos
1.11K videos
143 files
5.26K links
Журнал о дизайне и для дизайнеров. Вдохновение, обучение, инструменты.

Чат канала: @awdeechat

Сайт с полным архивом: https://awdee.ru

По рекламе: @kgreenmedia

Автор проекта: @kirillgreen
Download Telegram
Проектируем согласие на обработку данных в e-commerce приложении

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

На примерах и антипримерах российских приложений он разобрал следующие аспекты:
— Видимость блока с согласием
— Текст согласия
— Ссылки на документы
— Чекбоксы и их отсутствие
— Согласие на маркетинговые коммуникации
— Полный текст документов

🙂 awdee.ru/designing-consent-with-policies-in-an-e-commerce-application

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Памятка по ошибкам в UX-тестах и как их избежать

Константин Ефимов и Анастасия Жичкина написали руководство об ошибках, которые совершают исследователи на разных этапах проведения UX-тестов

Авторы пишут, как:
— Правильно подготовить сценарии и задания для участников UX-тестов
— Сформулировать вопросы
— Вести себя исследователю во время UX-тестов, чтобы получить объективные ответы
— Понять, что сценарии UX-тестов понятны и выполнимы для участников UX-тестов

Смотрите наглядную схему с примерами: bit.ly/3zEUwSZ

#awd_article #awd_ux
Как правильно спроектировать корзину в интернет-магазине: 203 гайдлайна

Станислав Хрусталёв написал статью, в которой разобрал все нюансы дизайна корзины в интернет-магазинах. Он проанализировал более 200 реальных примеров. В результате получился классный практический гайд о том, как сделать корзину максимально удобной для покупателя

Для удобства восприятия автор разбил статью на следующие разделы:
— Кнопка корзины в карточке товара
— Изменение количества товара
— Подтверждение добавления
— Кнопка корзины в шапке
— Popover со списком товаров
— Empty state корзины
— Страница корзины
— Список товаров в корзине
— Отсутствующие товары
— Удаление товаров и очистка корзины
— Подытог
— Допродажа в корзине

🙂 awdee.ru/working-with-the-cart

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Заказываем подарочный сертификат в Sunlight

Недавно студия Лебедева сделала дизайн электронных подарочных карт Sunlight. Станислав Хрусталёв проанализировал их дизайн, а также весь путь покупателя: от поиска сертификатов до момента их оплаты. В результате он нашёл 100 потенциальных точек роста, о которых и рассказал в статье

Для удобства весь клиентский путь автор разбил на этапы:
— Путь до лендинга
— Лендинг заказа сертификатов
— Авторизация
— Выбор дизайна сертификата
— Выбор номинала
— Ввод данных получателя
— Ввод текста поздравления
— Проверка заказа
— Оплата и подтверждение заказа
— Получение и ознакомление с сертификатом
— Проверка баланса
— Ознакомление с правилами использования

🙂️️️️️️ awdee.ru/ordering-a-gift-certificate-at-sunlight

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Проектируем работу с избранным

Самый полный и обстоятельный чек-лист по дизайну избранного в e-commerce на основе анализа 117 реальных интернет-магазинов

В статье автор разбирает следующие аспекты:
— Добавление в избранное
— Подтверждение добавления
— Кнопка перехода в избранное
— Empty state избранного
— Страница избранного
— Списки покупок
— Удаление из избранного

Как спроектировать иконку избранного, где её расположить, как заполнить страницу избранного, нужно ли категоризировать товары в избранном…

🙂️️️️️️ это и многое другое читайте в статье: awdee.ru/designing-work-with-the-favorites

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Проектируем авторизацию в приложении по номеру телефона

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

Статью он разбил на блоки в соответствии с этапами клиентского пути:
— Общие моменты
— Заголовок формы ввода номера
— Placeholder поля ввода номера
— Активация поля с номером
— Ввод номера телефона
— Кнопка подтверждения номера
— Типы проверки номера
— Подтверждение отправки sms
— SMS с проверочным кодом
— Ввод проверочного кода
— Валидация и обработка ошибочного ввода
— Повторная отправка кода

🙂 awdee.ru/design-in-app-authorization-by-phone-number

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Входим в Авито

Станислав Хрусталёв попробовал войти в свой профиль на Авито и обнаружил, что в этом процессе есть, что улучшить. В итоге он предложил 62 идеи, как ускорить и облегчить аутентификацию для пользователей

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

🙂️️️️️️ awdee.ru/logging-into-avito

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Как учиться UX-дизайну бесплатно, без онлайн-курсов и без пиратства

Продуктовый дизайнер Никита Семёнов написал статью о том, как самостоятельно осваивал профессию дизайнера. Он рассказал, на что ориентировался в выборе материалов для изучения и по каким критериям отбирал уроки. Он показал примеры собственных подборок в разрезе тем по UX-дизайну и таблицу, в которой ведёт конспекты. В конце Никита поделился некоторыми мыслями о самообучении и дал несколько советов, как учиться продуктивно

🙂️️️️ awdee.ru/no-online-courses-guide-for-ux-designer-what-skills-to-develop-and-how-to-learn-for-free-without-piracy

#awd_career #awd_article #awd_ux
Please open Telegram to view this post
VIEW IN TELEGRAM
Проектируем избранное в e-com приложении

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

Разделы статьи:
— Empty state избранного
— Кнопка добавления в избранное
— Кнопка перехода в раздел
— Добавление в избранное
— Просмотр товаров в избранном
— Работа со списками
— Побуждение к покупке
— От избранного – к корзине
— Удаление из избранного:

Каждый гайдлайн автор сопроводил наглядным практическим примером

🙂️️️️️️ awdee.ru/designing-favorites-in-the-e-com-application

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
🇬🇧 Что такое закон Эшби и как применить его в UX-дизайне

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

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

Эта мысль раскрывает главную идею закона Эшби в контексте UX-дизайна — «сложность интерфейса должна соответствовать ментальной модели человека»

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

Но есть более сложные инструменты, такие как Github, Blender или Photoshop. Они требуют более высокого уровня когнитивной сложности, но при этом могут испугать и оттолкнуть начинающих пользователей своей сложностью

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

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

Читайте статью полностью: uxdesign.cc/what-is-ashbys-law-and-how-does-it-relate-to-ux-design-e5a51cdf803

#awd_article #awd_ux
Прокачиваем Самокат: глава первая

Станислав Хрусталёв готовит серию статей на тему клиентского пути в приложении Самокат. Он выпустил первую, в которой описал два первых этапа пути пользователя: взаимодействие со страницей приложения в App Store и процесс входа в приложение

Для удобства автор разбил материал на следующие пункты:
— Preview-экраны
— Описание приложения
— История обновлений
— Рейтинг и отзывы
— Прочие аспекты
— Основной экран входа
— Экран ввода кода

Для наглядности статью он сопроводил скриншотами Самоката, а также референсами из других сервисов

🙂 Читайте статью полностью: awdee.ru/rocking-the-scooter-chapter-one

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Прокачиваем Самокат: глава вторая

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

Каждый гайдлайн автор сопроводил наглядным практическим примером

🙂️ Читайте статью полностью: awdee.ru/rocking-the-scooter-chapter-two

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Прокачиваем Самокат: глава третья

Третья статья Станислава Хрусталёва, где он анализирует структуру корзины Самоката и показывает, что там можно докрутить и какие новые идеи претворить в жизнь

🙂️ Читайте статью полностью: awdee.ru/rocking-the-scooter-chapter-three

А это ссылки на первую и вторую части

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
🇬🇧 Почему бизнесу сложно продолжать поддерживать качество продукта при масштабировании

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

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

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

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

Читайте статью на английском: gk3fyi.substack.com/p/the-cost-of-craft

#awd_article #awd_ux
Принципы дизайна: как работает дизайн

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

🙂 awdee.ru/printsipy-dizajna-kak-rabotaet-dizajn

#awd_ui #awd_ux #awd_article #awd_gold
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂 10 проблем попапов и как их решить

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

awdee.ru/10-problems-of-popups

#awd_ui #awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
Шпаргалка по законам и принципам дизайна интерфейсов

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

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

2. Порог Доэрти: Система должна давать обратную связь в течение 400 миллисекунд для повышения продуктивности и удержания внимания пользователей.

3. Закон Фиттса: Время достижения цели прямо пропорционально расстоянию до неё и обратно пропорционально её размеру. Важные элементы должны быть крупными и легкодоступными.

4. Закон Хика: Время принятия решения растет с увеличением количества и сложности вариантов. Упрощайте выбор, разбивая сложные задачи на этапы.

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

6. Закон общего пространства: Элементы в общей области с четкой границей воспринимаются как группа. Используйте границы для визуального группирования.

7. Закон прегнантности: Люди интерпретируют сложные образы как простейшие формы. Стремитесь к простоте и порядку в дизайне.

8. Закон близости: Объекты, расположенные рядом, воспринимаются как группа. Группируйте связанные элементы.

9. Закон подобия: Схожие элементы воспринимаются как целостная группа. Обеспечьте единообразие стиля для связанных элементов.

10. Закон визуальной связности: Визуально связанные элементы воспринимаются как единое целое. Используйте цвета, линии, рамки для группировки.

11. Закон Миллера: Человек может одновременно держать в памяти 7±2 элемента. Группируйте информацию в блоки по 5-9 элементов.

12. Бритва Оккама: Выбирайте простейшее решение из возможных. Удаляйте лишние элементы без ущерба функциональности.

13. Принцип Парето: 80% последствий обусловлены 20% причин. Сосредоточьтесь на функциях, приносящих наибольшую пользу большинству пользователей.

14. Закон Паркинсона: Работа занимает всё отведенное на неё время. Устанавливайте реалистичные сроки для задач.

15. Закон Постеля: Будьте либеральны в том, что принимаете, и консервативны в том, что отправляете. Проявляйте гибкость к действиям пользователей.

16. Эффект серийной позиции: Лучше запоминаются первый и последний элементы в серии. Располагайте ключевые элементы в начале и конце списков.

17. Закон Теслера: В любой системе есть сложность, которую нельзя уменьшить. Стремитесь упростить систему для пользователей, даже если это усложнит разработку.

18. Эффект фон Ресторфф: Отличающийся объект запоминается лучше остальных. Выделяйте важную информацию или ключевые действия.

19. Эффект Зейгарник: Незавершенные задачи запоминаются лучше завершенных. Используйте индикаторы прогресса для сложных задач.

Полную версию с объяснениями и примерами читайте тут: awdee.ru/laws-of-ux

#awd_article #awd_ux
🙂 10 проблем попапов и как их решить

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

awdee.ru/10-problems-of-popups

#awd_ui #awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
Продукт или студия: куда пойти работать дизайнеру, и почему в банках так много платят

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

Читайте: https://awdee.ru/produkt-ili-studiya-kuda-pojti-rabotat-dizajneru-i-pochemu-v-bankah-tak-mnogo-platyat/

(если у вас есть подобный материал, и вы хотите опубликовать его на Оди, пишите @kirillgreen в личку)

#awd_article #awd_ux