Как да анализираме използваемостта от движение

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

  1. Статично - тренирахте мозъка си от години, за да видите дизайна като нещо, което не се движи. В тази статия ще ви помогна да тренирате мозъка си да вижда дизайна, както се случва след време.
  2. Време - наистина добри взаимодействия, базирани на движение, се случват бързо. Те са проектирани да бъдат идеално безпроблемни. Трудно е да забележите петте едновременно действащи UX в принципите на движение, които се играят за половин секунда.
  3. Речник - липсва ви основният речник, който ви позволява да разберете какво виждате. Можете да преодолеете проблем един и два, но освен ако не разполагате с речника, то напълно нямате късмет.

За щастие за теб, аз издълбах 3 месеца от живота си и създадох осезаемия Създаване на използваемост с движение: UX в движение манифест, който събра почти 120 000 гледания през първите 4 седмици от излизането му.

В тази статия ще поставим още няколко парчета заедно. Но първо кратко отклонение.

Намирам хората за някак си смущаващи животни. Обичам да гледам неписани улични двубои в YouTube, за да подкрепя моите предубеждения. След няколко години това започнах да забелязвам неща, които се случват, за да имат огромна промяна в битката на улицата. Възможностите за деескалация са една. Да гледаш шестицата си (или гърба си), да си друг. Размерът и уменията не винаги диктуват резултата. Късметът прави голяма разлика (колко страшно е това?). Такива неща.

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

Нека да анализираме този вкусен малък самород, събран от господин Чарлз Патерсън.

Кредит: Чарлз Патерсън за InVision

В останалата част от тази статия ще ви насоча вниманието към пет начина, по които използваемостта се създава чрез движение, чрез използването на следните UX в принципите на движение: Parallax, Masking, Offset & Delay, Overlay и Easing.

Навярно има повече принципи в играта, но засега ще се съсредоточим върху тези пет.

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

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

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

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

Сега можете да започнете да усещате какво прави движението на ума ви.

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

С твърдата ми, но нежна ръка, скъпи читателю, би трябвало да можете да вземете това далеч по-бързо от мен.

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

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

Това може да бъде така.

Вторият недостатък (времето) е сравнително лесен за преодоляване. Тъй като движението се появява по-малко от секунда, ми се струва полезно понякога (макар и не винаги) да го забавя. Просто записвам gif на моя работен плот, зареждам го в нещо като After Effects или Quicktime и го преглеждам кадър по кадър. Това може да има двойния ефект да видите какво се случва и да си върнете част от здравия разум.

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

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

Един от първите начини да забележа, че използваемостта се създава чрез движение, е паралакса вътре в картите. Принципът на Parallax има ефект на когнитивно „изтласкване“ на избраните елементи, докато когнитивно „издърпване“ на други избрани елементи. Използването на Parallax е изключително ефективно в този пример при определяне на времевата йерархия.

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

Третият начин, по който забелязвам движение, създаващо използваемост, е чрез принципите на UX in Motion на Offset & Delay и Overlay. Както вече споменах, възможностите за поддържане на използваемостта често могат да се припокриват и да се използват едновременно и синергично. Това е такъв случай. Полезността на Offset & Delay е да дефинира обектната връзка във времето. Подходът „надграждане“ казва на ума ни, че новите обекти са отделни, засилвайки визуалното. Използването на Overlay дава на потребителя усещане за пространствена връзка в рамките на сцената и „подреждане“ в парадокса на визуалната равнина.

Четвъртият (или това е петият?) Начин да забележа движение, създаващо използваемост, е чрез изпълнение на очакванията. Използвайки облекчаване, обектите преминават по повече или по-малко безпроблемно. Забележете „лекотата на влизане“ и как тя има финия ефект на „забавяне“ на взаимодействието. Човек винаги трябва да внимава за използването на лекота. Easing винаги трябва да се чувства чист, свеж и хаплив. Доброто правило на палеца е „бързо, но не прекалено бързо.“ Ако след като наблюдавате взаимодействието хиляда пъти, започне да се усеща бавна коса, бих се обръснал допълнително.

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

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