UI / UX designguide med udtryk, forklaringer, tip og trends

En longread med det formål at samle alle teorier om UX- og UI-designprocesser til oprettelse af web- og mobilapplikationsdesign

Oprindeligt delte jeg denne guide til Syndicode blog for at beskrive UI og UX designprocesser, vi bruger i agenturet. Da dette materiale syntes at være ganske informativt og vejledende, besluttede jeg at dele det.

Så ved du, at design definerer succes for de fleste softwareprodukter. Og softwareudvikling opdager nye måder at bruge designet til forskellige produkter på. Jeg taler om design til websteder og applikationer. Der er ingen fantastisk app uden stilfulde elementer og brugervenlighed. Effektiviteten af ​​applikationen måles ved den optimale kombination af funktionalitet og attraktivitet. Visuel kommunikation skal være enkel, intuitiv og engagerende.

UI / UX-designens rolle

Design af applikationer og websteder giver særlige udfordringer:

  1. lette indviklede opgaver og arbejdsgange
  2. så brugerne kan forstå og administrere komplekse data,
  3. imødekommende en rig vifte af brugerroller, behov og processer.

Men det er det værd! Fordi en effektiv design og implementering af applikationer kan have dybe, positive konsekvenser for produktivitet, effektivitet, nøjagtighed og tilfredshed i et enormt spektrum af miljøer - fra underholdning til sundhedsydelser.

Du kunne have hørt om UI eller UX design før, men har faktisk aldrig haft en chance for at få hvad, hvor og hvorfor det bruges til. Og nej, UI og UX er ikke de samme ting. Læs om principforskelle mellem UI og UX, før du gik videre. UX er den samlede oplevelse, en bruger har med produktet, og UI er de ting, som brugeren faktisk vil interagere med og se.

Værdien af ​​et fantastisk design

Nøglen til vellykket applikationsdesign er ikke en god idé eller en god funktion - det hele kommer ned til brugeroplevelsen (UX) og brugergrænsefladen (UI). Det betyder ikke noget, hvor god din idé er, hvis appen ser forfærdelig ud og umulig at bruge den nemt.

Hvis du udvikler en web- eller mobilapplikation, er en af ​​de vigtigste ting, du har brug for for at få det rigtige, den måde, din app ser ud og føles på. For eksempel, hvis dit felt er e-handel, vil en dårligt designet app miste dig mange potentielle kunder.

Hvad ser f.eks. Din applikationsbruger først, når du åbner din app? Den første ting din bruger ser er destinationssiden. Hvad er en destinationsside? Dette er et startpunkt, hvorfra brugeren forstår, om applikationen eller et websted opfylder hans / hendes krav og opfylder behovene. Det skal være attraktivt og indeholde nogle opfordring til handling-knapper, så brugeren kan vide, hvad han skal gøre næste.

For at tilføje værdien til arbejdet for UI- og UX-designere kan du her finde nogle interessante UI vs UX sammenligninger:

  • UX-designer er som en arkitekt. Denne person tager sig af brugere og hjælper din virksomhed med at forbedre målbare parametre (reducere afvisningsprocent, forbedre CTR osv.). UX designer forstår brugeradfærd og psykologi, kender meget til interface ergonomi og er i stand til at analysere forretningsbehov for at konvertere det til brugerstrømme.
  • UI-designer på samme tid er som en dekoratør. Denne person tager sig af, hvordan grænsefladen reflekterer mærket. Det handler mere om umålelige ting (som hvor hyggelig interface er, er den stilfuld nok og så videre). UI-designer ved meget om farver og farvekombinationer, ved, hvordan man læser mærkebøger og konverterer dem til UI-elementer.

Nogle gange er UI- og UX-designer den samme person, der er ansvarlig for hele designprocessen. Men lad os diskutere hver type design separat.

Hvad er UX-design?

UX (User Experience) design er processen med at skabe produkter, systemer eller tjenester, der giver brugervenlige meningsfulde og relevante oplevelser. Dette indebærer design af hele processen med at erhverve og integrere produktet, herunder aspekter af branding, design, brugervenlighed og funktion. Det inkluderer også de meningsfulde og værdifulde aspekter af interaktion mellem mennesker og computere og produktejerskab. UX håndterer arkitekturen for indholdet og sitemap.

Som en spoiler vil jeg gerne sige, at UI (User Interface) -design, vi vil tale om i næste del, er et vigtigt aspekt af UX-design, det er en undergruppe af det. Fordi UX-design dækker en lang række andre områder. Information Architecture (IA) er det næst mest levedygtige aspekt af UX-design.

UX-design hjælper brugere med at nå mål. Det er ikke kun fokuseret på at oprette produkter, der er brugbare, det dækker også de andre aspekter af brugeroplevelsen, såsom:

  • fornøjelse,
  • effektivitet,
  • humør,
  • sjovt.

