Introduksjon til IOS Design Patterns

De fleste etablerte mobile plattformene har et sett med designmønstre, skriftlige eller uskrevne retningslinjer for hvordan ting skal se, føle og fungere. Bruk av beprøvde designmønstre forbedrer brukervennligheten til produktet ditt, øker konverteringen, og gir brukerne en følelse av kjennskap. Å ignorere standarder vil forvirre og frustrere brukere, og noe som hver designer skal prøve å unngå så mye som mulig.

I denne artikkelen tar vi en titt på designmønstre på iOS ved å vise deg en rekke eksempler som illustrerer hvordan eksisterende applikasjoner bruker noen av disse designmønstrene.

Hva er designmønstre?

Kort sagt, et designmønster er en tilbakevendende løsning som løser et bestemt designproblem. Fordi det er gjentagende og brukere kommer over det ofte, blir de raskt kjent med løsningen mønsteret gir.

Hamburgerikonet, for eksempel, er blitt et kjent designmønster. Vi vet alle at det vil åpne en meny når ikonet er tappet. Denne oppførselen er så inngripen at det ville forvirre brukeren hvis du trykker på ikonet resulterte i en annen handling.

Når designere ikke følger designmønstre, og i stedet velger å implementere sin egen løsning, er det to muligheter:

• Brukeren er irritert eller frustrert fordi de ikke forstår hva designen eller grensesnittet prøver å fortelle dem eller fordi de ventet et annet resultat.
• Brukeren er glad, fordi den nye løsningen er en forbedring i forhold til den eksisterende. Vi vurderer dette ofte innovativ design, fordi det kan være en spillveksler, erstatte eksisterende designmønstre.

Vær forsiktig, fordi linjen mellom en frustrerende opplevelse og en innovativ design er ofte tynnere enn du forventer at den skal være.

Med det for øye, la oss fokusere på iOS og se hvordan designmønstre gjelder for Apples mobilplattform.

Apples retningslinjer

For å dyrke konsistente designstandarder for iOS-plattformen, gir Apple et dokument kjent som Retningslinjer for menneskelig grensesnitt eller HIG. Det definerer standarder som utviklere og designere må følge med. Eksempler er standard tastaturoppsett, datovelger og statuslinjen.

Design Vision

Konstruksjonsstandarder er imidlertid ikke begrenset til bruk av konsistente brukergrensesnittelementer. Sammen med utgivelsen av iOS 7 skisserte Apple også sin nye visjon om design, som utgjør tre hovedtemaer som beskrevet i Apples IOS Human Interface Guidelines:

• Aktelse. Brukergrensesnittet hjelper brukere å forstå og samhandle med innholdet, men konkurrerer aldri med det.
• Klarhet. Tekst er lesbar i alle størrelser, ikoner er presise og klare, utsmykninger er subtile og passende, og et skarp fokus på funksjonalitet motiverer designen.
• Dybde. Visuelle lag og realistisk bevegelse gir vitalitet og øker brukernes glede og forståelse.

Se og føl

Den største endringen i iOS 7 var måten vi visuelt presenterer elementer på. Flatt design ble introdusert til iOS-brukere, som var en stor endring. Mange syntes det var ikke nødvendigvis en forbedring.

Funnily nok, ser tilbake på iOS 6, den generelle oppfatningen er at skeuomorphic design er utdatert. Våre oppfatninger har tydelig skiftet.

Når folk blir vant til den flate utformingen av iOS 7, betyr det at de blir vant til en bestemt visuell stil. For å si det annerledes, som utvikler, vil du helst holde deg til den visuelle stilen til iOS 7, fordi det er hva brukerne har kommet til å forvente fra iOS.

Selvfølgelig handler det ikke bare om søknaden din. Hvordan det oppfører seg og føler, er også et viktig aspekt å vurdere. Subtile animasjoner har blitt et varemerke for iOS 7. Dette har så mye innvirkning på utseendet på applikasjonen din som bildene gjør.

Animasjonene du bruker i søknadsemnet ditt og er en del av designmønstre. Brukere sanser og setter pris på raffinerte animasjoner, noe som betyr at det er verdt å sette krefter inn i dem.

Vi bruker mye ikonografi under designprosessen av et program. Ikoner er et viktig verktøy for grensesnitt design patters som de har en global betydning, uavhengig av brukerens kontekst.

Å bruke ikoner på riktig måte er en god start for å bruke designmønstre, men utseendet på disse ikonene er også avgjørende. Vi har blitt kjent med flat og enkel ikonografi. Svært detaljert ikonografi betyr at vi ikke oppfyller brukerens forventninger og som en konsekvens bryter effektiviteten av designet.

Elementer som støtter designmønstre

Et av de store nye designmønstrene er bruken av gjennomsiktige brukergrensesnittelementer. Det revolusjonerte kontrollsenteret er et godt eksempel. Apple bruker gjennomsiktig og uklarhet for å gjøre brukeren oppmerksom på innholdet i bakgrunnen. Det bidrar til å gi brukerens kontekst som de bruker kontrollsenteret.

