Designe Jank-gratis apps

Hvordan designere kan hjælpe med at forhindre visuelle fejl i iOS-apps

Med frigivelsen af ​​iOS 11 var der en bred bekymring for, at Apples softwarekvalitet faldt. Mange brugere oplevede ydelsesproblemer, softwarebugs og visuelle fejl.

Her er et eksempel på en visuel fejl i appen Meddelelser, forårsaget af kraft-berøring for at "pop" en meddelelse efterfulgt af straks at trykke på tilbage-knappen.

Bemærk den dobbelte navigationsanimation og manglen på tastaturanimation.

Disse slags visuelle fejl er ikke nye for iOS 11, mobile apps eller brugergrænseflader. Når apps vokser i kompleksitet, og brugerforventningerne stiger, kan disse tilsyneladende små bugs have en stor indflydelse på det endelige produkt. De får apps til at føle sig uheldige.

Hvad er Jank?

Jank henviser til visuelle fejl, der er uventede og distraherende. Normalt opstår de på grund af ekstra animationer eller manglende animationer.

I appen Medium har værktøjslinjeikonerne en ekstra animation (vokser og bevæger sig til højre), når tastaturet vises igen efter annullering af en upload af foto.

En app kan være "uhyggelig" eller udvise "uhygge", hvis den ser ud til at opføre sig forkert. Udover visuelle fejl kan uredelighed henvise til ikke-svarende knapper, inkonsekvent belastningsadfærd eller akavede bevægelser.

I dette indlæg fokuserer jeg udelukkende på visuelle svigt.

Motivering

Hvis du er en designer, føler du dig måske ikke beføjet til at ordne app jank - det er et kodeproblem, ikke?

Designere spiller stadig en kritisk rolle. Visse brugergrænsefladelementer er især uønskede, især når de skubbes til deres grænser. Hvis designere ved, hvilke elementer der forårsager uønsket, og endnu vigtigere, begrænsningerne af disse elementer, kan de oprette design, der er mindre tilbøjelige til at resultere i uønskede apps.

Vi vil diskutere nogle almindelige kilder til uheld i iOS-apps og undersøge måder at designe apps, der kan forhindre, at disse problemer opstår helt sammen.

Navigation overgange

Lad os starte med et fælles brugergrænsefladeelement: navigationslinjen.

Her er en normal, glad navigationslinje:

Glat overgang, når man tapper på rygknap og når man kører interaktivt.

Her er en uhyggelig, trist navigationslinje:

Ekstra animation af sort region på højre side; mangel på animation, når der trykkes på tilbage-knappen.

Hvad er der galt? Hvorfor er denne navigationslinje så ujævn?

I dette tilfælde er "Startside" -skærmens navigationsbjælke gennemskinnelig, mens "Ny skærm" s navigationslinje er uigennemsigtig.

Navigationslinjen leveret af Apple er begrænset og flygtig - kun visse opførsler understøttes. Hvis en udvikler ønsker at ændre navigationslinjen på en ikke-understøttet måde, er der ingen garanti for, at den fungerer korrekt i alle tilfælde.

Overvejelser om navigationsovergangsdesign

Mange almindelige navigationslinjebehandlinger understøttes ikke fuldt ud: skjule standard 1px grå understregning, skjule rygknapteksten, tilføje ekstra visninger under navigationslinjen og tillade en bagbevægelse hvor som helst på skærmen.

Hvordan kan designere, der muligvis ikke kender nuancerne i UINavigationController API, design omkring disse problemer?

Det vigtigste tip er at bevare designkonsistensen på tværs af skærme. Hvis hver skærm har en ny navigationsbjælestil, beder du om problemer.

Tastaturer

Efter min erfaring er tastaturer den mest almindelige kilde til uønsket. Begge eksempler øverst i dette indlæg er tastaturrelateret.

Her er et andet eksempel. Bemærk, hvordan cirkelanimationen fungerer fint, når du vælger billeder, men er forkert, når du bruger standardtastaturet.

Tastaturrelateret træk i Snapchat.

Overvejelser om tastaturdesign

Når et tastatur er involveret, skal du holde skærmen så enkel som muligt. Halvdelen af ​​skærmens ejendom er alligevel væk, så tag ikke den resterende plads fuld af knapper.

Vær opmærksom på animationer, der forekommer ved siden af ​​tastaturanimationen, og antag ikke, at du har fuld kontrol over tastaturet. Det er muligt at skjule tastaturet uden en animation, men det kan medføre komplikationer senere på vejen.

Overvej også tredjeparts- og internationale tastaturer. Bare fordi dit design fungerer godt med det almindelige engelske iOS-tastatur, betyder det ikke, at det fungerer for alle. Du skal antage, at højden på tastaturet er ukendt og kan ændre sig når som helst.

Multistat-animationer

Jeg elsker multi-state animationer. De er utroligt sjove at designe og bygge. Imidlertid har animationer, der har mange stater, en tendens til at forårsage ujævnhed.

Her er et eksempel på en multi-statlig animation, der er gået galt:

App Store-knap med en utilsigtet animation.

