10 načel oblikovanja mobilnih vmesnikov

Ne glede na to, kako ga izmerite, je mobilna naprava ogromna in raste. Konvergenca računalništva v oblaku, vseprisotnega širokopasovnega dostopa in dostopnih mobilnih naprav je začela spreminjati vse vidike naše družbe. Analitiki napovedujejo, da bodo do leta 2015 mobilni telefoni prehiteli namizne računalnike kot naše glavno sredstvo za dostop do interneta.

Da bi lahko sledili tej hitro spreminjajoči se pokrajini, morajo oblikovalci in razvijalci - ter ljudje, ki delajo z njimi - začeti razmišljati o mobilnih napravah kot primarnem cilju projekta; ni nekaj, kar bi se na namizni projekt osredotočilo kot naknadna misel.

Mobilno je drugačno

Čeprav so pametni telefoni in namizni računalniki pogosto združeni kot računalniške naprave, se med seboj zelo razlikujejo: majhen zaslon v primerjavi z velikim zaslonom, prekinitvena povezava v primerjavi z zanesljivo povezljivostjo, nizka pasovna širina v primerjavi s široko pasovno širino, napajanje z baterijami in priključitev itd. Glede na ta seznam vas bo morda zamikalo razmišljati o mobilnih napravah kot o podhranjenih različicah 'pravih' računalnikov. Ampak to bi bila napaka.



Pravzaprav velja ravno obratno: pametni telefoni so v marsičem dejansko močnejši od namiznih. So zelo osebni, vedno vklopljeni, vedno z nami, običajno povezani in neposredno naslovljivi. Poleg tega plazijo z zmogljivimi senzorji, ki lahko zaznajo lokacijo, gibanje, pospeševanje, orientacijo, bližino, okoljske razmere in še več.

Glede na številne razlike med mobilnimi in namiznimi računalniškimi napravami ne bi smelo biti šok, da se oblikovanje za mobilne naprave zelo razlikuje od oblikovanja za namizje. Na svojih delavnicah sem sestavil seznam 10 načel oblikovanja mobilnih vmesnikov, ki ljudem, ki poznajo oblikovanje in razvoj namizja, pomagajo sprostiti edinstveno moč mobilne platforme.

kako uporabiti referenco za umetniški projekt

01. Mobilna miselnost

Zaradi razlik med mobilnim in namiznim računalnikom je nujno, da se pred začetkom vključite v mobilno miselnost.

  • Bodite osredotočeni : Več ni boljše. Urejajte svoje funkcije neusmiljeno. Ti so bo moral stvari pustiti zunaj.

Wenger Giant dokazuje, da več ni nujno boljše

Wenger Giant dokazuje, da več ni nujno boljše
  • Bodi edinstven : Vedite, v čem je vaša aplikacija drugačna, in jo razširite. V morju mobilnih aplikacij je veliko rib. Če v vaši aplikaciji ni nič posebnega, zakaj bi jo kdo izbral?
  • Bodite očarljivi : Mobilne naprave so zelo osebne. So naši stalni spremljevalci. Prijazne, zanesljive in zabavne aplikacije so v veselje uporabljati, ljudje pa se bodo na izkušnjo zelo navezali.
  • Bodite pozorni: Razvijalci aplikacij se prepogosto osredotočajo na to, kaj bi bilo zabavno razviti, na svoj lastni mentalni model aplikacije ali na svoje osebne poslovne cilje. To so dobra mesta za začetek, vendar se morate postaviti v kožo svojih uporabnikov, če kdaj upate, da boste ustvarili privlačno izkušnjo.

02. Mobilni konteksti

Podoba zasedenega profesionalnega dirkanja po letališču z vrečko v eni roki in pametnim telefonom v drugi je tista, ki si jo predstavlja veliko ljudi, ko razmišljajo o kontekstu mobilnega računalništva. To je zagotovo en kontekst, vendar ni edini. Da bi se začeli postavljati v kožo svojih uporabnikov, moramo razmisliti o treh glavnih mobilnih kontekstih: Dolgčas, Zaseden in Izgubljen.

  • Dolgčas : Veliko ljudi uporablja pametne telefone na kavču doma. V tem kontekstu so izjemne in čudovite izkušnje, namenjene daljši seji uporabe. Kljub temu so prekinitve zelo verjetne, zato se prepričajte, da lahko vaša aplikacija nadaljuje tam, kjer je vaš uporabnik končal. Primeri: Facebook, Twitter, Angry Birds, spletni brskalnik.
  • Zaseden : To je scenarij 'tek skozi letališče'. Sposobnost hitrega in zanesljivega opravljanja mikro nalog z eno roko v grozljivem okolju je ključnega pomena. Ne pozabite, da bo imel uporabnik v tem okviru vizijo predora, zato so pomembni ogromni cilji in drzna zasnova. Primeri: TripIt, e-pošta, koledar, bančništvo.
  • Izgubljeno : Uporabniki, ki so v tranzitu, v neznani okolici ali v znani okolici, vendar jih zanima nekaj neznanega, spadajo v izgubljeno kategorijo. V tem kontekstu sta zelo zaskrbljujoča nevezna povezljivost in življenjska doba baterije, zato bi morali ponuditi določeno raven podpore brez povezave in biti varčni pri uporabi geolokacije in drugih akumulatorjev. Tipični primeri: Zemljevidi, Yelp, Foursquare.

