a koncepciótól a drótváz tervig - kollin zoltán
DESCRIPTION
Egy iPhone alkalmazás képernyőinek megtervezése.TRANSCRIPT
A koncepciótól a drótváz tervekig
Kollin ZoltánApp! képzés
HELLOmy name is
Kollin Zoltánux designer @ mito
UX DESIGN?
WTF
Mit fogunk ma csinálni?
Megtervezzük, hogyan működjön az appunk
Adott egy brief(képzeletbeli, de most pont jó lesz)
Kulcsszavak:játék / nyeremény / közösségi / helyszínek
“Kell egy app az EB-re”
A koncepció összeállt
Mit kell tudnia az appnak?
1. Fogadás az EB mérkőzéseire2. Verseny / nyereményjáték3. Meccsnézős helyszínek listája
Kocsmakereső
iPhone appot tervezünk
Először egy kis információgyűjtés
Az EB dióhéjban
Június 8. - július 1.16 csapat, 4 csoportbanCsoportmérkőzésekNegyeddöntőElődöntőDöntő
Sportfogadás 1x01
A)Végeredményre tippelek “3-2 lesz az olaszoknak”
B)Totózom “az olaszok nyerik a meccset”
Helyszínek mobilon
Most már kezdhetjük a tervezést
bit.ly/drotvazvideo
Vissza a funkciókhoz
Mit kell tudnia?
1. Fogadás az EB mérkőzéseirehazai - vendég - döntetlen + odds + tét (virtuális pénz)
2. Verseny / nyereményjátéktoplista
3. Kocsmakeresőtérkép / lista
Fogadás Toplista
Helyszínek
A fő funkciók tehát:
Mit akar a felhasználó?
“Este meccs, gyorsan tippelek is rá”
“Megnézem, bejött-e a múltkori tippem”
“Megelőztem már a haveromat?”
“Valahol meg kéne nézni a meccset”
“Eddig hány meccset találtam el?”
Fogadás
Toplista
Helyszínek
Eredmény?
Eredmény?
FogadásToplista
Helyszínek
A fő funkciók tehát:
Eredményeim
Folyamatok
Az első lépések
LetöltömElindítom HasználomBelépek
FB connect
“Használom”
Tippelek “Eltaláltam?”Várok az eredményre
Megnézem a meccset
Jegyzeteljünk
Fogadások - hogy működjön?
Mérkőzések listája
Korábbi mérkőzések eredményei
Új fogadás kötése:1. kiválasztom a meccset2. tippelek (pl. döntetlen)
3. megadom a tétemet
Mai mérkőzés kiemelve
Toplista - hogy működjön?
Külön a barátaim és az összes játékos listája
Saját helyezésem kiemelve!
Helyezés - név - pontszám(Facebook avatar?)
Helyszínek - hogy működjön?
Kell egy település választó
Listás és térképes megjelenítés a helyszínekről
Hány település lesz? Csak Budapest? Csak nagyvárosok?
Eredményeim - hogy működjön?
Mennyire voltam eredményes eddig?
Hány pontom van?
Hányadik vagyok a toplistán?
Az app képernyői(sitemap)
Mérkőzések listája
Mérkőzés oldala
Fogadás
Toplista Helyszíneklistája Eredményeim
Térkép Település választó
FB belépés
Drótváz tervezés
Mit nem mutat meg?
Hogy pontosan hogy fog kinézni.
Tipográfiát
Grafikai elemeket
Színeket, formákat, vizuális stílust
Mit mutat meg?
Alapvető képernyőszerkezetetNavigációtTartalmi blokkokatA megjelenítendő információkatInteraktív elemek helyét, működésétKapcsolatokat, arányokat, hangsúlyokat
Pixelpontosság másként
480 px
320 px
Forrás
Felülettervezési alapok
A mobil nem desktop
Fél szemmel, fél kézzel
A mobil nem desktop
FAIL
Fél szemmel
Fél kézzel
Mit hova?
Navigáció
Tartalom
Akciógombok
Legyen....
...kevés (mert az igazából több)
...nagy
...gyors
...szellős
...natív (ami lehet)
Apple’s 27 Guidelines for Mobile User Experience Design
1. Focus on the Primary Task2. Elevate the Content that People Care About3. Think Top Down4. Give People a Logical Path to Follow5. Make Usage Easy and Obvious6. Use User-Centric Terminology7. Minimise the Effort Required for User Input8. Downplay File-Handling Operations9. Enable Collaboration and Connectedness10. De-emphasise Settings11. Brand Appropriately12. Make Search Quick and Rewarding13. Entice and Inform with a Well-Written Description14. Be Succinct15. Use UI Elements Consistently16. Consider Adding Physicality and Realism17. Delight People with Stunning Graphics18. Handle Orientation Changes19. Make Targets Fingertip-Size20. Use Subtle Animation to Communicate21. Support Gestures Appropriately22. Ask People to Save Only When Necessary23. Make Modal Tasks Occasional and Simple24. Start Instantly25. Always Be Prepared to Stop26. Don’t Quit Programmatically27. If Necessary, Display a License Agreement or Disclaimer
Rajzoljunk
Mivel rajzoljunk?
Balsamiq
Mockingbird
HotGloo
MockFlow
Pencil
OmniGraffleMS Visio Axure
Pidoco
iPlotz
ProtoShareGliffy
Adobe Illustrator
Photoshop
Forrás
Képernyőstruktúra
Navigáció koncepció
vs
A navigáció
Nyitóoldal
Nyitóoldal = Fogadások
Tartalom:
Fogadás (a következő meccsre)
Mérkőzéslista
Hány pontom van?
Nyitóoldal = Fogadások
Variációk dátum választóra
Variációk dátum választóra
Variációk dátum választóra
Variációk dátum választóra
Mérkőzés adatok:
Csapatok
Időpont
Csoport
Oddsok
Fogadás
Mérkőzés adatokA B
Mérkőzés adatokA B
NYITÓKÉPERNYŐ?
KÉSZ!
Fogadás rögzítése
Tét megadása
Tét beviteleA B
Tét beviteleA B
Tét bevitele
Fogadás mentése
Mérkőzések listája
Mérkőzés oldala
Fogadás
Toplista Helyszíneklistája Eredményeim
Térkép Település választó
Facebook connect
✓ ✓
✓
Toplista
Toplista
Saját helyezés kiemeléseHelyezés, felhasználó, pontszámKülön barátok és összes játékos
Toplista képernyő
Toplista képernyő
Mérkőzések listája
Mérkőzés oldala
Fogadás
Toplista Helyszíneklistája Eredményeim
Térkép Település választó
Facebook connect
✓ ✓
✓
✓
Helyszínek
Helyszínek
Település választóTérképes és listás megjelenítés
Helyszínek listája
Település választó
Sok település van?
Vissza a listához
Helyszín adatok, pl:
Champs Sport Pub
Bp, VII. Dohány u. 20.
Helyszínek listája
Helyszín adatai
Helyszínek listája
Lista vs térkép
Helyszínek ✓
Helyszínek összefoglalva:
Mérkőzések listája
Mérkőzés oldala
Fogadás
Toplista Helyszíneklistája Eredményeim
Térkép Település választó
Facebook connect
✓ ✓
✓
✓✓
✓✓
Eredményeim(profil oldal)
Eredményeim
Hány pontom van?Hányadik vagyok a toplistákon?Mennyire voltam eredményes?Mikre fogadtam eddig?
+ My Account info
Eredményeim
Eredményeim
Mi maradt ki?
Rengeteg minden.
Mérkőzések listája
Mérkőzés oldala
Fogadás
Toplista Helyszíneklistája Profilom
Térkép Település választó
Facebook connect
✓ ✓
✓
✓✓
✓✓✓
Amivel nem foglalkoztunk
• Facebook belépés• Első indítás• Súgó / segítség• Nyeremények /
játékszabályok bemutatása• Social media megosztás
Az első indítás
LetöltömElindítom HasználomBelépek
FB connect
Facebook connect gombWelcome üzenet:
• mi ez a játék?• mit és hogy lehet nyerni?
Az első indítás
Mi van, ha...?
Fogadás
Mi van, ha nincs már pontom?
Mi van, ha véget ér az
EB?
Hogy látom az eredményt
utólag?Mi van, ha nincsenek
feltöltve az odds-ok?
Toplista képernyő
Mi van, amikor az elején
mindenkinek 1000 pontja
van?
Mi van, ha egy barátom sem játszik?
Mi van, ha első vagyok? Kapok
kiemelést?
Eredményeim oldal
Mi van, ha még nem
fogadtam?
Mi van, ha kilépek?
Mi van, ha első vagyok?
Mi van, ha...
• nincs internet?• nem sikerül a FB connect?• a háttérrendszer nem
működik?
“Details matter, it's worth waiting to get it right.”
Steve Jobs
Ajánlott irodalom