Indtil videre er den gode brugeroplevelse en, der imødekommer en bestemt brugers behov i den specifikke kontekst, hvor målgruppen bruger produktet. UX-design er brugercentreret - brugertypen definerer typen af ​​design.

Derfor er UX-design dynamisk og konstant ændret over tid på grund af ændrede brugsbetingelser og ændringer i individuelle systemer, brugskontekst, hvori de kan findes, og så videre. Her kan du finde nogle UX designtendenser, der forventes i 2019. Vi kan også sige, at brugeroplevelse handler om bruger-produkt interaktion og oplevelser.

Hovedopgaven med UX-design er at skabe produkter, der kan skræddersys til at imødekomme en brugers specifikke behov, men som giver funktionalitet, der er forudsigelig. Med andre ord er UX Design at studere brugeradfærd og forstå brugermotivationer med det mål at designe bedre digitale oplevelser.

Lad os tale om de vigtigste krav til UX-designet. Hvad skal være det perfekte brugeroplevelsesdesign? Svaret på dette spørgsmål kan præsenteres som listen over UX-designkrav, der skal opfyldes på forskellige niveauer. Disse niveauer danner UX-designpyramiden.

UX-principper og fuld UX-stak

Målene på hvert niveau i UX-designpyramiden kunne nås ved at følge de vigtigste UX-designprincipper:

  1. Hierarki
    Hierarki er et af designernes bedste værktøjer til at hjælpe brugere med at bevæge sig gennem et produkt let. Det omfatter:
    en). Informationsarkitektur (måden, hvordan indhold er organiseret på tværs af appen eller webstedet) og a
    b). Visuelt hierarki (der hjælper brugere med at navigere lettere inden for et afsnit eller en side).
  2. Konsistens
    I de fleste tilfælde kunne det nås ved at bruge et formelt sæt retningslinjer for, hvordan man designer produkter til en bestemt enhed eller et format.
  3. Bekræftelse
    Kræver bekræftelse for enhver vigtig eller irreversibel handling for at forhindre fejl, som brugeren ved et uheld kan begå.
  4. Brugerkontrol
    'Fortryd', 'tilbage', 'søg' -knapper såvel som tastaturgenveje er en fantastisk måde at give en bruger kontrollen over et websted eller et program.
  5. Tilgængelighed
    Det er vigtigt, at produktet er let at bruge af så mange mennesker som muligt. UX-design skal fjerne hindringerne for mennesker, når de bruger produktet, hvad enten disse hindringer er midlertidige eller mere permanente.

UX-design afbalancerer forretning, mennesker og teknologi. Selv om det er sandt, at et produkt ikke kan lykkes uden en sund virksomhed, kan en virksomhed ikke lykkes uden en lykkelig kunde - og det er UX Designer's job at gøre kunden glad.

Den komplette UX-designstak

Så der er mange ting involveret i UX-design. Den komplette UX-designstak består af:

  • Overflade (her anvender vi UI-design)
  • Skelet (lavet ved anvendelse af interface- og interaktionsdesign)
  • Struktur (dannet af informationsarkitektur og brugerflow)
  • Omfang (funktionelle specifikationer og indholdskrav)
  • Strategi (brugerbehov og projektmål defineret i henhold til brugerundersøgelser og forretningsmæssige mål)

Men UI-delen går ikke først. UX-design begynder med identificering af et problem gennem brugerundersøgelser. Der er ingen mening i at løse problemer, som brugere ikke er interesseret i.

UX-designproces

I et nøddeskal er UX-designprocesstrin de næste:

  • Brugerundersøgelser
  • Design
    UX wireframing
    UX-prototype
    UI-design (visuel og interaktion)
  • Brugertest

Nedenfor kan du finde en oversigt over de vigtigste UX-designprocessmetoder.

UX-designproces kan beskrives inden for flere mest populære UX-designmetoder.

De vigtigste tilgange til UX-designprocessen

I øjeblikket er der tre velkendte UX-designprocessmetoder:

  1. klassisk
  2. Læne
  3. GV Design Sprint (GV står for Google Ventures)

En klassisk UX-designproces undervises normalt i colleges og bygges ved hjælp af vandfaldsmetodikken. Her er den klassiske UX-designproces:

  1. Forskning. Her skal de største problemer opdages. Her kan du finde 10 diagrammer, der giver effektiv brugerundersøgelse.
  2. Kategoriser de problemer, der blev afsløret.
  3. Oprettelse af personas og rejsekort (ikke bland dem med brugerstrømme)
  4. Ideation øvelser til at generere løsninger til fantastisk UX design og løse afslørede problemer.
  5. Bygning af prototypen.
  6. Prototype-test.
  7. Sender den endelige prototype til udvikling.
  8. Produktlancering.
  9. Indsamling af feedback fra brugerne.
  10. Vender tilbage til det første trin med den modtagne feedback fra brugeren.

