Share
I dag snakker vi med to mobile brukergrensesnittdesignere om hvordan de utformer vellykkede mobilgrensesnitt og intuitive navigasjonsløsninger. Vi lærer hvordan Sacha Greif jobber med den begrensede plassen til iPad ved hjelp av plassbesparende brukergrensesnitt. Eryk Pastwa diskuterer hvordan man skal designe for flere mobilstørrelser, og hvordan man skal teste designene for maksimal virkelig bruk i verden. Ta en titt på deres arbeidsflyt, og de beste praksisene de begge legger på plass i sine prosjekter.
Dette innlegget er Dag 3 i vårt Interface Design Session. Creative Sessions "Session Day 2Session Day 4"Navigasjon er spesielt viktig for mobilgrensesnitt på grunn av begrenset plass og begrensede interaksjoner. Folk kan ikke åpne appen din i flere faner, bruke hurtigtaster eller lage makroer, så det er viktig at alle deler av appen din er enkle å få tilgang til.
Skisser (vist her for LePost iPhone app) lar deg raskt gjenkjenne gjennom ulike ideer.
For Le Mondes avisapp, var navigasjon en av de største bekymringene. Hvordan holder du en avis lineær struktur, men gir deg rask tilgang til en enkelt side eller artikkel? Og hvordan drar du nytte av en avis vakre utforming, samtidig som den gir maksimal lesbarhet på en mindre fysisk overflate?
Verktøy som Omnigraffle kan hjelpe deg med å planlegge appens samlede arkitektur.
Først visste vi at vi ønsket å levere to modus for navigering: en "fysisk" modus som lar deg bla gjennom avisens faktiske layout og en "tekst" -modus som bare inneholder artikkelens innhold. Utfordringen gjorde det enkelt å bytte mellom moduser.
Vår løsning var å skape et romlig forhold mellom hver modus.
Vår løsning var å skape et romlig forhold mellom hver modus. For eksempel finnes i iPhone-appen hver modus på parallelle topp- og bunnspor, og bytte fra den ene til den andre utløser en vertikal skyveanimasjon. Dette sikrer at brukerens mentale modell samsvarer med appens arkitektur. Hvis du bare forlater appens seksjoner som en serie av uoverensstemmende skjermer, blir det mye vanskeligere for brukeren å få en følelse av hvor hun står. Det er derfor horisontale lysbildeoverganger er så utbredt på iPhone.
En stor fordel med fysiske aviser og bøker over sine digitale kolleger er at du kan åpne dem på en hvilken som helst side du vil ha. Du kan starte fra forsiden, men hvis du foretrekker å lese sportsseksjonen først, er det ingenting som stopper deg. Vi ønsket å gjenskape den samme friheten med et mobilt grensesnitt, så vi undersøkte flere alternativer. Først har vi lagt til en innholdsfortegnelse som kan nås når som helst i appen. Det er en veldig rask måte å hoppe til en bestemt artikkel eller avdeling i avisen, men vi visste at det ikke var nok. Vi ville ikke redusere hele avisen til en tørr liste over artikler.
Den scrubber pop-over
Så for iPad-appen brukte vi også Apples nye pop-over-UI-element i forbindelse med en skrubber for å vise en forhåndsvisning når du "scrub" over avisens paginering. Og for å sikre at den fysiske avisen aldri var for langt unna, la vi til en navigator-pop-over til tekstmodusen. Denne pop-overen inneholder en miniatyrversjon av hver side, som lar deg trykke på en artikkel for å få tilgang til den uten å forlate nåværende modus.
Den splittede visningen
Nøkkelen her er å få alle disse funksjonene ut av veien, så lenge de fortsatt er oppdagbare.
Til slutt tok vi også fordel av en annen Apple UI innovasjon, splittet visning. Når du er i liggende modus, kan du bruke venstre rute for å navigere gjennom innholdsfortegnelsen mens du leser i høyre rute. Med så mange forskjellige navigasjonsmoduser, er det fare for at appen din blir oppblåst og ubrukelig. Nøkkelen her er å få alle disse funksjonene ut av veien, så lenge de fortsatt er oppdagbare. En god teknikk for å oppnå dette er overbelastning av eksisterende elementer.
For eksempel, i videospillere som Youtube, angir tidslinjen din posisjon, men fungerer også som en skrubber som lar deg styre den. Kontrast dette med tilbakespoling og fremoverknapper, som lar deg bevege deg rundt i videoen, men gir deg ingen informasjon om posisjonen din. Hvis du bruker dette prinsippet, når brukeren er klar, vil de naturligvis oppdage funksjonen som hadde gjemt seg i vanlig visning hele tiden, og overgangen mellom nykommeren og strømbrukeren vil skje sømløst.
Sacha er en 25 år gammel web- og brukergrensesnittsdesigner fra Frankrike, som også har bodd i Kina, Sveits og USA. Se Sachas portefølje, blogg, eller følg @SachaGreif på Twitter.
Mobile er for tiden en av de raskest voksende bransjer. Alle ser hvor mye som har endret seg i hverdagen etter at den første iPhone ble utgitt i 2007. Hadde noen lagt ut noe på nettet via mobile enheter før? Dette er åpenbart klichéer, men de viser hvor raskt ting endrer seg.
La oss komme tilbake til 2010. I første halvår kom iPad, ny iPhone med iOS 4, den helt nye Samsungs plattform: Bada, en ny versjon av Android-systemet og en rekke nye enheter over en seks måneders periode. Den viser nøkkelpunktet til alle mobile tilkoblede design: bare overveldende mangfold. Derfor elsker vi mobil så mye.
Så hvert prosjekt må begynne med dette svært grunnleggende spørsmålet: hvilken enhet / er vi designer for?
Generelt sett finnes det på markedet rundt seks hovedsystemer, hvor forskjellige enheter fungerer, og som vi for øyeblikket designer og utvikler. Hver av dem kan arbeide med svært forskjellige innskrivningsmetoder og følge andre retningslinjer for brukergrensesnitt. Så hvert prosjekt må begynne med dette svært grunnleggende spørsmålet: hvilken enhet / er vi designer for?
Det er det første punktet som bestemmer hele resten, det setter utvalget av muligheter og teknologier vi kan velge fra senere, og viser oss våre grenser. Ved første øyekast virker det enkelt og enkelt, men det kan lett bli veldig vanskelig, når du må designe en applikasjon beregnet på mange forskjellige enheter. Hva er viktig da? Å gi brukerne den mest liknende opplevelsen, uavhengig av system eller, i motsetning til å dra nytte av mer avanserte enheter og deres teknologier?
Den neste tingen vi tar i betraktning i begynnelsen er antall resolusjoner søknaden må støtte. Å spørre om oppløsning høres nylig litt utdatert når flertallet tenker "bare" om iPhone. Men alt kommer tilbake til mobilstandarder - nå tenker jeg på iOS må du tenke på 320x480, 640x960 og 1024x768 resolusjoner. Det er ikke så mye å sammenligne med JAVA ME - hvis søknaden din skal fungere der, bør du støtte minst tjue forskjellige skjermoppløsninger og enda flere fysiske størrelser!
Søknaden om Allegro skulle distribueres via bluetooth-enheter (bluAir) under selskapets årlige arrangement. Vi måtte nå flertallet av alle enheter som er til stede på det polske markedet i det øyeblikket. Vi valgte også JAVA ME som en tverrplattform, men samtidig måtte vi støtte tjueen forskjellige skjermoppløsninger.
Etter min mening er det å prøve å tenke fra brukerens synspunkt en grunnregel, gyldig for alle UI-prosesser og generelt for alle kommersielle design, da målet er enkelt: Brukerne må sette pris på design. Du må definere hva som er målgruppen din, hvem skal bruke søknaden din, hva er i innholdet du tjener? Svar på disse spørsmålene kan hjelpe deg med å bestemme hvordan du kan forbedre det opprinnelige konseptet og hva du skal gjøre for å hjelpe brukerne med å finne ønsket innhold enkelt eller for å utføre de nøyaktige oppgavene.
Allegro søknad fargevalg.
Allegro-søknaden var ganske utvidet dagsorden. Den inneholdt mye informasjon gruppert i flere kategorier som guidet brukere gjennom en hendelse.
Å vite brukerne bidrar også til å bestemme begrensninger. Det er ganske klart at yngre brukere for eksempel lærer raskere og er mer åpne for nysgjerrige nyheter. Med dette markedet kan du vurdere mindre vanlige eller ganske nyskapende navigasjonssystemer. Men for bankapplikasjoner ville jeg være ganske konservativ og ville prøve å tenke på middelaldrende brukere med synsproblemer, da disse feilene er svært vanlige i moderne populasjoner i den aldersgruppen.
Det blir klart at informasjonsarkitekturen i mobil teller enda mer enn hvordan ting ser ut.
Etter at kravene og begrensningene er oppnådd, tegner vi første mockups. Vi setter strømmen av søknaden og arbeider med utformingen av navigasjonselementene. Så, i utgangspunktet, lager vi et skjelett, vi skal huden senere. Det er fasen, når søknaden kan bli brukbar og intuitiv eller ikke. Grunnregelen her er å holde hele grensesnittet så enkelt som mulig. De mobile GUIene må være veldig enkle.
Vi tester våre ideer trukket på ark av papir og / eller enkle wireframes på enheter, og prøv å forestille seg deres "mobile kontekst". Når applikasjonen er ganske kompleks, oppretter vi enkle HTML-prototyper, noe som gir oss den opplevelsen som kan ligner på endelige produkter.
Vi begynner også å tenke på visuell estetikk da, men for å være ærlig, tror jeg at selv de mest fremragende programmene vil mislykkes hvis navigasjonen ikke er grei. Selvfølgelig kan visuell design endre helhetsinntrykket av et program, men spesielt i tilfelle av applikasjonsapps dør brukerne dybere inn i dem veldig fort. Det blir klart at informasjonsarkitekturen i mobil teller enda mer enn hvordan ting ser ut.
Allegro applikasjonsnavigasjon.
Allegro-applikasjonen ble navigert med direkte pad eller venstre / høyre hardtaster. Siden det hadde hierarkisk navigasjon, bestemte vi oss for å bruke brødsmuler som viste nåværende sted i form av enkle ikoner.
Grafisk design er sikkert vår favorittdel av hele utviklingsprosessen. Selvfølgelig bidrar visuell design til å bygge godt førsteinntrykk, men vi trives hovedsakelig fordi vi bare elsker når produktene våre ser bra ut. Mobil grafisk design er en veldig ung disiplin, så i virkeligheten utforsker vi fortsatt mulighetene. Hvis du jobber med et erfarent team av utviklere, er nesten ingenting umulig, selv på mer uvanlige plattformer.
Vi valgte Pixel-skrifter, fordi de var lesbare på både små og store skjermer.
Den viktigste regelen her er å teste design på ekte enheter. Det er stor forskjell mellom "desktop" skjerm og mobil skjerm, og disse forskjellene øker fortsatt. Og det handler ikke bare om pixel tetthetsforskjeller, men også om fargeskift. Selv noen av de moderne smarttelefonene støtter fortsatt ikke 16M farger, så når vi designer for slike enheter, er vi alltid klar over blå nyanser.
Arbeider med skjermstørrelse.
Vi tar telefonene og prøver å se på våre design hjemme, på puben i nærheten, og på gaten under alle værforhold, spesielt når det er veldig solfylt eller overskyet. Dette er stedet der mobilapplikasjoner brukes. Vi finner ut hvor å justere kontrast, endre skriftstørrelsen eller gjør knappene større. Denne regelen er gyldig uansett om du designer et program eller bare et enkelt spill. Vi tester alltid på dette stadiet, fordi det senere i løpet av kodingen er det noen ganger svært vanskelig å omorganisere ting. Så fortsett og test det!
Eryk er en svært erfaren designer fra Polen. Hans arbeid er konsentrert om design for webtjenester og mobiler. Han utvikler intuitive og klare brukergrensesnitt for både små og store applikasjoner. Besøk Eriks portefølje, ta en titt på det store arbeidet fra Mobo Studio, og følg @mobostudio på Twitter.
Accentsconagua