8 Golden Szabály a mobil design

A mobil design viszonylag új, de létfontosságú. Csak egy évtizeddel ezelőtt tervezték az asztali számítógép kialakítását; Most azt jelenti, hogy a mobileszközök tervezése is. A mobiltelefonok növekvő mennyiségű webforgalmat vezetnek, és a számok csak növekedni fognak.

Statista szerint, 2018 októberében 3,9 milliárd egyedi mobil internethasználó volt, és világszerte több mint 50 százaléka több mint 50 százaléka mobiltelefonokon keresztül jött létre . Egy nagyszerű webdesign már nem luxus, hanem valami szükségszerű.

A mobil felhasználók számára nagyszerű webes élmény létrehozása több, mint ami csak létrehozott Érzékeny webdesign (bár a csúcs weboldal építője segíthet, amint lehet web hosting választás). Ebben a cikkben felfedezheti az alapító mobil webhely tervezési elveket.

01. A célorientált tapasztalatok építése

A mobil felhasználók nagyon célorientált felhasználók. Minden alkalommal, amikor meglátogat egy weboldalt, hogy van egy adott feladat akarnak elérni, és azt várják, hogy mit kell nagyon gyorsan. Szóval hogyan lehet ezt megtörténni?

Kép az ideális felhasználók: Hasonló a ház építéséhez, egy weboldal építése szilárd alapokkal kezdődik. És a nagyszerű webdesign alapja a felhasználók számára a tudás. A felhasználói kutatásnak a terméktervezés egyik első lépéseinek kell lennie. Meg kell találnod, hogy pontosan ki kell találnod, hogy ki a felhasználók és mit akarnak elérni. Miután ismered a felhasználók akaratát és igényeit, akkor létrehozhat egy felhasználói utat, amit tudsz, hogy tökéletesen illeszkedjen elvárásaiknak (győződjön meg róla, hogy biztonságosan megmentene az eredményeket felhő tároló ). Ezután alapos Felhasználói tesztelés Meg fogja győződni arról, hogy elérte ezeket a célokat.

Tapasztalat finomítása az alapvető célkitűzése körül: Mit szeretne elérni ezen a weboldalon? A kérdésre adott válaszok megkeresése egy másik fontos dolog, ha mobil webes élményt hoz létre. Próbálsz vezetni az elkötelezettséget, hogy a felhasználók megvásárolják a termékeket, vagy regisztráljanak egy szolgáltatásra? Nyilvánvalóan adja meg a célt, és gondoljon arra, hogyan lehet csökkenteni a felhasználónak, hogy a felhasználónak meg kell tennie.

02. Adja hozzá a tartalmát, hogy kisebb helyen dolgozzon

A tartalom az, ami értéket ad a legtöbb webhely számára. Ez az elsődleges ok, ami az emberek meglátogatják őket. Amikor a mobil webdesignról van szó, lehetetlen asztali élményt, és reprodukálni a mobilon; Fontos, hogy weboldalakat tervezzen a mobil felhasználók szem előtt tartásával. Ez azt jelenti, hogy a tartalom és a funkciók hozzáigazítását kell adnunk a felhasználó képernyőméretének és szokásainak befogadására. Tehát milyen lépéseket tehetsz ennek eléréséhez?

Kerülje a vízszintes görgetést: A felhasználók kényelmesek a helyszínekkel, amelyek függőlegesen görgetnek, de nem vízszintesen. Ezért nem lehet olyan oldalak, ahol a tartalom megtekintéséhez vízszintes görgetés szükséges. A fix szélességű elemek a vízszintes görgetést okozó közös okok egyike, ezért ellenőrizze, hogy nincs olyan tartalma, amely csak egy adott nézetablak szélességét jeleníti meg.

Célja egy oszlopos elrendezéshez: Single-oszlop elrendezés segítségével kezelésével korlátozott hely egy kis képernyőn, és lehetővé teszi az egyszerű méretezés között álló és fekvő módban.

Győződjön meg róla, hogy a felhasználóknak nem kell csípni a zoomra: A látogatók könnyen frusztráltak, ha a szöveget vagy a képet meg kell adniuk, vagy egy kép megtekintéséhez. Tervezze meg a mobil webhelyét, hogy a felhasználók soha ne legyen szükség a méretre.

Az olvasható betűméret használata: 11 pont a szöveg abszolút minimális mérete. Ez a méret lehetővé teszi a felhasználók számára, hogy a szöveget egy tipikus megtekintési távolságban olvassák a nagyítás nélkül.