Kort sagt, som et skema til beskrivelse af en klassisk UX-designproces kan du forestille dig noget lignende:

Men der er også den anden tilgang til UX-designprocessen dukkede op i 2013, fordi den klassiske UX-designproces var uforenelig med Agile-udviklingen. Den nye designproces kaldet Lean UX og gjorde det muligt for UX at fungere inde i Agiles kegle af usikkerhed og hurtigt opdatere design baseret på brugerfeedback. Det bragte oplevelsesdesign tilbage i harmoni med produktudvikling.

Kort sagt er Lean UX et sæt principper, der er baseret på de agile metoder i 'Lean Startup', hvor fokus bringes til nutiden. I stedet for at kaste designleverancer over væggen, accepterer hold, at der ikke kan oprettes et endeligt design foran, og de tror, ​​at svarene vil dukke op, når hypoteser testes med MVP-udvikling (Minimal Viable Product). Lean UX designproces kan beskrives som 'build, måle og lære' loop eller en 'tænke, lave, kontrollere' cyklus.

Senere syntes Lean UX-designprocessen at være ineffektiv, når en produktplan ikke var godt defineret, hvilket resulterede i betydeligt affald og omarbejdning.

En anden stor designproces blev foreslået af Google Ventures. Dette var Design Sprint. Det gjorde det muligt for hold hurtigt at definere og teste lavtidelighedsprototyper. Design Sprint fra Google Ventures kan ses som en kombination af de tre tilgange: Design Thinking, Agile og Lean. En vigtig komponent i sprinten er oprettelsen af ​​en prototype, som er en af ​​de bedste måder at samle data på og teste ideer ud. Skemaet kunne præsenteres på næste måde:

Alle UX-designprocessmetoder er baseret på de samme iterationer, men besvarer forskellige spørgsmål. Læs mere om, hvordan alle tilgange er forskellige, og hvad har de til fælles i min artikel Agile UX vs. Lean UX!

UX designdele

For at opsummere, vil jeg dække nogle flere oplysninger om hver del af hvad UX-design gør:

  • Interaktionsdesign
    Oprettelse af engagerende grænseflader med gennemtænkt opførsel. Enkel og klar kommunikation mellem brugere og teknologi. Interaktionsdesign er ansvarlig for funktioner, der muliggør interaktion mellem mennesker og individuelle brugergrænseflader eller på tværs af flere grænseflader (eller systemer).
  • Trådrammer og prototyper
    Demonstration af de væsentlige komponenter på webstedet som en model til opgaven eller interaktiv prototype inden den endelige design. (Forresten, en wireframe er ikke en skitse og ikke en mockup).
  • Informationsarkitekt
    Det er lige store dele af kunst og videnskab. Organisering, strukturering og mærkning af indhold på en effektiv og bæredygtig måde.
  • Brugerundersøgelser
    Forståelse af brugeradfærd, behov og motiveringer gennem observationsteknikker, opgaveanalyse og andre feedbackmetoder. Brugerundersøgelse definerer dit publikum og giver vigtig indsigt i, hvordan du bedst imødekommer deres behov. For at levere kvalitativ brugerundersøgelse skal vi overveje det fulde billede: - Hvem bruger appen / webstedet? - Hvad de prøver at opnå? - Hvad kan komme i vejen for dem? - Hvad er den primære kundes forretningsbehov? Jeg lavede et indlæg om hvorfor brugerundersøgelser er vigtige for UX.
  • Scenarier
    Beskrivelse af brugerens interaktion med et projekt. Disse historier er meget vigtige både for design af en grænseflade og test af brugbarhed.

Men dette er ikke hele listen over de ting, UX-design inkluderer. Find de vigtigste dele af brugeroplevelsesdesign med deres reelle essens!

Dette er UX-design til at beslutte, om brugere vil vende sider eller rulle indholdet. Og at tage et sådant ansvar på detaljer og forudsige deres indvirkning UX-designere burde vide meget om menneskelig adfærd. UX-designere kommer normalt fra forskellige baggrunde som visuel design, programmering, psykologi og interaktionsdesign. Senere vil jeg også tale om de vigtigste opgaver for UX-designere i detaljer.

Hvad er UI-design?

Lad os starte med definitionen af, hvad en grænseflade er. En grænseflade er en mekanisme for interaktion mellem de to systemer. Fra dette punkt er en brugergrænseflade en grænseflade oprettet til at lette direkte interaktion mellem et system og en bruger.

