Cross-Platform Design Wraped Deel 3: UI Pools en Interaksie Ontwerp

Die menslike liggaam het bestaan lank voor enigiets wat ons vandag rondom ons sien moontlik was en het ingewikkelde stelsels geskep wat dryf hoe ons met die wêreld omgaan, en is nou die fokuspunt van alle IT-navorsing, of dit nou biotegnologie of ontwerp is. Hierdie sisteme rig ons ervarings in die lewe. Ons sintuie is ons kompasse, wat die genotvolle van die sieklike onderskei, vertroostend van oorweldigend.

Namate die vloei van inkomende seine meer oorvloedig word en meer van ons lewens om digitale toestelle draai, het die rol van UI- en UX-ontwerpers belangriker as ooit geword. Deesdae werk ons sintuie voltyds sonder onderbrekings, en dit is ontwerpers se taak om ervarings saam te stel wat waarde toevoeg eerder as om afbreuk daaraan te doen.

Om die kleinste besonderhede fyn in te stel is wat die ervaring skep waarna ons streef: intuïtief, heerlik en vaartbelyn.

Maar om te verseker dat elke stap wat jy neem in die regte rigting gemaak word, moet jy 'n dieper begrip hê van nie net die doelwit wat jy wil bereik nie, maar ook die gereedskap en konsepte wat jou daar kan bring.

In hierdie deel sal ek "UI Pools en interaksie-ontwerp" ondersoek - die proses om visuele en interaktiewe aspekte van 'n gebruikerskoppelvlak te verfyn en te verbeter om heerlike ervarings te skep. Kom ons kyk na die dinge wat jou sal help om ervarings op te bou wat op 'n dieper vlak by jou gebruikers aanklank vind.

Hoe programme waargeneem word

Die wonderlike ding van UI en UX is dat elke ontwerper ook 'n gebruiker is, en die gevoel om die vloei van 'n koppelvlak te geniet is wonderlik, ongeag jou beroep. Daar is geen fout nie! Die enigste verskil is, terwyl dit vir gebruikers ophou by genot, vir ons gaan die werk voort.

Kom ons begin meer spesifiek raak. Verrukking in die UI-konteks verwys na die positiewe emosies wat 'n gebruiker ervaar wanneer hy met 'n produk, koppelvlak of diens interaksie het - wat verder gaan as om net 'n funksionele behoefte te vervul. Dit is 'n sleutelaspek van gebruikerservaring, want dit maak die ervaring onvergeetlik, wat gebruikerstevredenheid en lojaliteit bevorder. Dit maak jou toepassing werklik spesiaal.

Dit is die volgende vlak na die ontwerp van 'n produk se argitektuur, die skelet, - en hierdie stap gaan daaroor om die spiere, die vel by te voeg en die produk lewendig te maak.

Om dit te bereik, benodig ontwerpers 'n diepgaande begrip van hoe mense 'n produk waarneem en ervaar. Kom ons blaai na Don Norman se teorie van emosionele ontwerp . Hy verduidelik dat gebruikers op drie vlakke met produkte omgaan: visceraal, wat die onmiddellike emosionele reaksie is op hoe 'n produk lyk en voel, gedragsgedrag, wat dek hoe goed die produk werk en hoe lekker dit is om te gebruik, en reflektief, wat die langtermynverbindingsgebruikers ontwikkel soos hulle oor tyd reflekteer oor hul ervaring.

Norman se teorie verduidelik dat hierdie vlakke - visceraal (eerste indrukke) , gedrag (hoe dit werk) en reflektief (langtermyn emosionele impak) - nie lineêr is nie; hulle is voortdurend in interaksie. 'n Produk se visuele aantrekkingskrag (visceraal) gaan voort om gebruikers te beïnvloed terwyl hulle funksioneel daarmee besig is (gedrag), en elke aksie voer in hoe gebruikers daaroor voel oor tyd (reflektief).

