Download - Designing for i pad the creation of new interactive language

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