Оди
34.7K subscribers
24.2K photos
1.1K videos
144 files
5.23K links
Журнал о дизайне и для дизайнеров. Вдохновение, обучение, инструменты.

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

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

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

Автор проекта: @kirillgreen
Download 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
Проектируем избранное в 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