Dizajniranje za dodir

Izvrsni dizajni za mobilne uređaje čine više od samog postavljanja cipela na male zaslone: ​​oni čine mjesto za prste i palčeve, smještajući svojeglave dodire naših nespretnih znamenki. Fizičnost ručnih sučelja dizajnere odvodi dalje od konvencija vizualnog i informacijskog dizajna, te na područje industrijskog dizajna. S dodirnim zaslonima stvarna je ergonomija u pitanju. Nije samo kako pikseli izgledaju, već i kako se osjećaju u ruci.

01. Pravilo

Dizajn zaslona osjetljivog na dodir zahtijeva promišljenu svijest o tome gdje se prsti ležerno odmaraju na uređaju. Uhvatite telefon, na primjer, u jednu ruku i, osim ako ne aktivirate dršku telefona s ludim kandžama, uvijek tapkate palcem. Za telefone, dizajn na dodir znači dizajn za palac.

Palčevi su čudesni. Naši palčevi, zajedno s naklonošću tračevima slavnih, odvajaju nas od zvijeri, ali imaju ograničen domet i fleksibilnost. Iako palac može uspjeti pomesti cijeli zaslon svih telefona, ali ne i prevelikih, samo oko trećine zaslona nalazi se na teritoriju bez napora - na dnu zaslona sa strane nasuprot palcu.

Postavite primarne ciljne dodire u ovu vruću zonu koja lupa palcem. Na primjer, kada držite telefon u desnoj ruci, palac prirodno pada u luk u donjem lijevom kutu zaslona:



To je važan razlog zašto se alatne trake i navigacija obično spuštaju na donji rub telefonskih sučelja - suprotno onome što smo navikli za tradicionalna sučelja zaslona. Konvencije za stolni softver stavljaju izbornike na vrh zaslona ili prozora, a web mjesta obično postavljaju primarnu navigaciju na vrh stranica. Naš ograničeni raspon palca, međutim, prevrće tu konvenciju, a navigacija i primarni ciljevi dodira tonu na dno.

Nepristranost donjeg dijela zaslona palca važnija je od lijeve i desne strane. Ispostavilo se da većina nas lako prelazi između lijeve i desne ruke kada se služimo telefonom. Korisnici dešnjaci često favoriziraju ili prelaze u lijevu ruku (na primjer, kada pišu), a ljevičari također često idu svojom desnicom. Iako skromna većina korisnika ide malo češće desnom rukom, nego lijevom, to nije dovoljno jak trend da se dizajneri uzrujavaju.

Pravilo dna zaslona, ​​međutim, primjenjuje se bez obzira koju ruku koristite i daje vam savjete o tome kako organizirati vizualnu hijerarhiju ciljeva dodira. Često korišteni gumbi trebali bi zauzimati dno zaslona radi lakšeg dodirivanja, dok bi ostale kontrole trebale biti gurnute na štetu. Na primjer, u iOS-u je konvencionalno staviti gumbe za uređivanje u gornji desni kut, u jednostavnom prikazu, ali taman izvan dosega da slučajne promjene budu manje vjerojatne.

Spuštanje primarnih kontrola na dno zaslona nije samo stvar udobnosti palca, već i jednostavne činjenice da prsti zasjenjuju zaslon. Dno je mjesto na kojem lebdeće ruke najmanje pokrivaju sadržaj. Da biste sadržaj imali u jasnom prikazu, postavite ga iznad kontrola aplikacije. Ovo je poznati, zdravorazumski izgled koji se odnosi na većinu fizičkih uređaja: iPod-e, kalkulatore, mobitele, kupaonske vage. Sadržaj na vrhu, kontrole na dnu.

02. Ja, Robot

Ovo jednostavno pravilo odozgo / odozdo komplicirano je Androidovim sistemskim tipkama 'moram biti ja' koje obuhvaćaju dno Android uređaja. (Prije izdanja Android 3 'Saća', to su uvijek bili fizički gumbi; počevši od Androida 4 'Ice Cream Sandwich', oni su sada virtualni gumbi.) Ovi sistemski gumbi pripadaju na dnu zaslona iz svih do sada opisanih razloga, ali oni također uvode zbunjujuće natjecanje za kontrole specifične za aplikaciju. Dodavanje kontrola na dnu zaslona znači slaganje alatnih traka jednu na drugu; nažalost, pogreške pri dodiru posebno su česte za složene kontrole na dnu zaslona. U zoni gustog prometa u kojoj palac nastoji lebdjeti i zaklanja pogled, sudari gumba su neizbježni. Na primjer, ovaj izgled početnog zaslona Androida poziva na pogreške:

Uvijek treba izbjegavati slaganje kontrola u dodirno sučelje, posebno na dnu zaslona. Nažalost, to znači da Android aplikacije trebaju imati svoje kontrole na vrhu zaslona kako bi izbjegle prenatrpanost sistemskih gumba. Nije idealno: ovo stavlja navigaciju izvan zone palca, a kad dodirnete gumb, ruka prekriva cijeli zaslon. Ali to je bolje od alternative koja poziva na pogreške masnog prsta.

Za Android, navigacija i kontrole aplikacija trebale bi plutati prema vrhu. Ovo je obrnuto od konvencije za iPhone, gdje gumb Početna ne stvara istu vrstu konkurencije kao Androidovi gumbi. Usporedite aplikaciju Foursquare za Android, lijevo i za iPhone da biste vidjeli rezultirajuću razliku:

Web: aplikacija unutar aplikacije

Smjernice protiv slaganja stvaraju slične probleme web lokacijama na mobilnim uređajima. Web stranice i web aplikacije djeluju, naravno, u granicama druge aplikacije, preglednika. Na mnogim mobilnim platformama preglednik ima vlastite gumbe i kontrole koji također mogu stvoriti sukobe korisničkog sučelja za web navigaciju. To znači da biste trebali izbjegavati 'prikvačivanje' navigacije na dno zaslona za web stranice, jer bi to alatnu traku web stranice stavilo na vrh preglednika. (Ova je smjernica povoljno pojačana činjenicom da pozicija: fixed nije ravnomjerno podržana u CSS-u u mobilnim preglednicima, što stvara poteškoće zalijepiti alatnu traku na dno.)

Za razliku od Androida, rješenje ne pomiče web navigaciju na vrh, već na dno cijele stranice. Budući da Chrome preglednik već jede nekretninu u nekim mobilnim preglednicima, posljednje što biste trebali još više istisnuti sadržaj gušenjem vrha web stranice s navigacijskim opcijama.

U svojoj izvrsnoj knjizi Prvo mobitel , Luke Wroblewski piše: 'Previše mobilnih web iskustava ... započnite razgovor popisom navigacijskih opcija umjesto sadržaja. Vrijeme je često dragocjeno na mobilnim uređajima, a preuzimanja mogu koštati novac, zato privucite ljude ono zbog čega su došli čim prije. '

Web iskustva trebala bi voditi sadržajem i ograničiti primarnu navigaciju na dno zaslona. Wroblewski zagovara koristan dizajn za to, koji možete vidjeti na djelu u Mobilno web mjesto Ad Age gdje je sva navigacija smještena iza gumba Izbornik na alatnoj traci na vrhu zaslona. Dodirnite gumb i cijeli će se zaslon odmah popuniti opcijama navigacije. Izgled izbornika je trenutačan i čini se kao da se pojavio sloj, ali u stvarnosti to je zapravo usidrena veza do navigacije na dnu stranice.

Ovaj pristup ima nekoliko prednosti, piše Wroblewski:

'Ovaj dizajn koristi minimalnu količinu navigacijskih elemenata (samo jednu vezu na vrhu), pruža ljudima mogućnost okretanja i istraživanja kada dođu do kraja sadržaja, ne duplicira sadržaj drugog izbornika i (najbolje od svega) za rad zahtijeva samo jednostavnu sidrenu vezu. Točno: nema modernog JavaScript-a, prekrivača ili zasebnih navigacijskih stranica za održavanje - samo sidro koje vodi do dna stranice. To je kao HTML 0. '

'Sadržaj odozgo, kontrole odozdo' čini se kao jednostavno pravilo, ali kao što ste vidjeli, ima različite ishode za dizajnere aplikacija kada operativni sustav ili preglednik polažu pravo na ovu premium nekretninu. Na kraju to djeluje ovako:

  • Na iPhoneu stavite kontrole aplikacija na dno zaslona
  • Na Androidu stavite kontrole aplikacija na vrh zaslona
  • Za web stavite navigaciju na dno stranice (za razliku od dna zaslona)

Ali ove su smjernice specifične za telefone; što se događa s većim zaslonima osjetljivim na dodir? S iPadom se pravila opet mijenjaju.

03. Tablete, zakrenite kutove

