designing for i pad the creation of new interactive language

63
UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www . uidesign . ru Проектирование для iPad: рождение нового языка взаимодействия

Upload: uidesign-group

Post on 27-Jan-2015

111 views

Category:

Technology


0 download

DESCRIPTION

iPad is the first successful and marketable pad computer. It is widely thought to be exactly in the middle between classic PC and mobile phone. However, it is not. iPad is absolutely new class of devices. New expressive means are needed so that users receive unforgettable and quality experience from working with iPad. There is still a scarcity of necessary interaction idioms, that is why designers and developers have a large field for innovations.

TRANSCRIPT

Page 1: Designing for i pad the creation of new interactive language

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru

Проектирование для iPad: рождение нового языка

взаимодействия

Page 2: Designing for i pad the creation of new interactive language

Алексей Копылов

• Около 10 лет опыта проектирует пользовательских интерфейсов

• С 2003 основал компанию «UIDesign Group»

• Редактирует переводные книги (Алан Купер, Гарретт и др.)

• Twitter, Facebook: copyloveБлог: gui.ru/copylove

Page 3: Designing for i pad the creation of new interactive language

I Что же такое iPad?

Page 4: Designing for i pad the creation of new interactive language

Эволюция парадигм взаимодействия

CLI

WIMP

NUI

Page 5: Designing for i pad the creation of new interactive language

NUI = OCGM

Objects

Containers

Gesture

Manipulations

Page 6: Designing for i pad the creation of new interactive language

+ =• Сенсорный экран• Мобильность• Паттерн

использования• Время работы• Стартует мгновенно

• Большой экран• Мощь

Черты наследника

Page 7: Designing for i pad the creation of new interactive language

Данные с RIW 2010

По данным компании Gemius

Распределение мобильных пользователей в России:

• iPad - 8.1%• iPhone - 6.5% • Nokia 6300 - 6.0% • …• Android – 2%

Page 8: Designing for i pad the creation of new interactive language

Особенности использования

http://www.mobiadnews.com/?p=4850

Page 9: Designing for i pad the creation of new interactive language

Особенности использования

http://www.mobiadnews.com/?p=4850

Page 10: Designing for i pad the creation of new interactive language

II Чем iPad отличается от всего остального?

Page 11: Designing for i pad the creation of new interactive language

Отличительные черты

• Расслабленный режим использования

• Отсутствует курсор• Фотореалистичность и

живость взаимодействия• Устройство = контент• Мгновенно стартует• Нет файлов (почти)• Жесты!

Page 12: Designing for i pad the creation of new interactive language

Расслабленный режим использования

http:

//sc

oope

rtino

.com

/bey

ond-

the-

com

fy-c

hair-

stev

e-jo

bs-t

o-de

mo-

next

-ipad

-fro

m-b

ed

Page 13: Designing for i pad the creation of new interactive language

NUI – естественный пользовательский интерфейс

Меньше посредников → больше контроля  Больше контроля → больше удовольствия

Page 14: Designing for i pad the creation of new interactive language

Отсутствует курсор

Page 15: Designing for i pad the creation of new interactive language

Фотореалистичность и живость

Page 16: Designing for i pad the creation of new interactive language

Фотореалистичность и живость

(с) John Blackburn 2010

Page 17: Designing for i pad the creation of new interactive language

Устройство = контент

Page 18: Designing for i pad the creation of new interactive language

Мгновенный старт

Page 19: Designing for i pad the creation of new interactive language

Нет файлов (почти)

Page 20: Designing for i pad the creation of new interactive language

Жесты и манипуляции

Page 21: Designing for i pad the creation of new interactive language

Жест не равен манипуляции

Видео iPhoto

Page 22: Designing for i pad the creation of new interactive language

III Приемы проектирования

Page 23: Designing for i pad the creation of new interactive language

Типичный садистский интерфейс

Twitepadhttp://www.youtube.com/watch?v=a5IcZF-BS9Y

Page 24: Designing for i pad the creation of new interactive language

