Извините за кровоточащие глаза, но это важно.

методология

50 вещей, которые вы [вероятно] забыли спроектировать

Каждый премьер-министр: «Я не сумасшедший, я просто разочарован…»

Маленькие сувениры: если вам нравится эта статья, поделитесь ею с друзьями. Если вы любите щенков, спасите одного. Если вы любите майонез, поставьте его в холодильник.

Слушай, мы все забываем что-то придумывать. Это совершенно круто!

Ну, это не круто ... но вроде ... все хорошо. Такое случается. Этот список сделает вас лучше. Или, по крайней мере, более осведомлен. Или, может быть, вы просто даете ему пару хлопков, потому что вы узнаете, что кто-то потратил время на исправление этого списка, и продолжаете свою жизнь. Nbd. Я все про эти хлопки и этот бас. Со ссылкой на Меган Трейнор в первом параграфе мы начинаем бурно.

Это просто список вещей, которые вы, возможно, забыли разработать. Когда вы думаете о том, насколько простое приложение, такое как Instagram или Snapchat, легко упустить из виду, сколько экранов, состояний и прочего требуется для создания действительно потрясающего пользовательского опыта.

  • Вход и регистрация
  • Первый опыт
  • Все мелочи
  • Материалы для запуска
  • Профиль Материал
  • Безумные потоки

Так что читайте их, размышляйте, и ... как ... не расстраивайте свою личку.

Войти Зарегистрироваться

1. Заставка

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

Вот красивый Джеймс Джексон

2. Поток забытых паролей

Был ли это «abcd1234» или «1234abcd»? Это важно. Не забудь это.

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

3. Страница «Спасибо за регистрацию»

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

Что дальше? Спроси Хейли Кэттлин.

4. Приветственное письмо

Это пересекает грань между дизайном продукта и маркетингом продукта, но это буквально ПЕРВОЕ впечатление, которое вы производите на своих пользователей. Заставь это считать. Это прекрасное время, чтобы представить быстрый тон вашего продукта.

Мне действительно это нравится. Брайан Голатка.

5. Условия использования и конфиденциальность страниц (тьфу)

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

Я действительно ценю то, как Марко Прлич попытался сделать Условия и положения более доступными.

Первый опыт

6. Регистрация пользователя

Есть множество различных методов, которые вы можете использовать. Вот пять моих любимых:

Восхитительно полезно, MuNa.

7. Готовое пустое состояние (я)

Это похоже на переезд в дом, а вы не переехали ни в какую мебель. Выглядит довольно пусто, а? Помогите своим пользователям, подтолкнув их в правильном направлении. «Поставьте здесь диван».

У меня такое чувство, что Вели-Йохан Вероман любит супергероев.

8. Справочные документы

Если вы в большой компании, вероятно, целая команда посвятила этому. Но они по-прежнему будут дразнить вас за иллюстрации и скриншоты. Это требует столько же (или больше) усилий, как страница входа или канал активности.

Майя Гао очень помогает. Будь больше похож на Майю.

9. Изображение профиля пользователя по умолчанию / аватар

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

Гермес Стрендж делает милые вещи. Это милые AF.

10. Кнопка выхода

К сожалению, вы ДОЛЖНЫ разрешить пользователям уходить. Просто представьте, что они используют ваше приложение в публичной библиотеке, и им нужно выйти из системы, чтобы какой-то незнакомец не изменил имя своей учетной записи на «Mr. Обломки». Неуместный.

Я предполагаю, что Кристофер, вероятно, украл деньги Хенрика на обед. Пусть он выйдет и сбежит со сцены.

Все маленькие вещи

11. Нижний колонтитул приложения

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

Эш Швейцер может где-то затеряться в лесу. Кто-нибудь, помогите ей.

12. Браузер Фавикон

Вы знаете ... этот маленький значок, который появляется на вкладке браузера. Я продолжаю терять свои вкладки Medium, потому что они больше не зеленые. Но это красиво!

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

13. Страница 404

Ризван застрял в этой дыре. Иди помоги ей.

14. По умолчанию / Наведение / Фокус / Нажатие / Отключено / И т.д. Состояния ввода

Тьфу, так много штатов. «Фокус + наведение» может быть моим любимым / самым непонятным. На приведенном ниже снимке экрана показана система проектирования UX Power Tools.

Дополнительное примечание для моего дополнительного проекта, вы обязательно должны проверить это:

15. Порядок табуляции

