Links

Windows Store UX részletek, egyben a Metro stílus ékes példája

In Új kínálat/stratégia on 2012. január 22. vasárnap by Nacsa Sándor Címkézve: , , , , , , , , , , , , , , , , , ,

A Windows Store előzetes (Szoftver aktualitások, 2011. dec. 7.) ismertetést követően roppant jó hír volt, hogy míg az akkori, első tervekben még nem szerepeltek a hazai fejlesztők, január elejére sikerült elérnünk, hogy majdan hazánkból is lehet Metro stílusú, új alkalmazásokat a Store-on keresztül értékesíteni, akár a világ bármelyik részén. Lásd korábbi, ezzel kapcsolatos bejegyzéseimet és híradásaimat:
Magyar fejlesztők, Windows Store-ra fel! (devPortal.hu, 2012. jan. 6.)
Mostantól magyar fejlesztőknek is hozzáférhető lesz a Windows Store (prog.hu, 2012. jan. 6.)
Mostantól magyar webfejlesztőknek is hozzáférhető lesz a Windows Store (Weblabor, 2012. jan. 8.)
– Hazánkból is lehet úgy egyénileg, mint cégesen publikálni majd alkalmazásokat a Windows 8-ra az ún. Windows Store-ban. (budapest.js FB csoport, 2012. jan. 8)
– Napjainkra a front-end kompetenciák szinte minden másnál fontosabbak lettek. Ennek jó példája a leendő Windows 8 is. (Frontend Meetup [FB] Group, 2012. jan. 8.)

A Windows 8 béta február végi megjelenésével egyidejüleg még csak meghívott alkalmazásokkal megjelenő Windows Store-al kapcsolatban újabb felkészülési információt tett közzé pénteken a Microsoft:
Designing the Windows Store for Windows 8 [Microsoft video by Jonathan J. Wang, program manager on the Windows Store team, Jan 20, 2012]

In designing the Windows Store, we’ve tried to strike a balance between a design optimized for serendipitous app discovery through curated content, and one where customers can easily find the apps that they search for directly. We’ve worked hard to engage customers by emphasizing the brand icons and colors of each app in the app listings and the apps themselves. Discovering, installing, and updating apps are all designed to be as simple and fast as possible. Because the app discovery process will be so easier than ever before for customers, we think the new Windows Store represents the largest ever opportunity for developers.

Jonathan J. Wang egy részletes cikket is írt erről:
Designing the Windows Store user experience [Jan 20, 2012]

A cikk számtalan magyarázatot tartalmaz a kialakított User eXperience-el (felhasználói rendszerrel) kapcsolatban, ami komplett elgondolási leírásként (ún. rationale-ként) is szolgál. Az alábbiakban csak a lényegi váz kerül magyar nyelven összegzésre, mindenféle magyarázatok és indoklások nélkül annak érdekében, hogy az eredeti anyag teljességére nem kiváncsiak is a lehető legegyszerűbben átláthassák ennek az óriási jelentőségű, új értékesítési rendszernek az egyszerűségét és nagyszerűségét. Az ilyen ismertetés további haszna, hogy jól példázza a jövendő, ún. Metro stílusú alkalmazások felhasználói felület és használati élmény beli sajátosságait, annak az eddigi “egeres, ablakozó és menüs” megoldásokkal szembeni előnyeit.

Oldalak:

  • nyitó oldal (landing page)
  • tematikus szerkesztőségi oldalak (editorial topic pages)
  • adatgenerált listák (data-generated lists) a böngészéshez, akár egy keresés eredményének megjelenítéséhez, vagy akár a nyitó oldalon szereplő egyes kategóriák pontos nézeteihez
  • alkalmazás lista oldalak (app listing pages) az adott alkalmazás tájékoztató és figyelemfelkeltő információinak megjelenítésére (fejlesztők általi elhelyezésére), azaz az alkalmazás leírására

Mindezt a következő elvi struktúrába rendezve kell elképzelnünk magunknak:
Store anatomy diagram shows Store landing page which links to Editorial, App description, and Category pages. Editorial and Category pages also link to App description page.

A nyitó oldalt az alábbi hosszú struktúraként, ún. panoráma nézetként kell elképzelnünk:
Long horizontal view of Store with categories: Spotlight, Games, Entertainment, Photos, Music & videos, Books & reference, News & weather, Lifestyle
ha erre itt most rákattintunk, akkor látjuk példánk teljes megjelenítési képét, benne a fellelhető kategóriákkal. Mint a korábbi elvi struktúra mutatta, az egyes összetevő panelekről vagy egy tematikus szerkesztőségi oldalra, vagy egy alkalmazás leírására (az ennek megfelelő adatgenerált listára), vagy egy kategória nézetre (az ennek megfelelő adatgenerált listára) tudunk tapintással eljutni.