Byvoorbeeld, 'n slanke foon se koppelvlak met gladde navigasie sal waarskynlik onmiddellike opwinding veroorsaak, maar dit is die kombinasie van gebruiksgemak en langtermyn-bevrediging wat blywende lojaliteit bou. In ontwerp is die fokus op hoe hierdie vlakke oorvleuel die sleutel tot die skep van 'n gebruikerservaring wat 'n mens sal onthou.

Dit is hoekom vreugde by die kruising van hierdie vlakke in die raamwerk sit. Dit is nie gekoppel aan net een aspek van die ervaring nie. Dit is die sinergie tussen hoe 'n produk lyk, hoe dit werk en hoe dit gebruikers mettertyd laat voel wat 'n ervaring skep wat die moeite werd is om te onthou.

Wat maak toepassings heerlik

Hierdie aspekte van ontwerp is diep gekoppel aan die vlakke van persepsie, en in die proses om die UI te poets, word hierdie verband baie duideliker. Bruikbaarheid speel 'n direkte rol in die skep van gedragsgenot - daardie gevoel wat gebruikers kry wanneer alles net glad werk.

Neem byvoorbeeld die ervaring om 'n foto in die Pinterest-ontdekkingsstroom te stoor.

Wanneer 'n gebruiker 'n foto kies, vergroot dit naatloos, wat 'n gedetailleerde aansig moontlik maak sonder om die stroom te verlaat, wat visuele betrokkenheid onmiddellik verbeter. Dan, 'n handtekening-druk op die foto openbaar vinnige aksies soos om die prent in 'n versameling te stoor of dit met ander te deel.

Alle noodsaaklike aksies is binne jou vingers, wat 'n speelse aanraking by die funksionaliteit voeg. Hierdie ontwerp vereenvoudig nie net die proses om persoonlike versamelings saam te stel nie, maar verryk ook algehele gebruikerstevredenheid.

Boonop kom estetiese aantrekkingskrag en emosie . Dit voeg die viscerale laag by, die onmiddellike, emosionele reaksie op die produk se voorkoms en gevoel. 'n Skoon, goed ontwerpte koppelvlak met subtiele animasies of deurdagte kleurkeuses nooi gebruikers uit, wat hulle van die begin af op hul gemak laat voel. Dit is die “wow”-faktor wat aandag trek, maar dit doen meer as om net goed te lyk – dit trek gebruikers na die ervaring, versterk bruikbaarheid en maak interaksies aangenaam.

In Pinterest se voorbeeld, buiten die fundamentele bruikbaarheid, voeg die toepassing lae poetsmiddel by wat die ervaring baie meer 'heel' maak. Byvoorbeeld, wanneer 'n foto lank druk en aksies soos 'Like', 'Stoor' of 'Deel' kies, kan gebruikers subtiele haptiese terugvoer opmerk.

Boonop bevat Pinterest sekere gebare wat baie toepassings nou gebruik, soos om terug te keer na die ontdekkingsstroom deur af te swiep of items te navigeer deur links en regs te swiep. Hierdie besonderhede mag dalk gering lyk, maar dit dra aansienlik by tot die algehele genot en bevrediging van die ervaring.

Maar die ware magie gebeur in die middel - wanneer bruikbaarheid en estetika saamwerk, wat 'n verenigde ervaring skep wat op verskeie vlakke resoneer. Dit is wanneer gebruikers van "Dit werk" na "Ek is mal daaroor!" Dit gaan nie meer oor die lewering van die produk nie.

Elke element, elke patroon wat geïmplementeer word, dra by tot hoe jou toepassing waargeneem sal word. Een interaksie, soos om 'n diens te bestel, kan slegs die gedragservaring of beide gedrags- en emosioneel raak. Vergelyk die outydse manier om 'n taxi per telefoon te bestel, wat dikwels gewag het, nie altyd aangename gesprekke met vreemdelinge en onduidelike wagtye nie, met die moderne, vaartbelynde proses in die Uber-toepassing.

