Съжалявам за кървящите си очи, но те са важни.

методология

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

Всеки премиер: "Не съм луд, просто съм разочарован ..."

Малки предпочитания: Ако обичате тази статия, споделете я с приятелите си. Ако обичате кученца, спасете едно. Ако обичате майонеза, охладете я в хладилник.

Вижте, всички забравяме да проектираме нещо по повод. Това е напълно готино!

Е, не е готино ... но като ... това е добре. Случва се. Този списък ще ви направи по-добри. Или поне по-наясно. Или може би просто му давате няколко хлопки, защото разпознавате, че някой е прекарал време в създаването на този списък и да продължи с живота си. NBD. Всичко съм за тези класове и този бас. С референцията на Меган Треньор в първия параграф, започваме с рев.

Това е само списък с неща, които може би сте забравили да проектирате. Когато се замислите колко лесно е приложение като Instagram или Snapchat, лесно е да пренебрегнете колко екрана, състояния и други неща се превръщат в наистина страхотно потребителско изживяване.

  • Вход и регистрация
  • Първи опит
  • Всички малки неща
  • Стартиращи материали
  • Профил неща
  • Луди потоци

Затова четете ги, размислете и ... като ... не разстройвайте своя премиер.

Вход и регистрация

1. Екранът за пръскане

Екранът, който се показва при стартиране на мобилно приложение или когато влизате в уеб приложение и всичко се зарежда.

Ето един красив от Джеймс Джексън

2. Потокът на забравената парола

„Abcd1234“ или „1234abcd“? Това е важно. Не го забравяйте

Маджо Путерка не оставя потребителите си затворени извън къщата при дъжд.

3. Страницата „Благодаря за регистрацията“

Този екран обикновено идва, след като потребителят създаде акаунт и им казва да потвърдят своя имейл адрес.

Какво следва? Попитайте Хейли Катлин.

4. Приветственият имейл

Това прегражда линията между продуктовия дизайн и маркетинга на продуктите, но това е буквално ПЪРВОТО впечатление, което трябва да направите на потребителите си. Накарайте го да брои. Чудесно време е да въведете пищния тон на вашия продукт.

Наистина така. От Брайън Голатка.

5. Страници с условия и услуги и страници за поверителност (ugh)

Просто го направете за хората по закон. Те просто се опитват да избегнат съдене.

Наистина оценявам как Марко Прлич се опита да направи Общите условия по-достъпни.

Първи опит

6. Потребителят е на борда

Има много различни методи, които можете да използвате. Ето пет от моите фаворити:

Приятно полезно, от MuNa.

7. Празната (ите) на кутията извън кутията

Това е като да се преместиш в къща и не си се местил в никакви мебели. Изглежда доста празно, а? Помогнете на вашите потребители, като им дадете тласък в правилната посока. "Поставете дивана тук."

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

8. Помощните документи

Ако сте в голяма компания, вероятно има цял екип, посветен на това. Но те все още ще ви молят за илюстрации и екранни снимки. Това заслужава толкова (или повече) усилия, колкото страницата за вход или емисията за дейности.

Мая Гао е много полезна. Бъдете повече като Мая.

9. Изображение на потребителски профил / Аватар по подразбиране

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

Hermes Strange прави сладки неща. Това са сладки AF.

10. Бутон за излизане

За съжаление, ДОБРЕ трябва да разрешите на потребителите да напускат Просто се преструвайте, че използват приложението ви в публична библиотека и трябва да излязат, така че някой непознат да не промени името на акаунта си на „Mr. Задници ". Неподходящо.

Предполагам, че Кристофер вероятно е откраднал парите за обяд на Хенрик Оставете го да излезе и да избяга от сцената.

Всички малки неща

11. Приложният колонтитул на приложението

По-голямата част от времето предполагам, че страниците просто продължават завинаги, например, когато хората вярваха, че светът е плосък и просто продължаван. Забележка: Земята не е плоска.

Пепел Швайцер може да се изгуби някъде в гората. Някой да й помогне.

12. Favicon на браузъра

Знаете ... онази малка икона, която се показва в раздел браузър. Продължавам да губя средните си раздели, защото вече не е зелен. Но е доста!

Майкъл Фларуп направи страхотен шаблон за фавикон, който можете да изтеглите.

13. Страница 404

Ризван е заседнал в тази дупка. Отиди да й помогнеш.

14. По подразбиране / задържане / фокусиране / натиснат / деактивиран / и т.н. Състояние на въвеждане

Уф, толкова много щати. „Фокус + Hover“ може да е моят любим / най-неясен. Снимката по-долу идва от системата за проектиране на UX Power Tools за проектиране.

Странична бележка за моя страничен проект, определено трябва да го проверите:

15. Редът на раздела

