Cross-Platform Design Wrapped Del 3: UI Polish og Interaction Design

Den menneskelige krop har eksisteret længe før noget af det, vi ser omkring os i dag, var muligt og har skabt indviklede systemer, der driver den måde, vi interagerer med verden på, og som nu er fokuspunktet for al it-forskning, hvad enten det er biotek eller design. Disse systemer styrer vores oplevelser i livet. Vores sanser er vores kompas, der skelner det fornøjelige fra det kvalmende, trøstende fra overvældende.

Efterhånden som strømmen af indgående signaler bliver mere rigelig og mere af vores liv kredser om digitale enheder, er rollen som UI- og UX-designere blevet vigtigere end nogensinde. I denne tid arbejder vores sanser på fuld tid uden pauser, og det er op til designere at sammensætte oplevelser, der tilføjer værdi i stedet for at forringe dem.

Finjustering af de mindste detaljer er det, der skaber den oplevelse, vi stræber efter: intuitiv, dejlig og strømlinet.

Men for at sikre, at hvert skridt, du tager, tages i den rigtige retning, har du brug for en dybere forståelse, ikke kun af det mål, du sigter efter at opnå, men også de værktøjer og koncepter, der kan bringe dig derhen.

I denne del vil jeg udforske "UI Polish and Interaction Design" - processen med at forfine og forbedre visuelle og interaktive aspekter af en brugergrænseflade for at skabe dejlige oplevelser. Lad os tage et kig på de ting, der vil hjælpe dig med at opbygge oplevelser, der giver genlyd på et dybere niveau hos dine brugere.

Hvordan apps opfattes

Det fantastiske ved UI og UX er, at enhver designer også er en bruger, og følelsen af at nyde strømmen af en grænseflade er fantastisk uanset dit arbejde. Der er ingen fejl! Den eneste forskel er, mens det for brugerne stopper ved glæde, for os fortsætter arbejdet.

Lad os begynde at blive mere specifikke. Glæde i UI-konteksten refererer til de positive følelser, som en bruger oplever, når de interagerer med et produkt, en grænseflade eller en tjeneste – der går ud over blot at opfylde et funktionelt behov. Det er et nøgleaspekt af brugeroplevelsen, fordi det gør oplevelsen mindeværdig, hvilket fremmer brugertilfredshed og loyalitet. Det gør din app helt speciel.

Dette er det næste niveau efter at have designet et produkts arkitektur, skelettet, — og dette trin handler om at tilføje musklerne, huden og få produktet til at komme til live.

For at opnå dette har designere brug for en dyb forståelse af, hvordan folk opfatter og oplever et produkt. Lad os vende os til Don Normans teori om følelsesmæssigt design . Han forklarer, at brugere interagerer med produkter på tre niveauer : visceral, som er den umiddelbare følelsesmæssige reaktion på, hvordan et produkt ser ud og føles, adfærdsmæssig, som dækker over, hvor godt produktet fungerer, og hvor behageligt det er at bruge, og reflekterende, hvilket er langsigtede forbindelsesbrugere udvikler sig, når de reflekterer over deres oplevelse over tid.

Normans teori forklarer, at disse niveauer - viscerale (første indtryk) , adfærdsmæssige (hvordan det virker) og reflekterende (langsigtet følelsesmæssig påvirkning) - ikke er lineære; de interagerer konstant. Et produkts visuelle tiltrækningskraft (visceral) fortsætter med at påvirke brugerne, mens de engagerer sig i det funktionelt (adfærdsmæssigt), og hver handling er indbygget i, hvordan brugerne føler om det over tid (reflekterende).

For eksempel vil en elegant telefons grænseflade med jævn navigation sandsynligvis fremkalde øjeblikkelig spænding, men det er kombinationen af brugervenlighed og langsigtet tilfredshed, der opbygger varig loyalitet. I design er fokus på, hvordan disse niveauer overlapper hinanden, nøglen til at skabe en brugeroplevelse, man vil huske.

Dette er grunden til, at glæde sidder i skæringspunktet mellem disse niveauer i rammen. Det er ikke bundet til kun ét aspekt af oplevelsen. Det er synergien mellem, hvordan et produkt ser ud, hvordan det fungerer, og hvordan det får brugerne til at føle sig over tid, der skaber en oplevelse, der er værd at huske.

Hvad gør apps dejlige

