Designtrender, der skiller sig ud

Hvert år som Commencis Design Team foretager vi disse observationer om designtendenser, men for første gang offentliggør vi det online.

Jeg håber at du nyder det.

Vores forskning resulterede i 16 forskellige trends:
1 - Kontekstuelle feedback og mikrointeraktioner
2 - Indholdsfokus
3 - Synlig og tilgængelig navigation
4 - Visual Storytelling
5 - Brugerdefineret illustration
6 - Semi-fladt design
7 - Levende farver og gradient
8 - Fed typografi
9 - Eksperimentel layout
10 - Fysisk interaktion
11 - Blandet virkelighed
12 - Samtalegrænseflader
13 - Visuel hjælp
14 - Betydningen af ​​mikrokopi
15 - Anticipatory Design
16 - Optimeret mellemliggende angst

Lad os dykke ind ..

1- Kontekstuelle feedback og mikrointeraktioner

Kontekstuelle feedbacks og mikrointeraktioner giver brugerne en klar feedback om platformstatusen ved overgangen mellem skærme.

Vi ønsker, at vores brugere skal fokusere på en ting ad gangen. Vi har en historie at fortælle, så vi skulle guide brugeren, som vi fortæller den.

Finans-app-animationsdesign af Gis1on til Norde

Brug af bevægelse er en stadig mere populær tendens til at give feedback om platformstatus og kommunikere resultaterne af brugerhandlinger.

Uber Design Hero af Gene Ross for UENO

2- Indholdsfokus

Produktfotografier, der præsenteres i butikken, er den vigtigste faktor i beslutningen om at købe eller ikke købe.

E-butikker ønsker maksimal opmærksomhed på produkter, så de bruger unikke fotografier med slå typografi.

E-handelsapp af Alex Khoroshok til Thunderrise

Når vi designer til store virksomheder, ønsker de, at alle mulige oplysninger skal vises på 1 skærm. Kunder er ligeglad med klyngen. Vi som designere sætter altid mennesker i centrum. Vi ønsker, at de skal føle sig selvsikre, afslappede og vælge selv (men vi motiverer dem i den rigtige retning :))

Apples websted, skærm serien 3.

3 - Synlig og tilgængelig navigation

Det er vigtigt at have en navigation, der altid er synlig og tilgængelig på skærmen.

Hvis din app har et stort og komplekst indhold, er tabbemenustrukturen god for dig. Gruppering af dit indhold er ikke en let proces, men når du først har gjort et godt stykke arbejde, bliver dine brugere meget mere glade.

Hvis din app kun fokuserer på 1 ting, kan du skjule den lovlige gibberish, indstillinger, afmeldingsknap osv. Under en hamburger-menu.

De fleste kendte apps bruger fanen menu nu, fordi det virkelig er gennemsigtigt for brugerne og også let at navigere.

Google Newsstand Navigationsmønster af Aurélien Salomon ➔

4- Visual Storytelling

Internettet er hurtigt overtaget af hurtig og enkel historiefortælling. Store spillere som Facebook, Instagram og Whatsapp lægger større vægt på øjeblikkelig videodeling for at tilskynde til engagement.

For virkelig at forstå denne tendens skal vi først forstå historien bag den.

Bøger> Film> Sociale medier> Tweets> Fotos> Historier

  • Først dokumenteret historiefortælling startede med bøger.
  • Derefter, når film dukkede op, tilpassede folk sig ekstremt hurtigt, fordi det var lettere og hurtigere.
  • Så kom den sociale medie æra. Folk begyndte at dele deres historier.
  • MSN-messenger viste, hvilken musik du lytter, Facebook viste, hvad du laver eller føler. Så kom Twitter med de meget korte skrevne historier.
  • Med Instagram er era med fotodeling begyndt. Fotos fortæller historier uden selv at miste tid med læsningen.
  • Nu er vi på sidste fase, ”de korte videoer, der forsvinder efter en dag” æra a.k.a historierne.
Sender et snap af Dan Mazig til MetaLab
”Men min app er ikke en social media-app, hvordan kan jeg implementere denne tendens?”

Historier kan bruges på mange måder, enhver ombordstigning kan være en historie; hver fremgang med en funktion i din app kan være en historie (Afhængig af hvordan du vil vise den), kan hver splashskærm være en historie.