Tab Order е функция за достъпност, която позволява на потребителите да навигират в страница, използвайки клавиша Tab. Не можах да намеря изображение, което да го представя, затова направих екранна снимка на спецификацията, която Кристиан Бек пише от 2007 г., където той определя позицията на подредбата в таблица за всяка контрола на потребителския интерфейс в таблица (уморих се дори да пиша, че … SnoozeFest 2017 ™). Всъщност можете да определите реда, в който се посещават артикулите, за да се гарантира, че първичните действия са преди вторичните. Това е предизвикателно дизайнерско предизвикателство.

Аххх, дните на писане на 80 страници спецификации и развитие на водопада.

16. Поведението на превъртане

Не само къде и как се превърта, но и какво всъщност превърта. Фиксиран ли е заглавката? Подножието?

О, човече, Питър Блажей, това се чувства гладко. Nice!

17. Бутонът Интерком

Искам да кажа, че най-малкото, което можете да направите, е да го накарате да съответства на цветовете на приложението ви. Хайде, хора. Това не е ракетна операция.

Това е по-лесно, отколкото да направите купа със зърнени храни.

18. Бутони за страницата

Ако приемем, че не сте избрали безкрайно превъртане, вашите потребители ще се нуждаят от начин да стигнат до страница 27. Нека!

Borunda свърши хубава работа. Обичайте това жълто, Борунда!

19. Курсорите

Бутоните трябва да имат указател. Неинтерактивните неща трябва да имат курсор по подразбиране. Текстът трябва да има текстов курсор. Разработчиците не винаги знаят това. Току-що зачервих екран на приложението онзи ден, където програмистът имаше текстов курсор за състояние на задържане на бутон. Милост.

Джеф Бродерик ОБИЧА да кликва върху неща. Той също направи халява.

20. Механизъм (ите) за сортиране / филтриране / търсене на таблица

Трябва да има по-бърз начин да стигнете до ZZ Top в тази таблица с данни за „Bands with Beards“ ...

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

21. Празни състояния „Без резултат“

Понякога търсите нещо или добавяте твърде много филтри и няма резултати. Колко тъжно. Развеселете потребителите си с нахална илюстрация. Или вашата банкова сметка и номера за маршрутизиране.

Reiner Wendland почти покри всичко за 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. Изображенията на тестовата палуба

Като изображение на Deck Sales, но малко по-прозорливо. Искам да кажа ... вие се опитвате да съберете пари. Ще разберете как да го направите по-късно.

Ето търговска тайна, винаги поставяйте табла в таблото си.  Това не е шега.

32. Изображения на продукта за лов

Ей, те също са актуализирали страниците с профили!

Все още ми липсва средно 2.0, но всеки  получавам  помага  me да ходя напред.

33. Рекламните изображения във Facebook / Twitter

„Но ние не пускаме реклами във Facebook!“ Ха, докато не сте. И тогава никой не ти казва. Просто ги направете вече и ще бъдете в безопасност.

Отне малко разкопаване, за да намеря реклама, която НЕ СЕ БЪДЕ за матрак Casper. Всички убивате играта, Каспър.

34. Образите на профила в социалните медии

Да, трябва да направите такъв за всички 938 социални мрежи. За щастие направихме инструмент Sketch, за да ускорим това за вас. Добре дошли, деца.

35. Банерът за стартиране на имейл

Тройни точки, ако го направите илюстрация. Текущ.

^ между другото, това е бюлетин на моята агенция и моите колеги пишат наистина изключително съдържание. Ще ни хареса, ако сте се абонирали!

Ето някои скорошни изяви:

Профил неща

36. Предпочитания за уведомяване

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

Slack не стана компания на стойност 8 милиарда долара чрез забавяне на настройките за уведомяване !! Закован го.

37. Страницата за фактуриране

Не забравяйте, че хората трябва да получат копия от сметките си, за да разходват продукта, за който ви плащат хиляди долари. А някои хора съставят идиотския ИТ отдел за агенцията си и не издържат колко е трудно да се намери това. всеки. единично. месец. Той не е горчив.

Не знам какво означава това, но беше лесно да стигна до тук!

38. Опцията „Изтриване на моя акаунт“

Точно така, знам. Никой няма да направи това. Но ей, може би ще започнат нов акаунт отново някой ден! Точно като хората, които минават на павилион в търговския център и казват „Ще се върна по-късно и ще купя три!“

За това има законни причини, които са положителни. Изтрих акаунти, когато се обединих в по-голям лиценз за екип. Изтрих стари акаунти, които събираха прах и исках да започна нова. Във всеки случай е добре обслужването на клиентите да направи това и доброто преживяване.

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

39. Инструментът за изрязване на снимка на профила

Това е сценарий на кошмарен кошмар за повечето приложения и не е необходимо. Кристиан ми изпрати екранна снимка от по-рано, когато той сменяше профилната си снимка на Бионсе.

