Hvad er forskellen mellem UX og UI design?

Og nogle tip til dig for at komme i gang med begge dele.

Billedkreditter

For et par dage siden offentliggjorde jeg et indlæg om Typography, et indlæg om Color Theory og et indlæg om at designe mobile apps fra bunden. De fik en god mængde opmærksomhed, og folk delte med mig, hvor hjælpsomme indlægene var for dem til at forstå design bedre.

Så jeg besluttede at skrive et andet indlæg, der er en hurtig introduktion til to meget brede emner: Brugergrænsefladesign og Brugeroplevelsesdesign. Viden fra tidligere artikler og denne kan hjælpe dig med at blive en bedre designer.

Lad os begynde!

Lad os først svare på spørgsmålet: Hvad er UI-design og UX-design nøjagtigt, og hvad er forskellen mellem de to?

Billedkredit

Kort sagt, UI er hvordan tingene ser ud, UX er hvordan tingene fungerer. UX er en proces, mens UI er en leverbar. Lad os uddybe yderligere ...

Brugergrænsefladesign

Brugergrænseflade (UI) design er et stort felt. I teorien er UI en kombination af indhold (dokumenter, tekster, billeder, videoer osv.), Form (knapper, etiketter, tekstfelter, afkrydsningsfelter, rullelister, grafisk design osv.) Og opførsel (hvad sker der hvis Jeg klikker / trækker / skriver).

Det tager et godt øje, en masse praksis og en masse prøve og fejl for at blive bedre til det. Som UI-designer er dit mål at skabe en brugergrænseflade, der er engagerende, smuk og også skabe en følelsesladet respons fra brugeren for at gøre dine produkter mere elskelige og smukke.

Da jeg begyndte, er noget, jeg lærte af min mentor, at tage en rejseguide til dit produkt. Forestil dig din app / dit websted som en rejse. Enhver bruger, der downloader din app lige fra at opdage den i App Store / web, gennem at bruge den, nå mål eller udføre opgaver i appen, tages med på en rejse. Og den rejse skulle være en dejlig rejse.

Og du som app-designer er den håndværker, der designer denne rejse. Så du vil ikke smide alle oplysninger på skærmen i håb om, at brugeren henter dem. Det er det modsatte af et godt brugergrænseflade.

I stedet er du tourguiden, der tager brugeren med på en vidunderlig rejse gennem din app. Og for at dette skal du være i stand til at skifte og bevæge deres opmærksomhed fra sted til sted, som vejleder dem.

Design handler ikke kun om at lære at bruge designsoftware - selvom det helt sikkert er vigtigt. Software er som en designer's sværd. Du har brug for sværdet for at bekæmpe slaget, men det er ikke alt hvad du behøver for at lære at bruge. Du skal lære strategier, processer, tricks og tip til kampen / spillet for at kunne vinde det. I UI-design skal du brainstorme, eksperimentere, teste og forstå dine brugere og deres rejse gennem brug af dit produkt.

Fordelene ved at have et godt designet produkt er, at du får en højere brugerfastholdelsesfrekvens.

Ting at huske på at skabe dejlige UI

  1. På en skærm læser folk altid den største, den fedeste og den lyseste først.
Billedkreditter

Dette er menneskets natur. Vores opmærksomhed er programmeret på en sådan måde, at vi ser den største, den fedeste og den lyseste først. Og så flytter det til mindre, mindre dristige og mindre lyse ting.

Som designer kan du bruge disse oplysninger til at sammenstille din brugers oplevelse.

2. Betydningen af ​​justering.

Alignment er et grundlæggende aspekt af UI Design. Og et vigtigt designprincip er: minimer antallet af justeringslinjer. Det forbedrer læsbarheden og gør designet mere behageligt for øjet.

Billedkreditter

På billederne ovenfor har billedet til venstre 1 justeringslinje. Mens billedet på højre del har 4 justeringslinjer.

Her er et andet eksempel på, hvor færre justeringslinjer kan gøre en stor forskel i forbedring af designet.

Billedet til venstre har for mange justeringslinjer, mens det til højre kun har en og ser mere behageligt ud for øjet! Billedkreditter

Der er to grundlæggende typer af tilpasning: Kantindretning og Centerjustering.

  • Kantjustering er det sted, hvor du har alle elementer, der har en side eller kant, der er indfodret med en enkelt linje.
  • Centerjustering er det sted, hvor du stiller alle elementer op efter deres midtpunkt.
Billedkreditter

Afhængig af brugervalget vælger du det ene eller det andet. Normalt betragtes kantjustering som bedre. Det er ret let at justere elementer i designsoftware som Photoshop. De fleste designsoftware vil normalt give en lineal / guide til kantjustering af alle elementerne.

3. Bliv en opmærksomhedsarkitekt.

Her er to måder at fortolke dette: 1) Du er nødt til at fange brugerens opmærksomhed med dit design. 2) Du skal være opmærksom på enhver lille ting i dine design.
For at være en stor designer skal du gøre begge dele. Sidstnævnte giver dig mulighed for at nå det førstnævnte.

UI Design handler om at skræddersy oplevelsen til dine brugere ved at lede deres opmærksomhed mod forskellige vigtige ting.

Måder at bruge tekst til at fange brugerens opmærksomhed:

  • Gør størrelsen større eller mindre.
  • Fed eller lysere i farve. Eller gør det dæmpet.
  • Brug en skrifttype med en tung vægtning mod noget, der er tyndt eller let.
  • Kursiv ord. Brug store bogstaver eller små bogstaver.
  • Forøg afstanden mellem hver af bogstaverne for at få den samlede størrelse på ordene til at tage mere plads.

