Skip to content

Instantly share code, notes, and snippets.

@judge
Created December 6, 2012 09:06
Show Gist options
  • Save judge/4223121 to your computer and use it in GitHub Desktop.
Save judge/4223121 to your computer and use it in GitHub Desktop.
Modern UI/UX

Modern UI/UX

Az okos-telefonok és táblagépek térnyerése nagy lendületben van. Friss adatok szerint Magyarországon a szolgáltatók már októberben átlépték a 800 ezres értékesítési számot (tavaly év végi rekord), év végéig 1 millió okos-telefon találhat gazdára. A statista előrejelzése szerint 2013-ban "Smart Device Boom"-ra lehet számítani, 800 millió okos-telefon lesz forgalomban (Forrás: statista).

Ezeket az eszközöket gyakori de rövid idejű használat jellemzi, ezért mindent meg kell tenni annak érdekében, hogy ingázás, utazás, sorban állás közben a felhasználó a legrövidebb időn belül és legegyszerűbben jusson információhoz. Érdemes újragondolni a meglévő, számítógéphez kötött applikációk UI mintáit és felkészülni az egyszerű, ujjal irányított interfészekre.


Egy nagyon jó összefoglalás található az alapokról ebben a cikkben. A téma elsősorban az érintőkijelzős monitor interfészek, pl. kórházaknak készült terminálok UI tervezése, de úgy gondolom, hogy ezeken az alapokon érdemes elindulni a mai modern eszközökre való tervezéskor is (a cikk 2010-es, az iPad megjelenése előtt íródott).

Kiemelések, saját gondolatok:

  • Méretek: az ujjak kevéssé precízek mint az egér vagy stylus, ezért elengedhetetlen hogy nagyobb méretű UI elemeket használjunk.

  • Játékosság: több ujjas, swipe, pinch gesztusok stb. mind-mind hasznosak és egyúttal játékosságot is adnak a felhasználónak.

  • Tapinthatóság: finom gradiensekkel, csillogásokkal azt az érzést kell keltenünk, hogy a felhasználó igazi, valóságos elemeket használ a kijelzőn. Ha egy felhasználó az életben már megszokott dolgokat lát és azok úgy is viselkednek ahogy azt elvárja, akkor nagyobb bizalommal lesz az applikáció iránt.


It’s About People, Not Devices
Desktop és mobil web összehasonlítása, hogyan használjuk az új eszközeinket?

Kiemelések, saját gondolatok:

  • A desktop böngészésnél adott egy nagy képernyő, nagy sávszélesség, egér, billentyűzet, kényelmes szék. A mobilra kis kijelző, általában egy kezes vezérlés, lassú kapcsolat jellemző. Rövid ideig használjuk és sok a zavaró tényező körülöttünk.

  • A mobil interakciónak egyszerűnek, gyorsnak kell lennie és ki kell használnia az eszközhöz kapcsolódó összes plusz lehetőséget. Példák:

    • GPS: nem kell manuálisan megadni a helyzetünket
    • Kamera: vonalkód leolvasás, termék azonosítás
    • Giroszkóp: az eszközt elfordítva optimalizálhatjuk a megjelenítést
  • Számít-e maga az eszköz? Nagyrészt már nem is telefonálásra használjuk az okos-telefonokat. Inkább egy üres vászonra hasonlítanak ami különböző hálózatokon és API-kon keresztül végtelen számú felhasználóhoz, más eszközhöz kapcsolódik. Ezek az eszközök már nem telefonok és nem is tradicionális számítógépek, az interfészeket ennek tudatában kell újragondolni.


The Elements Of The Mobile User Experience
Átfogó leírás a használható mintákról, hogyan tökéletesítsük az interfészeket az új felhasználói szokások és új eszközök számára.

Kiemelések, saját gondolatok:

  • "Mobilize, don’t miniaturize", "Don’t shrink, rethink". Vagyis ne egyszerűen csökkentsük le a design méretét, gondoljuk újra. Egy lekicsinyített desktop design valószínűleg nem lesz használható egy okos-telefonon vagy táblagépen.

  • Minimalizáljuk a szükséges beviteli mezőket. Használjunk rövidebb adatokat, pl. irányítószám megadásából (4 karakter) ki tudjuk találni a várost. Jó megoldás még az "autocompletion", tipikus hibák javítása (gnail.com -> gmail.com), helyesírás ellenőrzés stb.

  • Használhatóság: egyértelműen jelezzük, ha egy adott elem interaktív (mit lehet megnyomni, kijelölni, elhúzni stb.). Figyeljünk az elérési zónákra: általában egy kézzel használjuk az eszközöket, vannak területek amiket nehezen vagy egyáltalán nem érünk el. Ezekre a területekre érdemes destruktív funkciókat tervezni, pl. egy elem törlése. A mentés, navigációs elemek viszont könnyen elérhető helyen legyenek.


Gestures as a New Dimension in Mobile Design
Három, egyértelműen érintőkijelzőre készült applikáció elemzése gesztusok szempontjából: (Clear, Pair, Paper)

A cikk rávilágít arra, hogy egy applikáció tervezésekor nem elég már a vizuális dolgokra fókuszálni, egy új "dimenzió" jött létre az érintőkijelzők és a több ujjas gesztusok születésével. A gesztusok használata elengedhetetlen ha igazán hatékony applikációt tervezünk.

Könyvek

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment