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

Има голямо разнообразие от използвани инструменти, генерирани артефакти и открития, открити в UX / UI дизайн процес и те се улавят в асортимент от документи или дори прототип. Нашият най-разпознаваем артефакт за хляб и масло е добрият стар каркас.

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

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

Нека да разберем защо телените рамки понякога могат да бъдат проблематични, когато прескачането им има смисъл и как да адаптираме a безжичен процес към работен поток.

състояние на музикалната индустрия

Проблемът с телените рамки

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

Нека да разгледаме процеса на проектиране за примери, когато каркасният дизайн може да бъде пречка:

Причина 1: Клиентите не разбират какво гледат

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

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

Проблемът е, че телените рамки са много абстрактни.

Те описват нещо, което е като нещото, но не и текущ нещо, което ще бъде изградено. На този етап телените рамки ще съдържат изображения на резервни части и всякакви TK (предстоящи), FPO (само за поставяне) и TBD (за решение), като примера по-долу.

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

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

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

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

Причина 2: Те не винаги са подходящи за потребителско тестване

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

Един типичен начин за тестване на подобни неща е чрез прототипиране.

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

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

Понякога е по-ефективно да тествате всички тези неща заедно цялостно.

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

Освен това, тъй като съдържанието на копието засяга UX, самият превод може да повлияе на UX.

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

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

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

Причина 3: Те правят ада ада за разработчици и QA

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

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

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

как да намерите изтичане на памет в java

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

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

Решението: Пропуснете Wireframes

Ясно е, че има моменти, когато е необходима пълна фаза на каркас, а има моменти и когато не е така. Има дори моменти, когато преминаването направо към висококачествени козове изобщо е козирната фаза.

Може да помислите да пропуснете фазата на каркаса, ако някое от тях е вярно:

На място има твърд референтен материал.

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

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

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

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

По пътя сте планирали много итеративни прототипи и тестове.

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

Като голям плюс можете да убиете две птици с един камък. Можете да получите визуална и UI обратна връзка заедно с вашата UX обратна връзка и да направите всички тези промени едновременно.

Участниците в теста са много буквални.

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

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

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

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

Вашият клиент има ограничено време и / или бюджет.

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

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

Как да убием фазата на каркаса

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

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

Стъпка 1: Започнете с обичайния си процес на изследване и откриване.

Интервюта, теренни наблюдения, кабинетни изследвания, конкурентни анализи - каквото и да правите (или сте планирали да направите), завършете тази фаза както обикновено.

Стъпка 2: Скицирайте малко по пътя.

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

Стъпка 3: Подгответе вашия документ с висока точност

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

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

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

какъв е принципът на близостта

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

Стъпка 4: Започнете да проектирате.

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

По време на този процес използвайте добра „посока на копиране“ или истинско копие, ако го имате. Не правете заглавия, в които се казва „Заглавието на страницата отива тук“. Дайте на зрителя усещане за какво би се иди тук, ако беше реално.

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

Стъпка 5: Знайте кога да спрете да проектирате.

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

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

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

Стъпка 6: Насладете се на висококачествена обратна връзка и резултати от теста.

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

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

Обобщавайки

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

Въпреки това, в правилните случаи, преминаването направо към висока точност може да подобри процеса ви:

• Подобрете обратната връзка със заинтересованите страни . Клиентите, разработчиците, други дизайнери и участниците в теста от целевата аудитория могат да видят точно какво ще получат, като им позволят да дадат обратна връзка с по-високо качество.
• Ускорете работния процес на прототипиране . Не само, че вашите дизайни ще бъдат готови за тестване веднага, можете да получите обратна връзка за редица неща наведнъж: UX, копието и визуалните изображения.
• Предоставяне на един документ на клиенти и разработчици . Премахнете необходимостта от препратка и проверете различни документи, за да разберете как трябва да работи един бутон. Това също е чудесен начин за вашия клиент да обсъди работата с вътрешните си заинтересовани страни, за да получите още повече обратна връзка.
• Спестете време и пари . И това почти винаги е нещо добро!

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

• • •

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

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