På skærmenheden er der to almindelige typer brugergrænseflader:

  • kommandolinjegrænsefladen (CLI), der kun indeholder tekst, og som oftest bruges af programmerere;
  • og den grafiske brugergrænseflade (GUI), som jeg finder anvendelse på. Det inkluderer billeder, vinduer, ikoner, menuer og så videre.

I dette materiale vil jeg især holde mig til den type brugergrænseflade, der er ansvarlig for visuel opfattelse - GUI.

Brugergrænseflade eller brugergrænsefladesign er en disciplin til at designe brugergrænseflader til maskiner og software, såsom computere, husholdningsapparater, mobile enheder og andre elektroniske enheder, med fokus på lydhørhed og æstetik, hvilket maksimerer anvendeligheden for at skabe en god brugeroplevelse. Som en del af UX fokuserer UI-design mere på farver og typografi. Kort sagt, UI-design er typisk en kombination af:

  • Visuel design (udseendet og fornemmelsen) og
  • Interaktionsdesign (hvordan det fungerer).

Som et eksempel er UX-design fokuseret på hvor man kan placere knappen for brugeren at finde det let, mens UI-design vil tænke på, hvordan man gør denne knap flot for at få brugeren til at trykke på den.

Hvorfor har vi brug for en brugergrænseflade? Produktet skal være visuelt tiltalende og smukt. UI-design håndværker et fælles visuelt sprog og hierarki, der forbedrer, hvordan brugere engagerer sig med dit produkt.

UI samler koncepter fra Interaction Design, Visual Design og Information Architecture.

Brugergrænsefladeelementer inkluderer knapper, tekstfelter, afkrydsningsfelter, skydere, ikoner, tags, beskedbokse, pagination osv. For at forstå bedre, hvad UI-design er, skal du tage en lille rundvisning i de vigtigste UI-designelementer.

UI-designdele

Et tiltalende design af brugergrænseflade kan ikke udvikles uden brug af alle teknikker fra de næste felter:

  • Visuel design
    Gør det generelle produkts æstetik og engagere dit publikum med brugercentrede principper som weborienteret design eller konceptuel kunst. Hovedmålet med Visual Design er at forme og forbedre UX ved hjælp af illustrationer, fotografering, typografi, rum, layout og farve. 'Linie, form, negativt rum, tekstur' - det handler om visuelt design. Lær mere om det på siden Interaction Design Foundation om Visual Design.
  • farver
    Det er meget vigtigt at vælge de rigtige farver til dit projekt på grund af de mentale forbindelser med følelser og betydninger. Det er også vigtigt at følge mærkefarverne og bruge dem med omhu afhængigt af et design, du vil oprette, og den meddelelse, du vil dele.
  • Grafisk design
    Grafisk design er ansvarlig for at kombinere billeder, typografi eller bevægelsesgrafik sammen for at imponere dine kunder. Grafisk design sigter mod at forfølge pixel perfektion. Dette er for at sikre, at tekster har perfekt kerning og farver er i overensstemmelse med brandets retningslinjer. Grafisk design er en specialiseret disciplin, og der er et vist niveau af håndværk og et sæt specialiserede færdigheder (såsom typografi og farveteori), der kræves for at producere fremragende visuals. Det er ofte blandet med Visual Design.
  • mockups
    En mockup er en skala eller model i fuld størrelse af et design, der bruges til demonstration, designevaluering, promovering og andre formål. Mockups skulle vise det endelige udseende af designet med visuelle detaljer, såsom farver og typografi. Wireframes, mockups og prototyper er ofte blandede, men de repræsenterer bare de forskellige stadier i designstrømmen. En wireframe er en lavtidelighedsmåde til at præsentere et design, den skitserer strukturer og layout. I modsætning til en wireframe ligner en mockup mere som et færdigt produkt eller prototype, men det er ikke interaktivt og ikke klikbart. Mockups bruges til at tilbyde en række muligheder for strukturering af skærme i applikationer. Sammen med layout hjælper de med at organisere indhold og gøre brugergrænsefladen forståelig.
  • Typografi
    Typografi er en drivkraft i alle former for kommunikationskunst. Dette er kunsten og videnskaben om skrifttype, udseende og struktur, der sigter mod at levere den æstetiske og let læsbare kopi til læserne. Typografi hjælper med at tilføje en indtrykskraft til dine meddelelser på et print- eller skærmbaseret projekt. God typografi skal:
    a) Arbejd godt i forskellige størrelser;
    b) Har let skelnen mellem bogstaver;
    c) Har genkendeligt hierarki for bedre opfattelse.

