Design til mobile apps: Overordnede principper, fælles mønstre og retningslinjer for grænsefladen

Som en del af Intuuts kerneinitiativer til yderligere at kultivere mobil første tænkning og fremskynde vækst på globale markeder er Intuit Small Business Groups Design Org skiftet fra en model til design og forsendelse af prioriterede funktioner til en model, hvor enhver designer er ansvarlig for ende-til- ende, oplevelser på tværs af enheder, som inkluderer design til vores produkter og tjenester på desktopweb, mobilweb, desktop-klientapps og indbyggede mobilapps.

Som designleder for vores økosystem af indbyggede mobile produkter i de sidste par år begyndte jeg at få en masse spørgsmål omkring vejledning og principper for mobildesign. Jeg har bemærket, at mange af designere, produktledere og ingeniører, der er nye inden for mobilappdesign eller ikke lever og indånder mobilappudvikling hver dag, ikke forstod karakteren af ​​at designe til native platforme og enhedsfunktioner. For at forstærke forestillingen om, at "cross-device" og "mobile first" ikke kun handler om at designe til mindre skærme og skalere på tværs af flere enhedsstørrelser, samarbejdede jeg med Design Systems Team for at etablere et sæt mobile mønstre og retningslinjer, så designere kan ramme jorden løbende eller løbe endnu hurtigere med mobil design. Vi har for nylig offentliggjort nogle retningslinjer, værktøjer og ressourcer på vores interne designværktøjskasse, som jeg syntes, det ville være dejligt at dele nogle nøglepunkter og takeaways med et bredere publikum, da dokumentationen adresserer mange ofte stillede spørgsmål omkring mobile mønstre.

For det første vil jeg starte med at sige, at det, jeg skriver her, blot er til vejledning. Vores mantra for enhver form for dokumentation for mønsterretningslinjer, vi leverer, er, "Giv mig vejledning, men lad mig køre." Vi vil ikke være receptpligtige, og vi vil ikke fortælle dig, hvordan man designer, men dette er en godt udgangspunkt for at få dig i gang med indbygget mobildesign. Hvorfor kalder vi indbygget mobil? Når vi fortsætter med at designe enheds-agnostiske, ende-til-ende oplevelser og funktioner til produkter og tjenester, skal vi huske på ikke at forsømme de forskellige platforme (dvs. vores mobile produkter tilbydes i øjeblikket på både iOS og Android).

Overordnede principper

1. Respekter platformen

Vi dokumenterede mønstre og komponenter baseret på oprindelige operativsystemer, som vi har apps på: iOS og Android. Når du designer til oprindelige platforme, skal du konsekvent henvise til de oprindelige OS-designretningslinjer for maksimal kvalitet. Husk, at retningslinjer for indfødte platforme konstant udvikler sig, så det er altid god praksis at holde sig opdateret med disse retningslinjer og ofte opdatere din hukommelse og viden.

Apples retningslinjer for menneskelig grænseflade: https://developer.apple.com/ios/human-interface-guidelines/

Googles retningslinjer for materialedesign: https://material.io/guidelines/

2. Fokuser på kundens fordel

Design altid til kundens fordel først. Ingen brugssager er den samme, og mange anvendelsessager har undtagelser. Design ikke noget, bare fordi du kan genbruge et mønster eller en komponent til en anden funktion. Designmønstre hjælper med at forankre os som et system og forene en oplevelse på tværs af et økosystem af produkter, men de skal på ingen måde være det første eller sidste stop i designprocessen. Spørg altid dig selv: Hvordan vil dette gavne kunden?

3. Tænk enheden først

Skub din tænkning ud over "mobil først." Begynd først at tænke på at udnytte enhedens kapacitet. Den indbyggede mobile enhed har meget at tilbyde: berøring, tale, tryk, stedsporing, accelerometer, underretninger osv. Du designer omkring enheden, platformen, brugeroplevelsen. Hvordan kan disse enhedsfunktioner bruges i vores produkter? Hvordan kan den mobile enhed være til gavn for brugerne ud over skærmgrænsefladen foran dem?

4. Husk skalerbarhed i tankerne