Válassza ki a lyukasztási méreteket: Ha a weboldal élménye olvasást igényel, akkor jobb, ha a Sans-Serif betűtípusok, például a Helvetica vagy a Roboto használata.

Használja az ujjbarát designt: Amikor mobil webhelyet tervez, emlékszel a látogatókra az ujjaikat az egér nyíl helyett használni fogják, és az emberi ujjhegyek nagyobbak, mint egy egérmutató. Törekedjen az ujjbarát felület kialakítására, ahol minden interaktív elem megfelelően méretezett.

Egy mit érintő laboratóriumi tanulmány megállapította, hogy az ujjhegyének átlagos mérete 8-10 mm , 10 mm x 10mm-es, jó minimális érintéses célméret.

Fontolja meg a relatív távolságot érintő célok között. Ha az interaktív elemek túl közel vannak egymáshoz, a mobil felhasználók véletlenül megérinthetnek egy rossz gombot az ujjával. Annak megakadályozására, hogy ez történjen, győződjön meg róla, hogy helyesen méretű gombokat, valamint elegendő helyet ad hozzá közöttük.

A termékképek bővíthetővé tétele: Sok tanulmány bizonyította, hogy az emberek túlnyomórészt vizuális tanulók. A legtöbb ember képes megérteni és megragadni a koncepciók sokkal jobb, amikor így szállították, ezért a képeket a web designban nagyszerű módja a kulcsfontosságú üzenetek gyors összegzéséhez.

A képek létfontosságú szerepet játszanak az e-kereskedelmi weboldalakon - az emberek a termékképekre támaszkodnak a döntés meghozatalakor. Alapvető fontosságú, hogy ne csak magas színvonalú eszközöket biztosítson, hanem bővíthetővé tegye őket, hogy a felhasználók könnyen megtekinthessék őket részletesen. Bontsa ki az egész képet, nem pedig csak egy részét.

Legyen óvatos a promóciókkal és hirdetésekkel: A promóciók és a hirdetések könnyen elhomályosíthatják a tartalmat. Míg a hirdetés üzenete valamilyen látogató számára működik, az esetek többségében a felhasználók kihagyják, és továbblépnek az értékesebb információkhoz. Ez a jelenség Banner vakság néven ismert.

Könnyen megtalálhatja a kapcsolattartási információkat: A mobil felhasználók gyakran látják a weboldalakat, hogy megtalálják az elérhetőségeket. A sürgősségtől függően a felhasználók lehetnek hívni egy céget, töltsön ki egy kapcsolattartási űrlapot, vagy keresse meg a címet. Az e-kereskedelmi webhelyek esetében a telefonszámnak elérhetőnek kell lennie a kezdőképernyőn.

03. A beolvasás tartalmának optimalizálása

Ez egy jól ismert tény, hogy a felhasználók nem olvasak online; beolvasják. Ha egy új látogató megközelíti a weboldalt, az első dolog, amit megpróbálnak tenni, az oldal beolvassa az oldalt, és megosztja a tartalmat emészthető információt. Lehetséges, hogy ezt a feladatot megkönnyítheti a felhasználók számára néhány egyszerű szabály követésével.

Ne feledje meg az oldalt, ahol tartalmat biztosít az oldalon: Az emberek felülről lefelé olvashatók. Ezért fontos, hogy megőrizze az oldal tetején lévő fontos dolgokat, és mozgassa a pihenést a hierarchia szerint.

Vágja le a rendetlenséget: A tartalom megsemmisítése a felhasználói felületelemek felett - csökkentse a zavaró tényezőket a felesleges funkcionális és dekoratív elemek eltávolításával. Törekedjünk egy minimalista stílus létrehozására, mert ezt teszik, hogy megkönnyíti a felhasználó számára, hogy összpontosítson a feladatra.

Kerülje el a hosszú szöveg blokkokat kép nélkül: Nagyon valószínű, hogy a tartalom hatalmas huzata lesz. Használja a fejléceket, a bekezdéseket vagy a golyópontokat a szöveg felbontásához.

A fontos elemekre gyakorolt ​​vizuális súlyt: Olyan fontos elemeket, mint például a kulcsfontosságú üzenetek fókuszpontjai, így a látogatók azonnal látják őket. Hangsúlyozza az elemeket különböző méretű, szóközzel vagy élénk színekkel.

