Стив Джобс представил iPad 27 января 2010 года. Отзывы были смешанными: «Просто большой iPhone». «Ноутбук для тех, кому не нужен ноутбук». Мы купили один в день выхода, передавали по кругу в офисе и весь вечер спорили, для чего он нужен.
К ноябрю у нас уже было первое корпоративное приложение, выходящее на нём. К 2012 году мы поняли, что iPad определил новый класс пользовательского интерфейса, который не происходил ни от телефонов, ни от десктопов - он происходил от бумаги.
Первый клиент: полевые инспекторы
Строительная компания обратилась к нам в июле 2010. Их полевые инспекторы использовали планшеты для записей. Бумажные формы, 47 полей на проверку, рукописные заметки, фотографии на отдельной камере - всё это собиралось в офисе в PDF-отчёт, занимавший 2-3 часа на объект.
Они пробовали Windows Mobile. Пользователям не нравилось. Экран слишком маленький. Ввод стилусом неточный. Отказались.
iPad изменил уравнение. Экран достаточно большой, чтобы показать целый раздел формы без прокрутки. Никакого стилуса - касание в рабочих перчатках работало. Чип A4X справлялся с рендерингом большой формы без лагов.
Первый вопрос дизайна: воспроизвести ли бумажную форму на экране?
Сначала мы так и сделали. Поля с табуляцией, метки слева, данные справа. Цифровая копия бумажного клипборда.
Инспекторам не понравилось. «Выглядит как сайт». Они были правы - мы спроектировали для курсора мыши на мониторе 1280×1024, а не для большого пальца на экране.
Переосмысление областей касания
Руководство по интерфейсу Apple указывало минимальные области касания 44×44 points. Мы перешли к минимуму 60×60. Поля форм стали достаточно высокими для нажатия без зума. Кнопки стали очевидно кнопками:
UIButton *approvalButton = [UIButton buttonWithType:UIButtonTypeCustom];
approvalButton.frame = CGRectMake(0, 0, 200, 60); // 60pt высота минимум
approvalButton.titleLabel.font = [UIFont boldSystemFontOfSize:20];
// Визуальная обратная связь при нажатии - важна для полевых работников
[approvalButton setBackgroundImage:[self imageWithColor:[UIColor greenColor]]
forState:UIControlStateNormal];
[approvalButton setBackgroundImage:[self imageWithColor:[UIColor darkGreenColor]]
forState:UIControlStateHighlighted];
Визуальное состояние при нажатии было важнее на iPad, чем где-либо ещё. Рабочие прикасались кожаными перчатками. Визуальное изменение состояния должно было быть очевидным.
Паттерн Master-Detail
Большой экран iPad ввёл паттерн навигации, которого не было на телефонах: master-detail. Постоянная боковая панель со списком, основная область с деталями. Mail от Apple использовал его. Мы использовали его для форм инспекций:
UISplitViewController *splitVC = [[UISplitViewController alloc] init];
// Слева: список разделов формы (20% ширины)
FormSectionListViewController *masterVC = [[FormSectionListViewController alloc] init];
// Справа: поля текущего раздела (80% ширины)
FormDetailViewController *detailVC = [[FormDetailViewController alloc] init];
splitVC.viewControllers = @[masterVC, detailVC];
Этот единственный UX-паттерн - постоянный список навигации рядом с контентом - делал iPad совершенно другим продуктом по сравнению с iPhone. Не «назад», а «выбрать». Ментальная модель - папка с вкладками, а не линейный стек экранов.
Offline-First до того, как это стало названием
Строительные площадки не имеют надёжного WiFi. Сотовое покрытие в частично построенных зданиях непредсказуемо. Приложение должно работать без сети.
@implementation InspectionStore
- (Inspection *)createInspection {
Inspection *inspection = [NSEntityDescription
insertNewObjectForEntityForName:@"Inspection"
inManagedObjectContext:self.localContext];
inspection.localID = [[NSUUID UUID] UUIDString];
inspection.syncStatus = @"pending"; // Нужна загрузка
[self.localContext save:nil];
return inspection;
}
- (void)syncPendingInspections {
// Вызывается только при наличии сети
NSFetchRequest *request = [NSFetchRequest fetchRequestWithEntityName:@"Inspection"];
request.predicate = [NSPredicate predicateWithFormat:@"syncStatus == 'pending'"];
// ... загружаем на сервер, обновляем статус ...
}
@end
Инспекторы весь день заполняли формы в зонах без сигнала, и данные загружались при возвращении в офисный WiFi. Без потери данных, без блокировки на доступности сети.
Что iPad изменил навсегда
Функция прикрепления фотографий в форму в одиночку сократила время подготовки отчёта с 2-3 часов до 15 минут. Не потому что форму стало быстрее заполнять - полевые инспекторы были одинаково быстры с бумагой. Потому что сборка стала мгновенной: фото уже в форме.
Уроки дизайна стали стандартной практикой:
- Master-detail для контента с навигацией
- Минимум 60px области касания в полевых условиях
- Offline-first с синхронизацией - никогда не предполагать наличие сети
- Прямые манипуляции (drag-drop, pinch-to-zoom) вместо меню
- Фотография как полноправный ввод в форму
iPad не заменил ноутбук. Он не заменил телефон. Он заменил клипборд, бумажную форму, распечатанный мануал. Для полевых работников, держащих его на высоте груди и обходящих строительную площадку, iPad стал именно тем, чем Jobs называл самые интимные отношения с технологиями.