Mobilra tervezett üzleti weboldal: több mint egymás alá rendezett dobozok

Tartalmi prioritás

Az asztali látvány minden részletének lekicsinyítése nem ad jó mobilos sorrendet. A legfontosabb kérdésre és műveletre építsd a nyitó részt, a kiegészítő információt sorold későbbre.

Mobilon az első tartalmi sorrend sokszor fontosabb, mint a nagy nyitókép. A látogató ugyanúgy szeretné megérteni, mit kínálsz, kinek és milyen következő lépéssel, de ezt kisebb egyszerre látható területen teszi. A főcímet, magyarázatot és felhívást ezért együtt tervezd. Egy helyi szolgáltatásnál a kiszolgált terület már korán döntő információ lehet; egy összetett B2B ajánlatnál a probléma pontos megnevezése segít. Ne rejts el fontos feltételt pusztán azért, mert mobilon hosszabbnak látszik az oldal. A cél nem a minél rövidebb felület, hanem a megfelelő sorrend és érthető szakaszolás. A másodlagos részletek később is elérhetők maradhatnak jól elnevezett blokkokban. Az első képernyőről érthető az ajánlat és a következő lépés.

Érintési területek

A sűrűn elhelyezett linkek és apró ikonok könnyen félrekoppintáshoz vezetnek. Hagyd lélegezni a vezérlőket, és ne csak az ikon néhány képpontja legyen kattintható.

Az érintési felületnél az ikon látható mérete és a tényleges aktív terület nem feltétlenül azonos. Egy kis nyílnak is lehet kényelmesen elérhető gombja, de a szomszédos műveletekkel való távolságra figyelni kell. A kártya egészére tett link és a benne lévő külön gomb egymáshoz viszonyított működése is legyen egyértelmű. Lebegő kapcsolatgomb csak akkor hasznos, ha nem takarja el az oldalt, űrlapot vagy süti-beállítást. A fontos művelet ne igényeljen pontos célzást két közeli apró elem között. A próbában figyeld a félrekoppintást és visszafordulást: ezek a felület hibáját jelezhetik, nem feltétlenül a látogató figyelmetlenségét. A kényelmes elérésnek a teljes oldalra ki kell terjednie. A fontos műveletek kényelmesen elérhetők nagyítás nélkül.

Űrlap és billentyűzet

A sok mező és a nem megfelelő beviteli mód fölösleges kitöltési munkát hoz létre. Használj megfelelő mezőtípust, látható címkét és érthető, a mezőhöz kötött hibajelzést.

A telefonos űrlapnál a billentyűzet jelentős részt foglal a képernyőből. A címke, hiba és szükséges következő gomb emiatt eltűnhet a látómezőből, ezért a teljes kitöltést így is végig kell járni. Az e-mailhez megfelelő mezőtípus, telefonszámhoz megfelelő bevitel és ésszerű automatikus kitöltés csökkentheti a fölösleges munkát. Ne használd a helykitöltő szöveget egyetlen címkeként, mert gépeléskor eltűnik. A hibás adat javításakor őrizd meg a többi helyesen kitöltött mezőt. A hosszú legördülő helyett sokszor egyszerűbb választás is elég, de az egyedi vezérlőnek ugyanolyan jól kell működnie érintéssel és billentyűzettel. Az elküldés eredménye legyen félreérthetetlen a kisméretű nézetben is. A megnyíló billentyűzet mellett is követhető a kitöltés és az elküldés.

Kép és hálózat

Az asztali képméret mobilra küldése jelentős fölösleges adatforgalmat okozhat. Adj a megjelenési mérethez igazodó képváltozatokat, és az első fontos képet külön kezeld.

A képváltozatok megadásánál a tényleges elrendezési szélességből indulj ki. Egy telefonra szánt kártyához ritkán indokolt a teljes nagy asztali grafika letöltése, miközben nagy pixelsűrűségnél a túl kicsi fájl is életlen lehet. A böngészőnek megfelelő méretinformációt kell adni a választáshoz. A fókuszpont és vágás külön kérdés: a kisebb képernyőn egy termék fontos része ne kerüljön a kivágáson kívülre. A nyitó kép betöltését ne kezeld ugyanúgy, mint a sokkal lejjebb található illusztrációét. A hálózati nézetben ellenőrizd, mi töltődik le valójában, majd a telefonon nézd meg a minőséget. A technikai optimalizálás és az értelmes képkompozíció együtt szükséges. Keskeny nézetben valóban kisebb szükséges fájl töltődik le.

Navigáció és visszaút

A lenyíló mobilmenüben könnyű elveszíteni a hierarchiát és az aktuális helyzetet. Tedd világossá a nyitás, bezárás és almenüből visszalépés módját.

A mobilmenü nyitásakor a látogatónak értenie kell, melyik rétegen jár és hogyan jut vissza a tartalomhoz. A bezáró gomb ne kerüljön nehezen elérhető, alig látható helyre. Ha a háttér görgetése letiltott, a menü bezárásakor álljon helyre a korábbi helyzet. A fókusz viselkedése különösen fontos külső billentyűzettel vagy segítő technológiával. Hosszú almenünél szükség lehet külön görgethető panelre, de ez ne okozzon csapdát. A navigációt a böngésző visszalépésével is vizsgáld. A menü akkor jó, ha nem válik önálló akadállyá egy egyszerű szolgáltatás vagy kapcsolat megtalálásában. Az útvonal végén a látogató tudja, melyik oldalon van. A böngésző vissza gombja és a menü működése összhangban marad.

Valódi eszközös ellenőrzés

Az asztali böngésző keskeny ablaka nem mutat meg minden érintési problémát. Próbáld ki álló és fekvő nézetben, lassabb hálózaton, megnyitott billentyűzettel is.

A valódi készülékes próba mutatja meg a böngésző címsorának, érintésnek és virtuális billentyűzetnek a közös hatását. Álló és fekvő helyzetben is nézd meg a lényeges folyamatot, különösen ha rögzített fejlécet vagy alul lebegő gombsort használsz. A hosszabb szöveg és a nagyított betűméret más tördelést hozhat, ezért ne csak az alapbeállítást próbáld. Lassabb kapcsolatnál figyeld meg, mikor olvasható az ajánlat és mikor használható a fő művelet. A mérési pontszám mellett a teljes feladat eredménye számít: sikerül-e megtalálni a szolgáltatást, kiválasztani egy opciót és kapcsolatot kérni. A mobilos megfelelés így nem puszta képernyőszélességi ellenőrzés lesz. A telefonos feladat végig elvégezhető, az oldal nem takarja el a lényeges elemeket.

Szemléltető helyzet és gyakorlati munkalap

Szemléltető példa: egy helyszíni szerelést kínáló vállalkozás mobiloldalán a kiszolgált terület, a vállalt munkák és a közvetlen telefonszám gyorsan megtalálható. A részletes ajánlatkérés továbbra is elérhető, de nem takarja el a képernyőt állandóan egy nagy, többgombos lebegő sáv.

Gyakori kérdések