Дизајнирајте једну страницу са Ембер-ом

Садржај

• Упознајте своје кориснике
• Ментални модели
• Узорци дизајна у Емберу
• Буди брз...
• ... али изгледа још брже
• Будите љубазни, премотајте уназад
• Припремите се за непрекидно офлајн
• Последње мисли

Дакле, спремате се да направите своју прву апликацију Ембер. Ембер је оквир за креирање веб апликација, а ви сте га одабрали због брзине, модуларности, проширивости и лакоће управљања базом кодова како расте. Ваш технолошки избор је супер-звук, али не знате где да почнете са дизајном.

То је у реду. Ја могу помоћи. Познавање ваше публике, производа које користе и било каквих искустава сличних ономе што стварате темељ је за дизајнирање успешног производа. То знање ће наговестити смер дизајна у који желите да идете.

У овом упутству ћемо се претварати да редизајнирамо апликацију за испоруку удела на фарми под називом „СпроутПасс“ (опростите ми на грозном имену) за веб и мобилне уређаје. Учесници у пословању желе да апликација омогућава корисницима да одаберу и затраже испоруку пољопривредних производа, пошаљу текст покретачу испоруке и надгледају утицај њихове трансакције на животну средину.

Упознајте своје кориснике

Започећемо са проценом искуства тако што ћемо дубље заронити у ум корисника.

Сазнајте ко су корисници, каква су искуства са куповином удела на фарми и зашто то раде. Пратите тангенте и пустите да одговори теку природно. Ово може бити изазов ако нисте баш социјални тип (нисам раније био), али то је корак без којег готово никада не можете ићи - и најбоље је да то учините лично ако је икако могуће. Не знате шта не знате, а разговор са стварним корисницима довешће до тога да те ствари откријете врло брзо.

Рецимо да смо интервјуисали пет корисника и открили да они деле неке главне карактеристике:

• Економски обазрив
• Често пропуштају пицк-уп производе
• Брига за њихово здравље и планету
• Брига за локална предузећа и фарме
• Почели сте да користите СпроутПасс, јер ће испоруке производа бити на залихама
• УКС је био збуњујући и нисам знао колико су испоруке еколошки ефикасне

Када сазнамо ко су наши корисници, можемо почети да размишљамо о томе како би производ који преуређујемо могао да се уклопи у њихов свакодневни живот. У ДоцкИарду волимо да креирамо мапе путовања које скраћено описују шта одређени корисник доживљава током свог дана. Ово нам помаже да замислимо многе могуће додирне тачке за нашу апликацију.

Урадимо то за корисника по имену Маргарет. На горњој мапи путовања можемо да видимо да Маргарет има неколико тачака у времену када брине о производима: за доручком када погледа у свој фрижидер, док једе ручак и када се врати кући, близу времена испоруке.

Ментални модели

Једном када идентификујемо места на Маргаретином путовању где наша апликација може највише да помогне, можемо започети изградњу менталног модела: њене менталне слике дизајнираног објекта и начина на који може да се повеже са њим. Започет ћемо размишљањем о аналогним искуствима проблемима које ћемо решити за Маргарет.

Урадите то тако што ћете бити прецизни када идентификујете сличност којом ће корисник тумачити ваш производ. „Као апликација за рачунаре“ није користан модел. „Попут програма за ћаскање“ је боље јер се ради о упоредној употреби апликације, а не о томе како технологија реагује. Кључно је дефинисати начине на које ће корисник доћи до разумевања апликације.

Рецимо да Маргарет користи апликацију за праћење тркачких перформанси, вози се Убером по граду и користи Фацебоок Мессенгер за комуникацију са пријатељима и породицом. Ово су нека сидра која можете користити за заснивање њене процене СпроутПасс-а.

Па, завртимо ово на опису СпроутПасс-а. Шта ако кажемо: „СпроутПасс је тржиште које повезује локалне пољопривреднике са еколошким потрошачима“? То описује шта се дешава са апликацијом, али не пружа основу за дизајн. Желимо нешто што даје неке назнаке о томе како се може појавити кориснички интерфејс и шта би Маргарет лакше разумела. Можда је „СпроутПасс попут услуге отпреме за испоруку производа“. То је много боље. Сада можемо почети да замишљамо какав би могао бити кориснички интерфејс.

Из ових менталних модела можда ћемо моћи да изведемо обрасце дизајна за апликацију. У случају СпроутПасс-а, то је можда мапа и парадигма аутомобила од Убера за надгледање пошиљке. Можда постоји историја пошиљака, њихов утицај на животну средину у поређењу са вожњом и самим преузимањем, и екран сличан текстуалној поруци или е-пошти за преношење сопствених белешки вашем возачу.