Dit vereenvoudig nie net die bestelproses nie, maar verbeter ook die gebruikerservaring deur intydse opdaterings oor die bestuurder se ligging te verskaf, 'n duidelike vertoning van tarieftariewe en gladde oorgange tussen verskillende stadiums van die ritproses. Wat 'n verskuiwing, huh?

Die verdeling tussen estetika en funksie in UI is egter eintlik meer van 'n formaliteit. Enige koppelvlak kan heerlik wees, en enige 'estetiese' element kan 'funksioneel' word. Neem Apple se Dynamic Island - die berugte swart kerf op vroeëre iPhones. In latere modelle het dit van 'n blote ontwerpnoodsaaklikheid tot 'n funksionele en stylvolle kenmerk ontwikkel. Aanvanklik was die kerf 'n kompromie om die voorste kamera en sensors te huisves terwyl die skermspasie maksimeer word.

Toe, met verloop van tyd, het Apple dit omskep in 'n belangrike deel van die Face ID-tegnologie, wat 'n vinnige en veilige verifikasiemetode bied wat gebruikers vinnig omhels het.

Hier is 'n paar voorbeelde van hoe suiwer 'utilitaristiese' elemente verhef kan word met tikkies van genot:

Die ware vaardigheid van 'n ontwerper in die maak van verruklike toepassings lê daarin om te verstaan wanneer, hoe en hoekom om emosionele elemente in te vul. Dit hang af van die gebruiksgeval, konteks en benadering - die drie grondpilare wat elke ontwerpbesluit lei. Dit gaan daaroor om te onderskei wanneer om bruikbaarheid te prioritiseer, wanneer om emosionele lae in te voer, en wanneer om beide naatloos te integreer om ervarings te skep wat diep met gebruikers verbind.

Kom ons erken dit, selfs die heerlikste animasie kan 'n bron van frustrasie word as jy angstig daarna kyk terwyl 'n betaling van $1 000 nie verwerk word nie.

Voorbeeld 1. iMessage Sleutelwoorde Animasie

Wanneer jy sekere sleutelwoorde soos "Baie geluk" of "Happy Birthday" in iMessage stuur, veroorsaak die teks 'n volskerm-animasie, soos ballonne of konfetti, wat 'n prettige en boeiende visuele viering by die boodskap voeg.

Voorbeeld 2. Gemerkte profielfoto's in Google Docs/Sheets

Google Dokumente en Blaaie vertoon kleurvolle, handelsmerkprofielprente wat wys wie die dokument intyds redigeer. Dit maak samewerking nie net meer persoonlik nie, maar help gebruikers ook om hul mede-redakteurs vinnig te identifiseer.

Voorbeeld 3. iOS Memoji Volg die wagwoord invoerveld

Wanneer 'n wagwoord op 'n iOS-toestel ingevoer word, ontspring 'n Memoji-karakter in die wagwoordveld, wat jou gesigsuitdrukkings weerspieël. As jy dit verkeerd invoer, kan dit dalk frons of sy skouers optrek in reaksie. As daar 'n vertraging in tik is, kan die Memoji selfs gaap, wat 'n grillerige aanraking by hierdie baie alledaagse taak voeg. Dit voeg 'n bietjie persoonlikheid en humor in jou alledaagse roetine.

Voorbeeld 4. Google Dinosourus wanneer die internet af is

Google Chrome beskik oor 'n versteekte dinosourusspeletjie wat verskyn wanneer daar geen internetverbinding is nie. Dit is 'n eenvoudige, verslawende speletjie, maar die belangrikste – 'n wonderlike manier om kortstondige frustrasie in 'n bietjie pret te omskep.

Voorbeeld 5. Telegram wat 'n boodskap uitvee