Derudover afhænger UI-design i dag stort set af bevægelsesdesign, hvilket skaber øjeblikkelig feedback af brugeren, som er afgørende for enhver brugergrænseflade. Animationer, visuelle effekter og skærmovergange har en enorm indflydelse på, hvordan førstegangsbrugere vil engagere sig i appen. Oplev kraften i bevægelsesdesign i min blogartikel.

Prototypingstyper til UI-software

Som jeg nævnte før, er prototyper forskellige fra wireframes og fra mockups. Jeg har tidligere tilføjet prototyper til UX-design, men så vidt de normalt bruges til brugere til at teste produkt, skal prototyper være høj tro, interaktive og passe til den endelige brugergrænseflade så meget som muligt. Derfor vil jeg i næste del tale om prototyper til brugergrænsefladen.

Prototyper simulerer interaktionen mellem bruger og interface så realistisk som muligt.

Der er 5 almindelige typer UI-software-prototyper:

  1. Papirprototype (skitsering) Skitning i prototypeprocessen for at registrere de vigtigste ideer (normalt på papir), det er begrænset til idégenerering og kommunikation med designteamet.
  2. Prototyping med lav trofasthed Prototyper med lav trofasthed er grove repræsentationer af koncepter, der hjælper med at validere disse koncepter tidligt i designprocessen. Kort sagt er dette en rå præsentation af vores ideer. Prototyping med lavtidelighed bruges normalt af designteams til at understrege interaktioner og tanker.
  3. Hurtig prototype Hurtig prototype er en mid-fidelity-teknik baseret på brugerundersøgelser. Hurtig prototype hjælper designeren til at tænke over, hvad der skal gøres for at nå slutmålet. Det gennemgår en række hurtige iterationer og feedback-sessioner, der potentielt kunne løse problemet. Det vigtigste ved hurtig prototype, der gør det meget hurtigt, er brugen af ​​en lang række applikationer, forskellige digitale prototyper og brugerundersøgelsesværktøjer.
  4. Prototyping af høj trofasthed (interaktiv prototypering) I modsætning til prototyper med lav troværdighed kræver prototyper med høj trofærdighed mere tid, specialiserede færdigheder og ressourcer. En højtidelighedsprototype er en computerbaseret interaktiv repræsentation af designet i dets nærmeste lighed med den endelige version med hensyn til detaljer og funktionalitet. Det præsenterer normalt brugbarhed og realisme alt sammen.
  5. HTML-prototype (nogle mennesker tæller ikke denne type) HTML-prototype er en prototype udviklet ved hjælp af HTML. Det kan ses i browseren. Det har ingen stilistiske valg og er minimal i sit udseende, men HTML-prototype kan gå ind på kodningsfasen meget hurtigere end andre prototyper, fordi den allerede delvist er skrevet i kode.

Hver type prototyper har sin egen liste over digitale værktøjer, der passer bedst til processen. Fra Keynote og Google-lysbilleder til InVision og Adobe XD ... Her kan du udforske den ultimative liste over UI-prototyperværktøjer, der bruges til forskellige typer UI-software-prototyper.

UI-designprincipper

Mens der oprettes UI-prototype, følger en god designer de næste 6 principper for brugergrænsefladesign (ifølge Larry LeRoy Constantine):

  1. Struktur. Det drejer sig om den overordnede brugergrænsefladearkitektur og siger, at modeller skal være klare, konsistente, genkendelige og indeholde relaterede ting sammen, adskille ikke-relaterede ting og få lignende ting til at ligne hinanden.
  2. Enkelhed. Designet skal gøre enkle, fælles opgaver lette og kommunikere klart og enkelt på brugerens eget sprog. Genveje skal være meningsfuldt relateret til længere procedurer.
  3. Sigtbarhed. Ingen overflødige oplysninger og ulige alternativer. Designet skal synliggøre alle nødvendige muligheder og materialer til en given opgave uden distraktion.
  4. Feedback. Brugere skal informeres og forstå alle de relevante handlinger, ændringer af tilstand eller tilstand, fejl eller undtagelser på en klar, kortfattet og velkendt måde.
  5. Tolerance. Designet skal være fleksibelt for at reducere fejlene og misbrug ved at tillade at fortryde og gentage.
  6. Genbruge. Designet skal genbruge interne og eksterne komponenter og opførsel og opretholde konsistens med formålet snarere end kun vilkårlig konsistens.

UI-teknikker

Lad os tale om, hvordan vi opfylder alle de vigtigste UI-designprincipper, der er nævnt ovenfor. For at gøre dette bruger designere nogle enkle, men fordelagtige UI-teknikker.

Først og fremmest er en brugergrænsefladeteknik (interaktionsteknik eller inputteknik) en kombination af hardware- og softwareelementer, der giver en måde for brugerne at udføre en enkelt opgave. For eksempel at klikke på en knap, trykke på en tast, udføre en musebevægelse eller give en talekommando.