Disse aspekter af design er dybt bundet til niveauerne af perception, og i processen med at polere brugergrænsefladen bliver denne forbindelse meget mere indlysende. Brugervenlighed spiller en direkte rolle i at skabe adfærdsmæssig glæde - den følelse får brugerne, når alt bare fungerer glat.

Tag for eksempel oplevelsen af at gemme et billede i Pinterest-opdagelsesfeedet.

Når en bruger vælger et billede, forstørres det problemfrit, hvilket giver mulighed for en detaljeret visning uden at forlade feedet, hvilket øjeblikkeligt forbedrer det visuelle engagement. Derefter afslører et langt tryk på billedet hurtige handlinger som at gemme billedet i en samling eller dele det med andre.

Alle væsentlige handlinger er lige ved hånden, og tilføjer et legende touch til funktionaliteten. Dette design forenkler ikke kun processen med at kurere personlige samlinger, men beriger også den generelle brugertilfredshed.

Oven i det kommer æstetisk appel og følelser . Disse tilføjer det viscerale lag , den umiddelbare, følelsesmæssige reaktion på produktets udseende og følelse. En ren, veldesignet grænseflade med subtile animationer eller gennemtænkte farvevalg inviterer brugerne ind, hvilket får dem til at føle sig godt tilpas lige fra starten. Det er "wow"-faktoren, der fanger opmærksomheden, men den gør mere end bare at se godt ud – den trækker brugerne ind i oplevelsen, styrker brugervenligheden og gør interaktioner behagelige.

I Pinterests eksempel tilføjer appen ud over den grundlæggende anvendelighed lag af polering, der gør oplevelsen meget mere 'hel'. Når du f.eks. trykker længe på et billede og vælger handlinger som 'Synes godt om', 'Gem' eller 'Del', vil brugere muligvis bemærke subtil haptisk feedback.

Desuden har Pinterest visse bevægelser, som mange apps bruger nu, såsom at vende tilbage til opdagelsesfeedet ved at stryge ned eller navigere elementer ved at stryge til venstre og højre. Disse detaljer kan virke mindre, men de bidrager væsentligt til den overordnede glæde og tilfredshed ved oplevelsen.

Men den virkelige magi sker i midten - når brugervenlighed og æstetik arbejder sammen og skaber en samlet oplevelse, der giver genlyd på flere niveauer. Det er, når brugere flytter fra "Dette virker" til "Jeg elsker det!" Det handler ikke om bare at levere produktet længere.

Hvert enkelt element, hvert implementeret mønster, bidrager til, hvordan din app vil blive opfattet. En interaktion, som at bestille en service, kan kun berøre den adfærdsmæssige oplevelse eller både adfærdsmæssig og følelsesmæssig. Sammenlign den gammeldags måde at bestille en taxa på via telefonen, som ofte indebar ventetid, ikke altid behagelige samtaler med fremmede og uklare ventetider, med den moderne, strømlinede proces i Uber-appen.

Det forenkler ikke kun bestillingsprocessen, men forbedrer også brugeroplevelsen ved at give opdateringer i realtid om chaufførens placering, en klar visning af billetpriser og glatte overgange mellem forskellige stadier af køreprocessen. Sikke et skift, hva'?

Opdelingen mellem æstetik og funktion i UI er dog faktisk mere en formalitet. Enhver grænseflade kan være dejlig, og ethvert 'æstetisk' element kan blive 'funktionelt'. Tag Apples Dynamic Island - det berygtede sorte hak på tidligere iPhones. I senere modeller udviklede det sig fra en ren designmæssig nødvendighed til en funktionel og stilfuld funktion. Til at begynde med var hakket et kompromis for at huse det frontvendte kamera og sensorer og samtidig maksimere skærmpladsen.

Derefter forvandlede Apple det over tid til en afgørende del af Face ID-teknologien, der tilbyder en hurtig og sikker godkendelsesmetode, som brugerne hurtigt omfavnede.

Her er et par eksempler på, hvordan rene 'utilitaristiske' elementer kan hæves med strejf af glæde:

En designers sande færdighed til at lave lækre apps ligger i at forstå , hvornår, hvordan og hvorfor man skal tilføre følelsesmæssige elementer. Dette afhænger af brugssagen, konteksten og tilgangen - de tre grundlæggende søjler, der styrer enhver designbeslutning. Det handler om at skelne, hvornår man skal prioritere brugervenlighed, hvornår man skal introducere følelsesmæssige lag, og hvornår man problemfrit skal integrere begge dele for at skabe oplevelser, der er dybt forbundet med brugerne.