Onboarding Animeret af Anastasiia Andriichuk

5 - Brugerdefineret illustration

Hvis du vil have et unikt websted eller en app, som enhver besøgende vil huske; tilpassede ikoner og grafik kan være din primære assistent.

Store virksomheder som Google, Dropbox, Facebook, blandt andet tilpassede denne tendens allerede. De skabte et visuelt illustrationssprog for sig selv, hvilket resulterede smukt. Hver gang de opretter et mini-websted (for kvinderettigheder, mod kræft osv.), Bevarer de dette visuelle sprog, og brugere, der besøger deres websted, forstår ubevidst oprindelsen.

Tag Dropbox for eksempel - Håndtegning sætter brugeren i brug, appellerer til barnet i os alle og får produktet til at virke mere tilgængeligt og velkendt.

Venstre: af Brandon Land Højre: af Jason Perez for DropboxGIF for dynamisk rulle af Sergey Valiukh for tubik

6- Semi Flat Design

Sammenlignet med halvflad design til fladt design er udbytter mere forståelige ved brug af velkendte taktile attributter og skygger.

En anden lektie i designhistorik kommer:

Smarttelefon-app-design startede med skeuomorf design. Hvis du ikke ved, hvad det er, se her. Ekstremt realistiske mobile apps.

Forståelsen af, at dette er en digital skærm, og vi behøver ikke at gøre disse så realistisk, er en ny æra begyndt: Fladt design.

Flade designs havde nogle problemer med læsbarheden. Så Google oprettede materialedesign. Vi bruger stadig flade designelementer, men skygger, og lagpositioner fungerer som virkelige objekter.

Nu er det æraen med Semi Flat Design. Dette er en æra med bevægelse og fokus. Vi ønsker, at vores brugere skal fokusere på det, der er vigtigt. Så vi bruger skygger på genstande, der betyder noget. Dybde gives ved bevægelse og skygge. Skygger er ikke så dramatiske som Materialedesign.

ai shopping kort bevægelse af Wojciech Zieliński

7- Levende farver og gradient

Der vil være flere mærker, der skifter til dristige og lysere farver, da lyse farver har en tendens til at fange vores opmærksomhed og skabe mere positive følelser end mørke eller neutrale farver.

Lyse, pulserende farver er altid sjove, energiske og levende, mens pastelfarver er mere afslappende og diskrete.

Apple-musik er en af ​​pionererne inden for denne tendens. De fusionerede betydningen af ​​de livlige farver og gradueringer med at leve et aktivt liv og være sunde.

Savagely efterforskning af destinationsside af Ghani Pradita til PaperpillarWIP - “Ama Fit” (Fitness & Ernæring App) af Alexa for AwsmdFX-app af KREATIVA Studio

8- Fed typografi

Veludformet typografi fanger brugernes opmærksomhed og formidler meddelelsen med det samme. Dette hjælper designere i hurtig og dynamisk præsentation af information.

Det er her vigtigheden af ​​indholdsforfattere viser sig. Du kan ikke smide rundt på lange ord, hvis du vil tilpasse dig denne tendens. Derfor har du brug for en god indholdsforfatter for at finde bedre ord til dine titler.

Dette har været en tendens i lang tid, men med iPhone X genvundet det popularitet.

Læs applikationen af ​​JPstyle til New Beee

9- Eksperimentel layout

Eksperimentelle layouts er en god måde at tilføje en vis mangfoldighed og oplyse følelsen af ​​kunst.

Anthony Sho Hjemmeside af Zhenya Rynzhuk for Sochnik

Der er i øjeblikket websteder til dette eksperiment med vandrette ruller, brug af web GL, ny måde at overføre animationer osv.

Pablo Llanquin websted (FREEBIE) af Jardson Almeida ️

10- Fysisk interaktion

5 sanser ser, hører, smager, lugter, rører. Vi bruger det meste at se og røre ved og somme tider høre. Vi rører ved telefonskærme. Denne tendens forklarer, hvordan telefoner rører os tilbage. Det kaldes Haptic Feedback.

Denne interaktion startede faktisk med PS4, XBOX, PSP controllere. Når du scorer et mål eller går ned i et bilspil, vibrerer controlleren. Dette giver dig en ekstra fornemmelse af spillet.

Haptisk feedback bruges nu af mange mobile apps, også af App Store.