I UI-design er der snesevis af forskellige effektive teknikker, der hjælper brugeren med at udføre opgaven. Jeg vil gerne nævne de mest berømte UI-teknikker.

  • Interaktionsstilarter som formularudfyldning eller valg af menu osv.
  • Interaktionsdesignmønstre, der repræsenterer en måde at beskrive løsninger på fælles brugervenlighed eller tilgængelighedsproblemer i en bestemt sammenhæng. Med andre ord er dette en formel måde at dokumentere en løsning på et fælles designproblem.
  • Organisatoriske strukturer og ordninger:
  1. Hierarkisk struktur er baseret på hjernens evne til at skelne objekter på grundlag af deres fysiske forskelle, såsom størrelse, farve, kontrast, justering osv.
  2. Sekventiel struktur, hvor brugere følger den specielle sti, der afslutter opgaverne en efter en.
  3. Matrixstruktur, når brugere kan vælge navigationsmåden på egen hånd efter alfabetisk, kronologisk, emne (gruppering af de specifikke emner eller genrer) rækkefølge eller brugergrupper (en type publikum).
  • Indholdsorganisationsmodeller:
  1. Enkelt sidemodel.
  2. Flad model, hvor alle sider er lige, og de er placeret på samme navigationsniveau.
  3. Indeksmodel giver brugerne adgang til sider via sidelisten, der er tilgængelig på hver side.
  4. Streng hierarkimodel giver brugerne kun en måde at få adgang til undersiderne fra hovedsiden.
  5. Sameksisterende hierarkimodel giver brugerne forskellige måder at få adgang til indholdet, men guider dem gennem den bestemte sti, så de vil tage forventede handlinger.
  6. Daisy-model rettet mod at lede brugere til hjemmesiden, hver gang de udførte en opgave.
  • Visualiseringsteknik, der understreger output og sigter mod at organisere og strukturere numeriske og ikke-numeriske data på en bekvem måde og klar, visuelt tiltalende måde.
  • Forskning og innovation. Nogle eksempler:
    Interaktive lag;
    Brugerdefinerede illustrationer;
    Opdelte skærme;
    Fed skrift;
    Knappeløs brugergrænseflade;
    Animationer;
    Levende og dristige farver;
    Fotoindhold.

Der er flere eksempler, men de fleste af dem kan kategoriseres i grupperne ovenfor.

Når du har kendt alle de vigtige UI-teknikker, må jeg advare dig om de mest irriterende. Overvej dem for at redde din bruger fra udryddelse.

UI-designproces

Der er flere faser og processer i design af brugergrænseflade, som jeg kan navngive. Her er nogle af de mest levedygtige:

  1. Funktionalitetskrav indsamling. Dette trin dækker samling af en liste over den funktionalitet, der kræves for at nå projektets mål og brugernes potentielle behov. Normalt starter dette trin lige efter opdagelsessessionen med klienten.
  2. Bruger og opgave analyse. Dette er studiet, hvordan de potentielle brugere vil udføre de opgaver, som designet skal understøtte. Dette trin er forbundet med brugerundersøgelser, vi udfører som en del af UX-designprocessen.
  3. Informationsarkitektur (IA). Denne proces dækker udviklingen af ​​systemets proces og informationsstrøm. I denne fase vælger vi UI-interaktionstil, designmønster og visualiseringsteknik. Mange UI-designteknikker, jeg beskrev tidligere, blev dannet i informationsarkitekturstadiet.
  4. Prototyping. Denne fase dækker udviklingen af ​​prototyper, wireframes, mockups, papirprototyper eller enkle interaktive skærme.
  5. Brugbarhedsinspektion. Brugbarhedsinspektion kan bruges til at evaluere prototyper eller specifikationer for systemet, som normalt ikke kan testes på brugere. Metoder til brug af inspektion er en kognitiv gennemgang, heuristisk evaluering og pluralistisk gennemgang.
  6. Test af brugervenlighed. UI-designtest gør det muligt at forstå modtagelsen af ​​designet ud fra seerens synspunkt. Under brugbarhedstest bliver brugerne normalt bedt om at udføre opgaver for at se, hvor de støder på problemer og oplever forvirring.
  7. GUI-design (grafisk brugergrænseflade). Dette er et reelt udseende og følelse af det endelige grafiske design af brugergrænsefladen. På dette trin beslutter vi os for visuel kommunikation og problemløsning ved hjælp af typografi, fotografering og illustration.
  8. Softwarevedligeholdelse. Lejlighedsvis vedligeholdelse går efter installationen for at rette softwarebugs, ændre funktioner eller helt opgradere systemet.