Lad os se det i øjnene, selv den mest dejlige animation kan blive en kilde til frustration, hvis du spændt ser den, mens en betaling på $1000 ikke bliver behandlet.

Eksempel 1. iMessage Keywords Animation

Når du sender bestemte søgeord som "Tillykke" eller "Tillykke med fødselsdagen" i iMessage, udløser teksten en fuldskærmsanimation, såsom balloner eller konfetti, hvilket tilføjer en sjov og engagerende visuel fejring til beskeden.

Eksempel 2. Brandede profilbilleder i Google Docs/Sheets

Google Docs og Sheets viser farverige profilbilleder med mærkevarer, der viser, hvem der redigerer dokumentet i realtid. Dette gør ikke kun samarbejdet mere personligt, men hjælper også brugerne med hurtigt at identificere deres medredaktører.

Eksempel 3. iOS Memoji efter indtastningsfeltet for adgangskode

Når du indtaster en adgangskode på en iOS-enhed, springer et Memoji-tegn til live i adgangskodefeltet, der afspejler dine ansigtsudtryk. Hvis du indtaster det forkert, kan det rynke panden eller trække på skuldrene som svar. Hvis der er en forsinkelse i at skrive, kan Memoji endda gabe og tilføje et pudsigt touch til denne meget verdslige opgave. Det tilfører en smule personlighed og humor i din hverdag.

Eksempel 4. Google Dinosaur, når internettet er slukket

Google Chrome har et skjult dinosaurspil, der vises, når der ikke er nogen internetforbindelse. Det er et simpelt, vanedannende spil, men vigtigst af alt – en fantastisk måde at vende kortvarig frustration til lidt sjov.

Eksempel 5. Telegram sletning af en besked

I Telegram, når du sletter en besked, forsvinder den med en pæn animation, der visuelt makulerer beskeden som papir, før den forsvinder, hvilket giver brugerne en følelse af kontrol over deres immaterielle digitale samtaler.

Få mig ikke til at tænke: Designmønstre og komponenter

Hjertet i en poleret brugergrænseflade er mønstre og komponenter. Designmønstre er etablerede løsninger på almindelige grænsefladeudfordringer. De giver en velkendt struktur, som brugerne kan interagere med. Disse består igen af komponenter - grænsefladens byggesten, såsom knapper, inputfelter og modaler.

Sammen skaber mønstre og komponenter en problemfri brugeroplevelse, hvor brugerne intuitivt forstår, hvordan de navigerer i appen.

For at løfte funktionelle elementer (såsom menuer, formularer eller knapper) kan vi forbedre dem med æstetiske og følelsesmæssige teknikker. Du kan tilføje subtile animationer, engagere mikro-interaktioner og tankevækkende brug af farver og typografi, der går ud over bare funktion. Alt dette bliver dit designsystem - en samling af genanvendelige komponenter og mønstre styret af klare regler, der sikrer ensartethed på tværs af appen.

Foruddefinerede animationer, farveskemaer og interaktionsmønstre fremkalder alle specifikke følelser, så designsystemet bliver et kraftfuldt værktøj til at skabe sammenhængende og engagerende grænseflader. Denne tilgang giver designere mulighed for konsekvent at anvende disse forbedringer uden at starte fra bunden, hvilket styrker brandets identitet og opbygger brugertillid.

Eksempel 1. Duolingo's Playful Widget

I Duolingo, når du besvarer et spørgsmål forkert, viser appen ikke bare en almindelig fejlmeddelelse. I stedet reagerer den med en venlig animation og opmuntrende ord fra sin maskot, Duo the Owl. Denne tilgang forvandler et potentielt frustrationsmoment til en positiv læringsoplevelse, holder brugerne motiverede og reducerer negative følelser forbundet med at begå fejl. Virkelig taktik, men animeret.

Eksempel 2. Netflix's Card Animation

Netflix' show card-animation eksemplificerer problemfrit UI-design, hvilket øger brugerengagementet på tværs af enheder. Når en bruger vælger et show, udvides kortet til en trailer i fuld skærm , der giver en filmisk forhåndsvisning, der fanger opmærksomheden. Denne glidende overgang, som tilføjer et strejf af glæde, er konsekvent, også på deres tv-app, hvor den samme animation fører til en automatisk afspillende trailer.

