Процесът на прототипиране - от създаване на прости телени рамки до тестване на напълно функционални макети - е един от най-мощните и мощни набори от умения, които всеки дизайнер може да овладее. Освен това е изпълнено с опасност на работните места, където процесът се пропуска вместо просто „проектиране на прототип“ като прост резултат, който да се даде на следващия отдел за изграждане. Без значение колко усърден е вашият бизнес с прототипирането, действителният процес често може да направи или разчупи крайния ви продукт.

Как и защо всъщност да се изгради прототип често е загадка. Попитайте много дизайнери и те ще наклонят главите си като объркани кученца. 'Какво имаш предвид? Просто го направете “, ще кажат те. И достатъчно вярно: Всички знаем как да създадем прототип. Ние просто не знаем как ние знаем.

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

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

Дизайн на прототипи - за какво са предназначени прототипите

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

И така, какво е прототип? Прототипът е инструмент за визуализиране на швейцарския шнур от интерактивна дизайнерска работа; всъщност прототипите (на почти всеки етап) представляват обединение на цялата работа, която е дошла преди това, в едно, видимо, функционално парче. Това визуално представяне показва какво прави продуктът във всяка една точка, какви са интерактивните елементи и как би функционирал продуктът в реалния свят.

Въпреки че има много механизми за различните аспекти на дизайна на прототипа (като създаване на скици ), лесно е да пропуснете нещата и да грешите.

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

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

Тим Браун, главен изпълнителен директор и президент на IDEO

Един прост начин да се мисли за прототипи е като механизъм за демонстриране на функционалност.

Това практическо обяснение как работи нещо има редица предимства с висока стойност, включително:

какво не е уязвимост, която може да засегне уебсайт за онлайн компания?

• Правейки го истински - Преди да се създадат прототипи, продуктът е напълно концептуален! Това е добре за известно време, но в крайна сметка трябва да се превърне в нещо, което заинтересованите страни и потребителите в крайна сметка да разберат и оценят. Прототипът е първата стъпка в преминаването от концептуална към действителна.
• Работа с проблем - Понякога имаме предизвикателство за дизайн без решение. Като умение прототипирането е чудесен начин за визуализиране на проблема и бързо въвеждане на решения. Ако не работи, изхвърлете прототипа и опитайте отново.
• Итерация - Прототипирането идва на етапи, но резултатът е един и същ: да развиете вашите идеи. От скици до hi-fis, всяка нова итерация предлага множество поведения и функции за тестване. И с повече данни можем да итерираме както по-бързо, така и по-умно.
• Откриване на непредвидени сценарии - Веднъж нещо е видимо, имаме ограниченията на нашия продукт, които са на разположение за проучване, което също осигурява по-добър контекст за това какво трябва да има там ... и какво не трябва!
• Откриване на проблеми с използваемостта - Тук живеят много дизайнери: След като даден продукт има прототип от всякакъв вид, предизвикателствата за използваемост изведнъж стават лесни за откриване и отстраняване.
• Презентация - Прототипите на всеки етап са стандарт за представяне. Независимо дали тествате версия на страница или представяте продукт на клиент, там трябва да има прототип под някаква форма. И ако не е, можете да се обзаложите, че някой ще попита къде е и защо не е включен.

Как да стартирам процеса на прототипиране

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

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

1. Какви са целите на проекта?

Започнете с голямата картина. Решава ли продуктът реална нужда? Как решава тази нужда? Разбиране на продукта полезност е от решаващо значение за предоставянето на всякакъв вид жизнеспособно решение.

2. Какви конкурентни продукти използват хората в момента?

Силен конкурентен анализ ще предостави ясна картина на състоянието на пазара за типа продукт, плюс това, което днешните потребители очакват.

3. Коя е публиката? Какви са целите им?

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

4. За какъв тип продукт е и за какво (устройство) е?

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

5. Има ли визуални прецеденти, които да се следват?

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

през 2015 г. две имена в приложенията, които доминираха на пазара, бяха

6. Какви са резултатите?

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

Начертайте своите прототипи

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

Съберете вашите писмени инструменти по избор, било то молив и хартия или бяла дъска и маркер. Процесът на скициране е подобен на писане на свободен текст, или музикант, който дрънка; нарисувайте това, което чувствате въз основа на цялата работа, която сте свършили предварително, и като вземете предвид парчетата по-долу:

01 | Потребителски потоци - Следвайте идентифицирането на потребителски потоци. Вижте как потребителите постигат целите си и как си взаимодействат в системата.

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

03 | Първи скици - След като разберете кой ще използва системата, какво ще прави и с какво, е време да видим как. Скицирайте потребителските си потоци - все още няма нужда да създавате оформлението, просто решете функционалността.

04 | Скицирайте елементарна структура - След като потребителските ви потоци бъдат скицирани, ще имате по-добра представа за най-доброто оформление на продукта. Това ще включва съдържание (текст, снимки, видео и т.н.), което ще се показва като основни полета или драсканици. Когато са написани на ръка, те няма да се поберат по размер, така че цялата структура и съдържание са само за визуализация, а не за реална употреба.

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

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

Преминаване към дигитално (прототипи с ниска до висока точност)

След като има достатъчно пълни скици, за да продължите напред, е време да ги дигитализирате. Независимо дали е така Adobe XD или Sketch , Фреймър , или Флинто или нещо друго, създаването на цифрови версии на скици е първата стъпка към тяхното формализиране. Следователно фокусът се измества от креативно добавяне на необходими елементи към организиране на активи и структура в рамките на проектите.

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

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

Обратното извикване на node js не е функция

С всеки нов проводник и итерация задавайте два основни въпроса: Отчита ли тази страница целта си в по-големия потребителски поток? И има ли взаимодействие смисъл (което означава, че потребителят е разбрал как да завърши действието)? Задаваме много тези въпроси. Колкото повече правим, толкова по-вероятно е всяка нова итерация да приближи прототипите до окончателен проект.

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

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

С някои инженерни ноу-хау или по-мощни инструменти като Justinmind или Axure , също така е възможно да се създадат функционални прототипи, които са интерактивни, освен просто щракване. Потребителите могат да тестват неща като попълване на формуляри, изпълнение на прости или сложни задачи и действително използване на приложението, както е предназначено да се използва, без действително да го изграждат. Дизайнери с обучение по дизайн на човешко компютърно взаимодействие (HCI), включително много Дизайнери на ApeeScape , редовно изграждайте и тествайте с функционални прототипи.

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

Прототип с цел

Красотата и предизвикателството на прототипирането е в процес. Можем да кажем същото за почти всичко, но прототипите започват и завършват с цел. Без да знаем защо даден екран трябва да се държи по определен начин, как трябва да работи дадена функция или дали потребителите се нуждаят от фуния или не, направеният прототип не е разработен; изчертава се и след това се създава ad hoc.

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

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

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• eCommerce UX - преглед на най-добрите практики (с инфографика)
• Значението на ориентирания към човека дизайн в продуктовия дизайн
• Най-добрите портфейли на UX Designer - вдъхновяващи казуси и примери
• Евристични принципи за мобилни интерфейси
• Предвиден дизайн: Как да създадем магически потребителски опит

Разбиране на основите

Как се прави прототип?

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

Какво представлява кликващият прототип?

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

Какво е работещ прототип?

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