03. Globalne smernice

Različne aplikacije zahtevajo različne pristope, zasnove in tehnike. Kljub temu narava žepne naprave z zaslonom na dotik nakazuje več globalnih smernic; stvari, ki so vedno pomembne.

  • Odzivnost : Odzivnost je absolutno kritična. Tega ne morem dovolj poudariti. Če vaš uporabnik nekaj naredi, mora vaša aplikacija takoj potrditi interakcijo. Upoštevajte, da odzivnost in hitrost nista isto. V redu je, če nekatere operacije zahtevajo čas. Samo prepričajte uporabnika, da delate na njem.
  • Poljski : Poljščina je izjemno dragocena. Zaradi 'stalne spremljevalne' narave našega odnosa do pametnih telefonov bomo opazili in cenili veliko pozornosti, kako dovršiti majhne podrobnosti. Mislim, da je to kot 'prileganje in dodelava' avtomobila. Motor je lahko zmogljiv, karoserija pa čudovita, a če bo na avtocesti veliko hrupa ali ropota na cesti, se bo izkušnja za voznike začela slabšati.
  • Palec : S pojavom vmesnikov na zaslonu na dotik vsi vedno govorijo o 'prst to' in 'prst to'. V resnici moramo palec načrtovati. Če uporabnik s svojim pametnim telefonom ne komunicira z dvema rokama, je skoraj nemogoče prsti na zaslon. In tudi v dvoročnem prijemu bo verjetno tipkala z dvema palcema. Privzeti so palci.
  • Cilji : Poglejte si desni palec. Ne konica, ampak obraz - del, ki pride v stik z zaslonom telefona. Moja je približno velikost in oblika pokrovčka za steklenico. Odlično za veliko stvari, vendar še zdaleč ne natančno, ko gre za ciljanje na majhna področja mojega pametnega telefona. Zdi se, da je čarobna številka elementov uporabniškega vmesnika, prijaznih do palca, 44 slikovnih pik. Izjem je veliko, a to je dobro pravilo. Zavedati se morate tudi, kam postavite cilje med seboj. Na primer, slaba ideja bi bila, če bi gumb Backspace postavili neposredno ob gumb Pošlji v aplikaciji SMS.
  • Vsebina : Revolucija vmesnikov na dotik je v tem, da nam omogočajo neposredno interakcijo z našo vsebino. To odstrani abstrakcije (na primer miško in sledilno ploščico) in je bolj v skladu s tem, kako so naši možgani ožičeni. Ni mi treba gledati daleč, da bi videl pomen tega: moj dveletnik lahko brez težav upravlja iPad, prenosnik pa je zanj skrivnost. Izkoristite intuitivno moč uporabniškega vmesnika na dotik, tako da zmanjšate krom vmesnika (gumbi, vrstice z zavihki, potrditvena polja, drsniki in tako naprej), kjer je to mogoče, in postavite svojo vsebino spredaj in po sredini.

Clear for iOS je aplikacija s seznamom opravil, ki sploh nima kroma; to je čista vsebina

Clear for iOS je aplikacija s seznamom opravil, ki sploh nima kroma; to je čista vsebina
  • Nadzor : Ko morate dodati kontrolnike, jih poskusite postaviti na dno zaslona (z drugimi besedami pod vsebino). Omislite si stroj za dodajanje, kopalniško tehtnico ali celo računalnik - kontrolniki so pod zaslonom. Če jih ne bi, med njihovo uporabo ne bi mogli videti, kaj se dogaja z vsebino. Temu razmišljanju o resničnem svetu nasprotujte s tradicionalno spletno ali namizno programsko opremo, kjer so navigacijske in menijske vrstice tako rekoč vedno na vrh. To je smiselno v kontekstu miške, ker je kazalec skoraj neviden. Ni tako z 'kazalcem mesa' na koncu vaše roke.
  • Pomikanje : Izogibajte se drsenju. Lahko vam zagotovim, da za mobilne naprave obstaja 'pod pregibom'. Poleg tega ima nepomični zaslon bolj trden in zanesljiv 'občutek' kot pomični pogled, ker je bolj predvidljiv. Seveda se morajo nekateri zasloni pomikati, vendar se je dobro izogniti temu, kjer je le mogoče. Če menite, da je odkritost morda težava, lahko animirano drsljivo vsebino obrnete na njen privzeti položaj, da dobite prefinjen, a učinkovit znak, da je več vsebine zunaj pogleda.