Bruken av negativ plass bidrar også til å gjøre design mer effektive og brukbare. Det er en av de viktigste komponentene som gjør iOS 7 så mye forskjellig fra iOS 6. Kombinert med et begrenset sett med nøkkelfarger, gir dette deg de essensielle ingrediensene for godt gjennomtenkt brukergrensesnitt design. Som designere og utviklere er vi tvunget til å tenke mer om designvalgene vi lager - selv de små.

En stor, og kanskje kontroversiell, endring har vært bytte til knapper uten kantlinje, en kritisk endring i iOS design mønstre. Det er kanskje også en av grunnene til at iOS 7 først mottok mye kritikk. Det er en mer ekstrem tilnærming til flat design. Den forandringen illustrerer perfekt den fine linjen mellom nyskapende design og design som resulterer i frustrasjon.

Og så, selvfølgelig, for brukergrensesnittelementer, er det nitty-gritty detaljer du må vurdere. Ikonene på verktøylinjen og navigasjonslinjen, for eksempel, bør ha et tappbart område på minst 44x44 poeng. For ikoner på fanebjelker anbefales 50x50 poeng. Maksimalt antall ikoner i en fane er fem for iPhone og iPod Touch. En fullstendig liste over anbefalte størrelser på ulike brukergrensesnittelementer finnes i retningslinjene for menneskelig grensesnitt.

Det samme gjelder for bevegelser. Å bruke uklare eller vanskelig å gjette bevegelser for vanlige handlinger fører til forvirrede brukere. Å bruke en klemmebevegelse for å åpne en lenke, virker som en ganske dårlig ide. Ikke sant?

Et annet viktig fokuspunkt for iOS 7 er typografi. Apple oppfordrer bruk av en enkelt, dynamisk skrift i stedet for flere skrifter.

Det er også en klar visjon med hensyn til søknad branding. Selv om vi har blitt vant til eksplisitt branding i applikasjoner, foretrekker Apple nå merkevarer som er mindre eksplisitte i måten de merker og markedsfører seg på. Med andre ord, design eller brukergrensesnitt skal være fokus-ikke merkevaren. Programmets nøkkelfarger og designsprog er perfekte for å fremme et merke på en ikke-påtrengende måte.

iPad grensesnitt

Designmønstre dikterer ikke bare beste praksis for design generelt - de blir også spesifikke. Noen enheter har eller krever forskjellige standarder. Noen iPad-grensesnitt er et godt eksempel.

Popovers og split view controllers, for eksempel, er brukergrensesnittelementer du ikke finner på en iPhone eller iPod Touch. Disse designmønstrene passer til større skjermer som den som finnes på iPad, iPad Air og iPad Mini.

Hva å huske

• Prioritere og presentere kjernefunksjoner først. Identifiser de viktigste brukerhistoriene. Disse skal kreve minst mulig navigasjon. 
• Designmønstre bruker ofte enhetsspesifikk funksjonalitet for å forbedre relevansen av et program og innholdet. Stedet, for eksempel, brukes ofte til å vise relevant innhold til brukeren.
• Gi navigeringsanvisninger slik at brukerne alltid vet hvor de er i søknaden din.
• Designmønstre er ofte fokusert på å optimalisere oppfordringer til handling slik at brukerne gjentatte ganger blir påminnet om den neste handlingen de må ta. Tumblr-programmet illustrerer dette godt.

• Brukerinngang skal være så enkelt og enkelt som mulig. Reduser antall felt i et skjema og bruk standardverdier når det er mulig. Tumblr er et godt eksempel på smarte standardinnstillinger.
• Hvis et brukergrensesnittelement tappes, må du sørge for at dette er klart for brukeren gjennom elementets design.
• Mobil designmønstre består ofte av horisontale strømmer i stedet for vertikale. Aktiviser automatisk en ny visning i stedet for å vente på at brukeren skal bla nedover. Det er viktig å gjøre opplevelsen jevn og sømløs. I motsetning til et nettsted er det ikke nødvendig å begrense en bestemt handling (for eksempel å kjøpe) til en enkelt visning. Det er ofte mer effektivt og elegant å veilede brukeren gjennom en rekke visninger med en enkelt oppfordring.
• Til slutt, forstå sammenhengen mellom mobile enheter. Mobile enheter brukes for det meste i korte utbrudd, noe som er svært forskjellig fra hvordan vi jobber med en stasjonær eller bærbar PC.

Konklusjon

Design mønstre stole på sunn fornuft og praksis. Det er meningsløst å mål for nyskapende design når sjansen er at du vil ende opp med en frustrert bruker. Hold deg til retningslinjer når de er tilgjengelige, bruk etablerte designmønstre, og forbedre brukervennligheten til produktet ditt.

Forskning hvilke løsninger andre programmer bruker til å løse visse problemer. Hvordan håndterer de fleste applikasjoner brukerregistrering? Hva er testede tilnærminger for å integrere e-handel? Hvordan er sosial deling best integrert i en søknad? Å være oppmerksom på detaljer mens du bruker programmer, er en fin måte å bli kjent med ulike designmønstre.

ressurser

• IOS Human Interface Retningslinjer
• UX arkiv
• Bruker Onboarding