«Прототип за 60 секунд: о вайрфреймах и прототипах»
•Download as PPTX, PDF•
2 likes•811 views
28-й IT talk в Петербурге Тема: «Прототип за 60 секунд: о вайрфреймах и прототипах» Спикеры: Анастасия Режепп и Анатолий Рубцов (DataArt) 26 марта 2015 г.
Recommended
More Related Content
Viewers also liked
Viewers also liked (16)
More from DataArt
More from DataArt (20)
«Прототип за 60 секунд: о вайрфреймах и прототипах»
- 1. Прототип за 60 секунд
- 6. Процесс
- 10. Слова Мокап
- 11. Слова Дизайн
- 12. Слова • Low fidelity (низкой точности)
- 13. Слова • High fidelity (высокой точности)
- 19. Зачем все это?
- 20. Зачем все это?
- 21. Эскизы на бумажке для быстрого обсуждения
- 22. Более детальные вайрфреймы для проработки сценариев И так далее…
- 25. InVision
- 28. POP
- 29. AppCooker
- 30. Thank you!
Editor's Notes
- Название у нас киноманское и обманчивое. Никакой прототип за 60 секунд мы делать, конечно, не научим, но расскажем, надеюсь, достаточно.
- Сначала лирическое вступление. Представим, что к вам приходит клиент и говорит: Мне нужен дизайн сайта по продаже одежды, ну, типа как Гэп, по функционалу у нас все примерно то же. Вы включаете своего арт-директора в душе, узнаете, есть ли пожелания по стилю, логотип, предпочтительная цветовая гамма.
- И тут клиент говорит: Да, только у нас нет таких больших фото в базе данных. И еще у нас магазин только для женщин. И еще нет вот этих категорий, и вот этих. И спецпредложения тоже нет.
- И вы остаетесь вот с этим. Потому что мы не изучили ни контент, ни бизнес-цели, ни потребности пользователя. Проблема в том, что мы начали не там, и пришли не к тому. Но наличие вайрфреймов могло бы в какой-то момент существенно снизить трудозатраты.
- Потому что было бы правильнее идти по такой схеме. Как только начинается работа над проектом, мы решаем, что и как будем делать, и для начала заносим это в эстимейты. И сразу же начинается терминология. Например, мы будем делать вайрфреймы 40 часов, а еще 80 часов уйдет на прототип, а потом еще на дизайн столько же. И клиент, и коллеги немедленно приходят с вопросами. Если прототип уже готов, то зачем нам дизайн? А будут ли сделаны мокапы? А можем ли мы обойтись без вайрфреймов? И так далее. Мы терпеливо объясняем, что для таких-то и таких-то целей обязательно пройти такие-то этапы. Но также важно сразу разобраться с терминами. Сразу же оговорюсь – важно договориться в команде и с клиентом. Мнения о том, что такое прототип, могут быть совершенно разными. Даже в процессе подготовки этого доклада мы с Толей немедленно определили, что расходимся в понимании того, что такое мокап, например. Поэтому я сейчас дам стандартные интернетные определения, а дальше расскажу, что под этим подразумеваем мы сами.
- Итак, начнем со скетча – по-русски эскиза. Ну, тут просто. Будем считать, что эскиз – это быстрый набросок от руки. Например, вот такой.
- Переходим к вайрфреймам. На русский это можно нарядно перевести как блок-схема. Все равно никто так не говорит, к сожалению. Здесь уже сложнее. Вообще-то, это функциональные схемы экранов, где показаны все элементы и контролы: куда мы ставим поле поиска, куда картинку, куда заголовок. Мнения тут могут разойтись по поводу того, красить или не красить. Мы, например, считаем, что вайрфреймы должны быть черно-бело-серыми. Любое добавление цвета почти всегда воспринимается клиентом как дизайн. И, показывая вайрфрейм, для того, чтобы обсудить функционал, вы рискуете начать получать комментарии типа «замените эту кнопку цвета киновари на васильковую».
- Прототип – модель для тестирования концепции. Прототип обычно интерактивный, то есть кликабельный. Его гораздо проще воспринимать, нежели ворох отдельных вайрфреймов. Прототип (опять же, в нашей собственной терминологии) может быть сооружен из черно-белых вайрфреймов. А может – из финальных дизайнов. Тут важно понимать, какова цель. О целях попозже.
- Дальше мы можем нарисовать мокап. Тут совсем туго. Потому что изначально мокап – это такой термин из промышленного дизайна. Например, вот этот самолет в натуральную величину из картона – мокап настоящего самолета. А что подразумевается в UX-дизайне – черт ногу сломит. Но, по идее, это наиболее приближенная к жизни модель сайта или системы. То есть или что-то, нарисованное очень близко к финальной версии, или даже конечный дизайн.
- А если мы не удовлетворились мокапом, то тут все-таки финал под названием «дизайн». С этим вроде бы все более-менее понятно. Все раскрашенное, красивое и пиксель-перфектное.
- Какими еще терминами неплохо бы озаботиться? Hi-fidelity и low-fidelity, то есть высокой или низкой точности. Низкой точности быстро набрасываются от руки, в специальных программах для вайрфреймов, или даже в графическом редакторе. Смысл в том, что там можно вставить вместо иконок плейсхолдеры, а текст забить просто полосками. В вайрфреймах высокой точности все элементы четко по местам, и предпочтительно более-менее рассчитать величину всех блоков, размеры заголовков и так далее. Главное – не увлекаться. Потому что, как я уже сказала, очень легко перейти грань, и клиент будет думать, что вы подсовываете ему готовый дизайн, только очень упрощенный.
- Какими еще терминами неплохо бы озаботиться? Hi-fidelity и low-fidelity, то есть высокой или низкой точности. Низкой точности быстро набрасываются от руки, в специальных программах для вайрфреймов, или даже в графическом редакторе. Смысл в том, что там можно вставить вместо иконок плейсхолдеры, а текст забить просто полосками. В вайрфреймах высокой точности все элементы четко по местам, и предпочтительно более-менее рассчитать величину всех блоков, размеры заголовков и так далее. Главное – не увлекаться. Потому что, как я уже сказала, очень легко перейти грань, и клиент будет думать, что вы подсовываете ему готовый дизайн, только очень упрощенный.
- С терминами мы разобрались. Но не получили никакого ответа, зачем все это нужно. Во-первых, зачем в принципе нужна вся эта история? Ведь в былые времена отлично справлялись и без вайрфреймов. Рисовали сразу дизайны экранов, и вроде бы все отлично получалось. Сейчас мне даже трудно представить систему, где таким образом удастся достичь успеха.
- Тут мы возвращаемся к нашей схеме. User Experience Design вышел на качественно другой уровень. Все стараются уделить как можно больше внимания проектированию взаимодействия. Тому, как пользователь будет общаться с продуктом. Удобно ли ему будет. Сможет ли он достичь своих целей с помощью приложения. Под всеми нашими дизайнерскими делами лежит огромная работа по изучению пользовательских целей, созданию сценариев взаимодействия и так далее. Можно нарисовать очень красивые два экрана, но к третьему вы не будете знать, как его приклеить к имеющимся. А когда соберете по кускам целый продукт, обнаружится, что пользоваться им невозможно.
- Поэтому в первую очередь, вайрфреймы и прототипы дают понимание всем участникам процесса, что именно проектируется, и как оно будет работать. Вайрфреймы или эскизы на бумажке очень хороши для того, чтобы побрейнстормить и оперативно решить, как будет выполняться тот или иной пользовательский сценарий. Это очень удобно при работе в команде, или если есть возможность лично встретиться с клиентом и набросать что-то на ходу в беседе.
- Более детальные вайрфреймы. Делаются в специальных программах, под это заточенных. В бальзамике, акшуре или еще десятке других. В этих вайрфреймах вы выставляете все элементы, задаете связи между экранами – и дальше уже зависит от приложения и от ваших навыков. Тут легко дойти до полноценного интерактивного прототипа. Тот же Акшур позволяет делать довольно детальные и интересные трансформации. В то же время можно и нарисовать статические и аккуратные вайры в графическом редакторе, например, адоб иллюстраторе. Все это добро можно обсуждать с клиентом, чтобы понять, сходитесь ли вы в пользовательских целях и способах взаимодействия с продуктом. Финальные экраны можно даже отдавать в разработку: девелоперам гораздо проще работать по готовой структуре, нежели придумывать ее самим, а потом, когда будет утвержден дизайн, все переделывать заново. Это один из важных плюсов всей системы UCD – User Centered Design – то, что сильно экономятся усилия разработчиков.
- Тестировать вайрфреймы, как нам рекомендуют в книжке Handbook of Usability Testing, я лично считаю избыточным. На тему тестирования тоже есть разные мнения. Например, в некоторых фирмах тестируют только прототип с натянутым на него дизайном – максимально близкий к финальному продукту. Мы же придерживаемся мысли, что до дизайна неплохо бы протестировать интерактивный прототип. Прототип при этом должен быть очень качественно выполнен, а задачи аккуратно составлены, чтобы не смущать участников тестирования невыполнимыми тестами. Тестирование может выявить самые неожиданные ошибки в проектировании, и не будь этой фазы с вайрами и прототипом, о них бы узнали, только выпустив продукт в Аппстор! Прототипы мы обычно делаем в различных программах, но не верстаем. Хотя теоретически возможен вариант, когда прототип разной степени проработки будет сверстан, и это, вероятно, лучший вариант для тестирования, но очень трудоемкий.
- Вот, Толя нам показывал Акшур – и это один из наших любимых иструментов. Также мы очень активно пользуемся Бальзамиком – за то, что он довольно прост в освоении и позволяет накидать вайрфреймы почти моментально (если, конечно, у вас в голове есть мысли, что накидывать). Почему он быстр? Потому что страшненький. Бальзамик сразу своей стилистикой отметает необходимость тщательно выверять размеры и выравнивать элементы. То, что в Акшуре будет выглядеть неаккуратностью, в Бальзамике будет будто бы так и нужно. Но, кроме Акшура, есть еще примерно два десятка очень неплохих инструментов, так что есть, что выбрать. Достаточно показать эту табличку: http://www.cooper.com/prototyping-tools , чтобы понять, что прототипировать можно в разном. Все эти инструменты обладают разной степенью легкости освоения, разной скоростью и возможностями. И, что немаловажно – разной ценой. Поэтому довольно сложно опробовать все на свете, так что у нас ограниченный набор любимых инструментов. http://www.cooper.com/journal/2013/07/designers-toolkit-proto-testing-for-prototypes http://www.cooper.com/prototyping-tools
- И, кроме вышеперечисленных, один из наших главных любимцев – InVision. Он достаточно элементарен в освоении, дает возможность бесплатно работать над одним проектом, в нем можно вместе участвовать и комментировать с разных сторон. Минусы у него тоже есть. Для проектирования с нуля он не подходит – туда просто вставляются изображения и ссылки. Зато, если изображения удались, то показать их в Инвижене в сто раз лучше, чем просто кинуть клиенту стопку картинок. https://projects.invisionapp.com/share/GD193Y65N#/screens https://projects.invisionapp.com/share/9WWNMPMS#/screens Инвижен позволяет и добавить некоторые анимации, хотя и немного. Анимация – это отдельная тема. Для некоторых прототипов анимация является ключевым моментом. Если вы проектируете интерфейс для смартфона, прототип без анимации просто не даст всего ощущения происходящего. Особенно учитывая, что, например, в Material Design Guidelines от Гугла анимации уделяется ключевое внимание.
- И, значит, мы имеем такой вот прототип, клиент в восторге от происходящего, а что еще мы с ним делаем? Конкретно этот, например, мы использовали в коридорных тестированиях. Коридорные – это юзабилити тестирование не с использованием целевых групп продукта, а просто с друзьями и коллегами (встреченными, соответственно, в коридоре). Для этого проекта такой вариант подходил, потому что в кино ходят все, и представить себя целевой аудиторией этого продукта было просто. Так вот, мы открывали этот прототип на реальном устройстве с андроидом, и задавали разные задачи. В результате чего получили довольно ценный фидбек, кое-что подправили и вышли на конечную версию дизайна.
- Из похожих продуктов – Marvel app, его любят использовать наши коллеги из Лондона. Отличается он от Инвижена (проверить, чем отличается). Мы обычно пользуемся этими приложениями для того, чтобы собрать готовые дизайны в один макет. Но есть и другой путь. И Инвижн, и Марвел могут с удовольствием съесть фотографии ваших эскизов от руки. В которые вы точно так же добавите интерактив в виде ссылок.
- Если же задача сделать прототип чисто под мобильное устройство, тут может помочь POP. Он тоже элементарен в использовании, и вы делаете прототип с помощью своего же смартфона и его камеры. Получается что-то такое (Янин прототип?) https://popapp.in/w/projects/5332d5fe71df1b7a38597df6/preview/533558bf71df1b7a38599244
- Еще когда-то вышла, казалось бы, удобная вещь AppCooker – вы можете делать аккуратный и изящный прототип для айпада, например, прямо с помощью айпада. Но в нашем случае почему-то не прижилась. Но иметь эту программу в виду определенно стоит. Большой ее плюс в том, что там есть библиотека нативных iOS контролов. AppCooker работает только под iOS, а вот POP можно использовать также и на андроиде.
- Наверное, мы прояснили важность вайрфреймирования и прототипирования в жизни каждого проектировщика интерфейсов. И теперь плавно перейдем ко второй части нашего балета. Мы сейчас в реальном времени (правда, не за 60 секунд, как мы обещали в анонсе, а чуть за подольше) попробуем спроектировать экран чекаута. Почему именно такой экран мы выбрали, расскажет Толя.
- Наверное, мы прояснили важность вайрфреймирования и прототипирования в жизни каждого проектировщика интерфейсов. И теперь плавно перейдем ко второй части нашего балета. Мы сейчас в реальном времени (правда, не за 60 секунд, как мы обещали в анонсе, а чуть за подольше) попробуем спроектировать экран чекаута. Почему именно такой экран мы выбрали, расскажет Толя.
- Наверное, мы прояснили важность вайрфреймирования и прототипирования в жизни каждого проектировщика интерфейсов. И теперь плавно перейдем ко второй части нашего балета. Мы сейчас в реальном времени (правда, не за 60 секунд, как мы обещали в анонсе, а чуть за подольше) попробуем спроектировать экран чекаута. Почему именно такой экран мы выбрали, расскажет Толя.
- Наверное, мы прояснили важность вайрфреймирования и прототипирования в жизни каждого проектировщика интерфейсов. И теперь плавно перейдем ко второй части нашего балета. Мы сейчас в реальном времени (правда, не за 60 секунд, как мы обещали в анонсе, а чуть за подольше) попробуем спроектировать экран чекаута. Почему именно такой экран мы выбрали, расскажет Толя.