Mobile Web Design 10 tipp a jobb használhatóság érdekében

A mobil internetes böngészés várhatóan a következő nagy internetes platform lesz. Most már könnyedén böngészhet a hálózaton szinte bárhonnan, a technológia miatt a kézbe illeszkedő mobil eszközök használatával. A mobil webdesignban a jó használhatóság megvalósításának rövidsége megnehezíti a különböző népszerű mobil webhelyek körüli böngészést. A mobileszközök tervezésének egyszerűbbnek kell lennie, mint a szabványos webhelynek, és több feladat-alapúnak kell lennie ahhoz, hogy a munkát elvégezze, mert a felhasználók valami konkrét és sürgős.

Figyelembe kell vennie, hogy hogyan használhatja a legfontosabb tartalmat a legfontosabb tartalmakhoz, és továbbra is érdekes lehet a mobil felhasználók számára. Kerülje a nagy képeket és a flash animációt, mivel ez lassítja a webhelyét. Ne feledje, hogy a funkcionalitás fontosabb, mint a mobil webhelyek stílusa. Ha a webhelye nincs kódolva és megfelelően tervezve, jobban nézhet ki egy telefonon, legrosszabb egy másik vagy rosszabb, és egyáltalán nem jelenik meg. Ellenőrizze, ellenőrizze és ellenőrizze, hogy kompatibilis-e az összes mobil eszközzel.

Ha nem csak asztali vagy hordozható számítógépeken, hanem mobil eszközökön is elérhetővé válik a webhely létrehozása, a mobil webes tervezési szempontok közül néhányat figyelembe kell venni a mintaképekkel együtt a mobil weboldal verziójának közvetlen linkjével együtt.

1. Döntse el a képernyő felbontását

A mobil világ a tervezési megfontolások gazdag variációit tartalmazza a különböző képernyőméretek és a különböző formájú felbontások között. Célja, hogy egyensúlyt teremtsen a megfelelő képernyő szélessége és a közönség mérete között. Ismerje meg az aktuális mobileszközök specifikációit és használja a legjobb ítéletet. A mobilfejlesztők számára kihívást jelent az, hogy megfelelő módon jelenítsük meg a képernyőn megjelenő különböző méreteket anélkül, hogy új platformokat kellene létrehozni különböző platformokra.

Itt van egy lista a mobil eszközökön népszerű webes állásfoglalásokról 2011 februárjától, amelyet az Uxbooth.com mutatott be a közzétett cikkükkel, A Mobile Web Design (2. rész) szempontjai: Méretek, David Leggett. A szerző néhány pontot ismertet a megjelenítési méretekről és az elrendezés tervezésére vonatkozó megoldásokról.

2. A weboldalakat apró részletekre bontja

A szöveg hosszabb szakaszai nehezen olvashatók, így több oldalra helyezése korlátozza a görgetést egy irányba. Megszabadulni az alacsony prioritású tartalomtól. Ragaszkodjon egy olyan szöveges oszlophoz, amely burkol, így nincs vízszintes görgetés.

Az alábbi példában a CBS News mobil honlapja csak a legfrissebb híreket mutatja be, és a cikkeket kis részletekre bontja. Míg a Treehugger bemutatja magát a legújabb cikkekkel és a legújabb tweetekkel, a teljes weboldal néhány funkciójával. Mindkét webhelyen a felhasználó egy szöveges linkre kattintva megtekintheti a cikk többi részét.

CBS News

Fa ölelő

3. Egyszerűsítse a tervezést

Az egyszerűség a használhatóságot jelenti. Hagyjuk, hogy nehezen mozogjanak a helyszínen. Kerülje a táblázatok, keretek és egyéb formázások beillesztését. Ha párnázást használ, ne feledje, hogy az abszolút minimálisra csökken, mint amit egy normál weboldalhoz használna. Az asztali számítógépekhez képest minél többet kattint a mobil weboldalakon található linkekre, annál többet vár a betöltési idő miatt. Ezzel le kell zárnia és egyszerűsítenie kell webhelyét a tartalom és a navigáció közötti egyensúlyban.

Példánkban a Best Buy mobil verziója csak a legfontosabb termékkategóriákat sorolja fel a tartalom hierarchiájának szintjét. Míg a YouTube mobil kezdőlapja csak a négy legfrissebb spotlámpa videót jeleníti meg.

Legjobb vásárlás

Youtube

4. Lehetőség a teljes weboldal megtekintésére

