A MOME ID User interface design tanfolyamon elhangzott előadás mobil környezetről, felhasználókról és mobil felületek tervezéséről.

1. Mobil UX design
Kollin Zoltán
!
MOME ID 2013

2. USER INTERFACE DESIGNER
TANFOLYAM
http://momeid.mome.hu/
2013. november 5.

3. HELLO
Kollin Zoltán!
ux designer @ mito

4. A mobilról lesz ma szó.
felhasználókról
natív appokról és mobil webről
használhatóságról
felülettervezésről
követendő példákról

5. A mobil
felhasználó

6. Tartalomfogyasztás mobilon

7. Nem csak méretben különbözik

8. Hanem például kontextusában is
Fél szemmel
Fél kézzel
Menet közben
Egy ujjal

9. Ugyanakkor:
“In Google’s annual survey of mobile
users, they found that 60% of
smartphone use takes place in the
home.”
!
http://uxmag.com/articles/six-mobile-myths

10. Mi a felhasználó célja?

11. Ugyanaz, mint amikor a
számítógépe előtt ül.

12. Információkeresés!
pl. Google Maps
Státuszkövetés!
pl. Facebook
Munka / feladat!
pl. E-mail
Unaloműzés!
pl. Angry Birds

13. A lényeg érdekli

14. A kevesebb sokszor több

15. ‣ GPS
‣ Kamera
‣ Giroszkóp
‣ Accelerometer
A mobil nem
korlátoz.
Sőt.
‣ Iránytű
‣ Multi-touch
‣ NFC
‣ Ujjlenyomat-olvasó
‣ Hangvezérlés
‣ Light sensor
‣ Proximity sensor

16. Natív app
vagy
mobil web?

17. Natív app
Használhatod a telefon teljes funkcionalitását!
Push notifikáció, in-app purchase!
Jobb lesz a teljesítmény!
Állandó login!
De!
Tovább tart és drágább a fejlesztés!
Minden platformra külön el kell készíteni!
Bonyolultabb az update

18. Mobil web
Olcsóbb, gyorsabb, rugalmasabb!
Egy helyen történik a fejlesztés!
Keresőoptimalizálhatod!
De
Nem natív :)

19. ján
A
tt
lo
lva
o
ny
má
s
Luke Wroblewski!
Mobile First

20. Mobil
ergonómia

21. Direkt manipuláció és gesztusok

24. Intuitív, de máshogy használjuk

25. Nehezebb “célozni”!
Nagyobb tappintható terület
és white space kell
Nincs !
egérkurzor

26. Látszódjon, hogy “kattintható”!
Button
Button
Nincs !
hover
Tooltipek és kinyíló menük
újragondolása

27. Kerüld a kétirányú scrollt!
Legyen egyértelmű, ha folytatódik
Scroll helyett
swipe

28. Vizuális visszajelzések!
Animációk!
Gombok “pressed” állapota
Nincs fizikai
feedback

29. Arányaiban nagyobb szövegméret!
Könnyen olvasható tipográfia!
Tömör, tagolt szövegek
Kisebb felület,
kisebb pixelek

30. Gépelni is teljesen más rajta

31. Az a bizonyos hüvelykujj

32. Az a bizonyos hüvelykujj
A könnyen elérhető területek

33. Nem csak egyféleképpen tarthatod

34. A használatban is vannak trendek
Az a bizonyos hüvelykujj

35. A használatban is vannak trendek
Az a bizonyos hüvelykujj

36. ló
a
Az a bizonyos hüvelykujj
as
lv
iv
n
ján
A
to
lot
Android
iOS
Windows Phone
Design guideline-ok

37. Mobile UI
tervezés

38. Lineáris, egy oszlopos
képernyőstruktúra

39. Legfontosabb a tartalom

40. A navigáció csak második

41. Információs architektúra tervezés

42. Navigáció típusok
Tabok
Egyértelmű legnépszerűbb tartalom
Fix hierarchia
Több szint mély struktúra

43. Navigáció típusok
Dashboard
Sekély információs architektúra
Egyenlő prioritás a tartalmak között
A nyitóoldal “feláldozása”

44. Navigáció típusok
“Hamburger”
Rejtett menü
Minden felületről elérhető
Rugalmasan bővíthető

45. Tabok
Dashboard
“Hamburger”

46. Popover
Gesztus
???

47. Gesztusok, mint navigáció

48. Mobil form design tippek

49. Dobj ki mindent, ami nem létszükséglet

50. Egyszerűsített regisztráció

51. Mezőcimkék felül vagy a mezőben

52. Használj megfelelő mezőtípusokat

53. Használd ki a mobil adottságait

54. Nem csak checkboxok vannak

55. Default értékek

56. Tippek és segítség

57. iv
n
ján
A
to
lot
as
lv
ló
a
http://pttrns.com/

58. Részletek

59. Animáció

60. Feedback

61. Feedback

62. “Félrekattintottál vagy komoly?”

63. Első használat

64. Tour

65. Edukáció menet közben

66. Amikor nincs még tartalom

67. Splash screen

68. Gesztus, másként

69. Szövegezés

70. Amikor mindenre gondolnak

71. iv
n
ján
A
to
lot
as
lv
ló
a
http://littlebigdetails.com/

72. Drótváz
tervezés

73. Drótváz (wireframe)

74. Grafikai design

75. Wireframe
Grafikai terv
Képernyőszerkezet
A pontos megjelenés:!
Navigáció
Színek
Tartalomstruktúra
Formák
A megjelenített információk
Grafikai elemek
Interaktív funkciók működése
Tipográfia
Az ezek közti arányok,
kapcsolatok, hangsúlyok
Vizuális stílus

76. Wireframe
Grafikai terv

77. Wireframe
Grafikai terv

78. Wireframe
Grafikai terv

79. Low fidelity

80. High fidelity

81. Flow-k és felületek

82. Eszközök

83. Axure

84. Miért készíts először wireframe-et?
Hogy a működésre, ne a megjelenésre
koncentrálj.
Hogy a grafikailag jelentéktelennek tűnő
kérdéseket is alaposan átgondold.
Hogy gyorsabban tudd validálni.
Hogy könnyebben tudj módosítani.

85. Drótvázból prototípus

86. Mielőtt rajzolni kezdesz, !
ismerd meg…
a funkcionalitást
a tartalmakat
a technikai környezetet
a felhasználó igényeit
a struktúrát

87. Köszönöm a figyelmet!