№1 Проектируйте сначала для iPad

• Изучите «Human Interface Guidelines for the iPad».

• Забудьте о курсоре• Тщательно проектируйте

аффорданс• Забудьте про файлы и сохранение• Пользователь может выйти в

любой момент• Поддерживайте любую

ориентацию• Избегайте иерархи

Page 25: Designing for i pad the creation of new interactive language

Human Interface Guidelines for the iPad

Page 26: Designing for i pad the creation of new interactive language

Забудьте о курсоре

Page 27: Designing for i pad the creation of new interactive language

Забудьте о курсоре

Page 28: Designing for i pad the creation of new interactive language

Тщательно проектируйте аффорданс

Page 29: Designing for i pad the creation of new interactive language

Wired старый (демо)

Page 30: Designing for i pad the creation of new interactive language

Wired старый (демо)

Page 31: Designing for i pad the creation of new interactive language

Wired старый (демо)

Page 32: Designing for i pad the creation of new interactive language

Реклама в Wired

Page 33: Designing for i pad the creation of new interactive language

Wired новый (демо)

Page 34: Designing for i pad the creation of new interactive language

Куда листать?

Page 35: Designing for i pad the creation of new interactive language

Забудьте про файлы

Page 36: Designing for i pad the creation of new interactive language

Выход в любой момент

Page 37: Designing for i pad the creation of new interactive language

Поддерживатйте любую ориентацию

Page 38: Designing for i pad the creation of new interactive language

Избегайте иерархий

Page 39: Designing for i pad the creation of new interactive language

Избегайте иерархий

Page 40: Designing for i pad the creation of new interactive language

№2 Придерживатесь единойметафоры

Page 41: Designing for i pad the creation of new interactive language

+

Что будет если…

Page 42: Designing for i pad the creation of new interactive language

Copyright © Kyle Bean

=

Бесполезность!

Page 43: Designing for i pad the creation of new interactive language

Appigo Todo

Page 44: Designing for i pad the creation of new interactive language

Appigo Todo

Page 45: Designing for i pad the creation of new interactive language

Вставить

Календарь

Page 46: Designing for i pad the creation of new interactive language

№3 Осторожно насыщайте экран

Page 47: Designing for i pad the creation of new interactive language

SoundHound

Page 48: Designing for i pad the creation of new interactive language

№4 Принимайте во внимание закон Фиттса

Page 49: Designing for i pad the creation of new interactive language

Apple Safari

Page 50: Designing for i pad the creation of new interactive language

YouTube

Page 51: Designing for i pad the creation of new interactive language

№5 Максимум взаимодействия внутри одного экрана

Page 52: Designing for i pad the creation of new interactive language

Однако, нельзя злоупотреблять PopOver

Page 53: Designing for i pad the creation of new interactive language

№6 Жесты и манипуляции

Page 54: Designing for i pad the creation of new interactive language

Исследование Dan Mauney 2009 года

Page 55: Designing for i pad the creation of new interactive language

40 людей из 9 стран предложили жесты для 28

операций

Page 56: Designing for i pad the creation of new interactive language

9500 жестов (из 10080 вариантов)!

Page 57: Designing for i pad the creation of new interactive language

Touch Gesture Reference Guide

Авторы:•Craig Villamor•Dan Willis•Luke Wroblewski•Jennifer Rhim

Page 58: Designing for i pad the creation of new interactive language

Apple Safari

Page 59: Designing for i pad the creation of new interactive language

Неконтролируемые действия внутри iPhone

Page 60: Designing for i pad the creation of new interactive language

Неконтролируемые действия внутри iPad

Page 61: Designing for i pad the creation of new interactive language

Тайминги взаимодействия

Page 62: Designing for i pad the creation of new interactive language

№7 Возможности интероперабельности

Page 63: Designing for i pad the creation of new interactive language

Вопросы?

twitter, friendfeed: copyloveemail: [email protected]

UIDesign Group: проектирование интерфейсов, юзабилити-консалтинг | www.uidesign.ru