5 начина, по които ще се възползвате от Wireframing на вашето мобилно приложение

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

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

Има много предимства на wireframing:

1. Можете да го нарисувате с молив на хартия или да използвате някои от многото налични онлайн инструменти като Fluid UI

2. Бързо и лесно се създава и променя, което потенциално ви спестява стотици часове за разработка

3. Това е страхотно визуално помагало

4. Насърчава дискусия и анализ

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

Въпреки че може да искате да пропуснете wireframing и да преминете направо към разработката, не го правете!

Wireframing ще ви помогне да избегнете много непредвидени препятствия и може би ще ви спести хиляди левове в инженерни разходи по-късно!

• Разберете задълбочено вашия случай(и) на употреба

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

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

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

Случаите на използване и структурирането ще ви помогнат да отговорите на тези въпроси:

1. Как вашето приложение ще реши проблем или ще облекчи болезнена точка?

2. Каква е целта (или няколко цели), която вашето приложение ще им помогне да постигнат?

3. Коя е най-вероятната основна причина, поради която някой ще изтегли приложението ви на първо място, т.е. каква е неговата уникална продажна точка?

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

• Поставете се на мястото на вашия потребител

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

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

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

Гледната точка на потребителя и неговият непосредствен контекст са изключително важни. Wireframing ще ви помогне да изясните пътя на потребителя:

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

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

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

• Оптимизирайте броя и реда на екраните, за да постигнете целта

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

Просто е: никой не обича да докосва бутона „назад“ дузина пъти само, защото не може да намери логичен път!

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

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

Отговорете на следните въпроси относно потока на екрана:

1. Какво е идеалното поведение на потребителя във вашето приложение?

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

3. Колко екрана трябва да видят вашите потребители, преди да постигнат целта си?

4. Какъв е най-добрият ред и категоризация на елементите и подпозициите от менюто за намаляване на ненужните стъпки?

5. Как да направим навигацията интуитивна?

6. Кои елементи и могат да бъдат напълно премахнати в сравнение с настолен компютър?

• По-ефективно използване на ресурси за дизайн и макет на високо ниво

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

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

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

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

• Намерете оптималния поток, чрез тестване на множество телени рамки

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

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

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

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

Множеството телени рамки ще ви помогнат да отговорите на следното:

1. Кои елементи и функции могат да повлияят на потребителското изживяване?

2. Докато много различни версии на тези елементи изглеждат логични, кои от тях ще бъдат естествени за потребителя?

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