Haptiske feedbacks kan hjælpe designere til at orientere brugere til at tage handlinger som "køb", "del" eller "følg" noget. De er også nyttige til at henlede brugerens opmærksomhed på et stykke indhold.

Haptiske vejledningsmønstre af Liam Tucker

11- Blandet virkelighed

Med blandet virkelighed kan objekter fra begge verdener smelte sammen med avancerede sensing- og digitaliseringsteknologier, så brugerne kan opleve det virkelige liv og den virtuelle verden sammen.

Vi talte om denne tendens i mange år, men i 2018 er teknologien bag det endelig blevet lovende. Der er nu nogle VR-spillesteder, der vises rundt i byen.

Airbnb AR-kortkoncept af Isil Uzum

12- Samtalegrænseflader

Samtalegrænseflader er faktisk systemer, der ligner følelsen af ​​menneske-til-menneske-interaktion, når de kommunikerer via platforme.

Når vi bruger dette ord, tænker kunder mest på chatbots. Samtale interface dækker mange ting blandt chatbots. Siri er også en samtalegrænseflade. Din app har dog ikke brug for disse for at tilpasse samtale-interface.

Messenger Bots & Augmented Video Call Concept af Isil Uzum

En anden måde at følge denne tendens er at ændre lydtonen i din app. For eksempel: Du har et inputfelt til at bede brugeren om hans / hendes navn. Du kan sige "Navn", men du kan også sige, "Skriv dit navn her". Denne tonetone er normalt en bedre måde at oprette forbindelse til dine brugere.

Invisions tilmeldingsskærm. “Kom helt i gang”

13- Visuel hjælp

Indholdsbaserede apps skal have et stærkt visuelt sprog, og ikke alle brugere kan håndtere dette alene. Så store virksomheder bruger Visual Assistance til at opretholde dette sprog.

Instagram> Filtre

Airbnb> Professionelle fotografer

Godt eksempel: Airbnb (professionel fotografering)Dårligt eksempel: Sahibinden.com (Amatørfotografering)

14- Betydningen af ​​mikrokopi

Mikrokopi er et afslappende øjeblik for en bruger. Brugere går nogle gange tabt, og indholdsforfattere er her for at ordne det :).

En mikrokopi bruges, når en bruger har brug for retning. Vi som designere har brug for at vise den rigtige måde med nogle ord.

Kalender (dato validering) af Emmanuel Torres404 Illustration af Mike Piechota for Netguru

15- Anticipatory Design

Anticipatory design er et stort spring for design af brugeroplevelse. Det minimerer den mentale belastning og beslutnings træthed for brugerne ved at tage informerede beslutninger på deres vegne baseret på deres tidligere valg.

Spotify-appen foreslår sange til mig i henhold til mine tidligere valg.Netflix “Toppicks for Barış” -muligheden fjerner beslutnings trætheden.

16- Optimeret mellemliggende angst

Dette er tiden med hastighed. Brugere har ingen tolerance for at vente overhovedet. Så problemet er, hvordan kan vi vente på, at tjenesterne indlæses, uden at brugerne er klar over, at de venter.

Læssere er virkelig vigtige for denne tendens. Jeg henviser ikke kun til gentagne læssere, nøjagtigt modsat faktisk. Disse gentagne ladere forårsager angst hos brugerne. De ved ikke, hvornår slutter det, og hvilken skærm de vil se til sidst.

Bare rolig, der er løsninger:
- Indlæsning af skeletlayout (personligt kan jeg ikke lide det, men det fungerer stadig)
- Viser kun læsseren i den komponent, der har indlæsningsproblem
- Oprettelse af en interessant animation, hvor brugeren kan se
- Forklar nøjagtigt, hvad du indlæser, og vis fremskridt

Venstre: Forhåndsindlæser og træk ned for at opdatere animation af Jakub Antalík til Frame.io / Højre: iFly A380 af Airbus ombordværende UI-efterforskning af Gleb Kuznetsov

Forfattere note:

Du kan ikke bruge enhver trend i din app eller dit websted. Du er nødt til at lære, hvem dine brugere er, oprette personer og handle i henhold til dem. Brug nogle af trends.

Overdriv ikke venligst :)

P.s: Denne artikel er et resultat af Commencis Design Teams 'forskning. (Jeg fik mange hjælp fra mit dejlige team ).