Tervezés érintésre

A nagyszerű mobil kivitelek többet tesznek, mint a cipőkanál apró képernyőkön: utat engednek az ujjaknak és a hüvelykujjaknak, befogadva esetlen számjegyeink elkanyarodó csapjait. A kézi interfészek fizikussága túlmutatja a tervezőket a vizuális és információs tervezés szokásain túl, és az ipari formatervezés területére. Az érintőképernyőkkel valódi ergonómia forog kockán. Nem csak a pixelek kinézete, hanem az is, hogy érzik a kezüket.

01. Hüvelykujj

Az érintőképernyős kialakítás átgondolt tudatosságot igényel, hogy az ujjak hol nyugodtan pihennek a készüléken. Fogjon például egy kézben egy telefont, és hacsak nem telepít egy őrült karmú telefonfogantyút, mindig hüvelykujjával koppint. Telefonok esetében az érintéses tervezés a hüvelykujj tervezését jelenti.

A hüvelykujjak csodálatosak. A hüvelykujjaink és a híres pletykák iránti szeretetünk különböztet meg bennünket a fenevadaktól, de korlátozott hatótávolsággal és rugalmassággal rendelkeznek. Míg egy hüvelykujj képes a legnagyobb méretű telefonok kivételével az összes képernyő teljes seprésére, a képernyőnek csak körülbelül egyharmada áll igazán könnyedén - a képernyő alján, a hüvelykujjával szemközti oldalon.

Helyezze az elsődleges csaptelepeket ebbe a hüvelykujj-dübörgő forró zónába. Ha például egy telefont jobb kézben tart, akkor a hüvelykujj természetesen ívben esik le a képernyő bal alsó sarkában:

Ez egy fontos oka annak, hogy az eszköztárak és a navigáció általában a telefoninterfészek alsó szélén landol - ellentétben azzal, amit a hagyományos képernyőfelületekhez szoktunk. Az asztali szoftverek konvenciói szerint a menük a képernyő vagy az ablak tetejére kerülnek, és a webhelyek általában az elsődleges navigációt az oldalak tetejére helyezik. Korlátozott hüvelykujjunk azonban megfordítja ezt az egyezményt, és a navigáció és az elsődleges csaptelepek az aljára süllyednek.

A hüvelykujj képernyő alsó részének torzítása fontosabb, mint a bal és jobb oldali. Kiderült, hogy a legtöbbünk könnyedén átfordul a bal és a jobb kéz között, amikor telefonunkat használjuk. A jobbkezes felhasználók gyakran a bal kezüket részesítik előnyben vagy válnak balra (például íráskor), és a baloldaliak is gyakran a jobbjukkal járnak. Míg a felhasználók szerény többsége a jobb kezével valamivel gyakrabban megy, mint a bal, ez nem elég erős tendencia a tervezők számára.

A képernyő alsó hüvelykujj-szabálya azonban függetlenül attól, hogy melyik kezet használja, és tippeket ad arra vonatkozóan, hogyan rendezheti a koppintási célok vizuális hierarchiáját. A gyakran használt gomboknak el kell foglalniuk a képernyő alját az egyszerű kopogás érdekében, míg a többi kezelőszervet el kell tolni az ártalmatlanságtól. Például az iOS rendszerben a Szerkesztés gombok elhelyezése a jobb felső sarokban, könnyen látható helyen, de éppen annyira elérhető távolságban van, hogy a véletlenszerű változtatások kevésbé valószínűek legyenek.

Az elsődleges kezelőszervek süllyesztése a képernyő aljára nemcsak a hüvelykujj kényelmének kérdése, hanem az az egyszerű tény is, hogy az ujjak elhomályosítják a képernyőt. Alul van, ahol a lebegő kezek a legkevésbé fedik a tartalmat. Ha a tartalmat tiszta nézetben szeretné tartani, helyezze az alkalmazás vezérlői fölé. Ez egy megszokott, ésszerű elrendezés, amely a legtöbb fizikai eszközre vonatkozik: iPod-okra, számológépekre, mobiltelefonokra, fürdőszobai mérlegekre. Tartalom a tetején, vezérlők az alján.

