Эпизод 170 подкаста SitePoint теперь доступен! На этой неделе наш постоянный интервьюер Луи Симоне ( @rssaddict ) берет интервью у Вольфа Беквара ( @wdbecvar ), главного операционного директора HotGloo, чтобы поговорить об интерактивных каркасах и о том, как HotGloo разрабатывался для этой работы и как она пойдет дальше.
Скачать этот эпизод
Вы можете скачать этот эпизод в виде отдельного файла MP3. Вот ссылка:
-
Подкаст SitePoint № 170: интерактивное построение каркаса с Вольфом Бекваром из HotGloo(MP3, 24:40, 23,7 МБ)
Резюме Эпизода
Луи и Вольф обсуждают причины и преимущества с точки зрения таких аспектов, как копирование и микро-копирование интерактивного каркасного моделирования, прежде всего переход к дизайну или начало создания прототипов HTML5.
Просмотрите полный список ссылок, указанных в шоу, по адресу http://delicious.com/sitepointpodcast/170 .
Стенограмма интервью
Луи: Здравствуйте, и добро пожаловать в еще один эпизод подкаста SitePoint. Со мной сегодня на шоу у меня Вольф Бечвар. Привет, Волк.
Волк: Привет.
Louis: Wolf — главный операционный директор компании HotGloo, которая является своего рода онлайн-инструментом для интерактивного прототипирования. Для тех, кто создает веб-сайты или программное обеспечение, просто набросайте типы взаимодействий, которые будут присутствовать на каждой странице перед тем, как приступить к полноценному проектированию.
Я подумал, что было бы здорово, если бы вы немного поговорили о роли UX-дизайна, каркасов и прототипов в веб-дизайне, потому что это не то, что мы много обсуждаем в шоу. Я только недавно начал использовать HotGloo, и мне очень нравится этот инструмент, поэтому я решил, кому лучше поговорить об этом?
Вольф: Хорошо, большое спасибо за приглашение. Когда мы начинали, сейчас, три года назад, в 2009 году, мы увидели потребность в инструменте, который мы создали тогда. Ханнес и я, Ханнес — генеральный директор и технический директор, мы работали в интерактивном медиа-агентстве. Он был там разработчиком, а я занимался управлением проектами, занимался концепцией.
Мы понимали, что большая часть нашего рабочего процесса была основана на — мы собирались на встречу с клиентом. Мы записывали спецификации. У нас были наши макеты в основном того, что идея клиента была о его будущем веб-сайте.
То, что происходило тогда, было то, что на самом деле дизайнеры сразу же запустили Photoshop и сразу начали проектировать. В то время возникла идея такого рода, о которой мы тогда говорили: «Ну, это не правильный способ сделать это. На самом деле мы должны думать о всей структуре сайта, в первую очередь об информационной архитектуре. Затем, после того, как все эти процессы были изложены и обсуждены с клиентом, мы должны приступить к проектированию ».
Тогда это была основная идея HotGloo. Когда мы только начинали, для нас было очень важно, чтобы весь этот процесс был действительно совместным. Дело не в том, что в вашей команде из 45 человек все работают независимо, один занимается только дизайном, а другой занимается только разработкой.
Конечно, в команде есть эти специализированные роли, но для нас было действительно важно, чтобы все в команде были на одной странице. Затем, когда мы начинали, у того, кто на самом деле начал заниматься каркасными проектами, дизайнер, разработчик, вы знаете, наверняка, каждый второй день смотрел на проект, вносил свои мысли и делился идеями.
На более ранней стадии проекта все в команде знали, куда направится проект. Вы бы клиент пришел снова. Вы бы показали их, первые наброски, первые каркасы. Он может щелкнуть себя до конца. Он может испытать свой сайт еще до того, как что-либо будет спроектировано или разработано.
Итак, мы поняли, что весь этот процесс для нас, прежде всего, итеративный. Результат становится все лучше и лучше. Для клиента это проще, потому что он был на борту с первого дня, и вы на самом деле можете показать ему, как он продвигается, небольшими укусами и маленькими шагами по пути. Прежде чем он придет, проведет этот брифинг и через две, три недели он вернется, и мы представим ему файлы дизайна. Тогда будут большие споры о цвете и прочем.
Луи: Точно.
Вольф: Во-первых, проекты выполняются быстрее, все на одной странице. Весь этот итеративный процесс действительно помог нам сделать лучшие вещи.
Луи: Да, абсолютно. Мы просто пытались продвинуть наше развитие. Я работаю на flippa.com, и мы немного продвинули нашу разработку в эту модель, где каждый может внести свой вклад. Это одна из причин, почему я начал использовать HotGloo для работы с прототипами, просто потому, что моя роль в команде традиционно, я бэкэнд-разработчик. Я делаю Ruby on Rails.
Но будучи в состоянии начать работать с продуктами и иметь представление о том, как они будут выглядеть, и иметь возможность получать информацию от всех … Вы, очевидно, говорите о клиентах. Мы имеем дело с приложением, в котором мы не имеем дело с нашими клиентами. Но у нас даже есть, например, поддержка людей, которые могут посмотреть на прототипы, и они знают наших клиентов лучше, чем кто-либо другой, и могут дать отзыв на ранней стадии.
Итак, интересная вещь об этих инструментах, я полагаю, состоит в том, что между людьми, которые склонны ценить действительно полноценных дизайнерских композиций, происходит постоянное обсуждение, которое дает вам очень хорошее представление о том, каким будет визуальный дизайн веб-сайта. Некоторые люди предпочитают делать вид каркасов или эскизов, которые дают представление о макете и содержании каждой страницы.
Кроме того, есть такие инструменты, которые действительно, если я правильно понимаю, более нацелены на описание вида взаимодействия, потому что это интерактивные прототипы, по которым вы можете щелкнуть и посмотреть, как страницы связаны друг с другом.
Волк: Точно, да.
Луи: В своей работе, было ли интерактивное создание прототипов чем-то, что вы делали до того, как построили это, и вы просто увидели, что инструменты там не соответствуют вашим потребностям? Или это было то, к чему вы пришли в результате создания HotGloo?
Вольф: Я думаю, что это было то, что появилось в результате его построения. Когда мы начали с самого начала, мы использовали другие инструменты, которые были там тогда. Мы использовали Axure, и мы использовали Balsamiq.
Для нас эти инструменты, когда мы показывали их нашим дизайнерам, выглядели так: «Ну, это то, что я могу сделать в Illustrator. Это то, что я могу сделать в Photoshop ». Подошла учетная запись управления проектом и сказала:« Ну, это то, что я могу сделать в PowerPoint или Keynote ».
Когда мы начали с нашего собственного инструмента, мы подумали: «Ну, что отличительного фактора, который вы не можете сделать с этими инструментами, и это жизненно важно для всего процесса?». Это создание интерактивных прототипов и не столько сосредоточение на визуальной иерархии высокой точности Потому что это совсем другая история, чтобы создать идеальный прототип пиксельного прототипа, полностью разработанный и интерактивный.
Мы просто хотели убедиться, что каркас создания процессов максимально прост, но у вас есть вся гибкость в создании действительно умных интерактивных связей в ваших прототипах. Для нас это была не столько визуальная иерархия, чтобы быть по-настоящему визуальной, точной и по-настоящему точной, но что-то, что идет от действительно грубых каркасов к добавлению все большего и большего количества взаимодействий. По сути, создайте действительно интерактивный каркас, интеллектуальные взаимодействия с несколькими стеками и изменениями состояния из вашего проекта.
Луи: Да, это одна из тех вещей, которые привлекли меня к этому инструменту, между прочим. Я поиграл с несколькими различными инструментами каркасного моделирования, и многие из них будут иметь ссылки с одной страницы на другую. Но иногда, когда вы работаете над чем-то, что является форумом или многоэтапным процессом, который включает в себя изменения в состоянии, как вы упомянули, просто связывание между страницами затруднительно. Или вы должны создать страницу для каждого возможного состояния приложения.
Принимая во внимание, что в вашем инструменте вы как бы встроили несколько небольших примитивных концепций программирования, которые дают вам возможность немного больше взаимодействовать, например, изменять состояние. Если вы выберете опцию в раскрывающемся списке, это может повлиять на состояние, а затем нажатие следующей кнопки приведет к изменению в зависимости от этого состояния. Таким образом, вы действительно можете создать прототип, который будет довольно точным представлением окончательного потока того, что чувствовало бы настоящее приложение.
Волк: Да.
Луи: По крайней мере, я не думаю, что у меня возникла ситуация, когда мне нужно было взаимодействие, которое я не мог взломать вместе с комбинациями стеков и переменных в HotGloo.
Волк: Да. Там есть пара, на которую мы сейчас смотрим. Как некоторые временные взаимодействия или тому подобное. В целом, это была наша идея. Когда вы создаете интерактивные каркасы, это может занять очень много времени. Я понял это из всей дискуссии, которая происходит сейчас в сети. Теперь люди говорят: «Ну, весь процесс создания каркаса очень трудоемкий. Почему бы не пропустить это и не перейти прямо к прототипу HTML?
Да. Для тех, кто знаком с кодированием, отлично. Для нас это было сделано для того, чтобы создать действительно сложный интерактивный каркас, нам нужно было максимально упростить этот процесс. Многие другие инструменты, они просто связывают в основном картинки, которые они делают из взаимодействий.
Но для нас было важно, чтобы при использовании навигации и внесении в эту навигационную карту всей карты сайта было изменено, например, имя страницы на карте сайта. Затем имя страницы в навигации также меняется, потому что это и сама идея интерактивного каркаса.
Это умная маленькая вещь, которая обновляется после смены мастера, по мнению мастера. Мастер меняется на каждой странице, которую вы его ставите. Интерактивные каркасы не должны быть процессом, который в целом отнимает столько времени, что, в конце концов, вы думаете: «Что ж, я мог бы сэкономить это время и сразу перейти к прототипированию HTML».
Луи: Точно. Вы кратко затронули идею людей, желающих создавать прототипы непосредственно в HTML, а не использовать такой инструмент. Я предполагаю, что аргумент в том, что когда вы закончите, у вас есть первые шаги готового продукта. Считаете ли вы, что для некоторых команд это правильная стратегия? Или вы действительно сильно верите в идею создания прототипа вне HTML, а затем окунитесь в код только после того, как взаимодействие действительно будет завершено?
Волк: Честно говоря, я глубоко верю, что у каждого есть свой инструмент или его инструментарий. Есть люди, которые прыгают в создание прототипов HTML, и для них они никогда не вернутся и не сделают каркас снова в стороннем инструменте.
Я просто вижу, что многие люди, приходящие на каркас, еще не думали об этом процессе. Когда мы начали с первого вида обновлений, у нас было, как-то, мы увидели, что существует острая необходимость в разговорах об этом и такого рода образовательных вещах. То, что мы также пытаемся примерно визуализировать с помощью нашего постерного блога и каркасной среды, где мы просто сканируем Интернет и пытаемся собрать статьи, которые мы нашли по теме каркасного моделирования и прототипирования, и эти опытные темы.
Потому что я твердо верю, что есть так много людей и так много команд, которые даже не думают о процессе попытки что-то выложить, прежде чем они действительно начнут его создавать. Итак, я бы сказал, что для этих людей действительно разумно иметь инструмент, потому что в большинстве случаев они не разработчики. Они не знают языков программирования.
Иногда они руководители проектов, дизайнеры. Мы также видим, как графические дизайнеры прыгают в веб-дизайн, которые вынуждены заниматься проектами веб-дизайна, которые как бы пришли к нам и сказали: «Ну, это действительно крутой инструмент, потому что впервые я очень легко могу собрать что-то, что интерактивный, кликабельный, который я могу показать нашим клиентам ».
Это то, что действительно важно для нас. Хотя мы считаем себя профессиональным инструментом, но на самом деле есть люди, которые впервые испытывают эти процессы, а также справляются с этим инструментом так же легко, как тот, кто попробовал кучу инструментов и действительно опытен.
Луи: Да, абсолютно. Одна из вещей, которые я обнаружил, заключается в том, что, если вы пытаетесь создавать каркасы или прототипы в таком сложном инструменте проектирования, как Photoshop, или пытаетесь делать их в коде, это то, что очень легко случайно оказаться втянутым в работу над деталями. , Трудно удержать себя в сознании: «Все, что я пытаюсь сделать здесь, это закрепить взаимодействие».
Я начинаю беспокоиться о радиусе угла и оттенке градиента, а не о том, какие слова на странице и какие ссылки на что.
Волк: Да. Иногда мне кажется, что вся эта идея прототипирования HTML не столь далека от процесса, который мы имели прежде, прыгнув прямо в дизайн в Photoshop. Как вы упомянули, вы погружаетесь в детали. Это то, что происходило и раньше. Это было не так много на интерактивной стороне, но это было на стороне дизайна.
Но это было также с проектированием или переходом прямо в дизайн в Photoshop, это было с первого щелчка, вы в деталях работы. Вы задумываетесь о радиусе градиента и думаете о цвете, всей цветовой сфере проекта, который вы строите.
Мы все тогда согласились с тем, что начинать с дизайна не стоит. Теперь это обсуждение о начале с прототипированием HTML. Иногда я вижу действительно сходство этих двух процессов. Не в общем, но в такого рода погружении в детали, которые с каркасным дизайном, вы как бы пропускаете или исключаете.
У нас есть люди, которые приходят к нам и как бы спрашивают о функциях или пытаются получить обратную связь. Многие из этих отзывов, когда вы анализируете их, все больше и больше углубляются в детали. Люди хотели бы иметь больше цветовых палитр. Они хотели бы иметь больше шрифтов. Они хотели бы, чтобы все символы вращались и тому подобное.
Я всегда напоминаю им, что наше видение инструмента — это не инструмент визуального дизайна. Это каркасный инструмент. Все, что входит в подробности для меня лично, похоже на создание прототипа. Это то, что вы можете сделать в браузере. Это то, что вы делаете, или вы можете сделать это потом, когда разрабатываете страницу, а это не то, что вам обязательно нужно делать при создании каркаса.
Луи: Да. Одна из вещей, которую наш коллектив нашел в отношении такого интерактивного создания прототипов, — он заставляет уделять больше внимания словам на каждой странице. Не только содержание, но и копия, которая сопровождает любую функциональность приложения. Принимая во внимание, что если вы начинаете заниматься дизайном, вы думаете о пикселях и градиентах и добавляете туда немного lorem ipsum. Если вы начинаете с прототипа HTML, вы можете делать то же самое.
Но когда вы работаете с каркасным или интерактивным прототипом, единственное, что кто-то видит, когда попадает на эту страницу, — это несколько слов на кнопке. Затем вы думаете о том, что это за слова и какие слова являются лучшими и как объяснить процесс, особенно когда вы работаете со сложным процессом.
Первой работой, которую я сделал для этого, была работа над изменением всего процесса продажи листингов. Это массивно — в конечном итоге он становится как бы семиступенчатым волшебником с множеством движущихся частей. По-настоящему заставлять нас обращать внимание на слова на странице было своего рода откровением, которое, как я полагаю, от команды, которая всегда как бы «придумывает идею для чего-то, а затем сразу начинает ее строить», чтобы начать думать о вещах. немного больше времени.
Волк: Это я сам, я могу очень запутаться в словах. Микрокопирование и копирование для предупреждений и тому подобного. Иногда я могу зацепить это.
Да, как вы сказали, это визуальный замедленный темп, когда вы смотрите на каркас и видите только оттенки серого, а также поля и кнопки. Единственное, что выделяется — это копия, а копия — одна из самых важных вещей на сайте. Особенно на сайтах продаж, особенно на таких сайтах, как наш, маркетинговый сайт, где вы описываете свой инструмент и пытаетесь заставить людей протестировать его и, надеюсь, зарегистрироваться и стать клиентами.
Так что, да, я бы сказал все, что пригвоздит и удержит фокус там, где вы хотите, чтобы фокус был на самом деле. Это то, что когда мы показываем вещи клиентам, вам не нужно подробно объяснять, что такое каркас. Мы лишь кратко изложим в одном или двух предложениях, на что они смотрят и чего они могут ожидать от этого.
Но они понимают это очень быстро. Тогда почти всем им нравится идея, что теперь они действительно могут сосредоточиться на архитектуре веб-сайта, посмотреть, куда и куда идет информация, а также копия. О котором раньше никто и не задумывался в первую очередь, но это было то, что добавлялось снова и снова, в основном после завершения разработки.
Луи: Точно. Если клиент видит макет, он даже не заметит, что это за слова. Если им не нравится оттенок зеленого, это первое, что приходит им в голову. Они будут похожи на: «Можете ли вы сделать это немного темнее?»
Волк: Да, абсолютно. Да.
Луи: Тогда у вас нет разговора о том, какая страница ссылается на то, где или как слово. Это мой аккаунт или ваш аккаунт? Как эти слова сочетаются друг с другом? Что гораздо важнее, чем оттенок зеленого, но трудно об этом сообщить, если у вас не очень урезанный каркас или прототип.
Как пользовательское тестирование вписывается в ваш рабочий процесс разработки? Если вам нужно проводить пользовательское тестирование, вы делаете это с прототипом или вы действительно строите функцию сначала из прототипа, а затем смотрите на пользователей?
Вольф: Мы попробовали пару вещей. Мы попытались провести пользовательское тестирование с прототипом, которое требует некоторой предварительной работы. Потому что вы должны объяснить тестерам, на что они смотрят, какие действия они должны выполнять, что они на самом деле смотрят не на готовый сайт, а на прототип.
Другая вещь, которую мы затем пытаемся выполнить, — это построить что-то очень грубо, например, сначала взять и выпустить, а затем просто записать действия мыши. Это было то, что мы сделали.
Другие вещи, которые мы делали с пользовательским тестированием, мы пытались получить информацию заранее. Мы постарались привлечь людей к собеседованиям и подготовить их до того, как создали второй пересмотр HotGloo. Мы вроде как вышли и показали людям первый сайт, а затем задали им пару вопросов, чего они ожидают от такого инструмента. Попытка получить как можно больше информации, прежде чем мы даже начали думать о том, что мы собираемся изменить для второй версии.
Иногда я бы сказал, что это целый непрерывный процесс, когда у вас есть пользовательское тестирование, которое начинается с собеседования и получения идей, а затем с помощью прототипа, с помощью юзабилити-тестирования, повторения и повторения тестирования. Иногда вы просто получаете информацию заранее и пытаетесь создать что-то очень быстро, очень быстро. Получите это, проверьте это и повторяйте на пути. Это действительно зависит от проекта.
Я бы сказал, что многое зависит от сложности проекта. Крупный проект, крупные проекты в области электронной коммерции, как правило, занимают гораздо больше времени и требуют гораздо большего тестирования, чем просто небольшой маркетинговый веб-сайт с двумя, двумя, тремя или четырьмя страницами.
Луи: Точно. Есть вопрос, который я абсолютно хотел тебе задать. Потому что теперь, когда вы создали HotGloo как инструмент и продолжаете его разработку, когда вы хотите создать прототип новой функции для HotGloo, вы делаете это в HotGloo сейчас?
Волк: Да.
Луи: Это начало HotGloo?
Волк: Да. Это было также, когда мы сделали, я думаю, что это было почти год назад, когда мы выпустили новый веб-сайт. Теперь мы делаем обновление для всех взаимодействий, и должно быть проще применять взаимодействия, особенно если вы применяете одинаковые взаимодействия к паре элементов.
У нас также есть несколько новых взаимодействий в ближайшее время. Это было то, что мы: «Как будет выглядеть эта новая панель свойств? Нужно ли нам как-то менять внешний вид панели свойств? »Это то, что мы на самом деле строим в HotGloo. Иногда бывает смешно, когда вы видите новые функции, которые выкладываете и задумываете в инструменте, который впоследствии обновляется этими новыми функциями.
Луи: Точно. Итак, вы намекали на это немного. Над какими вещами вы работаете над HotGloo в будущем?
Вольф: Как я только что сказал, взаимодействие — это следующая большая вещь. Поскольку я думаю, что в апреле этого года, я думаю, что это был апрель, мы как бы подумали о том, что мы хотим добавить мобильные виджеты пользовательского интерфейса, потому что у нас есть пара людей, которые говорят: «Почему вы не предлагаете какие-нибудь мобильные трафареты? Я хочу создать каркас приложения для iPhone, приложения для iPad ».
У нас есть все готовые элементы. Но прежде чем мы обновили все элементы, мы вроде как выяснили, что с набором взаимодействий, которые мы имеем сейчас, это не имеет смысла. Есть несколько других взаимодействий, которые на самом деле в мобильном прототипе действительно будут работать, поэтому мы начали работать и над взаимодействиями.
Это в основном план дороги на этот год, это новые взаимодействия. Это виджеты для iPhone, iPad. Мы хотим улучшить узлы обратной связи, потому что весь процесс совместной работы в HotGloo, где мы видим самый большой потенциал, помимо целых интерактивных функций, это узлы обратной связи.
Связь, которая проходит через эти узлы, мы хотим сделать этот процесс проще. Мы хотим создать что-то наподобие каких-то шагов по требованию, чтобы вы могли фактически утвердить узлы, и поэтому команда видит, когда что-то сделано, и когда элемент или веб-страница нуждаются в некоторой работе.
Какая-то система уведомлений, которая может помочь командам быстрее составить каркас своих проектов и вести обзор проекта и процесса проекта, процесса разработки. Это три основные вещи, которые мы рассматриваем в этом году.
Луи: Хорошо, все звучит очень хорошо. Я с нетерпением жду встречи со всем этим.
Позвольте мне просто сказать, большое спасибо, что нашли время поговорить со мной об этом материале. Я очень ценю это.
Волк: Спасибо, что пригласили меня.
Луис: Для слушателей, которые интересуются HotGloo, URL-адрес hotgloo.com , это HOTGLOO.com. Вы также упомянули, что у вас есть постерный вид блога различных заметок и статей, вырезанных из Интернета, касающихся каркасов и дизайна UX в целом. Какой URL для этого?
Вольф: Это www.wireframewednesday.com .
Луи: Wireframewednesday.com. Если слушатели хотят не отставать от вас, у вас есть блог или твиттер?
Вольф: Мой хэндл Twitter — @wdbecvar .
Луи: Хорошо. Еще раз большое спасибо. Я действительно с нетерпением жду встречи с тем, что у HotGloo появится в ближайшие годы.
Волк: Да. Спасибо, что пригласили меня на шоу и позаботьтесь.
Луи: Береги себя.
И спасибо за прослушивание на этой неделе эпизода подкаста SitePoint. Мне бы очень хотелось услышать, что вы думаете о сегодняшнем шоу, так что если у вас есть какие-либо мысли или предложения, просто перейдите на sitepoint.com/podcast и вы можете оставить комментарий к сегодняшнему эпизоду, вы также можете загрузить любой из наших предыдущих эпизодов для загрузки. или подписаться, чтобы получить шоу автоматически. Вы можете следить за SitePoint в Твиттере @sitepointdotcom , это сайт dotpoint dotcom, и вы можете следить за мной в Твиттере @rssaddict .
Шоу на этой неделе было спродюсировано Карном Броудом, а я — Луи Симоне, спасибо за прослушивание и пока.
Аудио транскрипция SpeechPad.
Тема музыки Майка Меллы .
Спасибо за прослушивание! Не стесняйтесь сообщить нам, как у нас дела, или продолжить обсуждение, используя поле комментариев ниже.