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

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

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

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

Автор проекта: @kirillgreen
Download Telegram
🙂️ Проверяем METRO на прочность

Станислав Хрусталёв прошёл клиентский путь в приложении доставки продуктов Metro, нашёл в нём 200 аспектов, которые можно улучшить, и поделился ими в статье

Результаты автор разбил на следующие этапы клиентского пути:
— Призыв к скачиванию на сайте
— Страница приложения в App Store
— Онбординг и активация
— Ввод адреса доставки
— Выбор магазина
— Главный экран
— Просмотр сторис
— Раздел акций
— Ознакомление с каталогом
— Поиск с помощью строки
— Карточки товаров в листинге
— Фильтрация и сортировка
— Полные карточки товаров
— Избранное
— Авторизация и оформление карты
— Работа с корзиной
— Оформление заказа
— Оплата заказа

Для большей наглядности каждую точку роста сопровождает скриншот из приложения

awdee.ru/testing-metro-for-durability

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂 Оформление заказа: выбор адреса и времени доставки

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

Детально и на примерах российских интернет-магазинов автор разбирает следующие аспекты:
— Общие требования к карте
— Выбор пункта самовывоза
— Выбор адреса на карте
— Текстовый ввод адреса
— Сохранённые адреса
— Дата и время доставки
— Управление предпочтениями

awdee.ru/order-placement-selection-of-address-and-time-of-delivery

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

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

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

awdee.ru/designing-the-listing-sorting-in-the-application

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂️️️️ Практическое руководство по анимации переходов в интерфейсах

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

1. Плавное появление и затухание с изменением прозрачности
2. Масштабирование
3. Постоянное направление движения
4. Баланс скорости
5. Приоритеты, порядок и группировка элементов
6. Ориентация в пространстве

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

awdee.ru/transition-animations-a-practical-guide

#awd_ux #awd_article
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂️ Как сократить объём текста в интерфейсе без потери смысла

Перевод статьи Тейлора Дайкса из Nielsen Norman Group о том, как укорачивать и улучшать интерфейсные тексты

Автор рекомендует следующие действия:
— Уберите словесный мусор
— Уберите лишние слова
— Избавьтесь от избыточности
— Обращайте внимание на зависимые предложения
— Обращайте внимание на содержание
— Ищите лишнюю информацию
— Переставляйте слова

Для лучшего понимания он приводит примеры UX-текстов с разбором ошибок

awdee.ru/rewriting-digital-content-for-brevity

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

Станислав Хрусталёв написал новую статью о лучших практиках и ошибках в дизайне фильтров

На примерах российских приложений автор разобрал следующие аспекты:
— Размещение кнопки фильтров
— Внешний вид кнопки
— Появление экрана с фильтрами
— Интерфейс выбора фильтров
— Пояснения к фильтрам
— Слайдеры
— Фильтры выбора из списка
— Полный список значений по фильтру
— Фильтры выбора цвета
— Бинарные фильтры
— Применение фильтров
— Активные фильтры в листинге
— Активные фильтры на экране фильтров
— Сброс фильтров
— Закрытие экрана фильтров
— Прочие интересные фичи

awdee.ru/designing-product-listing-filtering-in-the-application

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂 Проектируем рейтинг и отзывы о товарах в приложении

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

Для удобства восприятия материал он разбил на части в соответствии с этапами клиентского пути:
— Карточки товаров в листинге
— Сортировка листинга
— Фильтрация листинга
— Индикатор в карточке товара
— Rating summary
— Список отзывов
— Карточки отзывов
— Медиаконтент в отзывах

awdee.ru/design-rating-and-product-reviews-in-the-app

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
Мир не вертится вокруг UX

Перевод доклада Пола Адамса о роли UX-дизайнеров в современных компаниях

Пол — продуктовый дизайнер с большим опытом. Он работал в Dyson, Flow, Facebook, Google и Intercom

🙂️ awdee.ru/role-of-ux

#awd_article #awd_ux
Please open Telegram to view this post
VIEW IN TELEGRAM
Принципы дизайна: как работает дизайн

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

🙂 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
Как разнообразить листинг товаров

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

Структура статьи:
— Изменение вида карточек
— Продвижение товаров и услуг
— Контентные блоки
— Навигация
— Обратная связь
— Прочие механики

Все приёмы автор сопроводил реальными примерами

🙂 awdee.ru/how-to-diversify-the-product-listing

#awd_article #awd_ux #awd_cx
Please open Telegram to view this post
VIEW IN TELEGRAM
10 принципов product discovery

Product discovery — исследование и работа с гипотезами для проектирования нового продукта

Мы перевели статью Мартина Спиннангра о принципах, которые помогут правильно выстроить бизнес-процесс product discovery и в итоге найти работающую версию продукта

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

К каждой главе статьи автор приложил список литературы на данную тему

🙂 awdee.ru/10-principles-of-product-discovery

#awd_article #awd_ux
Please open Telegram to view this post
VIEW IN TELEGRAM
Как выйти за пределы прямоугольника и перестать абьюзить людей плохими устройствами самообслуживания

Саша Ревяко из студии Райт написал обстоятельную статью с примерами об особенностях проектирования интерфейсов для устройств самообслуживания (УС)

К УС относятся: кассы самообслуживания в супермаркетах, билетоматы, паркоматы, электронная очередь в банках, поликлиниках и на почте, киоски самообслуживания в кафе и банкоматы

Статья полностью: right.by/blog/article/self-service-device

Короткая выжимка из статьи:
— УС пользуются все: от продвинутых юзеров до людей, у которых нет практики ежедневного обращения к подобным терминалам
— Нельзя делать интерфейс УС по тем же принципам, что и мобильный. Его использование требует бóльшей концентрации, потому что на человека влияют очередь, шум, усталость, высота устройства, дети рядом, блики солнца, реклама со всех сторон и прочие факторы
— УС находятся в особой среде взаимодействия. К её составляющим относится место, в котором находится устройство, то, в каком состоянии человек использует интерфейс (устал, встревожен, опаздывает), и то, как на него влияет окружение (отвлекает, расслабляет и другое)
— При работе с УС человек задействует всю руку, что кардинально влияет на размер элементов интерфейса и на их размещение. Они должны быть больше, чем в мобильном интерфейсе
— Особенности человеческого зрения не позволяют видеть всё происходящее на большущем экране УС. Поэтому интерфейс должен быть таким, чтобы пользователь даже периферическим зрением понимал, что происходит на экране
— В первую очередь УС должен решать задачи пользователя, а уже потом радовать их анимациями. Анимации делать можно, но для этого должна быть соответствующая технологическая платформа
— Важно помнить, что УС пользуются люди с разными особенностями здоровья, поэтому при разработке интерфейса необходимо проверять контрастность палитры

#awd_article #awd_ux
Проектируем согласие на обработку данных в 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