Той дори не можеше да мине през този екран, за да покаже как изрязва снимка. 2 от 10 звезди. Не бих сложил пръстен върху него.

40. Опция / поток „Надстройване на моя акаунт“

Смята се колко е трудно това за много SaaS продукти. Млъкни и ми вземи парите. Не трябва ли да е лесно ?! Като ... НАЙ-ЛЕСНИТЕ ?!

Буферът има елемент от менюто за надстройване след това доста проста форма. Бам. Ти имаш парите ми. Напред, Буфер.

Луди потоци

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

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

След като започне развитието, ще започнете да осъзнавате, че просто подиграването с един екран всъщност не разказва историята (готино е, всички се опитваме да бъдем мързеливи). Разработчиците се нуждаят от вас, за да разберете как тече потребителското изживяване от екран към екран.

41. Потокът „Промяна на моя адрес“

Знаеш ли, когато получиш зашеметяващ нов апартамент в центъра на града и трябва да смениш адреса си на ВСЯКА КРЕДИТНА КАРТА, КОЯТО ВИ СЛЕДВАШ?

Дхавал С. Ганди иска да се увери, че неговото алое вера е изпратено до правилното място.

42. Потокът „Добавяне на кредитна карта“

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

Това изглежда твърде реално, Карлос Медина. Без връзка, току-що купих нови обувки и не струваше и стотинка!

43. Потокът „групово добавяне“

Едно е бързо да добавите обект в системата, но е съвсем различно да добавите бързо BUNCH OF OBJECTS в системата.

Моля, сър, може ли да имам още малко?

44. Потокът „Създаване на персонализиран филтър“

Ако имате възможност за сложно филтриране, може да е хубаво да добавите възможността да запазите този сложен филтър за по-късно. По този начин не е нужно да кликвате отново милион пъти.

Oykun Yilmaz може да направи тази стъпка по-нататък, като позволи на потребителя да запази този филтър. Направи го, Ойкун!

45. Потокът „Добави в кошницата“

Странно е да мисля, че хората забравят за този поток, но знаете ... Аз съм от тези хора. Млъкни.

Явно Алберто Конти се нуждаеше от 4 стола и 4 странични маси. Трябва да е голяма къща ...

46. ​​Потокът „Сподели това“

Споделянето стана доста повсеместно онлайн, но това не означава, че вече е предназначено за вас. Още повече причина да отделите малко време за това.

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

47. Потокът „Създаване от съществуващо“

Това е нещо като „Дублиране + Редактиране“ всичко в едно действие. По принцип потребителят може да започне от съществуващ обект и да го актуализира според нуждите.

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

48. Потокът „Покани някого“

Няма по-добър начин да добавите някаква „вируса“ към вашия продукт от поканите и споделянето. Като те гледам Dribbble. Уверете се, че е лесно, бързо и забавно!

Мисля, че Паула Пинтарик и Кристин тръгват на полет. Или работят по проект и наблюдават как други хора летят. Това е по-лошо

49. Потокът „Промяна на потребителските разрешения“

Знаеш ли онзи Грег? Знаеш ли как той прецаква всичко, до което се докосне? Да, може да искате да оттеглите някои от привилегиите на Грег, така че той да не изтрие целия интернет. Глупав Грег.

Мат Shwery, от друга страна ... много по-малко на кокалче, отколкото Грег.

50. Потокът „Изтриване и възстановяване“

Знаеш ли, когато изтриеш нещо важно за SUPER и трябва да го върнеш веднага? Не? Добре.

Ерик Цай разбира, че всички правим грешки.

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

Пълно разкритие, аз всъщност сам забравих за тях. Вижте, аз обичам анимации, но имам късмет, ако имаме лукса да ги изградим, когато продажбите искат прототип, направен вчера, а развитието сочи нещо, което напълно пропуснах в 8-ата си итерация на целевата страница. И честно казано, ако изобщо стигнем до анимации, просто проучвам Dribbble или CodePen и изпращам нещо, което обичам да разработвам и казвам: „Направете го така!“, Шегувайки се. Аз ли съм?

Не съм.

резюме

Вероятно вие яростно пишете списък на всичко, което забравих за тази статия. Чувствайте се свободни да ми напомните в коментарите. Дизайнерите имат около милион неща, които трябва да запомните при проектирането на MVP продукти или големи функции за корпоративна софтуерна платформа. Да се ​​надяваме, че това може да бъде най-малкото полезна справка, която да ви напомни за следващия ви проект.

Когато не се опитвам да си спомням всяко малко нещо (тя прави магия), работя върху инструментите за дизайн на Sketch в UX Power Tools, за да ви направя по-добър, по-ефективен дизайнер. Можете да научите повече тук:

Следвайте UX Power Tools в Twitter
Последвай ме в Туйтър