Different советува: Топ 10 трендови кај корисничкиот интерфејс за 2017 година

Светот на веб и UI дизајнот се движи со толку брзо темпо поради што е многу тешко да се остане во тек со актуелните трендови. За да бидете во тек Ви ги претставуваме трендовите кои се очекува да бидат актуелни во 2017 година:

slika-1

  1. Тридимензионално интерактивно видео (Immersive, full-screen video)

Старата поговорка која вели дека една слика вреди илјада зборови важи и денес, а во светот на UI дизајн, односно дизајн на кориснички интерфејс, сликите сѐ уште се вистинскиот начин за да се привлече вниманието на корисникот. Видот е најсилното сетило од сите човечки сетила и една слика може на корисникот да му ја пренесе пораката на поефикасен начин.

Сликите долго време беа заштитен знак на корисничкиот интерфејс (UI) и на веб дизајнот и нивниот успех полека го отвори патот на својот природен наследник – видеото. Ние сме сведоци дека видеото сѐ повеќе се користи во дигиталниот дизајн. Додека традиционалната фотографија е статична, видеото е динамично. Тоа е одличен начин да се фати окото на корисникот, да се привлече неговиот интерес и да се користи како средство за визуелно пренесување на приказни.

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

slika-2

Зошто да ги користите?

Видеото (како и големите, убави фотографии) е моќен медиум кој треба да се искористи за да се  привлече и задржи вниманието на корисниците. Двата медиуми имаат разновидна примена и фукционираат особено добро како позадински уреди дополнети со типографија.

  1. Вебсајтови со целата содржина претставена на една страница (Long form content and scrolling)
    slika-3

Скролањето во никој случај не е ново корисничко искуство, туку основна алатка за пребарување низ веб страните на Интернет. Во иднина сѐ повеќе ќе гледаме имплементација на содржина на само една долга страница на десктоп уреди и на уреди со големи екрани.

Како што на корисниците во текот на изминатите неколку години им стана нормално да скролаат за да најдат содржини на уреди со помали екрани, така повеќето дизајнери почнаа да имплементираат long-form содржина и лизгачки интерфејси на големи екрани.

Ова на корисниците им овозможува многу брзо прегледување на голем обем на содржина со едно единствено течно движење, без да бидат прекинати при скролањето. Тоа е механизам кој работи добро на сите уреди и медиуми кои пренесуваат содржина: долги текстови, вести, интерактивни искуства…

slika-4

Зошто да ги користите?

Long-scroll е одличен механизам кога сакаме да пренесеме наративна или структурирана содржина на линеарен начин која ќе може да го води корисникот. Тоа е разновидна механизација одлична за создавање на тридимензионална интерактивна long-form содржина, која им овозможува на корисниците да ја консумираат течно без оглед на уредот што го користат.

  1. Градиентни и живи бои (Gradients and vivid colors)

slika-5

2013 година донесе рамен дизајн (flat design), кој потоа почна да се шири низ дизајнерската заедница, менувајќи ги палетите на бои и отстранувајќи ги сите непотребни елементи. Иако не е без недостатоци, рамниот дизајн (flat design) е практична филозофија и ден-денес.

Целта на рамниот дизајн (flat design) беше поедноставување на корисничкиот интерфејс до неговите основни, функционални елементи за да се постигне што е можно повеќе рафинирано и ефикасно корисничко искуство. Иако функционален и добар во своите намери, рамниот дизајн (flat design) брзо предизвика Интернетот да стане место каде што има многу сличности и повторувања. Брендови и дизајнери од секаде, следејќи ги основите упатства, веднаш почнаа истиот да го користат и сето тоа доведе до креирање на содржина која е многу слична и неперсонализирана.

Во 2016 година ограничувањата при користењето на рамниот дизајн (flat design) почнаа да се олабавуваат и сѐ повеќе брендови и дизајнери почнаа повторно да се фокусираат на персонализирани содржини, експериментирајќи со палета на живи бои и градиенти наместо едноставни досадни тонови. Градиентите и живите бои исто така почнаа да се имплементираат во многу повеќе од само традиционалните UI и веб дизајн, како што покажа ребрендирањето на Instagram. Без разлика дали тие се по вашиот вкус или не, очекувајте да видите пораст во употребата на посмели палети на бои и градиенти, бидејќи светот сѐ повеќе и повеќе ќе бара персонализација!

slika-6

Зошто да ги користите?

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

 4. Илустрации (Illustrations)

slika-7

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

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

slika-8

Зошто да ги користите?

Илустрациите може да придонесат за персонализација и автентичност, две важни компоненти за креирање значајни врски со корисниците.

5. Излегување од шемата (Breaking the grid)

slika-9

