Роман Чигирёв

Разработка пользовательских интерфейсов, прототипирование интерфейсов — музейные экспонаты руками трогать разрешается

Если честно, мы совсем разлюбили технические задания. Чувства завяли, и  очень давно. Ну кому нравятся скучные, многостраничные, формализованные пачки бумаги, от которых веет канцелярским холодком? Да, это был риторический вопрос.

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

Чем делаем: Axure.

Кто делает: Архитектор интерфейсов.

А теперь — как мы  занимаемся разработкой интерфейса:

  1. Конечно, записывать мысли нужно, особенно это пригождается на начальном этапе работы. Заполненный бриф, ТЗ заказчика, записанный разговор по скайпу — исходники, которые послужат для разработки прототипа.
  2. Требования и пожелания клиента передаются архитектору интерфейсов (UX-специалист, который у нас в студии совмещает в себе навыки юзабили-аналитика и функционального дизайнера). Данные обрабатываются и анализируются, изучаются схожие по функциям ресурсы. С клиентом обсуждаются все спорные моменты и места «свободного творчества» — где общий принцип работы ясен, но как именно оно будет происходить — не очень.

  3. Делаем «логическую карту» будущей модели сайта: в виде блок-схем майндмэппинга. Делается в той же Axure или xMind’е и выглядит примерно так:

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

  5. Когда список требований готов, готовим рабочее пространство для будущего прототипирования интерфейса — определяемся с шириной, строим сетку, набрасываем первые блоки. Всё в очень общем виде, без детализации и какой-либо конкретики. Выглядит реально пугающе :).

  6. Когда тулсет подготовлен и основные элементы лежат на рабочем столе, начинается самое интересное — прототип обретает свои первые формы:

     

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

Собственно, пример детализации (полупрозрачные области — это всплывающие окна):

С помощью инструментария создается интерактив — теперь прототип можно щелкать, трогать и пробовать на юзабельность. Предварительное прототипирование - наиполезнейшая вещь при разработке интерфейса сайта. А именно потому, что:

  • Клиент тратит на изучение прототипа в разы меньше времени, чем на чтение объемистого ТЗ.
  • Клиент видит, как выглядит его задумка в действии — и озвучивает предложения по ее улучшению.
  • Клиент вносит правки уже на этапе, предшествующем разработке — что намного дешевле правок на полуготовом продукте.
  • Клиент застрахован от недопонимания со стороны разработчика — ведь он видит будущий продукт своими глазами и контролирует разработку веб-интерфейса в разы эффективнее.
И мы не согласимся с теми, кто скажет, что прототипирование интерфейсов нужно, в первую очередь, самим разработчикам. Хотя определенные плюсы всё же есть:
  • В процессе прототипирования юзабилити-специалист сталкивается с ранее не замеченными сложностями в навигации — и устраняет их.
  • С каждым новым прототипом кастомный инструментарий расширяется, что облегчает создание последующих прототипов.
  • Разработчик застрахован от недопонимания со стороны клиента — аналогично пункту в предыдущем разделе :).

Всем Axure, посоны!

 

В статье использованы графические материалы с сайта www.4warez.at.ua

Написано специально для интернет-журнала Дигибу.


 

Что еще почитать по этой теме

100 недель «Ланч-таймов»: как найти формат для блога, который сам себя пиарит
Сибирикс
25 Мая 2016
100 недель «Ланч-таймов»:  как найти формат для блога, который сам себя пиарит
Внимательный читатель уже заметил, что каждую пятницу ему предлагают ланч. Не тот, который про котлеты и булки, а про digital.
Нет времени объяснять —
#Иди в зал!
Сибирикс
19 Мая 2016
Нет времени объяснять —<br>#Иди в зал!
«Нет зала рядом» и «Я не знаю, какой фитнес-клуб лучше» — больше не отговорки. Мы сделали сервис, который решает проблему с выбором зала. Осталось победить лень и любовь к пицце.
Не оно, а он — новый сайт «Славкофе»
Сибирикс
10 Мая 2016
Не оно, а он — новый сайт «Славкофе»
Делать сайт для кофейной компании — огромный риск вляпаться в штампы: напихать кофейных зёрен в иконки, а на фон добавить нарочито небрежные капли. Но когда заказчик и студия открыты для экспериментов, вместо шаблонного сайта получается флагманский проект.

У вас есть проект?

Давайте обсудим его. Продумаем. И сделаем!

Заказать клёвый проект
Заявка отправлена
Спасибо, ваша заявка отправлена. Эксперт студии Сибирикс свяжется с вами в ближайшее время для уточнения подробностей.