Порядок вкладок - это специальная функция, которая позволяет пользователям перемещаться по странице с помощью клавиши Tab. Я не смог найти изображение, которое представляло бы это, поэтому я сделал снимок экрана спецификации, которую Кристиан Бек написал в 2007 году, где он определил положение порядка табуляции в таблице для каждого элемента управления пользовательского интерфейса в таблице (я устал даже от того, что писал это… SnoozeFest 2017 ™). Вы можете фактически определить порядок, в котором элементы посещаются, чтобы гарантировать, что первичные действия предшествуют вторичным. Это аккуратная задача дизайна.

Ааа, дни написания 80-страничных спецификаций и разработки водопада.

16. Скроллинг поведения

Не только где и как это прокручивается, но и что на самом деле прокручивается. Заголовок исправлен? Нижний колонтитул?

О, чувак, Питер Блейзей, это чувствует себя гладко. Ницца!

17. Домофон

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

Это проще, чем сделать миску каши.

18. Кнопки нумерации страниц

Предполагая, что вы не выбрали бесконечную прокрутку, вашим пользователям потребуется способ попасть на страницу 27. Пусть они!

Борунда хорошо поработала. Люблю этот желтый, Борунда!

19. Курсоры

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

Джефф Бродерик ЛЮБИТ, нажимая на вещи. Он также сделал халяву.

20. Сортировка / фильтр / механизм поиска таблиц

Должен быть более быстрый способ добраться до ZZ Top в этой таблице данных «Bands with Beards» ...

Eugen Esanu обладает исключительным вниманием к механизмам фильтрации и фиолетовым / желтым комбо. Ницца.

21. «Нет результатов» Пустые состояния

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

Райнер Вендланд почти все рассказал для Zendesk.

22. Состояния ошибок

Плохой ввод. Неверный пароль. Существующий аккаунт. Слишком много вещей выбрано. Есть много способов, как что-то может пойти не так, особенно если вы моя бабушка и у вас есть iPad на Рождество. Это была ошибка.

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

23. Системные уведомления

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

Это из Google Inbox. «Отменить» очень удобно, когда вы «случайно» удаляете письмо от своей мамы.

24. Пустой выпадающий Автозаполнение

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

По-видимому, у Юрряна ван Друнена не было «Бра» в его контактах. Наверное, к лучшему.

25. Состояние загрузки

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

Не самая лучшая сковорода, XPLAI. Продолжай практиковаться. Но это все еще мучительно восхитительно.

Материалы для запуска

26. Значок приложения Friggin ’

Да, наверное, лучше не забывать об этом.

Готов поспорить, Эдди Лобановский изменил все свои иконы на продукты для завтрака. Вкусные.

27. Изображения в App Store

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

28. Открытый График / Социальные Изображения

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

Кристи Т официально беззащитна. SF сделает это с тобой.

Вот как это выглядит в Medium:

29. Маркетинговые изображения на сайте

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

И если вы дизайнер в Redkix, вы должны убедиться, что изображение работает на малиновом.

30. Изображения с колоды продаж

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

Да, и продажи, вероятно, покроют все ваши макеты другими вещами, так что готовьтесь к этому.

31. Изображения Pitch Deck

Как изображение с торговой палубы, но более дальновидное. Я имею в виду ... вы пытаетесь собрать деньги. Вы поймете, как это сделать позже.

Вот коммерческая тайна, всегда помещайте информационные панели в вашу колоду. Not Это не шутка.

32. Продукт Охота за изображениями

Эй, они тоже обновили страницы профиля!

Я все еще скучаю по Medium 2.0, но каждый  я получаю  помогает  мне ехать дальше.

33. Картинки Facebook / Twitter Ad Images

«Но мы не показываем рекламу на Facebook!» Ха, до тех пор, пока вы. И тогда никто не говорит вам. Просто сделайте их уже, и вы будете в безопасности.

Потребовалось немного покопаться, чтобы найти объявление, которое НЕ БЫЛО для матраса Каспера. Вы убиваете игру, Каспер.

34. Изображения в социальных сетях

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

35. Баннер электронной почты для запуска

Тройной балл, если вы сделаете это иллюстрацией. Текущий.

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

Вот несколько недавних фаворитов:

Профиль Материал

36. Настройки уведомлений

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

Slack не стал компанией за 8 миллиардов долларов, ослабив настройки уведомлений !! Успешно справился.

37. Страница оплаты

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

Я не знаю, что это значит, но сюда было легко добраться!

38. Опция «Удалить мою учетную запись»

Хорошо, я знаю. Никто не будет этого делать. Но, может быть, когда-нибудь они снова создадут новую учетную запись! Также как люди, которые проходят мимо киоска в торговом центре и говорят: «Я вернусь позже и куплю три!» Конечно.

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