02. Én, Robot

Ezt az egyszerű felső / alsó szabályt bonyolítja az Android „kell lennie nekem” rendszergombjai, amelyek átölelik az androidos modulok alját. (Az Android 3 „Honeycomb” kiadása előtt ezek mindig fizikai gombok voltak; az Android 4 „Ice Cream Sandwich” -től kezdve ma már virtuális gombok.) Ezek a rendszerszintű gombok a képernyő alján találhatók az összes eddig ismertetett ok miatt, de ujjlenyomatoló versenyt is bevezetnek az alkalmazás-specifikus kontrollokért. A vezérlők hozzáadása a képernyő alján azt jelenti, hogy az eszköztárakat egymásra rakják; sajnos, a csapolási hibák különösen gyakoriak a képernyő alján lévő halmozott vezérlőknél. A nagy forgalmú zónában, ahol a hüvelykujj hajlamos lebegni és eltakarja a képet, elkerülhetetlenek a gombütközések. Ez az Android kezdőképernyő elrendezése például hibákat hív fel:

Mindig kerülni kell a vezérlőket az érintőképernyőn, különösen a képernyő alján. Sajnos ez azt jelenti, hogy az Android-alkalmazások vezérlőinek a képernyő tetején kell lenniük, hogy elkerüljék a rendszer gombjainak tolakodását. Nem ideális: ez a navigációt a hüvelykujj zónán kívülre helyezi, és amikor megérint egy gombot, a kéz az egész képernyőt lefedi. De jobb, mint az alternatív megoldás, amely kövér ujjhibákat hív fel.

Android esetében az alkalmazásnavigációnak és a vezérlőknek felfelé kell lebegniük. Ez a fordítottja az iPhone-nak, ahol a Kezdőlap gomb nem hoz létre ugyanolyan versenyt, mint az Android gombjai. Hasonlítsa össze a Foursquare alkalmazást Androidra, balra és iPhone-ra az ebből adódó különbség megtekintéséhez:

Internet: egy alkalmazáson belüli alkalmazás

A veremellenes iránymutatás hasonló problémákat okoz a mobileszközök webhelyein. A weboldalak és webalkalmazások természetesen egy másik alkalmazás, a böngésző keretein belül működnek. Számos mobil platformon a böngésző saját gombokkal és vezérlőkkel rendelkezik, amelyek hasonlóan UI konfliktusokat okozhatnak a webes navigációhoz. Ez azt jelenti, hogy kerülni kell a navigáció 'képernyőhöz rögzítését' a képernyő aljára a webhelyek számára, mivel ez a webhely eszköztárát a böngésző tetejére rakná. (Ezt az irányelvet kényelmesen megerősíti az a tény, hogy a position: fix nem egyenletesen támogatott a CSS-ben a mobil böngészőkben, ezért gondot okoz egy eszköztár aljára ragasztása.)

Az Android-tól eltérően a megoldás nem a webes navigációt mozgatja az oldal tetejére, hanem az egész oldal aljára. Mivel a böngésző krómja már mobileszközöket fogyaszt egyes mobil böngészőkben, az utolsó dolog, amit meg kell tennie, hogy még jobban kiszorítja a tartalmat azáltal, hogy a weboldal tetejét elfojtja navigációs lehetőségekkel.

Kiváló könyvében Először a mobil , Luke Wroblewski azt írja: 'Túl sok mobil webes élmény ... kezdje a beszélgetést a tartalom helyett a navigációs lehetőségek listájával. Az idő gyakran értékes a mobilon, és a letöltések pénzbe kerülhetnek, így minél előbb vezesse el az embereket arra, amire jöttek. '