Шемите одамна се омилени кај дизајнерите затоа што обезбедуваат основа за дизајн која дава конзистентност, рамнотежа, ритам и ред. Тоа е важна алатка за UI дизајн, бидејќи обезбедува одредено ниво на препознатливост за корисниците, овозможувајќи им интуитивно да се движат низ интернет-страницата или апликацијата.

Колку и да се важни основните правила и шеми, исто толку може да бидат рестриктивни и крути, ограничувајќи ги креативните опции за дизајнерите. Во обид да се создадат дигитални искуства поразлични од оние традиционалните, многу веб и UI дизајнери експериментираат со непочитување на правилата.

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

slika-10

Зошто да ги користите?

Разбивањето на монотонијата овозможува повеќе креативни опции. Флексибилноста која ја дава може да создаде чуство на слобода која не би се постигнала доколку се држиме до некоја шема. Сепак, мора да бидете внимателни кога го имплементирате тоа. Најпрвин и најважно е сите интерфејси да бидат погодни за корисниците и при дизајнирање секогаш да го имате токму тој момент во предвид, зашто инаку ќе имате многу збунети корисници. Исто така, треба да имате предвид како тоа функционира на мали екрани.

  1. Parallax

slika-11

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

slika-12

Зошто да го користите?

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

  1. Повеќе карти (More cards)

slika-13

Картите не се нов тренд, но тие се функционалeн кориснички интерфејс кој постојано добива на значење во веб дизајнирањето по постигнатиот успех во мобилниот UI дизајн и нивното вклучување во Google Material Design.

Според Google, во 2015 година мобилните уреди ги надминаа десктоп уредите како најпопуларна платформа за прелистување на Интернет. Поради тоа сѐ повеќе дизајнери ја бришат линијата меѓу мобилните и десктоп интерфејсите со цел да создадат поедноставно корисничко искуство.

Картите работат и на уреди со помал екран и на уреди со поголеми екрани. Тие се одличен начин за организација и прикажување на големи количини податоци на екранот одеднаш, овозможувајќи им на корисниците веднаш да го имаат на увид она што е на располагање и да направат избор што сакаат да видат. Facebook, Twitter, Netflix, Pinterest се моќни дигитални платформи кои користат карти за оваа цел.

slika14

Зошто да ги користите?

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

  1. Микро-интеракции (Micro-interactions)

slika-15

Микроинтеракциите, обично во форма на мали анимации на екранот, сѐ повеќе играат витална улога во UI и UX дизајн денес, особено на мобилен телефон и уреди со помал екран.

Од гледна точка на корисничкото искуство микроинтеракциите не се само мали, забавни анимации или транзиции туку се форми на визуелен фидбек за корисниците и нивните акции. Микроинтеракции им овозможуваат на корисниците да знаат што се случува, што се случило и што ќе се случи следно додека тие комуницираат со UI.

Како пример ќе го земеме копчето „ми се допаѓа“ (like) на Фејсбук. Кога корисникот ќе кликне на копчето кај нешто што му се допаѓа, истата се зголемува и посинува пред да се врати во оригиналната големина и тоа се случува во една флуидна анимација информирајќи го корисникот дека постапката е завршена.

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

slika-16

Зошто да ги користите?

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

  1. Типографија (Typography)

slika-17

Со постојаното зголемување на спектарот на фонтови за интернет-страници (Google фонтови, Typekit) кои се нудат бесплатно или пак се исплатливи за користење, очекувајте да гледате повеќе брендови  кои ќе користат голема, храбра и убава типографија на местото на системските и трендовските фонтови.

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

slika-18

Зошто да ги користите?

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

  1. Експериментална навигација (Experimental Navs)

slika-19

Навигациите и менијата долго време беа спорна тема за дизајнерите. Со исчезнувањето на границите меѓу мобилните и десктоп уредите како и поголемата употреба на „хамбургер“ менијата на кориснички интерфејс за поголеми екрани, има сѐ повеќе креативни можности за дизајнирање менија и навигации.

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

slika-20

Зошто да ги користите?

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

Не сите дизајнери се сложуваат со употребата на „хамбургери“ за дектоп апликации. Тоа е тема сама по себе доволна за некоја друга статија, но во 2017 година и со години потоа ќе има повеќе експериментирање со навигациските опции и менија, од кои некои ќе бидат подобри, а некои полоши!

Заклучок

Различни трендови се појавуваат и исчезнуваат, но некои остануваат трајни. Не сите трендови или предвидувања за кои се дискутира тука може да бидат релевантни за проектот на којшто работите. На дизајнерот останува што и како ќе имплементира.

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

Се надеваме дека од овaa статија научивте малку за тоа како работите напредуваа во текот на 2016 година и уште поважно, како овие промени ќе влијаат на дигиталниот дизајн во 2017 година и понатаму. Ако сте во потрага по инспирација во годината што следува, можете да ни пишете на hello@different.com.mk.

SHARE