Det vigtigste ved design er test! Sørg for, at du prøver forskellige ting: farver, skrifttyper, toner, vinkler, justering, layout osv. Eksperimenter med forskellige designs, så du kan arkivere en brugerrejse ved hjælp af forskellige måder at kommandere opmærksomhed på.

Læs meget mere om UI Design her. Behance og Dribbble er fantastiske platforme til at finde godt design til at blive inspireret af.

Brugeroplevelsesdesign

User Experience (UX) design handler om at skabe smertefri og underholdende oplevelser.

Her er 7 spørgsmål, som du kan stille dig selv at vide, om UX for dit produkt er godt:

  1. Brugervenlighed: Hvad bruger brugeren min app til? Hvad er kernefunktionaliteten i min app? Hvad er det, jeg har brug for for at få ret, for at min app kan bruges?
    Hvordan kan jeg nu minimere antallet af trin, som det tager for brugeren at opnå det i min app? Hvad er det vigtigste, som mine brugere vil opnå med min app? Hvordan kan jeg få oplevelsen af ​​at opnå det så glat, hurtigt og sjovt så meget?
  2. Brugerprofilering: Du skal vide, hvem dine brugere er, og hvad de vil opnå ved hjælp af din app. Den bedste måde at gøre dette på er ved at profilere dine brugere.
    Du skal gøre et par tænkeøvelser for at forstå dit marked. Begræns din målgruppe / brugergruppe.
    Det vigtigste spørgsmål, som du altid spørger dig selv, er: Hvad er kernefunktionaliteten i min app? Profil dine brugere for konstant at revurdere dette spørgsmål.
  3. Beder om tilladelser: Hvis din mobilapp har push-meddelelser, har brug for lokationstjenester, integration med sociale medier, e-mail osv., Ved du, at du har brug for brugerens tilladelse til en alarmmeddelelse, der dukker op på skærmen, når de bruger din app. I stedet for at spørge på én gang, hvad der vil overvælde brugeren, skal du bruge Benjamin Franklin-effekten. Før du beder nogen om en stor tjeneste, skal du bede dem om en lille favor. Og træk langsomt brugeren i retning af en bestemt retning.
    Sørg for, at din app kun sender tilladelsesmeddelelsen, når brugeren er ved at bruge denne funktion, og ikke når de netop starter appen.
  4. Form vs funktion: Design handler ikke altid om formen - smukt farveskema, skrifttyper, layout og sådan. Det handler også om funktionaliteten. Gå altid efter funktion over form.
  5. Konsistens: Bliver jeg konsistent i hele min app? Er min app i overensstemmelse med mit brand? Inkonsekvens i design skaber forvirring. En forvirret bruger er en ulykkelig bruger.
    Tænk på konsistens, ikke kun med hensyn til udseende, men også med hensyn til funktionalitet.
  6. Enkelhed: Kan jeg gøre det enklere?
    Sørg for, at din app er bedstemorsikker, dvs. ældre kan forstå den og bruge den.
    En dårlig forvirrende app ville være rækker på rækker med knapper, masser af forskellige farver og en tæt pakket brugergrænseflade.
  7. Få mig ikke til at tænke: Gør jeg tingene vanskelige for min bruger?
    Mennesker kan ikke lide at blive forvirrede.
    Når vi programmerer, prøver vi at gøre vores kode så let og så effektiv som muligt.
    Når vi designer, forsøger vi at gøre grænsefladen så klar og mindst mulig forvirrende. Og smuk!
    Forsøg at gøre din ordlyd så klar som muligt.

Punkter at bemærke for en fantastisk UX:

  1. Har ikke længe tutorials ved applancering, der forklarer, hvordan du bruger appen. I stedet vil du give dine brugere små oplysninger om, når og når det er nødvendigt. Gør det kontekstuelt. Giv tip og tip. Prøv at opbygge design, hvor brugeren finder appen inden for få sekunder uden at have brug for en eksplicit selvstudie. Det er her, intuitive designprincipper kommer!
  2. Når noget er så indgroet i mobilbrugeres sind, såsom træk for at opdatere, eller knib for at zoome - hold dig til disse regler for din app. Og brug IKKE disse handlinger til et andet mål. Som at trække for at tilføje en ny journalpost, bliver det super forvirrende. En journal-app, jeg brugte, gjorde det, og det var forvirrende.
  3. Behandl ikke dine brugere som idiotkasser. Giv ikke en popup / advarsel til brugeren for at bekræfte en hyppig handling. Spørg kun om bekræftelse for skadelige handlinger, som brugerne kan fortryde - som at slette noget eller foretage et køb.
    Unødvendige popups og alarmer afbryder strømmen og resulterer i en dårlig brugeroplevelse. Få ikke dine kunder til at føle sig dumme.

Læs mere om UX Design her og her.

Endelige tanker

Jeg håber, at artiklen hjalp dig med at forstå grundlæggende koncepter i UI og UX design. Jeg ville meget gerne høre feedback eller tanker om indlægget. Du kan sende mig en e-mail på harshita@harshitaapps.com!

Du kan også downloade min app her. Alle disse erfaringer var kun mulige, fordi jeg ønskede at bygge en smuk og nyttig app til sporing af cryptocurrency, advarsler og porteføljestyring. Rejsen med at bygge denne app lærte mig vigtige lektioner og forbedrede mine evner, og det har jeg delt meget om i mine indlæg. :)

Afslutter indlægget med et af mine yndlingscitater om design ...

”Design er ikke kun, hvordan det ser ud og føles. Design er sådan det fungerer ”
-Steve Jobs