Pravilo palca i dalje vrijedi za iPad, osim što je zona palca drugačija jer je držimo drugačije. Prianjanje za iPad ovisi o vašem stavu. Uspravši se, morate dvjema rukama tapkati. Sjedeći za stolom, vjerojatno ćete ga podupirati jednom rukom, a drugom tapkati. Sjedeći na stolici, obično ga odmarate u krilu i tapkate drugom rukom. Ležeći ili zavaljeni, odmarate stvar na trbuhu, podupirući je jednom rukom, tapkajući drugom.

U svim tim hvataljkama prsti padaju na različita mjesta na uređaju i svaki stav rezultira držanjem uređaja na različitim udaljenostima. Na primjer, iPad obično držimo najbliži stojeći, na primjer, a najudaljeniji dok ležimo ili zavaljeni.

Koliko god su različita ova iPad podešavanja, dvije stvari vrijede za sve njih. Prvo, iPad obično držimo u gornjoj polovici uređaja kako bismo ga najbolje iskoristili, a to znači da se palčevi obično smire u gornjoj trećini zaslona, ​​blizu uglova. Drugo, iPadov veći zaslon otežava cijelu stvar jednim pogledom kao što to možete učiniti s telefonom. Kao i kod dizajna tiska, i vizualna pažnja publike usredotočuje se na vrh tableta, a hijerarhija informacija dizajna to bi trebala odražavati. Drugim riječima, na iPadu oči i prsti prirodno zauzimaju vrh uređaja. (Ponekad se dno uopće uopće ne vidi. U najljenijem i možda najčešćem položaju - ležeći ili zavaljen - donji okvir obično nestaje u pokrivačima, džemperima i mekanim trbuščićima.)

Za razliku od telefona, primarne kontrole i gumbi obično bi trebali biti na vrhu iPad aplikacija. Točnije, trebali bi zabiti gornje kutove, gdje palčevi obično lebde kad držite iPad. Instapaper i Twitter za iPad pokazuju dobar plasman:

Izbjegavajte postavljanje kontrola u gornji centar , međutim, budući da to znači da će vaša ruka prekriti sadržaj kada koristite te gumbe. Kontrole nikada ne smiju ići iznad sadržaja na koji žele utjecati, pa je gurkanje u kutove koristan obrazac. Na primjer, Daily za iPad nudi klizač u gornjem centru za skeniranje stranica izdanja, ali kad to učinite, ruka prekriva minijature, što otežava upotrebu.

04. Dno dna

Daily pogrešan korak otkriva iznimku od smjernica za gornji kut i otkriva kategoriju slučajeva u kojima bi kontrole umjesto toga trebale ići na dno. Kad god kontrole prikazuju ili utječu na sadržaj, one bi se trebale uvijek pojaviti ispod ili sa strane tog sadržaja, nikako iznad. Primjerice, iPad aplikacija Sydney Morning Heralda ima nov način brzog skeniranja svih članaka u dnevnom izdanju povlačenjem prsta po indeksu pokazatelja stranice na dnu zaslona. Budući da ta kontrola otkriva visoki popis naslova, prikladno je te kontrole postaviti na dno zaslona; postavljanje na vrh značilo bi da će vaša ruka prekriti popis kad dodirnete kontrole.

Je li to vrh ili dno? Evo razlike:

  • Gornji kutovi iPada idealni su za navigacijske tipke i alate jednim dodirom za radnje poput dijeljenja, omiljenog odabira ili brisanja.
  • Dno iPad aplikacija najbolje je za kontrole koje pregledavaju ili pregledavaju sadržaj na gornjem platnu.

Zbog toga je sličice stranica za knjige ili časopise najbolje postaviti pri dnu. Slično tome, ako ste dizajnirali aplikaciju za izradu karte koja je uključivala paletu orijentira za povlačenje na kartu, ta bi paleta trebala ići na dno kako biste mogli komunicirati sa svojom mapom bez da je neprestano pokrivate cijelom rukom.

05. Prevelika da bi propala

Ako način na koji držite uređaj diktira mjesto kontrola, veličina vašeg prsta odlučuje koliko te kontrole trebaju biti velike. Dizajneri dodira moraju ciljeve dodira učiniti prevelikima da bi propali, zdepaste mete koje ljudi mogu dodirnuti bez fokusa koji prelazi preko očiju.

Koliko je dovoljno velik kada su u pitanju ciljne točke? Pa, koja je veličina vrha prsta? Ovdje sve smjernice nude smjernice, ali kao i obično, Apple je najzahtjevniji, inzistirajući na onome što smatram najboljom smjernicom za sve mobilne platforme: postavite ciljne dodire na najmanje 44 točke ili približno 1/4 'ili 7 mm. Za web, minimum od 44 piksela također dobro funkcionira .

