Дизајн на више платформи, део 3: Пољски кориснички интерфејс и дизајн интеракције

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

Како ток долазних сигнала постаје све обилнији и све више наших живота се врти око дигиталних уређаја, улога дизајнера корисничког интерфејса и УКС-а постала је важнија него икад. У данашње време, наша чула раде пуно радно време без пауза, а на дизајнерима је да одаберу искуства која додају вредност, а не умањују их.

Фино подешавање најситнијих детаља је оно што ствара искуство којем тежимо: интуитивно, дивно и модерно.

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

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

Како се апликације перципирају

Одлична ствар у вези са корисничким интерфејсом и УКС-ом је то што је сваки дизајнер такође корисник, а осећај уживања у протоку интерфејса је одличан без обзира на ваше занимање. Нема грешке! Једина разлика је у томе што за кориснике то стаје на одушевљење, за нас се посао наставља.

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

Ово је следећи ниво након дизајнирања архитектуре производа, скелета, — а овај корак се односи на додавање мишића, коже и оживљавање производа.

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

Норманова теорија објашњава да ови нивои — висцерални (први утисци) , бихејвиорални (како функционише) и рефлексивни (дугорочни емоционални утицај) — нису линеарни; они су у сталној интеракцији. Визуелна привлачност производа (висцерална) наставља да утиче на кориснике док се са њим функционално (понашање) баве и свака радња утиче на то како се корисници осећају о томе током времена (рефлективно).

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

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

Шта чини апликације дивним

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

Узмимо, на пример, искуство чувања фотографије у Пинтерест открићу.

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

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

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

У Пинтерест-овом примеру, поред основне употребљивости, апликација додаје слојеве сјаја који искуство чине много „целовитим“. На пример, када дуго притискају фотографију и бирају радње као што су „Свиђа ми се“, „Сачувај“ или „Дели“, корисници могу приметити суптилне повратне информације.

Штавише, Пинтерест садржи одређене покрете које многе апликације сада користе, као што је враћање на феед открића превлачењем надоле или навигација по ставцима превлачењем лево и десно. Ови детаљи могу изгледати мањи, али значајно доприносе општем ужитку и задовољству доживљаја.

Али права магија се дешава у средини — када употребљивост и естетика раде заједно, стварајући јединствено искуство које одјекује на више нивоа. Тада корисници прелазе са „Ово ради“ на „Волим ово!“ Више се не ради само о испоруци производа.

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

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

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

Затим, временом, Аппле га је трансформисао у кључни део Фаце ИД технологије, нудећи брз и сигуран метод аутентификације који су корисници брзо прихватили.

Ево неколико примера како се чисти 'утилитарни' елементи могу подићи уз додире одушевљења:

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

Суочимо се с тим, чак и најдивнија анимација може постати извор фрустрације ако је са зебњом гледате док уплата од 1000 долара не буде обрађена.

Пример 1. иМессаге анимација кључних речи

Када пошаљете одређене кључне речи као што су „Честитамо“ или „Срећан рођендан“ у иМессаге-у, текст покреће анимацију преко целог екрана, као што су балони или конфете, додајући поруци забавно и привлачно визуелно славље.

Пример 2. Брендиране слике профила у Гоогле документима/табелама

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

Пример 3. иОС Мемоји који прате поље за унос лозинке

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

Пример 4. Гугл диносаурус када је Интернет искључен

Гоогле Цхроме садржи скривену игру диносауруса која се појављује када нема интернет везе. То је једноставна игра која изазива зависност, али што је најважније – одличан начин да тренутну фрустрацију претворите у забаву.

Пример 5. Телеграм брисање поруке

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

Не терајте ме да размишљам: обрасци и компоненте дизајна

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

Заједно, обрасци и компоненте стварају беспрекорно корисничко искуство где корисници интуитивно разумеју како да се крећу апликацијом.

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

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

Пример 1. Дуолингов разиграни виџет

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

Пример 2. Нетфликова анимација картице

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

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

Пример 3. Слацкове брзе команде

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

Ово не само да убрзава ток посла, већ и минимизира прекиде, омогућавајући корисницима да се концентришу на своје задатке. Интуитивна природа брзих команди која штеди време је управо разлог зашто их корисници толико воле. Мој лични фаворит је /слегање раменима, које додаје ¯\(ツ)/¯ на крај ваше поруке, и тако је забавно!

Улога дизајна интеракције

Док су дизајнерски обрасци и компоненте саставни блокови углађеног корисничког интерфејса, дизајн интеракције све оживљава. Дизајн интеракције се односи на то како корисници ступају у контакт са тим компонентама – како кликну, додирну, превлаче и крећу се кроз апликацију.

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

Одличан пример ефикасног дизајна интеракције је ефекат „Гени“ у мацОС-у , који се користи за минимизирање прозора Финдер-а. Ова анимација глатко прелази прозор у док, подсећајући на кретање лампе духа. Визуелно је привлачан и функционално информативан и показује корисницима тачно куда иде прозор, што помаже у одржавању просторне оријентације.

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

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

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

Ићи изнад обичног

Уживање у животу далеко превазилази обављање техничких радњи које вас тамо могу довести. То је збир најситнијих детаља који стварају целину, испуњено искуство. Дизајн је исти. Функционални интерфејс је чврста основа – али је благ. Разумевање начина на који корисници виде и користе вашу апликацију помаже у стварању искустава која су лака за коришћење и смислена. Мислим да је Дон Норманова теорија емоционалног дизајна одличан водич за замршене везе између свих аспеката који чине добар дизајн – дивним.

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