04. Navigacijski modeli

Obstaja veliko novih navigacijskih modelov za mobilne aplikacije (na pamet mi pade radialni navigacijski kot Path), če pa boste uporabili enega od običajnih navigacijskih modelov, izberite tistega, ki je za vašo aplikacijo najbolj smiseln.

  • Brez: pomožne aplikacije za en zaslon (npr. Vremenska aplikacija za iPhone)
  • Vrstica z zavihki: tri do šest različnih vsebinskih področij (npr. Twitter za iPhone)
  • Podrobno: hierarhija vsebine seznamov in podrobnosti (npr. Aplikacija Nastavitve v iPhonu)

05. Uporabniški vnos

Tipkanje smrdi tudi na najboljših napravah, zato morate storiti vse, kar je v vaši moči, da olajšate svoje uporabnike. Na primer:

učenje risanja na tablici
  • Na priljubljenih pametnih telefonih je približno ducat različic tipkovnice (besedilo, številka, e-pošta, URL in tako naprej). Upoštevajte vsa vnosna polja in prikažite tipkovnico, ki bo najbolj uporabna za vnos podatkov.
  • Samodejno popravljanje je lahko tako smešno, da mu obstaja spletno mesto. Razmislite o vsakem od vaših vnosnih polj in se odločite, katere možnosti samodejnega vnosa naj bodo omogočene (na primer samodejno popravljanje, samodejna uporaba velikih začetnic in samodejno dokončanje).
  • Če vaša aplikacija vabi veliko tipkanja, zagotovite, da podpirate ležečo orientacijo za debelušne ljudi, kot sem jaz.

Vzorec različnih tipkovnic, ki so na voljo v sistemu iOS

Vzorec različnih tipkovnic, ki so na voljo v sistemu iOS

06. Geste

Eden najbolj znanih vidikov sodobnih vmesnikov na dotik je, da podpirajo interakcijo uporabnikov, ki temelji na kretnjah. Kolikor geste so kul, morate vedeti več stvari:

  • Neviden : Geste so nevidne, zato je odkritje težava. Odločiti se morate, kako uporabniku razkriti njihov obstoj. Najbolj pameten pristop, ki sem ga videl, je na promocijskih iPadah, nameščenih v Appleovih maloprodajnih trgovinah. Ko se stran prvič naloži, se na vseh področjih, ki jih je mogoče pomakniti, hitro obrnejo nazaj v privzeti položaj. Ta uporabnika takoj povabi s potezo ali potezo, ne da bi morali izrecno navesti, po katerih področjih je mogoče premikati.
  • Dve roki : Poteze z več dotiki zahtevajo dvoročno upravljanje. To se mi zdi še posebej očitno v domači aplikaciji Zemljevidi za iOS, ki za pomanjšanje uporablja potezo odprtega prsta. Ko potujem v tujem mestu s kavo v eni roki in telefonom v drugi, je to moteča omejitev. Android to težavo obravnava tako, da na zemljevid vključi gumbe za povečavo / pomanjšavo, ki so prekriti na zemljevidu (kar pomeni, da lahko še naprej uživate v kavi, medtem ko jo kopite po Londonu).
  • Lepo je imeti : V večini primerov se mi zdijo geste 'lepo imeti', vendar niso kritične. Nekako kot bližnjice na tipkovnici - izkušeni uporabniki jih bodo imeli radi, vendar večina ljudi sploh ne bo vedela, da so tam.
  • Brez zamenjave: Običajni besednjak s kretnjami še ne obstaja, zato je prezgodaj, da bi večina aplikacij preskočila vidne kontrolnike, ki jih je mogoče uporabiti z enim prstom.

07. Usmerjenost

  • Portret je daleč najbolj priljubljena usmeritev, zato najprej optimizirajte za ta primer.
  • Če vaša aplikacija vabi veliko tipkanja, morate podpirati ležečo usmerjenost, da bodo lahko ljudje dostopali do večje tipkovnice.
  • Ko se orientacija nepričakovano spremeni, je to no ... dezorientiranje. Če menite, da se bo vaša aplikacija uporabljala dlje časa (na primer aplikacija Kindle Reader), razmislite o dodajanju usmerjevalne ključavnice neposredno v aplikacijo.