Dizajneri naviknuti na radnu površinu, ove velike kontrole osjećaju se ogromno i igrački, ali samo se okrećite s njima. Gromoglasne tipke i gigantske dodirivačke ciljeve ne samo da je lako pogoditi, već ih je lako vidjeti i povremeno ometanim mobilnim korisnicima.

U savršenom svijetu svi ciljevi dodira bili bi minimalno 44x44. Kao i u većini stvari, i ovdje je ponekad potreban kompromis. Čak i iPhoneov standard s vremena na vrijeme podmeće pravilo od 44 piksela. Na tipkovnici su, na primjer, tipke visoke 44 točke, ali široke samo 30 bodova - slično su, u pejzažnom prikazu, gumbi široki 44, ali visoki 38 bodova. Apple ovdje nema puno izbora; presudno je u ovaj prikaz uključiti punu QWERTY tipkovnicu, ali sve tipke jednostavno neće stati kao gumbi 44 x 44. Nešto mora dati.

Kada ograničeni prostor pritisne ciljne točke, evo pravila koje sam pronašao najbolje funkcionira: sve dok je ciljni cilj visok najmanje 44 točke, drugu dimenziju možete stisnuti na samo 30 bodova ako to zaista morate . To znaci: minimalna praktična veličina bilo koje ciljne cijevi je 44 x 30.

06. Ne gužvaj me

Vaš vjerni autor proveo je mnogo godina svoje promašene mladosti sa finim Casio-ovim kalkulator-satom privezanim za zapešće prije nego što ga je konačno povukao 1985. Problem nisu bile samo njegove male kontrole ili njegov prigušujući učinak na izglede za mog kralja mature. Gumbi su bili preblizu . Ciljali biste na peticu, ali smislite dvojku ili osmicu, tko zna - to je više bilo kolo sreće nego kalkulator. Drugim riječima, veličina gumba nije jedini odlučujući faktor točnosti točenja; morate uzeti u obzir i razmak.

Foto Jon Rawlinson

Foto Jon Rawlinson

Prilikom dizajniranja za male zaslone neizbježno ćete doći u iskušenje da se suočite s tim izazovom pretrpavanjem sučelja. »Samo ću ih gurnuti malo bliže. Samo ću dodati još jedan gumb na ovu alatnu traku. ' Da citiram popularnu frazu vrhunca računala: 'Samo recite ne'.

Što bliže stišćete gumbe, ti bi gumbi trebali biti veći. Razmotrite par aplikacija za VoIP pozive za iPhone, Skype i Call Global App. Obje rame tipke na tipkovnici zatvaraju jedna uz drugu, ali to nadoknađuju čineći ih mnogo većima od minimuma 44x44. Unatoč njihovoj neposrednoj blizini, gumbe je i dalje lako pritisnuti.

Međutim, ono gdje se dvije aplikacije razlikuju nalazi se na dnu zaslona. Obje aplikacije slažu gumbe točno na vrhu trake s navigacijskim karticama, što, kao što je gore rečeno, nikad nije idealno. Ali budući da su ti gumbi toliko veliki u Skypeu (lijevo), problem je ublažen. Međutim, u aplikaciji Call Global App tipke koje drže vrh trake s karticama previše su uske i njihova blizina znači da su vjerojatne pogreške. Iako su tehnički veći od minimuma 44x30, nedostatak razmaka i slaganje na dnu zaslona sklono pogreškama dovode do problema. Izgled zahtjeva veće gumbe ili izdašnije razmake.

To je ključna lekcija: iako se možda čini kontraintuitivnim, uspjeh sučelja s malim zaslonom oslanja se na velike elemente, krupne gumbe i prozračni razmak. Zasloni su možda mali, ali naši prsti (a često i pažnja obuhvaćaju) nisu. Dizajn s masnim prstima na umu.

Josh Clark je dizajner interakcija specijaliziran za strategiju mobilnog dizajna i korisničko iskustvo. Autor je djela Tapworthy: Dizajniranje izvrsnih iPhone aplikacija. Josh-ova odjeća Global Moxie nudi konzultantske usluge i obuku kako bi pomogla medijskim tvrtkama, dizajnerskim agencijama i kreativnim organizacijama da naprave vrijedne mobilne aplikacije.

Sviđa li vam se ovo? Pročitajte ovo!