A webes élményeknek tartalommal kell járniuk, és az elsődleges navigációt a képernyő aljára kell korlátozniuk. A Wroblewski ehhez hasznos tervezési mintát vív ki, amelyet a munka során láthat Ad Age mobilwebhely ahol az összes navigáció a Menü gomb mögött van a képernyő tetején lévő eszköztáron. Érintse meg a gombot, és a teljes képernyő azonnal megtelik a navigációs lehetőségekkel. A menü megjelenése azonnali és úgy tűnik, mintha egy fedvény jelent volna meg, de a valóságban valójában az oldal alján található navigációs horgony link.

Ennek a megközelítésnek számos előnye van, írja Wroblewski:

'Ez a kialakítás minimális mennyiségű navigációs elemet használ (csak egyetlen linket a tetején), lehetőséget ad az embereknek, hogy elforduljanak és felfedezzék, amikor a tartalom végére érnek, nem másolja meg egy másik menü tartalmát, és (a legjobb mindennek) csak egy egyszerű horgony linkre van szükség a működéshez. Ez így van: nincs elegáns JavaScript, átfedés vagy külön navigációs oldal fenntartása - csak egy horgony, amely az oldal aljára mutat. Ez olyan, mint a HTML 0. '

A „Tartalom felül, a kezelőszervek alul” egyszerű szabálynak tűnik, de amint látta, változó eredményekkel jár az alkalmazás-tervezők számára, amikor az operációs rendszer vagy a böngésző ezt a prémium kategóriás ingatlant követeli. Végül ez így működik:

  • IPhone-on helyezze az alkalmazásvezérlőket a képernyő aljára
  • Android rendszeren helyezze az alkalmazásvezérlőket a képernyő tetejére
  • Az interneten tegye a navigációt az oldal aljára (szemben a képernyő aljával)

De ezek az irányelvek a telefonokra vonatkoznak; mi történik nagyobb érintőképernyők esetén? Az iPad segítségével a szabályok ismét megváltoznak.

03. Tabletta, vegye be a sarkát

Az ökölszabály továbbra is érvényes az iPad-re, csakhogy a hüvelykujj zónája más, mert másként tartjuk. Az iPad markolat a hozzáállásodtól függ. Felállva két kezet kell használnia, hogy elcsapjon. Az asztalnál ülve valószínűleg egyik kezével megtámasztja, a másikkal pedig megérinti. Széken ülve hajlamos az ölében pihenni, és a másik kezével koppintani. Fekve vagy hátradőlve a gyomrán pihenteti a dolgot, egyik kezével megtámasztja, a másikkal kopogtat.

Mindezen markolatokban az ujjak a készülék különböző helyeire esnek, és minden egyes álláspont azt eredményezi, hogy az eszközt különböző távolságokban tartják. Az iPad-et általában állva tartjuk a legközelebb, fekve vagy hátradőlve a legtávolabb.

Bármennyire változatosak is ezek az iPad-ek, mindkettőre két dolog igaz. Először is, hajlamosak vagyunk az iPadeket a készülék felső felében tartani a legjobb kihasználás érdekében, és ez azt jelenti, hogy a hüvelykujjak általában a képernyő felső harmadában, a sarkok közelében helyezkednek el. Másodszor, az iPad nagyobb képernyője megnehezíti az egész egy pillanat alatt történő felvételét, ahogyan azt telefonon is megteheti. A nyomtatás tervezéséhez hasonlóan a közönség vizuális figyelme természetesen a tábla tetejére összpontosul, és a terv információs hierarchiájának ezt tükröznie kell. Más szóval, az iPaden a szem és az ujjak természetesen elfoglalják a készülék tetejét. (Néha az alja egyáltalán nem is látszik. A leglazább és talán leggyakoribb helyzetben - fekve vagy hátradőlve - az alsó keret általában eltűnik takarókban, pulóverekben és puha hasban.)

A telefonokkal ellentétben az elsődleges vezérlőknek és gomboknak általában az iPad-alkalmazások tetején kell lenniük. Pontosabban a felső sarkokat kell kitűzniük, ahol a hüvelykujjak általában lebegnek, amikor az iPad-et megfogják. Az Instapaper és a Twitter for iPad jó elhelyezést mutat:

