8⅒

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

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

CONTINUUMOF SCREEN SIZES

CONTINUUMOF SCREEN SIZES

DESKTOPs

MOBILEs

U(x) ={D(x), if type=desktopM(x), if type=mobile

CONTINUUMOF SCREEN SIZES

DESKTOPs

MOBILEsTABLETs

U(x) ={UD(x), if size> DUT(x), if size> T

* Bright idea *

UM(x), if size> M

CONTINUUMOF SCREEN SIZES

DESKTOPs

MOBILEsTABLETs

TVs

U(x) ={UD(x), if size> DUT(x), if size> T

* Bright idea *

UM(x), if size> M

UTV(x), if size> Tv

CONTINUUMOF SCREEN SIZES

DESKTOPs

MOBILEsTABLETs

TVs

WATCHesGLASSes

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

U(x) ={UD(x), if size> DUT(x), if size> T

* Brightest!! idea *

UM(x), if size> M

UTV(x), if size> Tv

UW(x), if size> WUG(x), if size> G

CONTINUUMOF SCREEN SIZES

DESKTOPs

MOBILEsTABLETs

TVs

WATCHesGLASSes

GESTURES, VOICE

REMOTE CONTROL

MOUSE, KEYBOARD

TOUCH

VOICE

???

U(x, i) ={UD(x, i), if size> DUT(x, i), if size> T

* Even more bright idea *

UM(x, i), if size> M

UTV(x, i), if size> Tv

UW(x, i), if size> WUG(x, i), if size> G

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

CONTINUUMOF SCREEN SIZES

DESKTOPs

MOBILEsTABLETs

TVs

WATCHesGLASSes

GESTURES, VOICE

REMOTE CONTROL

MOUSE, KEYBOARD

TOUCH

VOICE

???

DPI

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

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

CONTEXTS

TABLET

HOME WORK

CONTEXTS

TABLET

HOME WORK

GAME APP WORK APP

CONTEXTS

TABLET

HOME WORK

SOCIAL APP

SOCIAL APP

CONTEXTS

TABLET

HOME WORK

WORK APPWORK APP

CONTEXTS

TABLET

HOLIDAYS WORKDAYS

WORK APPWORK APP

CONTEXTS

TABLET

SLEEPHOURS WORKHOURS

WORK APPWORK APP

CONTEXTS

TABLET

CAR OFFICE

WORK APPWORK APP

GEOFENCING

U = U(x, c)1. c = constant2. c = context

U = U(x) + v(x, c)1. c = constant2. c = context

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

CONTEXTS

LAPTOP

COFFEEHOUSE

OFFICE

WORK APPWORK APP

TABLET

CONTEXTS

LAPTOP

COFFEEHOUSE

OFFICE

WORK APPWORK APP

TABLETMOBILE

ON THE GO

WORK APP

F(UM) = F(UT) = F(UD)

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

F(UM) ≤ F(UT) ≤ F(UD)

F(UM) ≥ F(UT) ≥ F(UD)

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

Via Technobuffalo.com

HALO SPARTAN ASSAULT

G(UM, S) = trueG(UT, S) = trueG(UD, S) = true

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

DEVICES

2nd SCREEN

DEKTOP MONITOR

MAIN

EXTENSION

DEVICES

2nd SCREEN

LAPTOP PROJECTOR

MAIN

EXTENSION

DEVICES

2nd SCREEN

TABLET TV

MAIN

EXTENSION

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

DEVICES

2nd SCREEN

TABLET XBOX

COMPANION

MAIN

XBOX SMARTGLASS

DEVICES

2nd SCREEN

MOBILE DESKTOP

COMPANION

MAIN

DEVICES

2nd SCREEN

WATCH MOBILE

COMPANION

MAIN

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

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

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

ECOSYSTEMS

PLATFORMS & ECOSYSTEMS

APPLE GOOGLE

IOS ANDROID

MICROSOFT

WINDOWSWINDOWS

PHONE

XBOX

MACOS X

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

ECOSYSTEMS

FLAT DESIGN?

APPLE GOOGLE

IOS ANDROID

MICROSOFT

WINDOWSWINDOWS

PHONE

XBOX

MACOS X

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

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

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

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

INPUTBROKER DIRECT

MOUSE

TOUCHKEYBOARD

GAMEPAD

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,touch)

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

INPUTBROKER DIRECT

MOUSE

TOUCHKEYBOARD

GAMEPAD

REMOTE

VOICE

GESTURES

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(touch) vs. Naturalness(voice)Immersion(gamepad) vs. Immersion(touch)Privacy(voice) vs. Privacy(keyboard)…

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)…

Actions = α1i+ α2

i +…α = α(convenience(i, context) * i)

Часто convenience > 0 и зависит от конечных целей

СЕГОДНЯ:TOUCH-FIRST

ЗАВТРА:TOUCH-FIRST

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

CONTEXTS

TABLET

HOME WORK

WORK APPWORK APP

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

CONTEXTS

TABLET

HOME WORK

WORK APPWORK APP

SOCIAL APPSOCIAL

APP

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

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

© 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.