Методология
50 вещей, которые вы [возможно] забыли запроектировать
Каждый продакт-менеджер: “Я не злюсь, просто разочарован…”
(Мы продолжаем переводить цикл статей по UX/UI. Полную подборку можно найти в коллекции «Советы продакта»)
Вы читаете перевод статьи “50 Things You [Probably] Forgot To Design”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.
Несколько небольших одолжений: Если вам нравится статья, поделитесь с друзьями. Если любите щеночков, спасите хотя бы одного. Если любите майонез, ставьте его в холодильник.
Так, все мы время от времени забываем что-то запроектировать. Все отлично!
Ну, это не отлично… но, как бы сказать, … это нормально. Этот список поможет вам стать лучше. Ну или хотя бы быть в курсе. Или может хлопнете пару раз просто за то, что кто-то потратил время на эту работу. Подумаешь. Люблю, когда вы хлопаете. Знаете, Меган Трейнор вся такая all about that bass, а я all about those claps. Ну, с мыслями о Меган и в приподнятом настроении, начнем!
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
Это просто список вещей, которые вы, возможно забыли задизайнить. Иногда мы смотрим на Instagram или Snapchat и удивляемся: какое простое приложение! И, конечно, не берем во внимание, сколько там на самом деле скриншотов, состояний и всяких штук, которые отвечают за этот простой и классный пользовательский опыт.
- Вход: логин, регистрация
- Первый опыт использования
- Всякие мелочи
- Материалы для запуска
- Все, что в профиле
- Куча пользовательских сценариев
Так что почитайте эту статью, обдумайте все и … ну … не расстраивайте своего продакта.
Вход: логин и регистрация
1. Экран-заставка (splash screen)
Этот экран показывается при запуске мобильного приложения или при входе в веб-приложение, когда все еще грузится.
2. Маршрут “забыл пароль”
Как там было: “abcd1234” или “1234abcd”? Это важно. Не забывайте.
3. Страница “Спасибо за регистрацию”
Обычно этот скрин появляется в тот момент, когда пользователь уже создал аккаунт, и мы просим его подтвердить адрес электронной почты.
4. Приветственное письмо
Мы тут балансируем на границе между продуктовым дизайном и маркетингом, потому что приветственное письмо — это буквально ПЕРВОЕ впечатление, которое вы произведете на пользователя. Не упустите свой шанс. Самое время подкупить пользователя своим остроумным тоном.
5. Условия использования и конфиденциальность (бее)
Просто сделайте это для ребят из юридического. Они там стараются, чтобы нас не засудили.
Первый опыт использования
6. Онбординг пользователя
Есть масса разных доступных методов. Вот пятерка моих фаворитов:
7. Пустые состояния при первом использовании
Представьте, что вы заселяетесь в дом без мебели. Пустовато, правда? Помогите своим пользователям — подтолкните их в правильном направлении. “Сюда поставьте диван”.
8. Раздел помощи
Если вы крупная компания, то наверняка этим разделом занимается целая команда. Но даже в этом случае они будут просить у вас иллюстрации и скриншоты. Разделу помощи нужно уделить не меньше времени и усилий, чем, скажем, странице входа или ленте активности.
9. Аватар пользователя по умолчанию
Теперь, когда в приложения можно входить через аккаунты соц.сетей или сервисы типа Gravatar, в интерфейсе появилось больше улыбающихся лиц. Но все равно найдется один чувак, который не загрузил фотку профиля. Это ваш шанс добавить в дизайн изюминку и выразить себя как бренд.
10. Кнопка выхода из аккаунта
К сожалению, нужно дать пользователям возможность уйти. Представьте, что они зашли в приложение с компьютера в библиотеке и обязательно нужно выйти из аккаунта, иначе кто-нибудь поменяет их имя на “Мистер Жопс”. Такого допускать нельзя.
Всякие мелочи
11. Подвал приложения
Обычно я думаю, что страницы никогда не кончаются. Это как раньше люди верили, что земля плоская, и просто жили с этим и все. Но на заметочку: земля не плоская.
12. Фавикон в браузер
Знаете…эта маленькая иконка, которая отображается на вкладке в браузере. Я постоянно теряю вкладки медиума, потому что они сменили иконку с зеленой на черную. Но стало красивее!
13. Страница 404
14. Разные состояния ввода: обычное/наведенное/выделенное/при нажатии/неактивное/т.д.
Брр, сколько разных состояний. Мое самое любимое/загадочно-непонятное — это “Выделенное + наведенное”. Скриншот ниже из статьи UX Power Tools Design System.
Зацените мой дополнительный проект:
15. Порядок переключения кнопкой Tab
Переключение через Tab — это такая функция, которая позволяет пользователями с ограниченными возможностями перемещаться по странице нажатием кнопки Tab. Я не нашел ни одной картинки под эту тему, поэтому сделал скриншот спеки, которую в 2007 году написал Кристиан Бек. Он прописал в таблице порядок переключения разных элементов UI по нажатию Tab (я устал даже писать об этом 😴…SnoozeFest 2017™). Стоит прописать этот порядок, чтобы убедиться, что сначала идут основные действия, а потом второстепенные. Считайте, что это такой дизайнерский челлендж.
16. Скроллинг
Важно не только как скроллится страница и куда двигается содержимое, но и что двигается, а что закреплено. Шапка? Подвал?
17. Кнопка обратной связи
Хотя бы подберите цвет в соответствии с вашей палитрой. Что вы, ребята, это ж не ядерная физика!
18. Кнопки с номерами страниц
Допустим, вы не используете бесконечный скролл, а пользователям нужно попасть на страницу 27. Так пусть же у них будет такая возможность!
19. Курсоры
При наведении на кнопку курсор должен превращаться в ручку. Для неинтерактивных элементов есть курсор по умолчанию — стрелка. Для текста есть специальный текстовый курсор. Разработчики не всегда это знают. Я только что составлял список замечаний по экранам и в одном месте разработчик установил текстовый курсор для наведенного состояния кнопки. Боже мой
20. Механизм(ы) сортировки/фильтрации/поиска в таблицах
Например, когда человек изучает большую таблицу “Группы с бородами”, надо, чтобы он мог быстро добраться до буквы “Я”.
21. Пустое состояние “нет результатов”
Иногда, если человек ищет что-то очень специфическое или добавляет слишком много фильтров, может случиться, что по его запросу нет результатов. Печально. Порадуйте пользователя прикольной иллюстрацией. Или покажите свою выписку с банковского счета.
22. Состояния ошибок
Неправильный ввод. Неверный пароль. Такой аккаунт уже есть. Выбрано слишком много элементов. Что угодно может пойти не так, особенно если вы бабушка и вам на рождество подарили айпад. Это было ошибкой.
23. Системные уведомления
Система постоянно делает что-то за кулисами приложения, и иногда не мешает рассказать пользователю, что все прошло удачно (или не очень). Пользователь определенно должен это знать.
24. Автозаполнение в выпадающем списке
Автозаполнение — это классная функция, когда нужно найти какие-то объекты в системе. Но бывают ситуации, когда не нашлось никаких результатов. В этом случае не хотелось бы показывать пустую строку. Напишите небольшое сообщение или предложите какие-то действия.
25. Состояние загрузки
Конечно, есть вероятность, что люди переходят в Tinder, пока ваша страница грузится. Но если они прервут свои секс-поиски, чтобы проверить, как у вас идут дела, вы должны наглядно показать, что страница все еще грузится.
Материалы для запуска
26. Гребаная иконка приложения
Аха, лучше не забывать о ней.
27. Картинки для App Store
28. Open Graph картинки для соц.сетей
Это картинки, которые отображаются, когда кто-то делится статьей в Twitter, на Facebook, в Medium и др.
Вот так это выглядит на Medium:
29. Изображения на сайт для отдела маркетинга
А еще не забудьте, что они будут хотеть как у Stripe и просить вас сделать точно так же.
30. Изображения в презентацию для продаж
Если вы уже сделали картинки для отдела маркетинга (из пункта выше), то вы молодец. Но, возможно, придется все переделать для отдела продаж, чтобы контент соответствовал бренду, с которым ваши блестящие продавцы вот-вот заключат контракт на 6-значную сумму.
31. Изображения в презентацию для инвесторов
Pitch-deck презентация (известная как “презентация для инвесторов”) — это то же, что презентация для продаж, только более концептуальная. Ну в смысле… вы же пытаетесь привлечь деньги. Покажите концепцию, а как ее реализовать придумаете позже.
32. Картинки на Product Hunt
Эй, они только что обновили страницы профиля!
33. Картинки для рекламы в Facebook/Twitter
“Но мы не даем рекламу в Facebook!” Ага, пока не начнете. А когда начнете, никто вам не скажет. Лучше сделайте заранее и можете спать спокойно.
34. Картинки для профайлов в соц.сети
Да, нужно сделать отдельную картинку для всех 938 социальных сетей. К счастью, мы сделали инструмент для Sketch, который ускорит этот процесс. Не за что, ребятки.
35. Баннер для письма по случаю запуска
^ кстати, это рассылка моего агентства, и мои коллеги пишут очень крутой контент. Будем рады, если вы подпишетесь!
Вот самое прикольное из последнего:
Все, что в профиле
36. Настройки уведомлений
Круто, когда приложение присылает уведомления, и особенно круто, когда звучат фанфары. Но когда фанфары звучат в 19й раз, устаешь и от этого. Поэтому нужно дать пользователю возможность решать, когда слушать фанфары.
37. Страница выставления счетов
Не забывайте, что людям нужны копии счетов, чтобы учесть и возместить расходы на продукт, за который они платят тысячи долларов.
38. Опция “удалить мой аккаунт”
Да, я знаю. Никто не будет этого делать. Но ребят, может они однажды откроют новый аккаунт! Как те люди, которые уходят из магазина и говорят “я вернусь и куплю три”. Ну конечно.
Есть и положительные аспекты удаления аккаунта. Я удалял аккаунты, когда переходил на более крупную многопользовательскую лицензию. Старые аккаунты пылились, а я хотел начать все сначала. В моем случае продуманный процесс удаления аккаунта — это пример хорошего клиентского сервиса.
39. Инструмент для обрезки фото профиля
Ну, это разгромный сценарий для большинства приложений, но так быть не должно. Вот Кристиан скинул мне скриншот, как он пытался поменять фото профиля на Бейонсе.
40. Апгрейд аккаунта (сама опция и пользовательский маршрут)
Я поражаюсь, насколько это сложный процесс в большинстве SaaS продуктов. Заткнитесь и возьмите мои деньги. Разве это не должно быть просто?! Ну то есть ПРОЩЕ ВСЕГО?!
Куча пользовательских сценариев
В итоге, когда вы сделали все вышеперечисленное и считаете себя по праву свободным, вы идете домой, чтобы целый следующий день гордиться своей работой.
И вот вы едете домой на своем хипстерском велике, попивая комбучу, и вдруг вспоминаете, что разработка еще даже не началась! #$%@
Когда начнется разработка, вы начнете понимать, что отдельные макеты экранов — это еще не история (норм, все мы ленимся). Разработчикам нужно, чтобы вы представили весь маршрут пользователя в виде цепочки экранов.
41. Маршрут “Сменить адрес”
Знаете, бывает купишь крутую квартирку в даунтауне и прям очень нужно сменить адрес на КАЖДОЙ КРЕДИТКЕ, КОТОРАЯ У ВАС ЕСТЬ?
42. Маршрут “Добавить карту”
Некоторые люди (кхм, я) любят хранить в одном файле сотни разных кредитных/дебетовых карт, чтобы ворам было из чего выбирать. Поэтому сделайте так, чтобы мы могли легко добавить карту. Это все, что я хочу сказать на эту тему.
43. Маршрут “Массовое добавление объектов”
Одно дело упростить добавление в систему одного объекта, и совсем другое — оптимизировать процесс массового добавления.
44. Маршрут “Создать пользовательский фильтр”
Если у вас в приложении можно настроить сложную систему фильтров, было бы неплохо иметь возможность сохранить ее для будущего использования. Так пользователям не придется каждый раз настраивать все фильтры по новой.
45. Маршрут “Добавить в корзину”
Забавно, что люди забывают об этом маршруте … но, знаете, я один из них, так что заткнитесь.
46. Маршрут “Поделиться”
Функция “поделиться” сейчас есть практически везде, но это не значит, что у вас она появится сама собой. Но она определенно стоит потраченного времени.
47. Маршрут “Создать из существующего”
Это все равно что “дублировать + редактировать” в одном флаконе. То есть пользователь может взять за основу существующий объект и при необходимости обновить его.
48. Маршрут “Пригласить кого-то”
Функции “поделиться” и “пригласить” — это лучший способ сделать ваш продукт “вирусным”. Я смотрю на вас, Dribbble. Важно, чтобы приглашать людей было просто, быстро и весело!
49. Маршрут “Редактировать права пользователей”
Вы знаете этого Грега? Знаете, как он вечно портит все, к чему прикасается? Да, у Грега стоит отнять часть прав, чтобы не удалил что-нибудь с концами. Глупый Грег.
50. Маршрут “Удалить и восстановить”
Знаете, бывает удалишь что-то СУПЕР важное и нужно срочно это восстановить? Нет? Ну ладно.
Бонус #51. Анимации
Честно говоря, я сам совершенно про них забыл. Поймите, я люблю анимации, но редко выпадает счастье до них дойти, особенно если продажи просят прототип еще вчера. А потом в дело вступают разработчики, и напоминают мне, что я кое-что забыл в своей 8й итерации проекта. А серьезно, если нам случается добраться до анимаций, то я просто ищу на Dribbble или CodePen то, что нравится, и посылаю разработчикам со словами “сделайте так!”. Да ладно, шучу. Или не шучу?
Нет, не шучу.
Заключение
Вы там наверное яростно строчите список всего, что я забыл упомянуть в статье? Добро пожаловать в комментарии. Дизайнеру приходится держать в голове миллион вещей в процессе проектирования — будь то разработка MVP или отдельной функции крупной платформы. Надеюсь, эта статья будет хорошей напоминалкой для вашего следующего проекта.
Когда я не пытаюсь запомнить каждую мелочь (она волшебная), я работаю над инструментами проектирования Sketch в UX Power Tools, чтобы сделать вашу работу более эффективной. Узнать больше можно здесь:
Подпишитесь на UX Power Tools в Твиттере
Подпишитесь на меня в Твиттере
Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Нас можно найти в Facebook: Ольга Жолудова и Ринат Шайхутдинов.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!