Kerülje a vezérlők középső felső részén történő elhelyezését azonban mivel ez azt jelenti, hogy a kezed lefedi a tartalmat, amikor ezeket a gombokat használod. A vezérlőknek soha nem szabad meghaladniuk azt a tartalmat, amelyet befolyásolni kívánnak, ezért a sarkokba szorítás hasznos minta. A Daily for iPad például felsõ közepén egy súrológépet kínál a lap oldalainak beolvasására, de amikor ezt megteszi, a kéz eltakarja a bélyegképeket, ami megnehezíti a dolog használatát.

04. A lényeg

A Daily tévedése kivételt tár fel a felső sarok iránymutatása alól, és feltár egy olyan esetkategóriát, amikor az ellenőrzéseknek inkább az aljára kell menniük. Amikor a vezérlők megjelenítik vagy befolyásolják a tartalmat, mindig a tartalom alatt vagy oldalán kell megjelenniük, soha nem felül. A Sydney Morning Herald iPad alkalmazásának például újszerű módja van a napi kiadás összes cikkének gyors beolvasására, húzva az ujját a képernyő alján található oldalmutatók indexén. Mivel ez a vezérlő a címsorok magas listáját tárja fel, célszerű ezeket a vezérlőket a képernyő aljára helyezni; Ha ezeket a tetejére helyezi, az azt jelentené, hogy a keze lefedné a listát, amikor megérintette a vezérlőket.

Tehát fent vagy alul van? Itt van a különbség:

  • Az iPad felső sarkai ideálisak a navigációs gombokhoz és az egyérintéses eszközökhöz olyan műveletekhez, mint a megosztás, a kedvencek vagy a törlés.
  • Az iPad alkalmazások alja a legjobb a vezérlőkhöz, amelyek a fenti vászon tartalmát böngészik vagy előnézeti.

Ez az oka annak, hogy a könyvek vagy magazinok oldalainak indexképei a legalacsonyabbak. Hasonlóképpen, ha olyan térképalkotási alkalmazást tervez, amely tartalmaz egy tereptárgyak palettáját a térképre húzáshoz, akkor ennek a palettának az aljára kell kerülnie, így kölcsönhatásba léphet a térképével anélkül, hogy folyamatosan az egész karjával lefedné.

05. Túl nagy ahhoz, hogy megbukjon

Ha az eszköz fogásának módja szabja meg a kezelőszervek helyét, akkor az ujjmérete dönti el, hogy mekkora legyenek ezek a kezelőszervek. Az érintőképernyős tervezőknek túl nagyokat kell készíteniük a csapokról, hogy kudarcot valljanak, vaskos célpontokat, amelyeket az emberek szembetűnő fókuszszint nélkül megérinthetnek.

Mekkora elég nagy, amikor a célpontok megérintésére kerül sor? Nos, mekkora az ujjbegye? Valamennyi platform útmutatást nyújt itt, de szokás szerint az Apple a legvéleményesebb, ragaszkodva ahhoz, hogy szerintem a legjobb útmutatás minden mobilplatformhoz: a csapok célzása legyen legalább 44 pont, kb. 1/4 'vagy 7 mm. Az internet számára a 44 képpontos minimum is jól működik .

Az asztali számítógéphez szokott tervezők számára ez a hatalmas érzés hatalmas és tetszetős, de csak guruljon vele. Az óriási gombokat és a gigantikus célzási célokat nemcsak könnyű eltalálni, hanem az alkalmanként zavart mobilfelhasználók számára is könnyen észrevehetőek.

