• Like
8.1 modern challenges for designers
Upcoming SlideShare
Loading in...5
×

8.1 modern challenges for designers

  • 1,024 views
Uploaded on

User Experience Russia 2013

User Experience Russia 2013

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,024
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
2
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • http://www.technobuffalo.com/wp-content/uploads/2013/06/Halo-Spartan-Assault1.jpg
  • Image by aussiegall:http://www.flickr.com/photos/aussiegall/279804967/sizes/z/in/photostream/
  • Full version: http://www.youtube.com/watch?v=a6cNdhOKwi0

Transcript

  • 1. 8⅒ современных вызовов в дизайне приложений Константин Кичинский, Microsoft
  • 2. 1. Масштабирование по экранам // Scaling across screens
  • 3. CONTINUUM OF SCREEN SIZES
  • 4. DESKTOPs MOBILEs CONTINUUM OF SCREEN SIZES
  • 5. U(x) = { D(x), if type=desktop M(x), if type=mobile
  • 6. DESKTOPs MOBILEs TABLETs CONTINUUM OF SCREEN SIZES
  • 7. * Bright idea * U(x) = { UD(x), if size> D UT(x), if size> T UM(x), if size> M
  • 8. TVs DESKTOPs MOBILEs TABLETs CONTINUUM OF SCREEN SIZES
  • 9. * Bright idea * U(x) = UTV(x), if size> Tv UD(x), if size> D UT(x), if size> T UM(x), if size> M
  • 10. TVs DESKTOPs MOBILEs TABLETs WATCHes GLASSes CONTINUUM OF SCREEN SIZES
  • 11. КАК НА СЧЕТ БОЛЬШОГО ЭКРАНА?
  • 12. * 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
  • 13. REMOTE CONTROL TVs GESTURES, VOICE MOUSE, KEYBOARD TOUCH VOICE ??? MOBILEs DESKTOPs TABLETs WATCHes GLASSes CONTINUUM OF SCREEN SIZES
  • 14. * 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
  • 15. ВРЕМЯ УЧИТЬ МАТАН! U = U(x, i, d, t, …)
  • 16. REMOTE CONTROL TVs GESTURES, VOICE MOUSE, KEYBOARD TOUCH VOICE ??? MOBILEs DESKTOPs TABLETs WATCHes GLASSes CONTINUUM OF SCREEN SIZES DPI
  • 17. One more thing… А если размер приложения меняется динамически в одном устройстве?
  • 18. 2. Смена контекстов // Switching contexts
  • 19. TABLET HOME WORK CONTEXTS
  • 20. TABLET GAME APP HOME WORK APP WORK CONTEXTS
  • 21. TABLET SOCIAL APP HOME SOCIAL APP WORK CONTEXTS
  • 22. TABLET WORK APP HOME WORK APP WORK CONTEXTS
  • 23. TABLET WORK APP HOLIDAYS WORK APP WORKDAYS CONTEXTS
  • 24. TABLET WORK APP SLEEPHOURS WORK APP WORKHOURS CONTEXTS
  • 25. TABLET WORK APP WORK APP GEOFENCING CAR OFFICE CONTEXTS
  • 26. U = U(x, c) 1. c = constant 2. c = context
  • 27. U = U(x) + v(x, c) 1. c = constant 2. c = context
  • 28. 3. Переходы между устройствами // Jumping thru devices
  • 29. TABLET WORK APP COFFEE HOUSE LAPTOP WORK APP OFFICE CONTEXTS
  • 30. MOBILE WORK APP ON THE GO TABLET WORK APP COFFEE HOUSE LAPTOP WORK APP OFFICE CONTEXTS
  • 31. F(UM) = F(UT) = F(UD)
  • 32. F(UM) != F(UT) != F(UD)
  • 33. F(UM) ≤ F(UT) ≤ F(UD)
  • 34. F(UM) ≥ F(UT) ≥ F(UD)
  • 35. ОБЩИЙ ОПЫТ ЕДИНЫЙ СЕРВИС
  • 36. HALO SPARTAN ASSAULT Via Technobuffalo.com
  • 37. G(UM, S) = true G(UT, S) = true G(UD, S) = true
  • 38. 4. Расширение за счет дополнительных экранов // Enriching with secondary screens
  • 39. 2nd SCREEN EXTENSION MAIN DEKTOP MONITOR DEVICES
  • 40. 2nd SCREEN EXTENSION MAIN LAPTOP PROJECTOR DEVICES
  • 41. 2nd SCREEN EXTENSION MAIN TABLET TV DEVICES
  • 42. U(x) = { U1(x), if #screens=1 U2M(x)+ u2S(x), if #screens=2
  • 43. 2nd SCREEN MAIN COMPANION TABLET XBOX DEVICES
  • 44. XBOX SMARTGLASS
  • 45. 2nd SCREEN MAIN COMPANION MOBILE DESKTOP DEVICES
  • 46. 2nd SCREEN MAIN COMPANION WATCH MOBILE DEVICES
  • 47. U(x) = { U1(x), if !companion U1’(x)+ Uc(x), if #companion
  • 48. ДОПОЛНИТЕЛЬНЫЕ УСТРОЙСТВА МОГУТ *ВНЕЗАПНО* СТАТЬ ОСНОВНЫМИ…
  • 49. 5. Дизайн для разных платформ и экосистем // Designing for multiple platforms and ecosystems
  • 50. PLATFORMS & ECOSYSTEMS MACOS X WINDOWS PHONE IOS WINDOWS ANDROID XBOX APPLE GOOGLE MICROSOFT ECOSYSTEMS
  • 51. W = UA(x) + UG(x) + UM(x) +…
  • 52. FLAT DESIGN? MACOS X WINDOWS PHONE IOS WINDOWS ANDROID XBOX APPLE GOOGLE MICROSOFT ECOSYSTEMS
  • 53. W = UF(x) + A(UA) + A(UG) + A(UM) +…
  • 54. ПРОБЛЕМА: ЭТО НЕ СОВСЕМ РАБОТАЕТ
  • 55. A = Navigation + Command Interface + Style + Gestures + Animations + Tests +…
  • 56. 6. Реагирование на голос и жесты // Reacting on voice and gestures
  • 57. GAMEPAD MOUSE KEYBOARD BROKER TOUCH DIRECT INPUT
  • 58. UM(x) = UM(x, i = touch) UM(x) = UM(x, i = touch) UD(x) = UD(x, i = mouse, keyboard)
  • 59. И ТУТ ПРИХОДЯТ ОНИ… TOUCH-CAPABLE LAPTOPS CONVERTIBLE DEVICES, TRANSFORMERS
  • 60. UM(x) = UM(x, i = touch) UM(x) = UM(x, i = touch) UD(x) = UD(x, i = mouse, keyboard, touch)
  • 61. И ЕЩЕ… А ЧТО-ТО ПОЛЕЗНОЕ НА ПЛАНШЕТЕ МОЖНО ДЕЛАТЬ?
  • 62. UM(x) = UM(x, i = touch) UM(x) = UM(x, i = touch, keyboard, mouse) UD(x) = UD(x, i = mouse, keyboard, touch)
  • 63. А ЕСЛИ… К ТЕЛЕФОНУ ПОДКЛЮЧИТЬ ЭКРАН? ТАМ ЖЕ ТОЖЕ МНОГО ЯДЕР…
  • 64. UM(x) = UM(x, i = touch, keyboard, mouse) UM(x) = UM(x, i = touch, keyboard, mouse) UD(x) = UD(x, i = mouse, keyboard, touch)
  • 65. МЫ ЗАБЫЛИ ПРО СТИЛУС!
  • 66. GAMEPAD MOUSE GESTURE S KEYBOARD TOUCH VOICE BROKER DIRECT REMOTE INPUT
  • 67. UM(x) = UM(x, i) UM(x) = UM(x, i) UD(x) = UD(x, i) UС(x) = UС(x, i = gamepad, voice, gestures, devices)
  • 68. ЦЕЛЬ: Эффективность, естественность, прозрачность/невидимость
  • 69. U(x) = K+L+M+N… + Actions(C(i)) C = controls (visible or invisible) C(mouse) < C(touch)
  • 70. 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) …
  • 71. 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) …
  • 72. Actions = α1i+ α2i +… α = α(convenience(i, context) * i) Часто convenience > 0 и зависит от конечных целей
  • 73. СЕГОДНЯ: TOUCH-FIRST
  • 74. ЗАВТРА: TOUCH-FIRST
  • 75. 7. Социализация и персонализация // Going social and personal
  • 76. TABLET WORK APP HOME WORK APP WORK CONTEXTS
  • 77. U(x) = U(x, a, b, c, d, …)
  • 78. TABLET SOCIAL APP SOCIAL APP WORK APP HOME WORK APP WORK CONTEXTS
  • 79. U(x) = U(x, y, z,…, a, b, c, d, …)
  • 80. ЕЩЕ БОЛЬШЕ СОЦИОЛОГИИ, ПСИХОЛОГИИ…
  • 81. U(x) = U(x, y, z,…, a, b, c, d, …) y = R(y, x) z = R(z, x) …
  • 82. ЧЕМ БОЛЬШЕ ПРИЛОЖЕНИЕ АДАПТИРУЕТСЯ ПОД ЧЕЛОВЕКА, ТЕМ БОЛЕЕ ПЕРСОНАЛЬНЫМ ОНО СТАНОВИТСЯ
  • 83. 8. Пересмотр старых интерфейсов // Challenging outdated interfaces
  • 84. Image by aussiegall Многие дети не знают, как этим пользоваться
  • 85. Почему, чтобы позвонить, нужен номер?
  • 86. Нужен ли номер?
  • 87. U(x) = U(x, t) x = X(P, t)
  • 88. У НАС ЕЩЕ ОЧЕНЬ МНОГО НАСЛЕДИЯ Сохранение, файлы, скеуморфненькие интерфейсы…
  • 89. ⅒ Истина где-то там // Moving beyond tiles, flat, guidelines…
  • 90. Open Video
  • 91. Константин Кичинский Microsoft konkich@microsoft.com & @kichinsky
  • 92. © 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.