08. Komunikacije

  • Pošljite povratne informacije : Zagotovite takojšnje povratne informacije za vsako interakcijo. Če tega ne storite, se bo uporabnik vprašal, ali je aplikacija zamrznila ali je zgrešila cilj, ki ga je želela zadeti. Povratne informacije so lahko otipljive (na primer vibracija Androida »thump«) ali vizualne (na primer poudarjanje tapnjenega gumba). Če je uporabnik zahteval dejanje, ki bo trajalo dlje časa, prikažite vrtenje ali vrstico napredka, da ga obvestite, da ste prejeli njegovo zahtevo in delate na njem.
  • Modalna opozorila : Modalna opozorila so izjemno napeta in vsiljiva do uporabnikovega toka, zato jih uporabite le, če je nekaj hudo narobe. Že takrat poskusite omiliti intenzivnost, tako da ohranjate jezik pomirjujoč in prijazen. Ne pozabite, da ne uporabljate modalnih opozoril za informacije o vrsti „FYI“.
  • Potrditve : Ko morate uporabnika prositi za potrditev dejanja, je sprejemljivo prikazati modalno potrditveno pogovorno okno (na primer »Ali ste prepričani, da želite izbrisati ta osnutek?«). Potrditve so manj vsiljive kot opozorila, ker so odziv na dejanje uporabnika in zato v kontekstu in morda celo pričakovane. V pogovornem oknu izberite »najvarnejšo« izbiro kot privzeti gumb, da se izognete nenamernim destruktivnim dejanjem.

Aplikacija Twitter za iOS ima popolnoma brez vsebine zagonsko stran

Aplikacija Twitter za iOS ima popolnoma brez vsebine zagonsko stran

09. Izstrelitev

Ko se uporabnik vrne v vašo aplikacijo, potem ko jo je že uporabljal, nadaljujte z operacijo tam, kjer je uporabnik končal. To bo dalo iluzijo hitrosti in prispevalo k splošnemu občutku odzivnosti.

Če je mogoče, mora biti zagonski zaslon, ki se prikaže ob prvem nalaganju aplikacije, podoba aplikacije brez vsebine. Vse, kar je videti interaktivno (na primer gumbi, povezave, ikone, vsebina), bo povzročilo frustracije s povabilom k neuspelim interakcijam.

OPOMBA: Uprite se skušnjavi, da na začetni zaslon postavite materiale za blagovno znamko. Zaradi tega se uporabnik počuti, kot da si ogleduje oglas, in zamerili vam bodo, ker ste ga prisilili, da sedi. Začetni zaslon z blagovno znamko seveda ne traja dlje kot prazen, vendar zaznavanje zamude obstaja ne glede na to.

10. Prvi vtisi

  • Vaša ikona : Vaša ikona mora tekmovati za pozornost v morju drugih ikon. V tem primeru mislite na to bolj kot na vizitko kot na umetniško delo. Bodite dobesedni - pokažite, kaj počne vaša aplikacija. Uporabite močno silhueto in besedilo čim manj. Polirana ikona predlaga uglajeno aplikacijo, zato je vredno posvetiti resen čas in denar, da to storite pravilno.
  • Prvi zagon: Prvi zagon je situacija, ko narediš ali zlomiš. Če se novi uporabnik zmede ali razočara, ko se poskuša seznaniti z vašo aplikacijo, jo bo takoj odložil. Če vaša aplikacija ponuja zapleteno funkcionalnost, boste morda želeli vključiti prekrivno okno z nasveti ali triki ali morda nekaj plošč orientacijskih zaslonov. Upoštevajte, da je to ne nadomestek za dobro zasnovo; če se vam zdi, da ustvarjate veliko besedila pomoči, lahko to kaže, da vaš uporabniški vmesnik potrebuje delo.

Zaključek

Mobilno računalništvo predstavlja osupljivo priložnost za spletne oblikovalce in razvijalce, ki želijo postati produktivni v mobilnih napravah. Da, nekaj je krivulje učenja, toda veliko zapuščenih izkušenj, spretnosti in orodij spletnega strokovnjaka se bo lepo prevedlo. Resda je hitrost sprememb v mobilnem svetu na trenutke lahko nekoliko zastrašujoča - a hej ... vsaj nikoli ni dolgočasno.

Je to všeč? Preberite jih!