Denne forenede tilgang på tværs af platforme sikrer en sammenhængende brugeroplevelse, reducerer kognitiv belastning og forenkler navigation.

Eksempel 3. Slacks hurtige kommandoer

Glæde og følelsesmæssigt engagement kan også stamme fra produktfunktioner, ikke kun UI-design. Slacks hurtige kommandoer eksemplificerer dette ved at forbedre produktiviteten og strømline interaktioner i appen. Quick Commands er designet med fokus på produktivitet og giver brugerne mulighed for at spare betydelig tid ved blot at skrive den nødvendige kommando. For eksempel kan brugere opdatere deres status med /status eller dæmpe notifikationer med /mute direkte i beskedindtastningsfeltet.

Dette accelererer ikke kun arbejdsgangen, men minimerer også afbrydelser, så brugerne kan koncentrere sig om deres opgaver. Den intuitive og tidsbesparende karakter af Quick Commands er netop grunden til, at brugerne elsker dem så meget. Min personlige favorit er /shrug, som tilføjer ¯\(ツ)/¯ til slutningen af din besked, og det er så sjovt!

Interaktionsdesignets rolle

Mens designmønstre og komponenter er byggestenene i en poleret brugergrænseflade, bringer interaktionsdesign alt til live. Interaktionsdesign handler om, hvordan brugere interagerer med disse komponenter - hvordan de klikker, trykker, stryger og navigerer gennem appen.

For eksempel er en menu et almindeligt navigations-UI-element, men det er interaktionsdesignet, der bestemmer, hvordan det føles. Glider menuen glat ind? Reagerer den øjeblikkeligt på en swipe-bevægelse? Haptisk berøring efter afslutning? Har den subtile animationer, der gør overgangen behagelig?

Et godt eksempel på effektivt interaktionsdesign er ' Genie'-effekten i macOS , der bruges til at minimere Finder-vinduer. Denne animation overfører jævnt vinduet til docken, der ligner en ånds lampebevægelse. Det er visuelt tiltalende og funktionelt informativt og viser brugerne præcis, hvor vinduet går, hvilket hjælper med at bevare rumlig orientering.

Interaktionsdesign og designsystemet fungerer i harmoni. I interaktionsdesign sikrer ensartet adfærd for alle komponenter, såsom hvordan knapper reagerer, når der klikkes på dem, eller hvordan formularer validerer input, at appen opfører sig forudsigeligt på tværs af hver skærm. Denne konsistens er det, der bygger brugernes tillid – hvilket betyder, at brugerne føler sig trygge ved at vide, hvordan appen vil reagere, hvilket reducerer friktion og forbedrer den samlede oplevelse.

Når interaktionsdesign er lavet rigtigt, fungerer det sammen med mønstre og komponenter for at skabe en sammenhængende oplevelse, hvor hvert tryk, klik og swipe føles intuitivt. Dette er noget, der virkelig bringer grænseflader til live.

I mine andre artikler har jeg understreget vigtigheden af at opbygge et team med dine udviklere. Designere er nødt til at samarbejde med udviklere, fordi takket være dem kan disse animationer og interaktioner faktisk implementeres og implementeres effektivt. At give teamet detaljerede, klare specifikationer for animationer - inklusive timing, lempelse og adfærd - er nøglen. På denne måde bliver den tilsigtede designvision præcist oversat til det endelige produkt, hvilket gør det poleret, professionelt og følelsesmæssigt resonant for brugeren.

At gå ud over det sædvanlige

Nydelse i livet rækker langt ud over at udføre de tekniske handlinger, der kan føre dig derhen. Det er summen af de mindste detaljer, der skaber en hel, tilfredsstillende oplevelse. Designet er det samme. En funktionel grænseflade er et robust fundament – men det er intetsigende. At forstå, hvordan brugere ser og bruger din app, hjælper med at skabe oplevelser, der er nemme at bruge og meningsfulde. Jeg tror, at Don Normans følelsesmæssige designteori er en god guide til de indviklede forbindelser mellem alle aspekter, der gør godt design – dejligt.

Følelsesmæssig forbindelse, designmønstre, konsistens og interaktionsdesign er de ting, der gør det levende. Derudover er det en stærk påmindelse om, at i produktdesign betyder rejsen lige så meget som destinationen. Gennem subtile animationer, engagerende mikrointeraktioner og gennemtænkte visuelle detaljer kan du forvandle rutineinteraktioner til fornøjelige øjeblikke for millioner af brugere. Det er magien ved design.