A koncepciótól a drótváz tervig - Kollin Zoltán
Upcoming SlideShare
Loading in...5
×
 

A koncepciótól a drótváz tervig - Kollin Zoltán

on

  • 1,902 views

Egy iPhone alkalmazás képernyőinek megtervezése.

Egy iPhone alkalmazás képernyőinek megtervezése.

Statistics

Views

Total Views
1,902
Slideshare-icon Views on SlideShare
1,884
Embed Views
18

Actions

Likes
3
Downloads
18
Comments
1

3 Embeds 18

http://www.linkedin.com 12
https://www.linkedin.com 5
https://twimg0-a.akamaihd.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    A koncepciótól a drótváz tervig - Kollin Zoltán A koncepciótól a drótváz tervig - Kollin Zoltán Presentation Transcript

    • A koncepciótól adrótváz tervekig Kollin Zoltán App! képzés
    • HELLO my name isKollin Zoltánux designer @ mito
    • UX DESIGN? WTF
    • Mit fogunk ma csinálni?Megtervezzük, hogyanműködjön az appunk
    • Adott egy brief (képzeletbeli, de most pont jó lesz)
    • “Kell egy app az EB-re” Kulcsszavak:játék / nyeremény / közösségi / helyszínek
    • 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 kisinformációgyűjtés
    • Az EB dióhéjbanJúnius 8. - július 1.16 csapat, 4 csoportbanCsoportmérkőzésekNegyeddöntőElődöntőDöntő
    • Sportfogadás 1x01A)Végeredményre tippelek “3-2 lesz az olaszoknak”B)Totózom “az olaszok nyerik a meccset”
    • Helyszínek mobilon
    • Most már kezdhetjüka tervezést
    • bit.ly/drotvazvideo
    • Vissza a funkciókhoz
    • Mit kell tudnia?1. Fogadás az EB mérkőzéseire hazai - vendég - döntetlen + odds + tét (virtuális pénz)2. Verseny / nyereményjáték toplista3. Kocsmakereső térkép / lista
    • A fő funkciók tehát:Fogadás Toplista Helyszínek
    • Mit akar a felhasználó?
    • Fogadás “Este meccs, gyorsan tippelek is rá”Eredmény? “Megnézem, bejött-e a múltkori tippem” Toplista “Megelőztem már a haveromat?”Helyszínek “Valahol meg kéne nézni a meccset”Eredmény? “Eddig hány meccset találtam el?”
    • A fő funkciók tehát: ToplistaFogadás Eredményeim Helyszínek
    • Folyamatok
    • Az első lépésekLetöltöm Belépek HasználomElindítom FB connect
    • “Használom” Várok azTippelek “Eltaláltam?” eredményre Megnézem a meccset
    • Jegyzeteljünk
    • Fogadások - hogy működjön?Mérkőzések listája Új fogadás kötése: 1. kiválasztom a meccset 2. tippelek (pl. döntetlen) Korábbi 3. megadom a tétemetmérkőzésekeredményei Mai mérkőzés kiemelve
    • Toplista - hogy működjön?Külön a barátaimés az összes játékoslistája Helyezés - név - pontszám (Facebook avatar?) Saját helyezésem kiemelve!
    • Helyszínek - hogy működjön?Kell egy településválasztó Hány település lesz? Csak Budapest? Csak nagyvárosok? Listás és térképes megjelenítés a helyszínekről
    • Eredményeim - hogy működjön?Mennyire voltameredményes eddig? Hányadik vagyok a toplistán? Hány pontom van?
    • Az app képernyői (sitemap)
    • FogadásFB belépés Mérkőzések Mérkőzés listája oldala Helyszínek Toplista Eredményeim listája Település Térkép választó
    • 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őszerkezetet Navigációt Tartalmi blokkokat A megjelenítendő információkat Interaktív elemek helyét, működését Kapcsolatokat, arányokat, hangsúlyokat
    • Pixelpontosság másként 320 px 480 px
    • Forrás
    • Felülettervezési alapok
    • A mobil nem desktop Fél szemmel, fél kézzel
    • A mobil nem desktopFAIL
    • Fél szemmel
    • Fél kézzel
    • Mit hova? Akciógombok Tartalom Navigáció
    • Legyen.... ...kevés (mert az igazából több) ...nagy ...gyors ...szellős ...natív (ami lehet)
    • 1. Focus on the Primary Task 2. Elevate the Content that People Care About 3. Think Top Down 4. Give People a Logical Path to Follow 5. Make Usage Easy and Obvious 6. Use User-Centric Terminology 7. Minimise the Effort Required for User InputApple’s 27 8. Downplay File-Handling Operations 9. Enable Collaboration and ConnectednessGuidelines for 10. De-emphasise Settings 11. Brand AppropriatelyMobile User 12. Make Search Quick and Rewarding 13. Entice and Inform with a Well-Written DescriptionExperience 14. Be Succinct 15. Use UI Elements ConsistentlyDesign 16. Consider Adding Physicality and Realism 17. Delight People with Stunning Graphics 18. Handle Orientation Changes 19. Make Targets Fingertip-Size 20. Use Subtle Animation to Communicate 21. Support Gestures Appropriately 22. Ask People to Save Only When Necessary 23. Make Modal Tasks Occasional and Simple 24. Start Instantly 25. Always Be Prepared to Stop 26. Don’t Quit Programmatically 27. If Necessary, Display a License Agreement or Disclaimer
    • Rajzoljunk
    • Mivel rajzoljunk?Balsamiq HotGlooMockingbird iPlotz Pidoco PencilMockFlow OmniGraffle Adobe Illustrator MS Visio Axure Gliffy Photoshop ProtoShare
    • Axure
    • 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 adatok A B
    • Mérkőzés adatok A 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
    • Facebook ✓ Fogadás connect ✓ Mérkőzések listája ✓ Mérkőzés oldala Helyszínek Toplista Eredményeim listája Település Térkép választó
    • Toplista
    • Toplista Saját helyezés kiemelése Helyezés, felhasználó, pontszám Külön barátok és összes játékos
    • Toplista képernyő
    • Toplista képernyő
    • Facebook ✓ Fogadás connect ✓ Mérkőzések listája ✓ Mérkőzés oldala ✓ Toplista Helyszínek listája Eredményeim Település Térkép választó
    • 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:
    • Facebook ✓ Fogadás connect ✓ Mérkőzések listája ✓ Mérkőzés oldala ✓ Toplista ✓ Helyszínek listája Eredményeim ✓ Térkép ✓ Település választó
    • 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.
    • Facebook ✓ Fogadás connect ✓ Mérkőzések listája ✓ Mérkőzés oldala ✓ Toplista ✓ Helyszínek listája ✓ Profilom ✓ Térkép ✓ Település választó
    • 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ásLetöltöm Belépek HasználomElindítom FB connect Facebook connect gomb Welcome ü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 véget ér az EB?Mi van, hanincs márpontom? Hogy látom az eredményt Mi van, ha utólag? nincsenekfeltöltve az odds-ok?
    • Toplista képernyő Mi van, ha egy barátom sem játszik?Mi van, amikor az elejénmindenkinek 1000 pontja van? Mi van, ha első vagyok? Kapok kiemelést?
    • Eredményeim oldal Mi van, ha kilépek? Mi van, ha még nemfogadtam? 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, itsworth waiting to get itright.” Steve Jobs
    • Ajánlott irodalom
    • Köszi a figyelmet! Kollin Zoltán zoltan@kollin.hu | @kollinz