Mobile-only termékek asztali környezetben

Hogyan transzformálta a Tinder és az Instagram a mobilalkalmazásait nagy képernyőre?

Horváth László
Works.

--

Számtalan alkalmazást, digitális terméket használunk nap mint nap, nem egyet laptopon és mobilon párhuzamosan. Van azonban egy csomó olyan szolgáltatás is a piacon, ami kizárólag egy platformon, mondjuk mobilon érhető el. Sokszor fel sem merül bennünk az igény, hogy máshol is használjuk őket, hiszen tökéletesen kiszolgálják az elvárásainkat. Aztán néhány esetben mégis megjelenik az igény jól artikulált vagy látens módon, és ezekre a termékeknek is választ kell adniuk.

Az Instagram például 2010-ben egy iOS-exkluzív appként kezdte meg hódító útját, amihez csak 2012-ben készült el a webes kliens. A Tinder esetében 5 év telt el az alkalmazás megjelenése (2012) és a weboldal indulása között (2017).

Mivel sok digitális termék esetében ez pont fordítva van, a webet ültetik át mobilra, úgy gondoltam érdekes és tanulságos lehet összehasonlítani ezeket az alkalmazásokat a weboldalukkal: Hogyan oldotta meg a feladatot a két óriás? Mely funkciókat emelte át webre és melyeket nem? Mit változtatott meg a felhasználói felületen és mit tartott meg?

Tinder

A Tinder az egyik legismertebb és legelterjedtebb randialkalmazás, ami 2017-ben vált elérhetővé a böngészők számára.

A felületet meglepően egyszerűen alakították át, hogy nagy kijelzőn is érvényesüljön. Gyakorlatilag két mobil képernyőt helyeztek egymás mellé, melyek felépítése teljesen megegyezik az appban használttal.

2 mobil képernyő megjelenítése párhuzamosan: menü és profil oldal

A bal oldali képernyő minden esetben egy menü, ami míg az alkalmazásban egy menüpont kiválasztásakor eltűnik, itt mindig látható marad. Így érhetőek el a beállítások, de a beszélgetéseket is így listázza a felület. A jobb oldali képernyő azt a funkciót jeleníti meg, amit épp megnyitott a felhasználó. Itt szerkeszthető a profilja, itt írhat üzenet, vagy swipe-olhat jobbra és balra a partnerajánlatok között.

Érdekes kérdés, hogy a Tinder emblematikussá tevő jobbra-balra swipe-ot hogyan oldották meg a fejlesztők. A laptopok nagy része nem rendelkezik érintőképernyővel, a fogd és vidd módszer pedig kurzorral nem olyan kényelmes és gyors, mint érintőkijelzőn. Ezért a swipe-oláshoz hasonlóan egyszerű és intuitív megoldást kellett találni.

2 mobil képernyő megjelenítése párhuzamosan: meglévő partnerek listája és új partnerajánlatok

Minden funkcióhoz, ami az appban egy gesztussal vezérelhető, billentyűt rendeltek. Azt, hogy melyik billentyű mire való, a képernyő alján jelezték. Így a balra swipe-ot egyszerűen a balra, míg a jobbra swipe-ot a jobbra mutató nyíl váltotta ki. A profil megnyitása a felfelé mutató nyíllal, a képek közötti váltás pedig szóközzel érhető el. Egyszerű, gyorsan elsajátítható, és a mobilapp élményét meglepően jól visszaadó megoldás született így.

Instagram

Az Instagram egészen máshogy oldotta meg a webes megjelenítés feladatát. A közösségi oldal nem csak kinézetében, de funkcionalitásában is eltér az alkalmazástól.

Instagram mobilappban és asztali böngészőben: Az azonos színek azonos elemeket jelölnek mobilon és böngészőben

Az asztali verzióban végig tudjuk pörgetni a feedet, tudunk lájkolni és kommentelni, meg tudjuk nézni a storykat, de azon belül a szavazás pl. már nem érhető el. Nem lehet továbbá képet/videót készíteni, szerkeszteni, vagy feltölteni azt. Nincs azonnali üzenetváltásra sem lehetőség.

Az eltérő funkcionalitáshoz egy átszabott felület is társul. A képernyő aljáról felülre költöztek a navigációs gombok. Felülről viszont eltűnt a fényképezőgép az IGTV és a chat funkció, így a home mellett mindössze a keresésnek, az értesítéseknek és a profilnak kellett helyet találni.

Érdekesség a felfedézés funkció, ami új tartalmakat ajánl nekünk az éppen népszerű aktualitások közül. Appon belül nincs külön ikonja, a keresésen belül érhető el ajánlatkártyák formájában. A böngészőben azonban külön ikon alatt található meg, a kereséstől függetlenül (Amellett, hogy a keresés fixen mindig látszik a headerben).

Mobilon a felfedezés a keresés alatt bújik meg, míg a böngészőben külön menüpont alatt található. Ezzel együtt a keresés mindig látható a headerben (sticky).

A Storiet (ismerőseink 24 óráig megtekinthető audiovizuális tartalmai) a képernyő tetejéről oldalra költözött, ami a headerhöz hasonlóan stickyként lehetővé teszi, hogy ezekhez bármikor hozzáférjünk, akár a lejjebb görgetést követően is. Hely bőven van, így a fejlesztők kényelmesen élhettek ezzel a megoldással (lásd első kép).

A fentiek alapján azt látjuk, hogy az Instagram weboldala kizárólag a tartalomfogyasztásra fókuszál, sőt a felfedezés funkció külön menüpontba helyezésével még hangsúlyosabbá is teszi azt. De mi lehet az oka a böngészőből kihagyott funkcióknak? Emlékezzünk, hogy az Instagram egy kizárólag képmegosztásra szakosodott portálként indult, és ezt a fókuszt tudatos és helyesen(?) fenntartja a mai napig. Nem akar multiplatform üzenetküldővé alakulni, vagy a Facebookkal konkurálni. Egész egyszerűen lehetővé akarja tenni a tartalomfogyasztást olyan esetekben is, amikor a felhasználó nem tudja, vagy nem akarja használni a telefonját. Ehhez csak grátisz a nagyobb kijelző nyújtotta kényelem, és az Instagram fiókkal nem rendelkezők elérésének lehetősége.

Zárógondolatok

Mindkét platform alapvetően sikeresen alkalmazkodott az asztali környezethez, de idegennek hatnak rajta. Az álló formátumú képernyők mind a Tinder, mind az Instagramon belül a Stories esetében furcsa és szokatlan benyomást keltenek. Akarva-akaratlanul éreztetik a felhasználóval, hogy itt bizony nem természetes közegében figyelhetik meg a szolgáltatást.

Ez persze nem baj, hiszen elsődlegesen mobilappokról beszélünk. A prioritások nem fognak változni, sőt, várhatóan egyre több mobile-only termék nyit alternatív platformok felé.

Élményszerű digitális felületek és kiszolgálási folyamatok létrehozásában segítjük ügyfeleinket. Ez a Works.

--

--

Horváth László
Works.
Editor for

Hivatásomban a lehető legjobb digitális termékek létrejöttéért küzdök. Civilben fotók mögé bújva keresem az élet értelmét.