{"id":257532,"date":"2023-08-06T11:00:00","date_gmt":"2023-08-06T08:00:00","guid":{"rendered":"https:\/\/inform.click\/12-darlige-ux-ui-feil-som-ikke-skal-begas-i-appdesign\/"},"modified":"2023-08-06T11:00:00","modified_gmt":"2023-08-06T08:00:00","slug":"12-darlige-ux-ui-feil-som-ikke-skal-begas-i-appdesign","status":"publish","type":"post","link":"https:\/\/inform.click\/no\/12-darlige-ux-ui-feil-som-ikke-skal-begas-i-appdesign\/","title":{"rendered":"12 D\u00e5rlige UX\/UI-feil som ikke skal beg\u00e5s i appdesign"},"content":{"rendered":"<p>\n  Teksten er for liten til \u00e5 leses.\n<\/p>\n<p>\n  Liten lys farge skriftinnhold p\u00e5 en hvit bakgrunn.\n<\/p>\n<p>\n  Brukere er ikke i stand til \u00e5 se de avgj\u00f8rende funksjonene som er plassert et sted i brukergrensesnittet.\n<\/p>\n<p>\n  Dette er noen av de vanlige problemene med UX\/UI-design i apper, og \u00e5 gj\u00f8re mange feil som disse vil koste deg dyrt. N\u00e5r du planlegger et programvareprosjekt, er det viktig \u00e5 identifisere slike feil ganske tidlig i designfasen fordi m\u00e5let er \u00e5 skape et intuitivt og raskt grensesnitt som gir en s\u00f8ml\u00f8s brukeropplevelse.\n<\/p>\n<p>\n  Her er noen d\u00f8delige feil som kan stave undergang for appen, og hvordan du til slutt kan unng\u00e5 dem.\n<\/p>\n<h5>\n  1 Avvik fra brukerens forventninger<br \/>\n<\/h5>\n<p>\n  Interessant nok har brukere noen forventninger n\u00e5r det gjelder \u00e5 bruke de grunnleggende GUI-widgetene (radioknapper, avmerkingsbokser, rullefelt, kommandokoblinger\/knapper, etc.) \u00c5 pr\u00f8ve en revolusjonerende endring p\u00e5 disse knappene blir kanskje ikke godt mottatt.\n<\/p>\n<p>\n  Tenk p\u00e5 dette enkle eksempelet: Du har lyttet til BBC-nyheter hele livet. Plutselig bestemmer noen i familien din seg for \u00e5 lytte til CNN i stedet, og du f\u00e5r f\u00f8lelsen av &laquo;fisk ut av vannet&raquo;. Dette er akkurat hva brukere kommer til \u00e5 f\u00f8le ogs\u00e5 n\u00e5r du gj\u00f8r store endringer i GUI-widgetene.\n<\/p>\n<p>\n  De fleste av de popul\u00e6re GUI-widgetene har blitt perfeksjonert og eksperimentert med i \u00e5revis, og det er en grunn til at brukere liker dem. Det er ikke lett \u00e5 endre den f\u00f8lelsen av letthet og komfort over natten. Dette er fordi brukere m\u00e5 bruke betydelig energi og hjernekraft for \u00e5 gj\u00f8re noe nytt; og de er kanskje ikke mottakelige for det.\n<\/p>\n<p>\n  Gj\u00f8r derfor ikke drastiske endringer i utseendet til GUI-widgets til appen din. Brukerne dine foretrekker \u00e5 ha problemfri navigering gjennom appen, s\u00e5 det er bedre om du beholder det originale utseendet og f\u00f8lelsen til GUI.\n<\/p>\n<h5>\n  2 Ikke vite hva brukeren virkelig trenger<br \/>\n<\/h5>\n<p>\n  N\u00e5r bedrifter ikke klarer \u00e5 realisere de faktiske behovene til brukeren, og kommer opp med noe som ikke dekker deres behov, f\u00f8rer det til en stor tabbe. I slike tilfeller kan du ikke \u00f8ke salget og appen din mislykkes.\n<\/p>\n<p>\n  Det er viktig \u00e5 unders\u00f8ke og f\u00e5 dyp innsikt i brukerinteresser f\u00f8r man bestemmer seg for hvilke funksjoner som skal inkorporeres. For dette, gj\u00f8r en grundig bruker- og markedsunders\u00f8kelse.\n<\/p>\n<p>\n  Forst\u00e5 hva m\u00e5lbrukerne forventer av appens design \u2013 umiddelbar responstid, jevn navigering mellom kontrollene, enkel lesbarhet og s\u00e5 videre \u2013 kort sagt en intuitiv brukeropplevelse.\n<\/p>\n<p>\n  Gj\u00f8r ogs\u00e5 en kritisk analyse av konkurrentene dine \u2013 kjenn brukervennlighetsfaktoren til appene deres; hvilke funksjoner de inkluderer i appene deres, hvor interaktive brukergrensesnittene deres er osv.\n<\/p>\n<p>\n  Og f\u00f8rstegangsutviklere pass p\u00e5: ikke overbelast for mange funksjoner i appen. Hovedform\u00e5let bak en app er \u00e5 forenkle aktivitetene til brukerne dine.\n<\/p>\n<p>\n  S\u00e5 det vil v\u00e6re tilr\u00e5delig \u00e5 ikke g\u00e5 over bord med funksjoner, da dette vil f\u00f8re til en mengde aktivitet som umiddelbart vil konvertere den til en middelm\u00e5dig app. Mindre antall funksjoner (prim\u00e6re, selvf\u00f8lgelig) ville gj\u00f8re susen.\n<\/p>\n<h5>\n  3 D\u00e5rlige ber\u00f8ringsm\u00e5l<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93b3171b.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93b3171b.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Brukere er utstyrt med fingre i forskjellige st\u00f8rrelser. S\u00e5 ber\u00f8ringen m\u00e5 konfigureres for \u00e5 im\u00f8tekomme fingrene til alle personene i m\u00e5lsegmentet. Gjennomsnittlig bredde p\u00e5 en voksen pekefinger er 1,6 til 2 cm. Derfor, husk det n\u00e5r du designer ber\u00f8ringsbaserte mobilapplikasjoner.\n<\/p>\n<p>\n  Hvis brukere synes det er vanskelig \u00e5 ta p\u00e5 og aktivere funksjonene p\u00e5 appen, kan de slutte \u00e5 bruke appen helt, og det ville v\u00e6re veldig tragisk. Og dette gjelder igjen for antall funksjoner du har. Jo flere funksjoner du har, jo mindre trykkomr\u00e5der p\u00e5 appen. P\u00e5 den annen side vil innlemming av noen f\u00e5 f\u00f8rsteklasses funksjoner f\u00f8re til st\u00f8rre tappeomr\u00e5der.\n<\/p>\n<h5>\n  4 The Scroll Horror<br \/>\n<\/h5>\n<p>\n  Blad- og avisredakt\u00f8rer og annons\u00f8rer levde en gang i den evige redselen til &raquo;folden'. Da mobilapplikasjoner ble popul\u00e6re, ble \u00abfold-skrekken\u00bb litt lettere fordi innholdet var synlig p\u00e5 en skjerm som enkelt kunne rulles.\n<\/p>\n<p>\n  Men dette var bare delvis sant fordi det ble viktigere og viktigere \u00e5 lage et responsivt og lengre nettoppsett der hovedhandlingene ikke skal g\u00e5 under folden, eller rettere sagt sl\u00e5 et sted hvor folk enkelt kan scrolle og finne det.\n<\/p>\n<p>\n  Konverteringer \u00f8ker bare n\u00e5r de relevante knappene er plassert &laquo;over den synlige delen av nettsiden&raquo;, eller n\u00e5r brukere ikke trenger \u00e5 rulle. \u00c5 plassere en tydelig handlingsfremmende oppfordring p\u00e5 et fremtredende sted vil gi flere konverteringer.\n<\/p>\n<h5>\n  5 knapper som etterligner utseendet til GUI-kontrollknapper<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93e23014.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d93e23014.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Akkurat som \u00e5 ha for mange GUI-kontroller kan v\u00e6re en forferdelig feil, kan det motsatte av dette ogs\u00e5 v\u00e6re d\u00f8delig. Understrekede tekster og overskrifter skaper f\u00f8lelsen av at de er lenker som tar brukerne til en ny side.\n<\/p>\n<p>\n  De klikker p\u00e5 den, men n\u00e5r de ikke kommer til siden, antar de at koblingen er \u00f8delagt og avslutter appen. Brukere blir ofte forvirret og noen ganger irritert p\u00e5 grunn av denne farsen, og de kommer kanskje ikke tilbake igjen.\n<\/p>\n<p>\n  Vis radioknappene der de er absolutt n\u00f8dvendige, men ikke gi feil inntrykk av radioknapper der det ikke er noen.\n<\/p>\n<h5>\n  6 Inkonsekvente GUI-kontroller<br \/>\n<\/h5>\n<p>\n  GUI-kontrollene b\u00f8r v\u00e6re konsekvente. Hvis du bruker bestemte ord for handlingsfremmende uttrykk og lignende handlinger, bruk de samme ordene i hele appen. \u00c5 bruke forskjellige ord for samme handling kan skape forvirring.\n<\/p>\n<p>\n  Noen ganger gj\u00f8r handlinger som utviklerne antar vil v\u00e6re enkle for brukerne det stikk motsatte. Hvis du f\u00f8lger et bestemt m\u00f8nster i appen din, f\u00f8lg det konsekvent hele veien. S\u00f8rg for at knappene og sidene vises der brukerne forventer at de kommer.\n<\/p>\n<h5>\n  7 Hoppe over flytskjemaene og komme i gang med utformingen<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d940e251f.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d940e251f.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Utviklere sparer ikke tid ved \u00e5 hoppe over flytskjemaene og stupe rett inn i designdelen av appen. Det er veldig viktig \u00e5 bygge et flytskjema med brukere i tankene, og mange utviklere lager disse diagrammene med brukerpersonas slik at de alltid har sluttbrukeren i tankene.\n<\/p>\n<p>\n  Dette vil ogs\u00e5 hjelpe med \u00e5 finne ut hvor brukerne kommer fra, hva deres interesser er og hvor de ligger. Derfor, mens du utformer flytskjemaene, er det viktig \u00e5 bestemme seg for bruker- og forretningsm\u00e5lene og om det vil bli oppn\u00e5dd p\u00e5 slutten eller ikke. Ved \u00e5 lage flytkontur er det mulig \u00e5 g\u00e5 gjennom ulike alternativer med sideflyt, og bestemme den beste.\n<\/p>\n<h5>\n  8 Ikke vurderer &laquo;opplevd rimelighet&raquo;<br \/>\n<\/h5>\n<p>\n  I lekmannstermer betyr affordance alle handlingene som er fysisk mulig avhengig av egenskapene til et objekt\/milj\u00f8. En trapp lar deg stige opp eller ned, en flaskekork lar deg skru eller skru av.\n<\/p>\n<p>\n  P\u00e5 samme m\u00e5te, p\u00e5 en nettside, utf\u00f8rer en glidebryter funksjonen for \u00e5 flytte opp og ned, avmerkingsboksen lar deg merke av eller fjerne merket for den, og den hyperlenkede teksten tar deg til en annen side. Affordance lar en bruker gj\u00f8re noe de lett kan forst\u00e5.\n<\/p>\n<p>\n  Oppfatningen av disse fordelene vil v\u00e6re basert p\u00e5 brukerens kunnskap om nettsiden, erfaringer, tro og m\u00e5l. N\u00e5r du designer brukergrensesnitt, er det viktig for designeren \u00e5 gi korrekte signaler, ellers kan det f\u00f8re til forvirring og dermed d\u00e5rlig brukeropplevelse.\n<\/p>\n<p>\n  Designere m\u00e5 bruke korrekte visuelle betegnere som brukere kan oppfatte hvordan de observerer disse UI-elementene og samhandler med dem. Det er ogs\u00e5 viktig \u00e5 huske at alle brukere ikke er skapt like; Derfor kan det hende at alle tilbud ikke blir oppfattet eller tolket p\u00e5 samme m\u00e5te av alle. S\u00e5 tilbake alle visuelle signaler med riktige etiketter og instruksjoner.\n<\/p>\n<h5>\n  9 Frav\u00e6r av riktig type dialogbokser<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d942b8868.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d942b8868.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  I en nettapps dialogbrukervennlighet er det obligatorisk \u00e5 gi brukerne beskjed om systemets n\u00e5v\u00e6rende tilstand og hvordan kommandoene deres har blitt tolket. Dialogbokser er ment \u00e5 informere brukere om hvordan handlingene deres blir, uten \u00e5 ta dem bort fra den gjeldende skjermen.\n<\/p>\n<p>\n  Stillhet kan holde brukerne til \u00e5 gjette. S\u00e5 mens du lager en nettapp, s\u00f8rg for at dialogboksen ikke skjuler informasjon fra brukerne. Men bruk det med m\u00e5te, fordi kontinuerlige meldinger kan v\u00e6re forstyrrende.\n<\/p>\n<p>\n  For eksempel, n\u00e5r brukeren bestemmer seg for \u00e5 avslutte en bestemt side etter \u00e5 ha skrevet informasjon, kan dialogboksen komme inn med bekreftelsesboksen som sier &laquo;Forkast utkast? Avbryt eller forkast&raquo;.\n<\/p>\n<p>\n  Men \u00e5 bombardere dem med abonnentdialogbokser (for eksempel &laquo;Vennligst abonner p\u00e5 v\u00e5rt daglige nyhetsbrev ved \u00e5 skrive inn e-postadressen din&raquo;) altfor mange ganger kan v\u00e6re veldig irriterende.\n<\/p>\n<h5>\n  10 \u00c5 gj\u00f8re vanlige feil med feilmeldinger<br \/>\n<\/h5>\n<p>\n  Brukere bruker tid og krefter p\u00e5 \u00e5 fylle ut skjemaer, og n\u00e5r det er feil i dem, er det obligatorisk \u00e5 informere dem om hva som gikk galt og hvor. Hvis det er spesifikke regler for \u00e5 opprette et passord, informer brukerne p\u00e5 forh\u00e5nd, slik at de ikke trenger \u00e5 gj\u00f8re det samme to ganger.\n<\/p>\n<p>\n  Eller, hvis det er en kampanjekode som skal brukes, bare informer dem p\u00e5 forh\u00e5nd hva slags kampanjer som gjelder og hvorfor. \u00c5 ikke informere dem i tide kan bygge opp angst og frustrasjon hos brukeren. Husk \u00e5 ikke gj\u00f8re disse feilene n\u00e5r du lager feilmeldinger:\n<\/p>\n<ol>\n<li>Tvetydighet &#8211; \u00c5 ikke v\u00e6re klar over feilen brukeren har gjort.\n  <\/li>\n<li>\u00c5 skylde p\u00e5 brukeren \u2013 Det er bedre \u00e5 v\u00e6re ydmyk, selv n\u00e5r brukeren gj\u00f8r feilen. P\u00e5pek feilen forsiktig, s\u00e5 de blir bedt om \u00e5 pr\u00f8ve igjen.\n  <\/li>\n<li>D\u00e5rlig plassering av feilmeldinger \u2013 Det anbefales \u00e5 ikke plassere feilene p\u00e5 en punktliste fordi det virkelig sl\u00e5r dem av. Plasser feilmeldingene rett opp\u00e5 feilene slik at brukerne umiddelbart kan se hva som er galt.\n  <\/li>\n<li>Ikke bruk mikrokopi for \u00e5 forhindre feil \u2013 Sm\u00e5 biter av forklarende tekst n\u00e6r de tomme feltene kan faktisk instruere brukeren hva som skal fylles, slik at de kan f\u00e5 det f\u00f8rste gang.\n  <\/li>\n<\/ol>\n<h5>\n  11 Frav\u00e6r av smarte standarder<br \/>\n<\/h5>\n<p>\n  \u00c5 ha et ekstra felt p\u00e5 skjemautfyllingssiden til appen din kan virke avskrekkende. S\u00e5 hvis det ekstra feltet er en absolutt n\u00f8dvendighet, s\u00f8rg for at du legger inn standardverdier i skjemainndatafelt. Folk skanner skjemaer raskt for \u00e5 sjekke hvor lang tid det vil ta dem \u00e5 fylle ut skjemaet, og hvis det allerede er en standardverdi i skjemaet, vil de sannsynligvis g\u00e5 videre og fylle ut de andre.\n<\/p>\n<p>\n  \u00c5 ikke ha smarte standardinnstillinger kan gj\u00f8re det tidkrevende og frustrerende for brukeren, og det er en alvorlig feil. Det er ogs\u00e5 tilr\u00e5delig \u00e5 ikke legge inn standardverdier for inndatafelt som krever brukeroppmerksomhet. Ikke anta hva brukeren kommer til \u00e5 klikke, og selv om det var en godt unders\u00f8kt standard, vil brukerne kanskje ha noe annet.\n<\/p>\n<h5>\n  12 Ignorer aksentfarger for handlingsfremmende knapper<br \/>\n<\/h5>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d944ab47d.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-289159-6382d944ab47d.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Det er veldig viktig \u00e5 innlemme gode aksentfarger for \u00e5 trekke oppmerksomhet til knapper som &laquo;Kj\u00f8p n\u00e5&raquo;, &laquo;Start en gratis oppl\u00e6ring&raquo;, &laquo;Registrer deg n\u00e5&raquo; osv. Bruk en annen farge for knappene slik at de skiller seg fra hverandre, spesielt for de som er veldig avgj\u00f8rende handlingsfremmende knapper.\n<\/p>\n<p>\n  Aksentfargen m\u00e5 v\u00e6re lys nok til \u00e5 tiltrekke seg oppmerksomhet, men ikke irriterende og distraherende. S\u00f8rg for at aksentfargen utfyller resten av fargetemaet i appen. Reserver ogs\u00e5 en spesifikk farge for oppfordringen til handling og ikke bruk den andre steder p\u00e5 siden.\n<\/p>\n<h4>\n  Konklusjon<br \/>\n<\/h4>\n<p>\n  Dette er noen av de vanligste feilene i UI\/UX-design. Og husk at n\u00e5r du gj\u00f8r noen designendringer, s\u00f8rg for \u00e5 teste den grundig for \u00e5 se hvor effektiv den ville v\u00e6re.\n<\/p>\n<p>\n  Appdesign er en differensierende faktor for suksess, og med tusenvis av apper som slippes hver dag, f\u00e5r bare en h\u00e5ndfull av dem godkjenning. D\u00e5rlig praksis kan f\u00f8re til d\u00f8delige feil i UX\/UI-design, og all innsatsen til s\u00e5 mange mennesker g\u00e5r i vasken.\n<\/p>\n<p>\n  <strong>En siste p\u00e5minnelse:<\/strong>\n<\/p>\n<p>\n  Mens du designer appen din, husk \u00e5 designe for flere plattformer, med mindre du m\u00e5lretter mot en bestemt. Slik f\u00e5r du et Minimum Viable Product (MVP) rett inn i butikken.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Opptakskilde: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2017\/10\/25\/app-design-ux-ui-mistakes\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Teksten er for liten til \u00e5 leses. Liten lys farge skriftinnhold p\u00e5 en hvit bakgrunn. Brukere er ikke i stand til \u00e5 se de avgj\u00f8rende funksjonene som er plassert et sted i brukergrensesnittet. Dette er noen av de vanlige problemene med UX\/UI-design i apper, og \u00e5 gj\u00f8re mange feil som disse vil koste deg dyrt. N\u00e5r du planlegger et programvareprosjekt, er det viktig \u00e5 identifisere slike feil ganske tidlig i designfasen fordi m\u00e5let er \u00e5 skape et intuitivt og raskt grensesnitt som gir en s\u00f8ml\u00f8s brukeropplevelse. Her er noen d\u00f8delige feil som kan stave undergang for appen, og &#8230;<\/p>\n","protected":false},"author":1,"featured_media":193423,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[226,148,356,395,57,200],"tags":[],"class_list":["post-257532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laereboker","category-nett-tips-og-triks","category-underholdning","category-utforming","category-web-og-wordpress","category-webdesign-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/comments?post=257532"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/posts\/257532\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media\/193423"}],"wp:attachment":[{"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/media?parent=257532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/categories?post=257532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/no\/wp-json\/wp\/v2\/tags?post=257532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}