In Telegram, wanneer jy 'n boodskap uitvee, verdwyn dit met 'n netjiese animasie wat die boodskap visueel soos papier versnipper voordat dit verdwyn, wat gebruikers 'n gevoel van beheer oor hul ontasbare digitale gesprekke gee.

Moenie my laat dink nie: ontwerppatrone en komponente

Die hart van 'n gepoleerde UI is patrone en komponente. Ontwerppatrone is gevestigde oplossings vir algemene koppelvlakuitdagings. Hulle bied 'n bekende struktuur vir gebruikers om mee te kommunikeer. Dit bestaan op hul beurt uit komponente - die boustene van die koppelvlak, soos knoppies, invoervelde en modale.

Saam skep patrone en komponente 'n naatlose gebruikerservaring waar gebruikers intuïtief verstaan hoe om die toepassing te navigeer.

Om funksionele elemente (soos spyskaarte, vorms of knoppies) te verhoog, kan ons dit verbeter met estetiese en emosionele tegnieke. Jy kan subtiele animasies byvoeg, mikro-interaksies betrek, en deurdagte gebruik van kleur en tipografie, wat verder gaan as net funksie. Dit alles word jou ontwerpstelsel – 'n versameling herbruikbare komponente en patrone wat gelei word deur duidelike reëls, wat konsekwentheid in die toepassing verseker.

Vooraf gedefinieerde animasies, kleurskemas en interaksiepatrone roep almal spesifieke emosies op, so die ontwerpstelsel word 'n kragtige hulpmiddel vir die skep van samehangende en innemende koppelvlakke. Hierdie benadering stel ontwerpers in staat om hierdie verbeterings konsekwent toe te pas sonder om van nuuts af te begin, wat die handelsmerk se identiteit versterk en gebruikersvertroue bou.

Voorbeeld 1. Duolingo se speelse widget

In Duolingo, wanneer jy 'n vraag verkeerd beantwoord, wys die toepassing nie net 'n eenvoudige foutboodskap nie. In plaas daarvan reageer dit met 'n vriendelike animasie en bemoedigende woorde van sy gelukbringer, Duo the Owl. Hierdie benadering verander 'n potensiële oomblik van frustrasie in 'n positiewe leerervaring, hou gebruikers gemotiveerd en verminder negatiewe emosies wat verband hou met die maak van foute. Werklike taktiek, maar geanimeerd.

Voorbeeld 2. Netflix se kaartanimasie

Netflix se vertoonkaart-animasie is 'n voorbeeld van naatlose UI-ontwerp, wat gebruikersbetrokkenheid oor toestelle heen verbeter. Wanneer 'n gebruiker 'n vertoning kies, brei die kaart uit na 'n volskerm-sleepprent , wat 'n rolprentvoorskou bied wat aandag trek. Hierdie gladde oorgang, wat 'n tikkie plesier byvoeg, is konsekwent, insluitend op hul TV-toepassing, waar dieselfde animasie lei tot 'n auto-speel sleepwa.

Hierdie verenigde benadering oor platforms heen verseker 'n samehangende gebruikerservaring, wat kognitiewe las verminder en navigasie vereenvoudig.

Voorbeeld 3. Slack se vinnige opdragte

Genot en emosionele betrokkenheid kan ook spruit uit produkkenmerke, nie net UI-ontwerp nie. Slack se vinnige opdragte illustreer dit deur produktiwiteit te verbeter en interaksies binne die toepassing te stroomlyn. Ontwerp met 'n fokus op produktiwiteit, Quick Commands stel gebruikers in staat om aansienlike tyd te bespaar deur eenvoudig die nodige opdrag in te tik. Gebruikers kan byvoorbeeld hul status opdateer met /status of kennisgewings stilmaak met /mute direk in die boodskapinvoerkassie.

Dit versnel nie net werkvloei nie, maar verminder ook onderbrekings, wat gebruikers in staat stel om op hul take te konsentreer. Die intuïtiewe en tydbesparende aard van Quick Commands is presies hoekom gebruikers so lief is vir hulle. My persoonlike gunsteling is /shrug, wat ¯\(ツ)/¯ aan die einde van jou boodskap voeg, en dit is soveel pret!