Узорци дизајна у Емберу

Када обавимо одговарајућа истраживања потребна да бисмо у потпуности разумели пејзаж у коме ћемо обликовати своју апликацију, можемо да пређемо на фазу дизајнирања. На основу корисниковог контекста, успели смо да идентификујемо неке обрасце дизајна које можемо користити као општи калуп за нашу апликацију.

Веб-апликације на једној страници имају своје техничке изазове, а ми такође имамо дизајнерске обрасце за бављење њима. Погледајмо неке методе које можете користити за суочавање са овим изазовима.

Буди брз...

Користите СВГ-ове или спритеове где је то могуће, компримујте слике, минимизирајте табеле стилова и ЈаваСцрипт, ограничите употребу фонта (то ће често побољшати и ваш дизајн), а где је то могуће, циљ је смањити укупан број захтева које шаљете серверу . У већини сценарија желите да омогућите корисницима да примају потпуно рендеровану апликацију што је брже могуће, чак и ако је њихова веза спора.

... али изгледа још брже

Кориснички интерфејс скелета је начин да створимо искуство које се осећа брже него што заправо јесте. То чинимо стварањем голе кости верзије садржаја који долази, а који се приказује кориснику док се стварни садржај учитава. Кориснички интерфејс скелета може имати различите облике, али овде ћемо користити основне облике који представљају садржај који треба учитати.

Ово делује као потврда напретка. Када Маргарет тапка да поручи возачу, уместо да седи на празној страници док се садржај не учита, она схвата да систем функционише. Искуство ће се осетити као да се за њу развија.

Додатак Ембер скелет вам омогућава да експериментишете са стварањем сопственог корисничког интерфејса костура. У РЕАДМЕ-у (делимично представљен у наставку) приказује како можете приказати привремене слике са брзим учитавањем уместо коначне, споро учитавајуће слике. Имајте на уму да се библиотека ослања на аддЕвентЛистенер и ремовеЕвентЛистенер, који захтевају ИЕ9 +.

Прво морате да инсталирате додатак:

жар инсталирати жар-скелет

Користите компоненту у предлошцима:

{{скелетон-имг срц = "/ патх / то / ларге / имаге.пнг" тмпСрц = "/ патх / то / смалл / плацехолдер.пнг"}}

Ток посла је следећи:

1. Прво ће се учитати тмпСрц слика
2. Када заврши, срц слика ће покушати да се учита
3. Ако се срц доврши, ово ће бити приказано
4. Ако се срц не доврши успешно, тмпСрц ће остати
5. Ако је додат опционални еррорСрц, та слика ће се приказати ако срц не заврши успешно

Да бисте сазнали више о овоме, погледајте спремиште ГитХуб које прати овај чланак. Овде ћете наћи савете о постављању подразумеваних вредности, стилу, одложеном приказивању и још много тога. Такође можете видети основни пример на делу, са везом за пребацивање одложеног приказивања овде.

Будите љубазни, премотајте уназад

Постоје сценарији у којима Маргарет може погрешити. Претварајмо се да је случајно отказала испоруку коју је желела да закаже. Дозволите Маргарет да користи интервентне тастере као што је „цмд + З“ и / или обезбедите јасно дугме за опозивање да би преокренула своје поступке. Апсолутно спречавање незгода је идеално, али немогуће. У случајевима када корисници могу да направе грешку, они ће то и учинити.

Припремите се за непрекидно офлајн

Интернет веза је нешто што узимамо здраво за готово, а често се апликације дизајнирају очекујући да захтев увек има одговор. Наше апликације морају бити свесне стања везе и одговорити на њега. Поред тога, режим ван мреже може пружити пут некоме с врло малим приступом интернету уопште да повуче податке на једном месту (где има интернет) и настави да покреће ту апликацију негде другде (где то нема).

Последње мисли

Тешко да ћете свој концепт закуцати већ у првом покушају. Важно је да можете континуирано тестирати своје дизајне како бисте били сигурни да пружате апликацију која је на лицу места. Препоручујем да направите неколико дизајнерских спринтова како бисте брзо истражили и тестирали могућности пре него што потрошите превише времена на развој апликације.

Речи: Стевен Треватхан

Стевен Треватхан је партнер и креативни директор у ДоцкИард-у. Овај чланак је првобитно објављен у броју 269 часописа нет.

Ево видео снимака уз овај водич:

Свиђа вам се ово? Прочитајте ово!

• Како направити апликацију: испробајте ове сјајне водиче
• Бесплатни софтвер за графички дизајн који вам је доступан тренутно!
• Преузмите најбоље бесплатне фонтове