Når du vokser fra det forrige princip, skal du huske, at en mobilenhed ikke kun er en telefon. Skalerbarhed på tværs af enheder, mere specifikt mellem en telefon og tablet, er en fælles udfordring blandt designere. Når vi tænker på mobile enheder, ved vi, at der er tablets, telefoner, phablets (ikke lille nok til at være en telefon, ikke stor nok til at være en tablet). Nogle af de tilbagevendende spørgsmål, jeg bliver stillet, er: Bør der være paritet mellem web- og tabletdesign? Kan vi oversætte telefonmønstrene til at være de samme på tabletter? Hvordan designer vi phablets (ikke små nok til at være en telefon, ikke store nok til at være en tablet)? For at besvare disse spørgsmål undersøgte vi sammen med brugere, kiggede grundigt på enhedsgrænseflader og skærmstørrelser og satte nogle standarder. Mens telefonen og tabletten deler mange ligheder, bruger brugerne dem meget forskelligt.

Telefoninterface

Mobilgrænseflader MINDRE end 7 tommer bredde skal behandles som en telefon. Syntaks og layout skal tilpasses på tværs af disse enheder så meget som muligt, men vi ønsker også først og fremmest at udnytte retningslinjer og muligheder for indbygget platform.

Et grundlæggende designprincip for mobiltelefoner er kun at inkludere de nødvendige oplysninger. Overbelast ikke brugeren med mere end de har brug for at vide eller gribe ind. Telefonen er en bekvem måde at forbruge oplysninger på farten. Ejere af små virksomheder bruger en telefon til at udføre hurtige handlinger, mens de ikke er på kontoret, fange data, se indhold, og derefter måske lukke den ud og vende tilbage for at kigge senere.

TABLETS INTERFACE

Mobilgrænseflader større end 7 tommer bredde skal behandles som en tablet. Syntaks og layout skal justeres på tværs af disse enheder så meget som muligt, og på ingen måde skal de være nødt til at justere nøjagtigt det samme som de mindre end 7-tommer-grænseflader.

Tablet-design skal se ud og føles som desktopweb, men de skal fungere som telefonen (med tryk / svej / hold bevægelser, overgange osv.). Mange brugere ser tabletten som en hybrid enhed. Vi har fundet mange ejere af små virksomheder, der ikke ejer en computer, men de ejer en tablet, og disse brugere behandler tabletten som en pålidelig enhed, de kan arbejde på.

For at skalere for fremtiden eller yderligere digitale grænseflader, skal du også tænke på ikke-mobile berøringsskærme som tv-skærme, interaktive bordskærme, bilskærme, bærbare skærme, som du kan røre ved osv. Du vil være sikker på, at du kan skalere til flere skærme størrelser, store og små, og begræns dig ikke til kun at tænke på de enheder, dine produkter understøttes af.

Mønstre og retningslinjer

Denne liste er en lille undergruppe af mønstre og retningslinjer, som jeg har fundet, at designere ofte har spurgt om bedste praksis for vores mobile produkter.

Skærmovergange

Et af de vigtigste aspekter, der gør navigering af indhold på indbyggede mobile platforme så dejlig er overgange mellem skærme. To spørgsmål, jeg bliver stillet meget, er: Hvornår skal der bruges et skub (skærm skubbet ind til venstre fra højre)? Hvornår skal der bruges en modal (skærm skubbet opad fra bunden)? Vi har etableret følgende bedste praksis:

Et tryk er hovedsagelig den grundlæggende skærmovergang for at se en ny skærm, der er stablet oven på den forrige skærm. Der er typisk en Back-knap, så brugeren kan se det sidst viste skærmbillede. For skærme, der primært er til visning, såsom transaktionsdetaljer-skærme eller lister, bruger vi et tryk.

En modal bruges typisk, når vi kræver, at brugeren skal vælge, redigere indhold eller indtaste data. Alle vores transaktionsformularer bruger fuldskærmsmodaler, da det kræver mere brugertænkning på grund af flere formularfelter på en skærm. Titellinjerne for disse skærme har typisk Annuller og Gem eller Annuller og Udført handlinger. Når du derefter trykker på Gem, får du en push-skærm, fordi du ser (ikke redigerer) det gemte indhold.

Opfordring til handlinger

Dette afsnit fremhæver et spørgsmål, som jeg ofte får: "Bør dette opfordring til handling være en knap eller et tekstlink?" I både iOS 'og Android's designretningslinjer er tekst som knapper normen og anbefalingen. Jeg føler dog, at når vi bruger tekst, især med en systemtype på en mørk eller lys baggrund, mister vi en større mulighed for at inkorporere brandelementer, såsom vores økosystemgrønne farve eller linjeikonografi. Så vi er bevidst flyttet væk fra at bruge tekst som opfordring til handlinger og i stedet bruge knapper med høj kontrast, hvilket også gør det meget tydeligt, at det er en opfordring til handling og ikke kun en del af skærmens indhold.

