26 стъпки на дизайна на продукта и таблото

Какво научих по време на 4-годишното си пътуване на дизайнер на продукти и дизайнер на табло

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

1. Предварителна обработка

Получете възможно най-много информация (Попитайте за три примера)

За мен нищо не ми дава по-голяма яснота от това да видя истински работещ пример. Когато работя с нов клиент или на съвсем нова целева страница за даден продукт, считам за най-лесно да помоля клиента да предостави три или четири вдъхновяващи страници, защото това наистина помага на двете страни. Да накарате клиента да пусне идеи на масата ви дава възможност лесно да разберете какво харесва и какво очакват от готовия дизайн.
 
Ако работите с множество екипи, трябва да се стремите да прекарвате толкова време с разработчиците на продукт, колкото с колегите си дизайнери. Това, което научих, докато работя над Tapdaq, ключът към вземането на ефективно дизайнерско решение е да се уверите, че разговаряте с екипа на разработчиците колкото можете повече. В моя случай винаги има случаи на решение на проблем, при който аз самият не бих могъл да го намеря. Бих казал, че целта е да премахнете възможно най-много въпроси, преди да преминете в развитие.

Научете за персоните

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

Персонален шаблон - Изтеглете го тук: http://janlosert.com/assets/persona-template.zip

Задайте точни цели - какво точно трябва да проследим?

Мисля, че повечето дизайнери / клиенти пренебрегват тази стъпка, но един от най-важните аспекти на дизайна и за двете страни е да разберат целите на продукта, който проектирате. Склонни сме да скачаме право в пиксели и бързо извличаме интерфейса на проекта. Ако това е съвсем нов уебсайт или нова функция, не забравяйте да поставите ясни цели за това, което искате да постигнете.
 
Тъй като всичко е проследимо, говорете за точните точки, които ще проследите. Например, те могат да варират от нови регистрации до редица клиенти, използващи Paypal срещу покупки с кредитни карти. Винаги се уверете, че знаете колко високо се стремите в началото!
 
Послепис - Това така или иначе ще ви трябва за настройка на фунии на Mixpanel по-късно в този процес.

Структура на проекта

Настройте папката на проекта и започнете да събирате Moodboard

Има много сайтове за вдъхновение - Dribbble, Behance, Pttrns, Pinterest и т.н. Наистина е лесно да намерите подобни проекти като този, върху който работите. Освен това може да има решение на проблем, който изпитвате и се опитвате да разрешите.
 
Когато започвам работа по нов проект, винаги настройвам папка с имена на папки - Източници, Екрани и Експорт, Вдъхновение и ресурси. Запазвам всичко, което намеря в интернет, в папката Inspiration, за да мога да го използвам по-късно за създаване на основни табла за настроение. Тази папка може да бъде пълна с всичко от плъгини, фишове или дори пълни казуси от Behance.

2. Преминаване към ниска вярност

Бяла дъска

Ако някой може да си спомни, не се интересувах много от качеството на телените рамки в предишната си статия. Методите, които сега използвам са следните:
 
Ако искаме да добавим нова функция или да препроектираме процес, сядаме и всички на срещата започват да скицират идеи върху бяла дъска, хартия или дори iPad. Това действие ни позволява да поставим всички в екипа на дизайнерската позиция. По-късно приключваме с две възможности за дизайн, за да видим кой от тях работи най-добре. Винаги се опитваме да преминем през целия опит и да обсъдим повечето крайни случаи по време на тази част от процеса. Наистина е от съществено значение да се обърнете към тях сега, за разлика от фазата на проектиране, или още по-лошо, по време на частта за разработка. Точно тогава можете да загубите много време и енергия.

Поставете карта на цялата си информация на екраните (Какви данни трябва да въведете на потребителя)

Това е моментът да излезете извън бялата дъска и да изброите всички входове и истории на потребителя. Напишете какво точно трябва да вмъква потребителят в определен екран и как може да постигне желаните цели.

Напишете всички възможни състояния

Тъй като всички табла за управление, приложения или уебсайтове имат различни състояния, това е друга важна стъпка, която не бива да забравяте.
 