Egy tökéletes világban az összes csap célpontja legalább 44x44. Mint a legtöbb dologban, néha kompromisszumra is szükség van. Még az iPhone szabványos vezérlői is időről időre összemosják a 44 képpontos szabályt. Például a billentyűzeten a gombok 44 pont magasak, de csak 30 pont szélesek - hasonlóan fekvő nézetben a gombok 44 pont szélesek, de 38 pont magasak. Az Apple-nek nincs sok választási lehetősége itt; döntő fontosságú a teljes QWERTY billentyűzet felvétele ebbe a nézetbe, de az összes billentyű csak nem fér el 44 x 44 gombként. Valamit meg kell adni.

Amikor a korlátozott hely miatt a csap célpontjai szorulnak, a következő szabály szerint a legjobban működik: amíg egy csap célpontja legalább 44 pont magas vagy széles, addig a másik dimenziót akár 30 pontig is szoríthatja, ha valóban muszáj . Azt jelenti: bármely csap célpontjának gyakorlati minimális mérete 44 x 30.

06. Ne tolongj

Hűséges szerzője sokszor elvesztegetett ifjúságának sok évét egy karcsú Casio számológéppel töltötte a csuklóján, mielőtt 1985-ben nyugdíjba vonta volna. A probléma nem csak apró kezelőszervei, vagy csillapító hatása volt a prom-king kilátásaimra. A gombok túl közel voltak egymáshoz . Célozna ötöt, de előállna kettő vagy nyolc, ki tudja - ez inkább szerencsekerék volt, mint számológép. Más szavakkal, a gomb mérete nem az egyetlen meghatározó tényező a csap pontosságára; figyelembe kell vennie a távolságot is.

Fotó: Jon Rawlinson

Fotó: Jon Rawlinson

A kis képernyőkre történő tervezéskor elkerülhetetlenül kísértésbe esik, hogy kezelje ezt a kihívást az interfész tömörítésével. - Csak kicsit közelebb állítom ezeket. Csak hozzáadok még egy gombot ehhez az eszköztárhoz. ' A számológép-óra fénykorának egyik népszerű mondatát idézve: „Csak mondj nemet”.

Minél közelebb szorítja egymáshoz a gombokat, annál nagyobbaknak kell lennie ezeknek a gomboknak. Vegyünk egy pár VoIP hívó alkalmazást iPhone, Skype és Call Global App alkalmazáshoz. Mindkettő a kezelőgombjait szorosan egymáshoz zárja, de kompenzálják azt, hogy sokkal nagyobbak lesznek, mint a 44x44 minimum. Közvetlen közelségük ellenére a gombokat továbbra is könnyen el lehet érni.

A két alkalmazás különbsége azonban a képernyő alján található. Mindkét alkalmazás a gombokat közvetlenül a navigációs fülsáv tetejére rakja, ami, mint fentebb említettük, soha nem ideális. De mivel ezek a gombok olyan nagyok a Skype-ban (balra), a probléma enyhül. A Call Global App alkalmazásban azonban a fülsáv tetejét átölelő gombok túl soványak, és a közelségük miatt valószínűleg hibásak. Annak ellenére, hogy technikailag nagyobbak, mint a 44x30-as minimum, a távolság hiánya és a képernyő alján található hibára hajlamos egymásra rakás problémákat okoz. Az elrendezés nagyobb gombokat vagy nagyobb távolságot igényel.

Ez a legfontosabb tanulság: bár ellentmondónak tűnhet, a kis képernyős interfészek sikere nagy elemeken, vaskos gombokon és légies távolságon múlik. A képernyők lehetnek aprók, de az ujjaink (és gyakran a figyelmünk átfedik) nem. Tervezés kövér ujjak szem előtt tartásával.

Josh Clark a mobiltervezési stratégiára és a felhasználói élményre szakosodott interakciótervező. A Tapworthy: Remek iPhone-alkalmazások tervezése című cikk szerzője. Josh ruhája, a Global Moxie tanácsadói szolgáltatásokat és képzést kínál a médiacégek, a tervezőirodák és a kreatív szervezetek számára, hogy megalapozott mobilalkalmazásokat építsenek.

Tetszett ez? Olvassa el ezeket!