Вайрфреймы – третий лишний в UX-дизайне. Как обойтись без них?

Бело-серые квадраты со стрелками и плейсхолдерами обычно являются символами UX-дизайна. Они считаются неотъемлемой частью процесса создания программного обеспечения. Но так ли это на самом деле?

А теперь налейте себе чашечку любимого кофе, и давайте вместе подумаем, почему нам больше не нужны цифровые вайрфреймы для создания приложений.

Что такое вайрфреймы?

Если создание вайрфреймов для вас — привычное дело, можете пропустить этот раздел и перейти к «Недостаткам вайрфеймов».

Вайрфреймы — это схематичные разметки экрана. Их цель — показать, что из себя будет представлять проект.

Классические вайрфреймы строятся из серых и белых блоков. Допускается использование символов. Но никаких изображений в вайрфрейме быть не должно. Если все-таки без них не обойтись, рекомендуется использовать плейсхолдеры.

Вайрфреймы предназначены для отображения замысла проекта в простой и понятной форме. Они просматриваются и одобряются стейкхолдерами и разработчиками. Над ними работают до того, как дизайнер начинает создавать высококачественные мокапы, на которые требуется гораздо больше времени.

Кроме того, эти наброски помогают убедиться, что архитектура контента спланирована корректно. Очень важно следить за тем, чтобы в вайрфрейме были указаны уместные текстовые ресурсы, а не какие-то пустые плейсхолдеры.

Наконец, вайрфреймы позволяют легко визуализировать навигационные схемы и процессы. Зачастую наброски прототипов строятся именно благодаря им. Таким образом, дизайнеры без проблем могут проверить и утвердить какие-то аспекты плана проекта.

Достоинства вайрфреймов

Прежде чем пускаться в критику, давайте сначала поговорим о положительных сторонах. Есть ряд причин, по которым их использование может быть полезно.

Они быстрые

Они немного медленнее скетчей, но все же, вайрфреймы создаются гораздо быстрее мокапов (особенно тех, которые создаются в Photoshop). В этом помогут такие приложения, как Axure, Justinmind Prototyper или Balsamic.

Однако совсем недавно появились UI скетч-приложения, которые работают в несколько раз быстрее (например, Sketch — очень мощное и шустрое приложение).

Они позволяют корректировать направление дизайна

Наброски, совершаемые в процессе мозгового штурма, позволяют нам просмотреть все идеи в цифровом формате, который имитирует «живые» проекты. Позже их можно использовать при создании быстрых прототипов для тестирования удобства использования.

Любой человек из проектной группы может посмотреть, как смотрится контент. Благодаря этому есть возможность что-то подправить или скорректировать прежде, чем начнется работа над более сложными заданиями.

Они могут определять документацию и требования

Сегодня многие работают по гибкой методологии разработки. Если вы не работаете по каскадной модели, то, скорее всего, знаете, что иногда необходимо одновременно работать с разными типами заданий на разных уровнях.

Аналитикам нет нужды ждать мокапов — они могут начать подготовку функциональных спецификаций на основе вайрфреймов. Команда разработчиков, в свою очередь, может начать работать над макетами.

Недостатки вайрфреймов

После прочтения предыдущего раздела вы, наверно, думаете, что вайрфреймы — это идеальное решение для небольших и быстрых стартапов. Лично мне кажется, что вайрфреймы — это своеобразная фикция корпоративного мира. Почему? Для ответа на этот вопрос давайте посмотрим, за что критикуют вайрфреймы.

Люди не понимают, как с ними работать

Вайрфреймы создаются в цифровом формате, и люди обычно просматривают их на экране. Стейкхолдеры воспринимают вайрфреймы как недоработанную версию конечного продукта, и в итоге могут отклонить какие-то интересные идеи и задумки, так как считают, что это плохо смотрится на экране.

Вообще, стейкхолдеры не должны сами додумывать на основе вайрфреймов, как будет выглядеть конечный продукт. Однако им нужно проверять ход работы. Неправильное толкование изображаемого может повлечь за собой негативные отзывы. Я не раз сталкивался с подобными ситуациями. Конечно, стейкхолдеры не виноваты, что не видят желаемой картинки. Наша задача как дизайнеров — взять на себя ответственность за то, что они видят, и делиться нашими идеями в понятной и доступной форме.

«Стейкхолдеры не должны сами додумывать на основе вайрфреймов, как будет выглядеть конечный продукт».

Они уже не такие быстрые

В те времена, когда Photoshop был основой основ в мире UI-дизайна, вайрфреймы, конечно, действительно экономили наше время. Но сейчас появляется все больше и больше инструментов для дизайнеров, и индустрия процветает. Для Adobe Software появилось множество альтернатив, среди которых Sketch, Figma или даже UXPin. Создатели Photoshop увидели это и начали работу над приложением Adobe XD.

На самом деле, лично мне не приходится тратить больше времени на создание качественного мокапа в Sketch, чем на разработку вайрфрейма. Если вы пользуетесь подобными инструментами, нет смысла тратить время на серые квадратики.

Они могут препятствовать креативности