04. Hozzon létre kiszámítható navigációt

A felhasználók segítése minden weboldal számára kiemelt fontosságúnak kell lennie. Végtére is, a legmegfelelőbb tartalom haszontalan, ha az emberek nem találják meg. Ezért fontos befektetni egy szilárd navigációs rendszer tervezéséhez, a következő lépések valamelyikével.

Használja az ismerős navigációs mintákat: Amikor egy navigációs mechanizmus létrehozása a webhelyére, érdemes megjegyezni egy egyszerű szabályt: Ne felújítsa a kereket - törekedjen arra, hogy ismerős élményt hozzon létre. Mindig jobb, ha a navigációs mintákra támaszkodni, hogy a legtöbb felhasználó ismeri (például a felső navigációs sáv vagy a hamburger menü), nem pedig saját egyedi navigációs rendszer létrehozása (pl. Gesture-alapú navigációs rendszer). Ha ismerős navigációt hoz létre, segít Önnek a felhasználók számára, hogy az Ön korábbi tapasztalataira támaszkodjanak a termékkel való kölcsönhatáskor.

Határozza meg a navigációs lehetőségek teljes számát: Ne tegyen túl sok lehetőséget a menükben. Egy kiterjedt menü jól működhet az asztali helyekhez, de nem illeszkedik a mobil designhoz. Mivel a képernyő látható területén nem minden navigációs opció áll rendelkezésre, akkor a mobil felhasználókat arra kényszerítheti, hogy görgessen az opciók listáján. Gondolod, hogyan lehet bemutatni a lehető legkevesebb menüpontot. Ideális esetben a megtervezett menü legfeljebb hét különböző kategóriájuk van .

Navigációs lehetőségek prioritása : A navigáció megszervezése a felhasználók funkcionalitásával való munkavégzés alapján. A globális menüben a legnépszerűbb navigációs lehetőségek kell menniük, és az elsődleges műveleteknek rendelkezésre kell állniuk a képernyő látható területén.

Írjon tiszta címkéket: Minden navigációs lehetőségnek világos és tömör címkével kell rendelkeznie. Kerülje el a zsargont - A design navigáció nem tartalmazhat olyan kifejezéseket, amelyeket a látogatók nem fognak megérteni. A Clear Címkék lehetővé teszik a látogatóknak a cselekedeteik eredményének előrejelzését.

Biztosítani kell az interaktív elemeket, mint az interaktív elemek : A gombok és linkek tervezése során gondolj arra, hogy a design hogyan kommunikálja a megfizetést. Hogyan értik meg az elemet interaktív objektumként? Az objektum megjelenésének módja, hogy a felhasználók hogyan kell használni. Vizuális elemek néz linkeket vagy gombokat, de nem interaktív (például aláhúzott szavak, amelyek nem hivatkozások vagy téglalap alakú doboz a szavakat, amelyek nem gombok) könnyen megzavarhatja a felhasználókat.

Közelítse meg az aktuális helyet: "Hol vagyok?" olyan alapvető kérdés, amelyhez a felhasználóknak szüksége van a válaszra, hogy hatékonyan navigáljanak. Egyértelműen jelezze az aktuális helyet.

Keresési funkció megadása: Ha komplex webhelyet tervez, sok tartalommal vagy funkcióval rendelkezik, biztosítania kell, hogy keressen egy keresősávot az egyszerű navigáció érdekében. A keresési funkciók végrehajtásával gyors útvonalat biztosít a mobilhasználók számára, amelyek a webhelyhez egy konkrét kérdéssel rendelkeznek.

Ne rejtse el a keresési lehetőséget a menüben. Az egyik első dolog, amit a látogatók látnak az oldalain.

Könnyűvé teszi a felhasználók számára, hogy visszatérjenek a honlaphoz: A látogatók elvárják, hogy amikor megérinti a logót egy oldal tetején, vissza fog térni a honlapra, és csalódnak, ha ez nem működik.

Tartsa a felhasználót egyetlen ablakban: Kerülje a hívás-to-action, amely küld egy felhasználót az új ablakokba. Egyes felhasználóknak problémái vannak a mobilböngésző ablakai között, és előfordulhat, hogy nem találja meg az előző oldalt.

05. Kerülje az útblokkok létrehozását

A roadblocks súrlódást és súrlódást okoz a legrosszabb konverzió ellensége. Szerencsére vannak olyan egyszerű dolgok, amiket meg tudsz tenni, hogy elítélje őket.