При проектирането трябва да сме сигурни, че ще се справим с всички тях. Хубаво е да имате лъскави графики и готини снимки на профили в нашите Sketch файлове или PSD. Най-вероятно обаче потребителите ще видят обратната страна на приложението ви. Особено когато идват на вашия продукт. Необходимо е да сте подготвени. По-долу е даден пример за това как се справяме с празните състояния в един от нашите компоненти на данни.

Tapdaq - Състояние на приспособленията за кръстосана промоция

Подгответе първа схема

Всичко това води до финалната част на ниската вярност. Благодарение на крайния резултат от задачата на бялата дъска, сега знаем всички възможни състояния, входове и цели на потребителя. За да обобщя всички взаимодействия, създавам диаграма и, за да бъда честен, промених стила на това много пъти: преминавайки от файлове на скица с растерни оформления до просто правоъгълници, символизиращи всяка страница с имената им по-долу. Като беше казано, процесът винаги беше болезнен, обикновено се озовавам в ситуация, в която искаме да променим или добавим нещо по-късно в процеса. С тези решения обикновено съм принуден да правя много повече стъпки; като промяна на позициите на линии, стрелки и изображения.

В крайна сметка ние използвахме Camunda Modeler, който не е точно инструмент за проектиране. Това е просто приложение за създаване на технически диаграми. Което звучи странно, но това приложение е разработено, за да ви помогне да изградите основни диаграми. Най-важното е, че всичко създадено е напълно мащабируемо. Можете лесно да плъзнете и пуснете всяка точка и тя автоматично ще създаде линии и стрелки за вас. Можете също да избирате от различни видове точки, които могат да бъдат полезни, например, за маркиране, когато потребителят получи имейл от Интерком. Camunda позволява експортиране в SVG, което улеснява оцветяването на проследими точки в Sketch.

Меню Tapdaq + Структура на екраните (Експорт от Camunda Modeler)

3. Работа / дизайн

Moodboard

Мога да започна със създаването на табло за настроение, тъй като събирам всички изображения в папката си Inspiration. Използвам табла за настроение главно, за да обсъдя мислите си с колегите и да опиша някои от визуалните идеи, преди да започна с процеса на пиксели.

Moodboard с хроникален дисплей и ярко сини цветове

Първа чернова

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

Напишете вашето копие (тон)

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

Първи тест за стажант

С първата си чернова можете бързо да създадете прототип в Marvelapp или Invision. Това е нещо, което започнах да правя наскоро и се оказва, че това е друг невероятен валидиращ аспект. С прототип вече можете лесно да настроите разговор с 3 или 4 души от вашия екип и да споделите прототипната връзка с тях и да се опитате да зададете няколко въпроса, докато тествате върху тях конкретни потоци / сценарии. По този начин можете лесно да тествате вашите умения за въпроси и очевидно да тествате дизайнерските си решения върху реални потребители, без да се притеснявате за загубените ресурси и време. Обикновено избирам хора, които не участват толкова много в развитието на таблото. Също така се опитайте да избягвате да гледате някой, който вече е имал шанс да играе с прототипа преди.

етикет

Всички знаем колко е трудно да останеш подреден. Как да предоставим още една функция. Това обикновено води до разхвърлени Sketch или PSD файлове. Научих много, докато проектирах UI Kit на Dashboard, особено за разликите между работата като единствен дизайнер в стартиране, работата в екипи или работата върху цифровите ми продукти. Докато работя в Tapdaq, аз съм уверен в уменията на колегите си и дори когато знам, че се опитвам да поддържам подредени файлове, понякога това е невъзможно! Въпреки това, когато работите в екип, мисля за PSD, като че ли ги създавам за някой друг. Използвам правилото, че ако имате повече от 8 слоя в папка, тогава трябва да създадете нов.

UI Kit на таблото за управление - Структура на папки

Намерих един страхотен плъгин за Sketch, който ми спести часове, докато работех върху моите потребителски интерфейси. Преименуване - https://github.com/rodi01/RenameIt
 
Все още можете да разгледате тези стари указания за етикета (Както и да е, повечето точки работят за всеки редактор, който ще използвате.) - http://photoshopetiquette.com/

Съвет - Сложете всичко в платно

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

Създайте UI елементи и започнете да играете с Lego

