A érintőképernyők különböznek a billentyűzetektől és az egerektől
A mobileszközök weboldalainak tervezésének korai napjaiban a legtöbb fejlesztő bifurkolta a termékajánlatokat. Teljesen funkcionális asztali verziót, majd egy "mobiloptimalizált" verziót bocsátottak ki, amely a legtöbb márkát és képeket eltávolította a cukorka-telefonok és a 3G vezeték nélküli hálózatok korlátozott képességeinek és hálózati sebességeinek kielégítésére.
A kortárs okostelefonok azonban ugyanolyan hatékonyan képesek weboldalakat készíteni az asztali számítógépeken, mint a tegnapi DSL vonalakon.
A tervezés ezután visszatér egy egyszerű felhasználói felülethez. De a tervezők kockázata nem az, hogy az okostelefon vagy a tabletta nem képes modern, érzékeny weboldalt megjeleníteni. Inkább az, hogy az érintőképernyős eszköz felhasználói bevitelének módszere lényeges változtatásokat igényel az alapul szolgáló webhelytervezéshez. A weboldalak építésének napjai vége a billentyűzetnek és az egérnek.
Alapvető érintőképernyős tervezési szabályok
Az érintőképernyőre érzékeny webes felület kialakítása a múlt hagyományos monitor-egér-billentyűzet megközelítésének fejlődését igényli. Különösen olyan interakciókat kell befogadnia, mint a gesztusok, a csapok és a multitouch bemenet.
- A megérintés nem pontos. Hacsak az ügyfél nem rendelkezik a kisgyermek ujjaival, még a nagyon pontos szoftvervezérléssel is nehéz lehet megérinteni és pontosan meghatározni.
- A gesztusok eltérnek a csapoktól. Egy hosszú oldal görgetéséhez az érintőképernyőn a felhasználó ujját ujját felfelé a böngészőablakra csúsztatja. Ez nem feltétlenül jelentőssé válik, amíg észre nem veszi az egérrel való böngészést, az egeret lefelé mozgatja.
- Két (és még több) ujjcsap. A felhasználó egyszerre több ujjlenyomatot is használhat az eszközön a vezérléshez. Ezek a további csapok a felhasználó eszközének operációs rendszerétől függően valamit jelenthetnek.
- Nagy fényvisszaverő eszközök. A legtöbb érintőképernyős tabletta képernyője erős üvegből készül. Ez az anyag nagyon nehezen olvasható, sok fényt élvez, fényes helyzetekben. Ráadásul minden érintéssel ujjlenyomatok és elmosódások kapnak a képernyőn, amelyek befolyásolhatják az oldalak megjelenését.
- A képernyőn megjelenő billentyűzet. Miközben egyes felhasználók vezeték nélküli billentyűzetet használnak, csatlakoznak a táblagépekhez, a legtöbb táblagépfelhasználó a képernyőn megjelenő billentyűzetet használja az adatbevitelhez. Az OSK bejegyzés egyes vidám tévedéseket eredményezhet, és hosszabb ideig kényelmetlen lehet.
A készülék ezen jellemzői miatt a webes tervezőknek az érintőképernyős felhasználók számára számos alapvető tervezési szabályt kell kiemelniük:
- Ne tegye túl közel egymáshoz a kattintható elemeket. Nincs olyan kemény és gyors szabály, amely meghatározza, hogy közel áll-e egymáshoz közel, de a linkek listája - különösen a kis betűméret esetén - nehezen navigálható, ha kövér ujjal kattint. Bosszantó lehet, ha csak egy linkre kell kattintania. Ez az elv érvényes a gombok és a linkek esetében is.
- A hierarchiák nehezen tarthatók nyitva. A dinamikus menü egy népszerű formája a JavaScript használatával nyitja meg az almenüt, amikor a felhasználó rákattint, majd az egérgombbal az almenü fölé. Ezek az állapotok nagyon nehézkesek vagy lehetetlenek lehetnek az érintőképernyőn, mert nem maradnak nyitva, vagy nem záródnak le.
- Mozgassa a linkeket és a kattintható területeket az ablak jobb szélétől. A legtöbb ember jobbkezes és hajlamos görgetni a képernyő azon oldalán. Mivel a görgetés gesztussal történik, néha hibásan elindíthatja a kapcsolatot a linken. A felhasználók bosszantják, ha az oldalra szeretnének görgetni, és végül véletlenül megérintettek egy linket. Ha a linkeket eltávolítja a jobb oldalról, segíthet nekik elkerülni ezt a kellemetlenséget.
- Nincs egér. Ez azt jelenti, hogy nincs egérmutató . Nem szabad az egérmutatóra támaszkodnia, hogy segítsen jelezni, hogy valami kattintható.
- A hover állapotok nem léteznek. A fentiek következtében, mivel nincs egér, nincs semmi, amivel lebeghet. A hivatkozás kattintva (megérintve) vagy nem érintőképernyős eszközön történik, így a felhasználók nem találhatnak hasznos információkat olyan felfüggesztési állapotokról, mint a színváltozások, a szerszámcsúcsok vagy az állapotsáv módosításai.
- A fekete hátterek fokozzák a káprázást. A fekete háttérrel rendelkező webhelyet nagyon nehéz olvasni egy érintőképernyős eszközön a káprázás miatt. A fekete az ujjlenyomatokat az eszközökön világosabbá teszi, elmosódva a képernyőn. A fekete pedig tükrözheti a képernyőt, ami tükrözi a felhasználók arcát, ami gyakran több, mint a képernyőn megjelenő szöveg.
- Hosszú szövegblokkok formában nehéz írni. Miközben teljes regényeket írhat iPad-re vagy Android vagy Windows-táblára, a legtöbb ember nem szereti a képernyőn megjelenő billentyűzet használatát hosszú szövegrészek esetén. Minél többet tud a design a lehető legrövidebb és legegyszerűbb adatbevitelre, annál jobb.
Az érintőképernyővel kapcsolatos tervezési szempontok legfontosabb szempontja az, hogy teszteljék az oldalakat érintőképernyős készüléken . Bár sok iPad és Android emulátor áll rendelkezésre, és rengeteg Windows tabletta, még mindig nem biztosítják az érintőképernyő érzését. Nem tudod megmondani, hogy a linkek túl közel vannak, vagy hogy a gombok túl kicsiek - vagy hogy a káprázás miatt az oldal túlságosan nehéz elolvasni - hacsak nem kapsz ki egy tablettát és próbáld ki őket, mielőtt kiadod az új weboldal tervezését.