Adjon meg egy linket a mobil látogatóinak, hogy visszatérjen a teljes webhelyére, hogy a felhasználó megtalálhassa és megtekinthesse azt a tartalmat és funkciókat, amelyek csak a webhely asztali verziójához hozzáférhetők. A nézők biztosan sok függőleges görgetést végeznek, így segítenek a "Vissza a tetejére" linkekre, hogy az oldal tetejére ugorhassanak.

Például az Ars Technica hivatkozási gombja a szabványos weboldalon található. Míg a Shangri-La teljes láncszemét a láblécre helyezi.

Ars Technica

Shangri La

5. Navigációs elhelyezés

Ismerje meg közönségét, és tisztában legyen azzal, amit keres. Tudja meg, hogyan fognak navigálni a webhelyén. Helyezze el a navigációs menüt a tartalom alatt, ha a célzott mobilfelhasználók gyorsan szeretnék látni a tartalom megváltoztatását. A tartalomnak és a fejlécnek először láthatónak kell lennie, hogy ne lássa el az oldal tartalmát. Azon felhasználók számára, akik azonnal egy adott kategóriában kívánnak navigálni, helyezzük el a navigációt az oldal tetejére. Az alábbiakban a mobil webes tervezésben használt navigációs elhelyezés különböző mintáit találjuk.

D & G

politikus

napi horoszkóp

6. Használja a szöveges hivatkozásokat

A fő weboldala whizzy-out-out menüket, rollovers-t vagy más divatos szerkentyűt használhat, de a mobilböngésző valószínűleg nem. Ne feledje, hogy a dinamikus oldalelemek és a grafikus linkek erőforrásokat fogyasztanak, ezért válasszon jól jelölt szöveges hivatkozásokat.

Egy lista külön

Reddit

7. Tegyen különbséget a kiválasztott link között

A kurzor mozgatása lefelé görgeti az oldalt, és egyszerre kiemeli a linkeket. Ezért fontos, hogy egyértelműen tanácsot adjunk a felhasználónak, hogy melyik elem van a fókuszban. Ezt a linkek és gombok betűkészletének és háttérszínének megváltoztatásával, vagy a linkek köré történő hozzáadásával lehet elérni, hogy a kattintható terület 44px-nál nagyobb legyen 44px-nál. A Geek Squad és a Diesel nagyszámú betűtípust használt a kattintható szöveghez.

Geek Squad

Dízel

8. Balance linkek

Minden oldal letöltése tölti az idő és a rendszer erőforrásait, amelyek közül az utóbbiak hiányoznak, ezért ne próbálja a webhely látogatóját sokoldalú oldalra kényszeríteni, hogy hozzáférjen a keresett információkhoz. Keressen egyensúlyt az egyes oldalak linkjeinek száma és a webhely mélysége között.

Flickr

Twitter

9. Csökkentse a felhasználói szövegbevitelt

A weboldalak mobil verzióiban nehéz szöveget írni. Cserélje ki a rádió gombokkal vagy a listával, így választhat, hogy könnyebben választhatja ki őket. Ne feledje, hogy a mobil felhasználóknak nincs hozzáférése a hagyományos billentyűzethez és egérhöz. Minél rövidebb az URL, annál jobb, ha hosszú URL-eket írhat be.

Az alábbi minta esetében a Fedex ellenőrző listát és legördülő menüket használt. Míg a Tumblr kiválasztotta a nyelvet a legördülő menüből.

Fedex

Tumblr

10. Nem bukkan fel vagy frissül

A mobilböngészők általában nem támogatják a felugró ablakokat. És ha igen, nagyon szűk helyük van ahhoz, hogy bejussanak. Maradjon távol tőlük, hogy elkerülje a kiszámíthatatlan eredményeket. Továbbá nem kell rendszeresen frissítenie az oldalakat, hogy elkerülje a készülék korlátozott memóriájának kitöltését. Hagyja, hogy a felhasználó frissítse a tartalmat.

Dióhéjban

Legyen kreatív és alkalmazza a mobil web designját új módon. Tegye elégségesnek és hasznosnak a tartalmát. Adja meg a felhasználóknak, mit akar, ha akarja. A felhasználók nem akarnak mélyebben ásni a webhelyre, hogy megtalálják, amit keresnek a mobil weben.

Van-e olyan preferált mobil webhelye, amely igazán inspirált? Megoszthatja néhány mobil webdesign tippjét? Tudasd velünk!

További irodalom

1. Érzékeny Web Design (Alistapart.com)
2. Tegye elérhetővé a webhelyet (Thinkvitamin.com)
3. W3C mobilOK ellenőrző (W3.org)
4. iPhone szimulátor