Вероятно закъснявам на купона и това вече ще звучи остаряло, докато го пиша. Причината, поради която не сме направили никакви телени рамки по време на пътуването тук, е проста. Скица 39 идва с нещо, което намерих за невероятен, а това е „форми със свойства за преоразмеряване“. Принуди ме най-накрая да пресъздам всички 50+ екрани на Tapdaq. Това е нещо, което прави проектирането лесно за всички в екипа. Нашият Sketch файл е чисто плъзгане и пускане сега. Можете лесно да дадете на всеки от съотборниците си празно платно и те могат да създават почти черноверни чернови. Благодарение на това ние сме в състояние да пропуснем всички инструменти за телена рамка и да започнем с почти реално изглеждащи пиксели.

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

Елементи за плъзгане и пускане в файла със скица на Tapdaq

4. Активи и доставка

Когато сте готови с проектирането и итерациите въз основа на първата обратна връзка, все още не сте свършили. Сега идва моментът да предадете вашите проекти на вашите инженери / разработчици.

Спецификации

Една от основните ми цели е винаги да мога да съобщавам решенията си с екипа и да мога да намаля трудността на нашите разработчици, доколкото мога, за да им осигуря най-добрите възможни ресурси. Това за мен определено е най-важната част от работата ми като дизайнер.
 
Тъй като документирахме цялото взаимодействие и имаме всичко готово от началото на нашия процес, създаването на спецификации е парче торта. Склонен съм да пиша спецификации в Google Документи или под екраните в Sketch файлове. Хубаво е да обработвате дизайна си с обяснения на всички функции, така че всеки да може да вземе вашия файл в бъдеще.

Диаграма

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

Пълна диаграма на приложението Sagram Analytics

Окончателен прототип

Едно от ключовите неща за мен е винаги цялото взаимодействие да е готово в прототип. Обикновено завършвам с 3–5 прототипа по пътя към финалния за онази малка сесия със съотборници или да покажа някакви конкретни потоци. Склонен съм да подготвя всички състояния в Sketch в едно табло и след това да дублирам тези полета, за да има готовност на всяка държава при експортиране.
Както беше казано по-рано, можете да използвате Marvelapp или Invision. Чудесно е да добавяте коментари към части от дизайна си, за да разширите спецификацията си много повече, така че дори копирайтърът да може лесно да отиде и да провери в реални пиксели и потоци, ако всяко копиране и диалогов прозорец работи според изискванията.

Quicktime Video> Бележки

Когато не представям неща в Hangout на екипа или клиент, изпращам видеоклип за споделяне на екрана на мен, преминавайки през прототипа и обяснявайки всичко, което съм проектирал. За мен е хубаво потвърждение преди всяка презентация, че знам отговора на всеки въпрос и евентуални фантастични взаимодействия, които реших да проектирам. Може да се използва добре и при работа в отдалечени базирани екипи. Всеки има достъп, за да възпроизведе цялото мислене за взаимодействие по всяко време.

вдъхновявам

Приятно последно докосване на вашия дизайн можете да използвате After Effects или Principle. Добре е да обясните как искате това и това да се движите или задържите.

Styleguide

Друг важен момент за инженерите е да знаят как ще реагират нещата при различни сценарии. Помислете за състоянието на грешката при въвеждане или къде да покажете съобщение за грешка. Същото, как ще изглежда състоянието на деактивирано състояние на подаване, къде да се постави спинър за въвеждане и т.н. Това е супер лесно за инженерите да преминават само през таблото на Symbols и да стилизират един по един елемент, преди те дори да започнат да кодират всички екрани, благодарение на това, че имат Sketch файл като Lego блокове. Styleguide и визуален преглед на всички елементи всъщност са една от най-търсените функции / дизайни за следващата актуализация на моя потребителски интерфейс на Dashboard.

Преглед на потребителския интерфейс на Tapdaq - Styleguide

5. Финал и тест

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

Инспектлет / HotJar

След като дизайните са превърнати в работен код, не забравяйте да включите своите фрагменти Inspectlet или HotJar JS. Винаги съм развълнуван (или разочарован), за да видя как потребителите навигират през таблото ни за управление или какво правят на страницата ми с портфолио. Inspectlet е невероятно при заснемането на цялата ви потребителска сесия. Работи чудесно и за по-големи проекти. Той идва с лесно филтриране на страница / страница, което ви помага да наблюдавате сесия на определена функция или поток. Използваме Inspectlet в Tapdaq. За моето лично портфолио използвам безплатните функции на HotJar, за да генерирам топлинни карти и да записвам поне няколко потребители, разглеждащи портфолиото ми.