Denne knap har flere tilstande - den omdannes normalt til en spinner og animeres til at repræsentere en download, der er i gang.

Selv den

Fra dette kan vi komme med et veluddannet gæt om, hvor den roterende bug stammer fra. Bemærk, når spinneren først vises, men inden den blå fremgang starter, drejer den næsten fulde grå cirkel på plads. På grund af en eller anden fejl i koden, tror "åben" -knappen ovenfor, at den er i denne mellemliggende spindingstilstand.

Det egentlige spørgsmål her er for meget tilstand. Når animationer kommer i utilsigtede stater, udstiller de jank.

Overvejelser om design af flere staters animation

Multistatlige animationer øger kompleksiteten. Hvis du designer et element, der animeres mellem flere tilstande, skal du sørge for at overveje alle tilstandsovergange og kantsager. Noget, der synes enkelt på overfladen, kan være meget mere kompliceret end oprindeligt troet.

De-Janking et design

Nu hvor vi kender nogle almindelige kilder til jank i iOS-apps, lad os bruge vores nye perspektiv til at evaluere et design.

Her er et groft og ufuldstændigt design, jeg lavede for et stykke tid siden. Det var at udforske ideen om en simpel præsentation-app. Brugeren kunne indtaste "data" for hvert lysbillede, og præsentationen vil automatisk blive gengivet og temaet.

Hovedfokus er den midterste skærm, hvor brugeren kan tilføje nye elementer, indtaste tekst, arrangere dias igen, skubbe vandret mellem diasene og udvide en forhåndsvisning af det gengivne dias.

Ser temmelig godt ud, ikke? Nej. Dette design er en envejsbillet til Jankville.

Lad os tælle de potentielle kilder til jank:

  1. De forskellige navigationsbjælker og overgange mellem dem.
  2. Preview af diaset, der altid forbliver over tastaturet.
  3. Den interaktive og tilstandsbaserede animation til at udvide forhåndsvisning af diaset.
  4. Rulleplacering og tastaturanimationer, når brugeren tilføjer mange linjer med tekst.
  5. Den statsbaserede animation, der vælger teksttypen ("Titel", "Undertekst", "Bullet" osv.)

Det vigtigste er, at disse ikke alle er uafhængige - vi er nødt til at håndtere bivirkningerne af alle mulige kombinationer.

Det er absolut muligt at opbygge dette, men udvikleren vil bruge en betydelig mængde tid på at løse animationsfejl og statskonflikter. Denne app vil sandsynligvis kræve en intens opmærksomhed på detaljer, omhu og evne til at løse de problemer, der opstår.

Her er et nyt design, som jeg hurtigt spotte:

Den midterste skærm "Min præsentation" er blevet udvidet til tre skærme: den første til at organisere dias, den anden til at organisere elementer, og den tredje til redigering af et enkelt element.

Dette reducerer mulige kilder til uønsket ved at udnytte standard iOS-elementer og indkapsling af potentielt problematiske elementer. I stedet for en brugerdefineret udvidelse af knapanimation til at vælge varetype, kan brugeren vælge fra en standardvælger. Tastaturet bruges kun på den sidste skærm og behøver aldrig at skjule, da der kun er et tekstfelt.

Dette andet design føles måske ikke så unikt, men det er mere sandsynligt, at det føles kendt og fungerer som forventet.

Bemærk om brugerdefinerede design

Jeg mener ikke at afskrække bygning af brugerdefinerede brugergrænseflader eller skubbe grænserne for hvad der er muligt. Jeg elsker at opleve oplevelser, der føles friske - det er det, der gør iOS-design og -udvikling sjov.

Men for ofte så jeg brugerdefinerede design, der kun gør det 90% af vejen til færdiggørelse. På grund af en række forskellige årsager kommer de sidste 10% til kort, og ustabilitet forbliver i ellers veldesignede apps.

Hvis designere er opmærksomme på de mest almindelige faldgruber, kan de hjælpe udviklere med at undgå dem, hvilket resulterer i bedre oplevelser for alle.

Takeaways

Designere kan hjælpe med at forhindre ryg ved at kende dens årsager og ændre design i overensstemmelse hermed.

Her er et par praktiske trin for at reducere rykken:

  1. Få udvikler input tidligt. En erfaren iOS-udvikler kan hurtigt estimere kompleksiteten ved at opbygge et design og informere dig om potentielle problemer.
  2. Forenkle design! Det er nemt at skjule kompleksiteten ved at antage, at overgange og animationer fungerer selv. Ved at overveje alle mulige sager og overgange, vil du naturligvis gå hen imod enklere løsninger.

Forhåbentlig lærte du nogle af grundene til, at nogle apps føler sig uhyggelige, og endnu vigtigere, føler dig bemyndiget til at løse uønsket gennem design!

Nød du historien? Efterlad nogle klapper her på Medium og del det med dit iOS-design / dev-venner. Vil du holde dig opdateret om det nyeste inden for mobilappdesign / dev? Følg mig på Twitter her: https://twitter.com/nathangitter

Tak til David Okun for at have revideret udkast til dette indlæg.