User Experience Russia 2013

1. 8⅒
современных вызовов
в дизайне приложений
Константин Кичинский, Microsoft

2. 1.
Масштабирование
по экранам
// Scaling across screens

6. CONTINUUM
OF SCREEN SIZES

7. DESKTOPs
MOBILEs
CONTINUUM
OF SCREEN SIZES

8. U(x) =
{
D(x), if type=desktop
M(x), if type=mobile

9. DESKTOPs
MOBILEs
TABLETs
CONTINUUM
OF SCREEN SIZES

10. * Bright idea *
U(x) =
{
UD(x), if size> D
UT(x), if size> T
UM(x), if size> M

11. TVs
DESKTOPs
MOBILEs
TABLETs
CONTINUUM
OF SCREEN SIZES

12. * Bright idea *
U(x) =
UTV(x), if size> Tv
UD(x), if size> D
UT(x), if size> T
UM(x), if size> M

13. TVs
DESKTOPs
MOBILEs
TABLETs
WATCHes
GLASSes
CONTINUUM
OF SCREEN SIZES

14. КАК НА СЧЕТ БОЛЬШОГО ЭКРАНА?

15. * Brightest!! idea *
U(x) =
UTV(x), if size> Tv
UD(x), if size> D
UT(x), if size> T
UM(x), if size> M
UW(x), if size> W
UG(x), if size> G

16. REMOTE CONTROL
TVs
GESTURES, VOICE
MOUSE, KEYBOARD
TOUCH
VOICE
???
MOBILEs
DESKTOPs
TABLETs
WATCHes
GLASSes
CONTINUUM
OF SCREEN SIZES

17. * Even more bright idea *
U(x, i) =
UTV(x, i), if size> Tv
UD(x, i), if size> D
UT(x, i), if size> T
UM(x, i), if size> M
UW(x, i), if size> W
UG(x, i), if size> G

18. ВРЕМЯ УЧИТЬ МАТАН!
U = U(x, i, d, t, …)

19. REMOTE CONTROL
TVs
GESTURES, VOICE
MOUSE, KEYBOARD
TOUCH
VOICE
???
MOBILEs
DESKTOPs
TABLETs
WATCHes
GLASSes
CONTINUUM
OF SCREEN SIZES
DPI

20. One more thing…
А если размер приложения меняется
динамически в одном устройстве?

21. 2.
Смена контекстов
// Switching contexts

22. TABLET
HOME
WORK
CONTEXTS

23. TABLET
GAME APP
HOME
WORK
APP
WORK
CONTEXTS

24. TABLET
SOCIAL
APP
HOME
SOCIAL
APP
WORK
CONTEXTS

25. TABLET
WORK
APP
HOME
WORK
APP
WORK
CONTEXTS

26. TABLET
WORK
APP
HOLIDAYS
WORK
APP
WORKDAYS
CONTEXTS

27. TABLET
WORK
APP
SLEEPHOURS
WORK
APP
WORKHOURS
CONTEXTS

28. TABLET
WORK
APP
WORK
APP
GEOFENCING
CAR
OFFICE
CONTEXTS

29. U = U(x, c)
1. c = constant
2. c = context

30. U = U(x) + v(x, c)
1. c = constant
2. c = context

31. 3.
Переходы
между устройствами
// Jumping thru devices

32. TABLET
WORK
APP
COFFEE
HOUSE
LAPTOP
WORK
APP
OFFICE
CONTEXTS

33. MOBILE
WORK
APP
ON THE
GO
TABLET
WORK
APP
COFFEE
HOUSE
LAPTOP
WORK
APP
OFFICE
CONTEXTS

34. F(UM) = F(UT) = F(UD)

35. F(UM) != F(UT) != F(UD)

36. F(UM) ≤ F(UT) ≤ F(UD)

37. F(UM) ≥ F(UT) ≥ F(UD)

38. ОБЩИЙ ОПЫТ
ЕДИНЫЙ СЕРВИС

39. HALO SPARTAN ASSAULT
Via Technobuffalo.com

40. G(UM, S) = true
G(UT, S) = true
G(UD, S) = true

41. 4.
Расширение за счет
дополнительных экранов
// Enriching with secondary screens

42. 2nd SCREEN
EXTENSION
MAIN
DEKTOP
MONITOR
DEVICES

43. 2nd SCREEN
EXTENSION
MAIN
LAPTOP
PROJECTOR
DEVICES

44. 2nd SCREEN
EXTENSION
MAIN
TABLET
TV
DEVICES

45. U(x) =
{
U1(x), if #screens=1
U2M(x)+ u2S(x), if #screens=2

46. 2nd SCREEN
MAIN
COMPANION
TABLET
XBOX
DEVICES

47. XBOX SMARTGLASS

48. 2nd SCREEN
MAIN
COMPANION
MOBILE
DESKTOP
DEVICES

49. 2nd SCREEN
MAIN
COMPANION
WATCH
MOBILE
DEVICES

50. U(x) =
{
U1(x), if !companion
U1’(x)+ Uc(x), if #companion

51. ДОПОЛНИТЕЛЬНЫЕ
УСТРОЙСТВА МОГУТ
*ВНЕЗАПНО* СТАТЬ
ОСНОВНЫМИ…

52. 5.
Дизайн для разных
платформ и экосистем
// Designing for multiple platforms and ecosystems

53. PLATFORMS & ECOSYSTEMS
MACOS X
WINDOWS
PHONE
IOS
WINDOWS
ANDROID
XBOX
APPLE GOOGLE MICROSOFT
ECOSYSTEMS

54. W = UA(x) + UG(x) + UM(x) +…

55. FLAT DESIGN?
MACOS X
WINDOWS
PHONE
IOS
WINDOWS
ANDROID
XBOX
APPLE GOOGLE MICROSOFT
ECOSYSTEMS

56. W = UF(x) + A(UA) + A(UG) + A(UM) +…

57. ПРОБЛЕМА: ЭТО НЕ
СОВСЕМ РАБОТАЕТ

58. A = Navigation +
Command Interface +
Style + Gestures +
Animations + Tests +…

59. 6.
Реагирование
на голос и жесты
// Reacting on voice and gestures

60. GAMEPAD
MOUSE
KEYBOARD
BROKER
TOUCH
DIRECT
INPUT

61. UM(x) = UM(x, i = touch)
UM(x) = UM(x, i = touch)
UD(x) = UD(x, i = mouse, keyboard)

62. И ТУТ ПРИХОДЯТ ОНИ…
TOUCH-CAPABLE LAPTOPS
CONVERTIBLE DEVICES, TRANSFORMERS

63. UM(x) = UM(x, i = touch)
UM(x) = UM(x, i = touch)
UD(x) = UD(x, i = mouse, keyboard,
touch)

64. И ЕЩЕ…
А ЧТО-ТО ПОЛЕЗНОЕ НА ПЛАНШЕТЕ
МОЖНО ДЕЛАТЬ?

65. UM(x) = UM(x, i = touch)
UM(x) = UM(x, i = touch, keyboard,
mouse)
UD(x) = UD(x, i = mouse, keyboard,
touch)

66. А ЕСЛИ…
К ТЕЛЕФОНУ ПОДКЛЮЧИТЬ ЭКРАН?
ТАМ ЖЕ ТОЖЕ МНОГО ЯДЕР…

67. UM(x) = UM(x, i = touch, keyboard,
mouse)
UM(x) = UM(x, i = touch, keyboard,
mouse)
UD(x) = UD(x, i = mouse, keyboard,
touch)

68. МЫ ЗАБЫЛИ
ПРО СТИЛУС!

69. GAMEPAD
MOUSE
GESTURE
S
KEYBOARD
TOUCH
VOICE
BROKER
DIRECT
REMOTE
INPUT

71. UM(x) = UM(x, i)
UM(x) = UM(x, i)
UD(x) = UD(x, i)
UС(x) = UС(x, i = gamepad, voice,
gestures, devices)

72. ЦЕЛЬ:
Эффективность, естественность,
прозрачность/невидимость

73. U(x) = K+L+M+N… + Actions(C(i))
C = controls (visible or invisible)
C(mouse) < C(touch)

74. U(x) = K+L+M+N… + Actions(C(i))
C = controls (visible or invisible)
Speed(mouse + keyboard) vs. Speed(touch)
Naturalness(touch) vs. Naturalness(voice)
Immersion(gamepad) vs. Immersion(touch)
Privacy(voice) vs. Privacy(keyboard)
…

75. U(x) = K+L+M+N… + Actions(C(i))
C = controls (visible or invisible)
Speed(mouse + keyboard) vs. Speed(touch)
Naturalness(touch) vs. Naturalness(voice)
Immersion(gamepad) vs. Immersion(touch)
Privacy(voice) vs. Privacy(keyboard)
…

76. Actions = α1i+ α2i +…
α = α(convenience(i, context) * i)
Часто convenience > 0 и зависит от конечных целей

77. СЕГОДНЯ:
TOUCH-FIRST

78. ЗАВТРА:
TOUCH-FIRST

79. 7.
Социализация и
персонализация
// Going social and personal

80. TABLET
WORK
APP
HOME
WORK
APP
WORK
CONTEXTS

81. U(x) = U(x, a, b, c, d, …)

82. TABLET
SOCIAL
APP
SOCIAL
APP
WORK
APP
HOME
WORK
APP
WORK
CONTEXTS

84. U(x) = U(x, y, z,…, a, b, c, d, …)

85. ЕЩЕ БОЛЬШЕ
СОЦИОЛОГИИ, ПСИХОЛОГИИ…

86. U(x) = U(x, y, z,…, a, b, c, d, …)
y = R(y, x)
z = R(z, x)
…

87. ЧЕМ БОЛЬШЕ ПРИЛОЖЕНИЕ
АДАПТИРУЕТСЯ ПОД
ЧЕЛОВЕКА, ТЕМ БОЛЕЕ
ПЕРСОНАЛЬНЫМ ОНО
СТАНОВИТСЯ

88. 8.
Пересмотр старых
интерфейсов
// Challenging outdated interfaces

89. Image by aussiegall
Многие дети не
знают, как этим
пользоваться

90. Почему, чтобы
позвонить,
нужен номер?

91. Нужен ли номер?

92. U(x) = U(x, t)
x = X(P, t)

93. У НАС ЕЩЕ ОЧЕНЬ
МНОГО НАСЛЕДИЯ
Сохранение, файлы, скеуморфненькие
интерфейсы…

94. ⅒
Истина где-то там
// Moving beyond tiles, flat, guidelines…

95. Open Video

96. Константин Кичинский
Microsoft
konkich@microsoft.com & @kichinsky

97. © 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of
Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.