Mixpanel

Mixpanel работи чудесно за валидиране на нашите цели (тези, които ние настройваме в самото начало на нашия процес). Mixpanel помага да видите колко потребители изпълняват определени потоци. Колко потребители отпаднаха преди да настроят акаунта. Колко души преминаха от главната целева страница до магазина и до най-ценния ни продукт.

Google Analytics

Не мога да кодирам големи неща, но поне мога да работя с CSS файлове и с прост код. Напоследък ми беше интересно да видя къде потребителите кликват и докато гледат топлинните карти на Hotjar, реших да настроя основен проследяващ клик и в Google Analytics. Можете лесно да проследявате и всяко кликване на потребителя на вашия уебсайт. Ето примерен код за проследяване на кликвания - http://pastebin.com/tdmFZN2k

`` `

** 1. Поставяне на скрипт във вашия код **

<Скрипт>
 функция функция (име, етикет) {
 ga („изпрати“, „събитие“, име, „клик“, етикет, {
 hitCallback: функция () {
 console.log („Събитие, изпратено до Google Analytics“);
 }
 });
 }

** 2. Добавете onclick към връзките си **

`` `

Проследяващ код на Google AnalyticsРезултати от проследяване на Google Analytics

Както можете да видите, проследявам всеки бутон, всяка връзка и винаги прикрепям различен етикет към всяка от тези точки на котва. Това ми помага лесно да картографирам поведението на потребителя. Например разбрах, че хората използват горната навигация 5 пъти повече през подчертаната връзка в интро текста. Чувствайте се свободни да кодирате този фрагмент и на вашия уебсайт.
 
Послепис За съжаление не се броят кликвания от потребители с AdBlock.
Благодаря @snapeuh за голяма помощ при настройването на това.

домофон

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

6. След дизайн / Как да управлявам работата си

Цели

За последната част от пътуването си създавам едномесечни спринтове, разделени на цели / свързани с работата с Tapdaq, лични цели и житейски цели. Все още използвам Things by Cultured Code, за да разделя тези проекти на малки задачи, които са лесни за излизане. Работих по 5 различни проекта едновременно и винаги се оказвах разочарован от това, че не можех да прокарам нищо над финалната линия. В днешно време имам за цел да пускам поне по едно нещо всеки месец. Това „нещо“ може да бъде нещо от две нови подстраници в портфолиото ми, нов продукт или нова целева страница на клиента. Само за да продължа и да оставам доволен от довършителните неща.

Първоначално от Сиаваш Махмудиан - https://mobile.twitter.com/siavash/status/618093511066435585

Workspace

Вече използвам скица за по-голямата част от моите дизайни, но имам много хора в Instagram, които искат моето работно пространство в Photoshop, така че ето тук! http://janlosert.com/assets/workspace.zip

7. Последните няколко думи

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

Оставете дрибъл зад себе си

От това, което научих и как дизайните ми се променят през последните 4 години, стигнах дотам, че Dribbble е най-добрият начин за нашите дизайнери да привлечем нови клиенти и да покажем работата си. Но не е задължително мястото, за което искате да създадете вашите дизайни. Винаги съм се стремял да има хубави пиксели със секси снимки на профили, но това не е това, от което реалните потребители се нуждаят и ще използват. Това е един пример от Tapdaq, нещо, което съм проектирал с мисълта за хубав кадър за Instagram и Dribbble и така изглежда текущият екран, след като прекарвам часове в гледане на хора, редактиращи техните профили и след като разбрах каква информация те всъщност искат и се нуждаят.

Настройки на акаунта - преди и след

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

бъдеще

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

Край

Ще се радвам да науча за вашия работен процес, кои стъпки обикновено предприемате в личните си проекти или как вашият процес е различен, докато работите в екипи. Обичам да виждам работните пространства на други хора. И най-важното не се колебайте да споделите своите мисли за всички / допълнителни стъпки в моя процес.
 
Публикувам повече от Tapdaq и моите лични проекти в Dribbble.
и ще се радвам да чуя вашите мисли в Twitter.