Die rol van interaksie-ontwerp

Terwyl ontwerppatrone en -komponente die boustene van 'n gepoleerde UI is, bring interaksie-ontwerp alles tot lewe. Interaksie-ontwerp gaan oor hoe gebruikers betrokke raak by daardie komponente - hoe hulle klik, tik, swiep en deur die toepassing navigeer.

Byvoorbeeld, 'n spyskaart is 'n algemene navigasie-UI-element, maar dit is die interaksie-ontwerp wat bepaal hoe dit voel. Gly die spyskaart glad in? Reageer dit onmiddellik op 'n veeggebaar? Haptiese aanraking by voltooiing? Het dit subtiele animasies wat die oorgang aangenaam maak?

'n Goeie voorbeeld van effektiewe interaksie-ontwerp is die ' Genie'-effek in macOS , wat gebruik word om Finder-vensters te minimaliseer. Hierdie animasie verander die venster glad na die beskuldigdebank, wat lyk soos 'n genie se lampbeweging. Dit is visueel aantreklik en funksioneel insiggewend en wys gebruikers presies waar die venster gaan, wat help om ruimtelike oriëntasie te handhaaf.

Interaksie-ontwerp en die ontwerpstelsel werk in harmonie. In interaksie-ontwerp verseker konsekwente gedrag vir alle komponente, soos hoe knoppies reageer wanneer dit geklik word of hoe vorms insette bekragtig, verseker dat die toepassing voorspelbaar op elke skerm optree. Hierdie konsekwentheid is wat gebruikersvertroue bou - wat beteken dat gebruikers gemaklik voel om te weet hoe die toepassing sal reageer, wat wrywing verminder en die algehele ervaring verbeter.

Wanneer interaksie-ontwerp reg gedoen word, werk dit saam met patrone en komponente om 'n samehangende ervaring te skep waar elke tik, klik en swiep intuïtief voel. Dit is iets wat werklik koppelvlakke tot lewe bring.

In my ander artikels het ek die belangrikheid van die bou van 'n span met jou ontwikkelaars beklemtoon. Ontwerpers moet met ontwikkelaars saamwerk, want danksy hulle kan hierdie animasies en interaksies werklik effektief geïmplementeer word en word. Om die span van gedetailleerde, duidelike spesifikasies vir animasies te voorsien - insluitend tydsberekening, verligting en gedrag - is die sleutel. Op hierdie manier word die beoogde ontwerpvisie akkuraat vertaal in die finale produk, wat dit gepoleer, professioneel en emosioneel resonant maak vir die gebruiker.

Gaan Bo die Gewone

Genot in die lewe gaan veel verder as om die tegniese aksies te doen wat jou daarheen kan lei. Dit is 'n som van die kleinste besonderhede wat 'n hele, vervullende ervaring skep. Ontwerp is dieselfde. 'n Funksionele koppelvlak is 'n robuuste fondament - maar dit is vaal. Om te verstaan hoe gebruikers jou program sien en gebruik, help om ervarings te skep wat maklik is om te gebruik en betekenisvol is. Ek dink Don Norman se emosionele ontwerpteorie is 'n goeie gids tot die ingewikkelde verbande tussen alle aspekte wat goeie ontwerp maak – heerlik.

Emosionele konneksie, ontwerppatrone, konsekwentheid en interaksie-ontwerp is die dinge wat dit lewendig maak. Boonop is dit 'n kragtige herinnering dat in produkontwerp die reis net so belangrik is as die bestemming. Deur subtiele animasies, innemende mikro-interaksies en deurdagte visuele besonderhede kan jy roetine-interaksies omskep in genotvolle oomblikke vir miljoene gebruikers. Dit is die magie van ontwerp.