Vonatkozó használati élmények:

    • keresés (search):

      • bárhonnan a Windows 8-ban
        View of the weather app, with search pane on right, set to search for "sudoku" in the Store.
      • a Windows Store-ban hasonló módon
        Store home page, with Search pane on right, set to search for "intern apps" in the Store
      • A keresőszöveg begépelése alatt rögtön javasolt szövegek jelennek meg. Amennyiben ez megfelel egy alkalmazásnak, akkor “Recommended (ajánlott)” eredményként tűnik fel és rátapintva rögtön az adott alkalmazás lista oldalra jutunk:
        Cut the Rope / Store > Games > Puzzle / ***** Average rating (1023) / $1.49 / Buttons: Buy / Try / Image and description of app
        Megjegyzés: Ez az eredetileg iOS-re készített, Apple App Store sikeralkalmazás már a dec. 6-i Windows Store előzetes bemutatón szerepelt. Nemrégen részletes információ jelent meg az ennek kapcsán szerzett portolási tapasztalatokról, amiről külön bejegyzésben számoltam be. Ld. Cut the Rope: avagy mire képes a Microsoft-os HTML5 és JavaScript? (devPortal.hu, 2012. jan. 10.)
    • böngészés (browse):

      • Amennyiben általánosabb a keresés, akkor egy megfelelő adatgenerált listára jutunk,
        Results for
        ahonnan kiválaszthatjuk a bennünket érdeklő alkalmazást (és így annak alkalmazás lista oldalára juthatunk).
      • Hasonló dizájn-t alkalmaztak a kategória nézeteknél is:
        Games category, containing 28 apps, and Filters: All prices, Free, Free and Trial, and Paid.
    • telepítés (install):

      • Az alkalmazás lista oldalon egyszerű rátapintással kezdeményezhető az telepítés (fizetős alkalmazásoknál kell csak egy plusz megerősítés), majd visszakerülünk a megelőző oldalra, ami – gonduljunk bele – lehet a nyitó oldal, a kategória oldal, vagy az előzőleg megtekintett adatgenerált lista, amit éppen nézegettünk. Így folytathatjuk a megkezdett Windows Store használatot a telepítés ideje alatt is.
      • Ezenközben egy előrehaladás jelző (progress indicator) mutatja a telepítés állását, de szükség esetén, az előrehaladás jelzőre való tapintást követően, a maga teljességében is megtekinthető, a potenciálisan több alkalmazásra kiterjedő telepítési folyamat aktuális alakulása:
        Installation details page with list of four apps, each showing a progress bar and "Downloading..."
    • Egy alkalmazás telepítésének befejezésekor értesítést kapunk, melyre tapintva azonnal elindul az alkalmazás, és így rögtön ki is próbálhatjuk azt.
  • frissítés (update):

    • Naponta ellenőrzésre kerül, hogy mely alkalmazásokhoz van frissítés, ami a Windows 8 “Store” csempéjében (tile), mint a frissítéssel bíró alkalmazások száma jelenik meg számunkra. A vonatkozó Updates oldalon minden rendelkezésre álló frissítést látunk
      App updates / 8 updates available
      és tipikusan az ott található egyik gombra tapintva az összes frissítést elindíthatjuk. A frissítések a háttérben zajlanak, amikor gépünk éppen nem csinál semmit, sőt akkor, amikor nem vagyunk a fizetős mobil hálózaton. A frissítések kezdeményezése után az előző oldalra jutunk vissza a Store-ban.

Mivel több PC-je is lehet valakinek egyszerre max. 5 db. Windows 8 PC-n lehet telepítve egy alkalmazás. Az is megoldott, hogy az egyes alkalmazások beállításai és állapotai azonosak legyenek az egyes gépeken.

3 hozzászólás to “Windows Store UX részletek, egyben a Metro stílus ékes példája”

  1. […] […]

  2. […] Windows Store UX részletek, egyben a Metro stílus ékes példája (Szoftver aktualitások, 2012. január 22.) […]

  3. […] Windows Store előzetes ('Szoftver aktualitások' blog, 2011. december 7.) – Windows Store UX részletek, egyben a Metro stílus ékes példá… ('Szoftver aktualitások' blog, 2012. január […]

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: