Your SlideShare is downloading. ×
0
8⅒

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

Масштабирование
по экранам
// Scaling across screens
CONTINUUM
OF SCREEN SIZES
DESKTOPs
MOBILEs
CONTINUUM
OF SCREEN SIZES
U(x) =

{

D(x), if type=desktop
M(x), if type=mobile
DESKTOPs
MOBILEs

TABLETs
CONTINUUM
OF SCREEN SIZES
* Bright idea *

U(x) =

{

UD(x), if size> D
UT(x), if size> T
UM(x), if size> M
TVs

DESKTOPs
MOBILEs

TABLETs
CONTINUUM
OF SCREEN SIZES
* Bright idea *

U(x) =

UTV(x), if size> Tv
UD(x), if size> D
UT(x), if size> T
UM(x), if size> M
TVs

DESKTOPs
MOBILEs

TABLETs

WATCHes
GLASSes

CONTINUUM
OF SCREEN SIZES
КАК НА СЧЕТ БОЛЬШОГО ЭКРАНА?
* 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
...
REMOTE CONTROL

TVs

GESTURES, VOICE
MOUSE, KEYBOARD
TOUCH
VOICE
???

MOBILEs

DESKTOPs
TABLETs

WATCHes
GLASSes
CONTINUUM...
* 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> ...
ВРЕМЯ УЧИТЬ МАТАН!
U = U(x, i, d, t, …)
REMOTE CONTROL

TVs

GESTURES, VOICE
MOUSE, KEYBOARD
TOUCH
VOICE
???

MOBILEs

DESKTOPs
TABLETs

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

Смена контекстов
// Switching contexts
TABLET

HOME

WORK

CONTEXTS
TABLET

GAME APP

HOME

WORK
APP

WORK

CONTEXTS
TABLET

SOCIAL
APP

HOME

SOCIAL
APP

WORK

CONTEXTS
TABLET

WORK
APP

HOME

WORK
APP

WORK

CONTEXTS
TABLET

WORK
APP

HOLIDAYS

WORK
APP

WORKDAYS

CONTEXTS
TABLET

WORK
APP

SLEEPHOURS

WORK
APP

WORKHOURS

CONTEXTS
TABLET

WORK
APP

WORK
APP

GEOFENCING

CAR

OFFICE

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

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

WORK
APP

COFFEE
HOUSE

LAPTOP

WORK
APP

OFFICE

CONTEXTS
MOBILE

WORK
APP

ON THE
GO

TABLET

WORK
APP

COFFEE
HOUSE

LAPTOP

WORK
APP

OFFICE

CONTEXTS
F(UM) = F(UT) = F(UD)
F(UM) != F(UT) != F(UD)
F(UM) ≤ F(UT) ≤ F(UD)
F(UM) ≥ F(UT) ≥ F(UD)
ОБЩИЙ ОПЫТ
ЕДИНЫЙ СЕРВИС
HALO SPARTAN ASSAULT

Via Technobuffalo.com
G(UM, S) = true
G(UT, S) = true
G(UD, S) = true
4.

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

EXTENSION
MAIN

DEKTOP

MONITOR

DEVICES
2nd SCREEN

EXTENSION
MAIN

LAPTOP

PROJECTOR

DEVICES
2nd SCREEN

EXTENSION
MAIN

TABLET

TV

DEVICES
U(x) =

{

U1(x), if #screens=1
U2M(x)+ u2S(x), if #screens=2
2nd SCREEN

MAIN
COMPANION

TABLET

XBOX

DEVICES
XBOX SMARTGLASS
2nd SCREEN

MAIN
COMPANION

MOBILE

DESKTOP

DEVICES
2nd SCREEN

MAIN
COMPANION

WATCH

MOBILE

DEVICES
U(x) =

{

U1(x), if !companion
U1’(x)+ Uc(x), if #companion
ДОПОЛНИТЕЛЬНЫЕ
УСТРОЙСТВА МОГУТ
*ВНЕЗАПНО* СТАТЬ
ОСНОВНЫМИ…
5.

Дизайн для разных
платформ и экосистем
// Designing for multiple platforms and ecosystems
PLATFORMS & ECOSYSTEMS
MACOS X

WINDOWS
PHONE
IOS

WINDOWS

ANDROID
XBOX

APPLE GOOGLE MICROSOFT

ECOSYSTEMS
W = UA(x) + UG(x) + UM(x) +…
FLAT DESIGN?
MACOS X

WINDOWS
PHONE
IOS

WINDOWS

ANDROID
XBOX

APPLE GOOGLE MICROSOFT

ECOSYSTEMS
W = UF(x) + A(UA) + A(UG) + A(UM) +…
ПРОБЛЕМА: ЭТО НЕ
СОВСЕМ РАБОТАЕТ
A = Navigation +
Command Interface +
Style + Gestures +
Animations + Tests +…
6.

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

MOUSE

KEYBOARD

BROKER

TOUCH

DIRECT

INPUT
UM(x) = UM(x, i = touch)
UM(x) = UM(x, i = touch)
UD(x) = UD(x, i = mouse, keyboard)
И ТУТ ПРИХОДЯТ ОНИ…
TOUCH-CAPABLE LAPTOPS
CONVERTIBLE DEVICES, TRANSFORMERS
UM(x) = UM(x, i = touch)
UM(x) = UM(x, i = touch)
UD(x) = UD(x, i = mouse, keyboard,
touch)
И ЕЩЕ…
А ЧТО-ТО ПОЛЕЗНОЕ НА ПЛАНШЕТЕ
МОЖНО ДЕЛАТЬ?
UM(x) = UM(x, i = touch)
UM(x) = UM(x, i = touch, keyboard,
mouse)
UD(x) = UD(x, i = mouse, keyboard,
touch)
А ЕСЛИ…
К ТЕЛЕФОНУ ПОДКЛЮЧИТЬ ЭКРАН?
ТАМ ЖЕ ТОЖЕ МНОГО ЯДЕР…
UM(x) = UM(x, i = touch, keyboard,
mouse)
UM(x) = UM(x, i = touch, keyboard,
mouse)
UD(x) = UD(x, i = mouse, keyboard,
tou...
МЫ ЗАБЫЛИ
ПРО СТИЛУС!
GAMEPAD

MOUSE

GESTURE
S
KEYBOARD

TOUCH
VOICE

BROKER

DIRECT

REMOTE

INPUT
UM(x) = UM(x, i)
UM(x) = UM(x, i)
UD(x) = UD(x, i)
UС(x) = UС(x, i = gamepad, voice,
gestures, devices)
ЦЕЛЬ:
Эффективность, естественность,
прозрачность/невидимость
U(x) = K+L+M+N… + Actions(C(i))
C = controls (visible or invisible)
C(mouse) < C(touch)
U(x) = K+L+M+N… + Actions(C(i))
C = controls (visible or invisible)
Speed(mouse + keyboard) vs. Speed(touch)
Naturalness(t...
U(x) = K+L+M+N… + Actions(C(i))
C = controls (visible or invisible)
Speed(mouse + keyboard) vs. Speed(touch)
Naturalness(t...
Actions = α1i+ α2i +…
α = α(convenience(i, context) * i)
Часто convenience > 0 и зависит от конечных целей
СЕГОДНЯ:
TOUCH-FIRST
ЗАВТРА:
TOUCH-FIRST
7.

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

WORK
APP

HOME

WORK
APP

WORK

CONTEXTS
U(x) = U(x, a, b, c, d, …)
TABLET
SOCIAL
APP

SOCIAL
APP

WORK
APP

HOME

WORK
APP

WORK

CONTEXTS
U(x) = U(x, y, z,…, a, b, c, d, …)
ЕЩЕ БОЛЬШЕ
СОЦИОЛОГИИ, ПСИХОЛОГИИ…
U(x) = U(x, y, z,…, a, b, c, d, …)
y = R(y, x)
z = R(z, x)
…
ЧЕМ БОЛЬШЕ ПРИЛОЖЕНИЕ
АДАПТИРУЕТСЯ ПОД
ЧЕЛОВЕКА, ТЕМ БОЛЕЕ
ПЕРСОНАЛЬНЫМ ОНО
СТАНОВИТСЯ
8.

Пересмотр старых
интерфейсов
// Challenging outdated interfaces
Image by aussiegall

Многие дети не
знают, как этим
пользоваться
Почему, чтобы
позвонить,
нужен номер?
Нужен ли номер?
U(x) = U(x, t)
x = X(P, t)
У НАС ЕЩЕ ОЧЕНЬ
МНОГО НАСЛЕДИЯ
Сохранение, файлы, скеуморфненькие
интерфейсы…
⅒

Истина где-то там
// Moving beyond tiles, flat, guidelines…
Open Video
Константин Кичинский
Microsoft
konkich@microsoft.com & @kichinsky
© 2013 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be...
8.1 modern challenges for designers
8.1 modern challenges for designers
8.1 modern challenges for designers
8.1 modern challenges for designers
8.1 modern challenges for designers
Upcoming SlideShare
Loading in...5
×

8.1 modern challenges for designers

1,131

Published on

User Experience Russia 2013

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,131
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

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 of "8.1 modern challenges for designers"

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

      Clipping is a handy way to collect important slides you want to go back to later.

    ×