Ne szakítsa meg a látogatókat: A nagy előugró ablakok az internetes élmény egyik leggyakoribb megszakításának egyike. Hosszú ideig, mint a bannereket is szentelt promo üzeneteket, de az utóbbi időben sok helyen elkezdte használni a zavaró pop-up, hogy engedélyt cookie-kat használnak (GDPR). Nem számít, milyen információkat szeretne mutatni a látogatóknak, győződjön meg róla, hogy nem zavarja az általános élményt.

Ne tegye meg a felhasználókat a webhelyén: Határozza meg a felhasználói utazások helyeit, amelyek a felhasználó megjelenhetnek a webhelyén kívül, majd biztosítják a tartalom / funkciókat, hogy megtartsák őket a webhelyén. Az e-kereskedelmi weboldalakon található promóciós kód mező talán a leggyakoribb példa, amely a látogatók elhagyják a webhelyet a kupon megtalálásának kísérletében. Sokkal jobb, ha néhány kuponot kínálnak a helyszínen, hogy megakadályozzák az ilyen viselkedést.

Ne kényszerítse a felhasználókat arra, hogy regisztráljanak: Igényes felhasználók regisztrálása, mielőtt megtekinthetnék az információkat, vagy használhat egy online szolgáltatást, nagy interakciós költség - kényszerítő regisztráció túl korai lehet Mert a felhasználók elhagyják az oldalt . A személyes adatok megadása előtt a látogatók azt szeretnének megérteni, hogy mi a webhely.

Ahhoz, hogy hozzon létre egy felhasználói áramlást a legkevésbé konverziós akadályokkal, a mobil webhelyeknek lehetővé kell tenniük a látogatók számára, hogy felfedezzék a tartalmat anélkül, hogy feliratkoznának kell lennie. Az e-kereskedelmi webhelyek esetében elengedhetetlen, hogy a felhasználók vendégként vásároljanak.

Könnyűvé válhat egy másik eszközre, hogy folytassa az utazást: Ne fontolja meg a mobil önálló élményeket. Egy tipikus felhasználó több eszköz, például egy asztali számítógép, mobil telefon és a tablet, és elvárja, hogy zavartalan legyen az egész és a hasonló eszközök használata esetén a terméket. Például sok ember használ mobileszközöket csak a termékkereséshez, majd az asztalra váltani. A felhasználók elvárják, hogy folytassa az utat, ahonnan megállt a mobilon.

Íme néhány dolog, amit tehetsz, hogy szinkronizálja a felhasználó aktuális előrehaladását:

• Sync Kívánságlista, Kedvencek és kosár a felhasználói fiókhoz.
• Könnyen módosíthatja az információkat a nem regisztrált felhasználók (például egy lehetőség, hogy elküldje az e-mail címre).

06. Tervezési hatékony formák

Az űrlap bejegyzése az internet egyik leggyakoribb feladata. Nehéz elképzelni minden olyan élményt, amely nem követeli meg a felhasználókat, hogy töltsenek ki valamilyen formát. Mivel ez egy ilyen mindenütt jelenlévő gyakorlat, az a képesség, hogy kitöltsön egy forma fájdalommentes, döntő fontosságú a felhasználó beavatkozása. Íme néhány olyan tipp, amely segíthet a súrlódást minimálisra tartani:

A formanyomtatványok minimalizálása: Általánosságban elmondható, hogy a felhasználónak a felhasználónak meg kell adnia, annál inkább élvezni fogja az internetes élményét. Ezek a mutatók segítenek csökkenteni a billentyűleütéseket, és a felhasználóknak meg kell tennie a felhasználókat:

• Minimalizálja a mezők teljes számát. Mindig a felesleges mezők eltávolításával mindig rövid és egyszerű formanyomtatványokat tartson fenn. Kérdezd meg, hogy mit kell tudnod.
• Használja az automatikus helyes, automatikus kapitalizációt és az automatikus teljesítést a felhasználói hiba esélyének csökkentéséhez.
• Kerülje a legördülő mezőket. Dropdown elrejteni a lehetőségeket, és ez megteremti extra kölcsönhatás költség - a felhasználóknak meg kell, hogy érintse meg kétszer, hogy kiválassza a megfelelő beállítást. Ha a legördülő mezőt használja az opciók kiválasztásához, fontolja meg, hogy a rádió gombokkal helyettesítse.
• Automatikusan lépjen a következő mezőre, amikor a felhasználó megnyomja a visszatérést.
• Minimalizálja az űrlap hibákat valós idejű inline érvényesítéssel.
• Használja a meglévő információkat a kényelem maximalizálásához. Például elő kell tölteni néhány olyan mezőt, mint például a szállítási cím vagy számlázási információk a regisztrált felhasználók számára.
• Gondolj az alternatív bemeneti mechanizmusokra. Fontolja meg, hogy az eszközkapacitások hogyan használhatók fel, hogy jobb felhasználói élményt nyújtsunk. Például ahelyett, hogy a felhasználó által beírt hitelkártya adatait, biztosítja a lehetőséget, hogy használja az eszköz kamerájával olvassa a kártyát, és más rendszerek integrálását, mint az Apple és a Google Pay Pay fizetni tudjanak egyetlen érintéssel.

A megfelelő billentyűzet biztosítása: A mobil felhasználók értékelik a webhelyeket, amelyek megfelelő billentyűzetet biztosítanak a mező számára. Ez a funkció megakadályozza, hogy minden további műveletet elvégezzenek. Például, ha a felhasználóknak meg kell adniuk egy telefonszámot, a honlapon meg kell jelennie a numerikus billentyűzet 0-9.

Állítsa be a HTML bemeneti típusokat a megfelelő billentyűzet megjelenítéséhez. Itt van hét bemeneti típus, amely releváns a formanyomtatvány:

• Beviteli típus = "szöveg" Megjeleníti a mobileszköz normál billentyűzetét.
• Beviteli típus = "e-mail" Megjeleníti a normál billentyűzetet és "@" és ".com" -t.
• Beviteli típus = "Tel" Megjeleníti a numerikus 0-9 billentyűt.
• Beviteli típus = "szám" Megjeleníti a számokat és szimbólumokat.
• Beviteli típus = "dátum" Megjeleníti a mobileszköz dátumválasztóját.
• Beviteli típus = "DateTime" Megjeleníti a mobileszköz dátumát és időválasztóját.
• INPUT típus = "hónap" Megjeleníti a mobileszköz hónapjának és évválasztóját.

Hagyja, hogy a felhasználók módosítsák a helymezőt: Sok webhely automatikusan észlelheti a felhasználói helyet, és ezt az információt használja a releváns tartalom megadásához. Alapvető fontosságú, hogy a felhasználók megváltoztassák a helyet, mert egyes esetekben a felhasználók más helyen is szeretnék eredményeket találni.

07. Törekedjünk egy következetes élmény létrehozására

A konzisztencia a felhasználói élmény egyik legfontosabb pillérje. A konzisztens kialakítás felhasználóbarát kialakítás - a következetes kialakítás létrehozására összpontosítva, több intuitív designt hoz létre. Mindig törekedjen arra, hogy a honlapot belsőleg és külsőleg következetesvé tegye.

Belső konzisztenciája: Hozzon létre egy konzisztens könyvtárat, és használja a webhely összes oldalára. Betűtípusok, gombok, linkek, ikonok és minden más UI elemeket összhangban kell lenniük az egész honlapon tartani vizuális összhang.

Külső konzisztencia: Győződjön meg róla, hogy az Ön által tervezett weboldal úgy néz ki, mint egy nagyobb termékcsalád része. Például, ha van mobilalkalmazásod, a mobil webhelyének meg kell adnia az ismerősség érzését a felhasználók számára.

08. Építsd meg a legjobb mobil webhelyét

Az itt említett összes pont az ipar legjobb gyakorlatoknak tekinthető. De csak azért, mert valamit "legjobb gyakorlatnak" neveznek, nem jelenti azt, hogy ez az optimális megoldás a webhelyére. Ezért mindig fontos, hogy tesztelje a tervezési döntéseit. Használhatóvá teszi a tervezési folyamat kötelező részének vizsgálatát, és rendszeresen növeli a tapasztalatot.

Ezt a cikket eredetileg a 317. \ t háló , A világ legjobban értékesítő magazinja webes tervezőknek és fejlesztőknek. Vásároljon ki kérdezést 317 vagy Feliratkozás a netre .

Kapcsolódó cikkek:

• 6 Trends, amelyek megváltoztatják a mobil UI design arcát
• 10 tipp a jobb mobil UX Design számára
• A felhasználóbarát mobil interfészek tervezése