Многие дизайнеры воспринимают эти схематичные наброски слишком серьезно, и после создания вайрфреймов не могут заставить себя спроектировать интересный и привлекательный UI. Конечный дизайн в итоге выглядит как разрисованный вайрфрейм.

Более того, если вайрфрейм был одобрен стейкхолдером, а документация уже почти готова, дизайнеру, которому вдруг во время создания мокапа пришла в голову гениальная идея, для осуществления своего замысла придется столкнуться с рядом формальных трудностей.

Что использовать вместо вайрфреймов

При работе над дизайном в первую очередь вы должны визуализировать свой продукт, так как необходимо увидеть собственными глазами, как это будет выглядеть в целом. Затем необходимо добавить больше деталей и конкретики, утвердить разработанную схему и наметить направление, по которому будет следовать работа.

Вайрфреймы — это средняя ступень процесса дизайна. Они не дадут вам понять, какое влияние окажет конечный продукт на пользователей. Поэтому они не представляют собой особой ценности. Если же вы внимательнее сфокусируетесь на предыдущих стадиях — мозговом штурме, пути клиента и UI-скетчинге — вы легко сможете перепрыгнуть на стадию разработки качественного дизайна.

В первую очередь, сфокусируйтесь на общей картине вашего проекта. Лучший способ — это делать наброски на бумаге и маркерных досках во время стадии мозгового штурма. Намеченные диаграммы и схемы дадут вам понять, куда вам нужно двигаться дальше, и это могут подтвердить некоторые эвристические данные.

Многие дизайнеры считают, что скетчи — это вайрфреймы на бумаге, но это два совсем разных понятия. При создании скетчей вы представляете общую концепцию UI-дизайна. При создании же вайрфреймов вам необходимо продумывать какие-то детали и схемы, что может отключить на время вашу креативность. Если вы планируете создавать вайрфреймы, им всегда должны предшествовать скетчи.

И вроде вы уже начали привыкать, что нужно все время делать эти дурацкие бело-серые схемы. Но теперь пора начать о них забывать.

Лучше всего сразу переходить к созданию высококачественных мокапов, которые будут с максимальной точностью отражать все ваши идеи. А такие быстрые и мощные приложения как Sketch или Adobe XD помогут вам в этом.

Для наилучшего эффекта, прежде чем перейти к работе над тем или иным проектом, вы можете подготовить сет из стандартных UI-элементов. Соберите их в гид по стилю и используйте в качестве символов (в программе Sketch или XD). Разработка системы дизайна — это отличная способность, которая усовершенствует процесс работы над материалами и поможет вам поддерживать согласованность между всеми элементами проекта.

А как насчет прототипов?

Вайрфреймы были идеальны для создания некачественных прототипов. Но теперь, благодаря появлению таких инструментов как Invision, UXPin, Principle, Flinto Origami или XD, создание высококачественных прототипов стало гораздо проще. Упомянутые приложения очень быстрые и удобные в использовании, а у некоторых из них даже есть возможность для создания моушн-дизайна и анимации на продвинутом уровне.

Поэтому нет никакого смысла пользоваться вайрфреймами для создания прототипов с целью тестирования удобства использования. Если вам срочно потребуется испробовать какие-то идеи, лучше используйте скетчи.

Плюсы дизайна без использования вайрфреймов

Если вы последуете приведенным выше советам, вы определенно заметите некоторые улучшения.

Показав мокапы стейкхолдерам и другим разработчикам из команды, вы получите гораздо больше положительных отзывов. Людям не придется уточнять, как страница будет выглядеть в конечном итоге, так как они уже будут видеть некое подобие скриншота.

К тому же, пока вы будете работать над созданием страниц, вы быстрее сможете проверять в деле какие-то идеи и задумки. А средняя стадия — вайрфреймы — исчезнет, так что цифровая схема продукта будет выглядеть в формате страниц и скриншотов.

Заключение

Вайрфреймы воспринимаются как фундаментальная часть процесса дизайна. Однако, в настоящее время существует множество рациональных доводов против их использования. Если вы не хотите постоянно работать с вайрфреймами, старайтесь чаще делать скетчи во время мозгового штурма, а затем открывайте все необходимые приложения и работайте над созданием уже высококачественных материалов.

 
import UIKit
class ViewController: UIViewController {
  \s override func viewDidLoad() {
  super.viewDidLoad()
  // Do any additional setup after loading the view, typically from a nib.
  \s let switchDemo=UISwitch(frame:CGRect(x: 150, y: 150, width: 0, height: 0))
  switchDemo.addTarget(self, action: #selector(ViewController.switchStateDidChange(_:)), for: .valueChanged)
  switchDemo.setOn(true, animated: false)
  self.view.addSubview(switchDemo)
  \s }
  \s func switchStateDidChange(_ sender:UISwitch!)
  {
  if (sender.isOn == true){
  print("UISwitch state is now ON")
  }
  else{
  print("UISwitch state is now Off")
  }
  }
  \s override func didReceiveMemoryWarning() {
  super.didReceiveMemoryWarning()
  // Dispose of any resources that can be recreated.
  }
  }