Mens du følger UI-designprocessen, skal du ikke glemme de grundlæggende regler for at skabe det fantastiske brugergrænsefladesign!

I tidligere sektioner forsøgte jeg at samle, strukturere, forklare og præsentere dig alle de vigtigste udtryk og nuancer for UI og UX design. Men du vil måske læse mere om det, og her kan du finde listen over de bedste bøger om UI og UX-design.

Web- og mobilapplikationsdesign

UX- og UI-design bruges primært til at skabe fremragende websteder og design til mobile applikationer. Lad os lave en kort introduktion til web- og mobildesign.

webdesign

Kort sagt, webdesign er en proces med at oprette websteder. Det involverer informationsarkitektur, webstedsstruktur, brugergrænseflade, navigationsergonomi, layout af websteder, farver, kontraster, skrifttyper og fotografering eller illustrationer samt ikonedesign.

Webdesigner er en specialist, der anvender UX- og UI-færdigheder til en webside-design. Oprindeligt er en webdesigner en UI-designer (en undergruppe af UI-designere) med fokus på design og opbygning af webbrugergrænseflade. Nogle af dem kender måske en smule frontend-programmering som HTML / CSS, Javascript for at vise, hvordan design / prototype ville fungere på skærmen. De skulle også vide mere om tekniske begrænsninger i web, net osv.

En webdesigner skal:

  • Ved hvordan man opretter weblayouts og leverancer plus:

Ikoner;
infografik;
Logos;
Præsentationer mv.

  • Bliv fortrolig med branchestandard software.
  • Har wireframing-færdigheder.
  • Vær opmærksom på frontend-udviklingsnyancer.
  • Ved, hvordan man koder (det er et plus).

UX-design til webforbedring af brugertilfredshed ved at forbedre brugervenligheden, tilgængeligheden og effektiviteten af ​​brugerinteraktion med websteder.

Mobil applikationsdesign

Applikationsdesign til mobil (også desktop og laptop) stiller særlige udfordringer:

  • lette indviklede opgaver og arbejdsgange
  • så brugerne kan forstå og administrere komplekse data,
  • imødekommende en rig vifte af brugerroller, behov og processer.

UX / UI-designet af applikationen forbedrer brugeroplevelsen og kundetilfredsheden, som i sidste ende hjælper med at øge antallet af brugere af den specifikke applikation.

Mobile UX-design henviser til design af positive oplevelser under brugen af ​​mobile enheder og wearables. Afhængig af konteksten stiller mobilappdesign unikke krav til brugeroplevelsen.

Læs om disse 8 centrale principper for mobilt UX-design, der beviste deres effektivitet.

I de senere år blev sådanne krav opfyldt ved at følge de næste trends for mobilappdesign:

  • Design til større skærme;
  • Forenkling af brugergrænsefladen;
  • Interaktion ved svejse og bevægelser;
  • Tilføjelse af flere navigationsindstillinger;
  • Tilføjelse af funktionel animation;
  • Historiefortælling;
  • Brug af skalerbar typografi;
  • Eksperimenter med farvepaletter med mere.

For at forstå disse tendenser anbefaler jeg dig at læse om de vigtigste forskelle mellem en webapplikation og et websted i mit materiale om webappudvikling.
En anden ting at overveje er myter om mobil interface, som vi plejede at høre nogle gange. For at være ærlig kunne nogle af disse myter finde sted i fortiden, men i dag gik mobiloplevelsen meget længere.

I 2019, for at gøre din ansøgning (web eller mobil) tiltalende og vellykket, skal dit web- eller mobildesign være fleksibelt nok til at omfatte nye teknologier og hacks, der er tilgængelige i dag. Fordi fremskridt gør nogle ting, der kun blev vist i går, til en nødvendig del af vores daglige rutine. Vil du vide, hvilke innovationer der kan vokse din virksomhed og spare penge?

Hvad bruger UI / UX-designere?

For at starte med det grundlæggende om, hvad UX-designere gør, overvejer UX-designere hvorfor, hvad og hvordan til brugen af ​​det produkt, de arbejder på.

  • Hvorfor involverer brugernes motiver til at vedtage et produkt, uanset om de forholder sig til en opgave, de ønsker at udføre med det, eller til værdier og synspunkter forbundet med ejerskabet og brugen af ​​produktet.
  • Hvad adresserer de ting, folk kan gøre med et produkt, dets funktionalitet.
  • Hvordan relateres til design af funktionalitet på en tilgængelig og æstetisk behagelig måde.

UX-designere starter med hvorfor, inden de bestemmer, hvad og derefter, endelig, hvordan for at skabe produkter, som brugerne kan danne meningsfulde oplevelser med. I et web- eller mobilapplikationsdesign skal designere sikre, at produktets 'stof' kommer gennem en eksisterende enhed og tilbyder en problemfri, flydende oplevelse.