Tomme stater

Vores tomme tilstandsskærme giver et første indtryk for brugere, der er nye i vores produkter. Det består normalt af en illustration, en kort beskrivelse og en klar opfordring til handling. En almindelig og nuværende designtrend er brugen af ​​grå tekst på en lys baggrund. Hvis du beslutter at følge denne tendens, skal du sørge for, at teksten er læsbar og tilgængelig ved at analysere forgrunds- og baggrundsfarver for at imødekomme kravene til farvekontrast på WCAG 2.0.

CARETS

For det første, ja, det er stavet caret, ikke karat eller gulerod. :) Carets bruges til at fremme synlighed. Historisk set forsøger vi at bruge carets til hvert tilfælde, vi ønsker at indikere, at brugeren skal trykke på rækken for at se mere. Imidlertid arbejder vi i vores former for at bevæge os væk fra at bruge carets og i stedet bruge den ekstra ejendom ved at skabe visuelle signaler og konversationsindholdsdesign for at indikere tap-mål for at se mere. Efter nogle brugertest med forskellige designbehandlinger har vi fundet ud af, at opdagelsesegnethed ikke er så meget af et problem, som vi troede. Brugere trykker naturligvis på rækker, uanset om der er flere oplysninger, der gives dem eller ej. Vi vil kun bruge carets, når det er absolut nødvendigt.

Handlingsark

Generel tommelfingerregel for indbygget mobildesign: Brug handlingsark, når der er flere handlinger, der er forbundet med en enkelt opfordring til handling (det er ikke en systemblokerer). Apple iOS-retningslinjer kalder disse handlingsark. Google Android kalder disse bundark. Brug handlingsark / bundark, når der er flere handlinger, der er forbundet med en enkelt opfordring til handling.

Kort eller fliser

Et kort (eller fliser, som andre hold kan kalde det) er en komponent, der fungerer som en rektangulær beholder til en vis mængde information: visuelle elementer, instruktionstekst, diagrammer og handlingsudløsere. Der er to typer kort baseret på udseende og brug: handlingskort og infokort.

Dialoger

Vi bruger oprindelige systemdialoger til kritiske alarmer, tilladelsesrelaterede alarmer, systemblokkeringsalarmer osv. Nøgleordet er "alarm". Bemærk, at til handlinger, der ikke er relateret til disse ting, forsøger vi at bruge handlingsark.

Skrifttyper

Den generelle regel for indbygget mobildesign er at bruge systemskrifter så meget som muligt. Vi havde dog brug for at integrere vores brand og stemme og tone for at skabe det, vi kalder "QuickBooks Ownable Moments." Til store overskrifter og underoverskrifter, bruger vi vores brand fonts. Til brødtekst bruger vi systemskrifter. For skrifttyper inden for knapper bruger vi systemskrifter.

Skifter

Vippekontakter bruges til at udløse en binær operation (dvs. at tænde og slukke noget). Det bruges ofte til at erstatte en metafor til web-afkrydsningsfelt. Vi har en masse afkrydsningsfelter i vores webprodukter, så når vi designer til indbygget mobil, ønsker vi at sikre, at vi kun søger at erstatte binære afkrydsningsfelter, der giver mulighed for ting som at aktivere eller deaktivere indhold, vise / skjule indhold eller felter, tænde / fra skat, spore retur for kunder i stedet for afkrydsningsfelter, der bruges til at vælge flere elementer.

Igen, dette er blot et par retningslinjer for, hvordan du kommer i gang eller for at fremskynde din mobile første designproces, især for indbygget mobil. Du er driveren og designeren med kreativ licens til at definere en ende-til-ende brugeroplevelse for dine produkter og tjenester. Stol på din tarm, følg dine instinkter, men husk altid at respektere platformene, fokusere på kundens fordel, tænk enheden først og husk skalerbarhed i tankerne!

Yvonne So er en vigtigste UX Designer @Intuit, der i øjeblikket skaber meningsfulde oplevelser for små virksomheder rundt om i verden. Med en lidenskab og mission for at gøre teknologi mere inkluderende for alle, taler hun og skriver regelmæssigt om mobil UX, tilgængelighed, innovation og empatisk design.