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.Annak érdekében, hogy egy érintőképernyőn egy hosszú oldalt lapozhasson, a felhasználó ujját ujját ujjaira húzza fel a böngészőablakban. Ez nem feltétlenül jelentőssé válik, amíg észre nem veszi az egérrel való böngészést, az egeret mozgatja le- .
- 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.És ez azt jelenti, hogy nincs egér mutató . 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ők tervezésének legfontosabb szempontja az, hogy próbálja meg az oldalakat érintőképernyős eszközön. 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 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 előtt kiadja az új weboldal tervezését.