På hvilket stadium bør UX-designer svare på nogle grundlæggende spørgsmål som:

  • Har brugere brug for det produkt, du laver?
  • Vil brugerne betale for dette produkt?
  • Vil brugerne bruge tid på at lede efter det og lære at bruge det?
  • Hvad er den nøglefunktion, som brugerne har brug for?
  • Har brugere brug for alle de funktioner, du bygger? Hvor mange og hvilke funktioner har de virkelig brug for?

De vigtigste spørgsmål til Hvordan-fasen er forskellige og relaterer implementeringen:

  • Hvordan skal indholdet organiseres, så brugerne let kan finde det?
  • Vil applikationen være let at bruge?
  • Hvor brugerne kan blive forvirrede eller tabt? Hvilke vanskeligheder kan de have?
  • Hvilket indhold er nødvendigt, og hvordan skal det skrives for at være mest engagerende?

En UX-designer's typiske opgaver varierer, men inkluderer ofte brugerundersøgelser, oprettelse af personas, design af wireframes og interaktive prototyper samt test af design.

Med enkle ord er UX-designere involveret i at udføre omfattende brugerundersøgelser, formulere en informationsarkitektur og oprette brugerprofiler og historier. UX designer besidder ikke nødvendigvis visuelle eller grafiske design færdigheder, men en forståelse af psykologi og systemisk design er et must.

UI-designere forsøger samtidig at opdele komplekse strukturer i enkle forståelige formater for slutbrugerens bekvemmelighed. Derfor arbejder både UX / UI og webdesignere for at give en behagelig og effektiv oplevelse for brugeren.

UI / UX-designere skal være i stand til at forstå brugernes behov. Applikationens mål og mål er stadig den første afgørende faktor, før de endda placerede deres færdigheder og viden til at oprette webapplikationer, mobile apps, websted og service. Efter at have forstået brugernes behov og applikationens mål, skal en designer være i stand til effektivt at oversætte det til funktionaliteter. De skal også være i stand til at bestemme de mulige fremtidige krav til applikationen. I permanent samarbejde med andre medlemmer af udviklingsholdet engagerer designere sig i produktudviklingsstadiet fra den indledende fase og frem til datoen for færdiggørelsen. Disse opgaver og forpligtelser udgør et omfang af hovedopgaverne for brugeroplevelsesdesigneren. Men jeg foreslår, at du læser om, hvad UX-designere bliver betalt for i detaljer.

Med anvendelse af det firma, jeg arbejder i (Syndicode), forenkler vi UI / UX-designprocesserne lidt. Dette forklares med antallet af projekter, du arbejder på parallelt. Jeg kan også sige, at når specialist får meget erfaring, reduceres tiden til at følge alle proceduretrin. Færdigheder hjælper dig med at arbejde hurtigere.

Hvordan det hele starter i Syndicode? For det første holder vi en Discovery-session med en klient for at finde ud af så meget som muligt om projektet. Hovedmålet med denne session er at samle centrale projektoplysninger, så vi kan få en forståelse på højt niveau. Så opretter vi en plan, hvorefter vi arbejder med UI / UX / web / mobil designløsninger og er enige om hvert trin i det med klienten. Derefter gennemgår vi de nødvendige trin i UI og UX designprocesser i henhold til Lean UX.

Yderligere ressourcer

  1. En stor liste over ressourcer for UI- og UX-designere til at finde værktøjer, blogs, hacks og inspiration.
  2. Indikatorer, validatorer og meddelelser i applikationsdesign kan hjælpe dig med at forstå, hvordan brugeren kan informeres om de tre almindelige tilgange til statuskommunikation.
  3. Tilgængelighed i UX-design.
  4. Behance, Dribbble og Muzli er gode kilder til designers inspiration.
  5. Følg op med den bedste praksis for mobildesign beskrevet af Nick Babich.
  6. UI- og UX-designstendenser for 2019 hjælper dig med retningen.
  7. Begyndervejledningen til Information Architecture (IA) er en omfattende kilde med svarene om, hvad Information Architecture er, dets almindelige metoder, værktøjer, konferencer og IA-bøger.
  8. Introduktion til design af brugeroplevelse.
  9. Lær de vigtigste UX-designmetoder og -teknikker.
  10. En omfattende guide til UI-design.
  11. Mere om UI-design på Wiki.
  12. Lær forskellene mellem en prototype, wireframe og mockup

Denne historie er offentliggjort i The Startup, Medium's største iværksætterpublikation efterfulgt af +412.714 mennesker.

Abonner for at modtage vores tophistorier her.