Pssst, господин президент, вы можете деактивировать свою учетную запись здесь.

39. Инструмент для обрезки фотографий профиля

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

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

40. Опция «Обновить мой аккаунт» / Поток

Меня поражает, насколько это сложно для многих продуктов SaaS. Заткнись и возьми мои деньги. Разве это не должно быть легко ?! Как ... ЛЕГКО ?!

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

Безумные потоки

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

Затем на полпути домой к своему починителю, потягивая чайный гриб из своего верблюжьего бака, вы помните, что разработка еще не началась! # $% @

Как только начнется разработка, вы начнете понимать, что просто макетирование одного экрана на самом деле не рассказывает историю (это круто, мы все стараемся быть ленивыми). Разработчики нуждаются в том, чтобы вы действительно поняли, как пользовательский интерфейс перетекает с экрана на экран.

41. Поток «Измени мой адрес»

Вы знаете, когда вы получаете шикарную новую квартиру в центре города, и вам нужно сменить адрес на КАЖДОЙ КРЕДИТНОЙ КАРТЕ, КОТОРОЙ ВЫ БЫЛИ КОГДА-ЛИБО?

Давал С. Ганди хочет убедиться, что его Алоэ Вера отправлена ​​в нужное место.

42. Поток «Добавить кредитную карту»

Некоторым людям (хм, мне) нравится хранить в архиве около сотни кредитных / дебетовых карт, чтобы у воров было много аккаунтов на выбор. Так что легко добавлять карты. Это действительно все, что я должен сказать об этом.

Это выглядит слишком реально, Карлос Медина. Я просто купил несколько новых туфель, и это не стоило ни копейки!

43. Поток «Массовое добавление»

Одно дело сделать быстрое добавление объекта в систему, но совсем другое дело сделать быстрое добавление ПУЧКА ОБЪЕКТОВ в систему.

Пожалуйста, сэр, можно еще?

44. Поток «Создать пользовательский фильтр»

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

Oykun Yilmaz может сделать еще один шаг вперед, позволив пользователю сохранить этот фильтр. Сделай это, Ойкун!

45. Поток «Добавить в корзину»

Смешно думать, что люди забывают об этом потоке, но вы знаете ... Я один из тех людей. Заткнись.

Видимо Альберто Конти понадобилось 4 стула и 4 приставных стола. Должно быть, большой дом ...

46. ​​Поток «Поделись этим»

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

Томек Квятковский действительно знает, как стать социальным.

47. Поток «Создай из существующего»

Это что-то вроде «Дублировать + Редактировать» в одном действии. В основном пользователь может начать с существующего объекта и обновлять его по мере необходимости.

Кайл Джонстон пишет много сценариев. Может быть, тайно Кристофер Нолан?

48. Поток «Пригласить кого-то»

Нет лучшего способа добавить «виральности» вашему продукту, чем с помощью приглашений и обмена. Глядя на тебя, Дриббл. Убедитесь, что это легко, быстро и весело!

Я думаю, что Паула Пинтарик и Кристина летят. Или они работают над проектом и смотрят, как другие люди летают. Это хуже

49. Поток «Изменение прав пользователя»

Ты знаешь этого парня Грега? Вы знаете, как он все испортил? Да, вы можете отменить некоторые привилегии Грега, просто чтобы он не удалял весь Интернет. Глупый Грег.

Мэтт Швери, с другой стороны ... гораздо менее тупой, чем Грег.

50. Поток «Удалить и восстановить»

Вы знаете, когда удаляете что-то СУПЕР важное, и вам нужно немедленно вернуть его обратно? Нет? Хорошо.

Эрик Цай понимает, что мы все совершаем ошибки.

БОНУС № 51. Анимации

Полное раскрытие, я действительно забыл об этом сам. Послушайте, мне нравятся анимации, но мне повезло, если у нас есть роскошь создавать их, когда продажи хотят, чтобы вчера был сделан прототип, а разработка указывает на то, что я полностью упустил в своей восьмой итерации целевой страницы. И если честно, если мы вообще дойдем до анимации, я просто просматриваю Dribbble или CodePen и отправляю что-то, что мне нравится, для разработчика и говорю: «Сделай так!» Шучу. Я?

Я не.

Резюме

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

Когда я не пытаюсь запомнить каждую мелочь (она делает магию), я работаю над инструментами дизайна Sketch в UX Power Tools, чтобы сделать вас лучшим, более эффективным дизайнером. Вы можете узнать больше здесь:

Следите за UX Power Tools в Твиттере
Подпишись на меня в Твиттере